feat: 添加风格配置

apps/designer/src/components/mindMap/Topic.tsx

@@ -176,7 +176,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
       }
     );
   };
-
+  
   return (
     <>
       {selected && (
@@ -196,7 +196,7 @@ const component = ({ node, graph }: { node: Node; graph: Graph }) => {
           className="content relative text-0"
           ref={ref}
           style={{
-            minWidth: "100%",
+            // minWidth: "100%",
             // width: "fit-content",
             // minHeight: "100%",
             opacity: opacity / 100,

apps/designer/src/config/data.ts

@@ -142,7 +142,7 @@ export const topicData = {
   extraModules: undefined,
   links: [],
   summary: undefined,
-  isSummary: false,
+  isSummary: false
 }
 
 // 初始化项目

apps/designer/src/events/mindMapEvent.ts

@@ -573,7 +573,7 @@ const handleSwitchPosition = (
   const theme = getTheme(
     mindmapProjectInfo.theme,
     targetNode?.isNode() && targetNode.data.type !== TopicType.main
-      ? targetNode
+      ? targetNode.data
       : undefined
   );
 
@@ -605,11 +605,7 @@ const handleSwitchPosition = (
     source.children = traverseNode(source.children, (topic) => {
       const theme = getTheme(
         mindmapProjectInfo.theme,
-        graph?.createNode({
-          data: {
-            ...source,
-          },
-        })
+        source
       );
       topic.type = TopicType.sub;
       topic.fill = {

apps/designer/src/models/mindMapModel.ts

@@ -11,10 +11,10 @@ import { Clipboard } from "@antv/x6-plugin-clipboard";
 import { MindMapProjectInfo } from "@/types";
 import { bindMindMapEvents } from "@/events/mindMapEvent";
 import { useLocalStorageState } from "ahooks";
-import { renderMindMap, updateTopic } from "@/pages/mindmap/mindMap";
+import { renderMindMap } from "@/pages/mindmap/mindMap";
 import { defaultProject } from "@/config/data";
 import { TopicType } from "@/enum";
-import { isEqual } from "lodash-es";
+import { isEqual, cloneDeep } from "lodash-es";
 import { bindMindmapKeys } from "@/utils/fastKey";
 import { handleCreateCorrelationEdge } from "@/utils/mindmapHander";
 import { Dnd } from '@antv/x6-plugin-dnd';
@@ -74,7 +74,7 @@ export default function mindMapModel() {
       if (isEqual(pageSettingRef.current, mindProjectInfo?.pageSetting)) {
         return;
       }
-      pageSettingRef.current = mindProjectInfo?.pageSetting;
+      pageSettingRef.current = cloneDeep(mindProjectInfo?.pageSetting) as MindMapProjectInfo["pageSetting"];
       const pageSetting = pageSettingRef.current;
       if (pageSetting?.fillType === "color") {
         graph.drawBackground({

apps/designer/src/pages/mindmap/components/Config/Theme.tsx

@@ -1,25 +1,43 @@
 import { Tabs } from "antd";
 import React from "react";
+import { useModel } from "umi";
+import { changeTheme } from "../../theme";
 
 const themes = [
   {
     key: "default",
-    image: require("@/assets/mindmap/bd_caihong.svg").default,
+    image: require("@/assets/mindmap/bg_caihong.svg").default,
+  },
+  {
+    key: "theme2",
+    image: require("@/assets/mindmap/basic4.svg").default,
   },
   {
     key: "theme3",
-    image: require("@/assets/mindmap/theme3_2.svg").default,
+    image: require("@/assets/mindmap/basic5.svg").default,
   },
   {
-    key: "default1",
+    key: "theme4",
     image: require("@/assets/mindmap/bd_caihong.svg").default,
   },
   {
-    key: "theme4",
-    image: require("@/assets/mindmap/theme3_2.svg").default,
+    key: "theme5",
+    image: require("@/assets/mindmap/artistic_song.svg").default,
   },
 ];
 export default function Theme() {
+  const { mindProjectInfo, setMindProjectInfo } = useModel("mindMapModel");
+
+  const handleChangeTheme = (theme: string) => {
+    if(mindProjectInfo) {
+      const newInfo = changeTheme(theme, mindProjectInfo);
+      mindProjectInfo && setMindProjectInfo({
+        ...newInfo,
+        theme,
+      });
+    }
+  }
+
   return (
     <Tabs>
       <Tabs.TabPane key="1" tab="风格">
@@ -33,7 +51,8 @@ export default function Theme() {
           `}
         >
           {themes.map((item) => (
-            <div className={`
+            <div
+              className={`
               h-60px
               bg-white
               inline-flex
@@ -43,9 +62,16 @@ export default function Theme() {
               justify-center
               border-1px
               border-solid
-              border-#e6ebf5
               cursor-pointer
-            `} key={item.key}>
+              overflow-hidden
+            `}
+              style={{
+                borderColor:
+                  item.key === mindProjectInfo?.theme ? "#1890ff" : "#e6ebf5",
+              }}
+              onClick={() =>handleChangeTheme(item.key)}
+              key={item.key}
+            >
               <img src={item.image} className="h-full" />
             </div>
           ))}

apps/designer/src/pages/mindmap/edge.ts

@@ -690,6 +690,7 @@ export const createEdge = (
   theme: string,
   options: Record<string, any> = {}
 ): Edge => {
+
   return graph.createEdge({
     id: item.id + "-edge",
     inherit: "edge",

apps/designer/src/pages/mindmap/theme.ts

@@ -1,67 +0,0 @@
-import { MindmapConnectorType, TopicType } from "@/enum";
-import { cellStyle, TopicItem } from "@/types";
-import { getRandomColor, lightenColor } from "@/utils/color";
-import { Node } from "@antv/x6";
-
-export const getTheme = (key?: string, parentNode?: Node): Record<string, any> => {
-  const color1 = getRandomColor(["#3D4BCF", "#9C2CB8"]);
-  const map = {
-    // 默认主题
-    default: {
-      main: {
-        fill: {
-          fillType: "color",
-          color1: "#30304D",
-        },
-        text: {
-          color: "#fff",
-          fontSize: 30,
-        },
-        stroke: {
-          width: 0,
-        },
-        edge: {
-          color: "#fff"
-        }
-      },
-      branch: {
-        fill: {
-          fillType: "color",
-          color1,
-        },
-        text: {
-          color: "#fff",
-          fontSize: 18,
-        },
-        stroke: {
-          width: 0,
-        },
-        edge: {
-          color: color1,
-          width: 3,
-        }
-      },
-      sub: {
-        fill: {
-          fillType: "color",
-          color1: parentNode?.data?.type === TopicType.branch ? lightenColor(parentNode.data.fill.color1, 150) : parentNode?.data?.fill?.color1,
-        },
-        text: {
-          color: parentNode?.data?.type === TopicType.branch ? lightenColor(parentNode.data.fill.color1, -10) : parentNode?.data?.text?.color,
-          fontSize: 14,
-        },
-        stroke: {
-          width: 0,
-        },
-        edge: {
-          color: parentNode?.data?.type === TopicType.branch ? parentNode?.data?.fill?.color1 : parentNode?.data?.edge?.color || '#323232',
-          width: 2,
-        }
-      },
-      branchConnector: MindmapConnectorType.curve,
-      subConnector: MindmapConnectorType.rounded,
-    }
-  }
-
-  return map[key as keyof typeof map] || {};
-};

apps/designer/src/pages/mindmap/theme/index.ts

@@ -0,0 +1,67 @@
+import { MindMapProjectInfo, TopicItem } from "@/types";
+
+import { theme1 } from "./theme1";
+import { theme2 } from "./theme2";
+import { theme3 } from "./theme3";
+import { theme4 } from "./theme4";
+import { theme5 } from "./theme5";
+
+/**
+ * 获取主题配置
+ * @param key 
+ * @param parent 
+ * @returns 
+ */
+export const getTheme = (key?: string, parent?: TopicItem): Record<string, any> => {
+  const map = {
+    // 默认主题
+    default: theme1(parent),
+    theme2: theme2(),
+    theme3: theme3(),
+    theme4: theme4(),
+    theme5: theme5(),
+  }
+
+  return map[key as keyof typeof map] || {};
+};
+
+/**
+ * 切换主题
+ * @param themeKey 主题key
+ * @param mindProjectInfo 当前脑图信息
+ */
+export const changeTheme = (themeKey: string, mindProjectInfo: MindMapProjectInfo) => {
+  const theme = getTheme(themeKey);
+  mindProjectInfo.pageSetting.fill = theme.background.fill;
+  mindProjectInfo.pageSetting.fillType = theme.background.fillType;
+  mindProjectInfo.pageSetting.fillImageUrl = theme.background.fillImageUrl;
+  const traverse = (topics: TopicItem[], parent?: TopicItem) => {
+    topics.forEach((item) => {
+      const theme = getTheme(themeKey, parent);
+      item.fill = {
+        ...item.fill,
+        ...theme[item.type].fill,
+      };
+      item.text = {
+        ...item.text,
+        ...theme[item.type].text,
+      };
+      item.stroke = {
+        ...item.stroke,
+        ...theme[item.type].stroke,
+      };
+      item.edge = {
+        ...item.edge,
+        ...theme[item.type].edge,
+      };
+      item.borderSize = theme[item.type].borderSize;
+      if (item.children) {
+        traverse(item.children, item);
+      }
+    });
+  };
+
+  traverse(mindProjectInfo?.topics || []);
+
+  return mindProjectInfo;
+}

apps/designer/src/pages/mindmap/theme/theme1.ts

@@ -0,0 +1,69 @@
+import { BorderSize, MindmapConnectorType, TopicType } from "@/enum";
+import { TopicItem } from "@/types";
+import { getRandomColor, lightenColor } from "@/utils/color";
+
+export const theme1 = (parent?: TopicItem) => {
+  const color1 = getRandomColor(["#3D4BCF", "#9C2CB8"]);
+  return {
+    main: {
+      fill: {
+        fillType: "color",
+        color1: "#30304D",
+      },
+      text: {
+        color: "#fff",
+        fontSize: 30,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: "#fff"
+      },
+      borderSize: BorderSize.medium
+    },
+    branch: {
+      fill: {
+        fillType: "color",
+        color1,
+      },
+      text: {
+        color: "#fff",
+        fontSize: 18,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: color1,
+        width: 3,
+      },
+      borderSize: BorderSize.medium
+    },
+    sub: {
+      fill: {
+        fillType: "color",
+        color1: parent?.type === TopicType.branch ? lightenColor(parent?.fill.color1, 150) : parent?.fill?.color1,
+      },
+      text: {
+        color: parent?.type === TopicType.branch ? lightenColor(parent?.fill.color1, -10) : parent?.text?.color,
+        fontSize: 14,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: parent?.type === TopicType.branch ? parent?.fill?.color1 : parent?.edge?.color || '#323232',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    background: {
+      fillType: "color",
+      fill: "#fff",
+      fillImageUrl: ""
+    },
+    branchConnector: MindmapConnectorType.curve,
+    subConnector: MindmapConnectorType.rounded,
+  }
+}

apps/designer/src/pages/mindmap/theme/theme2.ts

@@ -0,0 +1,68 @@
+import { BorderSize, MindmapConnectorType } from "@/enum";
+
+export const theme2 = () => {
+  return {
+    main: {
+      fill: {
+        fillType: "color",
+        color1: "#30304D",
+      },
+      text: {
+        color: "#fff",
+        fontSize: 30,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: "#fff"
+      },
+      borderSize: BorderSize.medium
+    },
+    branch: {
+      fill: {
+        fillType: "color",
+        color1: "transparent",
+      },
+      text: {
+        color: "#000",
+        fontSize: 18,
+      },
+      stroke: {
+        width: 1,
+        color: '#E3E3E3',
+      },
+      edge: {
+        color: '#E3E3E3',
+        width: 3,
+      },
+      borderSize: BorderSize.large
+    },
+    sub: {
+      fill: {
+        fillType: "color",
+        color1: "transparent",
+      },
+      text: {
+        color: "#000",
+        fontSize: 14,
+      },
+      stroke: {
+        width: 1,
+        color: '#E3E3E3',
+      },
+      edge: {
+        color: '#E3E3E3',
+        width: 2,
+      },
+      borderSize: BorderSize.large
+    },
+    background: {
+      fillType: "color",
+      fill: "#fff",
+      fillImageUrl: ""
+    },
+    branchConnector: MindmapConnectorType.rounded,
+    subConnector: MindmapConnectorType.rounded,
+  }
+}

apps/designer/src/pages/mindmap/theme/theme3.ts

@@ -0,0 +1,70 @@
+import { BorderSize, MindmapConnectorType } from "@/enum";
+
+export const theme3 = () => {
+  return {
+    main: {
+      fill: {
+        fillType: "color",
+        color1: "#50C28B",
+      },
+      text: {
+        color: "#fff",
+        fontSize: 30,
+      },
+      stroke: {
+        width: 2,
+        color: "#50C28B"
+      },
+      edge: {
+        color: '#8A8A8A',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    branch: {
+      fill: {
+        fillType: "color",
+        color1: "#fff",
+      },
+      text: {
+        color: "#000",
+        fontSize: 18,
+      },
+      stroke: {
+        width: 1,
+        color: '#23282D',
+      },
+      edge: {
+        color: '#8A8A8A',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    sub: {
+      fill: {
+        fillType: "color",
+        color1: "transparent",
+      },
+      text: {
+        color: "#000",
+        fontSize: 13,
+      },
+      stroke: {
+        width: 0,
+        color: '#23282D',
+      },
+      edge: {
+        color: '#444',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    background: {
+      fillType: "color",
+      fill: "#fff",
+      fillImageUrl: ""
+    },
+    branchConnector: MindmapConnectorType.straight,
+    subConnector: MindmapConnectorType.rounded,
+  }
+}

apps/designer/src/pages/mindmap/theme/theme4.ts

@@ -0,0 +1,68 @@
+import { BorderSize, MindmapConnectorType } from "@/enum";
+
+export const theme4 = () => {
+  return {
+    main: {
+      fill: {
+        fillType: "color",
+        color1: "#000227",
+      },
+      text: {
+        color: "#fff",
+        fontSize: 24,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: '#8A8A8A',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    branch: {
+      fill: {
+        fillType: "color",
+        color1: "#fff",
+      },
+      text: {
+        color: "#444",
+        fontSize: 18,
+      },
+      stroke: {
+        width: 2,
+        color: '#EAA0CE',
+      },
+      edge: {
+        color: '#EAA0CE',
+        width: 3,
+      },
+      borderSize: BorderSize.medium
+    },
+    sub: {
+      fill: {
+        fillType: "color",
+        color1: "transparent",
+      },
+      text: {
+        color: "#444",
+        fontSize: 14,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: '#EAA0CE',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    background: {
+      fillType: "color",
+      fill: "#fff",
+      fillImageUrl: ""
+    },
+    branchConnector: MindmapConnectorType.straight,
+    subConnector: MindmapConnectorType.rounded,
+  }
+}

apps/designer/src/pages/mindmap/theme/theme5.ts

@@ -0,0 +1,68 @@
+import { BorderSize, MindmapConnectorType } from "@/enum";
+
+export const theme5 = () => {
+  return {
+    main: {
+      fill: {
+        fillType: "color",
+        color1: "#C9BE8E",
+      },
+      text: {
+        color: "#fff",
+        fontSize: 24,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: '#8A8A8A',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    branch: {
+      fill: {
+        fillType: "color",
+        color1: "#fff",
+      },
+      text: {
+        color: "#41494C",
+        fontSize: 16,
+      },
+      stroke: {
+        width: 0,
+        color: '#EAA0CE',
+      },
+      edge: {
+        color: '#8C9291',
+        width: 3,
+      },
+      borderSize: BorderSize.medium
+    },
+    sub: {
+      fill: {
+        fillType: "color",
+        color1: "transparent",
+      },
+      text: {
+        color: "#41494E",
+        fontSize: 14,
+      },
+      stroke: {
+        width: 0,
+      },
+      edge: {
+        color: '#8C9291',
+        width: 2,
+      },
+      borderSize: BorderSize.medium
+    },
+    background: {
+      fillType: "color",
+      fill: "#ECEDE5",
+      fillImageUrl: ""
+    },
+    branchConnector: MindmapConnectorType.straight,
+    subConnector: MindmapConnectorType.straight,
+  }
+}

apps/designer/src/types.d.ts

@@ -1,5 +1,5 @@
 import { Node } from "@antv/x6";
-import { StructureType, TopicBorderType, TopicType } from "@/enum";
+import { BorderSize, StructureType, TopicBorderType, TopicType } from "@/enum";
 import { topicData } from "@/config/data";
 export interface CompoundedComponent {
   name: string;
@@ -137,6 +137,10 @@ export type TopicItem = {
    * 折叠子节点
    */
   collapsed?: boolean;
+  /**
+   * 边框圆角
+   */
+  borderSize: BorderSize;
   /**
    * 关联线
    */

apps/designer/src/utils/mindmapHander.tsx

@@ -537,7 +537,6 @@ export const mindmapMenuHander = {
     selectTopic(tool.graph, tool.cell.data);
   },
   addHref(tool: ContextMenuTool) {
-    console.log(tool.cell);
     // @ts-ignore
     tool.cell?.extendAttr?.showHrefConfig?.();
   },
@@ -545,7 +544,8 @@ export const mindmapMenuHander = {
     // todo
   },
   addImage(tool: ContextMenuTool) {
-    // todo
+    const cell = tool.cell;
+    cell.isNode() && insertImage(cell);
   },
   addTag(tool: ContextMenuTool) {
     // @ts-ignore