@pooder/kit 5.3.1 → 5.4.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.
Files changed (90) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.d.mts +243 -36
  3. package/dist/index.d.ts +243 -36
  4. package/dist/index.js +2278 -1041
  5. package/dist/index.mjs +2278 -1041
  6. package/package.json +1 -1
  7. package/src/coordinate.ts +106 -106
  8. package/src/extensions/background.ts +323 -230
  9. package/src/extensions/bridgeSelection.ts +17 -17
  10. package/src/extensions/constraints.ts +322 -322
  11. package/src/extensions/dieline.ts +1149 -1076
  12. package/src/extensions/dielineShape.ts +109 -0
  13. package/src/extensions/edgeScale.ts +19 -19
  14. package/src/extensions/feature.ts +1137 -1021
  15. package/src/extensions/featureComplete.ts +46 -46
  16. package/src/extensions/film.ts +266 -194
  17. package/src/extensions/geometry.ts +885 -752
  18. package/src/extensions/image.ts +2054 -1926
  19. package/src/extensions/index.ts +11 -11
  20. package/src/extensions/maskOps.ts +283 -283
  21. package/src/extensions/mirror.ts +128 -128
  22. package/src/extensions/ruler.ts +654 -451
  23. package/src/extensions/sceneLayout.ts +140 -140
  24. package/src/extensions/sceneLayoutModel.ts +364 -352
  25. package/src/extensions/sceneVisibility.ts +64 -71
  26. package/src/extensions/size.ts +389 -389
  27. package/src/extensions/tracer.ts +1019 -1019
  28. package/src/extensions/white-ink.ts +1567 -1514
  29. package/src/extensions/wrappedOffsets.ts +33 -33
  30. package/src/index.ts +2 -2
  31. package/src/services/CanvasService.ts +832 -300
  32. package/src/services/ViewportSystem.ts +95 -95
  33. package/src/services/index.ts +3 -3
  34. package/src/services/renderSpec.ts +53 -18
  35. package/src/units.ts +27 -27
  36. package/tests/run.ts +118 -118
  37. package/tsconfig.test.json +15 -15
  38. package/.test-dist/src/CanvasService.js +0 -249
  39. package/.test-dist/src/ViewportSystem.js +0 -75
  40. package/.test-dist/src/background.js +0 -203
  41. package/.test-dist/src/bridgeSelection.js +0 -20
  42. package/.test-dist/src/constraints.js +0 -237
  43. package/.test-dist/src/coordinate.js +0 -74
  44. package/.test-dist/src/dieline.js +0 -818
  45. package/.test-dist/src/edgeScale.js +0 -12
  46. package/.test-dist/src/extensions/background.js +0 -203
  47. package/.test-dist/src/extensions/bridgeSelection.js +0 -20
  48. package/.test-dist/src/extensions/constraints.js +0 -237
  49. package/.test-dist/src/extensions/dieline.js +0 -828
  50. package/.test-dist/src/extensions/edgeScale.js +0 -12
  51. package/.test-dist/src/extensions/feature.js +0 -825
  52. package/.test-dist/src/extensions/featureComplete.js +0 -32
  53. package/.test-dist/src/extensions/film.js +0 -167
  54. package/.test-dist/src/extensions/geometry.js +0 -545
  55. package/.test-dist/src/extensions/image.js +0 -1529
  56. package/.test-dist/src/extensions/index.js +0 -30
  57. package/.test-dist/src/extensions/maskOps.js +0 -279
  58. package/.test-dist/src/extensions/mirror.js +0 -104
  59. package/.test-dist/src/extensions/ruler.js +0 -345
  60. package/.test-dist/src/extensions/sceneLayout.js +0 -96
  61. package/.test-dist/src/extensions/sceneLayoutModel.js +0 -196
  62. package/.test-dist/src/extensions/sceneVisibility.js +0 -62
  63. package/.test-dist/src/extensions/size.js +0 -331
  64. package/.test-dist/src/extensions/tracer.js +0 -538
  65. package/.test-dist/src/extensions/white-ink.js +0 -1190
  66. package/.test-dist/src/extensions/wrappedOffsets.js +0 -33
  67. package/.test-dist/src/feature.js +0 -826
  68. package/.test-dist/src/featureComplete.js +0 -32
  69. package/.test-dist/src/film.js +0 -167
  70. package/.test-dist/src/geometry.js +0 -506
  71. package/.test-dist/src/image.js +0 -1250
  72. package/.test-dist/src/index.js +0 -18
  73. package/.test-dist/src/maskOps.js +0 -270
  74. package/.test-dist/src/mirror.js +0 -104
  75. package/.test-dist/src/renderSpec.js +0 -2
  76. package/.test-dist/src/ruler.js +0 -343
  77. package/.test-dist/src/sceneLayout.js +0 -99
  78. package/.test-dist/src/sceneLayoutModel.js +0 -196
  79. package/.test-dist/src/sceneView.js +0 -40
  80. package/.test-dist/src/sceneVisibility.js +0 -42
  81. package/.test-dist/src/services/CanvasService.js +0 -249
  82. package/.test-dist/src/services/ViewportSystem.js +0 -76
  83. package/.test-dist/src/services/index.js +0 -24
  84. package/.test-dist/src/services/renderSpec.js +0 -2
  85. package/.test-dist/src/size.js +0 -332
  86. package/.test-dist/src/tracer.js +0 -544
  87. package/.test-dist/src/units.js +0 -30
  88. package/.test-dist/src/white-ink.js +0 -829
  89. package/.test-dist/src/wrappedOffsets.js +0 -33
  90. package/.test-dist/tests/run.js +0 -94
