aldehyde 0.2.494 → 0.2.495

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 (127) hide show
  1. package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
  2. package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
  3. package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
  4. package/lib/layout2/page.d.ts +2 -1
  5. package/lib/layout2/page.d.ts.map +1 -1
  6. package/lib/layout2/page.js +19 -8
  7. package/lib/layout2/page.js.map +1 -1
  8. package/lib/layout2/type/layout-type.d.ts +1 -0
  9. package/lib/layout2/type/layout-type.d.ts.map +1 -1
  10. package/lib/lowcode-components/base-table/index.less +61 -61
  11. package/lib/lowcode-components/base-text/index.less +19 -19
  12. package/lib/lowcode-components/data-number/index.less +10 -10
  13. package/lib/lowcode-components/date-time/index.less +4 -4
  14. package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
  15. package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  16. package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  17. package/lib/lowcode-components/text-scroller/index.less +28 -28
  18. package/lib/module/ltmpl-table.d.ts +7 -0
  19. package/lib/module/ltmpl-table.d.ts.map +1 -1
  20. package/lib/module/ltmpl-table.js +12 -16
  21. package/lib/module/ltmpl-table.js.map +1 -1
  22. package/lib/routable/dtmpl-route.d.ts.map +1 -1
  23. package/lib/routable/dtmpl-route.js +8 -2
  24. package/lib/routable/dtmpl-route.js.map +1 -1
  25. package/lib/routable/import-route.d.ts.map +1 -1
  26. package/lib/routable/import-route.js +9 -1
  27. package/lib/routable/import-route.js.map +1 -1
  28. package/lib/routable/ltmpl-route.d.ts.map +1 -1
  29. package/lib/routable/ltmpl-route.js +13 -6
  30. package/lib/routable/ltmpl-route.js.map +1 -1
  31. package/lib/routable/splitview-ltmpl-route.d.ts.map +1 -1
  32. package/lib/routable/splitview-ltmpl-route.js +11 -10
  33. package/lib/routable/splitview-ltmpl-route.js.map +1 -1
  34. package/lib/routable/ttmpl-route.d.ts.map +1 -1
  35. package/lib/routable/ttmpl-route.js +9 -2
  36. package/lib/routable/ttmpl-route.js.map +1 -1
  37. package/lib/table/act-table.d.ts +1 -0
  38. package/lib/table/act-table.d.ts.map +1 -1
  39. package/lib/table/act-table.js +31 -9
  40. package/lib/table/act-table.js.map +1 -1
  41. package/lib/table/page-chart.js +1 -1
  42. package/lib/table/page-chart.js.map +1 -1
  43. package/lib/table/row-table.d.ts +6 -0
  44. package/lib/table/row-table.d.ts.map +1 -1
  45. package/lib/table/row-table.js +21 -6
  46. package/lib/table/row-table.js.map +1 -1
  47. package/lib/tmpl/interface.d.ts +1 -0
  48. package/lib/tmpl/interface.d.ts.map +1 -1
  49. package/lib/tree/act-tree.d.ts +1 -0
  50. package/lib/tree/act-tree.d.ts.map +1 -1
  51. package/lib/tree/act-tree.js +6 -7
  52. package/lib/tree/act-tree.js.map +1 -1
  53. package/lib/tree/tree-utils.d.ts +1 -1
  54. package/lib/tree/tree-utils.d.ts.map +1 -1
  55. package/lib/tree/tree-utils.js +4 -4
  56. package/lib/tree/tree-utils.js.map +1 -1
  57. package/lib/units/index.d.ts +4 -0
  58. package/lib/units/index.d.ts.map +1 -1
  59. package/lib/units/index.js +10 -3
  60. package/lib/units/index.js.map +1 -1
  61. package/package.json +1 -1
  62. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +63 -63
  63. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +93 -93
  64. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
  65. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
  66. package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
  67. package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
  68. package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
  69. package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
  70. package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
  71. package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
  72. package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
  73. package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
  74. package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
  75. package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
  76. package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
  77. package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
  78. package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
  79. package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
  80. package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
  81. package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
  82. package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
  83. package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
  84. package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
  85. package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
  86. package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
  87. package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
  88. package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
  89. package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
  90. package/src/aldehyde/layout2/page.tsx +17 -9
  91. package/src/aldehyde/layout2/type/layout-type.ts +1 -0
  92. package/src/aldehyde/layout4/imgs/user.svg +26 -26
  93. package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
  94. package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
  95. package/src/aldehyde/lowcode-components/base-text/index.less +19 -19
  96. package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
  97. package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
  98. package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
  99. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
  100. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
  101. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
  102. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
  103. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
  104. package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +91 -91
  105. package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  106. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
  107. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
  108. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
  109. package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
  110. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  111. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
  112. package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
  113. package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
  114. package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
  115. package/src/aldehyde/module/ltmpl-table.tsx +14 -15
  116. package/src/aldehyde/routable/dtmpl-route.tsx +14 -8
  117. package/src/aldehyde/routable/import-route.tsx +12 -5
  118. package/src/aldehyde/routable/ltmpl-route.tsx +14 -9
  119. package/src/aldehyde/routable/splitview-ltmpl-route.tsx +11 -8
  120. package/src/aldehyde/routable/ttmpl-route.tsx +13 -8
  121. package/src/aldehyde/table/act-table.tsx +28 -9
  122. package/src/aldehyde/table/page-chart.tsx +1 -1
  123. package/src/aldehyde/table/row-table.tsx +29 -6
  124. package/src/aldehyde/tmpl/interface.tsx +1 -0
  125. package/src/aldehyde/tree/act-tree.tsx +8 -6
  126. package/src/aldehyde/tree/tree-utils.tsx +4 -4
  127. package/src/aldehyde/units/index.tsx +11 -3
