开发智联笔记项目时所遇问题(3)
问题:设置节点不自由
在脑图中显示 [object Object] 是因为节点数据结构不正确。jsMind 期望的节点数据结构与当前的数据格式不匹配。
解决方案
1. 修改创建脑图时的数据结构
在 index.html 中,修改 createMap() 函数:
async function createMap() {
const name = document.getElementById('mName').value.trim();
const topic = document.getElementById('mTopic').value.trim();
if (!name || !topic) return alert('请填写完整');
// 修正数据结构 - 使用 jsmind 期望的格式
const data = {
meta: {
name: name,
author: document.getElementById('user').textContent,
version: '1.0'
},
format: 'node_tree',
data: {
id: 'root',
topic: topic,
children: [] // 初始为空数组,而不是对象
}
};
const res = await fetch('/api/mindmaps', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name, data}),
credentials: 'include'
});
if (!res.ok) return alert('创建失败');
const m = await res.json();
mapList.push(m);
renderList();
closeModal();
openMap(m.id);
}
2. 设置节点不自由(固定布局)
修改 initMind() 函数,添加布局约束:
/* 初始化脑图 */
function initMind(data) {
jm = new jsMind({
container: 'jsmind_container',
theme: 'primary',
editable: true,
// 设置布局约束,使节点不自由
view: {
hmargin: 100,
vmargin: 50,
line_width: 2,
line_color: '#409eff',
draggable: false // 禁用自由拖拽
},
layout: {
hspace: 80,
vspace: 20,
pspace: 13,
mode: 'static' // 使用静态布局模式
},
shortcut: {
enable: true,
handles: { save: () => saveMap() },
mapping: { save: 83 }
},
plugin: {
undo: { max_stack_size: 100 }
}
});
// 启用插件
jm.enable_plugin('undo');
jm.show(data);
// 进一步限制节点行为
jm.disable_edit(); // 禁用编辑(如果需要编辑可以去掉这行)
}
使用方案1和方案2的组合,这样可以保持编辑功能但限制节点的自由移动。

浙公网安备 33010602011771号