@pooder/kit 5.1.0 → 5.3.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/.test-dist/src/CanvasService.js +249 -249
- package/.test-dist/src/ViewportSystem.js +75 -75
- package/.test-dist/src/background.js +203 -203
- package/.test-dist/src/bridgeSelection.js +20 -20
- package/.test-dist/src/constraints.js +237 -237
- package/.test-dist/src/dieline.js +818 -818
- package/.test-dist/src/edgeScale.js +12 -12
- package/.test-dist/src/extensions/background.js +203 -0
- package/.test-dist/src/extensions/bridgeSelection.js +20 -0
- package/.test-dist/src/extensions/constraints.js +237 -0
- package/.test-dist/src/extensions/dieline.js +828 -0
- package/.test-dist/src/extensions/edgeScale.js +12 -0
- package/.test-dist/src/extensions/feature.js +825 -0
- package/.test-dist/src/extensions/featureComplete.js +32 -0
- package/.test-dist/src/extensions/film.js +167 -0
- package/.test-dist/src/extensions/geometry.js +545 -0
- package/.test-dist/src/extensions/image.js +1529 -0
- package/.test-dist/src/extensions/index.js +30 -0
- package/.test-dist/src/extensions/maskOps.js +279 -0
- package/.test-dist/src/extensions/mirror.js +104 -0
- package/.test-dist/src/extensions/ruler.js +345 -0
- package/.test-dist/src/extensions/sceneLayout.js +96 -0
- package/.test-dist/src/extensions/sceneLayoutModel.js +196 -0
- package/.test-dist/src/extensions/sceneVisibility.js +62 -0
- package/.test-dist/src/extensions/size.js +331 -0
- package/.test-dist/src/extensions/tracer.js +538 -0
- package/.test-dist/src/extensions/white-ink.js +1190 -0
- package/.test-dist/src/extensions/wrappedOffsets.js +33 -0
- package/.test-dist/src/feature.js +826 -826
- package/.test-dist/src/featureComplete.js +32 -32
- package/.test-dist/src/film.js +167 -167
- package/.test-dist/src/geometry.js +506 -506
- package/.test-dist/src/image.js +1250 -1250
- package/.test-dist/src/index.js +2 -19
- package/.test-dist/src/maskOps.js +270 -270
- package/.test-dist/src/mirror.js +104 -104
- package/.test-dist/src/renderSpec.js +2 -2
- package/.test-dist/src/ruler.js +343 -343
- package/.test-dist/src/sceneLayout.js +99 -99
- package/.test-dist/src/sceneLayoutModel.js +196 -196
- package/.test-dist/src/sceneView.js +40 -40
- package/.test-dist/src/sceneVisibility.js +42 -42
- package/.test-dist/src/services/CanvasService.js +249 -0
- package/.test-dist/src/services/ViewportSystem.js +76 -0
- package/.test-dist/src/services/index.js +24 -0
- package/.test-dist/src/services/renderSpec.js +2 -0
- package/.test-dist/src/size.js +332 -332
- package/.test-dist/src/tracer.js +544 -544
- package/.test-dist/src/white-ink.js +829 -829
- package/.test-dist/src/wrappedOffsets.js +33 -33
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +14 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.js +3521 -3220
- package/dist/index.mjs +3532 -3226
- package/package.json +1 -1
- package/src/coordinate.ts +106 -106
- package/src/extensions/background.ts +230 -230
- package/src/extensions/bridgeSelection.ts +17 -17
- package/src/extensions/constraints.ts +322 -322
- package/src/extensions/dieline.ts +20 -17
- package/src/extensions/edgeScale.ts +19 -19
- package/src/extensions/feature.ts +1021 -1021
- package/src/extensions/featureComplete.ts +46 -46
- package/src/extensions/film.ts +194 -194
- package/src/extensions/geometry.ts +719 -719
- package/src/extensions/image.ts +1924 -1594
- package/src/extensions/index.ts +11 -11
- package/src/extensions/maskOps.ts +365 -299
- package/src/extensions/mirror.ts +128 -128
- package/src/extensions/ruler.ts +451 -451
- package/src/extensions/sceneLayout.ts +140 -140
- package/src/extensions/sceneLayoutModel.ts +342 -342
- package/src/extensions/sceneVisibility.ts +71 -71
- package/src/extensions/size.ts +389 -389
- package/src/extensions/tracer.ts +302 -370
- package/src/extensions/white-ink.ts +1489 -1366
- package/src/extensions/wrappedOffsets.ts +33 -33
- package/src/index.ts +2 -2
- package/src/services/CanvasService.ts +300 -300
- package/src/services/ViewportSystem.ts +95 -95
- package/src/services/index.ts +3 -3
- package/src/services/renderSpec.ts +18 -18
- package/src/units.ts +27 -27
- package/tests/run.ts +118 -118
- package/tsconfig.test.json +15 -15
|
@@ -1,249 +1,249 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
const ViewportSystem_1 = require("./ViewportSystem");
|
|
5
|
-
class CanvasService {
|
|
6
|
-
constructor(el, options) {
|
|
7
|
-
if (el instanceof fabric_1.Canvas) {
|
|
8
|
-
this.canvas = el;
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
this.canvas = new fabric_1.Canvas(el, {
|
|
12
|
-
preserveObjectStacking: true,
|
|
13
|
-
...options,
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
this.viewport = new ViewportSystem_1.ViewportSystem();
|
|
17
|
-
if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
|
|
18
|
-
this.viewport.updateContainer(this.canvas.width, this.canvas.height);
|
|
19
|
-
}
|
|
20
|
-
if (options?.eventBus) {
|
|
21
|
-
this.setEventBus(options.eventBus);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
setEventBus(eventBus) {
|
|
25
|
-
this.eventBus = eventBus;
|
|
26
|
-
this.setupEvents();
|
|
27
|
-
}
|
|
28
|
-
setupEvents() {
|
|
29
|
-
if (!this.eventBus)
|
|
30
|
-
return;
|
|
31
|
-
const bus = this.eventBus;
|
|
32
|
-
const forward = (name) => (e) => bus.emit(name, e);
|
|
33
|
-
this.canvas.on("selection:created", forward("selection:created"));
|
|
34
|
-
this.canvas.on("selection:updated", forward("selection:updated"));
|
|
35
|
-
this.canvas.on("selection:cleared", forward("selection:cleared"));
|
|
36
|
-
this.canvas.on("object:modified", forward("object:modified"));
|
|
37
|
-
this.canvas.on("object:added", forward("object:added"));
|
|
38
|
-
this.canvas.on("object:removed", forward("object:removed"));
|
|
39
|
-
}
|
|
40
|
-
dispose() {
|
|
41
|
-
this.canvas.dispose();
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Get a layer (Group) by its ID.
|
|
45
|
-
* We assume layers are Groups directly on the canvas with a data.id property.
|
|
46
|
-
*/
|
|
47
|
-
getLayer(id) {
|
|
48
|
-
return this.canvas.getObjects().find((obj) => obj.data?.id === id);
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* Create a layer (Group) with the given ID if it doesn't exist.
|
|
52
|
-
*/
|
|
53
|
-
createLayer(id, options = {}) {
|
|
54
|
-
let layer = this.getLayer(id);
|
|
55
|
-
if (!layer) {
|
|
56
|
-
const defaultOptions = {
|
|
57
|
-
selectable: false,
|
|
58
|
-
evented: false,
|
|
59
|
-
...options,
|
|
60
|
-
data: { ...options.data, id },
|
|
61
|
-
};
|
|
62
|
-
layer = new fabric_1.Group([], defaultOptions);
|
|
63
|
-
this.canvas.add(layer);
|
|
64
|
-
}
|
|
65
|
-
return layer;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Find an object by ID, optionally within a specific layer.
|
|
69
|
-
*/
|
|
70
|
-
getObject(id, layerId) {
|
|
71
|
-
if (layerId) {
|
|
72
|
-
const layer = this.getLayer(layerId);
|
|
73
|
-
if (!layer)
|
|
74
|
-
return undefined;
|
|
75
|
-
return layer.getObjects().find((obj) => obj.data?.id === id);
|
|
76
|
-
}
|
|
77
|
-
return this.canvas.getObjects().find((obj) => obj.data?.id === id);
|
|
78
|
-
}
|
|
79
|
-
requestRenderAll() {
|
|
80
|
-
this.canvas.requestRenderAll();
|
|
81
|
-
}
|
|
82
|
-
resize(width, height) {
|
|
83
|
-
this.canvas.setDimensions({ width, height });
|
|
84
|
-
this.viewport.updateContainer(width, height);
|
|
85
|
-
this.eventBus?.emit("canvas:resized", { width, height });
|
|
86
|
-
this.requestRenderAll();
|
|
87
|
-
}
|
|
88
|
-
async applyLayerSpec(spec) {
|
|
89
|
-
const layer = this.createLayer(spec.id, spec.props || {});
|
|
90
|
-
await this.applyObjectSpecsToContainer(layer, spec.objects);
|
|
91
|
-
}
|
|
92
|
-
async applyObjectSpecsToLayer(layerId, objects) {
|
|
93
|
-
const layer = this.createLayer(layerId, {});
|
|
94
|
-
await this.applyObjectSpecsToContainer(layer, objects);
|
|
95
|
-
}
|
|
96
|
-
getRootLayerObjects(layerId) {
|
|
97
|
-
return this.canvas
|
|
98
|
-
.getObjects()
|
|
99
|
-
.filter((obj) => obj?.data?.layerId === layerId);
|
|
100
|
-
}
|
|
101
|
-
async applyObjectSpecsToRootLayer(layerId, specs) {
|
|
102
|
-
const desiredIds = new Set(specs.map((s) => s.id));
|
|
103
|
-
const existing = this.getRootLayerObjects(layerId);
|
|
104
|
-
existing.forEach((obj) => {
|
|
105
|
-
const id = obj?.data?.id;
|
|
106
|
-
if (typeof id === "string" && !desiredIds.has(id)) {
|
|
107
|
-
this.canvas.remove(obj);
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
const byId = new Map();
|
|
111
|
-
this.getRootLayerObjects(layerId).forEach((obj) => {
|
|
112
|
-
const id = obj?.data?.id;
|
|
113
|
-
if (typeof id === "string")
|
|
114
|
-
byId.set(id, obj);
|
|
115
|
-
});
|
|
116
|
-
for (let index = 0; index < specs.length; index += 1) {
|
|
117
|
-
const spec = specs[index];
|
|
118
|
-
let current = byId.get(spec.id);
|
|
119
|
-
if (current &&
|
|
120
|
-
spec.type === "image" &&
|
|
121
|
-
spec.src &&
|
|
122
|
-
current.getSrc &&
|
|
123
|
-
current.getSrc() !== spec.src) {
|
|
124
|
-
this.canvas.remove(current);
|
|
125
|
-
byId.delete(spec.id);
|
|
126
|
-
current = undefined;
|
|
127
|
-
}
|
|
128
|
-
if (!current) {
|
|
129
|
-
const created = await this.createFabricObject(spec);
|
|
130
|
-
if (!created)
|
|
131
|
-
continue;
|
|
132
|
-
this.patchFabricObject(created, spec, { layerId });
|
|
133
|
-
this.canvas.add(created);
|
|
134
|
-
byId.set(spec.id, created);
|
|
135
|
-
continue;
|
|
136
|
-
}
|
|
137
|
-
this.patchFabricObject(current, spec, { layerId });
|
|
138
|
-
}
|
|
139
|
-
this.requestRenderAll();
|
|
140
|
-
}
|
|
141
|
-
async applyObjectSpecsToContainer(container, specs) {
|
|
142
|
-
const desiredIds = new Set(specs.map((s) => s.id));
|
|
143
|
-
const existing = container.getObjects();
|
|
144
|
-
existing.forEach((obj) => {
|
|
145
|
-
const id = obj?.data?.id;
|
|
146
|
-
if (typeof id === "string" && !desiredIds.has(id)) {
|
|
147
|
-
container.remove(obj);
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
const byId = new Map();
|
|
151
|
-
container.getObjects().forEach((obj) => {
|
|
152
|
-
const id = obj?.data?.id;
|
|
153
|
-
if (typeof id === "string")
|
|
154
|
-
byId.set(id, obj);
|
|
155
|
-
});
|
|
156
|
-
for (let index = 0; index < specs.length; index += 1) {
|
|
157
|
-
const spec = specs[index];
|
|
158
|
-
let current = byId.get(spec.id);
|
|
159
|
-
if (current &&
|
|
160
|
-
spec.type === "image" &&
|
|
161
|
-
spec.src &&
|
|
162
|
-
current.getSrc &&
|
|
163
|
-
current.getSrc() !== spec.src) {
|
|
164
|
-
container.remove(current);
|
|
165
|
-
byId.delete(spec.id);
|
|
166
|
-
current = undefined;
|
|
167
|
-
}
|
|
168
|
-
if (!current) {
|
|
169
|
-
const created = await this.createFabricObject(spec);
|
|
170
|
-
if (!created)
|
|
171
|
-
continue;
|
|
172
|
-
container.add(created);
|
|
173
|
-
current = created;
|
|
174
|
-
byId.set(spec.id, current);
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
this.patchFabricObject(current, spec);
|
|
178
|
-
}
|
|
179
|
-
this.moveObjectInContainer(container, current, index);
|
|
180
|
-
}
|
|
181
|
-
container.dirty = true;
|
|
182
|
-
this.requestRenderAll();
|
|
183
|
-
}
|
|
184
|
-
patchFabricObject(obj, spec, extraData) {
|
|
185
|
-
const nextData = {
|
|
186
|
-
...(obj.data || {}),
|
|
187
|
-
...(spec.data || {}),
|
|
188
|
-
...(extraData || {}),
|
|
189
|
-
id: spec.id,
|
|
190
|
-
};
|
|
191
|
-
obj.set({ ...(spec.props || {}), data: nextData });
|
|
192
|
-
obj.setCoords();
|
|
193
|
-
}
|
|
194
|
-
moveObjectInContainer(container, obj, index) {
|
|
195
|
-
if (!obj)
|
|
196
|
-
return;
|
|
197
|
-
const moveObjectTo = container.moveObjectTo;
|
|
198
|
-
if (typeof moveObjectTo === "function") {
|
|
199
|
-
moveObjectTo.call(container, obj, index);
|
|
200
|
-
return;
|
|
201
|
-
}
|
|
202
|
-
const list = container._objects;
|
|
203
|
-
if (!Array.isArray(list))
|
|
204
|
-
return;
|
|
205
|
-
const from = list.indexOf(obj);
|
|
206
|
-
if (from < 0 || from === index)
|
|
207
|
-
return;
|
|
208
|
-
list.splice(from, 1);
|
|
209
|
-
const target = Math.max(0, Math.min(index, list.length));
|
|
210
|
-
list.splice(target, 0, obj);
|
|
211
|
-
if (typeof container._onStackOrderChanged === "function") {
|
|
212
|
-
container._onStackOrderChanged();
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
async createFabricObject(spec) {
|
|
216
|
-
if (spec.type === "rect") {
|
|
217
|
-
const rect = new fabric_1.Rect({
|
|
218
|
-
...(spec.props || {}),
|
|
219
|
-
data: { ...(spec.data || {}), id: spec.id },
|
|
220
|
-
});
|
|
221
|
-
rect.setCoords();
|
|
222
|
-
return rect;
|
|
223
|
-
}
|
|
224
|
-
if (spec.type === "path") {
|
|
225
|
-
const pathData = spec.props?.path || spec.props?.pathData;
|
|
226
|
-
if (!pathData)
|
|
227
|
-
return undefined;
|
|
228
|
-
const path = new fabric_1.Path(pathData, {
|
|
229
|
-
...(spec.props || {}),
|
|
230
|
-
data: { ...(spec.data || {}), id: spec.id },
|
|
231
|
-
});
|
|
232
|
-
path.setCoords();
|
|
233
|
-
return path;
|
|
234
|
-
}
|
|
235
|
-
if (spec.type === "image") {
|
|
236
|
-
if (!spec.src)
|
|
237
|
-
return undefined;
|
|
238
|
-
const image = await fabric_1.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
|
|
239
|
-
image.set({
|
|
240
|
-
...(spec.props || {}),
|
|
241
|
-
data: { ...(spec.data || {}), id: spec.id },
|
|
242
|
-
});
|
|
243
|
-
image.setCoords();
|
|
244
|
-
return image;
|
|
245
|
-
}
|
|
246
|
-
return undefined;
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
exports.default = CanvasService;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const fabric_1 = require("fabric");
|
|
4
|
+
const ViewportSystem_1 = require("./ViewportSystem");
|
|
5
|
+
class CanvasService {
|
|
6
|
+
constructor(el, options) {
|
|
7
|
+
if (el instanceof fabric_1.Canvas) {
|
|
8
|
+
this.canvas = el;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
this.canvas = new fabric_1.Canvas(el, {
|
|
12
|
+
preserveObjectStacking: true,
|
|
13
|
+
...options,
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
this.viewport = new ViewportSystem_1.ViewportSystem();
|
|
17
|
+
if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
|
|
18
|
+
this.viewport.updateContainer(this.canvas.width, this.canvas.height);
|
|
19
|
+
}
|
|
20
|
+
if (options?.eventBus) {
|
|
21
|
+
this.setEventBus(options.eventBus);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
setEventBus(eventBus) {
|
|
25
|
+
this.eventBus = eventBus;
|
|
26
|
+
this.setupEvents();
|
|
27
|
+
}
|
|
28
|
+
setupEvents() {
|
|
29
|
+
if (!this.eventBus)
|
|
30
|
+
return;
|
|
31
|
+
const bus = this.eventBus;
|
|
32
|
+
const forward = (name) => (e) => bus.emit(name, e);
|
|
33
|
+
this.canvas.on("selection:created", forward("selection:created"));
|
|
34
|
+
this.canvas.on("selection:updated", forward("selection:updated"));
|
|
35
|
+
this.canvas.on("selection:cleared", forward("selection:cleared"));
|
|
36
|
+
this.canvas.on("object:modified", forward("object:modified"));
|
|
37
|
+
this.canvas.on("object:added", forward("object:added"));
|
|
38
|
+
this.canvas.on("object:removed", forward("object:removed"));
|
|
39
|
+
}
|
|
40
|
+
dispose() {
|
|
41
|
+
this.canvas.dispose();
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Get a layer (Group) by its ID.
|
|
45
|
+
* We assume layers are Groups directly on the canvas with a data.id property.
|
|
46
|
+
*/
|
|
47
|
+
getLayer(id) {
|
|
48
|
+
return this.canvas.getObjects().find((obj) => obj.data?.id === id);
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Create a layer (Group) with the given ID if it doesn't exist.
|
|
52
|
+
*/
|
|
53
|
+
createLayer(id, options = {}) {
|
|
54
|
+
let layer = this.getLayer(id);
|
|
55
|
+
if (!layer) {
|
|
56
|
+
const defaultOptions = {
|
|
57
|
+
selectable: false,
|
|
58
|
+
evented: false,
|
|
59
|
+
...options,
|
|
60
|
+
data: { ...options.data, id },
|
|
61
|
+
};
|
|
62
|
+
layer = new fabric_1.Group([], defaultOptions);
|
|
63
|
+
this.canvas.add(layer);
|
|
64
|
+
}
|
|
65
|
+
return layer;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Find an object by ID, optionally within a specific layer.
|
|
69
|
+
*/
|
|
70
|
+
getObject(id, layerId) {
|
|
71
|
+
if (layerId) {
|
|
72
|
+
const layer = this.getLayer(layerId);
|
|
73
|
+
if (!layer)
|
|
74
|
+
return undefined;
|
|
75
|
+
return layer.getObjects().find((obj) => obj.data?.id === id);
|
|
76
|
+
}
|
|
77
|
+
return this.canvas.getObjects().find((obj) => obj.data?.id === id);
|
|
78
|
+
}
|
|
79
|
+
requestRenderAll() {
|
|
80
|
+
this.canvas.requestRenderAll();
|
|
81
|
+
}
|
|
82
|
+
resize(width, height) {
|
|
83
|
+
this.canvas.setDimensions({ width, height });
|
|
84
|
+
this.viewport.updateContainer(width, height);
|
|
85
|
+
this.eventBus?.emit("canvas:resized", { width, height });
|
|
86
|
+
this.requestRenderAll();
|
|
87
|
+
}
|
|
88
|
+
async applyLayerSpec(spec) {
|
|
89
|
+
const layer = this.createLayer(spec.id, spec.props || {});
|
|
90
|
+
await this.applyObjectSpecsToContainer(layer, spec.objects);
|
|
91
|
+
}
|
|
92
|
+
async applyObjectSpecsToLayer(layerId, objects) {
|
|
93
|
+
const layer = this.createLayer(layerId, {});
|
|
94
|
+
await this.applyObjectSpecsToContainer(layer, objects);
|
|
95
|
+
}
|
|
96
|
+
getRootLayerObjects(layerId) {
|
|
97
|
+
return this.canvas
|
|
98
|
+
.getObjects()
|
|
99
|
+
.filter((obj) => obj?.data?.layerId === layerId);
|
|
100
|
+
}
|
|
101
|
+
async applyObjectSpecsToRootLayer(layerId, specs) {
|
|
102
|
+
const desiredIds = new Set(specs.map((s) => s.id));
|
|
103
|
+
const existing = this.getRootLayerObjects(layerId);
|
|
104
|
+
existing.forEach((obj) => {
|
|
105
|
+
const id = obj?.data?.id;
|
|
106
|
+
if (typeof id === "string" && !desiredIds.has(id)) {
|
|
107
|
+
this.canvas.remove(obj);
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
const byId = new Map();
|
|
111
|
+
this.getRootLayerObjects(layerId).forEach((obj) => {
|
|
112
|
+
const id = obj?.data?.id;
|
|
113
|
+
if (typeof id === "string")
|
|
114
|
+
byId.set(id, obj);
|
|
115
|
+
});
|
|
116
|
+
for (let index = 0; index < specs.length; index += 1) {
|
|
117
|
+
const spec = specs[index];
|
|
118
|
+
let current = byId.get(spec.id);
|
|
119
|
+
if (current &&
|
|
120
|
+
spec.type === "image" &&
|
|
121
|
+
spec.src &&
|
|
122
|
+
current.getSrc &&
|
|
123
|
+
current.getSrc() !== spec.src) {
|
|
124
|
+
this.canvas.remove(current);
|
|
125
|
+
byId.delete(spec.id);
|
|
126
|
+
current = undefined;
|
|
127
|
+
}
|
|
128
|
+
if (!current) {
|
|
129
|
+
const created = await this.createFabricObject(spec);
|
|
130
|
+
if (!created)
|
|
131
|
+
continue;
|
|
132
|
+
this.patchFabricObject(created, spec, { layerId });
|
|
133
|
+
this.canvas.add(created);
|
|
134
|
+
byId.set(spec.id, created);
|
|
135
|
+
continue;
|
|
136
|
+
}
|
|
137
|
+
this.patchFabricObject(current, spec, { layerId });
|
|
138
|
+
}
|
|
139
|
+
this.requestRenderAll();
|
|
140
|
+
}
|
|
141
|
+
async applyObjectSpecsToContainer(container, specs) {
|
|
142
|
+
const desiredIds = new Set(specs.map((s) => s.id));
|
|
143
|
+
const existing = container.getObjects();
|
|
144
|
+
existing.forEach((obj) => {
|
|
145
|
+
const id = obj?.data?.id;
|
|
146
|
+
if (typeof id === "string" && !desiredIds.has(id)) {
|
|
147
|
+
container.remove(obj);
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
const byId = new Map();
|
|
151
|
+
container.getObjects().forEach((obj) => {
|
|
152
|
+
const id = obj?.data?.id;
|
|
153
|
+
if (typeof id === "string")
|
|
154
|
+
byId.set(id, obj);
|
|
155
|
+
});
|
|
156
|
+
for (let index = 0; index < specs.length; index += 1) {
|
|
157
|
+
const spec = specs[index];
|
|
158
|
+
let current = byId.get(spec.id);
|
|
159
|
+
if (current &&
|
|
160
|
+
spec.type === "image" &&
|
|
161
|
+
spec.src &&
|
|
162
|
+
current.getSrc &&
|
|
163
|
+
current.getSrc() !== spec.src) {
|
|
164
|
+
container.remove(current);
|
|
165
|
+
byId.delete(spec.id);
|
|
166
|
+
current = undefined;
|
|
167
|
+
}
|
|
168
|
+
if (!current) {
|
|
169
|
+
const created = await this.createFabricObject(spec);
|
|
170
|
+
if (!created)
|
|
171
|
+
continue;
|
|
172
|
+
container.add(created);
|
|
173
|
+
current = created;
|
|
174
|
+
byId.set(spec.id, current);
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
this.patchFabricObject(current, spec);
|
|
178
|
+
}
|
|
179
|
+
this.moveObjectInContainer(container, current, index);
|
|
180
|
+
}
|
|
181
|
+
container.dirty = true;
|
|
182
|
+
this.requestRenderAll();
|
|
183
|
+
}
|
|
184
|
+
patchFabricObject(obj, spec, extraData) {
|
|
185
|
+
const nextData = {
|
|
186
|
+
...(obj.data || {}),
|
|
187
|
+
...(spec.data || {}),
|
|
188
|
+
...(extraData || {}),
|
|
189
|
+
id: spec.id,
|
|
190
|
+
};
|
|
191
|
+
obj.set({ ...(spec.props || {}), data: nextData });
|
|
192
|
+
obj.setCoords();
|
|
193
|
+
}
|
|
194
|
+
moveObjectInContainer(container, obj, index) {
|
|
195
|
+
if (!obj)
|
|
196
|
+
return;
|
|
197
|
+
const moveObjectTo = container.moveObjectTo;
|
|
198
|
+
if (typeof moveObjectTo === "function") {
|
|
199
|
+
moveObjectTo.call(container, obj, index);
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
const list = container._objects;
|
|
203
|
+
if (!Array.isArray(list))
|
|
204
|
+
return;
|
|
205
|
+
const from = list.indexOf(obj);
|
|
206
|
+
if (from < 0 || from === index)
|
|
207
|
+
return;
|
|
208
|
+
list.splice(from, 1);
|
|
209
|
+
const target = Math.max(0, Math.min(index, list.length));
|
|
210
|
+
list.splice(target, 0, obj);
|
|
211
|
+
if (typeof container._onStackOrderChanged === "function") {
|
|
212
|
+
container._onStackOrderChanged();
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
async createFabricObject(spec) {
|
|
216
|
+
if (spec.type === "rect") {
|
|
217
|
+
const rect = new fabric_1.Rect({
|
|
218
|
+
...(spec.props || {}),
|
|
219
|
+
data: { ...(spec.data || {}), id: spec.id },
|
|
220
|
+
});
|
|
221
|
+
rect.setCoords();
|
|
222
|
+
return rect;
|
|
223
|
+
}
|
|
224
|
+
if (spec.type === "path") {
|
|
225
|
+
const pathData = spec.props?.path || spec.props?.pathData;
|
|
226
|
+
if (!pathData)
|
|
227
|
+
return undefined;
|
|
228
|
+
const path = new fabric_1.Path(pathData, {
|
|
229
|
+
...(spec.props || {}),
|
|
230
|
+
data: { ...(spec.data || {}), id: spec.id },
|
|
231
|
+
});
|
|
232
|
+
path.setCoords();
|
|
233
|
+
return path;
|
|
234
|
+
}
|
|
235
|
+
if (spec.type === "image") {
|
|
236
|
+
if (!spec.src)
|
|
237
|
+
return undefined;
|
|
238
|
+
const image = await fabric_1.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
|
|
239
|
+
image.set({
|
|
240
|
+
...(spec.props || {}),
|
|
241
|
+
data: { ...(spec.data || {}), id: spec.id },
|
|
242
|
+
});
|
|
243
|
+
image.setCoords();
|
|
244
|
+
return image;
|
|
245
|
+
}
|
|
246
|
+
return undefined;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
exports.default = CanvasService;
|
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ViewportSystem = void 0;
|
|
4
|
-
const coordinate_1 = require("./coordinate");
|
|
5
|
-
class ViewportSystem {
|
|
6
|
-
constructor(containerSize = { width: 0, height: 0 }, physicalSize = { width: 0, height: 0 }, padding = 40) {
|
|
7
|
-
this._containerSize = { width: 0, height: 0 };
|
|
8
|
-
this._physicalSize = { width: 0, height: 0 };
|
|
9
|
-
this._padding = 0;
|
|
10
|
-
this._layout = {
|
|
11
|
-
scale: 1,
|
|
12
|
-
offsetX: 0,
|
|
13
|
-
offsetY: 0,
|
|
14
|
-
width: 0,
|
|
15
|
-
height: 0,
|
|
16
|
-
};
|
|
17
|
-
this._containerSize = containerSize;
|
|
18
|
-
this._physicalSize = physicalSize;
|
|
19
|
-
this._padding = padding;
|
|
20
|
-
this.updateLayout();
|
|
21
|
-
}
|
|
22
|
-
get layout() {
|
|
23
|
-
return this._layout;
|
|
24
|
-
}
|
|
25
|
-
get scale() {
|
|
26
|
-
return this._layout.scale;
|
|
27
|
-
}
|
|
28
|
-
get offset() {
|
|
29
|
-
return { x: this._layout.offsetX, y: this._layout.offsetY };
|
|
30
|
-
}
|
|
31
|
-
updateContainer(width, height) {
|
|
32
|
-
if (this._containerSize.width === width &&
|
|
33
|
-
this._containerSize.height === height)
|
|
34
|
-
return;
|
|
35
|
-
this._containerSize = { width, height };
|
|
36
|
-
this.updateLayout();
|
|
37
|
-
}
|
|
38
|
-
updatePhysical(width, height) {
|
|
39
|
-
if (this._physicalSize.width === width && this._physicalSize.height === height)
|
|
40
|
-
return;
|
|
41
|
-
this._physicalSize = { width, height };
|
|
42
|
-
this.updateLayout();
|
|
43
|
-
}
|
|
44
|
-
setPadding(padding) {
|
|
45
|
-
if (this._padding === padding)
|
|
46
|
-
return;
|
|
47
|
-
this._padding = padding;
|
|
48
|
-
this.updateLayout();
|
|
49
|
-
}
|
|
50
|
-
updateLayout() {
|
|
51
|
-
this._layout = coordinate_1.Coordinate.calculateLayout(this._containerSize, this._physicalSize, this._padding);
|
|
52
|
-
}
|
|
53
|
-
toPixel(value) {
|
|
54
|
-
return value * this._layout.scale;
|
|
55
|
-
}
|
|
56
|
-
toPhysical(value) {
|
|
57
|
-
return this._layout.scale === 0 ? 0 : value / this._layout.scale;
|
|
58
|
-
}
|
|
59
|
-
toPixelPoint(point) {
|
|
60
|
-
return {
|
|
61
|
-
x: point.x * this._layout.scale + this._layout.offsetX,
|
|
62
|
-
y: point.y * this._layout.scale + this._layout.offsetY,
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
// Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
|
|
66
|
-
toPhysicalPoint(point) {
|
|
67
|
-
if (this._layout.scale === 0)
|
|
68
|
-
return { x: 0, y: 0 };
|
|
69
|
-
return {
|
|
70
|
-
x: (point.x - this._layout.offsetX) / this._layout.scale,
|
|
71
|
-
y: (point.y - this._layout.offsetY) / this._layout.scale,
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
exports.ViewportSystem = ViewportSystem;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ViewportSystem = void 0;
|
|
4
|
+
const coordinate_1 = require("./coordinate");
|
|
5
|
+
class ViewportSystem {
|
|
6
|
+
constructor(containerSize = { width: 0, height: 0 }, physicalSize = { width: 0, height: 0 }, padding = 40) {
|
|
7
|
+
this._containerSize = { width: 0, height: 0 };
|
|
8
|
+
this._physicalSize = { width: 0, height: 0 };
|
|
9
|
+
this._padding = 0;
|
|
10
|
+
this._layout = {
|
|
11
|
+
scale: 1,
|
|
12
|
+
offsetX: 0,
|
|
13
|
+
offsetY: 0,
|
|
14
|
+
width: 0,
|
|
15
|
+
height: 0,
|
|
16
|
+
};
|
|
17
|
+
this._containerSize = containerSize;
|
|
18
|
+
this._physicalSize = physicalSize;
|
|
19
|
+
this._padding = padding;
|
|
20
|
+
this.updateLayout();
|
|
21
|
+
}
|
|
22
|
+
get layout() {
|
|
23
|
+
return this._layout;
|
|
24
|
+
}
|
|
25
|
+
get scale() {
|
|
26
|
+
return this._layout.scale;
|
|
27
|
+
}
|
|
28
|
+
get offset() {
|
|
29
|
+
return { x: this._layout.offsetX, y: this._layout.offsetY };
|
|
30
|
+
}
|
|
31
|
+
updateContainer(width, height) {
|
|
32
|
+
if (this._containerSize.width === width &&
|
|
33
|
+
this._containerSize.height === height)
|
|
34
|
+
return;
|
|
35
|
+
this._containerSize = { width, height };
|
|
36
|
+
this.updateLayout();
|
|
37
|
+
}
|
|
38
|
+
updatePhysical(width, height) {
|
|
39
|
+
if (this._physicalSize.width === width && this._physicalSize.height === height)
|
|
40
|
+
return;
|
|
41
|
+
this._physicalSize = { width, height };
|
|
42
|
+
this.updateLayout();
|
|
43
|
+
}
|
|
44
|
+
setPadding(padding) {
|
|
45
|
+
if (this._padding === padding)
|
|
46
|
+
return;
|
|
47
|
+
this._padding = padding;
|
|
48
|
+
this.updateLayout();
|
|
49
|
+
}
|
|
50
|
+
updateLayout() {
|
|
51
|
+
this._layout = coordinate_1.Coordinate.calculateLayout(this._containerSize, this._physicalSize, this._padding);
|
|
52
|
+
}
|
|
53
|
+
toPixel(value) {
|
|
54
|
+
return value * this._layout.scale;
|
|
55
|
+
}
|
|
56
|
+
toPhysical(value) {
|
|
57
|
+
return this._layout.scale === 0 ? 0 : value / this._layout.scale;
|
|
58
|
+
}
|
|
59
|
+
toPixelPoint(point) {
|
|
60
|
+
return {
|
|
61
|
+
x: point.x * this._layout.scale + this._layout.offsetX,
|
|
62
|
+
y: point.y * this._layout.scale + this._layout.offsetY,
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
// Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
|
|
66
|
+
toPhysicalPoint(point) {
|
|
67
|
+
if (this._layout.scale === 0)
|
|
68
|
+
return { x: 0, y: 0 };
|
|
69
|
+
return {
|
|
70
|
+
x: (point.x - this._layout.offsetX) / this._layout.scale,
|
|
71
|
+
y: (point.y - this._layout.offsetY) / this._layout.scale,
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
exports.ViewportSystem = ViewportSystem;
|