@retikz/core 0.1.0-alpha.0 → 0.1.0-alpha.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/dist/es/compile/index.d.ts +1 -0
- package/dist/es/compile/index.d.ts.map +1 -1
- package/dist/es/compile/node.d.ts +41 -16
- package/dist/es/compile/node.d.ts.map +1 -1
- package/dist/es/compile/node.js +168 -28
- package/dist/es/compile/parseTarget.d.ts +25 -0
- package/dist/es/compile/parseTarget.d.ts.map +1 -0
- package/dist/es/compile/parseTarget.js +48 -0
- package/dist/es/compile/path.d.ts +17 -7
- package/dist/es/compile/path.d.ts.map +1 -1
- package/dist/es/compile/path.js +276 -33
- package/dist/es/geometry/circle.d.ts +32 -0
- package/dist/es/geometry/circle.d.ts.map +1 -0
- package/dist/es/geometry/circle.js +79 -0
- package/dist/es/geometry/diamond.d.ts +44 -0
- package/dist/es/geometry/diamond.d.ts.map +1 -0
- package/dist/es/geometry/diamond.js +87 -0
- package/dist/es/geometry/ellipse.d.ts +38 -0
- package/dist/es/geometry/ellipse.d.ts.map +1 -0
- package/dist/es/geometry/ellipse.js +86 -0
- package/dist/es/geometry/index.d.ts +3 -0
- package/dist/es/geometry/index.d.ts.map +1 -1
- package/dist/es/index.d.ts +9 -7
- package/dist/es/index.d.ts.map +1 -1
- package/dist/es/index.js +8 -4
- package/dist/es/ir/node.d.ts +33 -1
- package/dist/es/ir/node.d.ts.map +1 -1
- package/dist/es/ir/node.js +26 -4
- package/dist/es/ir/path/arrow.d.ts +26 -0
- package/dist/es/ir/path/arrow.d.ts.map +1 -0
- package/dist/es/ir/path/arrow.js +25 -0
- package/dist/es/ir/path/index.d.ts +1 -0
- package/dist/es/ir/path/index.d.ts.map +1 -1
- package/dist/es/ir/path/path.d.ts +60 -0
- package/dist/es/ir/path/path.d.ts.map +1 -1
- package/dist/es/ir/path/path.js +10 -0
- package/dist/es/ir/path/step.d.ts +56 -2
- package/dist/es/ir/path/step.d.ts.map +1 -1
- package/dist/es/ir/path/step.js +17 -2
- package/dist/es/ir/scene.d.ts +162 -0
- package/dist/es/ir/scene.d.ts.map +1 -1
- package/dist/es/parsers/parseWay.d.ts +56 -10
- package/dist/es/parsers/parseWay.d.ts.map +1 -1
- package/dist/es/parsers/parseWay.js +68 -6
- package/dist/es/primitive/ellipse.d.ts +32 -0
- package/dist/es/primitive/ellipse.d.ts.map +1 -0
- package/dist/es/primitive/index.d.ts +1 -0
- package/dist/es/primitive/index.d.ts.map +1 -1
- package/dist/es/primitive/path.d.ts +7 -0
- package/dist/es/primitive/path.d.ts.map +1 -1
- package/dist/es/primitive/scene.d.ts +2 -1
- package/dist/es/primitive/scene.d.ts.map +1 -1
- package/dist/es/types.d.ts +3 -0
- package/dist/es/types.d.ts.map +1 -0
- package/dist/lib/compile/index.d.ts +1 -0
- package/dist/lib/compile/index.d.ts.map +1 -1
- package/dist/lib/compile/node.cjs +170 -28
- package/dist/lib/compile/node.d.ts +41 -16
- package/dist/lib/compile/node.d.ts.map +1 -1
- package/dist/lib/compile/parseTarget.cjs +48 -0
- package/dist/lib/compile/parseTarget.d.ts +25 -0
- package/dist/lib/compile/parseTarget.d.ts.map +1 -0
- package/dist/lib/compile/path.cjs +275 -32
- package/dist/lib/compile/path.d.ts +17 -7
- package/dist/lib/compile/path.d.ts.map +1 -1
- package/dist/lib/geometry/circle.cjs +79 -0
- package/dist/lib/geometry/circle.d.ts +32 -0
- package/dist/lib/geometry/circle.d.ts.map +1 -0
- package/dist/lib/geometry/diamond.cjs +87 -0
- package/dist/lib/geometry/diamond.d.ts +44 -0
- package/dist/lib/geometry/diamond.d.ts.map +1 -0
- package/dist/lib/geometry/ellipse.cjs +86 -0
- package/dist/lib/geometry/ellipse.d.ts +38 -0
- package/dist/lib/geometry/ellipse.d.ts.map +1 -0
- package/dist/lib/geometry/index.d.ts +3 -0
- package/dist/lib/geometry/index.d.ts.map +1 -1
- package/dist/lib/index.cjs +12 -0
- package/dist/lib/index.d.ts +9 -7
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/ir/node.cjs +26 -3
- package/dist/lib/ir/node.d.ts +33 -1
- package/dist/lib/ir/node.d.ts.map +1 -1
- package/dist/lib/ir/path/arrow.cjs +25 -0
- package/dist/lib/ir/path/arrow.d.ts +26 -0
- package/dist/lib/ir/path/arrow.d.ts.map +1 -0
- package/dist/lib/ir/path/index.d.ts +1 -0
- package/dist/lib/ir/path/index.d.ts.map +1 -1
- package/dist/lib/ir/path/path.cjs +10 -0
- package/dist/lib/ir/path/path.d.ts +60 -0
- package/dist/lib/ir/path/path.d.ts.map +1 -1
- package/dist/lib/ir/path/step.cjs +18 -1
- package/dist/lib/ir/path/step.d.ts +56 -2
- package/dist/lib/ir/path/step.d.ts.map +1 -1
- package/dist/lib/ir/scene.d.ts +162 -0
- package/dist/lib/ir/scene.d.ts.map +1 -1
- package/dist/lib/parsers/parseWay.cjs +68 -5
- package/dist/lib/parsers/parseWay.d.ts +56 -10
- package/dist/lib/parsers/parseWay.d.ts.map +1 -1
- package/dist/lib/primitive/ellipse.d.ts +32 -0
- package/dist/lib/primitive/ellipse.d.ts.map +1 -0
- package/dist/lib/primitive/index.d.ts +1 -0
- package/dist/lib/primitive/index.d.ts.map +1 -1
- package/dist/lib/primitive/path.d.ts +7 -0
- package/dist/lib/primitive/path.d.ts.map +1 -1
- package/dist/lib/primitive/scene.d.ts +2 -1
- package/dist/lib/primitive/scene.d.ts.map +1 -1
- package/dist/lib/types.d.ts +3 -0
- package/dist/lib/types.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -1,26 +1,90 @@
|
|
|
1
|
+
const require_rect = require("../geometry/rect.cjs");
|
|
2
|
+
const require_circle = require("../geometry/circle.cjs");
|
|
3
|
+
const require_diamond = require("../geometry/diamond.cjs");
|
|
4
|
+
const require_ellipse = require("../geometry/ellipse.cjs");
|
|
1
5
|
const require_position = require("./position.cjs");
|
|
2
6
|
//#region src/compile/node.ts
|
|
3
7
|
var DEFAULT_FONT_SIZE = 14;
|
|
4
8
|
var DEFAULT_PADDING = 8;
|
|
5
9
|
var DEG_TO_RAD = Math.PI / 180;
|
|
10
|
+
var SQRT2 = Math.SQRT2;
|
|
11
|
+
/** 由 layout 构造的 Rect(带 margin 扩张) */
|
|
12
|
+
var rectOf = (layout, marginAdd) => ({
|
|
13
|
+
x: layout.rect.x,
|
|
14
|
+
y: layout.rect.y,
|
|
15
|
+
width: layout.rect.width + 2 * marginAdd,
|
|
16
|
+
height: layout.rect.height + 2 * marginAdd,
|
|
17
|
+
rotate: layout.rect.rotate
|
|
18
|
+
});
|
|
19
|
+
/** 由 layout 构造的 Circle(圆心 + 半径,半径=外接框边长/2 + margin) */
|
|
20
|
+
var circleOf = (layout, marginAdd) => ({
|
|
21
|
+
x: layout.rect.x,
|
|
22
|
+
y: layout.rect.y,
|
|
23
|
+
radius: layout.rect.width / 2 + marginAdd,
|
|
24
|
+
rotate: layout.rect.rotate
|
|
25
|
+
});
|
|
26
|
+
/** 由 layout 构造的 Ellipse(rx/ry 各加 margin) */
|
|
27
|
+
var ellipseOf = (layout, marginAdd) => ({
|
|
28
|
+
x: layout.rect.x,
|
|
29
|
+
y: layout.rect.y,
|
|
30
|
+
rx: layout.rect.width / 2 + marginAdd,
|
|
31
|
+
ry: layout.rect.height / 2 + marginAdd,
|
|
32
|
+
rotate: layout.rect.rotate
|
|
33
|
+
});
|
|
34
|
+
/** 由 layout 构造的 Diamond(halfA/halfB 各加 margin) */
|
|
35
|
+
var diamondOf = (layout, marginAdd) => ({
|
|
36
|
+
x: layout.rect.x,
|
|
37
|
+
y: layout.rect.y,
|
|
38
|
+
halfA: layout.rect.width / 2 + marginAdd,
|
|
39
|
+
halfB: layout.rect.height / 2 + marginAdd,
|
|
40
|
+
rotate: layout.rect.rotate
|
|
41
|
+
});
|
|
6
42
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* margin
|
|
43
|
+
* 取节点 shape 在 toward 方向上的"附着点"——path 端点贴边用。
|
|
44
|
+
* 按 shape 多态:rect / circle / ellipse / diamond 各自的 boundaryPoint。
|
|
45
|
+
* margin > 0 时形状先外扩,让 path 在 border 外停 margin 个 user units。
|
|
10
46
|
*/
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
47
|
+
var boundaryPointOf = (layout, toward) => {
|
|
48
|
+
const m = layout.margin;
|
|
49
|
+
switch (layout.shape) {
|
|
50
|
+
case "rectangle": return require_rect.rect.boundaryPoint(rectOf(layout, m), toward);
|
|
51
|
+
case "circle": return require_circle.circle.boundaryPoint(circleOf(layout, m), toward);
|
|
52
|
+
case "ellipse": return require_ellipse.ellipse.boundaryPoint(ellipseOf(layout, m), toward);
|
|
53
|
+
case "diamond": return require_diamond.diamond.boundaryPoint(diamondOf(layout, m), toward);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* 取节点 shape 的命名 anchor(center / north / east / north-east 等 9 个)。
|
|
58
|
+
* **不应用 margin**——TikZ 语义中 explicit anchor 取的是视觉边界点,不涉及 outer sep。
|
|
59
|
+
* 用于 `'A.north'` 这种语法落点。
|
|
60
|
+
*/
|
|
61
|
+
var anchorOf = (layout, name) => {
|
|
62
|
+
switch (layout.shape) {
|
|
63
|
+
case "rectangle": return require_rect.rect.anchor(rectOf(layout, 0), name);
|
|
64
|
+
case "circle": return require_circle.circle.anchor(circleOf(layout, 0), name);
|
|
65
|
+
case "ellipse": return require_ellipse.ellipse.anchor(ellipseOf(layout, 0), name);
|
|
66
|
+
case "diamond": return require_diamond.diamond.anchor(diamondOf(layout, 0), name);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* 取节点 shape 在指定角度方向上的边界点。角度约定与 PolarPosition 一致(度数):
|
|
71
|
+
* 0° = +x(east),90° = +y(screen 下方)。
|
|
72
|
+
* **不应用 margin**——同 anchorOf。用于 `'A.30'` 这种语法落点。
|
|
73
|
+
*/
|
|
74
|
+
var angleBoundaryOf = (layout, angleDeg) => {
|
|
75
|
+
const rad = angleDeg * Math.PI / 180;
|
|
76
|
+
const toward = [layout.rect.x + Math.cos(rad), layout.rect.y + Math.sin(rad)];
|
|
77
|
+
switch (layout.shape) {
|
|
78
|
+
case "rectangle": return require_rect.rect.boundaryPoint(rectOf(layout, 0), toward);
|
|
79
|
+
case "circle": return require_circle.circle.boundaryPoint(circleOf(layout, 0), toward);
|
|
80
|
+
case "ellipse": return require_ellipse.ellipse.boundaryPoint(ellipseOf(layout, 0), toward);
|
|
81
|
+
case "diamond": return require_diamond.diamond.boundaryPoint(diamondOf(layout, 0), toward);
|
|
82
|
+
}
|
|
20
83
|
};
|
|
21
84
|
/**
|
|
22
85
|
* 把 IR Node 解析为内部 NodeLayout:
|
|
23
|
-
* - 算出文本度量与 padding
|
|
86
|
+
* - 算出文本度量与 padding 推导出"内框"半轴 (innerHalfW/H)
|
|
87
|
+
* - 按 shape 决定外接边界尺寸(circle 取半对角线、ellipse 各 ×√2、diamond 各 ×2)
|
|
24
88
|
* - 解析 position(笛卡尔或极坐标)为几何中心
|
|
25
89
|
* - IR 的 rotate(度数)转弧度存进 Rect.rotate
|
|
26
90
|
* - 透传 margin / 样式属性
|
|
@@ -32,18 +96,42 @@ var layoutNode = (node, measureText, nodeIndex) => {
|
|
|
32
96
|
width: 0,
|
|
33
97
|
height: 0
|
|
34
98
|
};
|
|
35
|
-
const
|
|
36
|
-
const
|
|
99
|
+
const innerHalfW = Math.max(metrics.width / 2 + padding, padding);
|
|
100
|
+
const innerHalfH = Math.max(metrics.height / 2 + padding, padding);
|
|
101
|
+
const shape = node.shape ?? "rectangle";
|
|
102
|
+
let boundsHalfW;
|
|
103
|
+
let boundsHalfH;
|
|
104
|
+
switch (shape) {
|
|
105
|
+
case "rectangle":
|
|
106
|
+
boundsHalfW = innerHalfW;
|
|
107
|
+
boundsHalfH = innerHalfH;
|
|
108
|
+
break;
|
|
109
|
+
case "circle": {
|
|
110
|
+
const r = Math.sqrt(innerHalfW * innerHalfW + innerHalfH * innerHalfH);
|
|
111
|
+
boundsHalfW = r;
|
|
112
|
+
boundsHalfH = r;
|
|
113
|
+
break;
|
|
114
|
+
}
|
|
115
|
+
case "ellipse":
|
|
116
|
+
boundsHalfW = innerHalfW * SQRT2;
|
|
117
|
+
boundsHalfH = innerHalfH * SQRT2;
|
|
118
|
+
break;
|
|
119
|
+
case "diamond":
|
|
120
|
+
boundsHalfW = innerHalfW * 2;
|
|
121
|
+
boundsHalfH = innerHalfH * 2;
|
|
122
|
+
break;
|
|
123
|
+
}
|
|
37
124
|
const rotateDeg = node.rotate ?? 0;
|
|
38
125
|
const center = require_position.resolvePosition(node.position, nodeIndex);
|
|
39
126
|
if (!center) throw new Error(`Cannot resolve position for node ${node.id ?? "(unnamed)"}; polar.origin may reference an undefined node`);
|
|
40
127
|
return {
|
|
41
128
|
id: node.id,
|
|
129
|
+
shape,
|
|
42
130
|
rect: {
|
|
43
131
|
x: center[0],
|
|
44
132
|
y: center[1],
|
|
45
|
-
width,
|
|
46
|
-
height,
|
|
133
|
+
width: 2 * boundsHalfW,
|
|
134
|
+
height: 2 * boundsHalfH,
|
|
47
135
|
rotate: rotateDeg * DEG_TO_RAD
|
|
48
136
|
},
|
|
49
137
|
rotateDeg,
|
|
@@ -57,17 +145,11 @@ var layoutNode = (node, measureText, nodeIndex) => {
|
|
|
57
145
|
strokeWidth: node.strokeWidth
|
|
58
146
|
};
|
|
59
147
|
};
|
|
60
|
-
/**
|
|
61
|
-
|
|
62
|
-
* - rect(背景边框;x/y 转为 SVG 风格的左上角)
|
|
63
|
-
* - text(如有内容)
|
|
64
|
-
* - 若有旋转,外面套一层 GroupPrim 用 SVG `rotate(deg cx cy)` 实现,
|
|
65
|
-
* 内层 RectPrim/TextPrim 自身保持轴对齐
|
|
66
|
-
*/
|
|
67
|
-
var emitNodePrimitives = (layout, round) => {
|
|
148
|
+
/** rectangle shape 的 RectPrim */
|
|
149
|
+
var emitRectShape = (layout, round) => {
|
|
68
150
|
const halfW = layout.rect.width / 2;
|
|
69
151
|
const halfH = layout.rect.height / 2;
|
|
70
|
-
|
|
152
|
+
return {
|
|
71
153
|
type: "rect",
|
|
72
154
|
x: round(layout.rect.x - halfW),
|
|
73
155
|
y: round(layout.rect.y - halfH),
|
|
@@ -76,7 +158,57 @@ var emitNodePrimitives = (layout, round) => {
|
|
|
76
158
|
fill: layout.fill ?? "transparent",
|
|
77
159
|
stroke: layout.stroke ?? "currentColor",
|
|
78
160
|
strokeWidth: layout.strokeWidth ?? 1
|
|
79
|
-
}
|
|
161
|
+
};
|
|
162
|
+
};
|
|
163
|
+
/** circle / ellipse shape 的 EllipsePrim(圆形 rx=ry) */
|
|
164
|
+
var emitEllipseShape = (layout, round) => ({
|
|
165
|
+
type: "ellipse",
|
|
166
|
+
cx: round(layout.rect.x),
|
|
167
|
+
cy: round(layout.rect.y),
|
|
168
|
+
rx: round(layout.rect.width / 2),
|
|
169
|
+
ry: round(layout.rect.height / 2),
|
|
170
|
+
fill: layout.fill ?? "transparent",
|
|
171
|
+
stroke: layout.stroke ?? "currentColor",
|
|
172
|
+
strokeWidth: layout.strokeWidth ?? 1
|
|
173
|
+
});
|
|
174
|
+
/** diamond shape 的 PathPrim(4 顶点 + Z 闭合) */
|
|
175
|
+
var emitDiamondShape = (layout, round) => {
|
|
176
|
+
const diam = diamondOf(layout, 0);
|
|
177
|
+
const e = require_diamond.diamond.anchor(diam, "east");
|
|
178
|
+
const n = require_diamond.diamond.anchor(diam, "north");
|
|
179
|
+
const w = require_diamond.diamond.anchor(diam, "west");
|
|
180
|
+
const s = require_diamond.diamond.anchor(diam, "south");
|
|
181
|
+
return {
|
|
182
|
+
type: "path",
|
|
183
|
+
d: `M ${round(e[0])} ${round(e[1])} L ${round(n[0])} ${round(n[1])} L ${round(w[0])} ${round(w[1])} L ${round(s[0])} ${round(s[1])} Z`,
|
|
184
|
+
fill: layout.fill ?? "transparent",
|
|
185
|
+
stroke: layout.stroke ?? "currentColor",
|
|
186
|
+
strokeWidth: layout.strokeWidth ?? 1
|
|
187
|
+
};
|
|
188
|
+
};
|
|
189
|
+
/**
|
|
190
|
+
* 把 NodeLayout 翻译为 Scene primitives:
|
|
191
|
+
* - shape 主体:按 shape 分发(rect / ellipse / path)
|
|
192
|
+
* - text(如有内容):始终走 TextPrim
|
|
193
|
+
* - 若有旋转:外面套一层 GroupPrim 用 SVG `rotate(deg cx cy)` 实现
|
|
194
|
+
* (PathPrim 的 diamond 顶点已自带旋转坐标,但 text 需要 group 旋转,
|
|
195
|
+
* 所以仍统一用 group 包裹)
|
|
196
|
+
*/
|
|
197
|
+
var emitNodePrimitives = (layout, round) => {
|
|
198
|
+
let shapePrim;
|
|
199
|
+
switch (layout.shape) {
|
|
200
|
+
case "rectangle":
|
|
201
|
+
shapePrim = emitRectShape(layout, round);
|
|
202
|
+
break;
|
|
203
|
+
case "circle":
|
|
204
|
+
case "ellipse":
|
|
205
|
+
shapePrim = emitEllipseShape(layout, round);
|
|
206
|
+
break;
|
|
207
|
+
case "diamond":
|
|
208
|
+
shapePrim = emitDiamondShape(unrotated(layout), round);
|
|
209
|
+
break;
|
|
210
|
+
}
|
|
211
|
+
const inner = [shapePrim];
|
|
80
212
|
if (layout.text) inner.push({
|
|
81
213
|
type: "text",
|
|
82
214
|
x: round(layout.rect.x),
|
|
@@ -96,7 +228,17 @@ var emitNodePrimitives = (layout, round) => {
|
|
|
96
228
|
children: inner
|
|
97
229
|
}];
|
|
98
230
|
};
|
|
231
|
+
/** 返回 layout 的"未旋转"副本——用于先把 diamond 顶点按未旋转算,再由外层 group 统一旋转 */
|
|
232
|
+
var unrotated = (layout) => ({
|
|
233
|
+
...layout,
|
|
234
|
+
rect: {
|
|
235
|
+
...layout.rect,
|
|
236
|
+
rotate: 0
|
|
237
|
+
}
|
|
238
|
+
});
|
|
99
239
|
//#endregion
|
|
100
|
-
exports.
|
|
240
|
+
exports.anchorOf = anchorOf;
|
|
241
|
+
exports.angleBoundaryOf = angleBoundaryOf;
|
|
242
|
+
exports.boundaryPointOf = boundaryPointOf;
|
|
101
243
|
exports.emitNodePrimitives = emitNodePrimitives;
|
|
102
244
|
exports.layoutNode = layoutNode;
|
|
@@ -1,15 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Position } from '../geometry/point';
|
|
2
|
+
import { Rect, RectAnchor } from '../geometry/rect';
|
|
3
|
+
import { IRNode, NodeShape } from '../ir';
|
|
3
4
|
import { ScenePrimitive } from '../primitive';
|
|
4
5
|
import { TextMeasurer } from './text-metrics';
|
|
5
6
|
export type NodeLayout = {
|
|
6
7
|
/** 节点 id(如 IR Node 提供);其他位置可通过 id 引用本节点 */
|
|
7
8
|
id?: string;
|
|
8
|
-
/**
|
|
9
|
+
/** 节点形状——所有几何 / boundaryPoint 计算按 shape 多态 */
|
|
10
|
+
shape: NodeShape;
|
|
11
|
+
/**
|
|
12
|
+
* 节点视觉边界框(所有 shape 共享语义):
|
|
13
|
+
* - rectangle: rect 即矩形本身
|
|
14
|
+
* - circle: rect.width = rect.height = 2 × radius(外接正方形)
|
|
15
|
+
* - ellipse: rect.width = 2 × rx,rect.height = 2 × ry(外接矩形)
|
|
16
|
+
* - diamond: rect.width = 2 × halfA,rect.height = 2 × halfB(外接矩形)
|
|
17
|
+
*
|
|
18
|
+
* x, y 是几何中心;rotate 是弧度(与 packages/core/AGENTS.md 对齐)。
|
|
19
|
+
*/
|
|
9
20
|
rect: Rect;
|
|
10
21
|
/** IR 中原始的旋转角(度数),保留供 emit 阶段写 SVG transform */
|
|
11
22
|
rotateDeg: number;
|
|
12
|
-
/** 外边距(user units,≥ 0);path
|
|
23
|
+
/** 外边距(user units,≥ 0);path 附着到形状外扩 margin 的虚拟边界上 */
|
|
13
24
|
margin: number;
|
|
14
25
|
/** 节点文本内容;空字符串视为无文本(undefined) */
|
|
15
26
|
text?: string;
|
|
@@ -19,22 +30,35 @@ export type NodeLayout = {
|
|
|
19
30
|
textHeight: number;
|
|
20
31
|
/** 文本字号(user units) */
|
|
21
32
|
fontSize: number;
|
|
22
|
-
/**
|
|
33
|
+
/** 节点背景色,CSS 颜色字符串;emit 时用 'transparent' 兜底 */
|
|
23
34
|
fill?: string;
|
|
24
|
-
/**
|
|
35
|
+
/** 节点边框色,CSS 颜色字符串;emit 时用 'currentColor' 兜底 */
|
|
25
36
|
stroke?: string;
|
|
26
|
-
/**
|
|
37
|
+
/** 节点边框宽度(user units);emit 时用 1 兜底 */
|
|
27
38
|
strokeWidth?: number;
|
|
28
39
|
};
|
|
29
40
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* margin
|
|
41
|
+
* 取节点 shape 在 toward 方向上的"附着点"——path 端点贴边用。
|
|
42
|
+
* 按 shape 多态:rect / circle / ellipse / diamond 各自的 boundaryPoint。
|
|
43
|
+
* margin > 0 时形状先外扩,让 path 在 border 外停 margin 个 user units。
|
|
33
44
|
*/
|
|
34
|
-
export declare const
|
|
45
|
+
export declare const boundaryPointOf: (layout: NodeLayout, toward: Position) => Position;
|
|
46
|
+
/**
|
|
47
|
+
* 取节点 shape 的命名 anchor(center / north / east / north-east 等 9 个)。
|
|
48
|
+
* **不应用 margin**——TikZ 语义中 explicit anchor 取的是视觉边界点,不涉及 outer sep。
|
|
49
|
+
* 用于 `'A.north'` 这种语法落点。
|
|
50
|
+
*/
|
|
51
|
+
export declare const anchorOf: (layout: NodeLayout, name: RectAnchor) => Position;
|
|
52
|
+
/**
|
|
53
|
+
* 取节点 shape 在指定角度方向上的边界点。角度约定与 PolarPosition 一致(度数):
|
|
54
|
+
* 0° = +x(east),90° = +y(screen 下方)。
|
|
55
|
+
* **不应用 margin**——同 anchorOf。用于 `'A.30'` 这种语法落点。
|
|
56
|
+
*/
|
|
57
|
+
export declare const angleBoundaryOf: (layout: NodeLayout, angleDeg: number) => Position;
|
|
35
58
|
/**
|
|
36
59
|
* 把 IR Node 解析为内部 NodeLayout:
|
|
37
|
-
* - 算出文本度量与 padding
|
|
60
|
+
* - 算出文本度量与 padding 推导出"内框"半轴 (innerHalfW/H)
|
|
61
|
+
* - 按 shape 决定外接边界尺寸(circle 取半对角线、ellipse 各 ×√2、diamond 各 ×2)
|
|
38
62
|
* - 解析 position(笛卡尔或极坐标)为几何中心
|
|
39
63
|
* - IR 的 rotate(度数)转弧度存进 Rect.rotate
|
|
40
64
|
* - 透传 margin / 样式属性
|
|
@@ -42,10 +66,11 @@ export declare const attachRectOf: (layout: NodeLayout) => Rect;
|
|
|
42
66
|
export declare const layoutNode: (node: IRNode, measureText: TextMeasurer, nodeIndex: Map<string, NodeLayout>) => NodeLayout;
|
|
43
67
|
/**
|
|
44
68
|
* 把 NodeLayout 翻译为 Scene primitives:
|
|
45
|
-
* - rect
|
|
46
|
-
* - text
|
|
47
|
-
* -
|
|
48
|
-
*
|
|
69
|
+
* - shape 主体:按 shape 分发(rect / ellipse / path)
|
|
70
|
+
* - text(如有内容):始终走 TextPrim
|
|
71
|
+
* - 若有旋转:外面套一层 GroupPrim 用 SVG `rotate(deg cx cy)` 实现
|
|
72
|
+
* (PathPrim 的 diamond 顶点已自带旋转坐标,但 text 需要 group 旋转,
|
|
73
|
+
* 所以仍统一用 group 包裹)
|
|
49
74
|
*/
|
|
50
75
|
export declare const emitNodePrimitives: (layout: NodeLayout, round: (n: number) => number) => Array<ScenePrimitive>;
|
|
51
76
|
//# sourceMappingURL=node.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../src/compile/node.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../src/compile/node.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAOnD,MAAM,MAAM,UAAU,GAAG;IACvB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;OAQG;IACH,IAAI,EAAE,IAAI,CAAC;IACX,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAsCF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,UAAU,EAAE,QAAQ,QAAQ,KAAG,QAYtE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,UAAU,EAAE,MAAM,UAAU,KAAG,QAW/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,UAAU,EAAE,UAAU,MAAM,KAAG,QActE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GACrB,MAAM,MAAM,EACZ,aAAa,YAAY,EACzB,WAAW,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KACjC,UAmEF,CAAC;AAyDF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,UAAU,EAClB,OAAO,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,KAC3B,KAAK,CAAC,cAAc,CAyCtB,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
const require_rect = require("../geometry/rect.cjs");
|
|
2
|
+
//#region src/compile/parseTarget.ts
|
|
3
|
+
/**
|
|
4
|
+
* 节点 ref 字符串扩展语法(ADR-0004):
|
|
5
|
+
*
|
|
6
|
+
* `'A'` → 节点 A,由 path 自动 boundary clip(auto 模式)
|
|
7
|
+
* `'A.<name>'` → 节点 A 的命名 anchor(center/north/south/east/west/north-east/...)
|
|
8
|
+
* `'A.<deg>'` → 节点 A 在 degree 角度方向上的边界点(同 PolarPosition 角度约定)
|
|
9
|
+
*
|
|
10
|
+
* id 约束:`[A-Za-z_][\w-]*`——禁数字开头、禁含 `.`(与 anchor 分隔符冲突);
|
|
11
|
+
* anchor 名只接受 alpha.1 首批 9 个 RECT_ANCHORS(其余如 'text' / 'base' / 'mid'
|
|
12
|
+
* 留 alpha.2 + 字体改造时再支持);角度纯数字(含可选 `.`/`-`)。
|
|
13
|
+
*/
|
|
14
|
+
/** alpha.1 支持的 anchor 名集合(RECT_ANCHORS 的 9 个值) */
|
|
15
|
+
var ANCHOR_NAMES = new Set(Object.values(require_rect.RECT_ANCHORS));
|
|
16
|
+
/** 纯数字(可选小数 / 负号),用于识别 `A.30` / `A.-45` / `A.180.5` */
|
|
17
|
+
var ANGLE_RE = /^-?\d+(\.\d+)?$/;
|
|
18
|
+
/**
|
|
19
|
+
* 解析节点 ref 字符串。
|
|
20
|
+
*
|
|
21
|
+
* - 不带 `.`:node(auto-clip)
|
|
22
|
+
* - 带 `.` 后纯数字:angle(toward 方向上的边界点,与 PolarPosition 同角度约定)
|
|
23
|
+
* - 带 `.` 后字母 / 连字符:anchor(命中 ANCHOR_NAMES 才合法,否则抛错)
|
|
24
|
+
*
|
|
25
|
+
* 抛错路径:未知 anchor 名(避免静默吞掉拼写错误)。
|
|
26
|
+
*/
|
|
27
|
+
var parseNodeRef = (s) => {
|
|
28
|
+
const dot = s.indexOf(".");
|
|
29
|
+
if (dot < 0) return {
|
|
30
|
+
kind: "node",
|
|
31
|
+
id: s
|
|
32
|
+
};
|
|
33
|
+
const id = s.slice(0, dot);
|
|
34
|
+
const tail = s.slice(dot + 1);
|
|
35
|
+
if (ANGLE_RE.test(tail)) return {
|
|
36
|
+
kind: "angle",
|
|
37
|
+
id,
|
|
38
|
+
angle: Number(tail)
|
|
39
|
+
};
|
|
40
|
+
if (!ANCHOR_NAMES.has(tail)) throw new Error(`parseNodeRef: unknown anchor '${tail}' in '${s}' (alpha.1 supports: ${[...ANCHOR_NAMES].join(", ")})`);
|
|
41
|
+
return {
|
|
42
|
+
kind: "anchor",
|
|
43
|
+
id,
|
|
44
|
+
anchor: tail
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
//#endregion
|
|
48
|
+
exports.parseNodeRef = parseNodeRef;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { RectAnchor } from '../geometry/rect';
|
|
2
|
+
/** 解析后的节点 ref 三态 */
|
|
3
|
+
export type ParsedNodeRef = {
|
|
4
|
+
kind: 'node';
|
|
5
|
+
id: string;
|
|
6
|
+
} | {
|
|
7
|
+
kind: 'anchor';
|
|
8
|
+
id: string;
|
|
9
|
+
anchor: RectAnchor;
|
|
10
|
+
} | {
|
|
11
|
+
kind: 'angle';
|
|
12
|
+
id: string;
|
|
13
|
+
angle: number;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* 解析节点 ref 字符串。
|
|
17
|
+
*
|
|
18
|
+
* - 不带 `.`:node(auto-clip)
|
|
19
|
+
* - 带 `.` 后纯数字:angle(toward 方向上的边界点,与 PolarPosition 同角度约定)
|
|
20
|
+
* - 带 `.` 后字母 / 连字符:anchor(命中 ANCHOR_NAMES 才合法,否则抛错)
|
|
21
|
+
*
|
|
22
|
+
* 抛错路径:未知 anchor 名(避免静默吞掉拼写错误)。
|
|
23
|
+
*/
|
|
24
|
+
export declare const parseNodeRef: (s: string) => ParsedNodeRef;
|
|
25
|
+
//# sourceMappingURL=parseTarget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parseTarget.d.ts","sourceRoot":"","sources":["../../../src/compile/parseTarget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQjE,oBAAoB;AACpB,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,MAAM,KAAG,aAcxC,CAAC"}
|