feat: 调整

src/core/components/icon/index.ts

@@ -9,6 +9,8 @@ import { getMouseColors } from "@/utils/colors.ts";
 import { FixScreen } from "@/utils/bound.ts";
 import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
 import { Size } from "@/utils/math.ts";
+import { getSvgContent, parseSvgContent } from "@/utils/resource.ts";
+import { Color } from "three";
 
 export { default as Component } from "./icon.vue";
 export { default as TempComponent } from "./temp-icon.vue";
@@ -22,6 +24,64 @@ export const defaultStyle = {
   height: 80,
 };
 
+  type ColorCounts = [string, number][]
+  const colorsManage = (counts: ColorCounts, color: any) => {
+  if (!color) {
+    return;
+  }
+  const colorHex = new Color(color).getHexString()
+  const item = counts.find(([c]) => c === colorHex)
+  if (!item) {
+    counts.push([colorHex, 1])
+  } else {
+    item[1]++
+  }
+}
+const findColor = (counts: ColorCounts) => {
+  let ndx = -1
+  let max = 0
+  for (let i = 0; i < counts.length; i++) {
+    if (counts[i][1] >= max) {
+      ndx = i
+      max = counts[i][1]
+    }
+  }
+  if (~ndx) {
+    return `#${counts[ndx][0]}`
+  }
+}
+
+export const getIconStyle = async (url: string, width = defaultStyle.width, height = defaultStyle.height) => {
+  const svgContent = parseSvgContent(await getSvgContent(url));
+  if (width / height > svgContent.width / svgContent.height) {
+    width = svgContent.width / svgContent.height * height
+  } else {
+    height = svgContent.height / svgContent.width * width
+  }
+  const fillColorCounts: [string, number][] = []
+  const strokeColorCounts: [string, number][] = []
+
+  for (let i = 0; i < svgContent.paths.length; i++) {
+    colorsManage(fillColorCounts, svgContent.paths[i].fill)
+    colorsManage(strokeColorCounts, svgContent.paths[i].stroke)
+  }
+
+  console.log(fillColorCounts, strokeColorCounts)
+  const color = {
+    fill: findColor(fillColorCounts) || null,
+    stroke: findColor(strokeColorCounts) || null
+  };
+  if (!color.fill && !color.stroke) {
+    color.stroke = "#000000";
+  } 
+  console.log(color, fillColorCounts)
+  return {
+    width,
+    height,
+    ...color
+  }
+}
+
 export const addMode = "dot";
 
 export const getSnapInfos = (data: IconData) => {

src/core/hook/use-expose.ts

@@ -36,6 +36,7 @@ import { components, DrawItem } from "../components/index.ts";
 import { useProportion } from "./use-proportion.ts";
 import { ShapeType } from "@/index.ts";
 import { useGetDXF } from "./use-dxf.ts";
+import { getIconStyle } from "../components/icon/index.ts";
 
 // 自动粘贴服务
 export const useAutoPaste = () => {
@@ -48,7 +49,14 @@ export const useAutoPaste = () => {
         console.log(val);
         if (isSvgString(val)) {
           const url = await resourceHandler(val, "svg");
-          drawAPI.addShape("icon", { url, stroke: '#000000', fill: null }, pos, true);
+          const icon = await getIconStyle(url)
+          if (icon.fill) {
+            icon.fill = '#000000'
+          }
+          if (icon.stroke) {
+            icon.stroke = '#000000'
+          }
+          drawAPI.addShape("icon", { url, ...icon }, pos, true);
         } else {
           drawAPI.addShape("text", { content: val }, pos, true);
         }

src/example/fuse/views/overview/slide-icons.vue

@@ -29,45 +29,23 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { ElCollapse, ElCollapseItem, ElEmpty } from "element-plus";
-import { getSvgContent, parseSvgContent } from "@/utils/resource";
 import { Draw } from "../../../components/container/use-draw.ts";
 import { iconGroups as groups } from "../../../constant";
-import { defaultStyle } from "@/core/components/icon/index.ts";
+import { defaultStyle, getIconStyle } from "@/core/components/icon/index.ts";
 
 const props = defineProps<{ draw: Draw }>();
 const emit = defineEmits<{ (e: "exit"): void }>();
 
 const drawIcon = async (url: string, name: string, item: any) => {
-  const svgContent = parseSvgContent(await getSvgContent(url));
-  const maxSize = 100;
-  const addHeight = (maxSize / svgContent.width) * svgContent.height;
-  const size = {
-    width: maxSize,
-    height: addHeight,
-  };
-  if (size.height > maxSize) {
-    size.height = maxSize;
-    size.width = (maxSize / svgContent.height) * svgContent.width;
-  }
-
-  console.log(svgContent.width, svgContent.height);
-  const color = {
-    fill: svgContent.paths[0]?.fill,
-    stroke: svgContent.paths[0]?.stroke,
-  };
-  if (!color.fill && !color.stroke) {
-    color.stroke = "#000000";
-  }
-
+  const parset = await getIconStyle(url);
   props.draw.enterDrawShape(
     "icon",
     {
       url,
-      ...size,
       name,
-      ...color,
       ...defaultStyle,
       ...(item.parse || {}),
+      ...parset,
     },
     true
   );

src/example/fuse/views/tabulation/slide-icons.vue

@@ -29,47 +29,24 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import { ElCollapse, ElCollapseItem, ElEmpty } from "element-plus";
-import { getSvgContent, parseSvgContent } from "@/utils/resource";
 import { Draw } from "../../../components/container/use-draw.ts";
 import { iconGroups } from "../../../constant";
-import { defaultStyle } from "@/core/components/icon/index.ts";
+import { defaultStyle, getIconStyle } from "@/core/components/icon/index.ts";
 
 const groups = [iconGroups[iconGroups.length - 1]];
 const props = defineProps<{ draw: Draw }>();
 const emit = defineEmits<{ (e: "exit"): void }>();
 
 const drawIcon = async (url: string, name: string, item: any) => {
-  const svgContent = parseSvgContent(await getSvgContent(url));
-  console.log(item);
-
-  const maxSize = 40;
-  const addHeight = (maxSize / svgContent.width) * svgContent.height;
-  const size = {
-    width: maxSize,
-    height: addHeight,
-  };
-  if (size.height > maxSize) {
-    size.height = maxSize;
-    size.width = (maxSize / svgContent.height) * svgContent.width;
-  }
-
-  const color = {
-    fill: svgContent.paths[0]?.fill,
-    stroke: svgContent.paths[0]?.stroke,
-  };
-  if (!color.fill && !color.stroke) {
-    color.stroke = "#000000";
-  }
-
+  const parset = await getIconStyle(url);
   props.draw.enterDrawShape(
     "icon",
     {
       url,
-      ...size,
       name,
-      ...color, 
       ...defaultStyle,
       ...(item.parse || {}),
+      ...parset,
     },
     true
   );

src/example/platform/platform-draw.ts

@@ -5,14 +5,13 @@ import { SceneFloor } from "./platform-resource";
 import { getBaseItem } from "@/core/components/util";
 import { LineData, defaultStyle } from "@/core/components/line";
 import { getInitCtx, normalLineData } from "@/core/components/line/use-draw";
-import { defaultStyle as iconDefaultStyle } from "@/core/components/icon";
+import { getIconStyle, defaultStyle as iconDefaultStyle } from "@/core/components/icon";
 import { defaultStyle as textDefaultStyle } from "@/core/components/text";
 import { Transform } from "konva/lib/Util";
 import { ElMessage } from "element-plus";
 import { ImageData } from "@/core/components/image";
 import { Size } from "@/utils/math";
 import { watchEffect } from "vue";
-import { getSvgContent, parseSvgContent } from "@/utils/resource";
 import { TextData } from "@/core/components/text";
 
 const scaleResource = (info: AIExposeData, scale: number) => {
@@ -307,20 +306,7 @@ const drawLayerResource = async (
           height: item.size ? item.size.height : 100,
         };
         try {
-          const svg = parseSvgContent(await getSvgContent(item.url));
-          if (svg.paths.length) {
-            svgAttach.fill = svg.paths[0].fill || null;
-            svgAttach.stroke = svg.paths[0].stroke || null;
-            if (!svgAttach.fill && !svgAttach.stroke) {
-              svgAttach.stroke = "#000000";
-            }
-            if (svg.width && svg.height) {
-              if (svg.width > svg.height) {
-                console.log(item.url, svgAttach.width, svg.height / svg.width)
-                svgAttach.height = (svg.height / svg.width) * svgAttach.width;
-              }
-            }
-          }
+          svgAttach = await getIconStyle(item.url, item.size?.width, item.size?.height)
         } catch {}
       }
 

src/example/platform/platform-resource.ts

@@ -272,8 +272,10 @@ export const taggingGets = {
               },
               rotate: yRotate,
               size: {
-                width: signage.width * (signage.scaleRatio / 100),
-                height: signage.height * (signage.scaleRatio / 100),
+                // width: signage.width * (signage.scaleRatio / 100),
+                // height: signage.height * (signage.scaleRatio / 100),
+                width: signage.width ,
+                height: signage.height,
               },
             });
           })