update

public/index.html

@@ -15,6 +15,6 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
     
-    <script src="//at.alicdn.com/t/font_1667193_8v2yoxguspq.js"></script>
+    <script src="//at.alicdn.com/t/font_2266335_sink06liepd.js"></script>
   </body>
 </html>

src/types/slides.ts

@@ -60,12 +60,12 @@ export interface PPTIconElement extends PPTElementBaseProps, PPTElementSizeProps
 }
 
 export interface PPTLineElement extends PPTElementBaseProps {
-  start: number[];
-  end: number[];
+  start: [number, number];
+  end: [number, number];
   width: number;
   style: string;
   color: string;
-  marker: string[];
+  marker: [string, string];
   lineType: string;
 }
 
@@ -121,6 +121,7 @@ export interface PPTAnimation {
 
 export interface Slide {
   id: string;
+  background: [string, string];
   elements: PPTElement[];
   animations: PPTAnimation[];
 }

src/views/Editor/Canvas/AlignmentLine.vue

@@ -0,0 +1,65 @@
+<template>
+  <div 
+    class="alignment-line"
+    :style="{
+      left: axis.x + 'px',
+      top: axis.y + 'px',
+    }"
+  >
+    <div 
+      :class="['line', type]" 
+      :style="type === 'vertical' ? { height: length + 'px' } : { width: length + 'px' }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue'
+
+type AlignmentLineType = 'vertical' | 'horizontal'
+
+interface Axis {
+  x: number;
+  y: number;
+}
+
+export default {
+  name: 'alignment-line',
+  props: {
+    type: {
+      type: String as PropType<AlignmentLineType>,
+      required: true,
+    },
+    axis: {
+      type: Object as PropType<Axis>,
+      required: true,
+    },
+    length: {
+      type: Number,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.alignment-line {
+  position: absolute;
+  z-index: 100;
+
+  .line {
+    width: 0;
+    height: 0;
+    border: 0 dashed $themeColor;
+
+    &.vertical {
+      margin-left: -0.5px;
+      border-left-width: 1px;
+    }
+    &.horizontal {
+      margin-top: -0.5px;
+      border-top-width: 1px;
+    }
+  }
+}
+</style>

src/views/Editor/Canvas/GridLines.vue

@@ -0,0 +1,51 @@
+<template>
+  <div 
+    class="grid-lines"
+    :style="style"
+  ></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+
+export default defineComponent({
+  name: 'grid-lines',
+  props: {
+    gridSize: {
+      type: Number,
+      default: 20,
+    },
+    gridColor: {
+      type: String,
+      default: 'rgba(100, 100, 100, 0.2)',
+    },
+  },
+  setup(props) {
+    const style = computed(() => {
+      const gridSize = props.gridSize + 'px'
+      const gridSpacing = props.gridSize - 1 + 'px'
+      const gridColor = props.gridColor
+
+      return {
+        backgroundImage: `linear-gradient(transparent ${gridSpacing}, ${gridColor} ${gridSpacing}, ${gridColor} ${gridSize}), linear-gradient(90deg, transparent ${gridSpacing}, ${gridColor} ${gridSpacing}, ${gridColor} ${gridSize})`,
+        backgroundSize: `${gridSize} ${gridSize}`,
+      }
+    })
+
+    return {
+      style,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.grid-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-position: 0 0;
+}
+</style>

src/views/Editor/Canvas/SlideBackground.vue

@@ -0,0 +1,57 @@
+<template>
+  <div 
+    class="slide-background"
+    :style="backgroundStyle"
+  >
+    <template v-if="isShowGridLines">
+      <GridLines />
+      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.3)" />
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from 'vue'
+import GridLines from './GridLines'
+
+export default defineComponent({
+  name: 'slide-background',
+  components: {
+    GridLines,
+  },
+  props: {
+    background: {
+      type: Array,
+    },
+    isShowGridLines: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const backgroundStyle = computed(() => {
+      if(!props.background) return { backgroundColor: '#fff' }
+
+      const [type, value] = props.background
+      if(type === 'solid') return { backgroundColor: value }
+      else if(type === 'image') return { backgroundImage: `url(${value}` }
+
+      return { backgroundColor: '#fff' }
+    })
+
+    return {
+      backgroundStyle,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.slide-background {
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-size: cover;
+  position: absolute;
+}
+</style>