drawui-core 0.4.0 → 0.4.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.
- package/README.md +30 -0
- package/dist/index.cjs +23 -20
- package/dist/index.d.cts +387 -5
- package/dist/index.d.ts +387 -5
- package/dist/index.js +23 -20
- package/package.json +2 -2
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' | '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' | 'envelope' | 'checkbox' | 'sticky-note' | 'triangular-pyramid' | 'quadrangular-pyramid' | 'cuboid' | 'sphere' | 'ellipsoid' | 'pie' | 'hollow-pie' | 'uml-class' | 'uml-interface' | 'mind-map' | 'icon' | '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' | 'envelope' | 'checkbox' | 'sticky-note' | 'triangular-pyramid' | 'quadrangular-pyramid' | 'cuboid' | 'sphere' | 'ellipsoid' | 'pie' | 'hollow-pie' | 'uml-class' | 'uml-interface' | 'mind-map' | 'table' | 'icon' | 'line' | 'arrow' | 'text' | 'draw';
|
|
22
22
|
interface BaseShape {
|
|
23
23
|
id: string;
|
|
24
24
|
type: ShapeType;
|
|
@@ -159,7 +159,7 @@ interface PathShape extends BaseShape {
|
|
|
159
159
|
width: number;
|
|
160
160
|
height: number;
|
|
161
161
|
}
|
|
162
|
-
type UmlVisibility = '+' | '-' | '#' | '~';
|
|
162
|
+
type UmlVisibility = '+' | '-' | '#' | '~' | '';
|
|
163
163
|
interface UmlAttribute {
|
|
164
164
|
id: string;
|
|
165
165
|
visibility: UmlVisibility;
|
|
@@ -330,8 +330,38 @@ interface MindMapShape extends BaseShape {
|
|
|
330
330
|
height: number;
|
|
331
331
|
root: MindMapNode;
|
|
332
332
|
}
|
|
333
|
-
|
|
334
|
-
|
|
333
|
+
/**
|
|
334
|
+
* 表格单元格:合并模型见 `table.ts` —— 只有合并区域的**左上角锚点**携带
|
|
335
|
+
* `rowSpan/colSpan`,区域内其余格子是被覆盖格(数据保持空 `{text:''}`,
|
|
336
|
+
* 渲染/命中时跳过,点击映射回锚点)。
|
|
337
|
+
*/
|
|
338
|
+
interface TableCell {
|
|
339
|
+
text: string;
|
|
340
|
+
textColor?: string;
|
|
341
|
+
fontSize?: number;
|
|
342
|
+
bold?: boolean;
|
|
343
|
+
/** 单元格底色(缺省透明,透出表格 style.fillColor) */
|
|
344
|
+
fillColor?: string;
|
|
345
|
+
align?: 'left' | 'center' | 'right';
|
|
346
|
+
rowSpan?: number;
|
|
347
|
+
colSpan?: number;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* 表格:(x,y) 为中心 + width/height(与矩形一致),但宽高恒等于
|
|
351
|
+
* colWidths/rowHeights 之和(见 table.ts),行列结构由纯函数操作。
|
|
352
|
+
*/
|
|
353
|
+
interface TableShape extends BaseShape {
|
|
354
|
+
type: 'table';
|
|
355
|
+
/** 恒等于 colWidths / rowHeights 之和,写回时同步 */
|
|
356
|
+
width: number;
|
|
357
|
+
height: number;
|
|
358
|
+
colWidths: number[];
|
|
359
|
+
rowHeights: number[];
|
|
360
|
+
/** cells[row][col] */
|
|
361
|
+
cells: TableCell[][];
|
|
362
|
+
}
|
|
363
|
+
type Shape = RectangleShape | RoundedRectangleShape | CircleShape | EllipseShape | DiamondShape | TriangleShape | HexagonShape | ParallelogramShape | TrapezoidShape | PentagonShape | OctagonShape | StarShape | CylinderShape | CloudShape | HeartShape | BlockArrowShape | StadiumShape | StickyNoteShape | IconShape | PathShape | UmlClassShape | UmlInterfaceShape | LineShape | ArrowShape | TextShape | DrawShape | MindMapShape | TableShape;
|
|
364
|
+
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' | 'envelope' | 'checkbox' | 'sticky-note' | 'triangular-pyramid' | 'quadrangular-pyramid' | 'cuboid' | 'sphere' | 'ellipsoid' | 'pie' | 'hollow-pie' | 'uml-class' | 'uml-interface' | 'line' | 'arrow' | 'text' | 'draw' | 'pen' | 'highlighter' | 'eraser' | 'mind-map' | 'table' | 'icon';
|
|
335
365
|
interface CameraState {
|
|
336
366
|
x: number;
|
|
337
367
|
y: number;
|
|
@@ -638,6 +668,20 @@ declare const zhCN: {
|
|
|
638
668
|
readonly 'mindmap.expand': "展开";
|
|
639
669
|
readonly 'mindmap.close': "关闭编辑";
|
|
640
670
|
readonly 'mindmap.more': "更多设置";
|
|
671
|
+
readonly 'tool.table': "表格";
|
|
672
|
+
readonly 'toolbar.table': "表格";
|
|
673
|
+
readonly 'shape.table': "表格";
|
|
674
|
+
readonly 'table.insertRow': "插入行";
|
|
675
|
+
readonly 'table.deleteRow': "删除行";
|
|
676
|
+
readonly 'table.insertCol': "插入列";
|
|
677
|
+
readonly 'table.deleteCol': "删除列";
|
|
678
|
+
readonly 'table.merge': "合并单元格";
|
|
679
|
+
readonly 'table.split': "拆分单元格";
|
|
680
|
+
readonly 'table.insertRowAbove': "在上方插入行";
|
|
681
|
+
readonly 'table.insertRowBelow': "在下方插入行";
|
|
682
|
+
readonly 'table.insertColLeft': "在左侧插入列";
|
|
683
|
+
readonly 'table.insertColRight': "在右侧插入列";
|
|
684
|
+
readonly 'table.pickHint': "拖选行列数";
|
|
641
685
|
readonly 'toolbar.icon': "图标";
|
|
642
686
|
readonly 'icon.search': "搜索图标";
|
|
643
687
|
readonly 'icon.empty': "没有匹配的图标";
|
|
@@ -754,6 +798,8 @@ declare class Editor {
|
|
|
754
798
|
private mindMapEditingShapeId;
|
|
755
799
|
private mindMapSelectedNode;
|
|
756
800
|
private mindMapHoverNode;
|
|
801
|
+
private tableSelection;
|
|
802
|
+
private tableEditing;
|
|
757
803
|
private renderScheduled;
|
|
758
804
|
private pointerIsDown;
|
|
759
805
|
private notifyScheduled;
|
|
@@ -806,6 +852,15 @@ declare class Editor {
|
|
|
806
852
|
private screenToPage;
|
|
807
853
|
private addShape;
|
|
808
854
|
private updateShape;
|
|
855
|
+
/**
|
|
856
|
+
* 表格尺寸变化时保持「左上角」不动:行高变化向下伸缩、列宽变化向右伸缩,
|
|
857
|
+
* 避免整表在画布上向两边跳。返回新的中心坐标(已按旋转角换算)。
|
|
858
|
+
*/
|
|
859
|
+
private tableTopLeftAnchored;
|
|
860
|
+
/** 写回表格数据(cells/rowHeights/colWidths),并同步尺寸与中心(左上角不动) */
|
|
861
|
+
private writeTable;
|
|
862
|
+
/** 行高不够显示单元格文字时自动增高(只增不减) */
|
|
863
|
+
private autoGrowTableRows;
|
|
809
864
|
private updateBoundArrows;
|
|
810
865
|
private getBindingPosition;
|
|
811
866
|
private deleteShape;
|
|
@@ -969,6 +1024,107 @@ declare class Editor {
|
|
|
969
1024
|
deleteMindMapNode(shapeId: string, nodeId: string): void;
|
|
970
1025
|
/** 折叠/展开指定节点 */
|
|
971
1026
|
toggleMindMapCollapse(shapeId: string, nodeId: string): void;
|
|
1027
|
+
/** 获取选中的表格(恰好选中一个时) */
|
|
1028
|
+
getSelectedTable(): TableShape | null;
|
|
1029
|
+
private getTableById;
|
|
1030
|
+
/** 读取表格某格(只读引用,勿修改) */
|
|
1031
|
+
getTableCell(shapeId: string, row: number, col: number): TableCell | null;
|
|
1032
|
+
/** 页面坐标下的表格单元格命中(被覆盖格映射回锚点) */
|
|
1033
|
+
getTableAtPoint(point: Vec2): {
|
|
1034
|
+
shapeId: string;
|
|
1035
|
+
row: number;
|
|
1036
|
+
col: number;
|
|
1037
|
+
} | null;
|
|
1038
|
+
/** 屏幕坐标(画布左上角为原点)下的表格单元格命中 */
|
|
1039
|
+
getTableAtScreenPoint(screenPoint: Vec2): {
|
|
1040
|
+
shapeId: string;
|
|
1041
|
+
row: number;
|
|
1042
|
+
col: number;
|
|
1043
|
+
} | null;
|
|
1044
|
+
/**
|
|
1045
|
+
* 拖拽框选用:把页面坐标解析成某表格内的行列;**超出表格时 clamp 到边缘行列**
|
|
1046
|
+
* (拖到表格外 = 选中整行/整列)。指针不在该表格附近时也照样给出边缘格,不再返回 null。
|
|
1047
|
+
*/
|
|
1048
|
+
getTableCellAtPointClamped(shapeId: string, point: Vec2): {
|
|
1049
|
+
row: number;
|
|
1050
|
+
col: number;
|
|
1051
|
+
} | null;
|
|
1052
|
+
/** 指针是否落在表格左上角的「拖动把手」上(只有它能移动整表) */
|
|
1053
|
+
isTableMoveHandleHit(shapeId: string, point: Vec2): boolean;
|
|
1054
|
+
/** 表格某格(缺省整表)在屏幕上的矩形(左上角 + 尺寸),用于就地编辑定位 */
|
|
1055
|
+
getTableScreenRect(shapeId: string, row?: number, col?: number): {
|
|
1056
|
+
x: number;
|
|
1057
|
+
y: number;
|
|
1058
|
+
width: number;
|
|
1059
|
+
height: number;
|
|
1060
|
+
} | null;
|
|
1061
|
+
/** 当前单元格选区 */
|
|
1062
|
+
getTableSelection(): {
|
|
1063
|
+
shapeId: string;
|
|
1064
|
+
anchor: {
|
|
1065
|
+
row: number;
|
|
1066
|
+
col: number;
|
|
1067
|
+
};
|
|
1068
|
+
focus: {
|
|
1069
|
+
row: number;
|
|
1070
|
+
col: number;
|
|
1071
|
+
};
|
|
1072
|
+
} | null;
|
|
1073
|
+
/** 选中表格的一个单元格(extend=true 时从原锚点扩展选区到该格) */
|
|
1074
|
+
selectTableCell(shapeId: string, row: number, col: number, extend?: boolean): void;
|
|
1075
|
+
/** 当前正在编辑的单元格(null = 未在编辑) */
|
|
1076
|
+
getTableEditing(): {
|
|
1077
|
+
shapeId: string;
|
|
1078
|
+
row: number;
|
|
1079
|
+
col: number;
|
|
1080
|
+
} | null;
|
|
1081
|
+
/** 进入单元格编辑态(双击单元格触发) */
|
|
1082
|
+
beginTableEdit(shapeId: string, row: number, col: number): void;
|
|
1083
|
+
/** 退出单元格编辑态 */
|
|
1084
|
+
exitTableEdit(): void;
|
|
1085
|
+
/** 更新单元格内容/样式。commit=false 时只应用不写历史(就地编辑逐键调用)。 */
|
|
1086
|
+
updateTableCell(shapeId: string, row: number, col: number, patch: Partial<TableCell>, commit?: boolean): void;
|
|
1087
|
+
/** 往视口中心插入一张 rows×cols 的空表(工具栏「表格」面板用) */
|
|
1088
|
+
insertTable(rows?: number, cols?: number): string | undefined;
|
|
1089
|
+
/** 在指定行(缺省选区行)下方插入一行 */
|
|
1090
|
+
insertTableRow(shapeId: string, at?: number): void;
|
|
1091
|
+
/** 在指定列(缺省选区列)右侧插入一列 */
|
|
1092
|
+
insertTableColumn(shapeId: string, at?: number): void;
|
|
1093
|
+
/** 删除指定行(缺省选区行);仅剩一行时不删 */
|
|
1094
|
+
deleteTableRow(shapeId: string, at?: number): void;
|
|
1095
|
+
/** 删除指定列(缺省选区列);仅剩一列时不删 */
|
|
1096
|
+
deleteTableColumn(shapeId: string, at?: number): void;
|
|
1097
|
+
/**
|
|
1098
|
+
* 当前选区覆盖的行列范围(clamp 后);无选区或不属于该表时返回 null。
|
|
1099
|
+
* ⚠️ 结果会**扩张到完整包住所有相交的合并区**(对齐飞书:选区永远吸附整块),
|
|
1100
|
+
* 这样高亮、合并、拆分、删除行列看到的是同一个范围。
|
|
1101
|
+
*/
|
|
1102
|
+
private getTableSelRange;
|
|
1103
|
+
/**
|
|
1104
|
+
* 相对当前选区插入一行:above = 选区首行之上,below = 选区末行之下。
|
|
1105
|
+
* 插入后选区落到新行(沿用原列范围),便于连续向上/向下插入。
|
|
1106
|
+
*/
|
|
1107
|
+
insertTableRowRelative(shapeId: string, position: 'above' | 'below'): void;
|
|
1108
|
+
/** 相对当前选区插入一列:left = 选区首列之左,right = 选区末列之右。插入后选区落到新列 */
|
|
1109
|
+
insertTableColumnRelative(shapeId: string, position: 'left' | 'right'): void;
|
|
1110
|
+
/**
|
|
1111
|
+
* 删除选区覆盖的全部行(一次历史记录);至少保留一行,全选时不做任何事。
|
|
1112
|
+
* 删除后选区收敛到删除位置所在行(同列范围)。
|
|
1113
|
+
*/
|
|
1114
|
+
deleteTableRowsInSelection(shapeId: string): void;
|
|
1115
|
+
/** 删除选区覆盖的全部列(一次历史记录);至少保留一列 */
|
|
1116
|
+
deleteTableColsInSelection(shapeId: string): void;
|
|
1117
|
+
/** 行列删除后把选区/编辑格收敛到剩余范围内 */
|
|
1118
|
+
private clampTableSelectionAfterDelete;
|
|
1119
|
+
/** 合并当前选区(单格时无操作)。范围含已合并区时按扩张后的完整范围合并 */
|
|
1120
|
+
mergeTableCells(shapeId?: string): void;
|
|
1121
|
+
/**
|
|
1122
|
+
* 拆分当前选区里的**所有**合并区(飞书式:选中合并区的任意部分即可整体还原)。
|
|
1123
|
+
* 选区里没有合并区时无操作。
|
|
1124
|
+
*/
|
|
1125
|
+
splitTableCells(shapeId?: string): void;
|
|
1126
|
+
/** 拆分指定格所在的合并区域(保留旧入口:用于「就点这一格」的调用方) */
|
|
1127
|
+
splitTableCell(shapeId?: string): void;
|
|
972
1128
|
/** 给指定 UML 类追加一条属性 */
|
|
973
1129
|
addUmlAttribute(shapeId: string): void;
|
|
974
1130
|
/** 给指定 UML(类图或接口)追加一条方法 */
|
|
@@ -1018,6 +1174,18 @@ declare class Editor {
|
|
|
1018
1174
|
getCamera(): Camera;
|
|
1019
1175
|
/** 指针是否处于按下状态(拖拽/画线/框选中) */
|
|
1020
1176
|
isPointerDown(): boolean;
|
|
1177
|
+
/**
|
|
1178
|
+
* 该图形画在画布上的文字**是否没显示全**(被省略号截断)。
|
|
1179
|
+
* UI 用它在「文字显示不全」时才弹出全文提示块 —— 显示得下就不打扰用户。
|
|
1180
|
+
*/
|
|
1181
|
+
isShapeTextTruncated(shapeId: string): boolean;
|
|
1182
|
+
/** UML 的某一行文字是否没显示全(提示块显示条件;字号/加粗按该行实际绘制用的值取) */
|
|
1183
|
+
isUmlRowTextTruncated(row: {
|
|
1184
|
+
shape: UmlClassShape | UmlInterfaceShape;
|
|
1185
|
+
section: 'className' | 'attribute' | 'method';
|
|
1186
|
+
rowIndex: number;
|
|
1187
|
+
text: string;
|
|
1188
|
+
}): boolean;
|
|
1021
1189
|
/** 当前画布内容的包围盒(世界坐标,含留白),导出时用于确定画布尺寸与视口 */
|
|
1022
1190
|
getContentBounds(padding?: number): {
|
|
1023
1191
|
x: number;
|
|
@@ -1203,6 +1371,22 @@ declare class Renderer {
|
|
|
1203
1371
|
private showGrid;
|
|
1204
1372
|
/** 文本排版缓存:避免每帧对每个字符做 measureText */
|
|
1205
1373
|
private textLayoutCache;
|
|
1374
|
+
/** 当前表格单元格选区(由 Editor 每帧写入),用于在画布上画选区高亮 */
|
|
1375
|
+
private tableSelection;
|
|
1376
|
+
/** 写入表格单元格选区(null = 无) */
|
|
1377
|
+
setTableSelection(sel: {
|
|
1378
|
+
shapeId: string;
|
|
1379
|
+
anchor: {
|
|
1380
|
+
row: number;
|
|
1381
|
+
col: number;
|
|
1382
|
+
};
|
|
1383
|
+
focus: {
|
|
1384
|
+
row: number;
|
|
1385
|
+
col: number;
|
|
1386
|
+
};
|
|
1387
|
+
} | null): void;
|
|
1388
|
+
/** 当前悬停的图形 id(由每帧 render 写入),仅用于表格拖动把手等提示性绘制 */
|
|
1389
|
+
private hoverShapeId;
|
|
1206
1390
|
private static readonly TEXT_CACHE_LIMIT;
|
|
1207
1391
|
constructor(canvas: HTMLCanvasElement, dpr?: number);
|
|
1208
1392
|
resize(width: number, height: number): void;
|
|
@@ -1238,6 +1422,8 @@ declare class Renderer {
|
|
|
1238
1422
|
*/
|
|
1239
1423
|
private drawGrid;
|
|
1240
1424
|
private drawShape;
|
|
1425
|
+
/** 表格左上角的六点拖动把手(尺寸恒定屏幕像素) */
|
|
1426
|
+
private drawTableMoveHandle;
|
|
1241
1427
|
private applyStyle;
|
|
1242
1428
|
private drawRectangle;
|
|
1243
1429
|
private drawRoundedRectangle;
|
|
@@ -1270,6 +1456,14 @@ declare class Renderer {
|
|
|
1270
1456
|
*/
|
|
1271
1457
|
private drawIcon;
|
|
1272
1458
|
private drawUmlClass;
|
|
1459
|
+
/**
|
|
1460
|
+
* 表格:整表背景 + 单元格底色 + 内部网格线(被合并区域跨过的边界段断开)
|
|
1461
|
+
* + 外边框(跟随图形样式)+ 单元格文字(超出省略)。
|
|
1462
|
+
*/
|
|
1463
|
+
private drawTable;
|
|
1464
|
+
/** 画一条带缺口的网格线(gaps 为沿线区间,区间内不画) */
|
|
1465
|
+
private drawSegmentsWithGaps;
|
|
1466
|
+
private strokeGridSegment;
|
|
1273
1467
|
/**
|
|
1274
1468
|
* UML 接口:标题显示为 `<<${className}>>`,仅方法段,无属性段,只有一条分隔线。
|
|
1275
1469
|
*/
|
|
@@ -1389,12 +1583,23 @@ declare class Renderer {
|
|
|
1389
1583
|
/**
|
|
1390
1584
|
* 获取文本的显示行(换行 + 截断),结果按 shape/文本/尺寸缓存,
|
|
1391
1585
|
* 避免每帧渲染都对文本逐字符 measureText。
|
|
1586
|
+
* cacheKeyExtra:同一图形内不同字体(如表格单元格加粗/字号)要分开缓存时传入。
|
|
1392
1587
|
*/
|
|
1393
1588
|
private getDisplayLines;
|
|
1394
1589
|
private drawShapeText;
|
|
1395
1590
|
private getTextBounds;
|
|
1396
1591
|
private wrapLine;
|
|
1397
1592
|
private truncateLine;
|
|
1593
|
+
/**
|
|
1594
|
+
* 画在画布上的文字是否被截断(有内容没显示全)。
|
|
1595
|
+
* 与 drawShapeText / drawText 用**同一套** bounds 与换行规则,所以判定结果
|
|
1596
|
+
* 和用户看到的一致:UI 上用它在「文字显示不全」时才弹出全文提示。
|
|
1597
|
+
*/
|
|
1598
|
+
isShapeTextTruncated(shape: Shape): boolean;
|
|
1599
|
+
/** 换行后的行数是否超过可见行数(超过 = 画的时候会截断并加省略号) */
|
|
1600
|
+
private isTextTruncated;
|
|
1601
|
+
/** UML 的某一行是否被省略号截断(与 drawUmlClass / drawUmlInterface 的 ellipsize 同规则) */
|
|
1602
|
+
isUmlRowTextTruncated(shape: Shape, text: string, fontSize: number, bold?: boolean): boolean;
|
|
1398
1603
|
/** 连接点句柄 → 外法向(页面坐标单位向量;规则见 docking.ts) */
|
|
1399
1604
|
private static readonly HANDLE_NORMALS;
|
|
1400
1605
|
/**
|
|
@@ -1656,6 +1861,8 @@ interface ToolContext {
|
|
|
1656
1861
|
} | null;
|
|
1657
1862
|
/** 选中思维导图节点(不进入编辑态) */
|
|
1658
1863
|
selectMindMapNode(shapeId: string, nodeId: string): void;
|
|
1864
|
+
/** 选中表格单元格(extend = 从原锚点扩展)—— 表格内拖拽框选走这里 */
|
|
1865
|
+
selectTableCell(shapeId: string, row: number, col: number, extend?: boolean): void;
|
|
1659
1866
|
}
|
|
1660
1867
|
declare abstract class Tool {
|
|
1661
1868
|
abstract type: ToolType;
|
|
@@ -1685,6 +1892,8 @@ declare abstract class Tool {
|
|
|
1685
1892
|
declare class SelectTool extends Tool {
|
|
1686
1893
|
type: ToolType;
|
|
1687
1894
|
private state;
|
|
1895
|
+
/** 正在框选的表格 id(表格内拖拽框选单元格,拖到表外自动扩成整行/整列) */
|
|
1896
|
+
private cellSelectShapeId;
|
|
1688
1897
|
private translatingState;
|
|
1689
1898
|
private resizingState;
|
|
1690
1899
|
private generatingState;
|
|
@@ -1715,6 +1924,14 @@ declare class SelectTool extends Tool {
|
|
|
1715
1924
|
/** 把生成点位打包成创建上下文(from 为源点,to 为目标落点) */
|
|
1716
1925
|
private genContext;
|
|
1717
1926
|
onPointerDown(point: Vec2, event: PointerEvent): void;
|
|
1927
|
+
/**
|
|
1928
|
+
* 命中「表格左上角拖动把手」的表格。把手画在表格包围盒之外、普通 hitTest 命中不到,
|
|
1929
|
+
* 所以这里单独判定;落点上若有别的图形则不抢(避免盖住别人的点击)。
|
|
1930
|
+
*/
|
|
1931
|
+
private findTableMoveHandleAt;
|
|
1932
|
+
/** 记录「移动选中图形」的起始状态(按住拖动把手/图形本体都用这一份) */
|
|
1933
|
+
private beginTranslating;
|
|
1934
|
+
private captureTranslatingStart;
|
|
1718
1935
|
onPointerMove(point: Vec2, event: PointerEvent): void;
|
|
1719
1936
|
onPointerUp(point: Vec2, _event: PointerEvent): void;
|
|
1720
1937
|
/**
|
|
@@ -2046,4 +2263,169 @@ declare function countMindMapNodes(root: MindMapNode): number;
|
|
|
2046
2263
|
*/
|
|
2047
2264
|
declare function layoutMindMap(root: MindMapNode): MindMapLayoutResult;
|
|
2048
2265
|
|
|
2049
|
-
|
|
2266
|
+
/**
|
|
2267
|
+
* 表格的纯数据操作(唯一实现):行列增删、合并/拆分、命中定位。
|
|
2268
|
+
*
|
|
2269
|
+
* 合并模型:**每个合并区域只有左上角格子是「锚点」**,锚点带 `rowSpan/colSpan`;
|
|
2270
|
+
* 区域内其余格子是被覆盖格(渲染/命中时跳过,点击时映射回锚点)。
|
|
2271
|
+
* 所有操作都返回新的 cells/rowHeights 数组(不可变),由 Editor 负责写回与历史。
|
|
2272
|
+
*/
|
|
2273
|
+
declare const TABLE_FONT_SIZE = 14;
|
|
2274
|
+
/** 单元格文字与边框的内边距 */
|
|
2275
|
+
declare const TABLE_CELL_PADDING_X = 10;
|
|
2276
|
+
/** 单元格文字与上下边框的内边距(多行时用) */
|
|
2277
|
+
declare const TABLE_CELL_PADDING_Y = 4;
|
|
2278
|
+
/** 单元格多行文字的行高倍率(与图形文字换行保持一致) */
|
|
2279
|
+
declare const TABLE_LINE_HEIGHT_RATIO = 1.3;
|
|
2280
|
+
/** 行高随内容自动增高的上限行数(再多就靠裁剪+省略号) */
|
|
2281
|
+
declare const TABLE_MAX_AUTO_LINES = 10;
|
|
2282
|
+
declare const TABLE_MIN_COL_WIDTH = 40;
|
|
2283
|
+
declare const TABLE_MIN_ROW_HEIGHT = 24;
|
|
2284
|
+
declare const TABLE_DEFAULT_COL_WIDTH = 140;
|
|
2285
|
+
declare const TABLE_DEFAULT_ROW_HEIGHT = 36;
|
|
2286
|
+
/** 默认首行(表头)底色与网格线颜色 */
|
|
2287
|
+
declare const TABLE_HEADER_FILL = "#f1f3f5";
|
|
2288
|
+
/** 把手尺寸(屏幕像素,需除以 zoom 换算成本地尺寸):竖排的六点抓手 */
|
|
2289
|
+
declare const TABLE_MOVE_HANDLE_WIDTH = 18;
|
|
2290
|
+
declare const TABLE_MOVE_HANDLE_HEIGHT = 22;
|
|
2291
|
+
/** 把手与表格左边框的间距(屏幕像素)。
|
|
2292
|
+
* ⚠️ 必须贴在表格**左侧外侧、顶部对齐**:
|
|
2293
|
+
* - 画在表格上方会被「单元格悬浮工具条」盖住(它正好在表格上方那一带);
|
|
2294
|
+
* - 画在表格内侧会压住单元格第一行的文字。 */
|
|
2295
|
+
declare const TABLE_MOVE_HANDLE_GAP = 4;
|
|
2296
|
+
/** 页面坐标 → 表格本地坐标(原点 = 表格左上角;已抵消旋转) */
|
|
2297
|
+
declare function tableLocalPoint(t: TableShape, point: Vec2): Vec2;
|
|
2298
|
+
/** 本地坐标 → 页面坐标(tableLocalPoint 的逆运算) */
|
|
2299
|
+
declare function tablePagePoint(t: TableShape, local: Vec2): Vec2;
|
|
2300
|
+
/** 拖动把手的本地矩形(贴表格左边框外侧、顶部对齐,尺寸恒为屏幕像素) */
|
|
2301
|
+
declare function tableMoveHandleLocalRect(t: TableShape, zoom: number): {
|
|
2302
|
+
x: number;
|
|
2303
|
+
y: number;
|
|
2304
|
+
width: number;
|
|
2305
|
+
height: number;
|
|
2306
|
+
};
|
|
2307
|
+
/** 指针是否落在拖动把手上(point 为页面坐标;tol 为额外容差,屏幕像素) */
|
|
2308
|
+
declare function hitTableMoveHandle(t: TableShape, point: Vec2, zoom: number, tol?: number): boolean;
|
|
2309
|
+
/** 指针是否落在表格内部(表格内拖拽 = 框选单元格,不移动整表) */
|
|
2310
|
+
declare function hitTableBody(t: TableShape, point: Vec2, tol?: number): boolean;
|
|
2311
|
+
/**
|
|
2312
|
+
* 本地坐标 → 表格行列;**超出表格时 clamp 到边缘行列**(拖到表外 = 选中整行/整列)。
|
|
2313
|
+
* 本地坐标恰好落在边界线时归到右侧/下方的格子。
|
|
2314
|
+
*/
|
|
2315
|
+
declare function tableCellAtLocalClamped(t: TableShape, local: Vec2): {
|
|
2316
|
+
row: number;
|
|
2317
|
+
col: number;
|
|
2318
|
+
};
|
|
2319
|
+
/** 选区(anchor→focus)在本地坐标下的合并矩形(用于画选区高亮) */
|
|
2320
|
+
declare function tableRangeLocalRect(t: TableShape, r1: number, c1: number, r2: number, c2: number): {
|
|
2321
|
+
x: number;
|
|
2322
|
+
y: number;
|
|
2323
|
+
width: number;
|
|
2324
|
+
height: number;
|
|
2325
|
+
};
|
|
2326
|
+
declare function tableTotalWidth(colWidths: number[]): number;
|
|
2327
|
+
declare function tableTotalHeight(rowHeights: number[]): number;
|
|
2328
|
+
/**
|
|
2329
|
+
* 单元格内多行文字第一行的「基线中心」相对单元格顶部的偏移(画布/导出共用,保证一致)。
|
|
2330
|
+
* - 文字整体放得下:垂直居中;
|
|
2331
|
+
* - 放不下(行数超出可视行数被截断):顶部对齐并留出 TABLE_CELL_PADDING_Y 内边距,
|
|
2332
|
+
* 这样读者能看到文字开头而不是中间被裁的片段。
|
|
2333
|
+
*/
|
|
2334
|
+
declare function tableCellTextStartOffset(lineCount: number, lineHeight: number, cellHeight: number): number;
|
|
2335
|
+
/** 建一张空表;header=true 时首行为表头(加粗 + 浅灰底) */
|
|
2336
|
+
declare function createTableCells(rows: number, cols: number, header?: boolean): TableCell[][];
|
|
2337
|
+
/**
|
|
2338
|
+
* 某格文字在给定宽度下需要几行(逐字符贪心折行 + 显式 \n),
|
|
2339
|
+
* 与 Renderer.getDisplayLines / export.wrapText 的换行规则一致。
|
|
2340
|
+
*/
|
|
2341
|
+
declare function tableCellLineCount(text: string, fontSize: number, bold: boolean, maxWidth: number): number;
|
|
2342
|
+
/**
|
|
2343
|
+
* 按内容把行高撑到够显示(只增不减,上限 TABLE_MAX_AUTO_LINES 行)。
|
|
2344
|
+
* 无需变化时返回 null;否则返回新的 rowHeights。
|
|
2345
|
+
* 合并单元格按其跨越行的总高度判断,缺口补在跨区最后一行。
|
|
2346
|
+
*/
|
|
2347
|
+
declare function tableGrowRowHeights(shape: TableShape): number[] | null;
|
|
2348
|
+
declare function cloneTableCells(cells: TableCell[][]): TableCell[][];
|
|
2349
|
+
declare function cloneTable(t: TableShape): TableShape;
|
|
2350
|
+
/** 覆盖矩阵:covered[r][c]=true 表示该格被某个合并锚点覆盖(不渲染/不命中) */
|
|
2351
|
+
declare function tableCoveredMap(cells: TableCell[][]): boolean[][];
|
|
2352
|
+
/** 先拆掉与目标矩形相交的所有已有合并区域,再合并成一个大格 */
|
|
2353
|
+
declare function tableMerge(cells: TableCell[][], r1: number, c1: number, r2: number, c2: number): TableCell[][];
|
|
2354
|
+
/** 拆分某格所在的合并区域(无合并时原样返回) */
|
|
2355
|
+
declare function tableSplit(cells: TableCell[][], r: number, c: number): TableCell[][];
|
|
2356
|
+
/** 若 (r,c) 属于某个合并区(含被覆盖格),返回该合并区的锚点行列;否则返回自身 */
|
|
2357
|
+
declare function tableAnchorAt(t: TableShape, r: number, c: number): {
|
|
2358
|
+
row: number;
|
|
2359
|
+
col: number;
|
|
2360
|
+
};
|
|
2361
|
+
/**
|
|
2362
|
+
* 把选区扩张到「完整包住所有相交的合并区」(飞书式:选区永远吸附到整块)。
|
|
2363
|
+
* 迭代到稳定,因为扩张后可能又碰到新的合并区。
|
|
2364
|
+
*/
|
|
2365
|
+
declare function tableExpandRangeToMerges(t: TableShape, r1: number, c1: number, r2: number, c2: number): {
|
|
2366
|
+
r1: number;
|
|
2367
|
+
c1: number;
|
|
2368
|
+
r2: number;
|
|
2369
|
+
c2: number;
|
|
2370
|
+
};
|
|
2371
|
+
/** 选区里是否含合并区(「拆分单元格」按钮的启用条件) */
|
|
2372
|
+
declare function tableRangeHasMerge(t: TableShape, r1: number, c1: number, r2: number, c2: number): boolean;
|
|
2373
|
+
/** 拆分选区里**所有**合并区(无合并时返回原 cells 引用) */
|
|
2374
|
+
declare function tableSplitRange(t: TableShape, r1: number, c1: number, r2: number, c2: number): TableCell[][];
|
|
2375
|
+
/**
|
|
2376
|
+
* 在 at 行之前插入一个空行;穿过该行的合并区域自动加一行跨度。
|
|
2377
|
+
* 新行的样式与行高沿用相邻行(上邻行;若上邻行是表头行则改用其下一行,
|
|
2378
|
+
* 避免在表头下方插入时把表头样式复制成两行)。
|
|
2379
|
+
*/
|
|
2380
|
+
declare function tableInsertRow(cells: TableCell[][], rowHeights: number[], at: number): {
|
|
2381
|
+
cells: TableCell[][];
|
|
2382
|
+
rowHeights: number[];
|
|
2383
|
+
};
|
|
2384
|
+
/**
|
|
2385
|
+
* 在 at 列之前插入一个空列;穿过该列的合并区域自动加一列跨度。
|
|
2386
|
+
* 新列的样式与列宽沿用左邻列(在首列前插入则用原首列)。
|
|
2387
|
+
*/
|
|
2388
|
+
declare function tableInsertColumn(cells: TableCell[][], colWidths: number[], at: number): {
|
|
2389
|
+
cells: TableCell[][];
|
|
2390
|
+
colWidths: number[];
|
|
2391
|
+
};
|
|
2392
|
+
/** 删除第 at 行(仅剩一行时返回 null 表示不可删);合并区域自动收缩/换锚点 */
|
|
2393
|
+
declare function tableDeleteRow(cells: TableCell[][], rowHeights: number[], at: number): {
|
|
2394
|
+
cells: TableCell[][];
|
|
2395
|
+
rowHeights: number[];
|
|
2396
|
+
} | null;
|
|
2397
|
+
/** 删除第 at 列(仅剩一列时返回 null 表示不可删);合并区域自动收缩/换锚点 */
|
|
2398
|
+
declare function tableDeleteColumn(cells: TableCell[][], colWidths: number[], at: number): {
|
|
2399
|
+
cells: TableCell[][];
|
|
2400
|
+
colWidths: number[];
|
|
2401
|
+
} | null;
|
|
2402
|
+
/** 表格内某格(含合并跨度)相对表格左上角的矩形 */
|
|
2403
|
+
declare function tableCellLocalRect(t: TableShape, row: number, col: number): {
|
|
2404
|
+
ox: number;
|
|
2405
|
+
oy: number;
|
|
2406
|
+
width: number;
|
|
2407
|
+
height: number;
|
|
2408
|
+
};
|
|
2409
|
+
/**
|
|
2410
|
+
* 表格内命中:返回该点的 (row, col)。
|
|
2411
|
+
* 点落在合并区域的被覆盖格上时映射回锚点;不在表格内返回 null。
|
|
2412
|
+
* lx/ly 为相对表格左上角的坐标。
|
|
2413
|
+
*/
|
|
2414
|
+
declare function tableRowAtPoint(t: TableShape, lx: number, ly: number): {
|
|
2415
|
+
row: number;
|
|
2416
|
+
col: number;
|
|
2417
|
+
} | null;
|
|
2418
|
+
|
|
2419
|
+
/**
|
|
2420
|
+
* UML 行文字的唯一来源(画布 / SVG 导出 / 尺寸计算 / 就地基共用)。
|
|
2421
|
+
*
|
|
2422
|
+
* 约定:**预设值是要给的**(新建的类/接口自带 `+ field: string`、`+ method(param): void`),
|
|
2423
|
+
* 但整行就是一段普通文字,用户可以像改 input 一样把它删光(连 `+` 一起删)。
|
|
2424
|
+
* 删空的行在画布上什么都不画(`''`),不会自己长回预设文字。
|
|
2425
|
+
*/
|
|
2426
|
+
/** 属性行:`+ name: type`;可见性被删掉就只剩 `name: type`;整行删空返回 '' */
|
|
2427
|
+
declare function umlAttrRowText(a: UmlAttribute): string;
|
|
2428
|
+
/** 方法行:`+ name(params): returnType`;同上 */
|
|
2429
|
+
declare function umlMethodRowText(m: UmlMethod): string;
|
|
2430
|
+
|
|
2431
|
+
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, ICONS, ICON_CATEGORIES, ICON_CATEGORY_INK, ICON_DEFAULT_INK, ICON_DEFAULT_SIZE, ICON_GRID, type IconCategoryId, type IconDef, type IconLayer, type IconShape, LANGUAGES, type Language, type LineShape, LineTool, MINDMAP_COLORS, MINDMAP_FONT_SIZE, MINDMAP_MAX_WIDTH, MINDMAP_MIN_WIDTH, MINDMAP_NODE_HEIGHT, MIN_HANDLE_SEGMENT, MIN_JOG, Mat2d, type MessageKey, type MindMapLayoutResult, type MindMapNode, type MindMapNodePos, type MindMapShape, type OctagonShape, type ParallelogramShape, type PentagonShape, type Rect, type RectangleShape, Renderer, type RoundedRectangleShape, STICKY_FOLD_RATIO, STICKY_NOTE_COLORS, STICKY_NOTE_DEFAULT_COLOR, STICKY_TEXT_SCALE, type SegmentHandle, SelectTool, type Shape, type ShapeStyle, ShapeTool, type ShapeType, type SnapGuide, type StarShape, type StickyNoteShape, TABLE_CELL_PADDING_X, TABLE_CELL_PADDING_Y, TABLE_DEFAULT_COL_WIDTH, TABLE_DEFAULT_ROW_HEIGHT, TABLE_FONT_SIZE, TABLE_HEADER_FILL, TABLE_LINE_HEIGHT_RATIO, TABLE_MAX_AUTO_LINES, TABLE_MIN_COL_WIDTH, TABLE_MIN_ROW_HEIGHT, TABLE_MOVE_HANDLE_GAP, TABLE_MOVE_HANDLE_HEIGHT, TABLE_MOVE_HANDLE_WIDTH, THEME, type TableCell, type TableShape, 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, cloneTable, cloneTableCells, collapseRoute, connectorSegmentHandles, countMindMapNodes, createTableCells, downloadBlob, exportToBlob, findMindMapNode, getContentBounds, getIcon, getLanguage, getMindMapNodeDepth, getMindMapParent, getTheme, hasIcon, hexToRgba, hitTableBody, hitTableMoveHandle, iconInk, iconsByCategory, isStubCorner, layoutMindMap, mindMapNodeColor, mindMapNodeSize, offsetConnectorSegment, pickSegmentHandle, pointToSegmentDistance, pruneStubBends, renderSVGString, renderToCanvas, routeToUserPoints, sameRoute, searchIcons, setLanguage, setTheme, shadeColor, subscribeLanguage, subscribeTheme, t, tableAnchorAt, tableCellAtLocalClamped, tableCellLineCount, tableCellLocalRect, tableCellTextStartOffset, tableCoveredMap, tableDeleteColumn, tableDeleteRow, tableExpandRangeToMerges, tableGrowRowHeights, tableInsertColumn, tableInsertRow, tableLocalPoint, tableMerge, tableMoveHandleLocalRect, tablePagePoint, tableRangeHasMerge, tableRangeLocalRect, tableRowAtPoint, tableSplit, tableSplitRange, tableTotalHeight, tableTotalWidth, umlAttrRowText, umlMethodRowText };
|