traffic-diagram 1.0.9

package/.trae/documents/Update README.md for Traffic Lane Component.md

@@ -0,0 +1,37 @@
+## 更新内容
+
+### 1. 修正示例代码中的prop名称
+- 将示例中的`origin-data`改为`lane-diagram-data`
+- 确保示例代码与组件实际props名称一致
+
+### 2. 完善Traffic Lane Component的Props参数表格
+添加所有当前组件支持的props参数，包括：
+- **laneDiagramData**: 画布数据，包含车道ID、方向等信息
+- **canvasHeight**: 画布高度
+- **configType**: 配置类型，用于车道流向配置
+- **laneWidth**: 车道宽度
+- **laneDividerLength**: 车道分隔线长度
+- **laneDirections**: 车道方向配置
+- **maxCongestionValue**: 拥堵值最大值
+- **clickEvent**: 是否启用点击事件
+- **congestionFactorVisible**: 是否显示拥堵指标值
+- **multiple**: 是否支持多选
+- **selectedLane**: 已选择的车道
+- **laneActiveColor**: 车道激活颜色
+
+### 3. 添加事件文档
+记录组件触发的事件：
+- **chooseLane**: 多选时车道选择事件
+- **selectLane**: 单选时车道选择事件
+- **changeLaneDir**: 车道方向变更事件
+
+### 4. 确保文档一致性
+- 组件名称使用`traffic-line`
+- 术语统一为"Traffic Lane"而非"Traffic Line"
+- 更新项目结构中的构建目录为`dist/`
+
+## 预期效果
+- README.md中Traffic Lane Component的文档完整准确
+- Props参数表格详细，包含类型、默认值和描述
+- 示例代码可直接使用
+- 事件文档清晰明了

package/.trae/documents/npm Publish Plan.md

@@ -0,0 +1,27 @@
+## npm Publish Plan
+
+### Overview
+Publish the traffic-diagram package to npm registry.
+
+### Prerequisites
+- Project has proper package.json configuration
+- .npmrc file configured with npm registry and auth token
+- Package version is set to 1.0.7
+
+### Steps
+1. **Build the Project**
+   - Run `npm run build:lib` to generate the distributable files
+   - This will create the files specified in package.json's main and module fields
+
+2. **Verify Build Output**
+   - Ensure dist/ directory contains all necessary files
+   - Check that traffic-diagram.umd.js, traffic-diagram.common.js, and other build artifacts are present
+
+3. **Run npm Publish**
+   - Execute `npm publish` to publish the package to npm registry
+   - Verify the publish was successful
+
+### Expected Results
+- Package "traffic-diagram" version 1.0.7 is published to npm
+- Package is publicly accessible on npmjs.com
+- Users can install it using `npm install traffic-diagram`

package/.trae/documents/plan_20251222_071731.md

@@ -0,0 +1,64 @@
+## 更新内容
+
+### 1. 修正示例代码中的prop名称
+
+* 将示例中的`origin-data`改为`lane-diagram-data`
+
+* 确保示例代码与组件实际props名称一致
+
+### 2. 完善Traffic Lane Component的Props参数表格
+
+添加所有当前组件支持的props参数，包括：
+
+* **laneDiagramData**: 画布数据，包含车道ID、方向等信息
+
+* **canvasHeight**: 画布高度
+
+* **configType**: 配置类型，用于车道流向配置
+
+* **laneWidth**: 车道宽度
+
+* **laneDividerLength**: 车道分隔线长度
+
+* **laneDirections**: 车道方向配置
+
+* **maxCongestionValue**: 拥堵值最大值
+
+* **clickEvent**: 是否启用点击事件
+
+* **congestionFactorVisible**: 是否显示拥堵指标值
+
+* **multiple**: 是否支持多选
+
+* **selectedLane**: 已选择的车道
+
+* **laneActiveColor**: 车道激活颜色
+
+### 3. 添加事件文档
+
+记录组件触发的事件：
+
+* **chooseLane**: 多选时车道选择事件
+
+* **selectLane**: 单选时车道选择事件
+
+* **changeLaneDir**: 车道方向变更事件
+
+### 4. 确保文档一致性
+
+* 组件名称使用`traffic-line`
+
+* 术语统一为"Traffic Lane"而非"Traffic Line"
+
+* 更新项目结构中的构建目录为`dist/`
+
+## 预期效果
+
+* README.md中Traffic Lane Component的文档完整准确
+
+* Props参数表格详细，包含类型、默认值和描述
+
+* 示例代码可直接使用
+
+* 事件文档清晰明了
+

package/.trae/documents/plan_20251222_074833.md

