fix: 1

src/core/components/index.ts

@@ -60,9 +60,11 @@ type CompAttach<key extends ShapeType> = {
   GroupComponent: (props: { data: DrawItem[] }) => any;
   getPredefine?: (attrKey: keyof DrawItem<key>) => any;
 };
+type _Components = {
+  [key in keyof typeof _components]: (typeof _components)[key]
+}
 export type Components = {
-  [key in keyof typeof _components]: Omit<(typeof _components)[key], keyof CompAttach<key>> &
-    CompAttach<key>
+  [key in keyof _Components]: key extends keyof CompAttach<key> ? CompAttach<key> : _Components[key]
 };
 export type ComponentValue<
   T extends ShapeType,

src/core/components/share/edit-line.vue

@@ -40,6 +40,8 @@ import { themeColor } from "@/constant";
 import { Circle } from "konva/lib/shapes/Circle";
 import { SLineData } from "../sequent-line";
 import { useViewer } from "@/core/hook/use-viewer";
+import { useMode } from "@/core/hook/use-status";
+import { Mode } from "@/constant/mode";
 
 type LData = Required<Pick<SLineData, "strokeWidth" | "stroke">>;
 const props = defineProps<{
@@ -62,9 +64,11 @@ const line = ref<DC<Line>>();
 const offset = useShapeDrag(line);
 const viewer = useViewer();
 const [isHover] = useShapeIsHover(line);
+const mode = useMode();
+const drawing = computed(() => mode.include(Mode.draw));
 const cursor = useCursor();
-watch(isHover, (hover, _, onCleanup) => {
-  if (hover) {
+watch([isHover, drawing], ([hover, drawing], _, onCleanup) => {
+  if (hover && !drawing) {
     onCleanup(cursor.push("./icons/m_move.png"));
   }
 });

src/core/components/share/edit-point.vue

@@ -31,6 +31,8 @@ import { useCursor } from "@/core/hook/use-global-vars";
 import { mergeFuns, rangMod } from "@/utils/shared";
 import { Operate } from "../../html-mount/propertys/index.ts";
 import { useViewer } from "@/core/hook/use-viewer.ts";
+import { useMode } from "@/core/hook/use-status";
+import { Mode } from "@/constant/mode";
 
 const props = defineProps<{
   points: Pos[];
@@ -109,10 +111,12 @@ const offset = useShapeDrag(circle);
 const hResult = useShapeIsHover(circle);
 const isHover = hResult[0];
 const cursor = useCursor();
+const mode = useMode();
+const drawing = computed(() => mode.include(Mode.draw));
 watch(
-  isHover,
-  (hover, _, onCleanup) => {
-    if (hover) {
+  [isHover, drawing],
+  ([hover, drawing], _, onCleanup) => {
+    if (hover && !drawing) {
       onCleanup(cursor.push("./icons/m_move.png"));
     }
   },

src/core/hook/use-interactive.ts

@@ -139,6 +139,29 @@ export const useInteractiveAreas = ({
     let dragging = false;
     enter && enter();
 
+    const upHandler = (ev: MouseEvent) => {
+      if (downed) {
+        mode.del(Mode.draging);
+      }
+      downed = false;
+      if (!dragging) return;
+
+      if (can.dragMode) {
+        const position = getOffset(ev, dom);
+        messages.value[pushNdx]![1] = beforeHandler
+          ? beforeHandler(position)
+          : position;
+      }
+
+      prevEv = null
+      pushNdx = -1;
+      pushed = false;
+      downed = false;
+      dragging = false;
+      singleDone.value = true;
+    };
+
+    let prevEv: any
     return mergeFuns(
       listener(dom, "pointerdown", (ev) => {
         if (!can.dragMode) return;
@@ -155,9 +178,14 @@ export const useInteractiveAreas = ({
       }),
       listener(document.documentElement, "pointermove", (ev) => {
         if (!can.dragMode) return;
+        if (ev.buttons <= 0) {
+          prevEv && upHandler(prevEv);
+          return;
+        }
         const end = getOffset(ev, dom);
         const point = beforeHandler ? beforeHandler(end) : end;
 
+        prevEv = ev
         if (downed) {
           if (pushed) {
             messages.value[pushNdx]![1] = point;
@@ -172,26 +200,7 @@ export const useInteractiveAreas = ({
           tempArea = [point] as unknown as Area;
         }
       }),
-      listener(document.documentElement, "pointerup", (ev) => {
-        if (downed) {
-          mode.del(Mode.draging);
-        }
-        downed = false;
-        if (!dragging) return;
-
-        if (can.dragMode) {
-          const position = getOffset(ev, dom);
-          messages.value[pushNdx]![1] = beforeHandler
-            ? beforeHandler(position)
-            : position;
-        }
-
-        pushNdx = -1;
-        pushed = false;
-        downed = false;
-        dragging = false;
-        singleDone.value = true;
-      })
+      listener(document.documentElement, "pointerup", upHandler)
     );
   };
 

src/example/components/slide/slide.vue

@@ -3,7 +3,7 @@
     <el-menu
       :default-active="active"
       class="slide-menu"
-      @select="(val) => (active = active === val ? undefined : val)"
+      @select="selectHandler"
       collapse
       :popper-offset="0"
       :popper-class="childType || 'slide-menu-poper'"
@@ -36,20 +36,18 @@ const activeMenu = computed(() =>
   active.value === undefined ? null : getItem(active.value, props.menus)
 );
 
-watch(activeMenu, (menu, oldMenu) => {
-  if (oldMenu?.payload?.type) {
+const selectHandler = async (val: string) => {
+  if (active.value) {
     props.draw.quitDrawShape();
   }
-  if (!menu || menu.mount) {
-    return;
-  }
-  if (menu.handler) {
-    menu.handler(props.draw);
-    nextTick(() => (active.value = undefined));
-  } else {
+  await nextTick();
+  active.value = val;
+
+  const menu = activeMenu.value;
+  if (menu) {
     props.draw.enterDrawShape(menu.payload.type, menu.payload.preset, menu.single);
   }
-});
+};
 
 watch(
   () => props.draw.presetAdd && getValue(props.draw.presetAdd, props.menus),

src/utils/event.ts

@@ -76,15 +76,15 @@ export const dragListener = (dom: HTMLElement, props: DragProps | DragProps['mov
 		props.notPrevent || ev.preventDefault();
 
 		moveHandler = (ev: PointerEvent) => {
+			props.notPrevent || ev.preventDefault();
       if (ev.buttons <= 0) {
-        endHandler()
+        endHandler(ev)
         return;
       }
 			const end = attrib === 'offset' ? getOffset(ev, dom) : { x: ev.pageX, y: ev.pageY }
 			move!({start, end, prev, ev})
 			prev = end
 
-			props.notPrevent || ev.preventDefault();
 		}
 		endHandler = (ev: PointerEvent) => {
 			const uend = attrib === 'offset' ? getOffset(ev, dom) : { x: ev.pageX, y: ev.pageY }