From f3952c4c7cd8774735ca0c54c0c316ec5fe9caaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com>
Date: Sun, 23 Apr 2023 20:35:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=87=E5=B0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vue3-ruler-tool/index.vue      | 491 ++++++++++++++++++
 .../components/center-panel/index.vue         |   2 +-
 .../components/right-panel/index.vue          |   3 +
 src/components/webtopo-svg-edit/index.vue     |  19 +-
 src/components/webtopo-svg-preview/index.vue  |   4 +-
 src/store/config/index.ts                     |   7 +-
 src/store/config/types.ts                     |   1 +
 src/views/demo/edit-load.vue                  |   4 +-
 src/views/demo/preview-test.vue               |   4 +-
 src/views/demo/set-node-attr.vue              |   4 +-
 10 files changed, 526 insertions(+), 13 deletions(-)
 create mode 100644 src/components/vue3-ruler-tool/index.vue

diff --git a/src/components/vue3-ruler-tool/index.vue b/src/components/vue3-ruler-tool/index.vue
new file mode 100644
index 0000000..db84cd0
--- /dev/null
+++ b/src/components/vue3-ruler-tool/index.vue
@@ -0,0 +1,491 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
+    <section v-show="$props.visible">
+      <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+        <span
+          v-for="(item, index) in xScale"
+          :key="index"
+          :style="{ left: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ item.id }}</span
+        >
+      </div>
+      <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+        <span
+          v-for="(item, index) in yScale"
+          :key="index"
+          :style="{ top: index * 50 + 2 + 'px' }"
+          class="n"
+          >{{ item.id }}</span
+        >
+      </div>
+      <div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h" />
+      <div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v" />
+      <div
+        v-for="item in lineList"
+        :title="item.title"
+        :style="getLineStyle(item)"
+        :key="item.id"
+        :class="`vue-ruler-ref-line-${item.type}`"
+        @mousedown="handleDragLine(item)"
+      ></div>
+    </section>
+    <div ref="content" class="vue-ruler-content" :style="contentStyle">
+      <slot />
+    </div>
+    <div v-show="isDrag" class="vue-ruler-content-mask"></div>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+  export default defineComponent({
+    name: 'V3RulerComponent',
+    props: {
+      position: {
+        type: String,
+        default: 'relative',
+        validator: (val: string) => {
+          return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1;
+        }
+      }, // 规定元素的定位类型
+      isHotKey: {
+        type: Boolean,
+        default: true
+      }, // 热键开关
+      isScaleRevise: {
+        type: Boolean,
+        default: false
+      }, // 刻度修正(根据content进行刻度重置)
+      value: {
+        type: Array,
+        default: () => {
+          return [
+            { type: 'h', site: 50 },
+            { type: 'v', site: 180 }
+          ]; //
+        }
+      }, // 预置参考线
+      contentLayout: {
+        type: Object,
+        default: () => {
+          return { top: 0, left: 0 };
+        }
+      }, // 内容部分布局
+      parent: {
+        type: Boolean,
+        default: false
+      },
+      visible: {
+        type: Boolean,
+        default: true
+      },
+      stepLength: {
+        type: Number,
+        default: 50,
+        validator: (val: number) => val % 10 === 0
+      } // 步长
+    },
+    emits: ['input', 'update:visible'],
+    setup(props, context) {
+      /**
+       * @description 绑定事件 on(element, event, handler)
+       */
+      const on = (function () {
+        return function (element: any, event: any, handler: any) {
+          if (element && event && handler) {
+            element.addEventListener(event, handler, false);
+          }
+        };
+      })();
+
+      /**
+       * @description 解绑事件 off(element, event, handler)
+       */
+      const off = (function () {
+        return function (element: any, event: any, handler: any) {
+          if (element && event) {
+            element.removeEventListener(event, handler, false);
+          }
+        };
+      })();
+      const size = 17;
+      let left_top = 18; // 内容左上填充
+      let windowWidth = ref(0); // 窗口宽度
+      let windowHeight = ref(0); // 窗口高度
+      let xScale = ref<[{ id: number }]>([{ id: 0 }]); // 水平刻度
+      let yScale = ref<[{ id: number }]>([{ id: 0 }]); // 垂直刻度
+      let topSpacing = 0; // 标尺与窗口上间距
+      let leftSpacing = 0; //  标尺与窗口左间距
+      let isDrag = ref(false);
+      let dragFlag = ''; // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
+      let horizontalDottedLeft = ref(-999); // 水平虚线位置
+      let verticalDottedTop = ref(-999); // 垂直虚线位置
+      let rulerWidth = 0; // 垂直标尺的宽度
+      let rulerHeight = 0; // 水平标尺的高度
+      let dragLineId = ''; // 被移动线的ID
+      //ref
+      const content = ref(null);
+      const el = ref(null);
+      const verticalRuler = ref(null);
+      const horizontalRuler = ref(null);
+      const wrapperStyle: any = computed(() => {
+        return {
+          width: windowWidth.value + 'px',
+          height: windowHeight.value + 'px',
+          position: props.position
+        };
+      });
+      const contentStyle = computed(() => {
+        return {
+          left: props.contentLayout.left + 'px',
+          top: props.contentLayout.top + 'px',
+          padding: left_top + 'px 0px 0px ' + left_top + 'px'
+        };
+      });
+      const lineList = computed(() => {
+        let hCount = 0;
+        let vCount = 0;
+        return props.value.map((item: any) => {
+          const isH = item.type === 'h';
+          return {
+            id: `${item.type}_${isH ? hCount++ : vCount++}`,
+            type: item.type,
+            title: item.site.toFixed(2) + 'px',
+            [isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
+          };
+        });
+      });
+      onMounted(() => {
+        on(document, 'mousemove', dottedLineMove);
+        on(document, 'mouseup', dottedLineUp);
+        init();
+        on(window, 'resize', windowResize);
+      });
+      onBeforeUnmount(() => {
+        off(document, 'mousemove', dottedLineMove);
+        off(document, 'mouseup', dottedLineUp);
+        off(window, 'resize', windowResize);
+      });
+      //function
+      const init = () => {
+        box();
+        scaleCalc();
+      };
+
+      const windowResize = () => {
+        xScale.value = [{ id: 0 }];
+        yScale.value = [{ id: 0 }];
+        init();
+      };
+      const getLineStyle = ({ type, top, left }: any) => {
+        return type === 'h' ? { top: top + 'px' } : { left: left + 'px' };
+      };
+      const handleDragLine = ({ type, id }: any) => {
+        return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id);
+      };
+      //获取窗口宽与高
+      const box = () => {
+        if (props.isScaleRevise) {
+          // 根据内容部分进行刻度修正
+          const contentLeft = (content.value as any).offsetLeft;
+          const contentTop = (content.value as any).offsetTop;
+          getCalcRevise(xScale.value, contentLeft);
+          getCalcRevise(yScale.value, contentTop);
+        }
+        if (props.parent) {
+          const style = window.getComputedStyle((el.value as any).parentNode, null);
+          windowWidth.value = parseInt(style.getPropertyValue('width'), 10);
+          windowHeight.value = parseInt(style.getPropertyValue('height'), 10);
+        } else {
+          windowWidth.value = document.documentElement.clientWidth - leftSpacing;
+          windowHeight.value = document.documentElement.clientHeight - topSpacing;
+        }
+        rulerWidth = (verticalRuler.value as any).clientWidth;
+        rulerHeight = (horizontalRuler.value as any).clientHeight;
+        setSpacing();
+      };
+      const setSpacing = () => {
+        topSpacing = (horizontalRuler.value as any).getBoundingClientRect().y; //.offsetParent.offsetTop
+        leftSpacing = (verticalRuler.value as any).getBoundingClientRect().x; // .offsetParent.offsetLeft
+      };
+      // 计算刻度
+      const scaleCalc = () => {
+        getCalc(xScale.value, windowWidth.value);
+        getCalc(yScale.value, windowHeight.value);
+      };
+
+      //获取刻度
+      const getCalc = (array: [{ id: number }], length: any) => {
+        for (let i = 0; i < (length * props.stepLength) / 50; i += props.stepLength) {
+          if (i % props.stepLength === 0 && i != 0) {
+            array.push({ id: i });
+          }
+        }
+        console.log(array, 225);
+      };
+      // 获取矫正刻度方法
+      const getCalcRevise = (array: [{ id: number }], length: any) => {
+        for (let i = 0; i < length; i += 1) {
+          if (i % props.stepLength === 0 && i + props.stepLength <= length) {
+            array.push({ id: i });
+          }
+        }
+        console.log(array, 233);
+      };
+      //生成一个参考线
+      const newLine = (val: any) => {
+        isDrag.value = true;
+        dragFlag = val;
+      };
+      //虚线移动
+      const dottedLineMove = ($event: any) => {
+        setSpacing();
+        switch (dragFlag) {
+          case 'x':
+            if (isDrag.value) {
+              verticalDottedTop.value = $event.pageY - topSpacing;
+            }
+            break;
+          case 'y':
+            if (isDrag.value) {
+              horizontalDottedLeft.value = $event.pageX - leftSpacing;
+            }
+            break;
+          case 'h':
+            if (isDrag.value) {
+              verticalDottedTop.value = $event.pageY - topSpacing;
+            }
+            break;
+          case 'v':
+            if (isDrag.value) {
+              horizontalDottedLeft.value = $event.pageX - leftSpacing;
+            }
+            break;
+          default:
+            break;
+        }
+      };
+      //虚线松开
+      const dottedLineUp = ($event: any) => {
+        setSpacing();
+        if (isDrag.value) {
+          isDrag.value = false;
+          const cloneList = JSON.parse(JSON.stringify(props.value));
+          switch (dragFlag) {
+            case 'x':
+              cloneList.push({
+                type: 'h',
+                site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
+              });
+              context.emit('input', cloneList);
+              break;
+            case 'y':
+              cloneList.push({
+                type: 'v',
+                site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
+              });
+              context.emit('input', cloneList);
+              break;
+            case 'h':
+              dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h');
+              context.emit('input', cloneList);
+              break;
+            case 'v':
+              dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v');
+              context.emit('input', cloneList);
+              break;
+            default:
+              break;
+          }
+          verticalDottedTop.value = horizontalDottedLeft.value = -10;
+        }
+      };
+      const dragCalc = (list: any, page: any, spacing: any, ruler: any, type: any) => {
+        if (page - spacing < ruler) {
+          let Index;
+          lineList.value.forEach((item: any, index: any) => {
+            if (item.id === dragLineId) {
+              Index = index;
+            }
+          });
+          list.splice(Index, 1, {
+            type: type,
+            site: -600
+          });
+        } else {
+          let Index;
+          lineList.value.forEach((item, index) => {
+            if (item.id === dragLineId) {
+              Index = index;
+            }
+          });
+          list.splice(Index, 1, {
+            type: type,
+            site: (page - spacing - size) * (props.stepLength / 50)
+          });
+        }
+      };
+      //水平标尺按下鼠标
+      const horizontalDragRuler = () => {
+        newLine('x');
+      };
+      //垂直标尺按下鼠标
+      const verticalDragRuler = () => {
+        newLine('y');
+      };
+      // 水平线处按下鼠标
+      const dragHorizontalLine = (id: any) => {
+        isDrag.value = true;
+        dragFlag = 'h';
+        dragLineId = id;
+      };
+      // 垂直线处按下鼠标
+      const dragVerticalLine = (id: any) => {
+        isDrag.value = true;
+        dragFlag = 'v';
+        dragLineId = id;
+      };
+      return {
+        wrapperStyle,
+        horizontalDragRuler,
+        xScale,
+        verticalDragRuler,
+        yScale,
+        verticalDottedTop,
+        horizontalDottedLeft,
+        lineList,
+        getLineStyle,
+        handleDragLine,
+        contentStyle,
+        isDrag,
+        content,
+        el,
+        verticalRuler,
+        horizontalRuler
+      };
+    }
+  });
+</script>
+<style lang="less">
+  .vue-ruler-wrapper {
+    left: 0;
+    top: 0;
+    z-index: 999;
+    user-select: none;
+  }
+
+  .vue-ruler-h,
+  .vue-ruler-v,
+  .vue-ruler-ref-line-v,
+  .vue-ruler-ref-line-h,
+  .vue-ruler-ref-dot-h,
+  .vue-ruler-ref-dot-v {
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    z-index: 999;
+  }
+
+  .vue-ruler-h {
+    width: calc(100% - 18px);
+    height: 18px;
+    left: 18px;
+    opacity: 0.6;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
+      repeat-x;
+    /*./image/ruler_h.png*/
+  }
+
+  .vue-ruler-v {
+    width: 18px;
+    height: calc(100% - 18px);
+    top: 18px;
+    opacity: 0.6;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
+      repeat-y;
+    /*./image/ruler_v.png*/
+  }
+
+  .vue-ruler-v .n,
+  .vue-ruler-h .n {
+    position: absolute;
+    font: 10px/1 Arial, sans-serif;
+    color: #333;
+    cursor: default;
+    top: 1px;
+  }
+
+  .vue-ruler-v .n {
+    width: 8px;
+    left: 3px;
+    word-wrap: break-word;
+  }
+
+  .vue-ruler-ref-line-v,
+  .vue-ruler-ref-line-h,
+  .vue-ruler-ref-dot-h,
+  .vue-ruler-ref-dot-v {
+    z-index: 998;
+  }
+
+  .vue-ruler-ref-line-h {
+    width: 100%;
+    height: 3px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
+      repeat-x left center;
+    /*./image/line_h.png*/
+    cursor: n-resize;
+    /*url(./image/cur_move_h.cur), move*/
+  }
+
+  .vue-ruler-ref-line-v {
+    width: 3px;
+    height: 100%;
+    _height: 9999px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
+      repeat-y center top;
+    /*./image/line_v.png*/
+    cursor: w-resize;
+    /*url(./image/cur_move_v.cur), move*/
+  }
+
+  .vue-ruler-ref-dot-h {
+    width: 100%;
+    height: 3px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+      repeat-x left 1px;
+    /*./image/line_dot.png*/
+    cursor: n-resize;
+    /*url(./image/cur_move_h.cur), move*/
+    top: -10px;
+  }
+
+  .vue-ruler-ref-dot-v {
+    width: 3px;
+    height: 100%;
+    _height: 9999px;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+      repeat-y 1px top;
+    /*./image/line_dot.png*/
+    cursor: w-resize;
+    /*url(./image/cur_move_v.cur), move*/
+    left: -10px;
+  }
+
+  .vue-ruler-content {
+    position: absolute;
+    z-index: 997;
+    width: 100%;
+    height: 100%;
+  }
+
+  .vue-ruler-content-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: 998;
+  }
+</style>
diff --git a/src/components/webtopo-svg-edit/components/center-panel/index.vue b/src/components/webtopo-svg-edit/components/center-panel/index.vue
index 18ecdd1..335b21f 100644
--- 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
index f27d8bc..0e44cff 100644
--- 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
index 5248d69..62fd223 100644
--- 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
index a97d91a..39a4035 100644
--- 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
index 7a10e42..679d1bb 100644
--- 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
index 61fa121..5c732d3 100644
--- 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
index 8e8b728..ff5588e 100644
--- 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
index 702f968..1f8c32a 100644
--- 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
index 523bf82..1ed822f 100644
--- 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,