|
@@ -10,7 +10,10 @@ import { hierarchyMethodMap } from "./hierarchy";
|
|
|
import { createEdge } from "./edge";
|
|
|
import { getTheme } from "./theme";
|
|
|
import { topicMenu } from "@/utils/contentMenu";
|
|
|
-import { cacluculateExtremeValue, getBorderPositionAndSize } from "../mindmapHander";
|
|
|
+import {
|
|
|
+ cacluculateExtremeValue,
|
|
|
+ getBorderPositionAndSize,
|
|
|
+} from "../mindmapHander";
|
|
|
import { useMindMapStore } from "../models/mindMapModel";
|
|
|
import { cloneDeep } from "lodash-es";
|
|
|
|
|
@@ -23,7 +26,7 @@ type RenderParams = {
|
|
|
setMindProjectInfo?: (data: any) => void;
|
|
|
returnCells?: boolean;
|
|
|
showTool?: boolean;
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
/**
|
|
|
* 渲染思维导图项目
|
|
@@ -37,7 +40,7 @@ export const renderMindMap = ({
|
|
|
graph,
|
|
|
setMindProjectInfo,
|
|
|
returnCells = false,
|
|
|
- showTool = true
|
|
|
+ showTool = true,
|
|
|
}: RenderParams) => {
|
|
|
const cells: Cell[] = [];
|
|
|
topics.forEach((topic) => {
|
|
@@ -73,14 +76,16 @@ export const renderMindMap = ({
|
|
|
id,
|
|
|
x: offsetX + x,
|
|
|
y: offsetY + y,
|
|
|
- tools: showTool ? [
|
|
|
- {
|
|
|
- name: "contextmenu",
|
|
|
- args: {
|
|
|
- menu: topicMenu,
|
|
|
- },
|
|
|
- },
|
|
|
- ] : [],
|
|
|
+ tools: showTool
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ name: "contextmenu",
|
|
|
+ args: {
|
|
|
+ menu: topicMenu,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [],
|
|
|
});
|
|
|
// 渲染边框
|
|
|
if (data.border) {
|
|
@@ -99,7 +104,7 @@ export const renderMindMap = ({
|
|
|
graph,
|
|
|
offsetX,
|
|
|
offsetY,
|
|
|
- setMindProjectInfo,
|
|
|
+ setMindProjectInfo
|
|
|
);
|
|
|
cells.push(...(summaryCells || []));
|
|
|
}
|
|
@@ -118,7 +123,7 @@ export const renderMindMap = ({
|
|
|
if (!isBracket || index === 0 || index === children.length - 1) {
|
|
|
const edge = createEdge(graph, id, item, structure, theme, {
|
|
|
onlyOneChild: children.length === 1,
|
|
|
- direction: item?.direction
|
|
|
+ direction: item?.direction,
|
|
|
});
|
|
|
cells.push(edge);
|
|
|
node.addChild(edge);
|
|
@@ -134,7 +139,7 @@ export const renderMindMap = ({
|
|
|
});
|
|
|
|
|
|
// 数据为概要节点 返回节点数据
|
|
|
- if(returnCells) {
|
|
|
+ if (returnCells) {
|
|
|
return cells;
|
|
|
}
|
|
|
|
|
@@ -167,7 +172,7 @@ export const renderMindMap = ({
|
|
|
if (data?.parentId) {
|
|
|
const parent = graph.getCellById(data.parentId);
|
|
|
const child = graph.getCellById(cell.id);
|
|
|
- if(parent && child && !child.hasParent()) {
|
|
|
+ if (parent && child && !child.hasParent()) {
|
|
|
parent.removeChild(child);
|
|
|
parent.addChild(child);
|
|
|
}
|
|
@@ -182,15 +187,15 @@ export const renderMindMap = ({
|
|
|
|
|
|
// 渲染概要
|
|
|
const createSummaryCells = (
|
|
|
- hierarchyItem: HierarchyResult,
|
|
|
- summary: TopicItem['summary'],
|
|
|
+ hierarchyItem: HierarchyResult,
|
|
|
+ summary: TopicItem["summary"],
|
|
|
structure: StructureType,
|
|
|
- pageSetting: MindMapProjectInfo['pageSetting'],
|
|
|
+ pageSetting: MindMapProjectInfo["pageSetting"],
|
|
|
theme: string,
|
|
|
graph: Graph,
|
|
|
offsetX: number,
|
|
|
offsetY: number,
|
|
|
- setMindProjectInfo?: (data: any) => void,
|
|
|
+ setMindProjectInfo?: (data: any) => void
|
|
|
): Cell[] => {
|
|
|
let cells: Cell[] = [];
|
|
|
if (summary) {
|
|
@@ -220,36 +225,45 @@ const createSummaryCells = (
|
|
|
|
|
|
let position = {
|
|
|
x: offsetX + hierarchyItem.x + totalWidth + 40,
|
|
|
- y: offsetY + hierarchyItem.y
|
|
|
- }
|
|
|
+ y: offsetY + hierarchyItem.y,
|
|
|
+ };
|
|
|
|
|
|
- if(
|
|
|
- [StructureType.left, StructureType.leftBracket, StructureType.leftFishbone, StructureType.leftTreeShape].includes(structure)
|
|
|
- || structure === StructureType.leftRight && hierarchyItem.direction === 'left'
|
|
|
+ if (
|
|
|
+ [
|
|
|
+ StructureType.left,
|
|
|
+ StructureType.leftBracket,
|
|
|
+ StructureType.leftFishbone,
|
|
|
+ StructureType.leftTreeShape,
|
|
|
+ ].includes(structure) ||
|
|
|
+ (structure === StructureType.leftRight &&
|
|
|
+ hierarchyItem.direction === "left")
|
|
|
) {
|
|
|
position = {
|
|
|
x: offsetX + hierarchyItem.x - 40 - totalWidth,
|
|
|
- y: offsetY + hierarchyItem.y
|
|
|
- }
|
|
|
+ y: offsetY + hierarchyItem.y,
|
|
|
+ };
|
|
|
}
|
|
|
- const list = renderMindMap({
|
|
|
- topics: [{
|
|
|
- ...summary.topic,
|
|
|
- ...position
|
|
|
- }],
|
|
|
- pageSetting,
|
|
|
- structure,
|
|
|
- theme,
|
|
|
- graph,
|
|
|
- setMindProjectInfo,
|
|
|
- returnCells: true
|
|
|
- }) || [];
|
|
|
+ const list =
|
|
|
+ renderMindMap({
|
|
|
+ topics: [
|
|
|
+ {
|
|
|
+ ...summary.topic,
|
|
|
+ ...position,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pageSetting,
|
|
|
+ structure,
|
|
|
+ theme,
|
|
|
+ graph,
|
|
|
+ setMindProjectInfo,
|
|
|
+ returnCells: true,
|
|
|
+ }) || [];
|
|
|
|
|
|
// 概要节点
|
|
|
cells.push(...list);
|
|
|
}
|
|
|
return cells;
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
// 创建外框组件
|
|
|
const createBorderComponent = (
|
|
@@ -282,10 +296,11 @@ const createBorderComponent = (
|
|
|
const updateNode = (node: Node, graph: Graph) => {
|
|
|
const oldCell = graph.getCellById(node.id);
|
|
|
if (oldCell.isNode()) {
|
|
|
+ const { width, height } = node.size();
|
|
|
oldCell.setData(node.data, { silent: false, deep: false });
|
|
|
const p = node.position();
|
|
|
- oldCell.setPosition(p)
|
|
|
- oldCell.setSize(node.size().width, node.size().height);
|
|
|
+ oldCell.setPosition(p);
|
|
|
+ oldCell.setSize(width, height);
|
|
|
}
|
|
|
};
|
|
|
|
|
@@ -299,7 +314,9 @@ export const addTopic = (
|
|
|
parentNode?: Node,
|
|
|
otherData: Record<string, any> = {}
|
|
|
): TopicItem | undefined => {
|
|
|
- const projectInfo: MindMapProjectInfo = cloneDeep(useMindMapStore.getState().mindProjectInfo);
|
|
|
+ const projectInfo: MindMapProjectInfo = cloneDeep(
|
|
|
+ useMindMapStore.getState().mindProjectInfo
|
|
|
+ );
|
|
|
if (!projectInfo || !setMindProjectInfo) return;
|
|
|
// 构造主题节点
|
|
|
const topic = buildTopic(
|
|
@@ -308,7 +325,7 @@ export const addTopic = (
|
|
|
...(otherData || {}),
|
|
|
parentId: parentNode?.id,
|
|
|
isSummary: parentNode?.data?.isSummary,
|
|
|
- summarySource: parentNode?.data?.summarySource
|
|
|
+ summarySource: parentNode?.data?.summarySource,
|
|
|
},
|
|
|
graph,
|
|
|
parentNode
|
|
@@ -330,7 +347,7 @@ export const addTopic = (
|
|
|
traverse(item.children);
|
|
|
}
|
|
|
if (item.summary) {
|
|
|
- traverse([item.summary.topic])
|
|
|
+ traverse([item.summary.topic]);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -340,8 +357,16 @@ export const addTopic = (
|
|
|
projectInfo.topics.push(topic);
|
|
|
}
|
|
|
|
|
|
- setMindProjectInfo({info: projectInfo});
|
|
|
-
|
|
|
+ setMindProjectInfo({ info: projectInfo });
|
|
|
+ // 进入编辑模式
|
|
|
+ if (parentNode) {
|
|
|
+ setTimeout(() => {
|
|
|
+ const newTopicNode = graph.getCellById(topic.id);
|
|
|
+ if (newTopicNode) {
|
|
|
+ newTopicNode.prop("customEdit", true);
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
return topic;
|
|
|
};
|
|
|
|
|
@@ -377,14 +402,16 @@ export const buildTopic = (
|
|
|
graph?: Graph,
|
|
|
parentNode?: Node
|
|
|
): TopicItem => {
|
|
|
- const projectInfo: MindMapProjectInfo = cloneDeep(useMindMapStore.getState().mindProjectInfo);
|
|
|
+ const projectInfo: MindMapProjectInfo = cloneDeep(
|
|
|
+ useMindMapStore.getState().mindProjectInfo
|
|
|
+ );
|
|
|
|
|
|
const theme = getTheme(
|
|
|
- projectInfo?.theme || 'default',
|
|
|
+ projectInfo?.theme || "default",
|
|
|
type === TopicType.sub ? parentNode?.data : undefined
|
|
|
);
|
|
|
const id = uuid();
|
|
|
- return {
|
|
|
+ return {
|
|
|
...topicData,
|
|
|
id,
|
|
|
type,
|
|
@@ -444,53 +471,51 @@ export const updateTopic = (
|
|
|
};
|
|
|
|
|
|
traverse(projectInfo?.topics || []);
|
|
|
- setMindProjectInfo({info: projectInfo});
|
|
|
+ setMindProjectInfo({ info: projectInfo });
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
* 根据ai数据返回思维导图主题
|
|
|
- * @param data
|
|
|
- * @param parentId
|
|
|
- * @param type
|
|
|
- * @param parentTopic
|
|
|
- * @param graph
|
|
|
- * @returns
|
|
|
+ * @param data
|
|
|
+ * @param parentId
|
|
|
+ * @param type
|
|
|
+ * @param parentTopic
|
|
|
+ * @param graph
|
|
|
+ * @returns
|
|
|
*/
|
|
|
export const getTopicsByAiData = (
|
|
|
- data: any[],
|
|
|
- parentId: string,
|
|
|
- type: TopicType,
|
|
|
- parentTopic: TopicItem,
|
|
|
- graph?: Graph
|
|
|
- ) => {
|
|
|
- const ids: string[] = [];
|
|
|
- data = Array.isArray(data) ? data : [data];
|
|
|
- const topics = data?.map((item) => {
|
|
|
- const topic = buildTopic(
|
|
|
- type,
|
|
|
- { id: item.id, label: item.label },
|
|
|
- graph,
|
|
|
- { id: parentId, data: parentTopic } as Node
|
|
|
+ data: any[],
|
|
|
+ parentId: string,
|
|
|
+ type: TopicType,
|
|
|
+ parentTopic: TopicItem,
|
|
|
+ graph?: Graph
|
|
|
+) => {
|
|
|
+ const ids: string[] = [];
|
|
|
+ data = Array.isArray(data) ? data : [data];
|
|
|
+ const topics = data?.map((item) => {
|
|
|
+ const topic = buildTopic(type, { id: item.id, label: item.label }, graph, {
|
|
|
+ id: parentId,
|
|
|
+ data: parentTopic,
|
|
|
+ } as Node);
|
|
|
+ topic.parentId = parentId;
|
|
|
+ ids.push(topic.id);
|
|
|
+ if (item.children) {
|
|
|
+ const child = getTopicsByAiData(
|
|
|
+ item.children,
|
|
|
+ topic.id,
|
|
|
+ TopicType.sub,
|
|
|
+ topic,
|
|
|
+ graph
|
|
|
);
|
|
|
- topic.parentId = parentId;
|
|
|
- ids.push(topic.id);
|
|
|
- if (item.children) {
|
|
|
- const child = getTopicsByAiData(
|
|
|
- item.children,
|
|
|
- topic.id,
|
|
|
- TopicType.sub,
|
|
|
- topic,
|
|
|
- graph
|
|
|
- );
|
|
|
- topic.children = child.topics;
|
|
|
- ids.push(...child.ids);
|
|
|
- }
|
|
|
+ topic.children = child.topics;
|
|
|
+ ids.push(...child.ids);
|
|
|
+ }
|
|
|
|
|
|
- return topic;
|
|
|
- });
|
|
|
+ return topic;
|
|
|
+ });
|
|
|
|
|
|
- return {
|
|
|
- topics,
|
|
|
- ids
|
|
|
- }
|
|
|
+ return {
|
|
|
+ topics,
|
|
|
+ ids,
|
|
|
};
|
|
|
+};
|