JsMind思维导图库配置选项详解

JsMind思维导图库配置选项详解

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

前言

JsMind作为一款功能强大的JavaScript思维导图库，提供了丰富的配置选项来满足不同场景下的使用需求。本文将全面解析JsMind的配置选项，帮助开发者更好地理解和运用这些配置来打造个性化的思维导图应用。

基础配置选项

容器设置

container是唯一必选的配置项，用于指定思维导图渲染的DOM容器ID。建议使用块级元素如<div>作为容器，这样可以更好地控制思维导图的大小和位置。

var options = {
    container: 'mindmap-container'  // 指定容器元素ID
};

编辑功能控制

editable选项控制是否启用思维导图的编辑功能，包括添加、删除、修改节点等操作：

var options = {
    editable: true  // 启用编辑功能
};

主题与样式

theme选项允许你指定思维导图的主题样式，JsMind内置了多种主题可供选择：

var options = {
    theme: 'primary'  // 使用主色调主题
};

布局模式

mode选项控制子节点的分布方式：

• full：子节点动态分布在根节点两侧（默认）
• side：子节点只分布在根节点右侧

var options = {
    mode: 'side'  // 子节点只分布在右侧
};

高级视图配置

渲染引擎选择

JsMind支持两种渲染引擎，可通过view.engine配置：

• canvas：使用Canvas绘制连接线（默认）
• svg：使用SVG绘制连接线，适合节点数量多的场景

var options = {
    view: {
        engine: 'svg'  // 使用SVG渲染引擎
    }
};

边距与间距控制

通过以下选项可以精细控制思维导图的布局：

var options = {
    view: {
        hmargin: 100,  // 水平外边距
        vmargin: 50    // 垂直外边距
    },
    layout: {
        hspace: 30,    // 节点水平间距
        vspace: 20,    // 节点垂直间距
        pspace: 13     // 节点与连接线间距
    }
};

线条样式定制

可以自定义思维导图连接线的样式：

var options = {
    view: {
        line_width: 3,          // 线条宽度
        line_color: '#336699',  // 线条颜色
        line_style: 'straight'   // 线条样式：straight或curved
    }
};

交互功能配置

拖拽与滚动

当思维导图超出容器大小时，可以配置拖拽行为：

var options = {
    view: {
        draggable: true,  // 启用拖拽
        hide_scrollbars_when_draggable: true  // 拖拽时隐藏滚动条
    }
};

缩放功能

JsMind支持思维导图的缩放操作：

var options = {
    view: {
        zoom: {
            min: 0.3,   // 最小缩放比例
            max: 3.0,   // 最大缩放比例
            step: 0.1  // 缩放步长
        }
    }
};

快捷键配置

JsMind内置了丰富的快捷键支持，可以通过配置自定义快捷键行为：

启用/禁用快捷键

var options = {
    shortcut: {
        enable: true  // 启用快捷键
    }
};

自定义快捷键

可以自定义快捷键映射：

var options = {
    shortcut: {
        mapping: {
            addchild: 45,        // Insert键添加子节点
            addbrother: 13,      // Enter键添加兄弟节点
            editnode: 113,       // F2键编辑节点
            customAction: 112    // F1键触发自定义动作
        }
    }
};

组合快捷键

JsMind支持组合快捷键配置：

var options = {
    shortcut: {
        mapping: {
            addchild: 4096 + 73,        // Ctrl+I添加子节点
            delnode: 4096 + 2048 + 68   // Ctrl+Alt+D删除节点
        }
    }
};

自定义渲染

JsMind提供了强大的自定义渲染能力：

自定义节点渲染

var options = {
    view: {
        custom_node_render: function(jm, element, node) {
            // 自定义渲染逻辑
            return false;  // 返回false会继续使用默认渲染
        }
    }
};

自定义线条渲染

var options = {
    view: {
        custom_line_render: function({ctx, start_point, end_point}) {
            // 自定义线条绘制逻辑
        }
    }
};

总结

JsMind提供了全面而灵活的配置选项，从基础的容器设置到高级的自定义渲染，开发者可以根据项目需求进行精细调整。理解这些配置选项将帮助你更好地利用JsMind构建功能丰富、用户体验优秀的思维导图应用。

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