feat: 添加默认值作用域，以支持一个界面多个绘图实例

src/core/components/arrow/index.ts

@@ -6,6 +6,7 @@ import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./arrow.vue";
 export { default as TempComponent } from "./temp-arrow.vue";
@@ -15,19 +16,18 @@ export enum PointerPosition {
   end = "end",
   all = "all",
 }
-export const shapeName = ui18n.t('shape.arrow.name');
-export const defaultStyle = {
+export const shapeName = ui18n.t("shape.arrow.name");
+
+export const defaultStyle = installGlobalStyle("arrow", {
   fixed: true,
-  fill: '#000000',
+  fill: "#000000",
   pointerPosition: PointerPosition.end,
   strokeWidth: 5,
   pointerLength: 10,
-};
-
-// export const fill
+});
 
 export const addMode = "area";
-export const fixedStrokeOptions:number[] = [];
+export const fixedStrokeOptions: number[] = [];
 
 export const getMouseStyle = (data: ArrowData) => {
   const strokeStatus = getMouseColors(data.fill || defaultStyle.fill);
@@ -51,14 +51,18 @@ export type ArrowData = Partial<typeof defaultStyle> &
     attitude: number[];
   };
 
-export const dataToConfig = (data: ArrowData): ArrowConfig => ({
-  ...defaultStyle,
-  ...data,
-  points: flatPositions(data.points),
-  hitStrokeWidth: 20,
-});
+export const dataToConfig = (data: ArrowData): ArrowConfig => {
+  const style = {
+    ...defaultStyle,
+    ...data,
+    points: flatPositions(data.points),
+    hitStrokeWidth: 20,
+  };
+  console.log("style", style, {...defaultStyle});
+  return style;
+};
 
-export const getSnapInfos = (data: ArrowData) => 
+export const getSnapInfos = (data: ArrowData) =>
   generateSnapInfos(getSnapPoints(data), true, true, true);
 
 export const getSnapPoints = (data: ArrowData) => data.points;
