feat: 新增标尺

sweetwisdom · Apr 23, 2023 · f3952c4 · f3952c4
1 parent 75e6487
commit f3952c4
Show file tree

Hide file tree

Showing 10 changed files with 526 additions and 13 deletions.
diff --git a/src/components/vue3-ruler-tool/index.vue b/src/components/vue3-ruler-tool/index.vue
diff --git a/src/components/webtopo-svg-edit/components/center-panel/index.vue b/src/components/webtopo-svg-edit/components/center-panel/index.vue
@@ -823,7 +823,7 @@
     outline: 1px solid rgb(23, 222, 30);
   }
   .contextMenu {
-    position: absolute;
+    position: fixed;
     z-index: 99999;
     background: #ffffff;
     padding: 5px 0;

diff --git a/src/components/webtopo-svg-edit/components/right-panel/index.vue b/src/components/webtopo-svg-edit/components/right-panel/index.vue
@@ -17,6 +17,9 @@
           <el-form-item label="网格" size="small">
             <el-switch v-model="configStore.svg.grid"></el-switch>
           </el-form-item>
+          <el-form-item label="标尺" size="small">
+            <el-switch v-model="configStore.svg.ruler"></el-switch>
+          </el-form-item>
           <!-- 基础版不做画布缩放了 有需要自己写吧（^-^）！ -->
           <!-- <el-form-item label="缩放" size="small">
             <el-input-number

diff --git a/src/components/webtopo-svg-edit/index.vue b/src/components/webtopo-svg-edit/index.vue
@@ -17,7 +17,17 @@
         </el-aside>
         <el-main class="middle main">
           <div class="canvas-main-pc">
-            <center-panel></center-panel>
+            <vue3-ruler-tool
+              class="canvas-main-pc"
+              :value="presetLine"
+              :step-length="50"
+              :parent="true"
+              :is-scale-revise="false"
+              v-model:visible="configStore.svg.ruler"
+              @input="input"
+            >
+              <center-panel></center-panel>
+            </vue3-ruler-tool>
           </div>
         </el-main>
         <el-aside class="side-nav" :class="svgEditLayoutStore.right_nav ? 'show-nav' : 'hide-nav'">
@@ -87,6 +97,8 @@
   import { useGlobalStore } from '@/store/global';
   import { IDoneJson } from '@/store/global/types';
   import 'animate.css';
+  import { useConfigStore } from '@/store/config';
+  import vue3RulerTool from '@/components/vue3-ruler-tool/index.vue';
   const props = defineProps({
     customToolBar: {
       type: Object as PropType<IConfigCenter>,
@@ -97,8 +109,13 @@
       default: ''
     }
   });
+  const presetLine = ref([]);
+  const input = (list: any) => {
+    presetLine.value = list;
+  };
   const globalStore = useGlobalStore();
   const svgEditLayoutStore = useSvgEditLayoutStore();
+  const configStore = useConfigStore();
   const importJsonRef = ref<InstanceType<typeof ImportJson>>();
   const visible_conf: IVisibleConf = reactive({
     [EVisibleConfKey.ExportJson]: false,

diff --git a/src/components/webtopo-svg-preview/index.vue b/src/components/webtopo-svg-preview/index.vue
@@ -132,8 +132,8 @@
         background_color: '#fff',
         scale: 1,
         position_center: {
-          x: -315,
-          y: -95
+          x: -333,
+          y: -113
         },
         svg_position_center: {
           x: 50,

diff --git a/src/store/config/index.ts b/src/store/config/index.ts
@@ -10,14 +10,15 @@ export const useConfigStore = defineStore('config-store', {
         background_color: '#fff',
         scale: 1,
         position_center: {
-          x: -315,
-          y: -95
+          x: -333,
+          y: -113
         },
         svg_position_center: {
           x: 50,
           y: 50
         },
-        grid: true
+        grid: true,
+        ruler: true
       }
     };
   },

diff --git a/src/store/config/types.ts b/src/store/config/types.ts
@@ -13,4 +13,5 @@ export interface IPositionCenterSvg {
     y: number;
   };
   grid: boolean;
+  ruler: boolean;
 }
diff --git a/src/views/demo/edit-load.vue b/src/views/demo/edit-load.vue
@@ -22,8 +22,8 @@
         background_color: '#fff',
         scale: 1,
         position_center: {
-          x: -315,
-          y: -95
+          x: -333,
+          y: -113
         },
         svg_position_center: {
           x: 50,

diff --git a/src/views/demo/preview-test.vue b/src/views/demo/preview-test.vue
@@ -15,8 +15,8 @@
       background_color: '#fff',
       scale: 1,
       position_center: {
-        x: -315,
-        y: -95
+        x: -333,
+        y: -113
       },
       svg_position_center: {
         x: 50,

diff --git a/src/views/demo/set-node-attr.vue b/src/views/demo/set-node-attr.vue
@@ -24,8 +24,8 @@
       background_color: '#fff',
       scale: 1,
       position_center: {
-        x: -315,
-        y: -95
+        x: -333,
+        y: -113
       },
       svg_position_center: {
         x: 50,