@@ -0,0 +1,23 @@
+## 更新README.md计划
+
+### 1. 替换完整内容
+将现有README.md文件替换为用户提供的完整更新内容，包括：
+
+### 2. 主要更新点
+- **修正组件导入名称**：将`greenWave`改为`GreenWave`
+- **更新Green Wave组件**：
+  - 将`config` prop替换为`cross-data`
+  - 添加详细的props参数列表
+  - 添加事件文档
+  - 添加数据格式示例
+  - 添加演示GIF
+- **完善Traffic Lane组件**：
+  - 修正导入名称为`TrafficLane`
+- **保持其他部分不变**：
+  - 项目结构
+  - 开发命令
+  - 未来组件规划
+  - 许可证信息
+
+### 3. 预期效果
+README.md将包含完整的组件文档，用户可以清晰了解如何使用traffic-diagram库的所有功能。

package/.trae/documents/plan_20251222_081357.md

@@ -0,0 +1,23 @@
+我将按照以下步骤进行npm发布：
+
+1. **检查package.json配置**：确保package.json中的name、version、main、module等字段配置正确
+2. **验证构建文件**：确认dist目录下包含所有必要的构建文件
+3. **执行npm publish**：使用npm publish命令将包发布到npm registry
+4. **验证发布结果**：检查npm registry上的发布状态
+
+**注意事项**：
+
+* 项目已经配置了正确的.npmrc文件，包含registry和auth token
+
+* 项目版本已经更新到1.0.7
+
+* 构建文件已经生成在dist目录下
+
+**预期结果**：
+
+* 包成功发布到npm registry
+
+* 可以通过npm install traffic-diagram安装最新版本
+
+* npm上显示的版本为1.0.7
+

package/README.md

