开发智联笔记项目时所遇问题(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的组合,这样可以保持编辑功能但限制节点的自由移动。

posted @ 2025-11-21 19:54  Jade_Z  阅读(3)  评论(0)    收藏  举报