feat: 优化demo界面

.env.development

@@ -1,4 +1,4 @@
-VITE_PRIMARY='#D8000A'
+VITE_PRIMARY='#109BE0'
 VITE_TITLE='绘图'
 VITE_ENTRY='src/example/fuse/main.ts'
 

package.json

@@ -25,6 +25,7 @@
     "three": "^0.169.0",
     "uuid": "^11.0.2",
     "vite-plugin-html": "^3.2.2",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.5.13",
     "vue-konva": "^3.2.0"
   },

public/icons/TV.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M713.888 512H800v96H224v-96h86.08l32-64H681.92l32 64z m-35.776 0l-16-32h-300.224l-16 32h332.224zM256 544v32h512v-32H256zM0 384h1024v288H0v-288z m32 32v224h960v-224H32z" /></svg>

public/icons/buqiang_o.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M754.592 368l253.408 84.48v215.52L748.8 560h-260.8V480H16v-112h738.592zM48 400V448h472v80h235.2l220.8 92V475.52l-226.592-75.52H48z" /></svg>

public/icons/cad-chuang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 416v32h640v-32h192v192H0v-192h192z m640 128H192v32h640v-32z m0-64H192v32h640v-32z" fill="#8a8a8a" /></svg>

public/icons/cad-piaochuang.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M896 256v320h96v192H32v-192h96V256h768zM224 736h576V352H224v384zM864 288H160v288h32v-256h640v256h32V288z" /></svg>

public/icons/cad-yandao.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M960 64v896H64V64h896z m-32 32H96v832h832V96z m-32 32v768H128V128h768zM160 176.512V864h687.488L709.984 313.984 160 176.512zM864 160H226.08l510.304 127.616L864 798.016V160z" /></svg>

public/icons/cad-yimen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M832 512v-96h192v192H416v-96H192v96H0v-192h608v96h224z m0 32H448v32h384v-32z m-256-96H192v32h384v-32z" /></svg>

public/icons/cad-zhuzi.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M960 64v896H64V64h896zM512 534.624L118.592 928h786.784L512 534.624zM928 118.592L534.624 512 928 905.376V118.592zM96 118.624v786.72L489.376 512 96 118.624zM905.344 96H118.624L512 489.376 905.344 96z" /></svg>

public/icons/line.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M975.104 48.896a21.333333 21.333333 0 0 1 0 30.208l-896 896a21.333333 21.333333 0 0 1-30.208-30.208l896-896a21.333333 21.333333 0 0 1 30.208 0z" /></svg>

public/icons/ratio.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M85.333333 341.333333v128h853.333334V341.333333h42.666666v298.666667h-42.666666v-128H85.333333v128H42.666667V341.333333h42.666666z" /></svg>

public/icons/rectangle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M938.666667 85.333333v853.333334H85.333333V85.333333h853.333334zM42.666667 42.666667v938.666666h938.666666V42.666667H42.666667z" /></svg>

public/icons/shouqiang_o.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16 208h992v599.264h-206.528V589.12h-261.824v-218.176H16V208z m32 32v98.88h523.648v218.24h261.792v218.144H976V240h-928z" /></svg>

public/icons/triangulartriangular.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 42.666667L42.666667 981.333333h938.666666L512 42.666667z m0 95.402666L912.298667 938.666667H111.701333L512 138.069333z" /></svg>

src/components/icon/icon.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="icon"
+    aria-hidden="true"
+    :style="{
+      fontSize: computedSize,
+      stroke: computedColor,
+      fill: computedColor,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+    }"
+    :width="computedSize"
+    :height="computedSize"
+  >
+    <use :xlink:href="`#icon-${name}`" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{ name: string; size?: string; color?: string }>();
+// 计算属性：优先使用 props 传入的值，否则继承父级
+const computedSize = computed(() => props.size || "1em");
+const computedColor = computed(() => props.color || "currentColor");
+</script>

src/components/icon/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ElTooltip effect="dark" :content="tip" v-if="tip">
+    <Icon v-bind="iconProps" />
+  </ElTooltip>
+  <Icon v-bind="iconProps" v-else />
+</template>
+
+<script lang="ts" setup>
+import { ElTooltip } from "element-plus";
+import Icon from "./icon.vue";
+import { computed } from "vue";
+
+const props = defineProps<{
+  name: string;
+  size?: string;
+  color?: string;
+  tip?: string;
+}>();
+const iconProps = computed(() => {
+  const iconProps = { ...props };
+  delete iconProps.tip;
+  return iconProps;
+});
+</script>

src/core/components/circle/index.ts