@@ -85,7 +89,6 @@ export const interactiveToData: InteractiveTo<"arrow"> = ({
 };
 
 export const interactiveFixData: InteractiveFix<"arrow"> = ({ data, info }) => {
-  console.log(data)
   // const nv = [...info.consumed, info.cur!];
   // data.points.length = nv.length
   // for (let i = 0; i < nv.length; i++) {
@@ -95,28 +98,29 @@ export const interactiveFixData: InteractiveFix<"arrow"> = ({ data, info }) => {
   // }
   // return data;
 
-
   if (info.cur) {
     const area = info.cur!;
-    data.points = area
+    data.points = area;
     data.attitude = [1, 0, 0, 1, 0, 0];
   }
-  return data
+  return data;
 };
 
-
-
-export const matResponse = ({data, mat, increment}: MatResponseProps<'arrow'>) => {
-  let transfrom: Transform
+export const matResponse = ({
+  data,
+  mat,
+  increment,
+}: MatResponseProps<"arrow">) => {
+  let transfrom: Transform;
   const attitude = new Transform(data.attitude);
   if (!increment) {
     const inverMat = attitude.copy().invert();
     transfrom = mat.copy().multiply(inverMat);
   } else {
-    transfrom = mat
+    transfrom = mat;
   }
 
   data.points = data.points.map((v) => transfrom.point(v));
   data.attitude = transfrom.copy().multiply(attitude).m;
   return data;
-}
+};

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

@@ -58,7 +58,7 @@
           @update:position="(p) => emit('update:position', { ndx, val: p })"
           @dragend="
             () =>
-              zeroEq(lineLen(data.points[0], data.points[1]))
+              lineLen(data.points[0], data.points[1]) < 0.1
                 ? emit('delete')
                 : emit('update')
           "
@@ -95,6 +95,7 @@ import { useOperMode } from "@/core/hook/use-status.ts";
 import { useFixedScale } from "@/core/hook/use-viewer.ts";
 
 const props = defineProps<{ data: ArrowData; canEdit?: boolean; addMode?: boolean }>();
+console.log(props.data);
 const emit = defineEmits<{
   (e: "update:position", data: { ndx: number; val: Pos }): void;
   (e: "update"): void;
@@ -107,9 +108,10 @@ const shape = ref<DC<Group>>();
 const config = useConfig();
 const scale = useFixedScale();
 
+const defStyle = { ...defaultStyle };
 const data = computed(() => {
   const style = {
-    ...defaultStyle,
+    ...defStyle,
     ...props.data,
   };
   style.pointerLength = props.data.fixed

src/core/components/circle/index.ts

@@ -11,12 +11,13 @@ import { Transform } from "konva/lib/Util";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { MathUtils } from "three";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./circle.vue";
 export { default as TempComponent } from "./temp-circle.vue";
 
 export const shapeName = ui18n.t('shape.circle.name');
-export const defaultStyle = {
+export const _defaultStyle = {
   dash: [30, 0],
   stroke: "#000000",
   strokeWidth: 5,
@@ -26,7 +27,8 @@ export const defaultStyle = {
   fontStyle: "normal",
   fontColor: "#000000",
   padding: 8,
-};
+}
+export const defaultStyle = installGlobalStyle('circle', _defaultStyle);
 
 export const addMode = "area";
 export const fixedStrokeOptions:number[] = [];

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

@@ -62,10 +62,11 @@ const emit = defineEmits<{
 }>();
 
 const config = useConfig();
-const scale = useFixedScale()
+const scale = useFixedScale();
+const defStyle = { ...defaultStyle };
 const data = computed(() => {
   const style = {
-    ...defaultStyle,
+    ...defStyle,
     ...props.data,
   };
   if (style.fixed) {

src/core/components/group/group.vue

@@ -12,6 +12,7 @@
       :calDelete="true"
       :describes="descs"
       @delete="deleteHandler"
+      @close="mouseShapes.selects = []"
       @change="changePropertyHandler"
       v-if="setPropertyDatas.length"
     />
@@ -57,6 +58,7 @@ const emit = defineEmits<{
   (e: "delShape"): void;
 }>();
 
+const mouseShapes = useMouseShapesStatus();
 const store = useStore();
 const history = useHistory();
 const autoUpdate = ref(true);
@@ -141,6 +143,7 @@ const changePropertyHandler = () => {
   });
 };
 
+const defStyle = { ...defaultStyle };
 const { shape, tData, data } = useComponentStatus<Rect, GroupData>({
   emit,
   props,
@@ -223,7 +226,7 @@ const { shape, tData, data } = useComponentStatus<Rect, GroupData>({
       },
     });
   },
-  defaultStyle,
+  defaultStyle: defStyle,
   propertys: [],
 });
 

src/core/components/group/index.ts

@@ -10,17 +10,18 @@ import {
 import { Transform } from "konva/lib/Util";
 import { components } from "../index";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./group.vue";
 export { default as TempComponent } from "./temp-group.vue";
 
 export const shapeName = ui18n.t('shape.group.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('group', {
   stroke: "#cccccc",
   strokeWidth: 2,
   opacity: 0.8,
   dash: [10, 10],
-};
+});
 
 export const addMode = "dots";
 

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

@@ -21,7 +21,8 @@ const props = defineProps<{
   autoUpdate?: boolean;
 }>();
 const shape = ref<DC<Rect>>();
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 
 const stage = useStage();
 const getGroupShapes = () => {

src/core/components/icon/icon.ts

@@ -12,9 +12,10 @@ import { getSvgContent, parseSvgContent } from "@/utils/resource.ts";
 import { Color } from "three";
 import { ui18n } from "@/lang/index.ts";
 import { themeColor } from "@/constant/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export const shapeName = ui18n.t("shape.icon.name");
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('icon', {
   coverStroke:  themeColor,
   coverStrokeWidth: 1,
   coverOpcatiy: 0,
@@ -22,7 +23,7 @@ export const defaultStyle = {
   strokeScaleEnabled: false,
   width: 80,
   height: 80,
-};
+});
 export const fixedStrokeOptions: number[] = [];
 
 type ColorCounts = [string, number][];
@@ -69,7 +70,6 @@ export const getIconStyle = async (
       }
     }
   } else {
-    console.log(svgContent.width)
     width = svgContent.width * scale
     height = svgContent.height * scale
   }

src/core/components/icon/icon.vue

@@ -27,6 +27,7 @@ import { Group } from "konva/lib/Group";
 import { Rect } from "konva/lib/shapes/Rect";
 import { setShapeTransform } from "@/utils/shape.ts";
 import { useInstallStrokeWidthDescribe } from "@/core/hook/use-describe.ts";
+import { watchEffect } from "vue";
 
 const props = defineProps<{ data: IconData }>();
 const emit = defineEmits<{

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

@@ -28,7 +28,8 @@ import { themeColor } from "@/constant/index.ts";
 const props = defineProps<{ data: IconData; addMode?: boolean }>();
 const svg = ref<SVGParseResult | null>(null);
 const shape = ref<DC<Group>>();
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 
 defineExpose({
   get shape() {

src/core/components/icon/temp-path.vue

@@ -1,6 +1,5 @@
 <template>
   <v-path :config="config" name="icon-path" />
-
   <!-- <v-path :config="{ ...props.config, x: 32 }" name="icon-path" /> -->
 </template>
 
@@ -16,38 +15,6 @@ const props = defineProps<{
 }>();
 
 const config = computed(() => {
-  if (!props.config.fix) {
-    return props.config;
-  }
-
-  const dec = props.mat.decompose();
-  const invScaleX = dec.scaleX ? 1 / dec.scaleX : 1;
-  const invScaleY = dec.scaleY ? 1 / dec.scaleY : 1;
-
-  // When canceling parent scaling for a sub-path, we must also scale around a
-  // stable anchor point; otherwise the path shrinks towards (0,0) and drifts.
-  const box = props.config.box;
-  const fixCenter = props.config.fixCenter || "";
-  const ax = fixCenter.includes("L")
-    ? box.x
-    : fixCenter.includes("R")
-      ? box.x + box.width
-      : box.x + box.width / 2;
-  const ay = fixCenter.includes("T")
-    ? box.y
-    : fixCenter.includes("B")
-      ? box.y + box.height
-      : box.y + box.height / 2;
-
-  return {
-    ...props.config,
-    scaleX: invScaleX,
-    scaleY: invScaleY,
-    // Keep the original svg offset (temp-icon uses svg.x/svg.y as an offset),
-    // but use (ax, ay) as the scaling origin for this path.
-    offset: { x: ax, y: ay },
-    x: ax - props.svg.x,
-    y: ay - props.svg.y,
-  } as any;
+  return props.config;
 });
 </script>

src/core/components/image/index.ts

@@ -11,27 +11,27 @@ import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Size } from "@/utils/math.ts";
 import { themeColor } from "@/constant";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./image.vue";
 export { default as TempComponent } from "./temp-image.vue";
 
 export const shapeName = ui18n.t('shape.image.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('image', {
   strokeWidth: 0,
   stroke: themeColor,
-};
+});
 
 export const addMode = "dot";
 
 export const getMouseStyle = (data: ImageData) => {
   const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
-
   return {
-    default: { stroke: data.stroke || defaultStyle.stroke },
-    hover: { stroke: strokeStatus.hover, strokeWidth: 1 },
-    focus: { stroke: strokeStatus.hover, strokeWidth: 1 },
-    select: { stroke: strokeStatus.select, strokeWidth: 1 },
-    press: { stroke: strokeStatus.press, strokeWidth: 1 },
+    default: { stroke: data.stroke || defaultStyle.stroke, strokeWidth: 0 },
+    hover: { stroke: strokeStatus.hover, strokeWidth: 2 },
+    focus: { stroke: strokeStatus.hover, strokeWidth: 2 },
+    select: { stroke: strokeStatus.select, strokeWidth: 2 },
+    press: { stroke: strokeStatus.press, strokeWidth: 2 },
   };
 };
 

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

@@ -31,7 +31,8 @@ import { Group } from "konva/lib/Group";
 import { DC } from "@/deconstruction.js";
 
 const props = defineProps<{ data: ImageData; addMode?: boolean }>();
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 const image = ref<HTMLImageElement | null>(null);
 const shape = ref<DC<Group>>();
 defineExpose({

src/core/components/line-chunk/index.ts

@@ -10,14 +10,15 @@ import { Group } from "konva/lib/Group";
 import mitt from "mitt";
 import { watch } from "vue";
 import { ui18n } from "@/lang";
+import { installGlobalStyle } from "@/core/hook/use-global-style";
 
 export const shapeName = ui18n.t('shape.line.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('lineChunk', {
   strokeWidth: 3,
   stroke: "#000000",
   fixed: true,
   dash: [30, 0],
-};
+});
 
 export { fixedStrokeOptions } from "./attrib";
 export const useDraw = generateUseDraw('lineChunk');
@@ -25,6 +26,8 @@ export const useDraw = generateUseDraw('lineChunk');
 export const getMouseStyle = (data: LineData) => {
   const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
   const strokeWidth = data.strokeWidth || defaultStyle.strokeWidth;
+
+  console.log(strokeStatus.hover)
   return {
     default: { stroke: data.stroke || defaultStyle.stroke, strokeWidth },
     hover: { stroke: strokeStatus.hover },

src/core/components/line/attach-server.ts

@@ -628,7 +628,7 @@ export const useLineDescribes = (
       }
       d.length = {
         type: "inputNum",
-        label: ui18n.t('sys.length'),
+        label: ui18n.t('line.length'),
         "layout-type": "row",
         props: {
           proportion: true,

src/core/components/line/index.ts

@@ -17,6 +17,7 @@ import * as wallRenderer from "./renderer/wall";
 import { Group } from "konva/lib/Group";
 import { generateUseDraw } from "./use-draw.ts";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./line.vue";
 export { default as TempComponent } from "./temp-line.vue";
@@ -25,12 +26,12 @@ export { generateUseDraw } from "./use-draw.ts";
 export const useDraw = generateUseDraw("line");
 
 export const shapeName = ui18n.t('shape.wall.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('line', {
   stroke: "#000000",
   strokeWidth: 20,
   fixed: true,
   dash: [30, 0],
-};
+});
 
 export const renderer = ref<{
   genGetShapeAttrib: (data: Ref<LineData | undefined>) => any;

src/core/components/line/renderer/wall/view.ts

@@ -361,7 +361,7 @@ export const useGetDiffLineIconPolygons = (
 
   const scale = useFixedScale();
   const width = computed(() =>
-    (line.fixed ? line.strokeWidth * scale.value : line.strokeWidth) + 10
+    (line.fixed ? line.strokeWidth * scale.value : line.strokeWidth) + 100000
   );
 
   const interPolygons = computed(() => {

src/core/components/line/single-line.vue

@@ -90,6 +90,7 @@ import EditLine from "../share/edit-line.vue";
 import singlePoint from "./single-point.vue";
 import { computed, ref } from "vue";
 import { getMouseStyle, LineData, LineDataLine, renderer } from "./index.ts";
+import { getMouseStyle as getChunkMouseStyle } from "../line-chunk/index.ts";
 import { onlyId } from "@/utils/shared.ts";
 import { Pos } from "@/utils/math.ts";
 import { Line } from "konva/lib/shapes/Line";
@@ -199,9 +200,10 @@ const active = computed(() => {
   const operShapes = [...tfShapes.value, ...mStatus.actives];
   return operShapes.some((item) => joinIds.value.includes(item.id()));
 });
+
 const [style] = useAnimationMouseStyle({
   shape,
-  getMouseStyle,
+  getMouseStyle: props.type === "line" ? getMouseStyle : getChunkMouseStyle,
   data: lineData as any,
 });
 

src/core/components/line/use-draw.ts

@@ -10,7 +10,11 @@ import { useHistory, useHistoryAttach } from "@/core/hook/use-history";
 import { useStore } from "@/core/store";
 import { useViewerTransform } from "@/core/hook/use-viewer";
 import { useOperMode } from "@/core/hook/use-status";
-import { installGlobalVar, useCursor } from "@/core/hook/use-global-vars";
+import {
+  installGlobalVar,
+  useCursor,
+  useRunHook,
+} from "@/core/hook/use-global-vars";
 import { useInteractiveDots } from "@/core/hook/use-interactive";
 import { computed, nextTick, reactive, ref, watch } from "vue";
 import { copy, mergeFuns } from "@/utils/shared";
@@ -24,7 +28,7 @@ import { useProportion } from "@/core/hook/use-proportion";
 type PayData = Pos;
 
 const useTypeInitData = installGlobalVar(() =>
-  ref<Record<string, LineData | undefined>>({})
+  ref<Record<string, LineData | undefined>>({}),
 );
 export const useInitData = (type: string) => {
   const allInitData = useTypeInitData();
@@ -49,6 +53,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
   const viewTransform = useViewerTransform();
   const operMode = useOperMode();
   const hInitData = useInitData(type);
+  const runHook = useRunHook();
   const customSnapInfos = useCustomSnapInfos();
   const { invTransform } = useProportion();
   let initData: LineData | undefined;
@@ -109,7 +114,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
   });
 
   const shapeId = computed(
-    () => ia.isRunning.value && store.getTypeItems(type)[0]?.id
+    () => ia.isRunning.value && store.getTypeItems(type)[0]?.id,
   );
   const drawItems = reactive([]) as LineData[];
   watch(
@@ -140,14 +145,14 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
         initData = hInitData.value = undefined;
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   const messages = useHistoryAttach<Pos[]>(
     `${type}-pen`,
     isRuning,
     () => [],
-    true
+    true,
   );
 
   const getAddMessage = (cur: Pos) => {
@@ -187,13 +192,15 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
 
   const addItem = (cur: PayData) => {
     if (!drawItems[0]) {
-      const data = obj.interactiveToData({
-        preset: ia.preset as any,
-        info: setMessage(cur),
-        viewTransform: viewTransform.value,
-        history,
-        store,
-      });
+      const data = runHook(() =>
+        obj.interactiveToData({
+          preset: ia.preset as any,
+          info: setMessage(cur),
+          viewTransform: viewTransform.value,
+          history,
+          store,
+        }),
+      );
       if (!data) {
         drawItems.pop();
         return;
@@ -254,13 +261,16 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
     const update = () => {
       needInputClear && keyInput.clear();
       const msg = setMessage(cur);
-      drawItems[0] = obj.interactiveFixData({
-        data: drawItems[0]!,
-        info: msg,
-        viewTransform: viewTransform.value,
-        history,
-        store,
-      })!;
+      drawItems[0] = runHook(
+        () =>
+          obj.interactiveFixData({
+            data: drawItems[0]!,
+            info: msg,
+            viewTransform: viewTransform.value,
+            history,
+            store,
+          })!,
+      );
       isTempDraw = true;
     };
 
@@ -295,7 +305,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
           ia.singleDone.value = true;
           keyInput.clear();
         }
-      }
+      },
     );
 
     stopWatch = mergeFuns(
@@ -313,7 +323,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
             update();
           }
         },
-        { deep: true }
+        { deep: true },
       ),
       // 监听是否消费完毕
       watch(ia.singleDone, () => {
@@ -326,7 +336,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
         stopWatch && stopWatch();
         stopWatch = null;
         isTempDraw = false;
-      })
+      }),
     );
   };
 
@@ -337,7 +347,7 @@ const useDraw = (type: "line" | "lineChunk" = "line") => {
       datas.forEach(addItem);
       ia.consume(datas);
     },
-    { immediate: true }
+    { immediate: true },
   );
 
   return drawItems;

src/core/components/polygon/index.ts

@@ -5,18 +5,19 @@ import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
 import { inRevise } from "@/utils/shared.ts";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./polygon.vue";
 export { default as TempComponent } from "./temp-polygon.vue";
 
 export const shapeName = ui18n.t('shape.polygon.name') ;
 export const fixedStrokeOptions:number[] = [];
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('polygon', {
   stroke: "#000000",
   fixed: true,
   strokeWidth: 5,
   dash: [30, 0],
-};
+});
 
 export const getMouseStyle = (data: PolygonData) => {
   const fillStatus = data.fill && getMouseColors(data.fill);

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

@@ -56,9 +56,12 @@ const emit = defineEmits<{
 }>();
 
 const scale = useFixedScale();
+const defStyle = {
+  ...defaultStyle,
+};
 const data = computed(() => {
   const style = {
-    ...defaultStyle,
+    ...defStyle,
     ...props.data,
   };
   if (style.fixed) {

src/core/components/rectangle/index.ts

@@ -5,12 +5,13 @@ import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./rectangle.vue";
 export { default as TempComponent } from "./temp-rectangle.vue";
 
 export const shapeName = ui18n.t('shape.rect.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('rectangle', {
   dash: [30, 0],
   fixed: true,
   strokeWidth: 5,
@@ -19,7 +20,7 @@ export const defaultStyle = {
   align: "center",
   fontStyle: "normal",
   fontColor: "#000000",
-};
+});
 export const fixedStrokeOptions:number[] = [];
 
 export const getMouseStyle = (data: RectangleData) => {

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

@@ -49,9 +49,10 @@ const emit = defineEmits<{
 
 const config = useConfig();
 const scale = useFixedScale();
+const defStyle = { ...defaultStyle };
 const data = computed(() => {
   const style = {
-    ...defaultStyle,
+    ...defStyle,
     ...props.data,
   };
   if (style.fixed) {

src/core/components/sequent-line/index.ts

@@ -5,16 +5,17 @@ import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
 import { inRevise } from "@/utils/shared.ts";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./line.vue";
 export { default as TempComponent } from "./temp-line.vue";
 
 export const shapeName = ui18n.t('shape.polygon1.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('sequentLine', {
   stroke: '#000000',
   strokeWidth: 20,
   dash: [30, 0],
-};
+});
 
 export const addMode = "dots";
 

src/core/components/sequent-line/temp-line.vue

@@ -58,7 +58,8 @@ const emit = defineEmits<{
   (e: "deletePoint", ndx: number): void;
 }>();
 
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 const config = useConfig();
 const hitFunc: LineConfig["hitFunc"] = (con, shape) => {
   con.beginPath();

src/core/components/serial/index.ts

@@ -1,6 +1,6 @@
 import { getBaseItem } from "../util.ts";
 import { Transform } from "konva/lib/Util";
-import { CircleData, defaultStyle as circleDefaultStyle } from "../circle";
+import { CircleData, _defaultStyle as circleDefaultStyle } from "../circle";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { DrawStore } from "@/core/store/index.ts";
 import { Pos } from "@/utils/math.ts";
@@ -18,6 +18,7 @@ import {
 import { useHistory } from "@/core/hook/use-history.ts";
 import { DrawExpose } from "@/core/hook/use-expose.ts";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export {
   getMouseStyle,
@@ -30,7 +31,7 @@ export { default as GroupComponent } from "./serial-group.vue";
 export { default as Component } from "./serial.vue";
 export { default as TempComponent } from "./temp-serial.vue";
 
-export const defaultTableStyle = {
+export const defaultTableStyle = installGlobalStyle('serialTable', {
   right: 44,
   top: 175,
   fontSize: 16,
@@ -40,13 +41,13 @@ export const defaultTableStyle = {
   valueColWidth: 180,
   repColCount: 1,
   tableStrokeWidth: 1,
-};
+});
 export const shapeName = ui18n.t('shape.serial.name');
 export const addMode = "dot";
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('serial', {
   ...circleDefaultStyle,
   strokeWidth: 2,
-};
+});
 
 export const fixedStrokeOptions: number[] = [];
 export const autoGenTable = ref(true);

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

@@ -59,8 +59,9 @@ const emit = defineEmits<{
 }>();
 
 const scale = useFixedScale();
+const defStyle = { ...defaultStyle };
 const data = computed(() => {
-  const data = { ...defaultStyle, ...props.data };
+  const data = { ...defStyle, ...props.data };
   if (data.fixed) {
     data.strokeWidth *= scale.value;
   }
@@ -180,6 +181,18 @@ const getJoinPoint = (shape: Node) => {
 };
 
 const joinPoints = ref<Pos[][]>([]);
+const updateArrow = () => {
+  if (!props.data.joinIds?.length) return;
+  const $stage = stage.value!.getNode();
+  joinPoints.value = props.data.joinIds
+    .map((id) => {
+      const shape = $stage.findOne<Group>(`#${id}`)?.findOne(".repShape");
+      if (!shape) return;
+      return getJoinPoint(shape);
+    })
+    .filter(Boolean) as Pos[][];
+};
+
 watch(
   () => {
     if (props.data.joinIds) {
@@ -187,20 +200,11 @@ watch(
     }
     return [props.data.mat[4], props.data.mat[5]];
   },
-  debounce(() => {
-    if (!props.data.joinIds?.length) return;
-    const $stage = stage.value!.getNode();
-    joinPoints.value = props.data.joinIds
-      .map((id) => {
-        const shape = $stage.findOne<Group>(`#${id}`)?.findOne(".repShape");
-        if (!shape) return;
-        return getJoinPoint(shape);
-      })
-      .filter(Boolean) as Pos[][];
-  }, 300),
+  updateArrow,
   { immediate: true }
 );
 
+setTimeout(updateArrow, 300);
 const shape = ref<DC<Circle>>();
 defineExpose({
   get shape() {

src/core/components/table/index.ts

@@ -12,12 +12,13 @@ import { numEq, Size } from "@/utils/math.ts";
 import { copy } from "@/utils/shared.ts";
 import { MathUtils } from "three";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./table.vue";
 export { default as TempComponent } from "./temp-table.vue";
 
 export const shapeName = ui18n.t('shape.table.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('table', {
   stroke: '#000000',
   strokeWidth: 1,
   fontSize: 16,
@@ -25,14 +26,14 @@ export const defaultStyle = {
   fontStyle: "normal",
   titleHeight: 20,
   fontColor: '#000000',
-};
-export const defaultCollData = {
+});
+export const defaultCollData = installGlobalStyle('tableCol', {
   fontFamily: "Calibri",
   fontSize: 16,
   align: "center",
   fontStyle: "normal",
   fontColor: themeColor
-};
+});
 
 export const addMode = "area";
 

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

@@ -77,7 +77,8 @@ import { useViewerInvertTransform, useViewerTransform } from "@/core/hook/use-vi
 import { lineLen, Pos } from "@/utils/math.ts";
 
 const props = defineProps<{ data: TableData; addMode?: boolean; editer?: boolean }>();
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 const emit = defineEmits<{
   (e: "updateContent", data: { rowNdx: number; colNdx: number; val: string }): void;
   (e: "update:isEdit", data: { rowNdx: number; colNdx: number; val: boolean }): void;

src/core/components/text/index.ts

@@ -13,6 +13,7 @@ import { zeroEq } from "@/utils/math.ts";
 import { MathUtils } from "three";
 import { getSupportedFont } from "@/utils/shared.ts";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./text.vue";
 export { default as TempComponent } from "./temp-text.vue";
@@ -26,14 +27,14 @@ const supportedFont = getSupportedFont([
 ]);
 
 export const shapeName =  ui18n.t('shape.text.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('text', {
   fill: '#000000',
   // strokeWidth: 0,
   fontFamily: supportedFont,
   fontSize: 22,
   align: "center",
   fontStyle: "normal",
-};
+});
 
 export const addMode = "dot";
 

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

@@ -30,7 +30,8 @@ const emit = defineEmits<{
   (e: "update:isEdit", val: boolean): void;
 }>();
 
-const data = computed(() => ({ ...defaultStyle, ...props.data }));
+const defStyle = { ...defaultStyle };
+const data = computed(() => ({ ...defStyle, ...props.data }));
 const shape = ref<DC<Text>>();
 defineExpose({
   get shape() {

src/core/components/triangle/index.ts

@@ -4,12 +4,13 @@ import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
 import { ui18n } from "@/lang/index.ts";
+import { installGlobalStyle } from "@/core/hook/use-global-style.ts";
 
 export { default as Component } from "./triangle.vue";
 export { default as TempComponent } from "./temp-triangle.vue";
 
 export const shapeName = ui18n.t('shape.triangle.name');
-export const defaultStyle = {
+export const defaultStyle = installGlobalStyle('triangle', {
   stroke: '#000000',
   strokeWidth: 5,
   fontSize: 22,
@@ -17,7 +18,7 @@ export const defaultStyle = {
   align: "center",
   fontStyle: "normal",
   fontColor: '#000000',
-};
+});
 
 export const addMode = "area";
 export const fixedStrokeOptions:number[] = [];

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

@@ -47,11 +47,9 @@ const emit = defineEmits<{
   (e: "update:isEdit", data: boolean): void;
 }>();
 const fscale = useFixedScale();
+const defStyle = { ...defaultStyle };
 const data = computed(() => {
-  const style = {
-    ...defaultStyle,
-    ...props.data,
-  };
+  const style = { ...defStyle, ...props.data };
   if (style.fixed) {
     style.strokeWidth *= fscale.value;
   }

src/core/hook/use-component.ts

@@ -50,12 +50,12 @@ export const useComponentMenus = <T extends DrawItem>(
   data: Ref<T>,
   emit: Emit<T>,
   alignment?: (data: T, mat: Transform) => void,
-  copyHandler?: (transform: Transform, data: T) => T
+  copyHandler?: (transform: Transform, data: T) => T,
 ) => {
   const operateMenus: Array<{
     icon?: any;
     label?: string;
-    hide?: boolean,
+    hide?: boolean;
     handler: () => void;
   }> = shallowReactive([]);
 
@@ -63,20 +63,22 @@ export const useComponentMenus = <T extends DrawItem>(
   const currentZIndex = useCurrentZIndex();
   operateMenus.push(
     reactive({
-      label: computed(() => (data.value.lock ? ui18n.t('sys.unlock') : ui18n.t('sys.lock'))) as any,
+      label: computed(() =>
+        data.value.lock ? ui18n.t("sys.unlock") : ui18n.t("sys.lock"),
+      ) as any,
       handler() {
         data.value.lock = !data.value.lock;
         emit("updateShape", { ...data.value });
       },
     }),
     reactive({
-      label: ui18n.t('sys.hide'),
+      label: ui18n.t("sys.hide"),
       hide: true,
       handler() {
         data.value.hide = true;
         emit("updateShape", { ...data.value });
       },
-    })
+    }),
     // {
     //   label: `上移`,
     //   icon: Top,
@@ -98,7 +100,7 @@ export const useComponentMenus = <T extends DrawItem>(
   if (alignment) {
     const [alignmentShape] = useAlignmentShape(shape);
     operateMenus.push({
-      label: ui18n.t('sys.alignment'),
+      label: ui18n.t("sys.alignment"),
       async handler() {
         const mat = await alignmentShape();
         alignment(data.value, mat);
@@ -115,12 +117,12 @@ export const useComponentMenus = <T extends DrawItem>(
     const status = useMouseShapesStatus();
     const stage = useStage();
     operateMenus.push({
-      label: ui18n.t('sys.copy'),
+      label: ui18n.t("sys.copy"),
       async handler() {
         const transform = getCopyTransform();
         const copyData = copyHandler(
           transform,
-          JSON.parse(JSON.stringify(data.value)) as T
+          JSON.parse(JSON.stringify(data.value)) as T,
         );
         copyData.id = onlyId();
         emit("addShape", copyData);
@@ -137,23 +139,23 @@ export const useComponentMenus = <T extends DrawItem>(
   }
   operateMenus.push(
     {
-      label: ui18n.t('sys.ztop'),
+      label: ui18n.t("sys.ztop"),
       handler() {
         data.value.zIndex = currentZIndex.max + 1;
         emit("updateShape", { ...data.value });
       },
     },
     {
-      label: ui18n.t('sys.zbot'),
+      label: ui18n.t("sys.zbot"),
       handler() {
         data.value.zIndex = currentZIndex.min - 1;
         emit("updateShape", { ...data.value });
       },
-    }
+    },
   );
   if (!data.value.disableDelete) {
     operateMenus.push({
-      label: ui18n.t('sys.del'),
+      label: ui18n.t("sys.del"),
       handler() {
         emit("delShape");
       },
@@ -165,7 +167,7 @@ export const useComponentMenus = <T extends DrawItem>(
 
 export type UseComponentStatusProps<
   T extends DrawItem,
-  S extends EntityShape
+  S extends EntityShape,
 > = {
   emit: Emit<T>;
   type?: ShapeType;
@@ -182,7 +184,7 @@ export type UseComponentStatusProps<
   customTransform?: (
     callback: () => void,
     shape: Ref<DC<S> | undefined>,
-    data: Ref<T>
+    data: Ref<T>,
   ) => void;
   getRepShape?: () => Shape;
   copyHandler?: (transform: Transform, data: T) => T;
@@ -191,7 +193,7 @@ export type UseComponentStatusProps<
 export const useComponentDescribes = <T extends { id: string }>(
   data: Ref<T>,
   propertys: PropertyKeys,
-  defaultStyle: any
+  defaultStyle: any,
 ) => {
   const store = useStore();
   const id = computed(() => data.value.id);
@@ -208,8 +210,8 @@ export const useComponentDescribes = <T extends { id: string }>(
         : initDescs;
     descs.value = Object.fromEntries(
       Object.entries(iDescs).sort(
-        ([_a, a], [_b, b]) => (b.sort || -1) - (a.sort || -1)
-      )
+        ([_a, a], [_b, b]) => (b.sort || -1) - (a.sort || -1),
+      ),
     ) as PropertyDescribes;
   });
   watchEffect((onCleanup) => {
@@ -238,13 +240,13 @@ export const useComponentDescribes = <T extends { id: string }>(
         });
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
   return descs;
 };
 
 export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
-  args: UseComponentStatusProps<T, S>
+  args: UseComponentStatusProps<T, S>,
 ) => {
   const shape = shallowRef<DC<S>>();
   watchEffect(
@@ -253,11 +255,11 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
         markRaw(shape.value);
       }
     },
-    { flush: "sync" }
+    { flush: "sync" },
   );
   const data = useAutomaticData(
     () => args.props.data,
-    (data) => (args.selfData ? data : copy(data))
+    (data) => (args.selfData ? data : copy(data)),
   );
   const [style, pause, resume] = useAnimationMouseStyle({
     data: data,
@@ -278,28 +280,28 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
       shape as any,
       data as any,
       (newData) => args.emit("updateShape", newData as T),
-      args.getRepShape as any
+      args.getRepShape as any,
     );
   } else if (args.transformType === "mat") {
     useMatCompTransformer(shape, data as any, (nData) =>
-      args.emit("updateShape", nData as any)
+      args.emit("updateShape", nData as any),
     );
   } else if (args.transformType === "custom" && args.customTransform) {
     args.customTransform(
       () => args.emit("updateShape", data.value as any),
       shape,
-      data
+      data,
     );
   }
   if (!args.noJoinZindex) {
     useZIndex(shape, data);
   }
-
+  const defStyle = { ...args.defaultStyle };
   return {
     data,
     style,
     tData: computed(() => {
-      const tData = { ...args.defaultStyle, ...data.value };
+      const tData = { ...defStyle, ...data.value };
       if (style) {
         Object.assign(tData, style.value);
       }
@@ -313,12 +315,12 @@ export const useComponentStatus = <S extends EntityShape, T extends DrawItem>(
           data,
           args.emit,
           args.alignment,
-          args.copyHandler
+          args.copyHandler,
         ),
     describes: useComponentDescribes(
       data,
       args.propertys || [],
-      args.defaultStyle
+      args.defaultStyle,
     ),
   };
 };
@@ -369,7 +371,7 @@ export const useGetComponentData = () => {
 
 export const useComponentsAttach = <T>(
   getter: <K extends ShapeType>(type: K, data: DrawItem<K>) => T,
-  types = Object.keys(components) as ShapeType[]
+  types = Object.keys(components) as ShapeType[],
 ) => {
   const store = useStore();
   const attachs = reactive([]) as T[];
@@ -403,8 +405,8 @@ export const useComponentsAttach = <T>(
             });
           }
         },
-        { immediate: true, deep: true }
-      )
+        { immediate: true, deep: true },
+      ),
     );
   }
 
@@ -423,7 +425,7 @@ export const useOnComponentBoundChange = () => {
   const on = <T extends EntityShape>(
     shapes: Ref<T | T[] | undefined> | T | T[] | undefined,
     callback: (shape: T, type: "transform" | "data") => void,
-    viewListener = true
+    viewListener = true,
   ) => {
     const $shapes = computed(() => {
       shapes = isRef(shapes) ? shapes.value : shapes;
@@ -448,8 +450,8 @@ export const useOnComponentBoundChange = () => {
     if (viewListener) {
       cleanups.push(
         watch(transform, () =>
-          $shapes.value.forEach(($shape) => update($shape, "transform"))
-        )
+          $shapes.value.forEach(($shape) => update($shape, "transform")),
+        ),
       );
     }
     cleanups.push(
@@ -467,8 +469,8 @@ export const useOnComponentBoundChange = () => {
           });
           onCleanup(mergeFuns(cleanups));
         },
-        { immediate: true }
-      )
+        { immediate: true },
+      ),
     );
 
     const onDestroy = mergeFuns(cleanups);

src/core/hook/use-draw.ts

@@ -1,5 +1,5 @@
 import { computed, h, nextTick, reactive, ref, watch, watchEffect } from "vue";
-import { installGlobalVar, useCursor, useStage } from "./use-global-vars";
+import { installGlobalVar, useCursor, useRunHook, useStage } from "./use-global-vars";
 import { useCan, useMode, useOperMode } from "./use-status";
 import {
   Area,
@@ -255,6 +255,7 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
   const conversionPosition = useConversionPosition(true);
   const history = useHistory();
   const store = useStore();
+  const runHook = useRunHook()
   const processorIds = processors.register(() => DrawShape);
   const clear = () => {
     beforeHandler.clear();
@@ -294,13 +295,13 @@ const useInteractiveDrawTemp = <T extends ShapeType>({
   });
 
   const addItem = (cur: PayData<T>) => {
-    let item: any = obj.interactiveToData({
+    let item: any = runHook(() => obj.interactiveToData({
       info: { cur, consumed: ia.consumedMessage, action: MessageAction.add },
       preset: ia.preset,
       history,
       viewTransform: viewTransform.value,
       store,
-    } as any);
+    } as any));
     if (!item) return;
     item = reactive(item);
 
@@ -474,6 +475,7 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
   const history = useHistory();
   const processors = useStoreRenderProcessors();
   const store = useStore();
+  const runHook = useRunHook()
   const viewTransform = useViewerTransform();
   const operMode = useOperMode();
   const processorIds = processors.register(() => {
@@ -583,13 +585,13 @@ export const useInteractiveDrawPen = <T extends ShapeType>(type: T) => {
     }
     let item: any = items.length === 0 ? null : items[0];
     if (!item) {
-      item = obj.interactiveToData({
+      item = runHook(() => obj.interactiveToData({
         preset: ia.preset as any,
         info: setMessage(dot),
         viewTransform: viewTransform.value,
         history,
         store,
-      });
+      }));
       if (!item) return;
       items[0] = item = reactive(item);
     }

src/core/hook/use-expose.ts

@@ -7,6 +7,7 @@ import {
   useMouseMenusFilter,
   useRunHook,
   useStage,
+  // installComponentsStyle,
   useTempStatus,
 } from "./use-global-vars.ts";
 import { useMode, useOperMode } from "./use-status";
@@ -343,7 +344,44 @@ type PickParams<K extends keyof Stage, O extends string> = Stage[K] extends (
   ? Omit<Required<Parameters<Stage[K]>>[0], O>
   : never;
 
+
+import { defaultStyle as arrowDefaultStyle } from "../components/arrow";
+import { defaultStyle as circleDefaultStyle } from "../components/circle";
+import { defaultStyle as groupDefaultStyle } from "../components/group";
+import { defaultStyle as iconDefaultStyle } from "../components/icon";
+import { defaultStyle as imageDefaultStyle } from "../components/image";
+import { defaultStyle as lineDefaultStyle } from "../components/line";
+import { defaultStyle as lineChunkDefaultStyle } from "../components/line-chunk";
+import { defaultStyle as polygonDefaultStyle } from "../components/polygon";
+import { defaultStyle as rectangleDefaultStyle } from "../components/rectangle";
+import { defaultStyle as sequentLineDefaultStyle } from "../components/sequent-line";
+import { defaultStyle as serialDefaultStyle, defaultTableStyle as serailTableDefaultStyle } from "../components/serial";
+import { defaultStyle as tableDefaultStyle, defaultCollData as tableColDefaultStyle } from "../components/table";
+import { defaultStyle as textDefaultStyle } from "../components/text";
+import { defaultStyle as triangleDefaultStyle } from "../components/triangle";
+const installComponentsStyle = installGlobalVar(() => {
+  arrowDefaultStyle.install();
+  circleDefaultStyle.install()
+  groupDefaultStyle.install()
+  iconDefaultStyle.install()
+  imageDefaultStyle.install()
+  lineDefaultStyle.install()
+  lineChunkDefaultStyle.install()
+  polygonDefaultStyle.install()
+  rectangleDefaultStyle.install()
+  sequentLineDefaultStyle.install()
+  serailTableDefaultStyle.install()
+  serialDefaultStyle.install()
+  tableDefaultStyle.install()
+  tableColDefaultStyle.install()
+  textDefaultStyle.install()
+  triangleDefaultStyle.install()
+});
+
 export const useExpose = installGlobalVar(() => {
+  installComponentsStyle()
+
+
   const mode = useMode();
   const interactiveProps = useInteractiveProps();
   const stage = useStage();

src/core/hook/use-global-style.ts

@@ -0,0 +1,69 @@
+import { copy } from "@/utils/shared";
+import {
+  useRendererInstance,
+} from "./use-global-vars";
+
+const key = Symbol("styleVar");
+export const installGlobalStyle = <T>(namespace: string, sysStyle: T) => {
+  const install = () => {
+    console.log('安装', namespace, '默认样式')
+    const data = copy(sysStyle) as T;
+    const instance: any = useRendererInstance();
+    if (key in instance) {
+      instance[key][namespace] = data;
+    } else {
+      instance[key] = { [namespace]: data };
+    }
+  };
+
+  const getData = () => {
+    try {
+      const instance: any = useRendererInstance();
+      const selfStyle = instance[key] && instance[key][namespace]
+      if (!selfStyle) {
+        console.warn(namespace + '未安装默认样式')
+        return sysStyle
+      } else {
+        return selfStyle
+      }
+    } catch (e) {
+      console.warn(namespace + "未在组件内使用，采用系统默认值");
+      return sysStyle;
+    }
+  };
+
+  const result = new Proxy(
+    {},
+    {
+      get(_, key) {
+        if (key === "install") {
+          return install;
+        }
+        return getData()[key as keyof T];
+      },
+      set(_, key, newValue) {
+        getData()[key as keyof T] = newValue;
+        return true;
+      },
+      // 1. 核心：控制哪些键能被外部看到
+      ownKeys() {
+        // 获取实际数据对象的所有键，但不包含 "install"
+        return Reflect.ownKeys(getData() as any);
+      },
+      // 2. 核心：确保解构时能正确读取属性描述符
+      getOwnPropertyDescriptor(_, key) {
+        const data = getData() as any;
+        if (key in data) {
+          return {
+            enumerable: true, // 允许被解构
+            configurable: true,
+            value: data[key as keyof T],
+          };
+        }
+        // 对于 install，我们可以返回不可枚举或直接返回 undefined
+        return undefined;
+      },
+    },
+  );
+  return result as T & { install: typeof install };
+};

src/core/hook/use-global-vars.ts

@@ -23,7 +23,6 @@ import { debounce, mergeFuns, onlyId } from "@/utils/shared.ts";
 import { StoreData } from "../store/store.ts";
 import { DomMountId, rendererMap, rendererName } from "@/constant/index.ts";
 import { Shape, ShapeConfig } from "konva/lib/Shape";
-import { ElLoading } from "element-plus";
 import { PropertyDescribes } from "../html-mount/propertys/index.ts";
 import { ShapeType } from "@/index.ts";
 import { isEditableElement } from "@/utils/dom.ts";
@@ -477,3 +476,4 @@ export const useMouseMenusFilter = installGlobalVar(() => {
     getFilter: propsFilter.getFilter,
   };
 });
+

src/core/hook/use-group.ts

@@ -125,7 +125,7 @@ export const useComponentsDescribes = (ids: Ref<string[]>) => {
       }
       if (i !== descs.length) {
         mergeDesc[key].label =
-          mergeDesc[key].label + `(${ui18n.t("sys.sys.more")})`;
+          mergeDesc[key].label + `(${ui18n.t("sys.more")})`;
         value = undefined;
       }
 

src/core/hook/use-mouse-status.ts

@@ -6,6 +6,7 @@ import {
   installGlobalVar,
   usePointerIntersections,
   usePointerPos,
+  useRunHook,
   useStage,
   useTransformIngShapes,
 } from "./use-global-vars.ts";
@@ -466,8 +467,9 @@ export const useMouseStyle = <T extends ShapeType>(
   const shape = props.shape || ref();
   const status = useMouseShapeStatus(shape);
   const transformIngShapes = useTransformIngShapes();
+  const runHook = useRunHook()
   const mouseStyle = computed(() => {
-    return props.getMouseStyle(props.data.value as any) as any;
+    return runHook(() => props.getMouseStyle(props.data.value as any) as any);
   });
 
   const getStyle = () => {

src/core/renderer/renderer.vue

@@ -167,10 +167,6 @@ const cursorStyle = computed(() => {
   }
 });
 
-watchEffect(() => {
-  console.log(cursor.value)
-})
-
 const expose = useExpose();
 defineExpose(expose);
 </script>

src/example/components/slide/slide-icons.vue

@@ -62,25 +62,28 @@ const drawIcon = async (item: IconItem) => {
 
   const name = item.name;
   const type = item.wall ? "lineIcon" : "icon";
-  const parset: any = await getIconStyle(
-    url,
-    item.parse?.width,
-    item.parse?.height,
-    item.parse && "fixedScale" in item.parse ? item.parse.fixedScale : true,
-    item.type === "realScale" ? 0.1 : undefined
+  const parset: any = await props.draw.runHook(() =>
+    getIconStyle(
+      url,
+      item.parse?.width,
+      item.parse?.height,
+      item.parse && "fixedScale" in item.parse ? item.parse.fixedScale : true,
+      item.type === "realScale" ? 0.1 : undefined
+    )
   );
-  console.log(parset);
   parset.isIcon = true;
-  props.draw.enterDrawShape(
-    type,
-    {
-      ...defaultStyle,
-      ...(item.parse || {}),
-      ...parset,
-      url,
-      name,
-    },
-    true
+  props.draw.runHook(() =>
+    props.draw.enterDrawShape(
+      type,
+      {
+        ...defaultStyle,
+        ...(item.parse || {}),
+        ...parset,
+        url,
+        name,
+      },
+      true
+    )
   );
   emit("exit");
   emit("active", item);

src/example/fuse/views/defStyle.ts

@@ -23,7 +23,7 @@ import {
 } from "@/core/components/serial";
 import { fixedStrokeOptions as serialFixedStrokeOptions } from "@/core/components/serial";
 import { defaultStyle as tableDefStyle } from "@/core/components/table";
-import { fixedStrokeOptions as tableFixedStrokeOptions  } from "@/core/components/table";
+import { fixedStrokeOptions as tableFixedStrokeOptions } from "@/core/components/table";
 import { PaperKey } from "@/example/components/slide/actions";
 import { mergeFuns } from "@/utils/shared";
 import { getPixelReal, getRealPixel } from "./tabulation/gen-tab";
@@ -34,7 +34,7 @@ import { overviewBorderMMToPixel, overviewMMToPixel } from "@/example/constant";
 const setDefStyle = <T extends {}>(
   sys: T,
   custom: Partial<T>,
-  _itemKey?: string
+  _itemKey?: string,
 ) => {
   const backs: (() => void)[] = [];
   for (const key in custom) {
@@ -49,117 +49,131 @@ const setDefStyle = <T extends {}>(
 };
 
 export const tabCustomStyle = (p: PaperKey, draw: Draw) => {
-  const realFixedStrokeOptions = [0.13, 0.18, 0.25, 0.35, 0.5, 0.7];
-  const defFixelStroke = getRealPixel(realFixedStrokeOptions[0], p);
-  
-  const defF = {
-    strokeWidth: defFixelStroke,
-    fixed: false,
-  };
-  console.log(defF)
-  const backs = [
-    draw.mountFilter.setMenusFilter("serial", (data) => {
-      data = { ...data };
-      delete data.fontStyle;
-      return data;
-    }),
-    setDefStyle(
-      iconDefStyle,
-      {
-        width: getRealPixel(10, p),
-        height: getRealPixel(10, p),
-        strokeScaleEnabled: true,
-      } as any,
-      "icon"
-    ),
-    setDefStyle(serialDefStyle, {
-      fill: null,
-      fontSize: getRealPixel(8 - getPixelReal(6, p), p),
-      padding: 6,
-    } as any),
-    setDefStyle(serialTableDefStyle, {
-      nameColWidth: getRealPixel(10, p),
-      valueColWidth: getRealPixel(30, p),
-      fontSize: getRealPixel(4, p),
-      padding: getRealPixel(2, p),
-      colHeight: getRealPixel(8, p),
-      tableStrokeWidth: getRealPixel(0.5, p),
-      repColCount: 2,
-    } as any),
-    watch(
-      () =>
-        draw.store.getTypeItems("table").filter((item) => item.key === joinKey),
-      (serialTables, _, onCleanup) => {
-        const fns = serialTables.map((item) =>
-          draw.mountFilter.setShapeMenusFilter(item.id, (item) => {
-            const c = { ...item };
-            delete c.align;
-            return c;
-          })
-        );
-        onCleanup(mergeFuns(fns));
-      },
-      { immediate: true }
-    ),
+  return draw.runHook(() => {
+    const realFixedStrokeOptions = [0.13, 0.18, 0.25, 0.35, 0.5, 0.7];
+    const defFixelStroke = getRealPixel(realFixedStrokeOptions[0], p);
 
-    setDefStyle(triangleFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(circleFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(arrowFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(rectFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(polygonFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(iconFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(lineIconFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(lineChunkFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(serialFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(tableFixedStrokeOptions, realFixedStrokeOptions),
+    const defF = {
+      strokeWidth: defFixelStroke,
+      fixed: false,
+    };
+    const backs = [
+      draw.mountFilter.setMenusFilter("serial", (data) => {
+        data = { ...data };
+        delete data.fontStyle;
+        return data;
+      }),
+      setDefStyle(
+        iconDefStyle,
+        {
+          width: getRealPixel(10, p),
+          height: getRealPixel(10, p),
+          strokeScaleEnabled: true,
+        } as any,
+        "icon",
+      ),
+      setDefStyle(serialDefStyle, {
+        fill: null,
+        fontSize: getRealPixel(8 - getPixelReal(6, p), p),
+        padding: 6,
+      } as any),
+      setDefStyle(serialTableDefStyle, {
+        nameColWidth: getRealPixel(10, p),
+        valueColWidth: getRealPixel(30, p),
+        fontSize: getRealPixel(4, p),
+        padding: getRealPixel(2, p),
+        colHeight: getRealPixel(8, p),
+        tableStrokeWidth: getRealPixel(0.5, p),
+        repColCount: 2,
+      } as any),
+      watch(
+        () =>
+          draw.store
+            .getTypeItems("table")
+            .filter((item) => item.key === joinKey),
+        (serialTables, _, onCleanup) => {
+          const fns = serialTables.map((item) =>
+            draw.mountFilter.setShapeMenusFilter(item.id, (item) => {
+              const c = { ...item };
+              delete c.align;
+              return c;
+            }),
+          );
+          onCleanup(mergeFuns(fns));
+        },
+        { immediate: true },
+      ),
 
-    setDefStyle(lineChunkDefStyle, defF),
-    setDefStyle(lineIconDefStyle, defF),
-    setDefStyle(iconDefStyle, defF),
-    setDefStyle(polygonDefStyle, defF),
-    setDefStyle(triangleDefStyle, defF),
-    setDefStyle(circleDefStyle, defF),
-    setDefStyle(arrowDefStyle, defF),
-    setDefStyle(rectDefStyle, defF),
-    setDefStyle(serialDefStyle, defF),
-    setDefStyle(tableDefStyle, defF),
-    setDefStyle(serialTableDefStyle, { tableStrokeWidth: defF.strokeWidth }),
-  ];
+      setDefStyle(triangleFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(circleFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(arrowFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(rectFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(polygonFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(iconFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(lineIconFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(lineChunkFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(serialFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(tableFixedStrokeOptions, realFixedStrokeOptions),
 
-  return mergeFuns(backs);
+      setDefStyle(lineChunkDefStyle, defF),
+      setDefStyle(lineIconDefStyle, defF),
+      setDefStyle(iconDefStyle, defF),
+      setDefStyle(polygonDefStyle, defF),
+      setDefStyle(triangleDefStyle, defF),
+      setDefStyle(circleDefStyle, defF),
+      setDefStyle(arrowDefStyle, defF),
+      setDefStyle(rectDefStyle, defF),
+      setDefStyle(serialDefStyle, defF),
+      setDefStyle(tableDefStyle, defF),
+      setDefStyle(serialTableDefStyle, { tableStrokeWidth: defF.strokeWidth }),
+    ];
+
+    return () => {
+      draw.runHook(mergeFuns(backs));
+    }
+  });
 };
 
 const getOverviewRealPixel = (real: number, border = false) =>
   real * (border ? overviewBorderMMToPixel : overviewMMToPixel);
 
-export const overviewCustomStyle = (_draw: Draw) => {
-  const realFixedStrokeOptions = [0.13, 0.18, 0.25, 0.35, 0.5, 0.7];
-  const defFixelStroke = getOverviewRealPixel(realFixedStrokeOptions[0], true);
-  autoGenTable.value = false
-  const backs = [
-    () => autoGenTable.value = true,
-    setDefStyle(lineDefStyle, { strokeWidth: getOverviewRealPixel(120) }),
-    setDefStyle(serialFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(triangleFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(circleFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(arrowFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(rectFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(polygonFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(iconFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(lineIconFixedStrokeOptions, realFixedStrokeOptions),
-    setDefStyle(lineChunkFixedStrokeOptions, realFixedStrokeOptions),
+export const overviewCustomStyle = (draw: Draw) => {
+  return draw.runHook(() => {
+    const realFixedStrokeOptions = [0.13, 0.18, 0.25, 0.35, 0.5, 0.7];
+    const defFixelStroke = getOverviewRealPixel(
+      realFixedStrokeOptions[0],
+      true,
+    );
+    autoGenTable.value = false;
+    const backs = [
+      () => (autoGenTable.value = true),
+      setDefStyle(lineDefStyle, { strokeWidth: getOverviewRealPixel(120) }),
+      setDefStyle(serialFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(triangleFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(circleFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(arrowFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(rectFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(polygonFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(iconFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(lineIconFixedStrokeOptions, realFixedStrokeOptions),
+      setDefStyle(lineChunkFixedStrokeOptions, realFixedStrokeOptions),
 
-    setDefStyle(serialDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(lineChunkDefStyle, { strokeWidth: getOverviewRealPixel(realFixedStrokeOptions[2], true) }),
-    setDefStyle(lineIconDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(iconDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(polygonDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(triangleDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(circleDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(arrowDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(rectDefStyle, { strokeWidth: defFixelStroke }),
-    setDefStyle(iconDefStyle, { strokeWidth: 1 } as any, "icon"),
-    setDefStyle(lineIconDefStyle, { strokeWidth: 1 } as any, "icon"),
-  ];
-  return mergeFuns(backs);
+      setDefStyle(serialDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(lineChunkDefStyle, {
+        strokeWidth: getOverviewRealPixel(realFixedStrokeOptions[2], true),
+      }),
+      setDefStyle(lineIconDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(iconDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(polygonDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(triangleDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(circleDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(arrowDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(rectDefStyle, { strokeWidth: defFixelStroke }),
+      setDefStyle(iconDefStyle, { strokeWidth: 1 } as any, "icon"),
+      setDefStyle(lineIconDefStyle, { strokeWidth: 1 } as any, "icon"),
+    ];
+    return () => {
+      draw.runHook(mergeFuns(backs));
+    }
+  });
 };

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

@@ -25,6 +25,7 @@
     :pixelRatio="needScreenshot ? 6 : pixelRatio"
     :not-debounce="needScreenshot"
     :data="overviewData?.store"
+    :tab-draw="draw"
     :scale="draw?.viewerConfig.scaleX"
     @change-config="(config) => (originConfig = config)"
     v-if="overviewData?.store.config?.proportion.scale"

src/example/fuse/views/tabulation/overview-viewport.vue

@@ -13,7 +13,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
 import { Draw } from "../../../components/container/use-draw";
 import { DrawBoard } from "@/index";
-import { debounce, round } from "@/utils/shared";
+import { debounce, mergeFuns, round } from "@/utils/shared";
 import { StoreData } from "@/core/store/store";
 import { Group } from "konva/lib/Group";
 import { lineLen, Size } from "@/utils/math";
@@ -23,6 +23,7 @@ import { DataGroupId } from "@/constant";
 import { tableCoverHeight, tableCoverWidth } from "@/example/constant";
 import { Transform } from "konva/lib/Util";
 import { Mode } from "@/constant/mode";
+import { overviewCustomStyle } from "../defStyle";
 
 const props = defineProps<{
   scale?: number;
@@ -47,6 +48,7 @@ const initDraw = (d: Draw) => {
     d.config.showGrid = false;
     d.mode.add(Mode.readonly);
     d.config.serailAutoGenTable = false;
+    overviewCustomStyle(d);
   }
   draw.value = d;
 };
@@ -185,7 +187,10 @@ watchEffect(() => {
   }
 });
 
-const updateOrigin = async () => {
+const cleanups: Array<() => void> = [];
+const updateOrigin = () => {
+  mergeFuns(cleanups)();
+  cleanups.length = 0;
   if (!mounted) return;
   const d = draw.value!;
   // 样式设置
@@ -195,22 +200,24 @@ const updateOrigin = async () => {
       const isIcon = type === "icon" || type === "lineIcon";
       if (!("fixed" in item) && !isIcon) return;
 
-      // if (isIcon) return;
+      const init = { ...item };
 
-      item.fixed = false;
-      item.fix = true;
-      if ("strokeWidth" in item && !("__strokeWidth" in item)) {
-        item.__strokeWidth = item.strokeWidth;
-      }
-      if ("__strokeWidth" in item) {
-        item.strokeWidth = (item.__strokeWidth * pixelPaperToDrawPixel.value!) / 2;
-      }
       if (isIcon) {
-        item.strokeWidth = (item.__strokeWidth || 1) * (viewScale.value! / 2);
-        // console.log(item.strokeWidth, item.__strokeWidth);
-        //     ((item.__strokeWidth || iconDefaultStyle.strokeWidth) * viewScale.value!) / 10;
+        item.strokeWidth = (init.strokeWidth || 1) * (viewScale.value! / 4);
+        // item.strokeWidth = init.strokeWidth;
+        cleanups.push(() => (item.strokeWidth = init.strokeWidth));
+      } else {
+        item.fixed = false;
+        item.fix = true;
+        item.strokeWidth = ((init.strokeWidth || 1) * pixelPaperToDrawPixel.value!) / 2;
+        cleanups.push(() => {
+          item.fixed = init.fixed;
+          item.fix = init.fix;
+          item.strokeWidth = init.strokeWidth;
+        });
       }
     };
+
     if (d?.store) {
       d.store.items.forEach(setStyle);
       const lineItems = d.store.getTypeItems("line")[0];
@@ -219,6 +226,7 @@ const updateOrigin = async () => {
   }
 
   const size = canvasSize.value as Size;
+  console.log(size);
   // imageScale
   d.config.size = size;
   d.config.labelLineConfig.type = "auto";
@@ -271,6 +279,8 @@ onMounted(() => {
 onUnmounted(() => {
   frameUpdateOrigin.stop();
   clearTimeout(firstLoadTimeout);
+  mergeFuns(cleanups)();
+  cleanups.length = 0;
 });
 </script>
 

src/example/platform/platform-draw.ts

@@ -189,7 +189,6 @@ const getTaggingShapes = async (taggings: SceneResource["taggings"]) => {
       item.rotate && mat.rotate(item.rotate);
     }
 
-    console.log(item.key)
     if (item.isText) {
       texts.push({
         ...getBaseItem(),
@@ -224,11 +223,14 @@ const getTaggingShapes = async (taggings: SceneResource["taggings"]) => {
         .then((style) => {
           icons.push({ ...shape, ...style });
         })
-        .catch(() => {})
+        .catch((e) => {
+          console.error('获取url失败', e, item)
+        })
     );
   }
 
   await Promise.all(reqs);
+  console.log(texts, images, icons)
   return {
     texts,
     images,

src/example/platform/resource-swkk.ts

@@ -270,6 +270,7 @@ export const getTraceTaggingInfos = async (
       : trace.icon;
     const styleMap = (traceIconMap as any)[icon];
 
+    console.log(trace.title, icon)
     if (!icon) continue;
 
     const getIcon = isSys
@@ -311,7 +312,6 @@ export const getTraceTaggingInfos = async (
     );
   }
   await Promise.all(reqs);
-
   return infos;
 };
 

src/lang/locales/zh.json

@@ -194,6 +194,9 @@
     "search": "搜索图例",
     "undata": "暂无匹配结果"
   },
+  "line": {
+    "length": "线段长度"
+  },
   "mark": {
     "name": "注释"
   },