当前位置: 首页 > 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.gsyq.cn/news/56708.html

相关文章:

  • 2025广东Facebook运营公司推荐 推广、广告、获客、营销一站式解决方案
  • 2025-11-21 早报新闻
  • 开发智联笔记项目时的js问题
  • Mac 安装 JDK 8u281(JDK-8u281-1.dmg)详细步骤(附安装包)
  • chrome: 允许远程调试
  • 推荐一款超级好用的命令行工具 http-server
  • J 组要考,S 组也要考
  • day11-Dify智能体-发布-工作流
  • puff-pastry靶机
  • Day37:2025年10月27日,星期一,上班。
  • Day40:2025年10月30日,星期四,上班。
  • Day39:2025年10月29日,星期三,休息。
  • Day41:2025年10月31日,星期五,上班。
  • 详细介绍:基于自抗扰控制ADRC的永磁同步电机仿真模型(Simulink仿真实现)
  • 2025年热门的成都打印机行业内知名租赁公司排行榜
  • 深入解析:深度学习——Logistic回归中的梯度下降法
  • 2025年11月北京/东城区/西城区/朝阳区/海淀区/丰台区/石景山区遗产继承、遗产纠纷,遗产咨询律师事务所权威排行榜单:专业律所推荐与选择指南
  • 目前需要我去更新的东西
  • Linux初级命令练习:通过awk、sed如何批量创建用户
  • sqli-labs 1(Less-1-Less-10)新手解题思路 - 指南
  • PyMAF 2023 单张照片估计参数化人体
  • 轻松速通:TTS播放、文件播放与录音的核心功能解析!
  • 修改DTS适配遥控用户码
  • nginx性能优化之tcp调优
  • UModel 数据治理:运维世界模型构建实践
  • 2025年11月21日
  • James Watsons
  • 计算机网络:物理层 - 实践
  • MongoDB 平替新方案:金仓多模数据库驱动电子证照国产化落地 - 详解
  • Windows Server 2019 中文版、英文版下载 (2025 年 11 月更新)