JsMind 思维导图项目操作指南：界面操控与节点管理详解

JsMind 思维导图项目操作指南：界面操控与节点管理详解

jsmind a mind mapping library built by javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsmind

前言

JsMind 是一个功能强大的 JavaScript 思维导图库，它提供了丰富的 API 来操作和管理思维导图。本文将深入讲解 JsMind 的核心操作功能，帮助开发者掌握思维导图的界面操控和节点管理技巧。

JsMind 对象基础

在 JsMind 中，所有操作都围绕 jsMind 对象展开。获取该对象有两种常用方式：

// 方式一：创建新实例时获取
const jm = new jsMind({
    container: 'jsmind_container',
    theme: 'primary'
});

// 方式二：获取当前页面中的实例
const currentJm = jsMind.current;

节点对象详解

思维导图由节点(Node)构成，每个节点包含以下重要属性：

{
    id: 'node1',           // 唯一标识符
    topic: '核心主题',      // 显示内容
    isroot: true,          // 是否为根节点
    direction: 'right',     // 布局方向(left/center/right)
    expanded: true,         // 子节点是否展开
    data: {                 // 自定义数据
        remark: '重要节点'
    }
    // 其他属性...
}

核心操作功能

1. 节点查找与定位

JsMind 提供了多种查找节点的方式：

// 获取根节点
const rootNode = jm.get_root();

// 通过ID查找节点
const specificNode = jm.get_node('node_1');

// 获取当前选中节点
const selectedNode = jm.get_selected_node();

// 查找相邻节点
const prevNode = jm.find_node_before('node_2');
const nextNode = jm.find_node_after('node_2');

2. 节点显示控制

管理节点的展开/收起状态：

// 展开/收起单个节点
jm.expand_node('node_1');  // 展开
jm.collapse_node('node_1'); // 收起
jm.toggle_node('node_1');  // 切换状态

// 批量操作
jm.expand_all();  // 展开所有
jm.expand_to_depth(3);  // 展开到第3层

3. 节点编辑操作

// 添加节点
jm.add_node('parent_node', 'new_node', '新节点');

// 插入节点
jm.insert_node_before('ref_node', 'new_node', '前插节点');
jm.insert_node_after('ref_node', 'new_node', '后插节点');

// 删除节点
jm.remove_node('node_to_delete');

// 更新节点内容
jm.update_node('node_1', '更新后的内容');

4. 节点移动与布局

// 移动节点
jm.move_node(
    'node_to_move', 
    'target_node', 
    'new_parent', 
    'left'
);

// 滚动到视图中心
jm.scroll_node_to_center('node_1');

5. 样式定制

// 设置主题
jm.set_theme('success');

// 节点颜色
jm.set_node_color('node_1', '#FF5733', '#FFFFFF');

// 字体样式
jm.set_node_font_style('node_1', '16px', 'bold', 'italic');

// 背景图片
jm.set_node_background_image('node_1', 'bg.png', 100, 100);

数据操作与导出

// 获取元数据
const meta = jm.get_meta();

// 导出数据
const jsonData = jm.get_data('json');

实用技巧

1. 批量操作优化：当需要操作多个节点时，建议先禁用编辑，操作完成后再启用：

   jm.disable_edit();
   // 执行批量操作...
   jm.enable_edit();
   

2. 节点可见性检查：在操作节点前可先检查其可见性

   if(jm.is_node_visible('node_1')) {
       // 执行操作
   }
   

3. 自定义数据存储：利用节点的data属性存储额外信息

   const node = jm.get_node('node_1');
   node.data.customField = '自定义值';
   

兼容性说明

JsMind 的核心 API 保持稳定，但建议开发者：

1. 仅使用文档中明确说明的 API
2. 避免直接操作内部属性和方法
3. 在升级版本时注意检查变更日志

结语

通过本文的详细讲解，相信您已经掌握了 JsMind 的核心操作功能。这些 API 提供了完整的思维导图管理能力，从基础的节点操作到高级的样式定制，能够满足各种复杂的应用场景需求。建议在实际开发中结合具体需求灵活运用这些功能。

jsmind a mind mapping library built by javascript 项目地址: https://gitcode.com/gh_mirrors/js/jsmind