可吸取引用时鼠标变化支持

src/core/hook/use-interactive.ts

@@ -1,4 +1,4 @@
-import { installGlobalVar, useStage } from "./use-global-vars.ts";
+import { installGlobalVar, useCursor, useStage } from "./use-global-vars.ts";
 import { useCan, useMode } from "./use-status";
 import { DrawItem, ShapeType } from "../components";
 import { nextTick, reactive, Ref, ref, watch, watchEffect } from "vue";
@@ -236,6 +236,7 @@ export const useInteractiveDots = ({
   const messages = ref<Pos[]>([]);
   const stage = useStage();
   const shapesStatus = useMouseShapesStatus();
+  const cursor = useCursor();
 
   const init = (dom: HTMLDivElement) => {
     if (!can.dragMode) return () => {};
@@ -246,6 +247,32 @@ export const useInteractiveDots = ({
     const beforePointer = ref(empty);
     enter && enter();
     mode.add(Mode.draging);
+    let popCursor: (() => void) | null = null
+
+    const getSelectIds = (ev: MouseEvent) => {
+      if (preSelectIds?.length && $stage) {
+        const joinIds: string[] = [];
+        for (const id of preSelectIds) {
+          const $shape = $stage.findOne(`#${id}`);
+          if (!$shape) continue;
+
+          const rect = $shape.getClientRect();
+          let x = ev.offsetX,
+            y = ev.offsetY;
+          if (
+            x > rect.x &&
+            x < rect.x + rect.width &&
+            y > rect.y &&
+            y < rect.y + rect.height
+          ) {
+            joinIds.push(id);
+          }
+        }
+        if (joinIds.length) {
+          return joinIds;
+        }
+      }
+    };
 
     const posMove = (position: Pos) => {
       if (!can.dragMode) return;
@@ -263,6 +290,11 @@ export const useInteractiveDots = ({
     };
     const move = (ev: MouseEvent) => {
       posMove(getOffset(ev));
+      popCursor && popCursor()
+      popCursor = null
+      if (getSelectIds(ev)?.length) {
+        popCursor = cursor.push('pointer')
+      }
     };
     const preSelectIds = interactiveProps.value?.operate?.preSelectIds;
 
@@ -277,7 +309,9 @@ export const useInteractiveDots = ({
     return mergeFuns(
       () => {
         mode.del(Mode.draging);
-        shapesStatus.actives = []
+        shapesStatus.actives = [];
+        popCursor && popCursor()
+        popCursor = null
       },
       watch(singleDone, () => {
         if (singleDone.value) {
@@ -294,28 +328,10 @@ export const useInteractiveDots = ({
       clickListener(dom, (_, ev) => {
         if (!moveIng || !can.dragMode || eqPoint(prevPoint, pointer.value))
           return;
-        if (preSelectIds?.length && $stage) {
-          const joinIds: string[] = [];
-          for (const id of preSelectIds) {
-            const $shape = $stage.findOne(`#${id}`);
-            if (!$shape) continue;
-
-            const rect = $shape.getClientRect();
-            let x = ev.offsetX,
-              y = ev.offsetY;
-            if (
-              x > rect.x &&
-              x < rect.x + rect.width &&
-              y > rect.y &&
-              y < rect.y + rect.height
-            ) {
-              joinIds.push(id);
-            }
-          }
-          if (joinIds.length) {
-            attachInfos.set(pointer.value, joinIds);
-            return;
-          }
+        const joinIds = getSelectIds(ev);
+        if (joinIds?.length) {
+          attachInfos.set(pointer.value, joinIds);
+          return;
         }
         singleDone.value = true;
       }),

src/core/renderer/renderer.vue

@@ -112,7 +112,7 @@ import {
 } from "../../constant";
 import { useStore } from "../store/index.ts";
 import { Mode } from "@/constant/mode.ts";
-import { computed, getCurrentInstance, onUnmounted, watch } from "vue";
+import { computed, getCurrentInstance, onUnmounted, watch, watchEffect } from "vue";
 import { install } from "../../install-lib.ts";
 import { useConfig } from "../hook/use-config.ts";
 import { getEmptyStoreData } from "../store/store.ts";
@@ -167,6 +167,10 @@ const cursorStyle = computed(() => {
   }
 });
 
+watchEffect(() => {
+  console.log(cursor.value)
+})
+
 const expose = useExpose();
 defineExpose(expose);
 </script>