{
mindMap.value.execCommand(...args);
@@ -24,6 +29,115 @@ export default function useEventHandlers(mindMap, manualSave) {
mindMap.value.updateConfig(data);
};
+ const getCanvasPoint = (clientX, clientY) => {
+ const { x, y } = mindMap.value.toPos(clientX, clientY);
+ const { scaleX, scaleY, translateX, translateY } =
+ mindMap.value.draw.transform();
+ return {
+ x: (x - translateX) / scaleX,
+ y: (y - translateY) / scaleY,
+ };
+ };
+
+ const getCanvasCenter = () => {
+ const rect = mindMap.value.el.getBoundingClientRect();
+ return getCanvasPoint(
+ rect.left + rect.width / 2,
+ rect.top + rect.height / 2
+ );
+ };
+
+ const applyFreeNodeStyle = (node, position) => {
+ if (!node) {
+ return;
+ }
+ const left = position.x - node.width / 2;
+ const top = position.y - node.height / 2;
+ mindMap.value.execCommand("SET_NODE_CUSTOM_POSITION", node, left, top);
+ node.setStyle("lineWidth", 0);
+ node.setStyle("lineColor", "transparent");
+ };
+
+ const onNodeTreeRenderEnd = () => {
+ if (!mindMap.value) {
+ return;
+ }
+ if (pendingFreeNode) {
+ const { uid, position } = pendingFreeNode;
+ const node = mindMap.value.renderer.findNodeByUid(uid);
+ applyFreeNodeStyle(node, position);
+ pendingFreeNode = null;
+ }
+ if (expandAnchor) {
+ const node = mindMap.value.renderer.findNodeByUid(expandAnchor.uid);
+ if (node) {
+ const { scaleX, scaleY, translateX, translateY } =
+ mindMap.value.draw.transform();
+ const nextX = node.left * scaleX + translateX;
+ const nextY = node.top * scaleY + translateY;
+ const dx = expandAnchor.x - nextX;
+ const dy = expandAnchor.y - nextY;
+ if (dx || dy) {
+ mindMap.value.view.translateXY(dx, dy);
+ }
+ }
+ expandAnchor = null;
+ }
+ };
+
+ const onExpandBtnClick = (node) => {
+ if (!mindMap.value || !node || node.getData?.("isFreeNode")) {
+ return;
+ }
+ const { scaleX, scaleY, translateX, translateY } =
+ mindMap.value.draw.transform();
+ expandAnchor = {
+ uid: node.getData?.("uid") || node.uid,
+ x: node.left * scaleX + translateX,
+ y: node.top * scaleY + translateY,
+ };
+ };
+
+ const createFreeNode = (options = {}) => {
+ if (!mindMap.value || appStore.isReadonly) {
+ return;
+ }
+ if (!mindMap.value.getConfig("enableFreeDrag")) {
+ mindMap.value.updateConfig({ enableFreeDrag: true });
+ const config = getConfig() || {};
+ storeConfig({
+ ...config,
+ enableFreeDrag: true,
+ });
+ }
+ const position =
+ typeof options.clientX === "number" && typeof options.clientY === "number"
+ ? getCanvasPoint(options.clientX, options.clientY)
+ : getCanvasCenter();
+ const uid = createUid();
+ pendingFreeNode = { uid, position };
+ const root = mindMap.value.renderer.root;
+ mindMap.value.execCommand("INSERT_CHILD_NODE", false, [root], {
+ text: t("edit.freeNodeDefaultText"),
+ uid,
+ isFreeNode: true,
+ });
+ };
+
+ const onDrawDblclick = (event) => {
+ if (!mindMap.value || appStore.isReadonly) {
+ return;
+ }
+ const target = event.target;
+ if (target && target.closest && target.closest(".smm-node")) {
+ return;
+ }
+ createFreeNode({
+ clientX: event.clientX,
+ clientY: event.clientY,
+ });
+ };
+
/** 导出，需要先注册Export插件 */
const exportMap = async (...args) => {
try {
@@ -103,14 +217,21 @@ export default function useEventHandlers(mindMap, manualSave) {
emitter.on("paddingChange", onPaddingChange);
emitter.on("export", exportMap);
emitter.on("setData", setData);
+ emitter.on("create_free_node", createFreeNode);
emitter.on("startTextEdit", handleStartTextEdit);
emitter.on("endTextEdit", handleEndTextEdit);
emitter.on("createAssociativeLine", handleCreateLineFromActiveNode);
emitter.on("startPainter", handleStartPainter);
emitter.on("node_tree_render_end", handleHideLoading);
+ emitter.on("node_tree_render_end", onNodeTreeRenderEnd);
+ emitter.on("expand_btn_click", onExpandBtnClick);
emitter.on("showLoading", handleShowLoading);
emitter.on("localStorageExceeded", onLocalStorageExceeded);
window.addEventListener("resize", handleResize);
+ svgNode = mindMap.value?.svg?.node || null;
+ if (svgNode) {
+ svgNode.addEventListener("dblclick", onDrawDblclick);
+ }
};
/** 解绑事件 */
@@ -119,14 +240,21 @@ export default function useEventHandlers(mindMap, manualSave) {
emitter.off("paddingChange", onPaddingChange);
emitter.off("export", exportMap);
emitter.off("setData", setData);
+ emitter.off("create_free_node", createFreeNode);
emitter.off("startTextEdit", handleStartTextEdit);
emitter.off("endTextEdit", handleEndTextEdit);
emitter.off("createAssociativeLine", handleCreateLineFromActiveNode);
emitter.off("startPainter", handleStartPainter);
emitter.off("node_tree_render_end", handleHideLoading);
+ emitter.off("node_tree_render_end", onNodeTreeRenderEnd);
+ emitter.off("expand_btn_click", onExpandBtnClick);
emitter.off("showLoading", handleShowLoading);
emitter.off("localStorageExceeded", onLocalStorageExceeded);
window.removeEventListener("resize", handleResize);
+ if (svgNode) {
+ svgNode.removeEventListener("dblclick", onDrawDblclick);
+ svgNode = null;
+ }
};
return {
diff --git a/frontend/src/pages/Edit/components/Editor/useMindMap.js b/frontend/src/pages/Edit/components/Editor/useMindMap.js
index 85bec84..747a456 100644
--- a/frontend/src/pages/Edit/components/Editor/useMindMap.js
+++ b/frontend/src/pages/Edit/components/Editor/useMindMap.js
@@ -71,6 +71,7 @@ export default function useMindMap(mindMapRef) {
const fileStore = useFileStore();
const route = useRoute();
const mindMap = ref(null);
+ const activeNodes = ref([]);
const mindMapData = ref(null);
const mindMapConfig = ref({});
const storeConfigTimer = ref(null);
@@ -78,6 +79,31 @@ export default function useMindMap(mindMapRef) {
let isDirty = false;
const IDLE_SAVE_MS = 20000;
+ const onNodeActive = (...args) => {
+ const list = Array.isArray(args[1])
+ ? args[1]
+ : Array.isArray(args[0])
+ ? args[0]
+ : [];
+ activeNodes.value = list.filter(Boolean);
+ };
+
+ const toggleBoldStyle = () => {
+ if (!activeNodes.value.length || !mindMap.value) {
+ return;
+ }
+ const shouldBold = activeNodes.value.some((node) => {
+ const weight = node.getStyle ? node.getStyle("fontWeight", false) : "";
+ return weight !== "bold";
+ });
+ activeNodes.value.forEach((node) => {
+ if (node && node.setStyle) {
+ node.setStyle("fontWeight", shouldBold ? "bold" : "normal");
+ }
+ });
+ emitter.emit("node_style_changed");
+ };
+
/** url中是否存在要打开的文件 */
const hasFileURL = () => {
const fileURL = route.query.fileURL;
@@ -124,6 +150,11 @@ export default function useMindMap(mindMapRef) {
},
openRealtimeRenderOnNodeTextEdit: true,
enableAutoEnterTextEditWhenKeydown: true,
+ beforeDragStart: (nodeList) => {
+ return nodeList.some((node) => {
+ return !node || !node.getData || !node.getData("isFreeNode");
+ });
+ },
demonstrateConfig: {
openBlankMode: false,
},
@@ -218,6 +249,9 @@ export default function useMindMap(mindMapRef) {
mindMap.value.keyCommand.addShortcut("Control+s", () => {
manualSave();
});
+ mindMap.value.keyCommand.addShortcut("Control+b", () => {
+ toggleBoldStyle();
+ });
// mindMap实例事件列表
// https://wanglin2.github.io/mind-map-docs/api/constructor/constructor-methods.html#on-event-fn
@@ -255,6 +289,7 @@ export default function useMindMap(mindMapRef) {
emitter.emit(event, ...args);
});
});
+ emitter.on("node_active", onNodeActive);
bindSaveEvent();
// 处理url中支持格式的文件
if (fileUrlExists) {
@@ -320,6 +355,7 @@ export default function useMindMap(mindMapRef) {
});
};
+
/** 手动保存数据 */
const manualSave = () => {
storeData(mindMap.value.getData(true));
diff --git a/frontend/src/pages/Edit/components/NavigatorToolbar/StyleDialog.vue b/frontend/src/pages/Edit/components/NavigatorToolbar/StyleDialog.vue
new file mode 100644
index 0000000..b4b7005
--- /dev/null
+++ b/frontend/src/pages/Edit/components/NavigatorToolbar/StyleDialog.vue
@@ -0,0 +1,158 @@
+
+
+
+
+ {{ $t('theme.title') }}
+
+
+
+
+
+ {{ $t('baseStyle.background') }}
+
+
+
+ {{ $t('baseStyle.line') }}
+
+
+
+ {{ $t('dialog.confirm') }}
+ {{ $t('dialog.cancel') }}
+
+
+
+
+
+
diff --git a/frontend/src/pages/Edit/components/NavigatorToolbar/index.vue b/frontend/src/pages/Edit/components/NavigatorToolbar/index.vue
index bfaf70c..a03bdf1 100644
--- a/frontend/src/pages/Edit/components/NavigatorToolbar/index.vue
+++ b/frontend/src/pages/Edit/components/NavigatorToolbar/index.vue
@@ -44,6 +44,14 @@
:handleClick="handleIconClick"
/>