@@ -1,828 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DielineTool = void 0;
4
- const core_1 = require("@pooder/core");
5
- const fabric_1 = require("fabric");
6
- const tracer_1 = require("./tracer");
7
- const units_1 = require("../units");
8
- const geometry_1 = require("./geometry");
9
- const sceneLayoutModel_1 = require("./sceneLayoutModel");
10
- const IMAGE_OBJECT_LAYER_ID = "image.user";
11
- class DielineTool {
12
- constructor(options) {
13
- this.id = "pooder.kit.dieline";
14
- this.metadata = {
15
- name: "DielineTool",
16
- };
17
- this.state = {
18
- displayUnit: "mm",
19
- shape: "rect",
20
- width: 500,
21
- height: 500,
22
- radius: 0,
23
- offset: 0,
24
- padding: 140,
25
- mainLine: {
26
- width: 2.7,
27
- color: "#FF0000",
28
- dashLength: 5,
29
- style: "solid",
30
- },
31
- offsetLine: {
32
- width: 2.7,
33
- color: "#FF0000",
34
- dashLength: 5,
35
- style: "solid",
36
- },
37
- insideColor: "rgba(0,0,0,0)",
38
- outsideColor: "#ffffff",
39
- showBleedLines: true,
40
- features: [],
41
- };
42
- this.onCanvasResized = () => {
43
- this.updateDieline();
44
- };
45
- if (options) {
46
- // Deep merge for styles to avoid overwriting defaults with partial objects
47
- if (options.mainLine) {
48
- Object.assign(this.state.mainLine, options.mainLine);
49
- delete options.mainLine;
50
- }
51
- if (options.offsetLine) {
52
- Object.assign(this.state.offsetLine, options.offsetLine);
53
- delete options.offsetLine;
54
- }
55
- Object.assign(this.state, options);
56
- }
57
- }
58
- activate(context) {
59
- this.context = context;
60
- this.canvasService = context.services.get("CanvasService");
61
- if (!this.canvasService) {
62
- console.warn("CanvasService not found for DielineTool");
63
- return;
64
- }
65
- const configService = context.services.get("ConfigurationService");
66
- if (configService) {
67
- // Load initial config
68
- const s = this.state;
69
- const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
70
- s.displayUnit = sizeState.unit;
71
- s.shape = configService.get("dieline.shape", s.shape);
72
- s.width = sizeState.actualWidthMm;
73
- s.height = sizeState.actualHeightMm;
74
- s.radius = (0, units_1.parseLengthToMm)(configService.get("dieline.radius", s.radius), "mm");
75
- s.padding = sizeState.viewPadding;
76
- s.offset =
77
- sizeState.cutMode === "outset"
78
- ? sizeState.cutMarginMm
79
- : sizeState.cutMode === "inset"
80
- ? -sizeState.cutMarginMm
81
- : 0;
82
- // Main Line
83
- s.mainLine.width = configService.get("dieline.strokeWidth", s.mainLine.width);
84
- s.mainLine.color = configService.get("dieline.strokeColor", s.mainLine.color);
85
- s.mainLine.dashLength = configService.get("dieline.dashLength", s.mainLine.dashLength);
86
- s.mainLine.style = configService.get("dieline.style", s.mainLine.style);
87
- // Offset Line
88
- s.offsetLine.width = configService.get("dieline.offsetStrokeWidth", s.offsetLine.width);
89
- s.offsetLine.color = configService.get("dieline.offsetStrokeColor", s.offsetLine.color);
90
- s.offsetLine.dashLength = configService.get("dieline.offsetDashLength", s.offsetLine.dashLength);
91
- s.offsetLine.style = configService.get("dieline.offsetStyle", s.offsetLine.style);
92
- s.insideColor = configService.get("dieline.insideColor", s.insideColor);
93
- s.outsideColor = configService.get("dieline.outsideColor", s.outsideColor);
94
- s.showBleedLines = configService.get("dieline.showBleedLines", s.showBleedLines);
95
- s.features = configService.get("dieline.features", s.features);
96
- s.pathData = configService.get("dieline.pathData", s.pathData);
97
- // Listen for changes
98
- configService.onAnyChange((e) => {
99
- if (e.key.startsWith("size.")) {
100
- const nextSize = (0, sceneLayoutModel_1.readSizeState)(configService);
101
- s.displayUnit = nextSize.unit;
102
- s.width = nextSize.actualWidthMm;
103
- s.height = nextSize.actualHeightMm;
104
- s.padding = nextSize.viewPadding;
105
- s.offset =
106
- nextSize.cutMode === "outset"
107
- ? nextSize.cutMarginMm
108
- : nextSize.cutMode === "inset"
109
- ? -nextSize.cutMarginMm
110
- : 0;
111
- this.updateDieline();
112
- return;
113
- }
114
- if (e.key.startsWith("dieline.")) {
115
- switch (e.key) {
116
- case "dieline.shape":
117
- s.shape = e.value;
118
- break;
119
- case "dieline.radius":
120
- s.radius = (0, units_1.parseLengthToMm)(e.value, "mm");
121
- break;
122
- case "dieline.strokeWidth":
123
- s.mainLine.width = e.value;
124
- break;
125
- case "dieline.strokeColor":
126
- s.mainLine.color = e.value;
127
- break;
128
- case "dieline.dashLength":
129
- s.mainLine.dashLength = e.value;
130
- break;
131
- case "dieline.style":
132
- s.mainLine.style = e.value;
133
- break;
134
- case "dieline.offsetStrokeWidth":
135
- s.offsetLine.width = e.value;
136
- break;
137
- case "dieline.offsetStrokeColor":
138
- s.offsetLine.color = e.value;
139
- break;
140
- case "dieline.offsetDashLength":
141
- s.offsetLine.dashLength = e.value;
142
- break;
143
- case "dieline.offsetStyle":
144
- s.offsetLine.style = e.value;
145
- break;
146
- case "dieline.insideColor":
147
- s.insideColor = e.value;
148
- break;
149
- case "dieline.outsideColor":
150
- s.outsideColor = e.value;
151
- break;
152
- case "dieline.showBleedLines":
153
- s.showBleedLines = e.value;
154
- break;
155
- case "dieline.features":
156
- s.features = e.value;
157
- break;
158
- case "dieline.pathData":
159
- s.pathData = e.value;
160
- break;
161
- }
162
- this.updateDieline();
163
- }
164
- });
165
- }
166
- context.eventBus.on("canvas:resized", this.onCanvasResized);
167
- this.createLayer();
168
- this.updateDieline();
169
- }
170
- deactivate(context) {
171
- context.eventBus.off("canvas:resized", this.onCanvasResized);
172
- this.destroyLayer();
173
- this.canvasService = undefined;
174
- this.context = undefined;
175
- }
176
- contribute() {
177
- const s = this.state;
178
- return {
179
- [core_1.ContributionPointIds.TOOLS]: [
180
- {
181
- id: this.id,
182
- name: "Dieline",
183
- interaction: "session",
184
- session: {
185
- autoBegin: false,
186
- leavePolicy: "block",
187
- },
188
- },
189
- ],
190
- [core_1.ContributionPointIds.CONFIGURATIONS]: [
191
- {
192
- id: "dieline.shape",
193
- type: "select",
194
- label: "Shape",
195
- options: ["rect", "circle", "ellipse", "custom"],
196
- default: s.shape,
197
- },
198
- {
199
- id: "dieline.radius",
200
- type: "number",
201
- label: "Corner Radius (mm)",
202
- min: 0,
203
- max: 500,
204
- default: s.radius,
205
- },
206
- {
207
- id: "dieline.showBleedLines",
208
- type: "boolean",
209
- label: "Show Bleed Lines",
210
- default: s.showBleedLines,
211
- },
212
- {
213
- id: "dieline.strokeWidth",
214
- type: "number",
215
- label: "Line Width",
216
- min: 0.1,
217
- max: 10,
218
- step: 0.1,
219
- default: s.mainLine.width,
220
- },
221
- {
222
- id: "dieline.strokeColor",
223
- type: "color",
224
- label: "Line Color",
225
- default: s.mainLine.color,
226
- },
227
- {
228
- id: "dieline.dashLength",
229
- type: "number",
230
- label: "Dash Length",
231
- min: 1,
232
- max: 50,
233
- default: s.mainLine.dashLength,
234
- },
235
- {
236
- id: "dieline.style",
237
- type: "select",
238
- label: "Line Style",
239
- options: ["solid", "dashed", "hidden"],
240
- default: s.mainLine.style,
241
- },
242
- {
243
- id: "dieline.offsetStrokeWidth",
244
- type: "number",
245
- label: "Offset Line Width",
246
- min: 0.1,
247
- max: 10,
248
- step: 0.1,
249
- default: s.offsetLine.width,
250
- },
251
- {
252
- id: "dieline.offsetStrokeColor",
253
- type: "color",
254
- label: "Offset Line Color",
255
- default: s.offsetLine.color,
256
- },
257
- {
258
- id: "dieline.offsetDashLength",
259
- type: "number",
260
- label: "Offset Dash Length",
261
- min: 1,
262
- max: 50,
263
- default: s.offsetLine.dashLength,
264
- },
265
- {
266
- id: "dieline.offsetStyle",
267
- type: "select",
268
- label: "Offset Line Style",
269
- options: ["solid", "dashed", "hidden"],
270
- default: s.offsetLine.style,
271
- },
272
- {
273
- id: "dieline.insideColor",
274
- type: "color",
275
- label: "Inside Color",
276
- default: s.insideColor,
277
- },
278
- {
279
- id: "dieline.outsideColor",
280
- type: "color",
281
- label: "Outside Color",
282
- default: s.outsideColor,
283
- },
284
- {
285
- id: "dieline.features",
286
- type: "json",
287
- label: "Edge Features",
288
- default: s.features,
289
- },
290
- ],
291
- [core_1.ContributionPointIds.COMMANDS]: [
292
- {
293
- command: "updateFeaturePosition",
294
- title: "Update Feature Position",
295
- handler: (groupId, x, y) => {
296
- const configService = this.context?.services.get("ConfigurationService");
297
- if (!configService)
298
- return;
299
- const features = configService.get("dieline.features") || [];
300
- let changed = false;
301
- const newFeatures = features.map((f) => {
302
- if (f.groupId === groupId) {
303
- if (f.x !== x || f.y !== y) {
304
- changed = true;
305
- return { ...f, x, y };
306
- }
307
- }
308
- return f;
309
- });
310
- if (changed) {
311
- configService.update("dieline.features", newFeatures);
312
- }
313
- },
314
- },
315
- {
316
- command: "exportCutImage",
317
- title: "Export Cut Image",
318
- handler: (options) => {
319
- return this.exportCutImage(options);
320
- },
321
- },
322
- {
323
- command: "detectEdge",
324
- title: "Detect Edge from Image",
325
- handler: async (imageUrl, options) => {
326
- try {
327
- const detectOptions = options || {};
328
- const debug = detectOptions.debug === true;
329
- // Helper to get image dimensions
330
- const loadImage = (url) => {
331
- return new Promise((resolve, reject) => {
332
- const img = new Image();
333
- img.crossOrigin = "Anonymous";
334
- img.onload = () => resolve(img);
335
- img.onerror = (e) => reject(e);
336
- img.src = url;
337
- });
338
- };
339
- const [img, traced] = await Promise.all([
340
- loadImage(imageUrl),
341
- tracer_1.ImageTracer.traceWithBounds(imageUrl, detectOptions),
342
- ]);
343
- const { pathData, baseBounds, bounds } = traced;
344
- if (debug) {
345
- console.info("[DielineTool] detectEdge", {
346
- imageWidth: img.width,
347
- imageHeight: img.height,
348
- baseBounds,
349
- expandedBounds: bounds,
350
- currentDielineWidth: s.width,
351
- currentDielineHeight: s.height,
352
- options: {
353
- expand: detectOptions.expand ?? 0,
354
- morphologyRadius: detectOptions.morphologyRadius,
355
- connectRadiusMax: detectOptions.connectRadiusMax,
356
- smoothing: detectOptions.smoothing,
357
- simplifyTolerance: detectOptions.simplifyTolerance,
358
- threshold: detectOptions.threshold,
359
- maskMode: detectOptions.maskMode,
360
- whiteThreshold: detectOptions.whiteThreshold,
361
- alphaOpaqueCutoff: detectOptions.alphaOpaqueCutoff,
362
- noChannels: detectOptions.noChannels,
363
- componentMode: detectOptions.componentMode,
364
- minComponentArea: detectOptions.minComponentArea,
365
- forceConnected: detectOptions.forceConnected,
366
- },
367
- });
368
- }
369
- return {
370
- pathData,
371
- rawBounds: bounds,
372
- baseBounds,
373
- imageWidth: img.width,
374
- imageHeight: img.height,
375
- };
376
- }
377
- catch (e) {
378
- console.error("Edge detection failed", e);
379
- throw e;
380
- }
381
- },
382
- },
383
- ],
384
- };
385
- }
386
- getLayer() {
387
- return this.canvasService?.getLayer("dieline-overlay");
388
- }
389
- createLayer() {
390
- if (!this.canvasService)
391
- return;
392
- const width = this.canvasService.canvas.width || 800;
393
- const height = this.canvasService.canvas.height || 600;
394
- const layer = this.canvasService.createLayer("dieline-overlay", {
395
- width,
396
- height,
397
- selectable: false,
398
- evented: false,
399
- });
400
- this.canvasService.canvas.bringObjectToFront(layer);
401
- // Ensure above user layer
402
- const userLayer = this.canvasService.getLayer("user");
403
- if (userLayer) {
404
- const userIndex = this.canvasService.canvas
405
- .getObjects()
406
- .indexOf(userLayer);
407
- this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
408
- }
409
- }
410
- destroyLayer() {
411
- if (!this.canvasService)
412
- return;
413
- const layer = this.getLayer();
414
- if (layer) {
415
- this.canvasService.canvas.remove(layer);
416
- }
417
- }
418
- createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
419
- if (typeof document === "undefined") {
420
- return undefined;
421
- }
422
- const size = 20;
423
- const canvas = document.createElement("canvas");
424
- canvas.width = size;
425
- canvas.height = size;
426
- const ctx = canvas.getContext("2d");
427
- if (ctx) {
428
- // Transparent background
429
- ctx.clearRect(0, 0, size, size);
430
- // Draw diagonal /
431
- ctx.strokeStyle = color;
432
- ctx.lineWidth = 1;
433
- ctx.beginPath();
434
- ctx.moveTo(0, size);
435
- ctx.lineTo(size, 0);
436
- ctx.stroke();
437
- }
438
- // @ts-ignore
439
- return new fabric_1.Pattern({ source: canvas, repetition: "repeat" });
440
- }
441
- getConfigService() {
442
- return this.context?.services.get("ConfigurationService");
443
- }
444
- syncSizeState(configService) {
445
- const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
446
- this.state.displayUnit = sizeState.unit;
447
- this.state.width = sizeState.actualWidthMm;
448
- this.state.height = sizeState.actualHeightMm;
449
- this.state.padding = sizeState.viewPadding;
450
- this.state.offset =
451
- sizeState.cutMode === "outset"
452
- ? sizeState.cutMarginMm
453
- : sizeState.cutMode === "inset"
454
- ? -sizeState.cutMarginMm
455
- : 0;
456
- }
457
- bringFeatureMarkersToFront() {
458
- if (!this.canvasService)
459
- return;
460
- const canvas = this.canvasService.canvas;
461
- canvas
462
- .getObjects()
463
- .filter((obj) => obj?.data?.type === "feature-marker")
464
- .forEach((obj) => canvas.bringObjectToFront(obj));
465
- }
466
- updateDieline(_emitEvent = true) {
467
- if (!this.canvasService)
468
- return;
469
- const layer = this.getLayer();
470
- if (!layer)
471
- return;
472
- const configService = this.getConfigService();
473
- if (!configService)
474
- return;
475
- this.syncSizeState(configService);
476
- const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
477
- if (!sceneLayout)
478
- return;
479
- const { shape, radius, mainLine, offsetLine, insideColor, outsideColor, showBleedLines, features, } = this.state;
480
- const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
481
- const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
482
- const scale = sceneLayout.scale;
483
- const cx = sceneLayout.trimRect.centerX;
484
- const cy = sceneLayout.trimRect.centerY;
485
- const visualWidth = sceneLayout.trimRect.width;
486
- const visualHeight = sceneLayout.trimRect.height;
487
- const visualRadius = radius * scale;
488
- const cutW = sceneLayout.cutRect.width;
489
- const cutH = sceneLayout.cutRect.height;
490
- const visualOffset = (cutW - visualWidth) / 2;
491
- const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
492
- layer.remove(...layer.getObjects());
493
- const absoluteFeatures = (features || []).map((f) => ({
494
- ...f,
495
- x: f.x,
496
- y: f.y,
497
- width: (f.width || 0) * scale,
498
- height: (f.height || 0) * scale,
499
- radius: (f.radius || 0) * scale,
500
- }));
501
- const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
502
- const maskPathData = (0, geometry_1.generateMaskPath)({
503
- canvasWidth: canvasW,
504
- canvasHeight: canvasH,
505
- shape,
506
- width: cutW,
507
- height: cutH,
508
- radius: cutR,
509
- x: cx,
510
- y: cy,
511
- features: cutFeatures,
512
- pathData: this.state.pathData,
513
- });
514
- const mask = new fabric_1.Path(maskPathData, {
515
- fill: outsideColor,
516
- stroke: null,
517
- selectable: false,
518
- evented: false,
519
- originX: "left",
520
- originY: "top",
521
- left: 0,
522
- top: 0,
523
- });
524
- layer.add(mask);
525
- if (insideColor &&
526
- insideColor !== "transparent" &&
527
- insideColor !== "rgba(0,0,0,0)") {
528
- const productPathData = (0, geometry_1.generateDielinePath)({
529
- shape,
530
- width: cutW,
531
- height: cutH,
532
- radius: cutR,
533
- x: cx,
534
- y: cy,
535
- features: cutFeatures,
536
- pathData: this.state.pathData,
537
- canvasWidth: canvasW,
538
- canvasHeight: canvasH,
539
- });
540
- const insideObj = new fabric_1.Path(productPathData, {
541
- fill: insideColor,
542
- stroke: null,
543
- selectable: false,
544
- evented: false,
545
- originX: "left",
546
- originY: "top",
547
- });
548
- layer.add(insideObj);
549
- }
550
- if (Math.abs(visualOffset) > 0.0001) {
551
- const bleedPathData = (0, geometry_1.generateBleedZonePath)({
552
- shape,
553
- width: visualWidth,
554
- height: visualHeight,
555
- radius: visualRadius,
556
- x: cx,
557
- y: cy,
558
- features: cutFeatures,
559
- pathData: this.state.pathData,
560
- canvasWidth: canvasW,
561
- canvasHeight: canvasH,
562
- }, {
563
- shape,
564
- width: cutW,
565
- height: cutH,
566
- radius: cutR,
567
- x: cx,
568
- y: cy,
569
- features: cutFeatures,
570
- pathData: this.state.pathData,
571
- canvasWidth: canvasW,
572
- canvasHeight: canvasH,
573
- }, visualOffset);
574
- if (showBleedLines !== false) {
575
- const pattern = this.createHatchPattern(mainLine.color);
576
- if (pattern) {
577
- const bleedObj = new fabric_1.Path(bleedPathData, {
578
- fill: pattern,
579
- stroke: null,
580
- selectable: false,
581
- evented: false,
582
- objectCaching: false,
583
- originX: "left",
584
- originY: "top",
585
- });
586
- layer.add(bleedObj);
587
- }
588
- }
589
- const offsetPathData = (0, geometry_1.generateDielinePath)({
590
- shape,
591
- width: cutW,
592
- height: cutH,
593
- radius: cutR,
594
- x: cx,
595
- y: cy,
596
- features: cutFeatures,
597
- pathData: this.state.pathData,
598
- canvasWidth: canvasW,
599
- canvasHeight: canvasH,
600
- });
601
- const offsetBorderObj = new fabric_1.Path(offsetPathData, {
602
- fill: null,
603
- stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
604
- strokeWidth: offsetLine.width,
605
- strokeDashArray: offsetLine.style === "dashed"
606
- ? [offsetLine.dashLength, offsetLine.dashLength]
607
- : undefined,
608
- selectable: false,
609
- evented: false,
610
- originX: "left",
611
- originY: "top",
612
- });
613
- layer.add(offsetBorderObj);
614
- }
615
- const borderPathData = (0, geometry_1.generateDielinePath)({
616
- shape,
617
- width: visualWidth,
618
- height: visualHeight,
619
- radius: visualRadius,
620
- x: cx,
621
- y: cy,
622
- features: absoluteFeatures,
623
- pathData: this.state.pathData,
624
- canvasWidth: canvasW,
625
- canvasHeight: canvasH,
626
- });
627
- const borderObj = new fabric_1.Path(borderPathData, {
628
- fill: "transparent",
629
- stroke: mainLine.style === "hidden" ? null : mainLine.color,
630
- strokeWidth: mainLine.width,
631
- strokeDashArray: mainLine.style === "dashed"
632
- ? [mainLine.dashLength, mainLine.dashLength]
633
- : undefined,
634
- selectable: false,
635
- evented: false,
636
- originX: "left",
637
- originY: "top",
638
- });
639
- layer.add(borderObj);
640
- const userLayer = this.canvasService.getLayer("user");
641
- if (layer && userLayer) {
642
- const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
643
- const userIndex = this.canvasService.canvas
644
- .getObjects()
645
- .indexOf(userLayer);
646
- if (layerIndex < userIndex) {
647
- this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
648
- }
649
- }
650
- else {
651
- this.canvasService.canvas.bringObjectToFront(layer);
652
- }
653
- // Feature tool markers can extend outside trim. Keep them above dieline mask.
654
- this.bringFeatureMarkersToFront();
655
- const rulerLayer = this.canvasService.getLayer("ruler-overlay");
656
- if (rulerLayer) {
657
- this.canvasService.canvas.bringObjectToFront(rulerLayer);
658
- }
659
- layer.dirty = true;
660
- this.canvasService.requestRenderAll();
661
- }
662
- getGeometry() {
663
- if (!this.canvasService)
664
- return null;
665
- const configService = this.getConfigService();
666
- if (!configService)
667
- return null;
668
- const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
669
- if (!sceneLayout)
670
- return null;
671
- const sceneGeometry = (0, sceneLayoutModel_1.buildSceneGeometry)(configService, sceneLayout);
672
- return {
673
- ...sceneGeometry,
674
- strokeWidth: this.state.mainLine.width,
675
- pathData: this.state.pathData,
676
- };
677
- }
678
- async exportCutImage(options) {
679
- const debug = options?.debug === true;
680
- if (!this.canvasService) {
681
- console.warn("[DielineTool] exportCutImage returned null: canvas-not-ready");
682
- return null;
683
- }
684
- const configService = this.getConfigService();
685
- if (!configService) {
686
- console.warn("[DielineTool] exportCutImage returned null: config-service-not-ready");
687
- return null;
688
- }
689
- this.syncSizeState(configService);
690
- const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
691
- if (!sceneLayout) {
692
- console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
693
- return null;
694
- }
695
- const { shape, radius, features, pathData } = this.state;
696
- const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
697
- const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
698
- const scale = sceneLayout.scale;
699
- const cx = sceneLayout.trimRect.centerX;
700
- const cy = sceneLayout.trimRect.centerY;
701
- const cutW = sceneLayout.cutRect.width;
702
- const cutH = sceneLayout.cutRect.height;
703
- const visualRadius = radius * scale;
704
- const visualOffset = (cutW - sceneLayout.trimRect.width) / 2;
705
- const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
706
- const absoluteFeatures = (features || []).map((f) => ({
707
- ...f,
708
- x: f.x,
709
- y: f.y,
710
- width: (f.width || 0) * scale,
711
- height: (f.height || 0) * scale,
712
- radius: (f.radius || 0) * scale,
713
- }));
714
- const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
715
- const generatedPathData = (0, geometry_1.generateDielinePath)({
716
- shape,
717
- width: cutW,
718
- height: cutH,
719
- radius: cutR,
720
- x: cx,
721
- y: cy,
722
- features: cutFeatures,
723
- pathData,
724
- canvasWidth: canvasW,
725
- canvasHeight: canvasH,
726
- });
727
- const clipPath = new fabric_1.Path(generatedPathData, {
728
- originX: "center",
729
- originY: "center",
730
- left: cx,
731
- top: cy,
732
- absolutePositioned: true,
733
- });
734
- const pathOffsetX = Number(clipPath?.pathOffset?.x);
735
- const pathOffsetY = Number(clipPath?.pathOffset?.y);
736
- const centerX = Number.isFinite(pathOffsetX) ? pathOffsetX : cx;
737
- const centerY = Number.isFinite(pathOffsetY) ? pathOffsetY : cy;
738
- clipPath.set({
739
- originX: "center",
740
- originY: "center",
741
- left: centerX,
742
- top: centerY,
743
- absolutePositioned: true,
744
- });
745
- clipPath.setCoords();
746
- const pathBounds = clipPath.getBoundingRect();
747
- if (!Number.isFinite(pathBounds.left) ||
748
- !Number.isFinite(pathBounds.top) ||
749
- !Number.isFinite(pathBounds.width) ||
750
- !Number.isFinite(pathBounds.height) ||
751
- pathBounds.width <= 0 ||
752
- pathBounds.height <= 0) {
753
- console.warn("[DielineTool] exportCutImage returned null: invalid-cut-bounds", {
754
- bounds: pathBounds,
755
- });
756
- return null;
757
- }
758
- const exportBounds = pathBounds;
759
- const sourceImages = this.canvasService.canvas
760
- .getObjects()
761
- .filter((obj) => {
762
- return obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID;
763
- });
764
- if (!sourceImages.length) {
765
- console.warn("[DielineTool] exportCutImage returned null: no-image-objects-on-canvas");
766
- return null;
767
- }
768
- const sourceCanvasWidth = Number(this.canvasService.canvas.width || sceneLayout.canvasWidth || canvasW);
769
- const sourceCanvasHeight = Number(this.canvasService.canvas.height || sceneLayout.canvasHeight || canvasH);
770
- const el = document.createElement("canvas");
771
- const exportCanvas = new fabric_1.Canvas(el, {
772
- renderOnAddRemove: false,
773
- selection: false,
774
- enableRetinaScaling: false,
775
- preserveObjectStacking: true,
776
- });
777
- exportCanvas.setDimensions({
778
- width: Math.max(1, sourceCanvasWidth),
779
- height: Math.max(1, sourceCanvasHeight),
780
- });
781
- try {
782
- for (const source of sourceImages) {
783
- const clone = await source.clone();
784
- clone.set({
785
- selectable: false,
786
- evented: false,
787
- });
788
- clone.setCoords();
789
- exportCanvas.add(clone);
790
- }
791
- exportCanvas.clipPath = clipPath;
792
- exportCanvas.renderAll();
793
- const dataUrl = exportCanvas.toDataURL({
794
- format: "png",
795
- multiplier: 2,
796
- left: exportBounds.left,
797
- top: exportBounds.top,
798
- width: exportBounds.width,
799
- height: exportBounds.height,
800
- });
801
- if (debug) {
802
- console.info("[DielineTool] exportCutImage success", {
803
- sourceCount: sourceImages.length,
804
- bounds: exportBounds,
805
- rawPathBounds: pathBounds,
806
- pathOffset: {
807
- x: Number.isFinite(pathOffsetX) ? pathOffsetX : null,
808
- y: Number.isFinite(pathOffsetY) ? pathOffsetY : null,
809
- },
810
- clipPathCenter: {
811
- x: centerX,
812
- y: centerY,
813
- },
814
- cutRect: sceneLayout.cutRect,
815
- canvasSize: {
816
- width: Math.max(1, sourceCanvasWidth),
817
- height: Math.max(1, sourceCanvasHeight),
818
- },
819
- });
820
- }
821
- return dataUrl;
822
- }
823
- finally {
824
- exportCanvas.dispose();
825
- }
826
- }
827
- }
828
- exports.DielineTool = DielineTool;