当前位置: 首页 > news >正文

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

http://www.jsqmd.com/news/47008/

相关文章:

  • 20251121周五日记
  • 卡码网94: bellman_ford算法
  • CrewAI 上手攻略:多 Agent 自动化处理复杂任务,让 AI 像员工一样分工协作
  • 题解:AT_agc067_d [AGC067D] Unique Matching
  • 开发智联笔记项目所遇问题
  • 计算机视觉——从环境配置到跨线计数的完整实现基于 YOLOv12 与质心追踪器的实时人员监控优秀的系统
  • 搜维尔科技:利用MANUS数据手套实现灵巧远程操作:对20自由度灵巧手进行控制
  • 2025-11-21 早报新闻
  • CTF reverse入门记录
  • 开发智联笔记项目时的js问题
  • nju实验一选择器
  • 上海金蝶代理商推荐——上海宝蝶信息技术有限公司
  • 11.21模拟赛
  • HTML---------------图片转换(草稿)
  • 爱与时间反应鲜红色慢慢退却 一次次重复直到忘记了誓言
  • Mac 安装 JDK 8u281(JDK-8u281-1.dmg)详细步骤(附安装包)
  • chrome: 允许远程调试
  • Agent skills 实战
  • Vue 路由的学习
  • P8809 [蓝桥杯 2022 国 C] 近似 GCD 题解
  • 推荐一款超级好用的命令行工具 http-server
  • J 组要考,S 组也要考
  • AI浪潮下的新动向:协作、法律与未来工作
  • day11-Dify智能体-发布-工作流
  • puff-pastry靶机
  • day27-MCP进阶
  • Day37:2025年10月27日,星期一,上班。
  • Day36:2025年10月26日,星期天,休息。
  • Day42:2025年11月1日,星期六,值班,诸事皆顺。
  • 成都合成树脂瓦使用寿命影响因素?成都佳英耀旺告诉你