@syhr/sy-graph 1.0.0 → 1.0.2-beta.0

package/README.md

@@ -7,10 +7,15 @@
 - 🎨 基于 Meta2D 的强大图形编辑能力
 - 🔧 支持多种图形类型和图表
 - 📱 响应式设计，支持移动端
-- 🎯 TypeScript 支持
+- 🎯 完整的 TypeScript 支持
 - 📦 多种模块格式支持（ES、UMD、CommonJS）
 - 🔌 Vue 3 插件化架构
-- 🛡️ 安全的全局属性处理，避免 $t 等变量冲突
+- 🛡️ 安全的全局属性处理，避免变量冲突
+- 🔄 实时数据更新和 WebSocket 支持
+- 🎛️ 可定制的错误处理和回调机制
+- 🚀 高性能渲染和批量更新
+- 🎨 多层级显示控制
+- 📡 支持自定义 API 和事件总线注入
 
 ## 安装
 
@@ -23,7 +28,11 @@ npm install @syhr/sy-graph
 确保你的项目已安装以下 peer dependencies：
 
 ```bash
-npm install vue@^3.0.0 element-plus@^2.0.0 @meta2d/core@^1.0.0 @meta2d/svg@^1.0.0 @meta2d/utils@^1.0.0
+# 必需依赖
+npm install vue@^3.0.0 element-plus@^2.0.0 @meta2d/core@^1.0.0 @meta2d/svg@^1.0.0 @meta2d/utils@^1.0.0 lodash-es@^4.17.0
+
+# 可选依赖（根据需要安装）
+npm install pinia@^2.0.0 vue-router@^4.0.0
 ```
 
 ## 使用