@@ -0,0 +1,311 @@
+# traffic-diagram
+
+Vue components for visualizing traffic diagrams, including lane schematics and green wave animations.
+
+## Features
+
+- **Traffic Lane Component**: Interactive lane schematic visualization with click events and multiple selection support
+- **Green Wave Component**: Animated green wave effect for traffic signal timing visualization
+- **Responsive Design**: Adjustable dimensions and styles
+- **PC Platform Support**: Optimized for desktop applications
+
+## Effect Preview
+
+### Lane Schematic Diagram
+- 展示交通路口的车道布局和流向
+- 支持不同方向车道的可视化
+- 显示车道拥堵状态
+![UI示意图](https://gitee.com/danielzhou1219/traffic-diagram/raw/develop/src/assets/images/traffic-lane/demo.png)
+
+### Interactive Operation
+- 支持点击选择车道
+- 支持车道方向配置
+- 动态更新车道状态
+![交互示意图](https://gitee.com/danielzhou1219/traffic-diagram/raw/develop/src/assets/images/traffic-lane/demo.gif)
+
+## Installation
+
+```bash
+npm install traffic-diagram
+```
+
+## Dependencies
+
+- `fabric@^5.5.2` - Canvas manipulation library
+- `lodash` - Utility functions
+- `vue@^2.6.14` - Vue framework
+
+## Components
+
+### Traffic Lane Component
+
+Interactive lane schematic visualization for traffic intersections.
+
+#### Usage
+
+```html
+<template>
+  <traffic-lane
+    :lane-diagram-data="laneDiagramData"
+    :lane-width="16"
+    :canvas-height="300"
+    :style="customStyle"
+    @choose-lane="handleLaneSelection"
+    multiple
+    click-event
+  ></traffic-lane>
+</template>
+
+<script>
+import { trafficLane } from 'traffic-diagram';
+
+export default {
+  components: {
+    trafficLane
+  },
+  data() {
+    return {
+      laneDiagramData: [
+        // Lane data array (see below for format)
+      ],
+      customStyle: {
+        // Custom styles
+      }
+    };
+  },
+  methods: {
+    handleLaneSelection(selectedLanes) {
+      // Handle lane selection event
+      console.log('Selected lanes:', selectedLanes);
+    }
+  }
+};
+</script>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `lane-diagram-data` | Array | `[]` | 画布数据，包含车道ID、方向、拥堵值等信息<br>字段描述：<br>- id: string - 车道ID<br>- laneDirCode: string - 车道方向编码<br>- laneDirName: string - 车道方向名称<br>- inDirection: string - 车道入口方向<br>- laneNo: number - 车道编号<br>- congestionFactor: number - 拥堵值 |
+| `canvas-height` | Number | `300` | 画布高度 |
+| `config-type` | String | `''` | 配置项，只有进行车道-流向配置时可在canvas图上点击替换方向图标<br>- Possible values:<br>  - LaneConfig |
+| `lane-width` | Number | `22` | 车道宽度 |
+| `lane-divider-length` | Number | `80` | 车道分隔线长度 |
+| `lane-directions` | Array | 预设方向数组 | 车道方向配置，包含方向名称和图标<br>默认值：左转、直行、右转、直左、左右、直右、直左右、掉头、其他 |
+| `max-congestion-value` | Number | `1` | 拥堵值最大值，用于拥堵颜色计算 |
+| `click-event` | Boolean | `false` | 是否启用点击事件 |
+| `congestion-factor-visible` | Boolean | `false` | 是否在车道上显示拥堵指标值 |
+| `multiple` | Boolean | `false` | 是否支持多选车道 |
+| `selected-lane` | String | `''` | 已被选择的车道 |
+| `lane-active-color` | String | `'#27ffd5'` | 车道激活颜色 |
+| `style` | Object | `{}` | 组件自定义样式 |
+
+#### Events
+
+| Event | Description | Payload |
+|-------|-------------|---------|
+| `choose-lane` | 多选时车道选择事件，当用户选择或取消选择车道时触发 | Array - 已选择的车道名称数组 |
+| `select-lane` | 单选时车道选择事件，当用户点击车道时触发 | Object - 包含选中车道信息<br>格式：{ laneDirCode: string } |
+| `change-lane-dir` | 车道方向变更事件，当用户在配置模式下更改车道方向时触发 | Object - 包含车道编码和新方向<br>格式：{ laneDirCode: string, laneDirName: string } |
+
+#### Data Format
+
+```javascript
+// laneDiagramData format example
+const laneDiagramData = [
+  {
+    "id": "unique-id",
+    "laneDirCode": "102",
+    "laneDirName": "直行",
+    "inDirection": "东",
+    "laneNo": "01",
+    "congestionFactor": 0.75
+  }
+  // More lane objects...
+];
+
+// Lane direction codes
+const laneDirections = [
+  { "id": "1", "laneDirCode": "101", "laneDirName": "左转", "remark": "L" },
+  { "id": "2", "laneDirCode": "102", "laneDirName": "直行", "remark": "S" },
+  { "id": "3", "laneDirCode": "103", "laneDirName": "右转", "remark": "R" },
+  { "id": "4", "laneDirCode": "104", "laneDirName": "直左", "remark": "S_L" },
+  { "id": "5", "laneDirCode": "105", "laneDirName": "直右", "remark": "S_R" },
+  { "id": "6", "laneDirCode": "109", "laneDirName": "左右", "remark": "L_R" },
+  { "id": "7", "laneDirCode": "106", "laneDirName": "直左右", "remark": "L_S_R" },
+  { "id": "8", "laneDirCode": "107", "laneDirName": "掉头", "remark": "T" },
+  { "id": "9", "laneDirCode": "108", "laneDirName": "其他", "remark": "O" }
+];
+```
+
+### Green Wave Component
+
+Animated green wave effect visualization for traffic signals.
+![交互示意图](https://gitee.com/danielzhou1219/traffic-diagram/raw/develop/src/assets/images/green-wave/demo.gif)
+
+#### Usage
+
+```html
+<template>
+  <green-wave
+    :cross-data="crossData"
+    :canvas-height="500"
+    :forward-direction="true"
+    :interval="70"
+    :style="customStyle"
+    @compute-data="handleComputeData"
+    @update-cross-params="handleUpdateParams"
+  ></green-wave>
+</template>
+
+<script>
+import { greenWave } from 'traffic-diagram';
+
+export default {
+  components: {
+    greenWave
+  },
+  data() {
+    return {
+      crossData: [
+        // Green wave intersection data (see below for format)
+      ],
+      customStyle: {
+        // Custom styles
+      }
+    };
+  },
+  methods: {
+    handleComputeData(data) {
+      // Handle computed green wave data
+      console.log('Computed data:', data);
+    },
+    handleUpdateParams(params) {
+      // Handle updated intersection parameters
+      console.log('Updated params:', params);
+    }
+  }
+};
+</script>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `cross-data` | Array | `[]` | 绿波路口数据<br>字段描述：<br>- crossId: string - 路口ID<br>- crossRoadName: string - 路口名称<br>- crossDistance: number - 路口距离<br>- orderNumber: number - 排序编号<br>- forwardGreen: number - 路口正向车道绿灯时长(A路口 -> B路口)<br>- reverseGreen: number - 路口反向车道绿灯时长(B路口 -> A路口)<br>- forwardSpeed: number - 路口正向车道速度(A路口 -> B路口)<br>- reverseSpeed: number - 路口反向车道速度(B路口 -> A路口)<br>- forwardPhaseDiff: number - 路口正向车道相位差时长(A路口 -> B路口)<br>- reversePhaseDiff: number - 路口反向车道相位差时长(B路口 -> A路口)<br>- greenFlag: boolean - 绿波标志<br>- phaseDiffFlag: boolean - 相位标志 |
+| `canvas-height` | Number | `500` | 画布高度 |
+| `forward-direction` | Boolean | `true` | 是否正向(从上到下， 从左到右为正方向) |
+| `interval` | Number | `70` | 绿波周期间隔(单位：秒) |
+| `forward-color` | String | `'#058213'` | 正向绿波颜色 |
+| `backward-color` | String | `'#0eed28'` | 反向绿波颜色 |
+| `drag-stroke-width` | Number | `5` | 拖拽线宽 |
+| `single-wave-width` | Number | `2` | 单绿波宽度<br>值越小宽度越小，值越大宽度越大 |
+| `x-axis-bottom` | Number | `30` | X轴底部间距 |
+| `y-axis-top` | Number | `30` | Y轴顶部间距 |
+| `y-axis-width` | Number | `200` | Y轴文本刻度宽度 |
+| `loop-time` | Number | `0` | 绿波循环次数<br>- Possible values:<br>  - 0 - 默认值，自动计算<br>  - 1 - 循环一次 |
+| `style` | Object | `{}` | 组件自定义样式 |
+
+#### Events
+
+| Event | Description | Payload |
+|-------|-------------|---------|
+| `compute-data` | 计算绿波数据事件，当绿波参数变化时触发 | Object - 包含绿波组数据<br>格式：{ groups_forward: Array, groups_back: Array, rate: Number, current_group?: Object } |
+| `update-cross-params` | 更新路口参数事件，当拖拽调整绿波时触发 | Object - 包含更新的参数<br>格式：{ rate: Number, current_group: Object, direction: String } |
+
+#### Data Format
+
+```javascript
+// crossData format example
+const crossData = [
+  {
+    "crossId": "cross-1",
+    "crossRoadName": "路口1",
+    "crossDistance": 500,
+    "orderNumber": 1,
+    "forwardGreen": 30,
+    "reverseGreen": 35,
+    "forwardSpeed": 40,
+    "reverseSpeed": 35,
+    "forwardPhaseDiff": 0,
+    "reversePhaseDiff": 10,
+    "greenFlag": true,
+    "phaseDiffFlag": true
+  },
+  {
+    "crossId": "cross-2",
+    "crossRoadName": "路口2",
+    "crossDistance": 800,
+    "orderNumber": 2,
+    "forwardGreen": 35,
+    "reverseGreen": 30,
+    "forwardSpeed": 45,
+    "reverseSpeed": 40,
+    "forwardPhaseDiff": 15,
+    "reversePhaseDiff": 5,
+    "greenFlag": true,
+    "phaseDiffFlag": true
+  }
+  // More intersection objects...
+];
+```
+
+## Project Structure
+
+```
+├── src/
+│   ├── components/
+│   │   ├── traffic-lane/       # Traffic lane component
+│   │   └── green-wave/          # Green wave component
+│   ├── libs/                    # Utility libraries
+│   ├── assets/                  # Static assets
+│   └── index.js                 # Main export file
+├── dist/                        # Built library files
+└── package.json                 # Project configuration
+```
+
+## Development
+
+### Build the Library
+
+```bash
+npm run build:lib
+```
+
+### Run Development Server
+
+```bash
+npm run serve
+```
+
+### Run Tests
+
+```bash
+npm run test
+```
+
+### Linting
+
+```bash
+npm run eslint
+npm run stylelint
+```
+
+## Future Components
+
+This library is actively being developed. Future components will include:
+
+- Traffic Signal Component
+- Vehicle Flow Visualization
+- Intersection Simulation
+- Real-time Data Integration
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit issues and pull requests.

package/dist/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>traffic-diagram demo</title>
+<script src="./traffic-diagram.umd.js"></script>
+
+<link rel="stylesheet" href="./traffic-diagram.css">
+
+
+<script>
+console.log(traffic-diagram)
+</script>

package/dist/static/css/chunk-src.895fe3a6.css

@@ -0,0 +1 @@
+.crossing-box[data-v-52147a10]{margin:auto;position:relative}.legend-box[data-v-52147a10]{display:flex;justify-content:space-between;margin-top:20px;flex-wrap:wrap;width:180px;background:rgba(13,43,80,.9);padding:10px;z-index:999;position:absolute;left:0;top:0;transition:all .3s ease}.legend-box .legend-item[data-v-52147a10]{width:40px;border-radius:8px;padding:8px;margin-bottom:5px;font-size:12px;text-align:center;cursor:pointer}.legend-box .legend-item[data-v-52147a10]:hover{background:rgba(39,255,213,.7)}.legend-box .legend-item img[data-v-52147a10]{height:20px;margin-bottom:5px}[data-v-52147a10] .canvas-container{margin:auto}.canvas-wrapper[data-v-9b8515cc]{display:flex}