feat: 悬浮进入临时层版本

src/core/components/text/temp-text.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script lang="ts" setup>
-import { defaultStyle, TextData } from "./index.ts";
-import { computed, ref } from "vue";
+import { defaultStyle, TextData, textNodeMap } from "./index.ts";
+import { computed, ref, watchEffect } from "vue";
 import { DC } from "@/deconstruction.js";
 import { Transform } from "konva/lib/Util";
 import { Text } from "konva/lib/shapes/Text";
@@ -32,4 +32,11 @@ defineExpose({
 const matConfig = computed(() => {
   return new Transform(data.value.mat).decompose();
 });
+
+watchEffect((oncleanup) => {
+  if (shape.value?.getNode()) {
+    textNodeMap[props.data.id] = shape.value.getNode();
+    oncleanup(() => delete textNodeMap[props.data.id]);
+  }
+});
 </script>

src/core/components/text/text.vue

@@ -29,7 +29,7 @@ import {
 } from "@/core/hook/use-transformer.ts";
 import { Transform } from "konva/lib/Util";
 import { Text } from "konva/lib/shapes/Text";
-import { computed, ref, shallowRef, watch, watchEffect } from "vue";
+import { computed, ref, watch } from "vue";
 import { setShapeTransform } from "@/utils/shape.ts";
 import { zeroEq } from "@/utils/math.ts";
 import { MathUtils } from "three";
@@ -145,13 +145,6 @@ watch(
   }
 );
 
-watchEffect((oncleanup) => {
-  if (shape.value?.getNode()) {
-    textNodeMap[props.data.id] = shape.value.getNode();
-    oncleanup(() => delete textNodeMap[props.data.id]);
-  }
-});
-
 const transformer = useTransformer();
 const $shape = computed(() => shape.value?.getNode());
 const editText = ref(false);

src/core/hook/use-draw.ts

@@ -158,21 +158,15 @@ const usePointBeforeHandler = (enableTransform = false, enableSnap = false) => {
   const addedInfos: ComponentSnapInfo[] = [];
 
   return {
-    transform: (
-      point: SnapPoint,
-      prevPoint?: SnapPoint,
-      nextPoint?: SnapPoint
-    ) => {
+    transform: (p: SnapPoint, geo = [p], geoNeedConversion = true) => {
       snap && snap.clear();
-      let p = conversionPosition(point);
-      const geo = [p];
-      prevPoint && geo.unshift({ ...prevPoint, view: true });
-      nextPoint && geo.push({ ...nextPoint, view: true });
+      if (geoNeedConversion) {
+        geo = geo.map(conversionPosition);
+      }
+      p = conversionPosition(p);
       const selfInfos = generateSnapInfos(geo, true, true);
-
       const transform = snap && snap.move(selfInfos);
       p = transform ? transform.point(p) : p;
-
       return p;
     },
     addRef(p: Pos | Pos[]) {
@@ -201,12 +195,14 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
   refSelf,
   enter,
   quit,
+  getSnapGeo,
 }: {
   type: T;
   useIA: InteractiveHook;
   refSelf?: boolean;
   enter?: () => void;
   quit?: () => void;
+  getSnapGeo?: (data: DrawItem<T>) => SnapPoint[];
 }) => {
   const { quitDrawShape } = useInteractiveDrawShapeAPI();
   const isRuning = useDrawRunning(type);
@@ -214,6 +210,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
   const obj = components[type] as Components[T];
   const beforeHandler = usePointBeforeHandler(true, true);
   const processors = useStoreRenderProcessors();
+  const conversionPosition = useConversionPosition(true);
   const store = useStore();
   const processorIds = processors.register(() => DrawShape);
   const clear = () => {
@@ -234,7 +231,19 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
     enter,
     beforeHandler: (p) => {
       beforeHandler.clear();
-      return beforeHandler.transform(p);
+      let geo: SnapPoint[] | undefined;
+      if (items.length && getSnapGeo) {
+        const item = obj.interactiveFixData(
+          {...items[0]} as any,
+          {
+            consumed: ia.consumedMessage,
+            cur: conversionPosition(p),
+            action: MessageAction.update,
+          } as any
+        );
+        geo = getSnapGeo(item as any);
+      }
+      return beforeHandler.transform(p, geo, !geo);
     },
   });
 
@@ -311,8 +320,7 @@ export const useInteractiveDrawAreas = <T extends ShapeType>(type: T) => {
       cursor.push("crosshair");
     },
     quit() {
-      isEnter && cursor.pop()
-      
+      isEnter && cursor.pop();
     },
   });
 };
@@ -330,6 +338,9 @@ export const useInteractiveDrawDots = <T extends ShapeType>(type: T) => {
     quit() {
       isEnter && cursor.pop();
     },
+    getSnapGeo(item) {
+      return components[type].getSnapPoints(item as any);
+    },
   });
 };
 
@@ -409,7 +420,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
   // 可能历史空间会撤销 重做更改到正在绘制的组件
   const currentCursor = ref(penA);
   const cursor = useCursor();
-  let stopWatch: (() => void) | null = null
+  let stopWatch: (() => void) | null = null;
   const ia = useInteractiveDots({
     shapeType: type,
     isRuning,
@@ -425,11 +436,11 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
       quitDrawShape();
       beforeHandler.clear();
       cursor.pop();
-      stopWatch && stopWatch()
+      stopWatch && stopWatch();
     },
     beforeHandler: (p) => {
       beforeHandler.clear();
-      const pa = beforeHandler.transform(p, prev);
+      const pa = beforeHandler.transform(p, prev && [prev, p]);
       currentIsDel && beforeHandler.clear();
       return pa;
     },
@@ -447,10 +458,10 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
   const messages = useHistoryAttach<Pos[]>(
     `${type}-pen`,
     isRuning,
-    shape.value ? ia.preset!.getMessages! as any : () => [],
+    shape.value ? (ia.preset!.getMessages! as any) : () => [],
     true
   );
-  let prev: Pos;
+  let prev: SnapPoint;
   let firstEntry = true;
   let currentIsDel = false;
 
@@ -465,7 +476,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
     currentCursor.value = penA;
     let pen: null | ReturnType<typeof penUpdatePoints> = null;
     if (!free.value) {
-      pen = penUpdatePoints(messages.value, cur, type === 'line');
+      pen = penUpdatePoints(messages.value, cur, type === "line");
       consumed = pen.points;
       cur = pen.cur;
     }
@@ -540,12 +551,11 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
       ),
       // 监听是否消费完毕
       watch(ia.singleDone, () => {
-        prev = dot;
+        prev = { ...dot, view: true };
         const cItem = JSON.parse(JSON.stringify(item));
         const isChange = pushMessages(dot);
         if (isChange) {
           if (firstEntry) {
-            console.error(firstEntry);
             processorIds.push(item.id);
             history.preventTrack(() => store.addItem(type, cItem));
           } else {
@@ -554,7 +564,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
         }
         beforeHandler.clear();
         stopWatch && stopWatch();
-        stopWatch = null
+        stopWatch = null;
         firstEntry = false;
       })
     );