feat: 视口交换去除

src/core/components/util.ts

@@ -20,6 +20,7 @@ export type BaseItem = {
   ref: boolean
   hide?: boolean
   listening?: boolean
+  disableCopy?: boolean
   userData?: any
 };
 
@@ -30,6 +31,7 @@ export const getBaseItem = (): BaseItem => ({
   zIndex: 0,
   layer: defaultLayer,
   opacity: 1,
+  disableCopy: false,
   ref: false,
   hide: false
 });

src/core/hook/use-expose.ts

@@ -10,7 +10,7 @@ import {
   // installComponentsStyle,
   useTempStatus,
 } from "./use-global-vars.ts";
-import { useMode, useOperMode } from "./use-status";
+import { useCan, useMode, useOperMode } from "./use-status";
 import { Stage } from "konva/lib/Stage";
 import { useInteractiveProps } from "./use-interactive.ts";
 import { useStore } from "../store/index.ts";
@@ -58,7 +58,7 @@ export const useAutoPaste = () => {
   const viewInvMat = useViewerInvertTransform();
   const store = useStore();
   const history = useHistory();
-
+  
   paste.push({
     ["text/plain"]: {
       async handler(pos, val) {
@@ -135,7 +135,6 @@ export const useAutoPaste = () => {
                 data.mat[5] = mouse.y + item.rect.y;
                 store.addItem(item.type, data);
                 break;
-
               case "serial":
                 data.content = getCurrentNdx(store);
                 const radius = (getSerialFontW(data) * Math.sqrt(2)) / 2;
@@ -204,10 +203,13 @@ export const useShortcutKey = () => {
   const operMode = useOperMode();
   const getShapeBelong = useGetShapeBelong();
   const eSelection = useExcludeSelection();
+  const can = useCan()
   useListener(
     "keydown",
     (ev) => {
-      if (ev.target !== document.body) return;
+      if (ev.target !== document.body || !can.mouseReact) return;
+
+
       const key = ev.key.toLowerCase();
       if (key === "z" && ev.ctrlKey) {
         ev.preventDefault();

src/core/hook/use-paste.ts

@@ -7,6 +7,9 @@ import { useStore } from "../store";
 import { useViewerInvertTransform } from "./use-viewer";
 import { DrawItem, ShapeType } from "../components";
 import { IRect } from "konva/lib/types";
+import { useCan, useMode } from "./use-status";
+import { watch } from "vue";
+import { Mode } from "@/constant/mode";
 
 type PasteHandlers = Record<
   string,
@@ -39,7 +42,8 @@ export const usePaste = installGlobalVar(() => {
       const id = shape.id();
       const item = store.getItemById(id);
       const type = store.getType(id);
-      if (!item || !type) {
+
+      if (!item || !type || item.disableCopy) {
         continue;
       }
 
@@ -120,7 +124,16 @@ export const usePaste = installGlobalVar(() => {
     }
   };
 
-  const stopPaste = listener(window, "paste", pasteHandler);
+  const mode = useMode();
+  const stopPaste = watch(
+    () => mode.value.has(Mode.readonly) || mode.value.has(Mode.static),
+    (disabled, _, onCleanup) => {
+      if (!disabled) {
+        onCleanup(listener(window, "paste", pasteHandler));
+      }
+    },
+  );
+
   return {
     var: handlers,
     onDestroy: () => {

src/core/hook/use-status.ts

@@ -47,7 +47,7 @@ export const useCan = installGlobalVar(() => {
   const loaded = computed(() => !!stage.value?.getStage());
 
   // 鼠标是否可用
-  const mouse = computed(() => loaded.value && !mode.include(Mode.static));
+  const mouse = computed(() => loaded.value && !mode.include(Mode.static) && !mode.include(Mode.readonly));
 
   // 可以进入拖拽模式
   const dragMode = computed(() => {

src/core/hook/use-viewer.ts

@@ -1,7 +1,12 @@
 import { Viewer } from "../viewer.ts";
 import { computed, Ref, ref, watch, watchEffect } from "vue";
 import { dragListener, scaleListener } from "../../utils/event.ts";
-import { globalWatch, installGlobalVar, useStage } from "./use-global-vars.ts";
+import {
+  globalWatch,
+  globalWatchEffect,
+  installGlobalVar,
+  useStage,
+} from "./use-global-vars.ts";
 import { useCan } from "./use-status";
 import { frameEebounce, mergeFuns } from "../../utils/shared.ts";
 import { Transform } from "konva/lib/Util";
@@ -40,28 +45,38 @@ export const useViewer = installGlobalVar(() => {
       }),
       scaleListener(dom, (info) => {
         if (can.viewMode || disabled.value) {
-          
           viewer.scalePixel(info.center, info.scale);
         }
       }),
-      watchEffect(
-        () => {
-          size.value && viewer.setSize(size.value);
-        },
-        { flush: "sync" }
-      )
     );
 
-    viewer.bus.on("transformChange", (newTransform) => {
-      transform.value = newTransform;
-    });
-    viewer.bus.on("viewSizeChange", () => {
-      sizeMat.value = viewer.sizeMat;
-    });
-    transform.value = viewer.transform;
-    sizeMat.value = viewer.sizeMat;
     return onDestroy;
   };
+  const stopSizeWatch = globalWatchEffect(
+    () => {
+      size.value && viewer.setSize(size.value);
+    },
+    { flush: "sync" },
+  );
+  viewer.bus.on("transformChange", (newTransform) => {
+    transform.value = newTransform;
+  });
+  viewer.bus.on("viewSizeChange", () => {
+    sizeMat.value = viewer.sizeMat;
+  });
+  transform.value = viewer.transform;
+  sizeMat.value = viewer.sizeMat;
+
+  const stopModeWatch = globalWatch(
+    () => can.viewMouseReact,
+    (can, _, onCleanup) => {
+      if (can) {
+        const dom = stage.value!.getNode().container();
+        onCleanup(init(dom));
+      }
+    },
+    { immediate: true },
+  );
 
   return {
     var: {
@@ -70,16 +85,7 @@ export const useViewer = installGlobalVar(() => {
       sizeMat,
       disabled,
     },
-    onDestroy: globalWatch(
-      () => can.viewMouseReact,
-      (can, _, onCleanup) => {
-        if (can) {
-          const dom = stage.value!.getNode().container();
-          onCleanup(init(dom));
-        }
-      },
-      { immediate: true }
-    ),
+    onDestroy: mergeFuns(stopSizeWatch, stopModeWatch),
   };
 }, Symbol("viewer"));
 
@@ -103,23 +109,23 @@ export const useViewerInvertTransformConfig = () => {
   return computed(() => transform.value.decompose());
 };
 
-export const useViewerDebounce = installGlobalVar(() => ref(true))
+export const useViewerDebounce = installGlobalVar(() => ref(true));
 
 export const useFixedScale = installGlobalVar(() => {
   const inv = useViewerInvertTransformConfig();
-  const debounce = useViewerDebounce()
+  const debounce = useViewerDebounce();
   const scale = ref(inv.value.scaleX) as Ref<number> & { debounce: boolean };
 
   const update = () => {
     const newScale = inv.value.scaleX;
     scale.value = newScale;
   };
-  
+
   const debounceUpdate = frameEebounce(update);
   const stopWatch = globalWatch(
     () => [inv.value, debounce.value],
     () => (debounce.value ? debounceUpdate() : update()),
-    { flush: "sync" }
+    { flush: "sync" },
   );
 
   return {
@@ -136,13 +142,13 @@ export const useUnitTransform = installGlobalVar(() => {
     getPixel(real: number) {
       return lineLen(
         invTransform.value.point({ x: real, y: 0 }),
-        invTransform.value.point({ x: 0, y: 0 })
+        invTransform.value.point({ x: 0, y: 0 }),
       );
     },
     getReal(pixel: number) {
       return lineLen(
         transform.value.point({ x: pixel, y: 0 }),
-        transform.value.point({ x: 0, y: 0 })
+        transform.value.point({ x: 0, y: 0 }),
       );
     },
   };
@@ -231,7 +237,7 @@ export const useGetViewBoxPositionPixel = () => {
       return getFixPosition(
         fixPosition,
         selfSize,
-        size.value || { width: 100, height: 100 }
+        size.value || { width: 100, height: 100 },
       );
     }
   };

src/example/fuse/views/tabulation/index.vue

@@ -202,7 +202,7 @@ const setMapHandler = async (config: { url: string; size: Size }) => {
     });
 
     // 找出没有关联的痕迹物证
-    const images = [...(overview.image || []), ...(overview.icon || [])]
+    const images = [...(overview.image || []), ...(overview.icon || [])];
     images?.forEach((image) => {
       if (
         image.key !== "trace" ||
@@ -231,8 +231,7 @@ const setMapHandler = async (config: { url: string; size: Size }) => {
       }
     }
 
-    draw.value?.runHook(() => syncTable(table, syncSerials))
-    
+    draw.value?.runHook(() => syncTable(table, syncSerials));
 
     if (serialTable.value) {
       d.history.preventTrack(() => {
@@ -291,6 +290,7 @@ const setCover = (paperKey: PaperKey, draw: Draw) => {
   if (!cover) {
     cover = reactive({
       ...getBaseItem(),
+      disableCopy: true,
       cornerRadius: 0,
       strokeWidth: 0,
       disableDelete: true,