@rasamjs/tools 0.0.0-stage → 0.2.0
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/API.md +308 -0
- package/CHANGELOG.md +53 -0
- package/LICENSE +21 -0
- package/README.md +138 -2
- package/RELEASING.md +88 -0
- package/dist/advanced/context.d.ts +15 -0
- package/dist/advanced/context.d.ts.map +1 -0
- package/dist/advanced/context.js +2 -0
- package/dist/advanced/context.js.map +1 -0
- package/dist/advanced/curves.d.ts +5 -0
- package/dist/advanced/curves.d.ts.map +1 -0
- package/dist/advanced/curves.js +65 -0
- package/dist/advanced/curves.js.map +1 -0
- package/dist/advanced/geometry.d.ts +17 -0
- package/dist/advanced/geometry.d.ts.map +1 -0
- package/dist/advanced/geometry.js +61 -0
- package/dist/advanced/geometry.js.map +1 -0
- package/dist/advanced/rotation.d.ts +4 -0
- package/dist/advanced/rotation.d.ts.map +1 -0
- package/dist/advanced/rotation.js +86 -0
- package/dist/advanced/rotation.js.map +1 -0
- package/dist/advanced/session.d.ts +5 -0
- package/dist/advanced/session.d.ts.map +1 -0
- package/dist/advanced/session.js +240 -0
- package/dist/advanced/session.js.map +1 -0
- package/dist/advanced/snapper.d.ts +29 -0
- package/dist/advanced/snapper.d.ts.map +1 -0
- package/dist/advanced/snapper.js +118 -0
- package/dist/advanced/snapper.js.map +1 -0
- package/dist/advanced/types.d.ts +30 -0
- package/dist/advanced/types.d.ts.map +1 -0
- package/dist/advanced/types.js +2 -0
- package/dist/advanced/types.js.map +1 -0
- package/dist/drawing.d.ts +5 -0
- package/dist/drawing.d.ts.map +1 -0
- package/dist/drawing.js +3 -0
- package/dist/drawing.js.map +1 -0
- package/dist/editor/draw-tool.d.ts +35 -0
- package/dist/editor/draw-tool.d.ts.map +1 -0
- package/dist/editor/draw-tool.js +174 -0
- package/dist/editor/draw-tool.js.map +1 -0
- package/dist/editor/path-editor.d.ts +34 -0
- package/dist/editor/path-editor.d.ts.map +1 -0
- package/dist/editor/path-editor.js +208 -0
- package/dist/editor/path-editor.js.map +1 -0
- package/dist/editor/pointer.d.ts +21 -0
- package/dist/editor/pointer.d.ts.map +1 -0
- package/dist/editor/pointer.js +86 -0
- package/dist/editor/pointer.js.map +1 -0
- package/dist/editor/surface.d.ts +31 -0
- package/dist/editor/surface.d.ts.map +1 -0
- package/dist/editor/surface.js +138 -0
- package/dist/editor/surface.js.map +1 -0
- package/dist/grid.d.ts +23 -0
- package/dist/grid.d.ts.map +1 -0
- package/dist/grid.js +84 -0
- package/dist/grid.js.map +1 -0
- package/dist/rulers.d.ts +30 -0
- package/dist/rulers.d.ts.map +1 -0
- package/dist/rulers.js +234 -0
- package/dist/rulers.js.map +1 -0
- package/dist/snapping/advanced.d.ts +3 -0
- package/dist/snapping/advanced.d.ts.map +1 -0
- package/dist/snapping/advanced.js +2 -0
- package/dist/snapping/advanced.js.map +1 -0
- package/dist/snapping/guides.d.ts +14 -0
- package/dist/snapping/guides.d.ts.map +1 -0
- package/dist/snapping/guides.js +109 -0
- package/dist/snapping/guides.js.map +1 -0
- package/dist/snapping/lines.d.ts +43 -0
- package/dist/snapping/lines.d.ts.map +1 -0
- package/dist/snapping/lines.js +74 -0
- package/dist/snapping/lines.js.map +1 -0
- package/dist/snapping/options.d.ts +18 -0
- package/dist/snapping/options.d.ts.map +1 -0
- package/dist/snapping/options.js +44 -0
- package/dist/snapping/options.js.map +1 -0
- package/dist/snapping/overlay.d.ts +22 -0
- package/dist/snapping/overlay.d.ts.map +1 -0
- package/dist/snapping/overlay.js +165 -0
- package/dist/snapping/overlay.js.map +1 -0
- package/dist/snapping/session.d.ts +25 -0
- package/dist/snapping/session.d.ts.map +1 -0
- package/dist/snapping/session.js +89 -0
- package/dist/snapping/session.js.map +1 -0
- package/dist/snapping/snapper.d.ts +22 -0
- package/dist/snapping/snapper.d.ts.map +1 -0
- package/dist/snapping/snapper.js +140 -0
- package/dist/snapping/snapper.js.map +1 -0
- package/dist/snapping/spacing.d.ts +27 -0
- package/dist/snapping/spacing.d.ts.map +1 -0
- package/dist/snapping/spacing.js +127 -0
- package/dist/snapping/spacing.js.map +1 -0
- package/dist/snapping/targets.d.ts +7 -0
- package/dist/snapping/targets.d.ts.map +1 -0
- package/dist/snapping/targets.js +71 -0
- package/dist/snapping/targets.js.map +1 -0
- package/dist/snapping/types.d.ts +35 -0
- package/dist/snapping/types.d.ts.map +1 -0
- package/dist/snapping/types.js +2 -0
- package/dist/snapping/types.js.map +1 -0
- package/dist/snapping.d.ts +4 -0
- package/dist/snapping.d.ts.map +1 -0
- package/dist/snapping.js +3 -0
- package/dist/snapping.js.map +1 -0
- package/package.json +73 -4
- package/src/advanced/context.ts +15 -0
- package/src/advanced/curves.ts +65 -0
- package/src/advanced/geometry.ts +74 -0
- package/src/advanced/rotation.ts +93 -0
- package/src/advanced/session.ts +276 -0
- package/src/advanced/snapper.ts +124 -0
- package/src/advanced/types.ts +31 -0
- package/src/drawing.ts +4 -0
- package/src/editor/draw-tool.ts +190 -0
- package/src/editor/path-editor.ts +224 -0
- package/src/editor/pointer.ts +85 -0
- package/src/editor/surface.ts +141 -0
- package/src/grid.ts +99 -0
- package/src/rulers.ts +245 -0
- package/src/snapping/advanced.ts +8 -0
- package/src/snapping/guides.ts +132 -0
- package/src/snapping/lines.ts +108 -0
- package/src/snapping/options.ts +47 -0
- package/src/snapping/overlay.ts +186 -0
- package/src/snapping/session.ts +116 -0
- package/src/snapping/snapper.ts +147 -0
- package/src/snapping/spacing.ts +157 -0
- package/src/snapping/targets.ts +88 -0
- package/src/snapping/types.ts +27 -0
- package/src/snapping.ts +3 -0
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import { Path, PathArray, PointArray } from '@rasamjs/core';
|
|
2
|
+
import { beginChangeGroup } from '@rasamjs/core/changes';
|
|
3
|
+
import { assertPoint } from '../snapping/options.js';
|
|
4
|
+
import { Surface, svg } from './surface.js';
|
|
5
|
+
import { PointerDrag } from './pointer.js';
|
|
6
|
+
export class PathEditor {
|
|
7
|
+
drawing;
|
|
8
|
+
options;
|
|
9
|
+
surface;
|
|
10
|
+
node = null;
|
|
11
|
+
observe = null;
|
|
12
|
+
stopNode = null;
|
|
13
|
+
active = null;
|
|
14
|
+
constructor(drawing, options) {
|
|
15
|
+
this.drawing = drawing;
|
|
16
|
+
this.options = options;
|
|
17
|
+
if (!options?.snapper || typeof options.snapper.begin !== 'function')
|
|
18
|
+
throw new TypeError('Path editing needs a point snapper');
|
|
19
|
+
if (options.stroke !== undefined &&
|
|
20
|
+
(typeof options.stroke !== 'string' || !options.stroke.trim()))
|
|
21
|
+
throw new TypeError('Path stroke must be nonempty');
|
|
22
|
+
this.options = { ...options };
|
|
23
|
+
this.surface = new Surface(drawing, 'rasam-path-editor', () => this.render());
|
|
24
|
+
this.surface.element.style.zIndex = '20';
|
|
25
|
+
new PointerDrag(this.surface, {
|
|
26
|
+
start: (event) => {
|
|
27
|
+
const handle = event.target.closest('[data-path-handle]');
|
|
28
|
+
if (!handle)
|
|
29
|
+
return false;
|
|
30
|
+
this.begin(Number(handle.getAttribute('data-path-handle')));
|
|
31
|
+
return true;
|
|
32
|
+
},
|
|
33
|
+
move: (event) => this.move({ x: event.clientX, y: event.clientY }, event.ctrlKey || event.metaKey),
|
|
34
|
+
end: (cancelled, event) => {
|
|
35
|
+
if (event && !cancelled)
|
|
36
|
+
this.move({ x: event.clientX, y: event.clientY }, event.ctrlKey || event.metaKey);
|
|
37
|
+
this.end(cancelled);
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
this.surface.cleanup(() => {
|
|
41
|
+
this.end(true);
|
|
42
|
+
this.observe?.disconnect();
|
|
43
|
+
this.stopNode?.();
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
attach(node) {
|
|
47
|
+
if (node && this.surface.isDestroyed)
|
|
48
|
+
throw new Error('Path editor is destroyed');
|
|
49
|
+
this.end(true);
|
|
50
|
+
this.observe?.disconnect();
|
|
51
|
+
this.stopNode?.();
|
|
52
|
+
this.stopNode = null;
|
|
53
|
+
if (node &&
|
|
54
|
+
(node.isDestroyed ||
|
|
55
|
+
node.context !== this.drawing.context ||
|
|
56
|
+
!this.drawing.el.contains(node.el) ||
|
|
57
|
+
!['path', 'polyline', 'polygon'].includes(node.el.localName)))
|
|
58
|
+
throw new TypeError('Expected a live path in this drawing');
|
|
59
|
+
this.node = node;
|
|
60
|
+
if (node) {
|
|
61
|
+
this.observe = new this.surface.view.MutationObserver(this.surface.schedule);
|
|
62
|
+
this.observe.observe(this.drawing.el, {
|
|
63
|
+
attributes: true,
|
|
64
|
+
childList: true,
|
|
65
|
+
subtree: true,
|
|
66
|
+
});
|
|
67
|
+
this.stopNode = node.onDispose(() => this.attach(null));
|
|
68
|
+
}
|
|
69
|
+
return this.update();
|
|
70
|
+
}
|
|
71
|
+
get handles() {
|
|
72
|
+
if (!this.node || this.node.isDestroyed)
|
|
73
|
+
return [];
|
|
74
|
+
if (!(this.node instanceof Path))
|
|
75
|
+
return this.node
|
|
76
|
+
.array()
|
|
77
|
+
.toArray()
|
|
78
|
+
.map((point, command) => ({ point, command, coordinate: 0, control: false }));
|
|
79
|
+
return this.node
|
|
80
|
+
.array()
|
|
81
|
+
.toArray()
|
|
82
|
+
.flatMap((command, index) => {
|
|
83
|
+
const offsets = command[0] === 'Z'
|
|
84
|
+
? []
|
|
85
|
+
: command[0] === 'A'
|
|
86
|
+
? [6]
|
|
87
|
+
: command[0] === 'C'
|
|
88
|
+
? [1, 3, 5]
|
|
89
|
+
: command[0] === 'Q'
|
|
90
|
+
? [1, 3]
|
|
91
|
+
: [1];
|
|
92
|
+
return offsets.map((coordinate) => ({
|
|
93
|
+
command: index,
|
|
94
|
+
coordinate,
|
|
95
|
+
point: { x: command[coordinate], y: command[coordinate + 1] },
|
|
96
|
+
control: coordinate !==
|
|
97
|
+
(command[0] === 'C' ? 5 : command[0] === 'Q' ? 3 : command[0] === 'A' ? 6 : 1),
|
|
98
|
+
}));
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
begin(index) {
|
|
102
|
+
if (this.surface.isDestroyed)
|
|
103
|
+
throw new Error('Path editor is destroyed');
|
|
104
|
+
this.end(true);
|
|
105
|
+
const node = this.node, handle = this.handles[index];
|
|
106
|
+
if (!node || !handle)
|
|
107
|
+
throw new RangeError('Unknown path handle');
|
|
108
|
+
const client = node.toClient(handle.point);
|
|
109
|
+
if (!client)
|
|
110
|
+
throw new Error('Path mapping is unavailable');
|
|
111
|
+
const session = this.options.snapper.begin({ kind: 'point', client, nodes: [node] });
|
|
112
|
+
this.active = {
|
|
113
|
+
handle,
|
|
114
|
+
before: node.array().toArray(),
|
|
115
|
+
serialized: node instanceof Path ? String(node.d) : String(node.attr('points')),
|
|
116
|
+
session,
|
|
117
|
+
group: beginChangeGroup(node, { source: 'path-editor' }),
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
move(client, ignore = false) {
|
|
121
|
+
assertPoint(client);
|
|
122
|
+
const active = this.active, node = this.node;
|
|
123
|
+
if (!active || !node)
|
|
124
|
+
return;
|
|
125
|
+
try {
|
|
126
|
+
const point = node.fromClient(active.session?.snap(client, { ignore }) ?? client);
|
|
127
|
+
if (!point)
|
|
128
|
+
return;
|
|
129
|
+
active.group.run(() => {
|
|
130
|
+
if (node instanceof Path) {
|
|
131
|
+
const commands = active.before.map((command) => [...command]);
|
|
132
|
+
commands[active.handle.command][active.handle.coordinate] = point.x;
|
|
133
|
+
commands[active.handle.command][active.handle.coordinate + 1] = point.y;
|
|
134
|
+
node.plot(new PathArray(commands));
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
137
|
+
const points = active.before.map((point) => ({ ...point }));
|
|
138
|
+
points[active.handle.command] = point;
|
|
139
|
+
node.plot(new PointArray(points));
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
this.update();
|
|
143
|
+
}
|
|
144
|
+
catch (error) {
|
|
145
|
+
this.end(true);
|
|
146
|
+
throw error;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
end(cancelled = false) {
|
|
150
|
+
const active = this.active;
|
|
151
|
+
this.active = null;
|
|
152
|
+
if (!active)
|
|
153
|
+
return;
|
|
154
|
+
try {
|
|
155
|
+
const node = this.node;
|
|
156
|
+
if (cancelled && node && !node.isDestroyed)
|
|
157
|
+
active.group.run(() => {
|
|
158
|
+
if (node instanceof Path)
|
|
159
|
+
node.attr('d', active.serialized);
|
|
160
|
+
else
|
|
161
|
+
node.attr('points', active.serialized);
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
finally {
|
|
165
|
+
try {
|
|
166
|
+
active.group.end(cancelled);
|
|
167
|
+
}
|
|
168
|
+
finally {
|
|
169
|
+
active.session?.end();
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
this.update();
|
|
173
|
+
}
|
|
174
|
+
update() {
|
|
175
|
+
this.surface.update();
|
|
176
|
+
return this;
|
|
177
|
+
}
|
|
178
|
+
get isDestroyed() {
|
|
179
|
+
return this.surface.isDestroyed;
|
|
180
|
+
}
|
|
181
|
+
destroy() {
|
|
182
|
+
this.surface.destroy();
|
|
183
|
+
}
|
|
184
|
+
render() {
|
|
185
|
+
const node = this.node, document = this.drawing.el.ownerDocument;
|
|
186
|
+
this.surface.element.replaceChildren(...this.handles.flatMap((handle, index) => {
|
|
187
|
+
const client = node?.toClient(handle.point), point = client && this.surface.fromClient(client);
|
|
188
|
+
if (!point)
|
|
189
|
+
return [];
|
|
190
|
+
const circle = svg(document, 'circle', {
|
|
191
|
+
cx: point.x,
|
|
192
|
+
cy: point.y,
|
|
193
|
+
r: handle.control ? 4 : 5,
|
|
194
|
+
fill: handle.control ? '#fff' : '#3f82df',
|
|
195
|
+
stroke: this.options.stroke ?? '#215eb3',
|
|
196
|
+
'vector-effect': 'non-scaling-stroke',
|
|
197
|
+
'data-path-handle': index,
|
|
198
|
+
tabindex: 0,
|
|
199
|
+
role: 'button',
|
|
200
|
+
'aria-label': `${handle.control ? 'Control' : 'Anchor'} point ${index + 1}`,
|
|
201
|
+
});
|
|
202
|
+
circle.style.pointerEvents = 'all';
|
|
203
|
+
circle.style.cursor = 'move';
|
|
204
|
+
return [circle];
|
|
205
|
+
}));
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
//# sourceMappingURL=path-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"path-editor.js","sourceRoot":"","sources":["../../src/editor/path-editor.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Surface } from './surface.js';
|
|
2
|
+
interface Callbacks {
|
|
3
|
+
start(event: PointerEvent): boolean;
|
|
4
|
+
move(event: PointerEvent): void;
|
|
5
|
+
end(cancelled: boolean, event?: PointerEvent): void;
|
|
6
|
+
}
|
|
7
|
+
/** Capture and cancellation are shared by drawing, path handles and ruler drags. */
|
|
8
|
+
export declare class PointerDrag {
|
|
9
|
+
private readonly surface;
|
|
10
|
+
private readonly callbacks;
|
|
11
|
+
private pointer;
|
|
12
|
+
constructor(surface: Surface, callbacks: Callbacks);
|
|
13
|
+
private readonly down;
|
|
14
|
+
private readonly move;
|
|
15
|
+
private readonly up;
|
|
16
|
+
private readonly lost;
|
|
17
|
+
cancel(): void;
|
|
18
|
+
private finish;
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=pointer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../src/editor/pointer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,UAAU,SAAS;IACjB,KAAK,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IAChC,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CACrD;AACD,oFAAoF;AACpF,qBAAa,WAAW;IAGpB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,SAAS;IAH5B,OAAO,CAAC,OAAO,CAAuB;IACtC,YACmB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EAsBtC;IACD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAkBnB;IACF,OAAO,CAAC,QAAQ,CAAC,IAAI,CAQnB;IACF,OAAO,CAAC,QAAQ,CAAC,EAAE,CAGjB;IACF,OAAO,CAAC,QAAQ,CAAC,IAAI,CAEnB;IACF,MAAM,IAAI,IAAI,CAEb;IACD,OAAO,CAAC,MAAM;CAWf"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/** Capture and cancellation are shared by drawing, path handles and ruler drags. */
|
|
2
|
+
export class PointerDrag {
|
|
3
|
+
surface;
|
|
4
|
+
callbacks;
|
|
5
|
+
pointer = null;
|
|
6
|
+
constructor(surface, callbacks) {
|
|
7
|
+
this.surface = surface;
|
|
8
|
+
this.callbacks = callbacks;
|
|
9
|
+
surface.element.style.touchAction = 'none';
|
|
10
|
+
surface.listen(surface.element, 'pointerdown', this.down);
|
|
11
|
+
surface.listen(surface.view, 'pointermove', this.move);
|
|
12
|
+
surface.listen(surface.view, 'pointerup', this.up);
|
|
13
|
+
surface.listen(surface.view, 'pointercancel', this.lost);
|
|
14
|
+
surface.listen(surface.element, 'lostpointercapture', this.lost);
|
|
15
|
+
surface.listen(surface.view, 'blur', () => this.cancel());
|
|
16
|
+
surface.listen(surface.view, 'keydown', ((event) => {
|
|
17
|
+
if (this.pointer !== null && event.key === 'Escape') {
|
|
18
|
+
event.preventDefault();
|
|
19
|
+
event.stopPropagation();
|
|
20
|
+
this.cancel();
|
|
21
|
+
}
|
|
22
|
+
}), true);
|
|
23
|
+
surface.cleanup(() => this.cancel());
|
|
24
|
+
}
|
|
25
|
+
down = (event) => {
|
|
26
|
+
if (event.defaultPrevented || this.pointer !== null || event.button !== 0 || !event.isPrimary)
|
|
27
|
+
return;
|
|
28
|
+
try {
|
|
29
|
+
if (!this.callbacks.start(event))
|
|
30
|
+
return;
|
|
31
|
+
this.pointer = event.pointerId;
|
|
32
|
+
this.surface.element.setPointerCapture(event.pointerId);
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
event.stopPropagation();
|
|
35
|
+
}
|
|
36
|
+
catch (error) {
|
|
37
|
+
try {
|
|
38
|
+
if (this.pointer === null)
|
|
39
|
+
this.callbacks.end(true);
|
|
40
|
+
else
|
|
41
|
+
this.cancel();
|
|
42
|
+
}
|
|
43
|
+
catch (cleanup) {
|
|
44
|
+
throw new AggregateError([error, cleanup], 'Pointer acquisition and recovery failed');
|
|
45
|
+
}
|
|
46
|
+
throw error;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
move = (event) => {
|
|
50
|
+
if (event.pointerId !== this.pointer)
|
|
51
|
+
return;
|
|
52
|
+
try {
|
|
53
|
+
this.callbacks.move(event);
|
|
54
|
+
}
|
|
55
|
+
catch (error) {
|
|
56
|
+
this.cancel();
|
|
57
|
+
throw error;
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
up = (event) => {
|
|
61
|
+
if (event.pointerId !== this.pointer)
|
|
62
|
+
return;
|
|
63
|
+
this.finish(false, event);
|
|
64
|
+
};
|
|
65
|
+
lost = (event) => {
|
|
66
|
+
if (event.pointerId === this.pointer)
|
|
67
|
+
this.cancel();
|
|
68
|
+
};
|
|
69
|
+
cancel() {
|
|
70
|
+
this.finish(true);
|
|
71
|
+
}
|
|
72
|
+
finish(cancelled, event) {
|
|
73
|
+
const pointer = this.pointer;
|
|
74
|
+
if (pointer === null)
|
|
75
|
+
return;
|
|
76
|
+
this.pointer = null;
|
|
77
|
+
try {
|
|
78
|
+
this.callbacks.end(cancelled, event);
|
|
79
|
+
}
|
|
80
|
+
finally {
|
|
81
|
+
if (this.surface.element.hasPointerCapture?.(pointer))
|
|
82
|
+
this.surface.element.releasePointerCapture(pointer);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
//# sourceMappingURL=pointer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pointer.js","sourceRoot":"","sources":["../../src/editor/pointer.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Matrix } from '@rasamjs/core';
|
|
2
|
+
import type { Point, Svg } from '@rasamjs/core';
|
|
3
|
+
export declare function svg<Tag extends keyof SVGElementTagNameMap>(document: Document, tag: Tag, attributes?: Record<string, string | number>): SVGElementTagNameMap[Tag];
|
|
4
|
+
/** Owns an editor-only SVG and every observer/listener registered by its tool. */
|
|
5
|
+
export declare class Surface {
|
|
6
|
+
readonly drawing: Svg;
|
|
7
|
+
private readonly render;
|
|
8
|
+
readonly element: SVGSVGElement;
|
|
9
|
+
readonly view: Window & typeof globalThis;
|
|
10
|
+
private readonly cleanups;
|
|
11
|
+
private pending;
|
|
12
|
+
private disposed;
|
|
13
|
+
constructor(drawing: Svg, name: string, render: () => void);
|
|
14
|
+
cleanup(callback: () => void): void;
|
|
15
|
+
get isDestroyed(): boolean;
|
|
16
|
+
listen(target: EventTarget, type: string, listener: EventListener, capture?: boolean): void;
|
|
17
|
+
readonly schedule: () => void;
|
|
18
|
+
update(): this;
|
|
19
|
+
screenMatrix(): Matrix | null;
|
|
20
|
+
fromClient(point: Point): Point | null;
|
|
21
|
+
fromRoot(point: Point): Point | null;
|
|
22
|
+
extent(): Point;
|
|
23
|
+
rootBounds(): {
|
|
24
|
+
left: number;
|
|
25
|
+
top: number;
|
|
26
|
+
right: number;
|
|
27
|
+
bottom: number;
|
|
28
|
+
} | null;
|
|
29
|
+
destroy(): void;
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=surface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/editor/surface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAGhD,wBAAgB,GAAG,CAAC,GAAG,SAAS,MAAM,oBAAoB,EACxD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAM,GAC/C,oBAAoB,CAAC,GAAG,CAAC,CAI3B;AAED,kFAAkF;AAClF,qBAAa,OAAO;IAOhB,QAAQ,CAAC,OAAO,EAAE,GAAG;IAErB,OAAO,CAAC,QAAQ,CAAC,MAAM;IARzB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,UAAU,CAAC;IAC1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsB;IAC/C,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,QAAQ,CAAS;IACzB,YACW,OAAO,EAAE,GAAG,EACrB,IAAI,EAAE,MAAM,EACK,MAAM,EAAE,MAAM,IAAI,EA0CpC;IACD,OAAO,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAElC;IACD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,UAAQ,GAAG,IAAI,CAGxF;IACD,QAAQ,CAAC,QAAQ,QAAO,IAAI,CAM1B;IACF,MAAM,IAAI,IAAI,CAKb;IACD,YAAY,IAAI,MAAM,GAAG,IAAI,CAG5B;IACD,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,CAErC;IACD,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,GAAG,IAAI,CAGnC;IACD,MAAM,IAAI,KAAK,CAMd;IACD,UAAU,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAiBhF;IACD,OAAO,IAAI,IAAI,CAad;CACF"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { Matrix } from '@rasamjs/core';
|
|
2
|
+
import { Guards } from '@rasamjs/core/advanced';
|
|
3
|
+
export function svg(document, tag, attributes = {}) {
|
|
4
|
+
const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
|
|
5
|
+
for (const [key, value] of Object.entries(attributes))
|
|
6
|
+
element.setAttribute(key, String(value));
|
|
7
|
+
return element;
|
|
8
|
+
}
|
|
9
|
+
/** Owns an editor-only SVG and every observer/listener registered by its tool. */
|
|
10
|
+
export class Surface {
|
|
11
|
+
drawing;
|
|
12
|
+
render;
|
|
13
|
+
element;
|
|
14
|
+
view;
|
|
15
|
+
cleanups = [];
|
|
16
|
+
pending = null;
|
|
17
|
+
disposed = false;
|
|
18
|
+
constructor(drawing, name, render) {
|
|
19
|
+
this.drawing = drawing;
|
|
20
|
+
this.render = render;
|
|
21
|
+
if (!Guards.isTransformable(drawing) ||
|
|
22
|
+
drawing.isDestroyed ||
|
|
23
|
+
drawing.el.localName !== 'svg' ||
|
|
24
|
+
!drawing.el.isConnected ||
|
|
25
|
+
!drawing.el.ownerDocument.defaultView)
|
|
26
|
+
throw new TypeError('Editor overlay needs a live mounted drawing');
|
|
27
|
+
this.view = drawing.el.ownerDocument.defaultView;
|
|
28
|
+
this.element = svg(drawing.el.ownerDocument, 'svg', {
|
|
29
|
+
class: name,
|
|
30
|
+
width: '100%',
|
|
31
|
+
height: '100%',
|
|
32
|
+
'aria-label': name.replaceAll('-', ' '),
|
|
33
|
+
});
|
|
34
|
+
Object.assign(this.element.style, {
|
|
35
|
+
position: 'absolute',
|
|
36
|
+
inset: '0',
|
|
37
|
+
overflow: 'visible',
|
|
38
|
+
pointerEvents: 'none',
|
|
39
|
+
});
|
|
40
|
+
let outer = drawing.el;
|
|
41
|
+
while (outer.ownerSVGElement)
|
|
42
|
+
outer = outer.ownerSVGElement;
|
|
43
|
+
const host = outer.parentElement;
|
|
44
|
+
host.append(this.element);
|
|
45
|
+
const observer = new this.view.MutationObserver(this.schedule);
|
|
46
|
+
for (let ancestor = drawing.el; ancestor && ancestor !== host; ancestor = ancestor.parentElement)
|
|
47
|
+
observer.observe(ancestor, { attributes: true });
|
|
48
|
+
this.cleanup(() => observer.disconnect());
|
|
49
|
+
const resize = new this.view.ResizeObserver(this.schedule);
|
|
50
|
+
resize.observe(host);
|
|
51
|
+
this.cleanup(() => resize.disconnect());
|
|
52
|
+
this.listen(this.view, 'resize', this.schedule);
|
|
53
|
+
this.listen(this.view, 'scroll', this.schedule, true);
|
|
54
|
+
this.cleanup(drawing.onDispose(() => this.destroy()));
|
|
55
|
+
this.schedule();
|
|
56
|
+
}
|
|
57
|
+
cleanup(callback) {
|
|
58
|
+
this.cleanups.push(callback);
|
|
59
|
+
}
|
|
60
|
+
get isDestroyed() {
|
|
61
|
+
return this.disposed;
|
|
62
|
+
}
|
|
63
|
+
listen(target, type, listener, capture = false) {
|
|
64
|
+
target.addEventListener(type, listener, capture);
|
|
65
|
+
this.cleanup(() => target.removeEventListener(type, listener, capture));
|
|
66
|
+
}
|
|
67
|
+
schedule = () => {
|
|
68
|
+
if (!this.disposed && this.pending === null)
|
|
69
|
+
this.pending = this.view.requestAnimationFrame(() => {
|
|
70
|
+
this.pending = null;
|
|
71
|
+
this.update();
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
update() {
|
|
75
|
+
if (this.pending !== null)
|
|
76
|
+
this.view.cancelAnimationFrame(this.pending);
|
|
77
|
+
this.pending = null;
|
|
78
|
+
if (!this.disposed)
|
|
79
|
+
this.render();
|
|
80
|
+
return this;
|
|
81
|
+
}
|
|
82
|
+
screenMatrix() {
|
|
83
|
+
const m = this.element.getScreenCTM?.();
|
|
84
|
+
return m ? new Matrix(m.a, m.b, m.c, m.d, m.e, m.f) : null;
|
|
85
|
+
}
|
|
86
|
+
fromClient(point) {
|
|
87
|
+
return this.screenMatrix()?.inverse()?.apply(point) ?? null;
|
|
88
|
+
}
|
|
89
|
+
fromRoot(point) {
|
|
90
|
+
const client = this.drawing.toClient(point);
|
|
91
|
+
return client && this.fromClient(client);
|
|
92
|
+
}
|
|
93
|
+
extent() {
|
|
94
|
+
const rect = this.element.getBoundingClientRect();
|
|
95
|
+
return {
|
|
96
|
+
x: this.element.clientWidth || rect.width,
|
|
97
|
+
y: this.element.clientHeight || rect.height,
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
rootBounds() {
|
|
101
|
+
const matrix = this.screenMatrix(), size = this.extent();
|
|
102
|
+
if (!matrix || !size.x || !size.y)
|
|
103
|
+
return null;
|
|
104
|
+
const points = [
|
|
105
|
+
{ x: 0, y: 0 },
|
|
106
|
+
{ x: size.x, y: 0 },
|
|
107
|
+
{ x: size.x, y: size.y },
|
|
108
|
+
{ x: 0, y: size.y },
|
|
109
|
+
].map((p) => this.drawing.fromClient(matrix.apply(p)));
|
|
110
|
+
if (points.some((p) => !p))
|
|
111
|
+
return null;
|
|
112
|
+
return {
|
|
113
|
+
left: Math.min(...points.map((p) => p.x)),
|
|
114
|
+
right: Math.max(...points.map((p) => p.x)),
|
|
115
|
+
top: Math.min(...points.map((p) => p.y)),
|
|
116
|
+
bottom: Math.max(...points.map((p) => p.y)),
|
|
117
|
+
};
|
|
118
|
+
}
|
|
119
|
+
destroy() {
|
|
120
|
+
if (this.disposed)
|
|
121
|
+
return;
|
|
122
|
+
this.disposed = true;
|
|
123
|
+
if (this.pending !== null)
|
|
124
|
+
this.view.cancelAnimationFrame(this.pending);
|
|
125
|
+
const failures = [];
|
|
126
|
+
for (const callback of this.cleanups.reverse())
|
|
127
|
+
try {
|
|
128
|
+
callback();
|
|
129
|
+
}
|
|
130
|
+
catch (e) {
|
|
131
|
+
failures.push(e);
|
|
132
|
+
}
|
|
133
|
+
this.element.remove();
|
|
134
|
+
if (failures.length)
|
|
135
|
+
throw new AggregateError(failures, 'Editor overlay cleanup failed');
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
//# sourceMappingURL=surface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../src/editor/surface.ts"],"names":[],"mappings":"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"}
|
package/dist/grid.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { Point, Svg } from '@rasamjs/core';
|
|
2
|
+
export interface GridOptions {
|
|
3
|
+
readonly size: number;
|
|
4
|
+
readonly origin?: Point;
|
|
5
|
+
readonly stroke?: string;
|
|
6
|
+
}
|
|
7
|
+
/** A camera-aware grid outside the exported SVG, with bounded rendering at extreme zoom. */
|
|
8
|
+
export declare class GridOverlay {
|
|
9
|
+
private readonly drawing;
|
|
10
|
+
private readonly options;
|
|
11
|
+
private readonly surface;
|
|
12
|
+
private readonly path;
|
|
13
|
+
private readonly origin;
|
|
14
|
+
private enabledState;
|
|
15
|
+
constructor(drawing: Svg, options: GridOptions);
|
|
16
|
+
get enabled(): boolean;
|
|
17
|
+
get isDestroyed(): boolean;
|
|
18
|
+
set enabled(value: boolean);
|
|
19
|
+
update(): this;
|
|
20
|
+
destroy(): void;
|
|
21
|
+
private render;
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AACD,4FAA4F;AAC5F,qBAAa,WAAW;IAMpB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,OAAO,CAAC,QAAQ,CAAC,OAAO;IAN1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,YAAY,CAAQ;IAC5B,YACmB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,WAAW,EAuBtC;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAIzB;IACD,MAAM,IAAI,IAAI,CAGb;IACD,OAAO,IAAI,IAAI,CAEd;IACD,OAAO,CAAC,MAAM;CAuCf"}
|
package/dist/grid.js
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { assertPoint } from './snapping/options.js';
|
|
2
|
+
import { Surface, svg } from './editor/surface.js';
|
|
3
|
+
/** A camera-aware grid outside the exported SVG, with bounded rendering at extreme zoom. */
|
|
4
|
+
export class GridOverlay {
|
|
5
|
+
drawing;
|
|
6
|
+
options;
|
|
7
|
+
surface;
|
|
8
|
+
path;
|
|
9
|
+
origin;
|
|
10
|
+
enabledState = true;
|
|
11
|
+
constructor(drawing, options) {
|
|
12
|
+
this.drawing = drawing;
|
|
13
|
+
this.options = options;
|
|
14
|
+
if (!Number.isFinite(options?.size) || options.size <= 0)
|
|
15
|
+
throw new RangeError('Grid size must be positive and finite');
|
|
16
|
+
this.options = { ...options };
|
|
17
|
+
this.origin = { ...(options.origin ?? { x: 0, y: 0 }) };
|
|
18
|
+
assertPoint(this.origin, 'Grid origin');
|
|
19
|
+
if (options.stroke !== undefined &&
|
|
20
|
+
(typeof options.stroke !== 'string' || !options.stroke.trim()))
|
|
21
|
+
throw new TypeError('Grid stroke must be nonempty');
|
|
22
|
+
this.surface = new Surface(drawing, 'rasam-grid', () => this.render());
|
|
23
|
+
this.surface.element.style.zIndex = '-1';
|
|
24
|
+
this.surface.element.setAttribute('aria-hidden', 'true');
|
|
25
|
+
this.path = svg(drawing.el.ownerDocument, 'path', {
|
|
26
|
+
fill: 'none',
|
|
27
|
+
stroke: options.stroke ?? '#d9dee8',
|
|
28
|
+
'stroke-width': 1,
|
|
29
|
+
'vector-effect': 'non-scaling-stroke',
|
|
30
|
+
});
|
|
31
|
+
this.surface.element.append(this.path);
|
|
32
|
+
this.update();
|
|
33
|
+
}
|
|
34
|
+
get enabled() {
|
|
35
|
+
return this.enabledState;
|
|
36
|
+
}
|
|
37
|
+
get isDestroyed() {
|
|
38
|
+
return this.surface.isDestroyed;
|
|
39
|
+
}
|
|
40
|
+
set enabled(value) {
|
|
41
|
+
if (typeof value !== 'boolean')
|
|
42
|
+
throw new TypeError('enabled must be boolean');
|
|
43
|
+
this.enabledState = value;
|
|
44
|
+
this.update();
|
|
45
|
+
}
|
|
46
|
+
update() {
|
|
47
|
+
this.surface.update();
|
|
48
|
+
return this;
|
|
49
|
+
}
|
|
50
|
+
destroy() {
|
|
51
|
+
this.surface.destroy();
|
|
52
|
+
}
|
|
53
|
+
render() {
|
|
54
|
+
this.surface.element.style.display = this.enabledState ? '' : 'none';
|
|
55
|
+
const bounds = this.surface.rootBounds();
|
|
56
|
+
if (!this.enabledState || !bounds) {
|
|
57
|
+
this.path.setAttribute('d', '');
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const a = this.drawing.toClient({ x: 0, y: 0 }), b = this.drawing.toClient({ x: this.options.size, y: 0 });
|
|
61
|
+
const c = this.drawing.toClient({ x: 0, y: this.options.size });
|
|
62
|
+
if (!a || !b || !c)
|
|
63
|
+
return;
|
|
64
|
+
let step = this.options.size;
|
|
65
|
+
const pixels = Math.min(Math.hypot(b.x - a.x, b.y - a.y), Math.hypot(c.x - a.x, c.y - a.y));
|
|
66
|
+
if (pixels <= 0)
|
|
67
|
+
return;
|
|
68
|
+
while ((step / this.options.size) * pixels < 8 ||
|
|
69
|
+
(bounds.right - bounds.left + bounds.bottom - bounds.top) / step > 512)
|
|
70
|
+
step *= 2;
|
|
71
|
+
const segments = [];
|
|
72
|
+
const line = (a, b) => {
|
|
73
|
+
const from = this.surface.fromRoot(a), to = this.surface.fromRoot(b);
|
|
74
|
+
if (from && to)
|
|
75
|
+
segments.push(`M${from.x},${from.y}L${to.x},${to.y}`);
|
|
76
|
+
};
|
|
77
|
+
for (let x = this.origin.x + Math.ceil((bounds.left - this.origin.x) / step) * step; x <= bounds.right; x += step)
|
|
78
|
+
line({ x, y: bounds.top }, { x, y: bounds.bottom });
|
|
79
|
+
for (let y = this.origin.y + Math.ceil((bounds.top - this.origin.y) / step) * step; y <= bounds.bottom; y += step)
|
|
80
|
+
line({ x: bounds.left, y }, { x: bounds.right, y });
|
|
81
|
+
this.path.setAttribute('d', segments.join(''));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
//# sourceMappingURL=grid.js.map
|
package/dist/grid.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../src/grid.ts"],"names":[],"mappings":"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"}
|