编辑区域结构调整

src/components/Contextmenu/ContextmenuContent.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { PropType, defineComponent } from 'vue'
 import { ContextmenuItem } from './types'
 
-export default {
+export default defineComponent({
   name: 'contextmenu-content',
   props: {
     menus: {
@@ -47,7 +47,7 @@ export default {
       required: true,
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -59,8 +59,8 @@ $subMenuWidth: 120px;
   width: $menuWidth;
   padding: 5px 0;
   background: #fff;
-  border: 1px solid #ccc;
-  box-shadow: 3px 3px 3px rgba(#000, 0.3);
+  border: 1px solid #eee;
+  box-shadow: 3px 3px 3px rgba(#000, 0.15);
   border-radius: 2px;
   list-style: none;
   margin: 0;
@@ -69,7 +69,7 @@ $subMenuWidth: 120px;
   padding: 0 20px;
   color: #555;
   font-size: 12px;
-  transition: all 0.2s;
+  transition: all .1s;
   white-space: nowrap;
   height: $menuHeight;
   line-height: $menuHeight;

src/views/Editor/Canvas/GridLines.vue

@@ -17,7 +17,7 @@ export default defineComponent({
     },
     gridColor: {
       type: String,
-      default: 'rgba(100, 100, 100, 0.2)',
+      default: 'rgba(100, 100, 100, 0.1)',
     },
   },
   setup(props) {

src/views/Editor/Canvas/SlideBackground.vue

@@ -5,7 +5,7 @@
   >
     <template v-if="showGridLines">
       <GridLines />
-      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.3)" />
+      <GridLines :gridSize="100" gridColor="rgba(100, 100, 100, 0.35)" />
     </template>
   </div>
 </template>

src/views/Editor/Canvas/index.vue

@@ -8,67 +8,68 @@
     v-click-outside="removeEditorAreaFocus"
   >
     <div 
-      class="operates"
-      :style="{
-        left: viewportStyles.left + 'px',
-        top: viewportStyles.top + 'px',
-      }"
-    >
-      <AlignmentLine 
-        v-for="(line, index) in alignmentLines" 
-        :key="index" 
-        :type="line.type" 
-        :axis="line.axis" 
-        :length="line.length"
-      />
-      <MultiSelectOperate 
-        v-if="activeElementIdList.length > 1"
-        :elementList="elementList"
-        :scaleMultiElement="scaleMultiElement"
-      />
-      <Operate
-        v-for="element in elementList" 
-        :key="element.id"
-        :elementInfo="element"
-        :isSelected="activeElementIdList.includes(element.id)"
-        :isActive="handleElementId === element.id"
-        :isActiveGroupElement="activeGroupElementId === element.id"
-        :isMultiSelect="activeElementIdList.length > 1"
-        :rotateElement="rotateElement"
-        :scaleElement="scaleElement"
-      />
-    </div>
-
-    <div 
-      class="viewport" 
-      ref="viewportRef"
+      class="viewport-wrapper"
       :style="{
         width: viewportStyles.width + 'px',
         height: viewportStyles.height + 'px',
         left: viewportStyles.left + 'px',
         top: viewportStyles.top + 'px',
-        transform: `scale(${canvasScale})`,
       }"
     >
-      <MouseSelection 
-        v-if="mouseSelectionState.isShow"
-        :top="mouseSelectionState.top" 
-        :left="mouseSelectionState.left" 
-        :width="mouseSelectionState.width" 
-        :height="mouseSelectionState.height" 
-        :quadrant="mouseSelectionState.quadrant"
-      />
-
-      <SlideBackground />
-      
-      <EditableElement 
-        v-for="(element, index) in elementList" 
-        :key="element.id"
-        :elementInfo="element"
-        :elementIndex="index + 1"
-        :isMultiSelect="activeElementIdList.length > 1"
-        :selectElement="selectElement"
-      />
+      <div class="operates">
+        <AlignmentLine 
+          v-for="(line, index) in alignmentLines" 
+          :key="index" 
+          :type="line.type" 
+          :axis="line.axis" 
+          :length="line.length"
+        />
+        <MultiSelectOperate 
+          v-if="activeElementIdList.length > 1"
+          :elementList="elementList"
+          :scaleMultiElement="scaleMultiElement"
+        />
+        <Operate
+          v-for="element in elementList" 
+          :key="element.id"
+          :elementInfo="element"
+          :isSelected="activeElementIdList.includes(element.id)"
+          :isActive="handleElementId === element.id"
+          :isActiveGroupElement="activeGroupElementId === element.id"
+          :isMultiSelect="activeElementIdList.length > 1"
+          :rotateElement="rotateElement"
+          :scaleElement="scaleElement"
+        />
+        <SlideBackground
+          :style="{
+            width: viewportStyles.width * canvasScale + 'px',
+            height: viewportStyles.height * canvasScale + 'px',
+          }"
+        />
+      </div>
+
+      <div 
+        class="viewport" 
+        ref="viewportRef"
+        :style="{ transform: `scale(${canvasScale})` }"
+      >
+        <MouseSelection 
+          v-if="mouseSelectionState.isShow"
+          :top="mouseSelectionState.top" 
+          :left="mouseSelectionState.left" 
+          :width="mouseSelectionState.width" 
+          :height="mouseSelectionState.height" 
+          :quadrant="mouseSelectionState.quadrant"
+        />      
+        <EditableElement 
+          v-for="(element, index) in elementList" 
+          :key="element.id"
+          :elementInfo="element"
+          :elementIndex="index + 1"
+          :isMultiSelect="activeElementIdList.length > 1"
+          :selectElement="selectElement"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -173,6 +174,11 @@ export default defineComponent({
       else if(e.deltaY < 0) throttleScaleCanvas('+')
     }
 
+    const showGridLines = computed(() => store.state.showGridLines)
+    const toggleGridLines = () => {
+      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
+    }
+
     const contextmenus = (): ContextmenuItem[] => {
       return [
         {
@@ -186,6 +192,13 @@ export default defineComponent({
           handler: pasteElement,
         },
         {
+          text: '网格参考线',
+          children: [
+            { text: '网格线', handler: toggleGridLines },
+            { text: '参考线' },
+          ],
+        },
+        {
           text: '清空本页',
           handler: deleteAllElements,
         },
@@ -226,13 +239,14 @@ export default defineComponent({
   background-color: #f9f9f9;
   position: relative;
 }
-.viewport {
+.viewport-wrapper {
   position: absolute;
-  transform-origin: 0 0;
-  background-color: #fff;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1);
 }
-.operates {
+.viewport {
   position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
 }
 </style>

src/views/Editor/CanvasTool/index.vue

@@ -18,7 +18,6 @@
       <IconFont class="handler-item viewport-size" type="icon-minus" @click="scaleCanvas('-')" />
       <span class="text">{{canvasScalePercentage}}</span>
       <IconFont class="handler-item viewport-size" type="icon-plus" @click="scaleCanvas('+')" />
-      <IconFont class="handler-item viewport-size" type="icon-number" @click="toggleGridLines()" />
     </div>
   </div>
 </template>
@@ -26,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useStore } from 'vuex'
-import { MutationTypes, State } from '@/store'
+import { State } from '@/store'
 import useScaleCanvas from '@/hooks/useScaleCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -35,7 +34,6 @@ export default defineComponent({
   setup() {
     const store = useStore<State>()
     const canvasScale = computed(() => store.state.canvasScale)
-    const showGridLines = computed(() => store.state.showGridLines)
     const canUndo = computed(() => store.getters.canUndo)
     const canRedo = computed(() => store.getters.canRedo)
 
@@ -44,14 +42,9 @@ export default defineComponent({
     const { scaleCanvas } = useScaleCanvas()
     const { redo, undo } = useHistorySnapshot()
 
-    const toggleGridLines = () => {
-      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
-    }
-
     return {
       scaleCanvas,
       canvasScalePercentage,
-      toggleGridLines,
       canUndo,
       canRedo,
       redo,