drawui-core 0.3.0 → 0.3.1

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 (6) hide show
  1. package/README.md +72 -1
  2. package/dist/index.cjs +17 -17
  3. package/dist/index.d.cts +178 -5
  4. package/dist/index.d.ts +178 -5
  5. package/dist/index.js +17 -17
  6. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -18,7 +18,7 @@ interface ShapeStyle {
18
18
  /** 描边色透明度（0-1），缺省为 1；与 strokeColor 叠加使用 */
19
19
  strokeOpacity?: number;
20
20
  }
21
- type ShapeType = 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'uml-class' | 'uml-interface' | 'mind-map' | 'line' | 'arrow' | 'text' | 'draw';
21
+ type ShapeType = 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'cylinder' | 'cloud' | 'heart' | 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down' | 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'stadium' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right' | 'uml-class' | 'uml-interface' | 'mind-map' | 'line' | 'arrow' | 'text' | 'draw';
22
22
  interface BaseShape {
23
23
  id: string;
24
24
  type: ShapeType;
@@ -93,6 +93,46 @@ interface StarShape extends BaseShape {
93
93
  width: number;
94
94
  height: number;
95
95
  }
96
+ /** 圆柱体（数据库）：上下为椭圆端面，中间为筒身 */
97
+ interface CylinderShape extends BaseShape {
98
+ type: 'cylinder';
99
+ width: number;
100
+ height: number;
101
+ }
102
+ /** 云朵 */
103
+ interface CloudShape extends BaseShape {
104
+ type: 'cloud';
105
+ width: number;
106
+ height: number;
107
+ }
108
+ /** 心形 */
109
+ interface HeartShape extends BaseShape {
110
+ type: 'heart';
111
+ width: number;
112
+ height: number;
113
+ }
114
+ /** 单向块箭头（流程图中常用的实心箭头），方向由类型名区分 */
115
+ interface BlockArrowShape extends BaseShape {
116
+ type: 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down';
117
+ width: number;
118
+ height: number;
119
+ }
120
+ /** 全圆角矩形（胶囊 / 体育场形）：圆角半径恒为「短边的一半」，在流程图里就是「开始/结束」符 */
121
+ interface StadiumShape extends BaseShape {
122
+ type: 'stadium';
123
+ width: number;
124
+ height: number;
125
+ }
126
+ /**
127
+ * 「矩形区域 + 归一化轮廓」类图形（对话框 / 立方体 / 流程图符号等）。
128
+ * 尺寸模型与矩形完全一致（以 (x,y) 为中心 + width/height），差异只在轮廓，
129
+ * 轮廓定义见 `shapePaths.ts`，canvas 与 SVG 导出共用。
130
+ */
131
+ interface PathShape extends BaseShape {
132
+ type: 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right';
133
+ width: number;
134
+ height: number;
135
+ }
96
136
  type UmlVisibility = '+' | '-' | '#' | '~';
97
137
  interface UmlAttribute {
98
138
  id: string;
@@ -166,7 +206,17 @@ interface ArrowBinding {
166
206
  isPrecise?: boolean;
167
207
  normalizedAnchor?: Vec2;
168
208
  }
169
- type ArrowHeadType = 'none' | 'start' | 'end' | 'both' | 'inheritance' | 'aggregation' | 'composition';
209
+ type ArrowHeadType = 'none' | 'start' | 'end' | 'both' | 'inheritance' | 'aggregation' | 'composition'
210
+ /** 依赖（UML dependency）：虚线 + 开放箭头 */
211
+ | 'dependency'
212
+ /** 实现（UML realization）：虚线 + 空心三角 */
213
+ | 'realization';
214
+ /** 箭头的完整样式（连线类型 + 头部 + 是否虚线）：工具栏「箭头」下拉与样式面板共用 */
215
+ interface ArrowStyle {
216
+ connectionType: ConnectionType;
217
+ arrowHead: ArrowHeadType;
218
+ dashed: boolean;
219
+ }
170
220
  interface ArrowShape extends BaseShape {
171
221
  type: 'arrow';
172
222
  points: Vec2[];
@@ -212,8 +262,8 @@ interface MindMapShape extends BaseShape {
212
262
  height: number;
213
263
  root: MindMapNode;
214
264
  }
215
- type Shape = RectangleShape | RoundedRectangleShape | CircleShape | EllipseShape | DiamondShape | TriangleShape | HexagonShape | ParallelogramShape | TrapezoidShape | PentagonShape | OctagonShape | StarShape | UmlClassShape | UmlInterfaceShape | LineShape | ArrowShape | TextShape | DrawShape | MindMapShape;
216
- type ToolType = 'select' | 'hand' | 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'uml-class' | 'uml-interface' | 'line' | 'arrow' | 'text' | 'draw' | 'pen' | 'highlighter' | 'eraser' | 'mind-map';
265
+ type Shape = RectangleShape | RoundedRectangleShape | CircleShape | EllipseShape | DiamondShape | TriangleShape | HexagonShape | ParallelogramShape | TrapezoidShape | PentagonShape | OctagonShape | StarShape | CylinderShape | CloudShape | HeartShape | BlockArrowShape | StadiumShape | PathShape | UmlClassShape | UmlInterfaceShape | LineShape | ArrowShape | TextShape | DrawShape | MindMapShape;
266
+ type ToolType = 'select' | 'hand' | 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'cylinder' | 'cloud' | 'heart' | 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down' | 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'stadium' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right' | 'uml-class' | 'uml-interface' | 'line' | 'arrow' | 'text' | 'draw' | 'pen' | 'highlighter' | 'eraser' | 'mind-map';
217
267
  interface CameraState {
218
268
  x: number;
219
269
  y: number;
@@ -353,6 +403,43 @@ declare const dictionaries: {
353
403
  readonly 'tool.pentagon': "五边形";
354
404
  readonly 'tool.octagon': "八边形";
355
405
  readonly 'tool.star': "星形";
406
+ readonly 'tool.cylinder': "圆柱体";
407
+ readonly 'tool.cloud': "云形";
408
+ readonly 'tool.heart': "心形";
409
+ readonly 'tool.block-arrow-right': "右箭头";
410
+ readonly 'tool.block-arrow-left': "左箭头";
411
+ readonly 'tool.block-arrow-up': "上箭头";
412
+ readonly 'tool.block-arrow-down': "下箭头";
413
+ readonly 'tool.block-arrow-double': "双向箭头";
414
+ readonly 'tool.right-triangle': "直角三角形";
415
+ readonly 'tool.cross': "十字";
416
+ readonly 'tool.speech-rect': "方形对话框";
417
+ readonly 'tool.speech-round': "圆形对话框";
418
+ readonly 'tool.cube': "立方体";
419
+ readonly 'tool.sector': "扇形";
420
+ readonly 'tool.delay': "D 形";
421
+ readonly 'tool.predefined-process': "预定义流程";
422
+ readonly 'tool.document': "文档";
423
+ readonly 'tool.stadium': "全圆角矩形";
424
+ readonly 'tool.class-catalog': "类目";
425
+ readonly 'class.plain': "类";
426
+ readonly 'flow.process': "处理";
427
+ readonly 'flow.step': "流程";
428
+ readonly 'flow.startEnd': "开始/结束";
429
+ readonly 'flow.decision': "判定";
430
+ readonly 'flow.data': "数据";
431
+ readonly 'flow.manual': "手动操作";
432
+ readonly 'flow.preparation': "准备";
433
+ readonly 'flow.database': "数据库";
434
+ readonly 'flow.delay': "延时";
435
+ readonly 'shapeGroup.basic': "基础";
436
+ readonly 'shapeGroup.flowchart': "流程图";
437
+ readonly 'shapeGroup.other': "其他";
438
+ readonly 'shapeGroup.uml': "类图";
439
+ readonly 'shapeMenu.hint': "悬停查看名称";
440
+ readonly 'tool.chevron': "尖角";
441
+ readonly 'tool.brace-left': "左括号";
442
+ readonly 'tool.brace-right': "右括号";
356
443
  readonly 'tool.uml-class': "UML 类图";
357
444
  readonly 'tool.uml-interface': "UML 接口";
358
445
  readonly 'tool.line': "直线";
@@ -402,9 +489,14 @@ declare const dictionaries: {
402
489
  readonly 'style.arrowhead.end': "终点箭头";
403
490
  readonly 'style.arrowhead.start': "起点箭头";
404
491
  readonly 'style.arrowhead.both': "双箭头";
492
+ readonly 'style.arrowhead.none-dashed': "无箭头虚线";
493
+ readonly 'style.arrowhead.both-dashed': "双箭头虚线";
494
+ readonly 'style.uml': "UML";
405
495
  readonly 'style.arrowhead.inheritance': "继承";
406
496
  readonly 'style.arrowhead.composition': "组合";
407
497
  readonly 'style.arrowhead.aggregation': "聚合";
498
+ readonly 'style.arrowhead.dependency': "依赖";
499
+ readonly 'style.arrowhead.realization': "实现";
408
500
  readonly 'menu.title': "选择新图形";
409
501
  readonly 'menu.cancel': "点击空白处取消";
410
502
  readonly 'shape.rectangle': "矩形";
@@ -475,6 +567,43 @@ declare const dictionaries: {
475
567
  readonly 'tool.pentagon': "Pentagon";
476
568
  readonly 'tool.octagon': "Octagon";
477
569
  readonly 'tool.star': "Star";
570
+ readonly 'tool.cylinder': "Cylinder";
571
+ readonly 'tool.cloud': "Cloud";
572
+ readonly 'tool.heart': "Heart";
573
+ readonly 'tool.block-arrow-right': "Arrow right";
574
+ readonly 'tool.block-arrow-left': "Arrow left";
575
+ readonly 'tool.block-arrow-up': "Arrow up";
576
+ readonly 'tool.block-arrow-down': "Arrow down";
577
+ readonly 'tool.block-arrow-double': "Double arrow";
578
+ readonly 'tool.right-triangle': "Right triangle";
579
+ readonly 'tool.cross': "Cross";
580
+ readonly 'tool.speech-rect': "Speech bubble";
581
+ readonly 'tool.speech-round': "Round bubble";
582
+ readonly 'tool.cube': "Cube";
583
+ readonly 'tool.sector': "Sector";
584
+ readonly 'tool.delay': "Delay";
585
+ readonly 'tool.predefined-process': "Predefined process";
586
+ readonly 'tool.document': "Document";
587
+ readonly 'tool.stadium': "Stadium";
588
+ readonly 'tool.class-catalog': "Category";
589
+ readonly 'class.plain': "Class";
590
+ readonly 'flow.process': "Process";
591
+ readonly 'flow.step': "Step";
592
+ readonly 'flow.startEnd': "Start / End";
593
+ readonly 'flow.decision': "Decision";
594
+ readonly 'flow.data': "Data";
595
+ readonly 'flow.manual': "Manual operation";
596
+ readonly 'flow.preparation': "Preparation";
597
+ readonly 'flow.database': "Database";
598
+ readonly 'flow.delay': "Delay";
599
+ readonly 'shapeGroup.basic': "Basic";
600
+ readonly 'shapeGroup.flowchart': "Flowchart";
601
+ readonly 'shapeGroup.other': "Other";
602
+ readonly 'shapeGroup.uml': "Class diagram";
603
+ readonly 'shapeMenu.hint': "Hover to see name";
604
+ readonly 'tool.chevron': "Chevron";
605
+ readonly 'tool.brace-left': "Left brace";
606
+ readonly 'tool.brace-right': "Right brace";
478
607
  readonly 'tool.uml-class': "UML class";
479
608
  readonly 'tool.uml-interface': "UML interface";
480
609
  readonly 'tool.line': "Line";
@@ -524,9 +653,14 @@ declare const dictionaries: {
524
653
  readonly 'style.arrowhead.end': "End";
525
654
  readonly 'style.arrowhead.start': "Start";
526
655
  readonly 'style.arrowhead.both': "Both";
656
+ readonly 'style.arrowhead.none-dashed': "Dashed";
657
+ readonly 'style.arrowhead.both-dashed': "Dashed both";
658
+ readonly 'style.uml': "UML";
527
659
  readonly 'style.arrowhead.inheritance': "Inheritance";
528
660
  readonly 'style.arrowhead.composition': "Composition";
529
661
  readonly 'style.arrowhead.aggregation': "Aggregation";
662
+ readonly 'style.arrowhead.dependency': "Dependency";
663
+ readonly 'style.arrowhead.realization': "Realization";
530
664
  readonly 'menu.title': "Create shape";
531
665
  readonly 'menu.cancel': "Click empty space to cancel";
532
666
  readonly 'shape.rectangle': "Rectangle";
@@ -673,6 +807,11 @@ declare class Editor {
673
807
  private notifyScheduled;
674
808
  /** 是否启用 localStorage 持久化 */
675
809
  private persist;
810
+ /**
811
+ * 新建箭头的默认样式（工具栏「箭头」下拉里选的）。
812
+ * 只影响之后创建的箭头；改选中箭头的样式走 updateArrowStyle。
813
+ */
814
+ private arrowStyle;
676
815
  constructor(canvas: HTMLCanvasElement, options?: EditorOptions);
677
816
  private setupEventListeners;
678
817
  private handlePointerDown;
@@ -736,6 +875,15 @@ declare class Editor {
736
875
  updateConnectionType(connectionType: ConnectionType): void;
737
876
  /** 批量更新选中箭头的箭头类型 */
738
877
  updateArrowHeadType(arrowHead: ArrowHeadType): void;
878
+ /**
879
+ * 批量更新选中箭头的完整样式（连线类型 / 头部 / 是否虚线），只写一条历史记录。
880
+ * 样式面板与工具栏下拉都走这里。
881
+ */
882
+ updateArrowStyle(updates: Partial<ArrowStyle>): void;
883
+ /** 读取「新建箭头」的默认样式（工具栏下拉用） */
884
+ getArrowStyle(): ArrowStyle;
885
+ /** 修改「新建箭头」的默认样式：只影响之后画出来的箭头 */
886
+ setArrowStyle(updates: Partial<ArrowStyle>): void;
739
887
  /** 批量更新选中箭头的虚线样式 */
740
888
  updateArrowDashed(dashed: boolean): void;
741
889
  /** 更新 UML 类图的类名、属性、方法，自动重算尺寸 */
@@ -841,6 +989,9 @@ declare class Editor {
841
989
  } | null;
842
990
  setActiveTool(tool: ToolType): void;
843
991
  getActiveTool(): ToolType;
992
+ /** 设置荧光笔颜色（基础色，绘制时自动叠加固定透明度） */
993
+ setHighlighterColor(color: string): void;
994
+ getHighlighterColor(): string;
844
995
  getShapes(): Shape[];
845
996
  /** 导出当前数据（图形 + 相机），供外部保存/对接 */
846
997
  getData(): EditorData;
@@ -981,6 +1132,8 @@ declare class Renderer {
981
1132
  private applyStyle;
982
1133
  private drawRectangle;
983
1134
  private drawRoundedRectangle;
1135
+ /** 全圆角矩形（胶囊 / 体育场形）：圆角半径恒为短边的一半 */
1136
+ private drawStadium;
984
1137
  private drawCircle;
985
1138
  private drawEllipse;
986
1139
  private drawDiamond;
@@ -991,6 +1144,13 @@ declare class Renderer {
991
1144
  private drawPentagon;
992
1145
  private drawOctagon;
993
1146
  private drawStar;
1147
+ /**
1148
+ * 用「归一化路径」绘制图形（圆柱体 / 云 / 心形 / 箭头 / 对话框 / 流程图符号 / 大括号…）。
1149
+ * 路径定义见 `shapePaths.ts`，与 SVG 导出共用，保证两端形状一致。
1150
+ */
1151
+ private drawPathShape;
1152
+ /** 把归一化路径命令展开到 canvas 当前路径 */
1153
+ private tracePath;
994
1154
  private drawUmlClass;
995
1155
  /**
996
1156
  * UML 接口：标题显示为 `<<${className}>>`，仅方法段，无属性段，只有一条分隔线。
@@ -1182,6 +1342,8 @@ interface ToolContext {
1182
1342
  highlightColor?: string;
1183
1343
  }): void;
1184
1344
  updateConnectionType(connectionType: ConnectionType): void;
1345
+ /** 新建箭头的默认样式（工具栏「箭头」下拉里选的） */
1346
+ getArrowStyle(): ArrowStyle;
1185
1347
  /** 光标语义命中：思维导图节点框或折叠标记内才命中（节点间空档不命中） */
1186
1348
  getMindMapCursorHitAtPoint(point: Vec2): {
1187
1349
  shapeId: string;
@@ -1364,6 +1526,8 @@ declare class LineTool extends Tool {
1364
1526
  }
1365
1527
 
1366
1528
  type FreehandMode = 'pen' | 'highlighter';
1529
+ /** 荧光笔默认颜色（黄色） */
1530
+ declare const DEFAULT_HIGHLIGHTER_COLOR = "#ffeb3b";
1367
1531
  /**
1368
1532
  * 自由绘制工具（画笔 / 荧光笔）。
1369
1533
  *
@@ -1380,7 +1544,14 @@ declare class FreehandTool extends Tool {
1380
1544
  private currentShapeId;
1381
1545
  private committed;
1382
1546
  private fadeTimer;
1547
+ /** 荧光笔基础色（实际绘制时叠加固定透明度） */
1548
+ private highlighterColor;
1383
1549
  constructor(context: ToolContext, mode: FreehandMode);
1550
+ /** 设置荧光笔颜色（仅 highlighter 模式生效） */
1551
+ setHighlighterColor(color: string): void;
1552
+ getHighlighterColor(): string;
1553
+ /** 当前模式新建笔迹要用的样式 */
1554
+ private buildStyle;
1384
1555
  onPointerDown(point: Vec2, _event: PointerEvent): void;
1385
1556
  /**
1386
1557
  * 由世界坐标点集计算飞书式「矩形区域」几何：
@@ -1400,8 +1571,10 @@ declare class ArrowTool extends Tool {
1400
1571
  type: "arrow";
1401
1572
  private isDrawing;
1402
1573
  private startPoint;
1574
+ /** 真正拖出距离后才创建图形，所以这里可能为 null */
1403
1575
  private currentShapeId;
1404
1576
  private startBindingInfo;
1577
+ private startBinding;
1405
1578
  onPointerDown(point: Vec2, _event: PointerEvent): void;
1406
1579
  onPointerMove(point: Vec2, _event: PointerEvent): void;
1407
1580
  onPointerUp(_point: Vec2, _event: PointerEvent): void;
@@ -1456,4 +1629,4 @@ declare function countMindMapNodes(root: MindMapNode): number;
1456
1629
  */
1457
1630
  declare function layoutMindMap(root: MindMapNode): MindMapLayoutResult;
1458
1631
 
1459
- export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
1632
+ export { type ArrowBinding, type ArrowHeadType, type ArrowShape, type ArrowStyle, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, DEFAULT_HIGHLIGHTER_COLOR, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
package/dist/index.d.ts CHANGED
@@ -18,7 +18,7 @@ interface ShapeStyle {
18
18
  /** 描边色透明度（0-1），缺省为 1；与 strokeColor 叠加使用 */
19
19
  strokeOpacity?: number;
20
20
  }
21
- type ShapeType = 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'uml-class' | 'uml-interface' | 'mind-map' | 'line' | 'arrow' | 'text' | 'draw';
21
+ type ShapeType = 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'cylinder' | 'cloud' | 'heart' | 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down' | 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'stadium' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right' | 'uml-class' | 'uml-interface' | 'mind-map' | 'line' | 'arrow' | 'text' | 'draw';
22
22
  interface BaseShape {
23
23
  id: string;
24
24
  type: ShapeType;
@@ -93,6 +93,46 @@ interface StarShape extends BaseShape {
93
93
  width: number;
94
94
  height: number;
95
95
  }
96
+ /** 圆柱体（数据库）：上下为椭圆端面，中间为筒身 */
97
+ interface CylinderShape extends BaseShape {
98
+ type: 'cylinder';
99
+ width: number;
100
+ height: number;
101
+ }
102
+ /** 云朵 */
103
+ interface CloudShape extends BaseShape {
104
+ type: 'cloud';
105
+ width: number;
106
+ height: number;
107
+ }
108
+ /** 心形 */
109
+ interface HeartShape extends BaseShape {
110
+ type: 'heart';
111
+ width: number;
112
+ height: number;
113
+ }
114
+ /** 单向块箭头（流程图中常用的实心箭头），方向由类型名区分 */
115
+ interface BlockArrowShape extends BaseShape {
116
+ type: 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down';
117
+ width: number;
118
+ height: number;
119
+ }
120
+ /** 全圆角矩形（胶囊 / 体育场形）：圆角半径恒为「短边的一半」，在流程图里就是「开始/结束」符 */
121
+ interface StadiumShape extends BaseShape {
122
+ type: 'stadium';
123
+ width: number;
124
+ height: number;
125
+ }
126
+ /**
127
+ * 「矩形区域 + 归一化轮廓」类图形（对话框 / 立方体 / 流程图符号等）。
128
+ * 尺寸模型与矩形完全一致（以 (x,y) 为中心 + width/height），差异只在轮廓，
129
+ * 轮廓定义见 `shapePaths.ts`，canvas 与 SVG 导出共用。
130
+ */
131
+ interface PathShape extends BaseShape {
132
+ type: 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right';
133
+ width: number;
134
+ height: number;
135
+ }
96
136
  type UmlVisibility = '+' | '-' | '#' | '~';
97
137
  interface UmlAttribute {
98
138
  id: string;
@@ -166,7 +206,17 @@ interface ArrowBinding {
166
206
  isPrecise?: boolean;
167
207
  normalizedAnchor?: Vec2;
168
208
  }
169
- type ArrowHeadType = 'none' | 'start' | 'end' | 'both' | 'inheritance' | 'aggregation' | 'composition';
209
+ type ArrowHeadType = 'none' | 'start' | 'end' | 'both' | 'inheritance' | 'aggregation' | 'composition'
210
+ /** 依赖（UML dependency）：虚线 + 开放箭头 */
211
+ | 'dependency'
212
+ /** 实现（UML realization）：虚线 + 空心三角 */
213
+ | 'realization';
214
+ /** 箭头的完整样式（连线类型 + 头部 + 是否虚线）：工具栏「箭头」下拉与样式面板共用 */
215
+ interface ArrowStyle {
216
+ connectionType: ConnectionType;
217
+ arrowHead: ArrowHeadType;
218
+ dashed: boolean;
219
+ }
170
220
  interface ArrowShape extends BaseShape {
171
221
  type: 'arrow';
172
222
  points: Vec2[];
@@ -212,8 +262,8 @@ interface MindMapShape extends BaseShape {
212
262
  height: number;
213
263
  root: MindMapNode;
214
264
  }
215
- type Shape = RectangleShape | RoundedRectangleShape | CircleShape | EllipseShape | DiamondShape | TriangleShape | HexagonShape | ParallelogramShape | TrapezoidShape | PentagonShape | OctagonShape | StarShape | UmlClassShape | UmlInterfaceShape | LineShape | ArrowShape | TextShape | DrawShape | MindMapShape;
216
- type ToolType = 'select' | 'hand' | 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'uml-class' | 'uml-interface' | 'line' | 'arrow' | 'text' | 'draw' | 'pen' | 'highlighter' | 'eraser' | 'mind-map';
265
+ type Shape = RectangleShape | RoundedRectangleShape | CircleShape | EllipseShape | DiamondShape | TriangleShape | HexagonShape | ParallelogramShape | TrapezoidShape | PentagonShape | OctagonShape | StarShape | CylinderShape | CloudShape | HeartShape | BlockArrowShape | StadiumShape | PathShape | UmlClassShape | UmlInterfaceShape | LineShape | ArrowShape | TextShape | DrawShape | MindMapShape;
266
+ type ToolType = 'select' | 'hand' | 'rectangle' | 'rounded-rectangle' | 'circle' | 'ellipse' | 'diamond' | 'triangle' | 'hexagon' | 'parallelogram' | 'trapezoid' | 'pentagon' | 'octagon' | 'star' | 'cylinder' | 'cloud' | 'heart' | 'block-arrow-right' | 'block-arrow-left' | 'block-arrow-up' | 'block-arrow-down' | 'block-arrow-double' | 'right-triangle' | 'cross' | 'speech-rect' | 'speech-round' | 'cube' | 'sector' | 'delay' | 'predefined-process' | 'document' | 'stadium' | 'class-catalog' | 'chevron' | 'brace-left' | 'brace-right' | 'uml-class' | 'uml-interface' | 'line' | 'arrow' | 'text' | 'draw' | 'pen' | 'highlighter' | 'eraser' | 'mind-map';
217
267
  interface CameraState {
218
268
  x: number;
219
269
  y: number;
@@ -353,6 +403,43 @@ declare const dictionaries: {
353
403
  readonly 'tool.pentagon': "五边形";
354
404
  readonly 'tool.octagon': "八边形";
355
405
  readonly 'tool.star': "星形";
406
+ readonly 'tool.cylinder': "圆柱体";
407
+ readonly 'tool.cloud': "云形";
408
+ readonly 'tool.heart': "心形";
409
+ readonly 'tool.block-arrow-right': "右箭头";
410
+ readonly 'tool.block-arrow-left': "左箭头";
411
+ readonly 'tool.block-arrow-up': "上箭头";
412
+ readonly 'tool.block-arrow-down': "下箭头";
413
+ readonly 'tool.block-arrow-double': "双向箭头";
414
+ readonly 'tool.right-triangle': "直角三角形";
415
+ readonly 'tool.cross': "十字";
416
+ readonly 'tool.speech-rect': "方形对话框";
417
+ readonly 'tool.speech-round': "圆形对话框";
418
+ readonly 'tool.cube': "立方体";
419
+ readonly 'tool.sector': "扇形";
420
+ readonly 'tool.delay': "D 形";
421
+ readonly 'tool.predefined-process': "预定义流程";
422
+ readonly 'tool.document': "文档";
423
+ readonly 'tool.stadium': "全圆角矩形";
424
+ readonly 'tool.class-catalog': "类目";
425
+ readonly 'class.plain': "类";
426
+ readonly 'flow.process': "处理";
427
+ readonly 'flow.step': "流程";
428
+ readonly 'flow.startEnd': "开始/结束";
429
+ readonly 'flow.decision': "判定";
430
+ readonly 'flow.data': "数据";
431
+ readonly 'flow.manual': "手动操作";
432
+ readonly 'flow.preparation': "准备";
433
+ readonly 'flow.database': "数据库";
434
+ readonly 'flow.delay': "延时";
435
+ readonly 'shapeGroup.basic': "基础";
436
+ readonly 'shapeGroup.flowchart': "流程图";
437
+ readonly 'shapeGroup.other': "其他";
438
+ readonly 'shapeGroup.uml': "类图";
439
+ readonly 'shapeMenu.hint': "悬停查看名称";
440
+ readonly 'tool.chevron': "尖角";
441
+ readonly 'tool.brace-left': "左括号";
442
+ readonly 'tool.brace-right': "右括号";
356
443
  readonly 'tool.uml-class': "UML 类图";
357
444
  readonly 'tool.uml-interface': "UML 接口";
358
445
  readonly 'tool.line': "直线";
@@ -402,9 +489,14 @@ declare const dictionaries: {
402
489
  readonly 'style.arrowhead.end': "终点箭头";
403
490
  readonly 'style.arrowhead.start': "起点箭头";
404
491
  readonly 'style.arrowhead.both': "双箭头";
492
+ readonly 'style.arrowhead.none-dashed': "无箭头虚线";
493
+ readonly 'style.arrowhead.both-dashed': "双箭头虚线";
494
+ readonly 'style.uml': "UML";
405
495
  readonly 'style.arrowhead.inheritance': "继承";
406
496
  readonly 'style.arrowhead.composition': "组合";
407
497
  readonly 'style.arrowhead.aggregation': "聚合";
498
+ readonly 'style.arrowhead.dependency': "依赖";
499
+ readonly 'style.arrowhead.realization': "实现";
408
500
  readonly 'menu.title': "选择新图形";
409
501
  readonly 'menu.cancel': "点击空白处取消";
410
502
  readonly 'shape.rectangle': "矩形";
@@ -475,6 +567,43 @@ declare const dictionaries: {
475
567
  readonly 'tool.pentagon': "Pentagon";
476
568
  readonly 'tool.octagon': "Octagon";
477
569
  readonly 'tool.star': "Star";
570
+ readonly 'tool.cylinder': "Cylinder";
571
+ readonly 'tool.cloud': "Cloud";
572
+ readonly 'tool.heart': "Heart";
573
+ readonly 'tool.block-arrow-right': "Arrow right";
574
+ readonly 'tool.block-arrow-left': "Arrow left";
575
+ readonly 'tool.block-arrow-up': "Arrow up";
576
+ readonly 'tool.block-arrow-down': "Arrow down";
577
+ readonly 'tool.block-arrow-double': "Double arrow";
578
+ readonly 'tool.right-triangle': "Right triangle";
579
+ readonly 'tool.cross': "Cross";
580
+ readonly 'tool.speech-rect': "Speech bubble";
581
+ readonly 'tool.speech-round': "Round bubble";
582
+ readonly 'tool.cube': "Cube";
583
+ readonly 'tool.sector': "Sector";
584
+ readonly 'tool.delay': "Delay";
585
+ readonly 'tool.predefined-process': "Predefined process";
586
+ readonly 'tool.document': "Document";
587
+ readonly 'tool.stadium': "Stadium";
588
+ readonly 'tool.class-catalog': "Category";
589
+ readonly 'class.plain': "Class";
590
+ readonly 'flow.process': "Process";
591
+ readonly 'flow.step': "Step";
592
+ readonly 'flow.startEnd': "Start / End";
593
+ readonly 'flow.decision': "Decision";
594
+ readonly 'flow.data': "Data";
595
+ readonly 'flow.manual': "Manual operation";
596
+ readonly 'flow.preparation': "Preparation";
597
+ readonly 'flow.database': "Database";
598
+ readonly 'flow.delay': "Delay";
599
+ readonly 'shapeGroup.basic': "Basic";
600
+ readonly 'shapeGroup.flowchart': "Flowchart";
601
+ readonly 'shapeGroup.other': "Other";
602
+ readonly 'shapeGroup.uml': "Class diagram";
603
+ readonly 'shapeMenu.hint': "Hover to see name";
604
+ readonly 'tool.chevron': "Chevron";
605
+ readonly 'tool.brace-left': "Left brace";
606
+ readonly 'tool.brace-right': "Right brace";
478
607
  readonly 'tool.uml-class': "UML class";
479
608
  readonly 'tool.uml-interface': "UML interface";
480
609
  readonly 'tool.line': "Line";
@@ -524,9 +653,14 @@ declare const dictionaries: {
524
653
  readonly 'style.arrowhead.end': "End";
525
654
  readonly 'style.arrowhead.start': "Start";
526
655
  readonly 'style.arrowhead.both': "Both";
656
+ readonly 'style.arrowhead.none-dashed': "Dashed";
657
+ readonly 'style.arrowhead.both-dashed': "Dashed both";
658
+ readonly 'style.uml': "UML";
527
659
  readonly 'style.arrowhead.inheritance': "Inheritance";
528
660
  readonly 'style.arrowhead.composition': "Composition";
529
661
  readonly 'style.arrowhead.aggregation': "Aggregation";
662
+ readonly 'style.arrowhead.dependency': "Dependency";
663
+ readonly 'style.arrowhead.realization': "Realization";
530
664
  readonly 'menu.title': "Create shape";
531
665
  readonly 'menu.cancel': "Click empty space to cancel";
532
666
  readonly 'shape.rectangle': "Rectangle";
@@ -673,6 +807,11 @@ declare class Editor {
673
807
  private notifyScheduled;
674
808
  /** 是否启用 localStorage 持久化 */
675
809
  private persist;
810
+ /**
811
+ * 新建箭头的默认样式（工具栏「箭头」下拉里选的）。
812
+ * 只影响之后创建的箭头；改选中箭头的样式走 updateArrowStyle。
813
+ */
814
+ private arrowStyle;
676
815
  constructor(canvas: HTMLCanvasElement, options?: EditorOptions);
677
816
  private setupEventListeners;
678
817
  private handlePointerDown;
@@ -736,6 +875,15 @@ declare class Editor {
736
875
  updateConnectionType(connectionType: ConnectionType): void;
737
876
  /** 批量更新选中箭头的箭头类型 */
738
877
  updateArrowHeadType(arrowHead: ArrowHeadType): void;
878
+ /**
879
+ * 批量更新选中箭头的完整样式（连线类型 / 头部 / 是否虚线），只写一条历史记录。
880
+ * 样式面板与工具栏下拉都走这里。
881
+ */
882
+ updateArrowStyle(updates: Partial<ArrowStyle>): void;
883
+ /** 读取「新建箭头」的默认样式（工具栏下拉用） */
884
+ getArrowStyle(): ArrowStyle;
885
+ /** 修改「新建箭头」的默认样式：只影响之后画出来的箭头 */
886
+ setArrowStyle(updates: Partial<ArrowStyle>): void;
739
887
  /** 批量更新选中箭头的虚线样式 */
740
888
  updateArrowDashed(dashed: boolean): void;
741
889
  /** 更新 UML 类图的类名、属性、方法，自动重算尺寸 */
@@ -841,6 +989,9 @@ declare class Editor {
841
989
  } | null;
842
990
  setActiveTool(tool: ToolType): void;
843
991
  getActiveTool(): ToolType;
992
+ /** 设置荧光笔颜色（基础色，绘制时自动叠加固定透明度） */
993
+ setHighlighterColor(color: string): void;
994
+ getHighlighterColor(): string;
844
995
  getShapes(): Shape[];
845
996
  /** 导出当前数据（图形 + 相机），供外部保存/对接 */
846
997
  getData(): EditorData;
@@ -981,6 +1132,8 @@ declare class Renderer {
981
1132
  private applyStyle;
982
1133
  private drawRectangle;
983
1134
  private drawRoundedRectangle;
1135
+ /** 全圆角矩形（胶囊 / 体育场形）：圆角半径恒为短边的一半 */
1136
+ private drawStadium;
984
1137
  private drawCircle;
985
1138
  private drawEllipse;
986
1139
  private drawDiamond;
@@ -991,6 +1144,13 @@ declare class Renderer {
991
1144
  private drawPentagon;
992
1145
  private drawOctagon;
993
1146
  private drawStar;
1147
+ /**
1148
+ * 用「归一化路径」绘制图形（圆柱体 / 云 / 心形 / 箭头 / 对话框 / 流程图符号 / 大括号…）。
1149
+ * 路径定义见 `shapePaths.ts`，与 SVG 导出共用，保证两端形状一致。
1150
+ */
1151
+ private drawPathShape;
1152
+ /** 把归一化路径命令展开到 canvas 当前路径 */
1153
+ private tracePath;
994
1154
  private drawUmlClass;
995
1155
  /**
996
1156
  * UML 接口：标题显示为 `<<${className}>>`，仅方法段，无属性段，只有一条分隔线。
@@ -1182,6 +1342,8 @@ interface ToolContext {
1182
1342
  highlightColor?: string;
1183
1343
  }): void;
1184
1344
  updateConnectionType(connectionType: ConnectionType): void;
1345
+ /** 新建箭头的默认样式（工具栏「箭头」下拉里选的） */
1346
+ getArrowStyle(): ArrowStyle;
1185
1347
  /** 光标语义命中：思维导图节点框或折叠标记内才命中（节点间空档不命中） */
1186
1348
  getMindMapCursorHitAtPoint(point: Vec2): {
1187
1349
  shapeId: string;
@@ -1364,6 +1526,8 @@ declare class LineTool extends Tool {
1364
1526
  }
1365
1527
 
1366
1528
  type FreehandMode = 'pen' | 'highlighter';
1529
+ /** 荧光笔默认颜色（黄色） */
1530
+ declare const DEFAULT_HIGHLIGHTER_COLOR = "#ffeb3b";
1367
1531
  /**
1368
1532
  * 自由绘制工具（画笔 / 荧光笔）。
1369
1533
  *
@@ -1380,7 +1544,14 @@ declare class FreehandTool extends Tool {
1380
1544
  private currentShapeId;
1381
1545
  private committed;
1382
1546
  private fadeTimer;
1547
+ /** 荧光笔基础色（实际绘制时叠加固定透明度） */
1548
+ private highlighterColor;
1383
1549
  constructor(context: ToolContext, mode: FreehandMode);
1550
+ /** 设置荧光笔颜色（仅 highlighter 模式生效） */
1551
+ setHighlighterColor(color: string): void;
1552
+ getHighlighterColor(): string;
1553
+ /** 当前模式新建笔迹要用的样式 */
1554
+ private buildStyle;
1384
1555
  onPointerDown(point: Vec2, _event: PointerEvent): void;
1385
1556
  /**
1386
1557
  * 由世界坐标点集计算飞书式「矩形区域」几何：
@@ -1400,8 +1571,10 @@ declare class ArrowTool extends Tool {
1400
1571
  type: "arrow";
1401
1572
  private isDrawing;
1402
1573
  private startPoint;
1574
+ /** 真正拖出距离后才创建图形，所以这里可能为 null */
1403
1575
  private currentShapeId;
1404
1576
  private startBindingInfo;
1577
+ private startBinding;
1405
1578
  onPointerDown(point: Vec2, _event: PointerEvent): void;
1406
1579
  onPointerMove(point: Vec2, _event: PointerEvent): void;
1407
1580
  onPointerUp(_point: Vec2, _event: PointerEvent): void;
@@ -1456,4 +1629,4 @@ declare function countMindMapNodes(root: MindMapNode): number;
1456
1629
  */
1457
1630
  declare function layoutMindMap(root: MindMapNode): MindMapLayoutResult;
1458
1631
 
1459
- export { type ArrowBinding, type ArrowHeadType, type ArrowShape, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };
1632
+ export { type ArrowBinding, type ArrowHeadType, type ArrowShape, type ArrowStyle, ArrowTool, Camera, type CameraState, type CircleShape, type ConnectionType, DEFAULT_HIGHLIGHTER_COLOR, type DiamondShape, type DrawShape, type DrawuiTheme, type DrawuiThemeSelection, Editor, type EditorData, type EditorOptions, type EditorState, type EllipseShape, type ExportFormat, type ExportOptions, type FreehandMode, FreehandTool, type GenerationContext, HandTool, type HexagonShape, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, THEME, type TextShape, type ToolType, type TrapezoidShape, type TriangleShape, UML_FONT_SIZE, UML_HEADER_HEIGHT, UML_LINE_HEIGHT, UML_MIN_WIDTH, UML_PADDING_X, UML_PADDING_Y, type UiEvent, type UmlAttribute, type UmlClassShape, type UmlInterfaceShape, type UmlMethod, type UmlVisibility, Vec, type Vec2 as Vec2Type, calcUmlClassSize, cloneMindMapNode, countMindMapNodes, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hexToRgba, layoutMindMap, mindMapNodeColor, mindMapNodeSize, renderSVGString, renderToCanvas, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t };