fix: 修复节点加载拖拽渲染

apps/designer/src/components/flowchartNode.ts

@@ -1,4 +1,5 @@
 import { Node } from "@antv/x6";
+import { cloneDeep } from "lodash-es";
 
 import { basic } from "@/components/basic";
 import { flowchart } from "@/components/flowchart";
@@ -27,7 +28,7 @@ export const getCompMap = () => {
   ];
 
   compList.forEach((item) => {
-    compMap[item.node.shape as string] = item.node;
+    compMap[item.node.shape as string] = cloneDeep(item.node);
   });
 
   return compMap;

apps/designer/src/config/data.ts

@@ -3,7 +3,7 @@ import { MindMapProjectInfo } from "@/types";
 import { themeData } from "@/config/flowTheme";
 import { Edge } from "@antv/x6";
 import { LineType, ConnectorType } from "@/enum";
-import { merge } from "lodash-es";
+import { merge, cloneDeep } from "lodash-es";
 
 // 通用连接桩
 export const ports = {
@@ -157,7 +157,7 @@ export const getDefaultDataByTheme = (themeKey: string) => {
   const { nodeStyle, edgeStyle } = theme || {};
   // 找到主题配置，合并默认数据
   return {
-    nodeDefaultData: merge(defaultData, {
+    nodeDefaultData: merge(cloneDeep(defaultData), {
       fill: {
         color1: nodeStyle?.fillColor || defaultData.fill.color1,
       },
@@ -168,7 +168,7 @@ export const getDefaultDataByTheme = (themeKey: string) => {
         color: nodeStyle?.textColor || defaultData.text.color
       }
     }),
-    edgeDefaultData: merge(BaseEdge, {
+    edgeDefaultData: merge(cloneDeep(defaultData), {
       attrs: {
         line: {
           stroke: edgeStyle?.strokeColor,

apps/designer/src/config/flowTheme.ts

@@ -86,7 +86,7 @@ export const themeData = [
       background: "#fff",
     },
     nodeStyle: {
-      strokeColor: "#000",
+      strokeColor: "#c65132",
       fillColor: "#df9371",
       textColor: "#fff",
     },

apps/designer/src/models/flowchartModel.ts

@@ -85,7 +85,9 @@ export default function flowchartModel() {
               },
             }]
           };
-          return merge(nodeMeta, newNode, { data: defaultDataByTheme.nodeDefaultData });
+          const result = merge(nodeMeta, { data: defaultDataByTheme.nodeDefaultData }, newNode);
+          console.log(defaultDataByTheme.nodeDefaultData);
+          return result
         }
         if (item.shape === "edge") {
           const newEdge = {
@@ -106,7 +108,7 @@ export default function flowchartModel() {
               },
             ]
           };
-          return merge(newEdge, defaultDataByTheme.edgeDefaultData);
+          return merge(defaultDataByTheme.edgeDefaultData, newEdge);
         }
       });
       graphRef.current.fromJSON({ cells: list as any });

apps/designer/src/pages/flow/components/Content/StyleConfig.tsx

@@ -12,7 +12,7 @@ export default function StyleConfig() {
     onChangePageSettings("backgroundColor", item.pageStyle.background);
     graph?.getCells().forEach((cell) => {
       const data = cell.getData();
-      if(cell.isNode()) {
+      if(cell.isNode() && cell.shape !== 'custom-react-image') {
         cell.setData({
           ...data,
           text: {

apps/designer/src/utils/hander.tsx

@@ -1,11 +1,11 @@
 import { ContextMenuTool, edgeMenu } from "./contentMenu";
 import Text from "@/components/basic/text";
-import baseNode from "@/components/base";
+import ImageNode from "@/components/ImageNode";
 import { Cell, Edge, Graph, Node } from "@antv/x6";
 import { nodeMenu } from "./contentMenu";
 import { exportImage } from "@/components/ExportImage";
-import { BaseEdge } from "@/components/Edge";
-import { set, cloneDeep, get } from "lodash-es";
+import { BaseEdge } from "@/config/data";
+import { set, cloneDeep, get, merge } from "lodash-es";
 import { defaultData } from "@/config/data";
 import codeBlock from "@/components/basic/CodeBlock";
 import { ConnectorType } from "@/enum";
@@ -162,15 +162,14 @@ export const handlePaste = (
               const height = img.height;
               // 插入图片
               const node = {
-                ...baseNode,
-                data: {
-                  ...baseNode.data,
+                ...ImageNode,
+                data: merge(defaultData, {
+                  ...ImageNode.data,
                   fill: {
-                    ...baseNode.data.fill,
                     fillType: "image",
                     imageUrl: dataUrl,
                   },
-                },
+                }),
                 size: {
                   width,
                   height,
@@ -366,7 +365,7 @@ export const handleCreateEdge = (graph: Graph) => {
             y: e.offsetY,
           },
           data: {
-            connectorType: ConnectorType.Rounded
+            connectorType: ConnectorType.Rounded,
           },
           tools: [
             {
@@ -553,7 +552,7 @@ export const handleSetAttr = (graph: Graph, path: string, value: any) => {
     } else {
       set(data, path, value);
     }
-    
+
     cell.setData({
       ...data,
     });
@@ -799,18 +798,18 @@ export const handleLock = (graph: Graph) => {
  * @param cell
  */
 export const handleUnLock = (graph: Graph, cell?: Cell) => {
-  if(cell) {
+  if (cell) {
     cell.setData({
       lock: false,
     });
     graph.select([cell]);
-    if(cell.isNode()) {
-      graph.createTransformWidget(cell)
+    if (cell.isNode()) {
+      graph.createTransformWidget(cell);
     }
   } else {
     const cells = graph.getCells();
     cells.forEach((cell) => {
-      if(cell.data?.lock) {
+      if (cell.data?.lock) {
         cell.setData({
           lock: false,
         });
@@ -830,20 +829,24 @@ export const handleDelete = (graph: Graph) => {
 
 /**
  * 设置连线样式
- * @param edge 
- * @param style 
+ * @param edge
+ * @param style
  */
-export const handleSetEdgeStyle = (edge: Cell, style: ConnectorType, jumpover: boolean) => {
-  if(!edge.isEdge()) return;
-  switch(style) {
+export const handleSetEdgeStyle = (
+  edge: Cell,
+  style: ConnectorType,
+  jumpover: boolean
+) => {
+  if (!edge.isEdge()) return;
+  switch (style) {
     case ConnectorType.Rounded: {
       edge.setRouter("manhattan");
-      edge.setConnector(jumpover ? "jumpover" : "normal")
+      edge.setConnector(jumpover ? "jumpover" : "normal");
       break;
     }
     case ConnectorType.Smooth: {
       edge.setRouter("manhattan");
-      edge.setConnector("smooth")
+      edge.setConnector("smooth");
       break;
     }
     case ConnectorType.Normal: {
@@ -852,4 +855,4 @@ export const handleSetEdgeStyle = (edge: Cell, style: ConnectorType, jumpover: b
       break;
     }
   }
-}
+};