@@ -1,81 +1,81 @@
1
- import Konva from 'konva';
2
- import { Render } from '../index';
3
- import { Handler } from '../types';
4
-
5
- // 文本创建操作
6
-
7
- export class TextHandlers implements Handler {
8
- static readonly NAME = 'TextHandlers';
9
- private render: Render;
10
- constructor(render: Render) {
11
- this.render = render;
12
- }
13
- // 获取鼠标位置,并处理为相对大小
14
- getStagePoint(attract = false) {
15
- const pos = this.render.stage.getPointerPosition();
16
- if (pos) {
17
- const stageState = this.render.getStageState();
18
- if (attract) {
19
- const { pos: transformerPos } = this.render.attractTool.attractPoint(pos);
20
- return {
21
- x: this.render.toStageValue(transformerPos.x - stageState.x),
22
- y: this.render.toStageValue(transformerPos.y - stageState.y)
23
- };
24
- } else {
25
- return {
26
- x: this.render.toStageValue(pos.x - stageState.x),
27
- y: this.render.toStageValue(pos.y - stageState.y)
28
- };
29
- }
30
- }
31
- return null;
32
- }
33
- group: Konva.Group | null = null;
34
- handlers = {
35
- stage: {
36
- mousedown: (e: Konva.KonvaEventObject<MouseEvent>) => {
37
- // 只有在 texting 模式且点击空白区域时才创建文本
38
- if (!this.render.texting) return;
39
- const target = e.target;
40
- // 检查是否点击在 stage 背景上(不是其他元素)
41
- const isBackground = target === this.render.stage ||
42
- (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
43
- if (!isBackground) return;
44
- try {
45
- // 清除当前选择
46
- this.render.selectionTool.selectingClear();
47
- this.render.linkTool.selectingClear();
48
- const point = this.getStagePoint();
49
- if (point) {
50
- this.group = this.render.importExportTool.addTextAsset(point);
51
- if (this.group) {
52
- // 创建成功后立即选中文本
53
- this.render.selectionTool.select([this.group]);
54
- }
55
- }
56
- } catch (err) {
57
- console.error('Failed to create text asset:', err);
58
- this.group = null;
59
- }
60
- },
61
- mouseup: () => { // 重置 texting 状态
62
- this.render.changeTexting(false);
63
- this.group = null;
64
- },
65
- click: (e: Konva.KonvaEventObject<MouseEvent>) => { // 点击空白区域时,如果有文本创建了一半,也取消
66
- if (!this.render.texting) return;
67
- const target = e.target;
68
- const isBackground = target === this.render.stage ||
69
- (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
70
- if (isBackground) {
71
- this.render.changeTexting(false);
72
- }
73
- }
74
- },
75
- transformer: {
76
- dblclick: () => {
77
- // 双击文本时显示编辑面板
78
- }
79
- }
80
- }
81
- }
1
+ import Konva from 'konva';
2
+ import { Render } from '../index';
3
+ import { Handler } from '../types';
4
+
5
+ // 文本创建操作
6
+
7
+ export class TextHandlers implements Handler {
8
+ static readonly NAME = 'TextHandlers';
9
+ private render: Render;
10
+ constructor(render: Render) {
11
+ this.render = render;
12
+ }
13
+ // 获取鼠标位置,并处理为相对大小
14
+ getStagePoint(attract = false) {
15
+ const pos = this.render.stage.getPointerPosition();
16
+ if (pos) {
17
+ const stageState = this.render.getStageState();
18
+ if (attract) {
19
+ const { pos: transformerPos } = this.render.attractTool.attractPoint(pos);
20
+ return {
21
+ x: this.render.toStageValue(transformerPos.x - stageState.x),
22
+ y: this.render.toStageValue(transformerPos.y - stageState.y)
23
+ };
24
+ } else {
25
+ return {
26
+ x: this.render.toStageValue(pos.x - stageState.x),
27
+ y: this.render.toStageValue(pos.y - stageState.y)
28
+ };
29
+ }
30
+ }
31
+ return null;
32
+ }
33
+ group: Konva.Group | null = null;
34
+ handlers = {
35
+ stage: {
36
+ mousedown: (e: Konva.KonvaEventObject<MouseEvent>) => {
37
+ // 只有在 texting 模式且点击空白区域时才创建文本
38
+ if (!this.render.texting) return;
39
+ const target = e.target;
40
+ // 检查是否点击在 stage 背景上(不是其他元素)
41
+ const isBackground = target === this.render.stage ||
42
+ (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
43
+ if (!isBackground) return;
44
+ try {
45
+ // 清除当前选择
46
+ this.render.selectionTool.selectingClear();
47
+ this.render.linkTool.selectingClear();
48
+ const point = this.getStagePoint();
49
+ if (point) {
50
+ this.group = this.render.importExportTool.addTextAsset(point);
51
+ if (this.group) {
52
+ // 创建成功后立即选中文本
53
+ this.render.selectionTool.select([this.group]);
54
+ }
55
+ }
56
+ } catch (err) {
57
+ console.error('Failed to create text asset:', err);
58
+ this.group = null;
59
+ }
60
+ },
61
+ mouseup: () => { // 重置 texting 状态
62
+ this.render.changeTexting(false);
63
+ this.group = null;
64
+ },
65
+ click: (e: Konva.KonvaEventObject<MouseEvent>) => { // 点击空白区域时,如果有文本创建了一半,也取消
66
+ if (!this.render.texting) return;
67
+ const target = e.target;
68
+ const isBackground = target === this.render.stage ||
69
+ (target.attrs && target.attrs.name && target.attrs.name.includes('background'));
70
+ if (isBackground) {
71
+ this.render.changeTexting(false);
72
+ }
73
+ }
74
+ },
75
+ transformer: {
76
+ dblclick: () => {
77
+ // 双击文本时显示编辑面板
78
+ }
79
+ }
80
+ }
81
+ }
@@ -1,59 +1,59 @@
1
- import Konva from 'konva';
2
- import { Render } from '../index';
3
- import { Handler } from '../types';
4
- import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
5
-
6
- // 缩放
7
-
8
- export class ZoomHandlers implements Handler {
9
- static readonly NAME = 'ZoomHandlers';
10
- private render: Render;
11
- constructor(render: Render) {
12
- this.render = render;
13
- }
14
- scaleBy = 0.1; // zoom 速度
15
- // zoom 范围
16
- scaleMin = 0.2;
17
- scaleMax = 5;
18
-
19
- handlers = {
20
- stage: {
21
- wheel: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['wheel']>) => {
22
- const { scale: oldScale } = this.render.getStageState();
23
- const isPinchToZoom = e.evt.ctrlKey;
24
- const newScale = isPinchToZoom ? oldScale + (e.evt.deltaY < 0 ? this.scaleBy : -this.scaleBy) : oldScale;
25
- const finalScale = Math.max(this.scaleMin, Math.min(this.scaleMax, newScale));
26
- if (finalScale !== oldScale) {
27
- const position = this.render.stage.getPosition();
28
- const point = { x: e.evt.offsetX, y: e.evt.offsetY };
29
- const mousePointTo = {
30
- x: (point.x - position.x) / oldScale,
31
- y: (point.y - position.y) / oldScale
32
- };
33
- const newPosition = {
34
- x: -(mousePointTo.x * finalScale - point.x),
35
- y: -(mousePointTo.y * finalScale - point.y)
36
- };
37
- this.render.emit('scale-change', finalScale);
38
- this.render.stage.scale({ x: finalScale, y: finalScale });
39
- this.render.stage.position(newPosition);
40
- } else if (!isPinchToZoom) {
41
- const position = this.render.stage.getPosition();
42
- this.render.stage.position({
43
- x: position.x - e.evt.deltaX,
44
- y: position.y - e.evt.deltaY
45
- });
46
- }
47
- // 重绘
48
- this.render.redraw([
49
- BgDraw.NAME,
50
- GraphDraw.NAME,
51
- LinkDraw.NAME,
52
- RulerDraw.NAME,
53
- RefLineDraw.NAME,
54
- PreviewDraw.NAME
55
- ]);
56
- }
57
- }
58
- }
59
- }
1
+ import Konva from 'konva';
2
+ import { Render } from '../index';
3
+ import { Handler } from '../types';
4
+ import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
5
+
6
+ // 缩放
7
+
8
+ export class ZoomHandlers implements Handler {
9
+ static readonly NAME = 'ZoomHandlers';
10
+ private render: Render;
11
+ constructor(render: Render) {
12
+ this.render = render;
13
+ }
14
+ scaleBy = 0.1; // zoom 速度
15
+ // zoom 范围
16
+ scaleMin = 0.2;
17
+ scaleMax = 5;
18
+
19
+ handlers = {
20
+ stage: {
21
+ wheel: (e: Konva.KonvaEventObject<GlobalEventHandlersEventMap['wheel']>) => {
22
+ const { scale: oldScale } = this.render.getStageState();
23
+ const isPinchToZoom = e.evt.ctrlKey;
24
+ const newScale = isPinchToZoom ? oldScale + (e.evt.deltaY < 0 ? this.scaleBy : -this.scaleBy) : oldScale;
25
+ const finalScale = Math.max(this.scaleMin, Math.min(this.scaleMax, newScale));
26
+ if (finalScale !== oldScale) {
27
+ const position = this.render.stage.getPosition();
28
+ const point = { x: e.evt.offsetX, y: e.evt.offsetY };
29
+ const mousePointTo = {
30
+ x: (point.x - position.x) / oldScale,
31
+ y: (point.y - position.y) / oldScale
32
+ };
33
+ const newPosition = {
34
+ x: -(mousePointTo.x * finalScale - point.x),
35
+ y: -(mousePointTo.y * finalScale - point.y)
36
+ };
37
+ this.render.emit('scale-change', finalScale);
38
+ this.render.stage.scale({ x: finalScale, y: finalScale });
39
+ this.render.stage.position(newPosition);
40
+ } else if (!isPinchToZoom) {
41
+ const position = this.render.stage.getPosition();
42
+ this.render.stage.position({
43
+ x: position.x - e.evt.deltaX,
44
+ y: position.y - e.evt.deltaY
45
+ });
46
+ }
47
+ // 重绘
48
+ this.render.redraw([
49
+ BgDraw.NAME,
50
+ GraphDraw.NAME,
51
+ LinkDraw.NAME,
52
+ RulerDraw.NAME,
53
+ RefLineDraw.NAME,
54
+ PreviewDraw.NAME
55
+ ]);
56
+ }
57
+ }
58
+ }
59
+ }
@@ -1,89 +1,89 @@
1
- import Konva from 'konva';
2
- import { Render } from '../index';
3
- import { AlignType } from '../types';
4
- import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
5
-
6
- // 工具栏对齐
7
-
8
- export class AlignTool {
9
- private render: Render;
10
- constructor(render: Render) {
11
- this.render = render;
12
- }
13
-
14
- getAlignRect(node: Konva.Node | Konva.Transformer) {
15
- const stageState = this.render.getStageState();
16
- let width = 0, height = 0, x = 0, y = 0;
17
- const result = node.getClientRect();
18
- // 转为 逻辑觉尺寸
19
- [width, height, x, y] = [
20
- this.render.toStageValue(result.width),
21
- this.render.toStageValue(result.height),
22
- this.render.toStageValue(result.x - stageState.x),
23
- this.render.toStageValue(result.y - stageState.y)
24
- ];
25
- return { width, height, x, y };
26
- }
27
-
28
- // 对齐参考点
29
- getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
30
- let width = 0, height = 0, x = 0, y = 0;
31
- if (node !== void 0) {
32
- // 选择器 / 基于节点 逻辑觉尺寸
33
- const rect = this.getAlignRect(node);
34
- [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
35
- } else { // 默认为选择器
36
- return this.getAlignPoints(this.render.transformer);
37
- }
38
- return {
39
- Middle: x + width / 2,
40
- Left: x,
41
- Right: x + width,
42
- Center: y + height / 2,
43
- Top: y,
44
- Bottom: y + height
45
- };
46
- }
47
-
48
- align(type: AlignType, target?: Konva.Node) {
49
- // 对齐参考点(所有)
50
- const points = this.getAlignPoints(target);
51
- // 对齐参考点
52
- const point = points[type];
53
- // 需要移动的节点
54
- const nodes = this.render.transformer.nodes().filter((node) => node !== target);
55
- // 移动逻辑
56
- for (const node of nodes) {
57
- // 逻辑觉尺寸
58
- const rect = this.getAlignRect(node);
59
- const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
60
- switch (type) {
61
- case "Middle":
62
- case "Left":
63
- case "Right":
64
- {
65
- const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
66
- node.x(node.x() + (point - cx));
67
- }
68
- break;
69
- case "Center":
70
- case "Top":
71
- case "Bottom":
72
- {
73
- const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
74
- node.y(node.y() + (point - cy));
75
- }
76
- break;
77
- }
78
- }
79
- // 更新历史
80
- this.render.updateHistory();
81
- // 重绘
82
- this.render.redraw([
83
- GraphDraw.NAME,
84
- LinkDraw.NAME,
85
- RulerDraw.NAME,
86
- PreviewDraw.NAME
87
- ]);
88
- }
89
- }
1
+ import Konva from 'konva';
2
+ import { Render } from '../index';
3
+ import { AlignType } from '../types';
4
+ import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
5
+
6
+ // 工具栏对齐
7
+
8
+ export class AlignTool {
9
+ private render: Render;
10
+ constructor(render: Render) {
11
+ this.render = render;
12
+ }
13
+
14
+ getAlignRect(node: Konva.Node | Konva.Transformer) {
15
+ const stageState = this.render.getStageState();
16
+ let width = 0, height = 0, x = 0, y = 0;
17
+ const result = node.getClientRect();
18
+ // 转为 逻辑觉尺寸
19
+ [width, height, x, y] = [
20
+ this.render.toStageValue(result.width),
21
+ this.render.toStageValue(result.height),
22
+ this.render.toStageValue(result.x - stageState.x),
23
+ this.render.toStageValue(result.y - stageState.y)
24
+ ];
25
+ return { width, height, x, y };
26
+ }
27
+
28
+ // 对齐参考点
29
+ getAlignPoints(node?: Konva.Node | Konva.Transformer): { [index: string]: number } {
30
+ let width = 0, height = 0, x = 0, y = 0;
31
+ if (node !== void 0) {
32
+ // 选择器 / 基于节点 逻辑觉尺寸
33
+ const rect = this.getAlignRect(node);
34
+ [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
35
+ } else { // 默认为选择器
36
+ return this.getAlignPoints(this.render.transformer);
37
+ }
38
+ return {
39
+ Middle: x + width / 2,
40
+ Left: x,
41
+ Right: x + width,
42
+ Center: y + height / 2,
43
+ Top: y,
44
+ Bottom: y + height
45
+ };
46
+ }
47
+
48
+ align(type: AlignType, target?: Konva.Node) {
49
+ // 对齐参考点(所有)
50
+ const points = this.getAlignPoints(target);
51
+ // 对齐参考点
52
+ const point = points[type];
53
+ // 需要移动的节点
54
+ const nodes = this.render.transformer.nodes().filter((node) => node !== target);
55
+ // 移动逻辑
56
+ for (const node of nodes) {
57
+ // 逻辑觉尺寸
58
+ const rect = this.getAlignRect(node);
59
+ const [width, height, x, y] = [rect.width, rect.height, rect.x, rect.y];
60
+ switch (type) {
61
+ case "Middle":
62
+ case "Left":
63
+ case "Right":
64
+ {
65
+ const cx = type === "Middle" ? x + width / 2 : type === "Left" ? x : x + width;
66
+ node.x(node.x() + (point - cx));
67
+ }
68
+ break;
69
+ case "Center":
70
+ case "Top":
71
+ case "Bottom":
72
+ {
73
+ const cy = type === "Center" ? y + height / 2 : type === "Top" ? y : y + height;
74
+ node.y(node.y() + (point - cy));
75
+ }
76
+ break;
77
+ }
78
+ }
79
+ // 更新历史
80
+ this.render.updateHistory();
81
+ // 重绘
82
+ this.render.redraw([
83
+ GraphDraw.NAME,
84
+ LinkDraw.NAME,
85
+ RulerDraw.NAME,
86
+ PreviewDraw.NAME
87
+ ]);
88
+ }
89
+ }