@@ -58,59 +67,115 @@ export default {
 ```vue
 <template>
   <div>
-    <SyGraph :url="graphUrl" :local="false" :show-map="true" @loaded="handleLoaded" @graph-event="handleGraphEvent" />
+    <SyGraph
+      ref="graphRef"
+      :url="graphUrl"
+      :local="false"
+      :show-map="true"
+      :config="graphConfig"
+      @loaded="handleLoaded"
+      @error="handleError"
+      @custom-msg="handleCustomMsg"
+      @socket-msg="handleSocketMsg"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
+const graphRef = ref();
 const graphUrl = ref('path/to/your/graph.json');
 
+// 自定义配置
+const graphConfig = ref({
+  socketUrl: 'ws://localhost:8080',
+  stationIdKey: 'STATION_ID',
+  userTokenKey: 'USER_TOKEN',
+  messageDelay: 200,
+  debounceDelay: 100,
+  enableAutoFit: true,
+  enableWebSocket: true,
+});
+
 const handleLoaded = (stage) => {
   console.log('Graph loaded:', stage);
+  // 可以通过 stage 进行图纸操作
+};
+
+const handleError = (errorInfo) => {
+  console.error('Graph error:', errorInfo);
+};
+
+const handleCustomMsg = (msg) => {
+  console.log('Custom message:', msg);
+};
+
+const handleSocketMsg = (msg) => {
+  console.log('Socket message:', msg);
+};
+
+// 组件方法调用示例
+const toggleLevel = () => {
+  graphRef.value?.changeVisibleByLevel(3, false);
 };
 
-const handleGraphEvent = (event) => {
-  console.log('Graph event:', event);
+const batchUpdate = (dataList) => {
+  graphRef.value?.batchUpdatePen(dataList);
 };
 </script>
 ```
 
 ## Props
 
-| 属性      | 类型    | 默认值 | 说明               |
-| --------- | ------- | ------ | ------------------ |
-| url       | String  | ''     | 图纸数据 URL       |
-| local     | Boolean | false  | 是否为本地数据     |
-| planeData | Object  | null   | 直接传入的图纸数据 |
-| planeId   | String  | ''     | 图纸 ID            |
-| showMap   | Boolean | false  | 是否显示地图       |
-| isFactory | Boolean | false  | 是否为工厂模式     |
+| 属性            | 类型    | 默认值         | 说明                 |
+| --------------- | ------- | -------------- | -------------------- |
+| url             | String  | ''             | 图纸数据 URL         |
+| gid             | String  | ''             | 图纸 ID              |
+| data            | Object  | null           | 直接传入的图纸数据   |
+| local           | Boolean | false          | 是否为本地数据       |
+| config          | Object  | 默认配置对象   | WebSocket 和其他配置 |
+| showMap         | Boolean | false          | 是否显示地图         |
+| isFactory       | Boolean | false          | 是否为工厂模式       |
+| apiInstance     | Object  | 内置 Api       | 自定义 API 实例      |
+| mittInstance    | Object  | 内置 mitt      | 自定义事件总线实例   |
+| customCallbacks | Object  | {}             | 自定义回调函数集合   |
+| errorHandler    | Object  | 默认错误处理器 | 错误处理配置         |
 
 ## Events
 
-| 事件名      | 说明           | 参数               |
-| ----------- | -------------- | ------------------ |
-| loaded      | 图纸加载完成   | stage: Meta2D 实例 |
-| graph-event | 图纸自定义事件 | event: 事件对象    |
+| 事件名     | 说明           | 参数                    |
+| ---------- | -------------- | ----------------------- |
+| error      | 错误事件       | errorInfo: 错误信息对象 |
+| loaded     | 图纸加载完成   | stage: Meta2D 实例      |
+| custom-msg | 自定义消息事件 | msg: 消息对象           |
+| socket-msg | WebSocket 消息 | msg: WebSocket 消息     |
 
 ## 方法
 
 通过 ref 获取组件实例后可调用以下方法：
 
-- `changeVisibleByLevel(level, isStrict)` - 切换显示层级
-- `batchUpdatePen(dataList)` - 批量更新图元
-- `setValue(pen, render)` - 设置图元属性
-- `getAllPens()` - 获取所有图元
+- `setValue(pen, render = true)` - 设置图元属性
 - `getStage()` - 获取 Meta2D 实例
+- `getAllPens()` - 获取所有图元
+- `batchUpdatePen(dataList)` - 批量更新图元
+- `handleLineCross()` - 处理线条交叉
+- `changeVisibleByLevel(level, isStrict = false)` - 切换显示层级
 
 ## TypeScript 支持
 
 本包提供完整的 TypeScript 类型声明：
 
 ```typescript
-import type { SyGraphProps, SyGraphInstance } from '@syhr/sy-graph';
+import { ref } from 'vue';
+import type {
+  SyGraphProps,
+  SyGraphInstance,
+  GraphConfig,
+  CustomCallbacks,
+  ErrorHandler,
+  DataItem,
+} from '@syhr/sy-graph';
 
 // 组件 ref 类型
 const graphRef = ref<SyGraphInstance>();
@@ -119,7 +184,105 @@ const graphRef = ref<SyGraphInstance>();
 const props: SyGraphProps = {
   url: 'path/to/graph.json',
   showMap: true,
+  config: {
+    socketUrl: 'ws://localhost:8080',
+    enableAutoFit: true,
+    enableWebSocket: true,
+  } as GraphConfig,
+  customCallbacks: {
+    onStageLoaded: (stage) => console.log('Stage loaded:', stage),
+    onBatchUpdate: (dataList: DataItem[]) => console.log('Batch update:', dataList),
+  } as CustomCallbacks,
+  errorHandler: {
+    showMessage: true,
+    callback: (errorInfo) => console.error('Custom error handler:', errorInfo),
+  } as ErrorHandler,
+};
+
+// 方法调用示例
+const toggleLevel = (level: number, isStrict: boolean = false) => {
+  graphRef.value?.changeVisibleByLevel(level, isStrict);
 };
+
+const updateData = (dataList: DataItem[]) => {
+  graphRef.value?.batchUpdatePen(dataList);
+};
+```
+
+## 配置选项详解
+
+### GraphConfig 配置
+
+```typescript
+const config = {
+  socketUrl: 'ws://localhost:8080', // WebSocket服务器地址
+  stationIdKey: 'STATION_ID', // 站点ID存储键名
+  userTokenKey: 'USER_TOKEN', // 用户令牌存储键名
+  messageDelay: 200, // 消息处理延迟（毫秒）
+  debounceDelay: 100, // 防抖延迟（毫秒）
+  enableAutoFit: true, // 是否自动适应视图
+  enableWebSocket: true, // 是否启用WebSocket
+  graphSocket: 'graph:socket', // 图纸Socket事件名
+};
+```
+
+### CustomCallbacks 回调
+
+```typescript
+const callbacks = {
+  onWebSocketMessage: (message) => {
+    // 处理WebSocket消息
+  },
+  onCustomMessage: (msg) => {
+    // 处理自定义消息
+  },
+  onStageLoaded: (stage) => {
+    // 图纸加载完成后的处理
+  },
+  onGraphLoaded: (url) => {
+    // 图纸URL加载完成
+  },
+  onBatchUpdate: (dataList) => {
+    // 批量数据更新后的处理
+  },
+  onLevelChange: (level, isStrict) => {
+    // 显示层级变更后的处理
+  },
+};
+```
+
+## 使用场景
+
+### 1. 基础图纸展示
+
+```vue
+<SyGraph :url="'/api/graph/123'" />
+```
+
+### 2. 本地图纸文件
+
+```vue
+<SyGraph :url="'/assets/graph.json'" :local="true" />
+```
+
+### 3. 直接传入数据
+
+```vue
+<SyGraph :data="graphData" />
+```
+
+### 4. 完整配置示例
+
+```vue
+<SyGraph
+  :gid="graphId"
+  :config="graphConfig"
+  :custom-callbacks="callbacks"
+  :error-handler="errorHandler"
+  :show-map="true"
+  @loaded="onGraphLoaded"
+  @error="onGraphError"
+/>
 ```
 
 ## 浏览器支持

package/lib/graph.css

@@ -0,0 +1 @@
+.meta2d-editor[data-v-3657c9a7]{position:relative;width:100%;height:100%}.meta2d-editor[data-v-3657c9a7] .meta2d-map{z-index:1999}.meta2d-editor[data-v-3657c9a7] .stage.value-map{position:absolute;top:1.04vw;right:.52vw;z-index:200}.meta2d-editor .toolbox[data-v-3657c9a7]{position:absolute;display:none;width:5.21vw;height:1.56vw;background:red;z-index:1999}.preview-container[data-v-ca3fd052]{position:relative;width:100%;height:100%}.preview-container .back-btn[data-v-ca3fd052]{position:absolute;bottom:.52vw;right:.52vw;z-index:1000}