Просмотр исходного кода

fix: 删除后isHover不更新问题

bill 1 день назад
Родитель
Сommit
b3e929bc56

+ 1 - 6
src/core/components/arrow/arrow.vue

@@ -6,6 +6,7 @@
     @update:position="updatePosition"
     @addPoint="addPoint"
     @deletePoint="deletePoint"
+    @delete="emit('delShape')"
     @update="emit('updateShape', { ...data })"
     canEdit
   />
@@ -103,11 +104,5 @@ watch(
   { immediate: true }
 );
 
-watchEffect(() => {
-  if (zeroEq(lineLen(props.data.points[0], props.data.points[1]))) {
-    emit("delShape");
-  }
-});
-
 useInstallStrokeWidthDescribe(describes, data, fixedStrokeOptions);
 </script>

+ 11 - 3
src/core/components/arrow/temp-arrow.vue

@@ -47,15 +47,21 @@
       >
         <Point
           v-for="(_, ndx) in data.points"
-          :size="data.strokeWidth + (data.fixed ? 6 * scale : 6)"
+          :size="Math.max(props.data.strokeWidth || 10, 10)"
           :points="data.points"
+          :fixed="props.data.fixed"
           :ndx="ndx"
           :closed="false"
           :id="data.id"
           :disable="addMode"
           :color="data.fill"
           @update:position="(p) => emit('update:position', { ndx, val: p })"
-          @dragend="emit('update')"
+          @dragend="
+            () =>
+              zeroEq(lineLen(data.points[0], data.points[1]))
+                ? emit('delete')
+                : emit('update')
+          "
           notDelete
         />
       </template>
@@ -86,12 +92,13 @@ import { Group } from "konva/lib/Group";
 import { useConfig } from "@/core/hook/use-config.ts";
 import { useMouseShapeStatus } from "@/core/hook/use-mouse-status.ts";
 import { useOperMode } from "@/core/hook/use-status.ts";
-import { useFixedScale, useViewerInvertTransformConfig } from "@/core/hook/use-viewer.ts";
+import { useFixedScale } from "@/core/hook/use-viewer.ts";
 
 const props = defineProps<{ data: ArrowData; canEdit?: boolean; addMode?: boolean }>();
 const emit = defineEmits<{
   (e: "update:position", data: { ndx: number; val: Pos }): void;
   (e: "update"): void;
+  (e: "delete"): void;
   (e: "deletePoint", ndx: number): void;
   (e: "addPoint", data: { ndx: number; val: Pos }): void;
 }>();
@@ -111,6 +118,7 @@ const data = computed(() => {
   style.strokeWidth = props.data.fixed
     ? style.strokeWidth * scale.value
     : style.strokeWidth;
+  console;
   return style;
 });
 const hitFunc: LineConfig["hitFunc"] = (con, shape) => {

+ 1 - 0
src/core/components/polygon/temp-polygon.vue

@@ -17,6 +17,7 @@
       :shape="shape"
       :addMode="addMode"
       closed
+      :fixed="data.fixed"
       :canEdit="canEdit"
       @update:position="(data) => emit('update:position', data)"
       @update="emit('update')"

+ 4 - 2
src/core/components/share/edit-polygon.vue

@@ -4,7 +4,7 @@
       v-if="status.hover && canEdit && !operMode.mulSelection && data.points.length >= 2"
     >
       <EditLine
-        :data="data"
+        :data="{ ...data, fixed: fixed }"
         :points="data.points"
         :closed="closed"
         :id="data.id"
@@ -30,7 +30,8 @@
     <template v-if="(status.hover || status.active || addMode) && !operMode.mulSelection">
       <Point
         v-for="(_, ndx) in data.points"
-        :size="data.strokeWidth + 6"
+        :size="data.strokeWidth"
+        :fixed="fixed"
         :points="data.points"
         :ndx="ndx"
         :closed="closed"
@@ -65,6 +66,7 @@ const props = defineProps<{
   addMode?: boolean;
   canEdit?: boolean;
   closed?: boolean;
+  fixed?: boolean;
   shape: DC<EntityShape>;
 }>();
 const emit = defineEmits<{

+ 9 - 0
src/core/hook/use-mouse-status.ts

@@ -33,9 +33,11 @@ const stageHoverMap = new WeakMap<
 >();
 export const getHoverShape = (stage: Stage) => {
   let isStop = false;
+  let interval: any
   const stop = () => {
     if (isStop || !stageHoverMap.has(stage)) return;
     isStop = true;
+    clearInterval(interval);
     const data = stageHoverMap.get(stage)!;
     if (--data.count <= 0) {
       data.des();
@@ -50,13 +52,20 @@ export const getHoverShape = (stage: Stage) => {
 
   const hover = ref<EntityShape>();
   const enterHandler = (ev: KonvaEventObject<any, Stage>) => {
+    clearInterval(interval)
     const target = ev.target;
     hover.value = target;
     target.off(`pointerleave`, leaveHandler);
     target.on(`pointerleave`, leaveHandler as any);
+    interval = setInterval(() => {
+      if (!stage.isAncestorOf(target)) {
+        leaveHandler()
+      }
+    }, 100)
   };
 
   const leaveHandler = (ev?: KonvaEventObject<any, Stage>) => {
+    clearInterval(interval)
     if (hover.value) {
       hover.value.off(`pointerleave`, leaveHandler);
       hover.value = undefined;