pefect_anchor

src/views/components/Header.vue

@@ -121,14 +121,7 @@
             </div>
           </a>
         </t-dropdown-item>
-        <t-dropdown-item>
-          <a @click="onToggleAnchor">
-            <div class="flex">
-              添加/删除锚点 <span class="flex-grow"></span> A
-            </div>
-          </a>
-        </t-dropdown-item>
-        <t-dropdown-item>
+        <!-- <t-dropdown-item>
           <a @click="onAddAnchorHand">
             <div class="flex">添加手柄 <span class="flex-grow"></span> H</div>
           </a>
@@ -144,7 +137,7 @@
               切换手柄 <span class="flex-grow"></span> Shift
             </div>
           </a>
-        </t-dropdown-item>
+        </t-dropdown-item> -->
       </t-dropdown-menu>
     </t-dropdown>
     <t-dropdown
@@ -194,8 +187,17 @@
         <t-dropdown-item divider="true">
           <a @click="onDisableAnchor">
             <div class="flex middle">
-              禁用锚点 <span class="flex-grow"></span>
-              <t-icon v-show="disableAnchor" name="check" />
+              显示锚点 <span class="flex-grow"></span>
+              <t-icon v-show="showAnchor" name="check" />
+            </div>
+          </a>
+        </t-dropdown-item>
+        <t-dropdown-item>
+          <a @click="onToggleAnchor">
+            <div class="flex"  :style="{
+              color:showAnchor?'':'#4f5b75'}
+              ">
+              添加/删除锚点 <span class="flex-grow"></span> A
             </div>
           </a>
         </t-dropdown-item>
@@ -317,7 +319,6 @@ const router = useRouter();
 const route = useRoute();
 
 const market = import.meta.env.VITE_MARKET;
-
 const baseUrl = import.meta.env.BASE_URL || "/";
 
 const { user, message, getUser, getMessage, signout } = useUser();
@@ -954,9 +955,11 @@ const onPaste = () => {
 
 const onToggleAnchor = () => {
   //取消连线状态
-  meta2d.store.options.disableAnchor = false;
-  meta2d.canvas.drawingLineName && drawPen();
-  meta2d.toggleAnchorMode();
+  // meta2d.store.options.disableAnchor = false;
+  if (!meta2d.store.options.disableAnchor) {
+    meta2d.canvas.drawingLineName && drawPen();
+    meta2d.toggleAnchorMode();
+  }
 };
 
 const onAddAnchorHand = () => {
@@ -987,17 +990,17 @@ const onAutoAnchor = () => {
   autoAnchor.value = meta2d.store.options.autoAnchor;
 };
 
+const showAnchor = ref(false);
 const onDisableAnchor = () => {
   meta2d.store.options.disableAnchor = !meta2d.store.options.disableAnchor;
   changeDisableAnchor();
 };
 
-const disableAnchor = ref(true);
 const changeDisableAnchor = () => {
-  const { disableAnchor: disableAnchorOption, autoAnchor: autoAnchorOption } =
+  const { disableAnchor, autoAnchor } =
     meta2d.store.options;
-  disableAnchor.value = disableAnchorOption || false;
-  if (disableAnchorOption && autoAnchorOption) {
+    showAnchor.value = (!disableAnchor) || false;
+  if (disableAnchor && autoAnchor) {
     // 禁用瞄点开了，需要关闭自动瞄点
     onAutoAnchor();
   }

src/views/components/View.vue

@@ -305,6 +305,7 @@ onMounted(() => {
   meta2d.on('scale', scaleListener);
   // @ts-ignore
   meta2d.on("add", lineAdd);
+  meta2d.on("opened", openedListener);
 
   meta2d.on("undo", autoSave);
   meta2d.on("redo", autoSave);
@@ -335,6 +336,19 @@ const open = async () => {
   meta2d.store.data.y = meta2d.store.options.y || 0;
 };
 
+const openedListener = () => {
+  const {
+    locked,
+    scale: canvasScale,
+    fromArrow: canvasFromArrow,
+    toArrow: canvasToArrow,
+  } = meta2d.store.data;
+  isLock.value = locked||0;
+  scale.value = Math.round(canvasScale * 100);
+  fromArrow.value = canvasFromArrow||"";
+  toArrow.value = canvasToArrow||"";
+}
+
 onUnmounted(() => {
   watcher();
   if (meta2d) {
@@ -346,6 +360,7 @@ onUnmounted(() => {
     meta2d.off('scale', scaleListener);
     // @ts-ignore
     meta2d.off("add", lineAdd);
+    meta2d.on("opened", openedListener);
 
     meta2d.off("undo", autoSave);
     meta2d.off("redo", autoSave);