Mind Elixir Core：轻量级JavaScript思维导图核心库解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01075/article/details/148862103

Mind Elixir Core：轻量级JavaScript思维导图核心库解析

mind-elixir-core ⚗ Mind-elixir is a framework agnostic mind map core. 项目地址: https://gitcode.com/gh_mirrors/mi/mind-elixir-core

项目概述

Mind Elixir Core是一个开源的JavaScript思维导图核心库，它提供了一套完整的思维导图功能实现，具有轻量、高性能和框架无关的特点。作为思维导图的核心引擎，它可以与任何前端框架配合使用，为开发者提供了极大的灵活性。

核心特性

1. 轻量与高性能

体积小巧，依赖极少
经过优化处理，支持大规模节点渲染
采用高效的数据结构和渲染机制

2. 框架无关性

纯JavaScript实现，不依赖任何前端框架
可与React、Vue、Angular等主流框架无缝集成
提供清晰的API接口

3. 丰富的功能集

拖拽节点编辑
多节点批量操作
撤销/重做功能
节点折叠展开
多种导出格式支持（SVG/PNG/HTML）
快捷键支持

4. 可扩展性

插件系统支持功能扩展
自定义节点样式
可覆盖默认操作行为

快速入门

安装方式

NPM安装

npm install mind-elixir --save

CDN引入

<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>

基础使用示例

import MindElixir from 'mind-elixir'

// 初始化配置
const options = {
  el: '#mindmap-container',  // 容器选择器
  direction: MindElixir.LEFT,  // 布局方向
  draggable: true,  // 启用拖拽
  contextMenu: true,  // 启用右键菜单
  toolBar: true  // 显示工具栏
}

// 创建实例
const mindMap = new MindElixir(options)

// 初始化数据
const initialData = MindElixir.new('中心主题')
mindMap.init(initialData)

数据结构详解

Mind Elixir使用JSON格式存储思维导图数据，主要结构如下：

{
  topic: "节点主题",
  id: "唯一标识符",
  style: {
    fontSize: "字体大小",
    color: "文字颜色",
    background: "背景颜色"
  },
  expanded: true,  // 是否展开
  parent: null,  // 父节点引用
  tags: ["标签1", "标签2"],  // 标签数组
  icons: ["😊", "⭐"],  // 图标数组
  hyperLink: "https://example.com",  // 超链接
  image: {  // 图片
    url: "图片地址",
    height: 100,  // 高度
    width: 100   // 宽度
  },
  children: [  // 子节点数组
    {
      topic: "子节点1",
      // ...其他属性
    }
  ]
}

高级功能

1. 事件处理

Mind Elixir提供了丰富的事件监听机制：

// 操作事件监听
mindMap.bus.addListener('operation', (operation) => {
  console.log('操作类型:', operation.name)
  console.log('操作对象:', operation.obj)
})

// 节点选择事件
mindMap.bus.addListener('selectNode', (node) => {
  console.log('选中节点:', node)
})

// 节点展开/折叠事件
mindMap.bus.addListener('expandNode', (node) => {
  console.log('节点状态变化:', node)
})

2. 数据导入导出

// 导出数据
const jsonData = mindMap.getData()  // 获取JSON格式数据
const mdData = mindMap.getDataMd()  // 获取Markdown格式

// 导入数据
mindMap.refresh(newData)  // 刷新数据

3. 主题定制

// 更改主题
mindMap.changeTheme({
  name: '深色主题',
  palette: ['#848FA0', '#748BE9', '#D2F9FE'],  // 连接线颜色
  cssVar: {
    '--main-color': '#ffffff',  // 主文字颜色
    '--main-bgcolor': '#4c4f69'  // 主背景色
  }
})