{"_id":"@calvinlq/mdf-tree-view","name":"@calvinlq/mdf-tree-view","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@calvinlq/mdf-tree-view","version":"1.0.0","description":"Mapping data flow tree view visualization tool","type":"module","main":"dist/index.umd.js","module":"dist/index.es.js","types":"dist/index.d.ts","scripts":{"build":"vite build","dev":"vite","test":"node test.js"},"keywords":["tree","connection","visualization","canvas"],"author":{"name":"calvinlq"},"email":"calvinlq@163.com","license":"MIT","repository":{"type":"git","url":"git+https://github.com/calvinlq/mdf-tree-view.git"},"publishConfig":{"access":"public"},"devDependencies":{"@types/node":"^24.3.0","@vitejs/plugin-react":"^5.0.1","@vitejs/plugin-vue":"^6.0.1","sass":"^1.90.0","typescript":"^5.9.2","vite":"^7.1.3","vite-plugin-dts":"^4.5.4"},"_id":"@calvinlq/mdf-tree-view@1.0.0","gitHead":"080bb5a1e4c5c472d26dd49b9e9c0045db046cd0","bugs":{"url":"https://github.com/calvinlq/mdf-tree-view/issues"},"homepage":"https://github.com/calvinlq/mdf-tree-view#readme","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-tM7/DNu6323dD9Wx63BWUxWdmT2+Pm+LAi4u9JNgI/ULNTchZIJbPTcB1E2WEkUgZ3SKLwJryh2syOtiFjY5Tw==","shasum":"1f4c850b97a1e11f7524ecd79fd935fe879204ae","tarball":"https://registry.npmjs.org/@calvinlq/mdf-tree-view/-/mdf-tree-view-1.0.0.tgz","fileCount":10,"unpackedSize":85463,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCSXIGQKg+FA8jYvcskpbHlZO7wmtXBSD66xgKS6ZDNPwIgCW/CrkcBToq668Bd+d6EKZaKQ7jnT0cthvgo1DgHLFE="}]},"_npmUser":{"name":"calvinlq","email":"calvinlq@163.com"},"directories":{},"maintainers":[{"name":"calvinlq","email":"calvinlq@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mdf-tree-view_1.0.0_1756806553497_0.7791815233509289"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-02T09:49:13.444Z","1.0.0":"2025-09-02T09:49:13.708Z","modified":"2025-09-02T09:49:13.948Z"},"maintainers":[{"name":"calvinlq","email":"calvinlq@163.com"}],"description":"Mapping data flow tree view visualization tool","homepage":"https://github.com/calvinlq/mdf-tree-view#readme","keywords":["tree","connection","visualization","canvas"],"repository":{"type":"git","url":"git+https://github.com/calvinlq/mdf-tree-view.git"},"author":{"name":"calvinlq"},"bugs":{"url":"https://github.com/calvinlq/mdf-tree-view/issues"},"license":"MIT","readme":"# MDF-Tree-View\n\n[![npm version](https://img.shields.io/npm/v/@clq/mdf-tree-view.svg?style=flat)](https://www.npmjs.com/package/@clq/mdf-tree-view)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nMDF-Tree-View (Mapping Data Flow Tree View) 是一个强大的可视化工具，用于展示多棵树形结构数据并在它们之间创建连接线，直观地展示数据流动和关联关系。\n\n## 特性\n\n- **多树视图**：同时展示多棵树结构数据\n- **灵活连接**：支持在不同树之间的节点创建双向连接线\n- **拖拽交互**：可拖拽树容器调整位置\n- **节点交互**：支持节点展开/折叠\n- **智能连线**：即使节点在视野外也能正确显示连接关系\n- **自定义样式**：丰富的配置选项，支持自定义连接线样式和节点样式\n- **事件回调**：提供丰富的事件回调函数，方便集成到各类应用中\n- **TypeScript支持**：完整的TypeScript类型定义\n\n## 预览\n\n![MDF-Tree-View预览图](screenshots/MDFtv.png)\n\n## 安装\n\n### NPM\n\n```bash\nnpm install @clq/mdf-tree-view --save\n```\n\n### Yarn\n\n```bash\nyarn add @clq/mdf-tree-view\n```\n\n## 快速开始\n\n### 引入资源\n\n```javascript\nimport MappingTreeFlow from '@clq/mdf-tree-view';\nimport '@clq/mdf-tree-view/dist/index.css';\n```\n\n### HTML结构\n\n```html\n<div id=\"tree-container\"></div>\n```\n\n### 初始化组件\n\n```javascript\n// 准备树数据\nconst trees = [\n  {\n    id: 'tree1',\n    data: [\n      {\n        id: 'node1',\n        label: '节点1',\n        level: 1,\n        type: 'folder',\n        children: [\n          {\n            id: 'node1-1',\n            label: '子节点1-1',\n            level: 2,\n            type: 'input'\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: 'tree2',\n    data: [\n      {\n        id: 'node2',\n        label: '节点2',\n        level: 1,\n        type: 'folder',\n        children: [\n          {\n            id: 'node2-1',\n            label: '子节点2-1',\n            level: 2,\n            type: 'output'\n          }\n        ]\n      }\n    ]\n  }\n];\n\n// 准备连接线数据\nconst linkList = [\n  {\n    source: 'node1-1',\n    target: 'node2-1',\n    id: 'connection-1'\n  }\n];\n\n// 初始化组件\nconst mappingTreeFlow = new MappingTreeFlow('tree-container', trees, linkList, {\n  bezier: 80,\n  enableLink: true,\n  enableTxtBgColor: true,\n  enableDraggable: true,\n  onConnectionsChange: (connections) => {\n    console.log('Connections changed:', connections);\n  }\n});\n```\n\n## API文档\n\n### 类: MappingTreeFlow\n\n主要类，用于创建和管理多树视图。\n\n#### 构造函数\n\n```typescript\nconstructor(containerId: string, trees: TreeConfig[], linkList: Connection[], options?: MappingTreeFlowOptions)\n```\n\n- **containerId**: 容器元素的ID\n- **trees**: 树配置数组\n- **linkList**: 连接线数组\n- **options**: 配置选项\n\n#### 公共方法\n\n##### redraw()\n\n重新绘制所有连接线。\n\n```typescript\npublic redraw(): void\n```\n\n##### updateData(trees, linkList)\n\n更新树数据和连接线数据。\n\n```typescript\npublic updateData(trees: TreeConfig[], linkList: Connection[]): void\n```\n\n- **trees**: 新的树配置数组\n- **linkList**: 新的连接线数组\n\n##### getConnections()\n\n获取当前所有连接线。\n\n```typescript\npublic getConnections(): Connection[]\n```\n\n返回值：当前所有连接线的数组\n\n##### removeConnection(connection)\n\n删除指定的连接线。\n\n```typescript\npublic removeConnection(connection: Connection): boolean\n```\n\n- **connection**: 要删除的连接线对象\n\n返回值：是否成功删除\n\n##### updateConnection(updatedConnection)\n\n更新指定的连接线数据。\n\n```typescript\npublic updateConnection(updatedConnection: Connection): void\n```\n\n- **updatedConnection**: 更新后的连接线对象，必须包含id\n\n### 接口定义\n\n#### NodeType\n\n节点类型枚举\n\n```typescript\nexport type NodeType = 'input' | 'output' | 'inOut' | 'folder';\n```\n\n#### TreeNode\n\n树节点接口\n\n```typescript\nexport interface TreeNode {\n  id: string;          // 节点唯一标识\n  label: string;       // 节点标签\n  level: number;       // 节点层级\n  type: NodeType;      // 节点类型\n  icon?: string;       // 节点图标\n  children?: TreeNode[]; // 子节点\n  parentId?: string;   // 父节点ID\n  [key: string]: any;  // 其他自定义属性\n}\n```\n\n#### Connection\n\n连接线接口\n\n```typescript\nexport interface Connection {\n  source: string;      // 源节点ID\n  target: string;      // 目标节点ID\n  id?: string;         // 连接唯一标识\n  [key: string]: any;  // 其他自定义属性\n}\n```\n\n#### TreeConfig\n\n树配置接口\n\n```typescript\nexport interface TreeConfig {\n  id: string;          // 树唯一标识\n  data: TreeNode[];    // 树节点数据\n  width?: number;      // 树容器宽度\n  height?: number;     // 树容器高度\n}\n```\n\n#### MappingTreeFlowOptions\n\n配置选项接口\n\n```typescript\nexport interface MappingTreeFlowOptions {\n  bezier?: number;                         // 贝塞尔曲线参数，默认70\n  enableLink?: boolean;                    // 是否启用连接功能，默认true\n  enableTxtBgColor?: boolean;              // 是否启用文本背景色，默认false\n  enableDraggable?: boolean;               // 是否启用拖拽功能，默认true\n  onConnectionsChange?: (connections: Connection[]) => void; // 连接列表变化时的回调\n  onConnectionChange?: (connection: Connection, type: 'add' | 'remove') => void; // 单个连接变化时的回调\n  onUpdateConnection?: (connection: Connection) => void; // 更新连接时的回调\n  minTreeDistance?: number;                // 树之间的最小距离，默认100px\n}\n```\n\n## 高级用法\n\n### 事件回调\n\n```javascript\nconst mappingTreeFlow = new MappingTreeFlow('tree-container', trees, linkList, {\n  // 当连接列表发生变化时触发\n  onConnectionsChange: (connections) => {\n    console.log('当前所有连接:', connections);\n    // 这里可以保存连接数据到服务器\n  },\n  \n  // 当单个连接添加或删除时触发\n  onConnectionChange: (connection, type) => {\n    console.log(`${type}连接:`, connection);\n  },\n  \n  // 当连接更新时触发\n  onUpdateConnection: (connection) => {\n    console.log('更新连接:', connection);\n  }\n});\n```\n\n### 动态更新数据\n\n```javascript\n// 更新树数据\nconst newTrees = [/* 新的树数据 */];\nconst newLinks = [/* 新的连接线数据 */];\nmappingTreeFlow.updateData(newTrees, newLinks);\n\n// 获取当前连接\nconst currentConnections = mappingTreeFlow.getConnections();\n\n// 删除指定连接\nconst connectionToRemove = currentConnections[0];\nmappingTreeFlow.removeConnection(connectionToRemove);\n\n// 更新连接\nconst updatedConnection = {\n  id: 'connection-1',\n  source: 'new-source',\n  target: 'new-target',\n  customProperty: 'updated-value'\n};\nmappingTreeFlow.updateConnection(updatedConnection);\n```\n\n## 使用示例\n\n### 基础示例\n\n```javascript\nimport MappingTreeFlow from '@clq/mdf-tree-view';\nimport '@clq/mdf-tree-view/dist/index.css';\n\n// 准备树数据\nconst trees = [\n  {\n    id: 'leftTree',\n    data: [\n      {\n        id: 'left-1',\n        label: '左侧根节点1',\n        level: 1,\n        type: 'folder',\n        children: [\n          {\n            id: 'left-1-1',\n            label: '左侧子节点1-1',\n            level: 2,\n            type: 'input'\n          },\n          {\n            id: 'left-1-2',\n            label: '左侧子节点1-2',\n            level: 2,\n            type: 'output'\n          }\n        ]\n      }\n    ]\n  },\n  {\n    id: 'rightTree',\n    data: [\n      {\n        id: 'right-1',\n        label: '右侧根节点1',\n        level: 1,\n        type: 'folder',\n        children: [\n          {\n            id: 'right-1-1',\n            label: '右侧子节点1-1',\n            level: 2,\n            type: 'inOut'\n          }\n        ]\n      }\n    ]\n  }\n];\n\n// 创建实例\nconst mtf = new MappingTreeFlow('container', trees, [], {\n  bezier: 100,\n  enableLink: true,\n  enableDraggable: true\n});\n\n// 添加自定义样式\nconst style = document.createElement('style');\nstyle.textContent = `\n  .tree-node .tree-label {\n    transition: all 0.2s;\n  }\n  .tree-node .tree-label:hover {\n    background-color: #f0f7ff;\n  }\n`;\ndocument.head.appendChild(style);\n```\n\n### 复杂数据示例\n\n您可以使用项目提供的mockData.js生成复杂的树形数据和连接线数据：\n\n```javascript\nimport MappingTreeFlow from '@clq/mdf-tree-view';\nimport '@clq/mdf-tree-view/dist/index.css';\nimport { multiTreeData, multiLnkList } from './mockData.js';\n\n// 转换mock数据为TreeConfig格式\nconst trees = Object.entries(multiTreeData).map(([key, value]) => ({\n  id: key,\n  data: value\n}));\n\n// 创建实例\nconst mtf = new MappingTreeFlow('container', trees, multiLnkList, {\n  bezier: 120,\n  enableLink: true,\n  enableTxtBgColor: true,\n  enableDraggable: true,\n  minTreeDistance: 150\n});\n```\n\n## 自定义样式\n\n您可以通过覆盖CSS变量或自定义CSS来修改组件的外观：\n\n```css\n/* 自定义树节点样式 */\n.tree-node .tree-label {\n  font-size: 14px;\n  color: #333;\n}\n\n/* 自定义连接线样式 */\n#connection-layer path {\n  transition: all 0.3s ease;\n}\n\n/* 自定义树容器样式 */\n.tree-container {\n  background-color: #fafafa;\n  border: 1px solid #e8e8e8;\n  border-radius: 6px;\n}\n```\n\n## 浏览器兼容性\n\n- Chrome (推荐)\n- Firefox\n- Safari\n- Edge\n\n## 贡献指南\n\n如果您想为这个项目做贡献，请按照以下步骤：\n\n1. Fork 项目仓库\n2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启一个 Pull Request\n\n## 许可证\n\n本项目使用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件\n\n## 致谢\n\n感谢所有为这个项目做出贡献的开发者！\n\n## 作者\n\ncalvinlq\n\n- Email: [calvinlq@163.com](mailto:calvinlq@163.com)","readmeFilename":"README.md","_rev":"1-7ad6df2454361fb23e6eb26839445fbb"}