@@ -22,6 +22,7 @@ export const defaultStyle = {
   strokeWidth: 1,
   fontSize: 16,
   align: "center",
+  fill: '#ffffff',
   fontStyle: "normal",
   fontColor: themeMouseColors.theme,
   padding: 8

src/core/components/group/group.vue

@@ -21,19 +21,13 @@ import { setShapeTransform } from "@/utils/shape.ts";
 import { DrawStoreBusArgs, useStore } from "../../store/index.ts";
 import { Transform } from "konva/lib/Util";
 import { useHistory } from "@/core/hook/use-history.ts";
-import {
-  computed,
-  nextTick,
-  onUnmounted,
-  ref,
-  shallowRef,
-  watchEffect,
-} from "vue";
+import { computed, nextTick, onUnmounted, ref, shallowRef, watchEffect } from "vue";
 import { useOperMode } from "@/core/hook/use-status.ts";
 import { EntityShape } from "@/deconstruction.js";
 import { Top } from "@element-plus/icons-vue";
 import { getBaseItem } from "../util.ts";
 import { useForciblyShowItemIds } from "@/core/hook/use-global-vars.ts";
+import { themeColor } from "@/constant/help-style.ts";
 
 const props = defineProps<{ data: GroupData }>();
 const emit = defineEmits<{
@@ -58,7 +52,7 @@ const { shape, tData, data } = useComponentStatus<Rect, GroupData>({
     useCustomTransformer(shape, data, {
       openSnap: false,
       getRepShape($shape) {
-        const repShape = new Rect({ fill: "red", opacity: 0.3 });
+        const repShape = new Rect({ fill: themeColor, opacity: 0.3 });
         const syncShape = () =>
           autoUpdate.value && (prevMat = $shape.getTransform().copy());
         $shape.on("bound-change", syncShape);

src/core/components/image/image.vue

@@ -14,6 +14,8 @@ import TempImage from "./temp-image.vue";
 import { ImageData, getMouseStyle, defaultStyle, matResponse } from "./index.ts";
 import { useComponentStatus } from "@/core/hook/use-component.ts";
 import { PropertyUpdate, Operate } from "../../html-mount/propertys/index.ts";
+import { Group } from "konva/lib/Group";
+import { Rect } from "konva/lib/shapes/Rect";
 
 const props = defineProps<{ data: ImageData }>();
 const emit = defineEmits<{
@@ -22,12 +24,20 @@ const emit = defineEmits<{
   (e: "delShape"): void;
 }>();
 
-const { shape, tData, data, operateMenus, describes } = useComponentStatus({
+const { shape, tData, data, operateMenus, describes } = useComponentStatus<
+  Group,
+  ImageData
+>({
   emit,
   props,
   getMouseStyle,
   transformType: "mat",
   defaultStyle,
+  getRepShape() {
+    console.log("rect", shape.value?.getNode());
+    const rect = new Rect();
+    return rect;
+  },
   alignment(data, mat) {
     return matResponse({ data, mat, increment: true });
   },
@@ -39,6 +49,6 @@ const { shape, tData, data, operateMenus, describes } = useComponentStatus({
     "opacity",
     //  "ref", "zIndex"
   ],
-  debug: true
+  debug: true,
 });
 </script>

src/core/components/line/index.ts

@@ -1,16 +1,16 @@
 import { Pos } from "@/utils/math.ts";
-import { themeMouseColors } from "@/constant/help-style.ts";
 import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Transform } from "konva/lib/Util";
+import { themeColor } from "@/constant/help-style.ts";
 
 export { default as Component } from "./line.vue";
 export { default as TempComponent } from "./temp-line.vue";
 
 export const shapeName = "线段";
 export const defaultStyle = {
-  stroke: themeMouseColors.theme,
+  stroke: '#000000',
   strokeWidth: 5,
   dash: [30, 0],
 };
@@ -18,11 +18,11 @@ export const defaultStyle = {
 export const addMode = "dots";
 
 export const getMouseStyle = (data: LineData) => {
-  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
+  const strokeStatus = getMouseColors(data.stroke || themeColor);
   const strokeWidth = data.strokeWidth || defaultStyle.strokeWidth;
 
   return {
-    default: { stroke: strokeStatus.pub, strokeWidth },
+    default: { stroke: data.stroke || defaultStyle.stroke, strokeWidth },
     hover: { stroke: strokeStatus.hover },
     select: { stroke: strokeStatus.select },
     press: { stroke: strokeStatus.press },

src/core/components/polygon/index.ts

@@ -1,5 +1,5 @@
 import { Pos } from "@/utils/math.ts";
-import { themeMouseColors } from "@/constant/help-style.ts";
+import { themeColor, themeMouseColors } from "@/constant/help-style.ts";
 import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
 import { getMouseColors } from "@/utils/colors.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
@@ -10,25 +10,29 @@ export { default as TempComponent } from "./temp-polygon.vue";
 
 export const shapeName = "多边形";
 export const defaultStyle = {
-  stroke: themeMouseColors.theme,
+  stroke: '#000000',
+  fill: '#ffffff',
   strokeWidth: 5,
   dash: [30, 0],
 };
 
 export const getMouseStyle = (data: PolygonData) => {
   const fillStatus = data.fill && getMouseColors(data.fill);
-  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
+  const strokeStatus = getMouseColors(data.stroke || themeColor);
   const strokeWidth = data.strokeWidth;
 
   return {
     default: {
       fill: fillStatus && fillStatus.pub,
-      stroke: strokeStatus.pub,
+      stroke: data.stroke || defaultStyle.stroke,
       strokeWidth,
     },
     hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus.hover },
     press: { fill: fillStatus && fillStatus.press, stroke: strokeStatus.press },
-    select: { fill: fillStatus && fillStatus.select, stroke: strokeStatus.select },
+    select: {
+      fill: fillStatus && fillStatus.select,
+      stroke: strokeStatus.select,
+    },
   };
 };
 
@@ -75,18 +79,21 @@ export const interactiveFixData: InteractiveFix<"polygon"> = ({
   return data;
 };
 
-
-export const matResponse = ({data, mat, increment}: MatResponseProps<'polygon'>) => {
-  let transfrom: Transform
+export const matResponse = ({
+  data,
+  mat,
+  increment,
+}: MatResponseProps<"polygon">) => {
+  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/rectangle/index.ts

@@ -13,6 +13,7 @@ export const shapeName = "矩形";
 export const defaultStyle = {
   dash: [30, 0],
   strokeWidth: 1,
+  fill: '#ffffff',
   stroke: themeMouseColors.theme,
   fontSize: 16,
   align: "center",

src/core/components/triangle/index.ts

@@ -14,6 +14,7 @@ export const defaultStyle = {
   strokeWidth: 5,
   fontSize: 16,
   align: "center",
+  fill: '#ffffff',
   fontStyle: "normal",
   fontColor: themeMouseColors.theme,
 };

src/core/helper/compass.vue

@@ -16,7 +16,6 @@ import TempIcon from "../components/icon/temp-icon.vue";
 import { PropertyUpdate, mergeDescribes } from "../html-mount/propertys/index.ts";
 import { computed, ref, watch } from "vue";
 import { themeMouseColors } from "@/constant/help-style.ts";
-import { getMouseColors } from "@/utils/colors.ts";
 import { useAnimationMouseStyle } from "../hook/use-mouse-status.ts";
 import { Group } from "konva/lib/Group";
 import { DC } from "@/deconstruction.js";
@@ -29,7 +28,8 @@ import { useViewerTransformConfig } from "../hook/use-viewer.ts";
 
 const config = useConfig();
 const data = ref({
-  coverFill: themeMouseColors.theme,
+  stroke: themeMouseColors.theme,
+  fill: themeMouseColors.theme,
   coverOpcatiy: 0,
   strokeScaleEnabled: false,
   width: 80,
@@ -37,6 +37,7 @@ const data = ref({
   rotation: 0,
   url: config.compass?.url || "icons/edit_compass.svg",
 });
+console.log(themeMouseColors.theme);
 
 watch(
   () => config.compass!.url,
@@ -50,13 +51,10 @@ const [style] = useAnimationMouseStyle({
   data: data as any,
   shape,
   getMouseStyle: () => {
-    const fillStatus = getMouseColors(data.value.coverFill);
     return {
-      default: {
-        coverFill: fillStatus.pub,
-      },
-      hover: { coverFill: fillStatus.hover },
-      press: { coverFill: fillStatus.press },
+      default: {},
+      hover: {},
+      press: {},
     };
   },
 } as any);

src/core/hook/use-component.ts

@@ -65,22 +65,22 @@ export const useComponentMenus = <T extends DrawItem>(
   // 置顶 置底
   const currentZIndex = useCurrentZIndex();
   operateMenus.push(
-    {
-      label: `上移`,
-      icon: Top,
-      handler() {
-        data.value.zIndex += 1;
-        emit("updateShape", { ...data.value });
-      },
-    },
-    {
-      label: `下移`,
-      icon: Bottom,
-      handler() {
-        data.value.zIndex -= 1;
-        emit("updateShape", { ...data.value });
-      },
-    },
+    // {
+    //   label: `上移`,
+    //   icon: Top,
+    //   handler() {
+    //     data.value.zIndex += 1;
+    //     emit("updateShape", { ...data.value });
+    //   },
+    // },
+    // {
+    //   label: `下移`,
+    //   icon: Bottom,
+    //   handler() {
+    //     data.value.zIndex -= 1;
+    //     emit("updateShape", { ...data.value });
+    //   },
+    // },
     {
       label: `置顶`,
       icon: Upload,

src/core/hook/use-expose.ts

@@ -24,7 +24,7 @@ import { isSvgString } from "@/utils/resource.ts";
 import { useResourceHandler } from "./use-fetch.ts";
 import { useConfig } from "./use-config.ts";
 import { useSelectionRevise } from "./use-selection.ts";
-import { useGetFormalChildren } from "./use-layer.ts";
+import { useFormalLayer, useGetFormalChildren } from "./use-layer.ts";
 
 // 自动粘贴服务
 export const useAutoPaste = () => {
@@ -34,7 +34,7 @@ export const useAutoPaste = () => {
   paste.push({
     ["text/plain"]: {
       async handler(pos, val) {
-        console.log(val)
+        console.log(val);
         if (isSvgString(val)) {
           const url = await resourceHandler(val, "svg");
           drawAPI.addShape("icon", { url, stroke: themeColor }, pos, true);
@@ -101,9 +101,9 @@ export const useShortcutKey = () => {
           });
         });
         if (isSelect) {
-          status.selects = []
+          status.selects = [];
         } else {
-          status.actives = []
+          status.actives = [];
         }
       } else if (operMode.value.mulSelection && ev.key === "A") {
         if (status.selects.length) {
@@ -218,6 +218,25 @@ export const useExpose = installGlobalVar(() => {
     });
   };
 
+  const formalLayer = useFormalLayer();
+  const initViewport = () => {
+    const rect = formalLayer.value!.getClientRect();
+    const invMat = viewer.transform.invert();
+    const lt = invMat.point(rect);
+    const rb = invMat.point({
+      x: rect.x + rect.width,
+      y: rect.y + rect.height,
+    });
+    viewer.setBound({
+      targetBound: {
+        ...lt,
+        width: rb.x - lt.x,
+        height: rb.y - lt.y,
+      },
+      padding: 20,
+    });
+  };
+
   return {
     ...useInteractiveDrawShapeAPI(),
     get stage() {
@@ -226,9 +245,11 @@ export const useExpose = installGlobalVar(() => {
     },
     exposeBlob,
     toggleHit,
+    formalLayer: useFormalLayer(),
     updateSize,
     history,
     store,
+    initViewport,
     mode,
     getData() {
       return store.data;

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

@@ -211,15 +211,33 @@ export const usePointerPos = installGlobalVar(() => {
 }, Symbol("pointerPos"));
 
 export const useDownKeys = installGlobalVar(() => {
-  const keys = reactive(new Set<string>());
+  const keyKeys = reactive(new Set<string>());
+  const mouseKeys = reactive(new Set<string>());
   const cleanup = mergeFuns(
     listener(window, "keydown", (ev) => {
-      keys.add(ev.key);
+      keyKeys.add(ev.key);
     }),
     listener(window, "keyup", (ev) => {
-      keys.delete(ev.key);
+      keyKeys.delete(ev.key);
+    }),
+    listener(window, 'mousemove', (ev) => {
+      ev.shiftKey ? mouseKeys.add('Shift') : mouseKeys.delete('Shift')
+      ev.altKey ? mouseKeys.add('Alt') : mouseKeys.delete('Alt')
+      ev.metaKey ? mouseKeys.add('Meta') : mouseKeys.delete('Meta')
+      ev.ctrlKey ? mouseKeys.add('Ctrl') : mouseKeys.delete('Ctrl')
     })
   );
+  const keys = reactive(new Set<string>())
+  watchEffect(() => {
+    keys.clear()
+    for (const key of keyKeys.values()) {
+      keys.add(key)
+    }
+    for (const key of mouseKeys.values()) {
+      keys.add(key)
+    }
+  })
+
   return {
     var: keys,
     onDestroy: cleanup,

src/core/hook/use-layer.ts

@@ -173,7 +173,7 @@ const useZIndexsManage = installGlobalVar(() => {
       shape.zIndex(start++);
     });
   };
-  globalWatch(() => sortItems.value.length + ',' + current.value, setZIndexs, {immediate: true})
+  globalWatch(() => sortItems.value.map(item => item.id).join(',') + ',' + current.value, setZIndexs, {immediate: true})
 
   return {
     set(shape: EntityShape, item: DrawItem) {