uni-link-show

一个基于 meta2d.js 的组态图渲染库，用于在浏览器中展示和交互组态图。

特性

• 纯 TypeScript 实现，无框架依赖
• 支持多种数据源（JSON、API、WebSocket）
• 支持缩放、平移等交互操作
• 响应式数据更新
• 可自定义样式配置

安装

npm

npm install uni-link-show

浏览器 CDN

<script src="https://unpkg.com/[email protected]/dist/uni-link-show.umd.js"></script>

快速开始

基本用法

import { UniLinkShow } from 'uni-link-show';

// 创建容器
const container = document.getElementById('diagram-container');

// 创建实例
const show = new UniLinkShow({
  container,
  diagramConfig: {
    width: 800,
    height: 600,
    backgroundColor: '#ffffff'
  },
  onReady: () => {
    console.log('UniLinkShow is ready');
  },
  onError: (error) => {
    console.error('Error:', error);
  }
});

// 加载数据
show.loadData({
  nodes: [
    { id: 'node1', type: 'rect', x: 100, y: 100, label: '节点1' },
    { id: 'node2', type: 'rect', x: 300, y: 200, label: '节点2' }
  ],
  links: [
    { id: 'link1', source: 'node1', target: 'node2' }
  ]
});

使用数据源

const show = new UniLinkShow({
  container,
  dataSource: {
    type: 'api',
    url: '/api/diagram',
    interval: 5000
  }
});

API

UniLinkShow 类

构造函数

new UniLinkShow(options: UniLinkShowOptions)

选项

| 参数 | 类型 | 描述 | |------|------|------| | container | HTMLElement | 必须，渲染容器 | | diagramConfig | DiagramConfig | 可选，图表配置 | | dataSource | DataSource | 可选，数据源配置 | | onReady | () => void | 可选，就绪回调 | | onError | (error: Error) => void | 可选，错误回调 |

DiagramConfig

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | width | number | 800 | 画布宽度 | | height | number | 600 | 画布高度 | | backgroundColor | string | '#ffffff' | 背景颜色 | | grid | GridConfig | - | 网格配置 | | zoom | ZoomConfig | - | 缩放配置 | | pan | boolean | true | 是否允许平移 |

GridConfig

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | visible | boolean | true | 是否显示网格 | | size | number | 20 | 网格大小 | | color | string | '#e0e0e0' | 网格颜色 |

ZoomConfig

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | min | number | 0.1 | 最小缩放比例 | | max | number | 3 | 最大缩放比例 | | defaultValue | number | 1 | 默认缩放比例 |

DataSource

| 属性 | 类型 | 描述 | |------|------|------| | type | 'json' | 'api' | 'websocket' | 数据源类型 | | url | string | API 或 WebSocket 地址 | | data | Record<string, unknown> | JSON 数据源 | | interval | number | API 轮询间隔（毫秒） |

方法

| 方法 | 描述 | |------|------| | loadData(data: DiagramData) | 加载完整图表数据 | | updateData(data: Partial) | 更新部分图表数据 | | zoom(factor: number) | 缩放图表 | | zoomToFit() | 自适应缩放 | | pan(dx: number, dy: number) | 平移图表 | | destroy() | 销毁实例 | | on(event: string, handler: Function) | 监听事件 | | off(event: string, handler: Function) | 取消监听 |

事件

| 事件 | 描述 | |------|------| | ready | 实例就绪时触发 | | error | 发生错误时触发 | | dataUpdate | 数据更新时触发 |

开发

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

# 测试
npm test

# 生成文档
npm run docs

目录结构

uni-link-show/
├── src/
│   ├── data/          # 数据管理模块
│   ├── renderer/      # 渲染模块
│   ├── types/         # 类型定义
│   ├── utils/         # 工具函数
│   ├── UniLinkShow.ts # 主类
│   └── index.ts       # 导出
├── test/              # 单元测试
├── dist/              # 构建产物
├── docs/              # 文档
├── package.json
├── tsconfig.json
├── rollup.config.*    # Rollup 配置
└── jest.config.js

许可证

MIT