From 33d61bf700775b68de3ecfbffe9a5535d84d7a16 Mon Sep 17 00:00:00 2001 From: "WRSNDM\\Administrator" Date: Sun, 11 May 2025 22:18:11 +0800 Subject: [PATCH] no message --- .../mind-map/src/components/ToolBar.vue | 2 + .../src/components/ToolBar/layoutGroup.vue | 41 ++++++- .../src/store/helpers/layoutGroupList.ts | 109 ++++++++++++------ .../mind-map/src/store/modules/mindMap.ts | 28 +++-- 4 files changed, 132 insertions(+), 48 deletions(-) diff --git a/web3/packages/mind-map/src/components/ToolBar.vue b/web3/packages/mind-map/src/components/ToolBar.vue index d9ce01c4..ab020887 100644 --- a/web3/packages/mind-map/src/components/ToolBar.vue +++ b/web3/packages/mind-map/src/components/ToolBar.vue @@ -5,6 +5,7 @@ + @@ -14,4 +15,5 @@ import ImportBtn from "./ToolBar/ImportBtn.vue"; import ExportBtn from "./ToolBar/ExportBtn.vue"; import InsertSiblingNode from "./ToolBar/InsertSiblingNode.vue"; import RemoveNode from "./ToolBar/RemoveNode.vue"; +import LayoutGroup from "./ToolBar/LayoutGroup.vue"; \ No newline at end of file diff --git a/web3/packages/mind-map/src/components/ToolBar/layoutGroup.vue b/web3/packages/mind-map/src/components/ToolBar/layoutGroup.vue index 6ff90692..87ae02a7 100644 --- a/web3/packages/mind-map/src/components/ToolBar/layoutGroup.vue +++ b/web3/packages/mind-map/src/components/ToolBar/layoutGroup.vue @@ -1,4 +1,39 @@ - \ No newline at end of file + + + + + diff --git a/web3/packages/mind-map/src/store/helpers/layoutGroupList.ts b/web3/packages/mind-map/src/store/helpers/layoutGroupList.ts index 8ffb5be1..1004fb25 100644 --- a/web3/packages/mind-map/src/store/helpers/layoutGroupList.ts +++ b/web3/packages/mind-map/src/store/helpers/layoutGroupList.ts @@ -1,37 +1,74 @@ +import { useMindMapStore } from "../modules/mindMap"; + +// 从layoutGroupList中提取所有可能的布局类型 +export type LayoutType = + | "forceDirected" + | "logicalStructure" + | "logicalStructureLeft" + | "mindMap" + | "organizationStructure" + | "catalogOrganization" + | "timeline" + | "timeline2" + | "verticalTimeline2" + | "verticalTimeline3" + | "verticalTimeline" + | "fishbone" + | "fishbone2" + | "rightFishbone" + | "rightFishbone2"; + // 结构列表 -export const layoutGroupList = [ - { - name: '力导向图', - list: ['forceDirected'] - }, - { - name: '逻辑结构图', - list: ['logicalStructure', 'logicalStructureLeft'] - }, - { - name: '思维导图', - list: ['mindMap'] - }, - { - name: '组织结构图', - list: ['organizationStructure'] - }, - { - name: '目录组织图', - list: ['catalogOrganization'] - }, - { - name: '时间轴', - list: [ - 'timeline', - 'timeline2', - 'verticalTimeline2', - 'verticalTimeline3', - 'verticalTimeline' - ] - }, - { - name: '鱼骨图', - list: ['fishbone', 'fishbone2', 'rightFishbone', 'rightFishbone2'] - } - ] \ No newline at end of file +export const layoutGroupList : { + name: string; + list: LayoutType[]; +}[] = [ + { + name: "力导向图", + list: ["forceDirected"], + }, + { + name: "逻辑结构图", + list: ["logicalStructure", "logicalStructureLeft"], + }, + { + name: "思维导图", + list: ["mindMap"], + }, + { + name: "组织结构图", + list: ["organizationStructure"], + }, + { + name: "目录组织图", + list: ["catalogOrganization"], + }, + { + name: "时间轴", + list: [ + "timeline", + "timeline2", + "verticalTimeline2", + "verticalTimeline3", + "verticalTimeline", + ], + }, + { + name: "鱼骨图", + list: ["fishbone", "fishbone2", "rightFishbone", "rightFishbone2"], + }, +]; + + + +// 切换 layout +export function useLayout(layout: LayoutType) { + // console.log("切换布局", layout); + const { getMindMapInstance } = useMindMapStore(); + const instance = getMindMapInstance(); + if (!instance) return; + + // 切换布局 + instance.setLayout(layout); +} + diff --git a/web3/packages/mind-map/src/store/modules/mindMap.ts b/web3/packages/mind-map/src/store/modules/mindMap.ts index 99a841a9..edbe74cf 100644 --- a/web3/packages/mind-map/src/store/modules/mindMap.ts +++ b/web3/packages/mind-map/src/store/modules/mindMap.ts @@ -1,5 +1,5 @@ import { defineStore } from "pinia"; -import { ref, shallowRef } from "vue"; +import { Ref, ref, shallowRef } from "vue"; import { importFile } from "../helpers/import"; import { exportFile } from "../helpers/export"; import { usePlugins } from "../helpers/usePlugin"; @@ -8,8 +8,10 @@ import { insertSiblingNode } from "../helpers/insertSiblingNode"; import { removeNode } from "../helpers/removeNode"; import { removeKeyCommand } from "../helpers/keyCommand"; import { getCustomNodeContent } from "../helpers/addCustomContentToNode"; +import { useLayout } from "../helpers/layoutGroupList"; +import type { LayoutType } from "../helpers/layoutGroupList"; -import { mockData } from './mockData' +import { mockData } from "./mockData"; import type MindMapNode from "simple-mind-map/types/src/core/render/node/MindMapNode"; @@ -25,13 +27,16 @@ export const useMindMapStore = defineStore( // 激活状态节点 const activeNodes = shallowRef([]); + // 当下的布局 + const currentLayout: Ref = ref("mindMap"); + usePlugins(MindMap); function initMindMap(container: HTMLElement) { mindMapInstance = new MindMap({ el: container, data: mockData.root, - // layout: "mindMap", + layout: currentLayout.value, fit: false, nodeTextEditZIndex: 1000, nodeNoteTooltipZIndex: 1000, @@ -41,16 +46,14 @@ export const useMindMapStore = defineStore( enableAutoEnterTextEditWhenKeydown: false, // 键盘输入时自动进入文本编辑 // .updateConfig({ 'openRealtimeRenderOnNodeTextEdit' : value}) createNewNodeBehavior: "activeOnly", // 插入新节点的行为 // activeOnly - 只新建激活不编辑 - - // customQuickCreateChildBtnClick: () => { // console.log("自定义添加按钮点击事件"); // }, - isUseCustomNodeContent : true, // 是否使用自定义节点内容 + isUseCustomNodeContent: true, // 是否使用自定义节点内容 // 添加自定义节点内容 addCustomContentToNode: getCustomNodeContent({ - allowRemoveWithChildren: false, + allowRemoveWithChildren: false, }), demonstrateConfig: { @@ -62,11 +65,16 @@ export const useMindMapStore = defineStore( mindMapInstance?.on( "node_active", (_: MindMapNode, activeNodeList: MindMapNode[]) => { - console.log("激活节点", activeNodeList); activeNodes.value = activeNodeList; } ); + // 当改变layout 时的回调函数 + mindMapInstance?.on("layout_change", (layout: LayoutType) => { + console.log("布局改变", layout); + currentLayout.value = layout; + }); + // 关闭键盘事件 removeKeyCommand(mindMapInstance); } @@ -80,13 +88,15 @@ export const useMindMapStore = defineStore( mindMapInstance, mindMapData, activeNodes, - getMindMapInstance, + currentLayout, + getMindMapInstance, importFile, exportFile, insertChildNode, insertSiblingNode, removeNode, + useLayout, // func initMindMap,