ice-entity-designer 0.0.29 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +28 -26
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <img width="120" src="./tests/assets/ice-entity-designer.png" alt="ice entity designer" />
2
+ <img width="120" src="./examples/assets/ice-entity-designer.png" alt="ice entity designer" />
3
3
  </p>
4
4
 
5
5
  <h1 align="center">IED · ice entity designer</h1>
@@ -54,9 +54,8 @@ IED（ice entity designer）是基于 [ice-render](https://github.com/ice-render
54
54
  ### 编辑器内核能力（继承自 ice-render）
55
55
 
56
56
  - 画布滚轮缩放、空白处拖拽平移。
57
- - 每个域包示例页统一接入上面这套视口交互（`tests/canvas-interactions.js`）：canvas 铺满可视区，
57
+ - 每个域包示例页统一接入上面这套视口交互（`examples/canvas-interactions.js`）：canvas 铺满可视区，
58
58
  滚轮以光标为锚点缩放，空白处左键 / 任意位置中键拖拽平移，工具栏带「适应视图 / 复位视图」。
59
- 老示例把 canvas 写死成 1800×1100 而可视区更小，`fitViewport()` 是按 canvas 尺寸算的 —— 图会被切在屏幕外。
60
59
  - 拖拽对齐辅助线与磁吸效果。
61
60
  - Undo / Redo（基于项目快照，最多 100 步）。
62
61
  - 项目级保存 / 加载（`serializeProject()` / `loadProject()`）。
@@ -80,31 +79,31 @@ IED（ice entity designer）是基于 [ice-render](https://github.com/ice-render
80
79
 
81
80
  完整的 ER 模型（电商交易 + 用户权限）：
82
81
 
83
- <img src="./tests/assets/overview.png" alt="ER 模型总览" />
82
+ <img src="./examples/assets/overview.png" alt="ER 模型总览" />
84
83
 
85
84
  实体字段与约束标记：
86
85
 
87
- <img src="./tests/assets/fields.png" alt="实体字段与约束" />
86
+ <img src="./examples/assets/fields.png" alt="实体字段与约束" />
88
87
 
89
88
  关系语义：自引用、多对多、一对一：
90
89
 
91
- <img src="./tests/assets/relations.png" alt="关系语义" />
90
+ <img src="./examples/assets/relations.png" alt="关系语义" />
92
91
 
93
92
  交互式编辑器（右侧面板可直接切换到「TypeORM Schema」查看导出结果）：
94
93
 
95
- <img src="./tests/assets/editor.png" alt="交互式编辑器与 TypeORM Schema" />
94
+ <img src="./examples/assets/editor.png" alt="交互式编辑器与 TypeORM Schema" />
96
95
 
97
- 同一套内核也能承载**流程图**（`tests/flowchart-editor.html`）：四类节点（开始/结束、处理、判定、输入/输出，
96
+ 同一套内核也能承载**流程图**（`examples/flowchart-editor.html`）：四类节点（开始/结束、处理、判定、输入/输出，
98
97
  其中判定菱形与输入输出平行四边形是自定义 `ICEPath` 形状）、正交/贝塞尔连线 + 分支标签（是/否）、
99
98
  拖拽 / 连线 / 撤销重做 / 快照存取：
100
99
 
101
- <img src="./tests/assets/flowchart-editor.png" alt="流程图编辑器示例" />
100
+ <img src="./examples/assets/flowchart-editor.png" alt="流程图编辑器示例" />
102
101
 
103
- 再加一层业务记法就是 **BPMN 2.0**（`tests/bpmn-editor.html`）：池 / 泳道真嵌套（拖动银行池，内部泳道、
102
+ 再加一层业务记法就是 **BPMN 2.0**（`examples/bpmn-editor.html`）：池 / 泳道真嵌套（拖动银行池，内部泳道、
104
103
  任务和连线一起平移）、事件 / 网关 / 任务角标 / 数据对象 / 注释、顺序流 + 条件与默认流标记、
105
104
  跨池的消息流，右侧面板按图元类型给出网关类型、事件种类、任务类型等属性，并内置语义校验与 BPMN 2.0 XML 导出：
106
105
 
107
- <img src="./tests/assets/bpmn-editor.png" alt="BPMN 2.0 编辑器示例（信用卡申请审批）" />
106
+ <img src="./examples/assets/bpmn-editor.png" alt="BPMN 2.0 编辑器示例（信用卡申请审批）" />
108
107
 
109
108
  ## 4. 快速开始
110
109
 
@@ -113,17 +112,20 @@ npm install
113
112
  npm run build
114
113
  ```
115
114
 
116
- 可运行的示例（`tests/` 下的页面会加载同级 `dist` 与 `node_modules`，建议通过静态服务器打开）：
115
+ 可运行的示例（`examples/` 下的页面加载上一级 `dist` 与本仓 `node_modules`，建议通过静态服务器打开）：
117
116
 
118
117
  | 示例 | 说明 |
119
118
  |---|---|
120
- | `tests/entity-editor.html` | 交互式编辑器：实时编辑字段、创建/删除实体与关系、校验与保存加载；右侧面板含「TypeORM Schema」标签页 |
121
- | `tests/flowchart-editor.html` | 流程图编辑器：四类节点形状、拖拽、连线（含分支标签）、撤销重做、localStorage 存取与 JSON 导出；纯 DOM 面板，只依赖 `dist` 产物 |
122
- | `tests/bpmn-editor.html` | BPMN 2.0 编辑器：信用卡申请审批案例（两个池 / 三条泳道）、八类图元、条件与默认流标记、语义校验、BPMN 2.0 XML 导入导出 |
119
+ | `examples/entity-editor.html` | 交互式编辑器：实时编辑字段、创建/删除实体与关系、校验与保存加载；右侧面板含「TypeORM Schema」标签页 |
120
+ | `examples/flowchart-editor.html` | 流程图编辑器：四类节点形状、拖拽、连线（含分支标签）、撤销重做、localStorage 存取与 JSON 导出；纯 DOM 面板，只依赖 `dist` 产物 |
121
+ | `examples/bpmn-editor.html` | BPMN 2.0 编辑器：信用卡申请审批案例（两个池 / 三条泳道）、八类图元、条件与默认流标记、语义校验、BPMN 2.0 XML 导入导出 |
122
+ | `examples/uml-editor.html` | UML 类图编辑器：三段式类框、六种关系、语义校验、矢量导出、PlantUML / Mermaid 文本互操作 |
123
+ | `examples/statechart-editor.html` | 状态机编辑器：伪状态 / 普通状态 / 复合状态容器、转移标签 `事件 [守卫] / 动作` |
124
+ | `examples/gantt-editor.html` | 甘特编辑器：时间轴与按天吸附、依赖线、自动排程、关键路径、资源冲突校验、矢量导出 |
123
125
  | [`ice-entity-designer-react-demo`](../ice-entity-designer-react-demo) | 独立的 React 集成示例工程（webpack + TypeScript），涵盖 ref / hook / onChange / 受控模式 |
124
126
 
125
127
  ```bash
126
- python3 -m http.server 8899 # 然后访问 http://localhost:8899/tests/entity-editor.html
128
+ python3 -m http.server 8899 # 然后访问 http://localhost:8899/examples/entity-editor.html
127
129
  ```
128
130
 
129
131
  ## 5. 使用方式
@@ -214,7 +216,7 @@ flow.undo(); // 100 步历史
214
216
  自定义形状（判定菱形 / 输入输出平行四边形）在 `src/flow/flow_shapes.ts`，走的是引擎的 `ICEPath` 子类机制。
215
217
  流程图节点是**复合组件**（形状 + 标题由 kind/标题/配色派生）：它们实现了引擎的 `hasDerivedChildren()`，
216
218
  内部子组件不写进文档、载入时由构造函数按 state 重建——避免重复挂载，也让同一份数据的两次序列化结果保持一致。
217
- 可运行的完整示例见 `tests/flowchart-editor.html`；React 用法见 [6.6](#66-流程图的-react-绑定)；
219
+ 可运行的完整示例见 `examples/flowchart-editor.html`；React 用法见 [6.6](#66-流程图的-react-绑定)；
218
220
  AI Agent 生成流程图的 JSON DSL 见 `ice-entity-designer-dsl`。
219
221
 
220
222
  #### 5.3 BPMN 2.0（`BpmnDesigner`）
@@ -273,7 +275,7 @@ const svg = IED.exportSvg(ice, { scale: 2 });
273
275
  const { svg, width, height } = IED.exportSvgResult(ice, { padding: 12 });
274
276
  ```
275
277
 
276
- `tests/bpmn-editor.html` 与 `tests/flowchart-editor.html` 上都有「导出 SVG」按钮，点一下即可下载
278
+ `examples/bpmn-editor.html` 与 `examples/flowchart-editor.html` 上都有「导出 SVG」按钮，点一下即可下载
277
279
  （BPMN 案例导出的池/泳道/事件/网关/连线/标签都是矢量）。服务端出图见引擎的 `ICE.headless()`。
278
280
 
279
281
  限制（与引擎一致）：阴影用 `feDropShadow` 近似（模糊观感不会与画布逐像素相同）；SVG 与 canvas 的
@@ -308,7 +310,7 @@ const { svg, width, height } = IED.exportSvgResult(ice, { padding: 12 });
308
310
  +| 时间轴 | `dayWidth` / `originDate` / `labelColumnWidth` 统一换算；框架（左列任务名 + 日期刻度 + 行线）由派生的 `GanttRuler` 渲染，模型一变就重建 |
309
311
  +| 按天吸附 | `GanttTask.setPosition()` 把 x 吸附到整天的格子并反推 `start`（排期不会出现「13:47 开工」） |
310
312
  +
311
- +可运行示例：`tests/gantt-editor.html`（移动端 2.0 发布排期，含依赖、进度、**自动排程**与**关键路径**按钮）。
313
+ +可运行示例：`examples/gantt-editor.html`（移动端 2.0 发布排期，含依赖、进度、**自动排程**与**关键路径**按钮）。
312
314
 
313
315
  #### 5.6 BPMN 令牌仿真（`BpmnSimulator`）
314
316
  +
@@ -331,7 +333,7 @@ const { svg, width, height } = IED.exportSvgResult(ice, { padding: 12 });
331
333
  +| 语义 | 排他网关优先走带 `condition` 的流、其次走非默认流；并行/包容网关分裂成多条令牌；结束事件上令牌消亡 |
332
334
  +| 推进 | `step(dtMs)` 显式推进（测试可断言）；`start()` 后自动挂帧循环 |
333
335
  +
334
- +可运行示例：`tests/bpmn-editor.html` 的「仿真 / 停止」按钮（案例是信用卡申请审批）。
336
+ +可运行示例：`examples/bpmn-editor.html` 的「仿真 / 停止」按钮（案例是信用卡申请审批）。
335
337
  +
336
338
  +#### 5.7 UML 类图（域包示例）
337
339
 
@@ -368,7 +370,7 @@ const svg = uml.toSvg({ background: '#ffffff', padding: 16 });
368
370
  可见性/静态/泛型都由文本表达 —— 与 PlantUML/Mermaid 的通行写法一致，AI 生成不必学另一套结构化语法；
369
371
  接口与枚举带构造型，抽象类标 «abstract»；**框高随成员自动增长**，成员不会被画到框外。
370
372
 
371
- 可运行示例：`tests/uml-editor.html`（电商支付的类模型：继承 / 实现 / 组合 / 关联 / 依赖）。
373
+ 可运行示例：`examples/uml-editor.html`（电商支付的类模型：继承 / 实现 / 组合 / 关联 / 依赖）。
372
374
 
373
375
  ## 6. 在 React 中使用
374
376
 
@@ -514,8 +516,8 @@ React 里可沿用 `createFlowSession` 的模式自建一层封装。
514
516
 
515
517
  ### 7.1 一个「域包（domain pack）」由什么组成
516
518
 
517
- 域包 = **一个领域的记法 + 应用层 + 语义校验**，跑在同一套引擎与同一套应用层机制上。已落地的三个
518
- 域（ER / 流程图 / BPMN）再加 UML，边际成本主要在「记法本身」，不在编辑器：
519
+ 域包 = **一个领域的记法 + 应用层 + 语义校验**，跑在同一套引擎与同一套应用层机制上。现已落地
520
+ 6 类文档：ER、流程图、UML 类图、状态机、甘特、BPMN 2.0 —— 边际成本主要在「记法本身」，不在编辑器：
519
521
 
520
522
  | 组成 | 复用什么 | 以 UML 为例 |
521
523
  |---|---|---|
@@ -524,8 +526,8 @@ React 里可沿用 `createFlowSession` 的模式自建一层封装。
524
526
  | 应用层 | `FlowDesigner`（选择 / 增删改 / 连线 / 撤销重做 / 快照 / 适应视图 / 订阅 / `toSvg`） | `UmlDesigner` 只重写「建什么图元 + 类型过滤」 |
525
527
  | 语义校验 | 结构校验之外的部分自写，规则直白 | `validateUml()`：重名类 / 悬空关系 / 继承成环 |
526
528
  | 文档格式 | 引擎序列化（typeId 注册表 + `hasDerivedChildren`），零登记 | 类与关系统统自动往返 |
527
- | 互操作 | 有标准格式的域就做（BPMN 2.0 XML 已有） | UML 的 XMI / PlantUML 互操作待补 |
528
- | 交付物 | 示例页 + e2e + README + （可选）JSON DSL 与技能 | `tests/uml-editor.html` + `e2e/uml-editor.spec.ts` |
529
+ | 互操作 | 有标准格式的域就做 | BPMN 2.0 XML（导入 + 导出，含 BPMNDI 布局）；UML 类图的 PlantUML / Mermaid 文本互操作 |
530
+ | 交付物 | 示例页 + e2e + README + （可选）JSON DSL 与技能 | `examples/uml-editor.html` + `e2e/uml-editor.spec.ts` |
529
531
 
530
532
  新开一个域包时，按这张表从上往下填即可；**不要**在域包里另造序列化、另造选择/历史、另造导出。
531
533
 
@@ -579,7 +581,7 @@ src/
579
581
  | `npm run build` | 清理并完整构建（类型声明 + JS 产物） |
580
582
  | `npm run types:check` | 仅做 TypeScript 类型检查 |
581
583
  | `npm test` | 运行单元测试（Jest） |
582
- | `npm run test:e2e` | 浏览器端到端回归（Playwright，覆盖 `tests/entity-editor.html` 与 `tests/flowchart-editor.html`） |
584
+ | `npm run test:e2e` | 浏览器端到端回归（Playwright，覆盖 `examples/entity-editor.html` 与 `examples/flowchart-editor.html`） |
583
585
  | `npm run pretty` | Prettier 格式化源码 |
584
586
 
585
587
  ## 9. 环境要求与依赖
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "author": "大漠穷秋",
3
3
  "name": "ice-entity-designer",
4
- "version": "0.0.29",
4
+ "version": "0.0.30",
5
5
  "description": "An entity designer based on ice-render.",
6
6
  "repository": {
7
7
  "type": "git",