@pooder/vue 4.2.7 → 4.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -1,234 +1,91 @@
1
- import { defineComponent as J, ref as H, onMounted as he, onUnmounted as G, createElementBlock as $, openBlock as q, createElementVNode as fe, provide as pe, createVNode as we } from "vue";
2
- import { Pooder as ye } from "@pooder/core";
1
+ import { defineComponent as O, ref as T, onMounted as j, onUnmounted as N, createElementBlock as P, openBlock as k, createElementVNode as $, provide as q, createVNode as G } from "vue";
2
+ import { Pooder as J } from "@pooder/core";
3
3
  export * from "@pooder/core";
4
- import { CanvasService as ve, SceneLayoutService as be, SceneVisibilityService as xe, BackgroundTool as Se, SizeTool as Ce, ImageTool as Ne, WhiteInkTool as Ie, MirrorTool as Fe, DielineTool as Be, RulerTool as Me, FeatureTool as De } from "@pooder/kit";
4
+ import { CanvasService as K, SceneLayoutService as Q, SceneVisibilityService as Z, BackgroundTool as ee, SizeTool as te, ImageTool as ne, WhiteInkTool as re, MirrorTool as ie, DielineTool as oe, RulerTool as ae, FeatureTool as ce } from "@pooder/kit";
5
5
  export * from "@pooder/kit";
6
- const Ee = /* @__PURE__ */ J({
6
+ const se = /* @__PURE__ */ O({
7
7
  __name: "CanvasArea",
8
8
  emits: ["canvas-ready", "resize"],
9
- setup(I, { emit: N }) {
10
- const C = N, u = H(null), g = H(null);
11
- let c = null;
12
- return he(() => {
13
- if (u.value && g.value) {
14
- const { clientWidth: S, clientHeight: F } = u.value;
15
- g.value.width = S, g.value.height = F, C("canvas-ready", g.value), c = new ResizeObserver((z) => {
16
- for (const _ of z) {
17
- const { width: Y, height: X } = _.contentRect;
18
- C("resize", Y, X);
9
+ setup(h, { emit: l }) {
10
+ const m = l, r = T(null), i = T(null);
11
+ let o = null;
12
+ return j(() => {
13
+ if (r.value && i.value) {
14
+ const { clientWidth: u, clientHeight: f } = r.value;
15
+ i.value.width = u, i.value.height = f, m("canvas-ready", i.value), o = new ResizeObserver((v) => {
16
+ for (const p of v) {
17
+ const { width: w, height: y } = p.contentRect;
18
+ m("resize", w, y);
19
19
  }
20
- }), c.observe(u.value);
20
+ }), o.observe(r.value);
21
21
  }
22
- }), G(() => {
23
- c && c.disconnect();
24
- }), (S, F) => (q(), $("div", {
22
+ }), N(() => {
23
+ o && o.disconnect();
24
+ }), (u, f) => (k(), P("div", {
25
25
  ref_key: "container",
26
- ref: u,
26
+ ref: r,
27
27
  class: "pooder-canvas-area"
28
28
  }, [
29
- fe("canvas", {
29
+ $("canvas", {
30
30
  ref_key: "canvas",
31
- ref: g
31
+ ref: i
32
32
  }, null, 512)
33
33
  ], 512));
34
34
  }
35
- }), K = (I, N) => {
36
- const C = I.__vccOpts || I;
37
- for (const [u, g] of N)
38
- C[u] = g;
39
- return C;
40
- }, ze = /* @__PURE__ */ K(Ee, [["__scopeId", "data-v-9668bbd7"]]), _e = { class: "pooder-editor" }, j = "SceneLayoutService", V = "SceneVisibilityService", Ye = "image.user", Xe = "pooder.kit.image", Pe = /* @__PURE__ */ J({
35
+ }), R = (h, l) => {
36
+ const m = h.__vccOpts || h;
37
+ for (const [r, i] of l)
38
+ m[r] = i;
39
+ return m;
40
+ }, de = /* @__PURE__ */ R(se, [["__scopeId", "data-v-203ff8d9"]]), me = { class: "pooder-editor" }, F = "SceneLayoutService", B = "SceneVisibilityService", ue = /* @__PURE__ */ O({
41
41
  __name: "PooderEditor",
42
42
  emits: ["image-change"],
43
- setup(I, { expose: N, emit: C }) {
44
- const u = new ye();
45
- pe("pooder", u);
46
- const g = u.getService("CommandService"), c = u.getService("ConfigurationService"), S = u.getService("WorkbenchService"), F = C, z = c.onAnyChange((e) => {
47
- e.key === "image.items" && F("image-change", e.value);
48
- }), _ = (e) => {
49
- c.import(e);
50
- }, Y = () => c.export(), X = () => c.get("image.items", []), Q = async (e) => {
43
+ setup(h, { expose: l, emit: m }) {
44
+ const r = new J();
45
+ q("pooder", r);
46
+ const i = r.getService("CommandService"), o = r.getService("ConfigurationService"), u = r.getService("WorkbenchService"), f = m, v = o.onAnyChange((e) => {
47
+ e.key === "image.items" && f("image-change", e.value);
48
+ }), p = (e) => {
49
+ o.import(e);
50
+ }, w = () => o.export(), y = () => o.get("image.items", []), A = async (e) => {
51
51
  try {
52
- const t = await g.executeCommand(
52
+ const t = await i.executeCommand(
53
53
  "exportCutImage",
54
54
  e
55
55
  );
56
56
  return t || console.warn("[PooderEditor] generateCutImage returned null", {
57
57
  options: e,
58
- imageCount: (c.get("image.items") || []).length,
59
- hasCanvasService: !!u.getService("CanvasService")
58
+ imageCount: (o.get("image.items") || []).length,
59
+ hasCanvasService: !!r.getService("CanvasService")
60
60
  }), t;
61
61
  } catch (t) {
62
62
  throw console.error("[PooderEditor] generateCutImage failed", t), t;
63
63
  }
64
- }, O = async (e, t) => await g.executeCommand("upsertImage", e, {
64
+ }, _ = async (e, t) => await i.executeCommand("upsertImage", e, {
65
65
  id: t?.id,
66
66
  mode: t?.mode,
67
67
  addOptions: t?.addOptions,
68
68
  fitOnAdd: t?.fitOnAdd
69
- }), U = async (e, t) => (await O(e, {
69
+ }), D = async (e, t) => (await _(e, {
70
70
  mode: "add",
71
71
  addOptions: t,
72
72
  fitOnAdd: !0
73
- })).id, Z = async (e, t) => await g.executeCommand("updateImage", e, t), ee = async () => await g.executeCommand("clearImages"), B = async (e) => await g.executeCommand(
73
+ })).id, U = async (e, t) => await i.executeCommand("updateImage", e, t), z = async () => await i.executeCommand("clearImages"), C = async (e) => await i.executeCommand(
74
74
  "exportUserCroppedImage",
75
75
  e
76
- ), te = async (e, t) => await g.executeCommand("focusImage", e, t), M = (e) => Math.max(-1, Math.min(2, e)), k = (e) => {
77
- const t = e?.cutRect;
78
- if (!t) return null;
79
- const i = Number(t.width), n = Number(t.height), d = Number(t.left), r = Number(t.top);
80
- return !Number.isFinite(i) || !Number.isFinite(n) || !Number.isFinite(d) || !Number.isFinite(r) || i <= 0 || n <= 0 ? null : { left: d, top: r, width: i, height: n };
81
- }, D = (e) => {
82
- if (!e) return [];
83
- const t = e.canvas.getObjects(), i = [];
84
- for (const n of t) {
85
- if (n?.data?.layerId !== Ye) continue;
86
- const d = n?.data?.id;
87
- if (typeof d != "string") continue;
88
- const r = n.getCenterPoint ? n.getCenterPoint() : null, m = Number(r?.x ?? n.left), s = Number(r?.y ?? n.top), a = Number(n.scaleX), o = Number(n.width), h = Number(n.height);
89
- !Number.isFinite(m) || !Number.isFinite(s) || !Number.isFinite(a) || !Number.isFinite(o) || !Number.isFinite(h) || o <= 0 || h <= 0 || i.push({
90
- id: d,
91
- centerX: m,
92
- centerY: s,
93
- objectScale: a,
94
- sourceWidth: o,
95
- sourceHeight: h
96
- });
97
- }
98
- return i;
99
- }, A = (e, t) => {
100
- if (!t || t.length === 0) return e;
101
- const i = new Set(t);
102
- return e.filter((n) => i.has(n.id));
103
- }, P = (e) => {
104
- c.update("dieline.shape", "custom"), c.update("dieline.pathData", e.pathData), c.update("dieline.features", []), c.update("size.cutMode", "trim"), c.update("size.cutMarginMm", 0);
105
- }, E = (e) => !!e && Number.isFinite(e.x) && Number.isFinite(e.y) && Number.isFinite(e.width) && Number.isFinite(e.height) && e.width > 0 && e.height > 0, ie = (e) => {
106
- const t = e.baseBounds || e.rawBounds, i = e.rawBounds || e.baseBounds;
107
- if (!E(t) || !E(i)) return null;
108
- const n = Number(c.get("size.actualWidthMm", 0)), d = Number(c.get("size.actualHeightMm", 0)), r = Math.max(n, d), m = Math.max(t.width, t.height), s = Math.max(i.width, i.height);
109
- if (!Number.isFinite(r) || !Number.isFinite(m) || !Number.isFinite(s) || r <= 0 || m <= 0 || s <= 0)
110
- return null;
111
- const a = r / s, o = i.width * a, h = i.height * a;
112
- return !Number.isFinite(o) || !Number.isFinite(h) || o <= 0 || h <= 0 ? null : {
113
- widthMm: o,
114
- heightMm: h,
115
- scale: a,
116
- sizeLongEdgeMm: r,
117
- baseLongEdge: m,
118
- appliedBounds: i,
119
- baseBounds: t
120
- };
121
- }, ne = (e, t = !1) => {
122
- const i = ie(e);
123
- return i ? (c.update("size.actualWidthMm", i.widthMm), c.update("size.actualHeightMm", i.heightMm), c.update(
124
- "size.aspectRatio",
125
- i.widthMm / Math.max(1e-3, i.heightMm)
126
- ), t && console.info("[PooderEditor] detectDielineFromFrame size mapping", {
127
- mappedSize: i,
128
- rawBounds: e.rawBounds,
129
- baseBounds: e.baseBounds
130
- }), i) : null;
131
- }, R = (e) => {
132
- if (!e) return null;
133
- const t = Number(e.left), i = Number(e.top), n = Number(e.width), d = Number(e.height), r = Number(e.centerX), m = Number(e.centerY);
134
- return !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) || !Number.isFinite(d) || !Number.isFinite(r) || !Number.isFinite(m) ? null : { left: t, top: i, width: n, height: d, centerX: r, centerY: m };
135
- }, W = (e) => {
136
- if (!e) return null;
137
- const t = Number(e.scale), i = Number(e.canvasWidth), n = Number(e.canvasHeight);
138
- return !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) ? null : {
139
- scale: t,
140
- canvasWidth: i,
141
- canvasHeight: n,
142
- viewPadding: c.get("size.viewPadding"),
143
- trimRect: R(e.trimRect),
144
- cutRect: R(e.cutRect),
145
- bleedRect: R(e.bleedRect)
146
- };
147
- }, re = (e, t, i) => {
148
- const n = e.rawBounds || e.baseBounds;
149
- return !E(n) || !Number.isFinite(t) || !Number.isFinite(i) || t <= 0 || i <= 0 ? null : {
150
- bounds: n,
151
- offsetX: n.x + n.width / 2 - t / 2,
152
- offsetY: n.y + n.height / 2 - i / 2
153
- };
154
- }, L = (e) => (e || []).map((t) => ({
155
- id: String(t?.id ?? ""),
156
- left: Number(t?.left ?? 0),
157
- top: Number(t?.top ?? 0),
158
- scale: Number(t?.scale ?? 1),
159
- angle: Number(t?.angle ?? 0),
160
- url: typeof t?.url == "string" ? t.url : "",
161
- sourceUrl: typeof t?.sourceUrl == "string" ? t.sourceUrl : "",
162
- committedUrl: typeof t?.committedUrl == "string" ? t.committedUrl : ""
163
- })), oe = async () => {
164
- try {
165
- const e = await g.executeCommand("getWorkingImages") || [], t = c.get("image.items", []) || [], i = L(e), n = L(t);
166
- return JSON.stringify(i) !== JSON.stringify(n);
167
- } catch {
168
- return !1;
169
- }
170
- }, ae = async (e = !1) => {
171
- const t = typeof S?.activeToolId == "string" ? String(S.activeToolId) : null;
172
- if (t !== Xe)
173
- return e && console.info("[PooderEditor] detectDielineFromFrame image update target", {
174
- activeToolId: t,
175
- target: "config",
176
- reason: "image-tool-inactive"
177
- }), "config";
178
- const i = await oe(), n = i ? "working" : "config";
179
- return e && console.info("[PooderEditor] detectDielineFromFrame image update target", {
180
- activeToolId: t,
181
- workingDirty: i,
182
- target: n,
183
- reason: i ? "working-session-dirty-follow-working" : "working-session-clean-update-config"
184
- }), n;
185
- }, se = async (e, t, i = !1) => {
186
- const n = [...new Set(e)].filter(
187
- (a) => typeof a == "string" && a.length > 0
188
- );
189
- if (!n.length) return [];
190
- const d = /* @__PURE__ */ new Map();
191
- for (const a of n) {
192
- const o = await B({
193
- multiplier: t?.multiplier ?? 2,
194
- format: t?.format ?? "png",
195
- imageIds: [a]
196
- });
197
- o?.url && d.set(a, {
198
- url: o.url,
199
- width: o.width,
200
- height: o.height
201
- });
202
- }
203
- if (!d.size) return [];
204
- const m = (Array.isArray(c.get("image.items", [])) ? c.get("image.items", []) : []).map((a) => {
205
- const o = typeof a?.id == "string" ? a.id : "", h = d.get(o);
206
- if (!h) return a;
207
- const b = typeof a?.sourceUrl == "string" && a.sourceUrl.length > 0 ? a.sourceUrl : typeof a?.url == "string" ? a.url : "";
208
- return {
209
- ...a,
210
- url: h.url,
211
- sourceUrl: b,
212
- committedUrl: h.url
213
- };
214
- });
215
- c.update("image.items", m);
216
- const s = n.map((a) => {
217
- const o = d.get(a);
218
- return o ? {
219
- id: a,
220
- width: o.width,
221
- height: o.height
222
- } : null;
223
- }).filter((a) => !!a);
224
- return i && console.info("[PooderEditor] detectDieline committed image sync", {
225
- imageIds: n,
226
- synced: s,
227
- count: s.length
228
- }), s;
229
- }, ce = (e, t) => {
230
- const i = e.rawBounds || e.baseBounds || null;
231
- if (!i)
76
+ ), M = async (e, t) => await i.executeCommand("focusImage", e, t), x = (e, t) => {
77
+ o.update("dieline.shape", "custom"), o.update("dieline.pathData", e.pathData);
78
+ const n = Number(e.imageWidth ?? t?.width ?? 0), a = Number(e.imageHeight ?? t?.height ?? 0);
79
+ o.update(
80
+ "dieline.customSourceWidthPx",
81
+ Number.isFinite(n) && n > 0 ? n : void 0
82
+ ), o.update(
83
+ "dieline.customSourceHeightPx",
84
+ Number.isFinite(a) && a > 0 ? a : void 0
85
+ ), o.update("size.cutMode", "trim"), o.update("size.cutMarginMm", 0);
86
+ }, b = (e) => !!e && Number.isFinite(e.x) && Number.isFinite(e.y) && Number.isFinite(e.width) && Number.isFinite(e.height) && e.width > 0 && e.height > 0, E = (e, t) => {
87
+ const n = e.rawBounds || e.baseBounds || null;
88
+ if (!n)
232
89
  return {
233
90
  sourceWidth: t.width,
234
91
  sourceHeight: t.height,
@@ -238,171 +95,81 @@ const Ee = /* @__PURE__ */ J({
238
95
  coverageX: 0,
239
96
  coverageY: 0
240
97
  };
241
- const n = t.width / 2, d = t.height / 2, r = i.x + i.width / 2, m = i.y + i.height / 2;
98
+ const a = t.width / 2, c = t.height / 2, s = n.x + n.width / 2, d = n.y + n.height / 2;
242
99
  return {
243
100
  sourceWidth: t.width,
244
101
  sourceHeight: t.height,
245
- detectedBounds: i,
246
- centerOffsetX: r - n,
247
- centerOffsetY: m - d,
248
- coverageX: t.width > 0 ? i.width / t.width : 0,
249
- coverageY: t.height > 0 ? i.height / t.height : 0
102
+ detectedBounds: n,
103
+ centerOffsetX: s - a,
104
+ centerOffsetY: d - c,
105
+ coverageX: t.width > 0 ? n.width / t.width : 0,
106
+ coverageY: t.height > 0 ? n.height / t.height : 0
107
+ };
108
+ }, L = (e) => {
109
+ if (!b(e.rawBounds) || !b(e.baseBounds))
110
+ return null;
111
+ const t = e.rawBounds, n = e.baseBounds;
112
+ return {
113
+ left: n.x - t.x,
114
+ top: n.y - t.y,
115
+ right: t.x + t.width - (n.x + n.width),
116
+ bottom: t.y + t.height - (n.y + n.height)
250
117
  };
251
- }, de = (e, t) => {
252
- const i = e.rawBounds || e.baseBounds, n = Number(e.imageWidth ?? 0), d = Number(e.imageHeight ?? 0);
253
- if (!i || !Number.isFinite(i.x) || !Number.isFinite(i.y) || !Number.isFinite(i.width) || !Number.isFinite(i.height) || i.width <= 0 || i.height <= 0 || n <= 0 || d <= 0)
254
- return { shiftX: 0, shiftY: 0 };
255
- const r = t.width / i.width, m = t.height / i.height, s = i.x + i.width / 2, a = i.y + i.height / 2, o = n / 2, h = d / 2;
118
+ }, V = (e, t, n) => {
119
+ const a = E(e, t), c = L(e), s = c ? {
120
+ left: c.left - n,
121
+ top: c.top - n,
122
+ right: c.right - n,
123
+ bottom: c.bottom - n
124
+ } : null, d = c ? {
125
+ x: c.right - c.left,
126
+ y: c.bottom - c.top
127
+ } : null;
256
128
  return {
257
- shiftX: (s - o) * r,
258
- shiftY: (a - h) * m
129
+ frame: a,
130
+ margin: c,
131
+ expectedExpand: n,
132
+ marginDeltaFromExpected: s,
133
+ marginAsymmetry: d
259
134
  };
260
- }, T = async (e, t, i = !1, n = "auto") => {
261
- if (!t.length) return;
262
- const d = await g.executeCommand("getSceneLayout"), r = k(d);
263
- if (!r) return;
264
- const { shiftX: m, shiftY: s } = de(e, r), a = e.rawBounds, o = e.baseBounds, h = Number(e.imageWidth ?? 0), b = Number(e.imageHeight ?? 0);
265
- if (i) {
266
- const l = (f) => {
267
- if (!E(f) || h <= 0 || b <= 0)
268
- return null;
269
- const v = f.x + f.width / 2 - h / 2, p = f.y + f.height / 2 - b / 2;
270
- return {
271
- dx: v,
272
- dy: p,
273
- byBounds: {
274
- shiftX: v * (r.width / Math.max(1, f.width)),
275
- shiftY: p * (r.height / Math.max(1, f.height))
276
- },
277
- byImage: {
278
- shiftX: v * (r.width / Math.max(1, h)),
279
- shiftY: p * (r.height / Math.max(1, b))
280
- }
281
- };
282
- }, w = l(a), y = l(o);
283
- console.info("[PooderEditor] detectDieline alignment", {
284
- frame: r,
285
- shiftX: m,
286
- shiftY: s,
287
- shiftNormalized: {
288
- x: r.width > 0 ? m / r.width : 0,
289
- y: r.height > 0 ? s / r.height : 0
290
- },
291
- snapshotCount: t.length,
292
- baseBounds: o,
293
- rawBounds: a,
294
- imageWidth: h,
295
- imageHeight: b,
296
- shiftCandidates: {
297
- raw: w,
298
- base: y
299
- },
300
- shiftRawByBoundsX: w?.byBounds?.shiftX,
301
- shiftRawByBoundsY: w?.byBounds?.shiftY,
302
- shiftRawByImageX: w?.byImage?.shiftX,
303
- shiftRawByImageY: w?.byImage?.shiftY,
304
- shiftBaseByBoundsX: y?.byBounds?.shiftX,
305
- shiftBaseByBoundsY: y?.byBounds?.shiftY,
306
- shiftBaseByImageX: y?.byImage?.shiftX,
307
- shiftBaseByImageY: y?.byImage?.shiftY
135
+ }, W = async (e, t, n) => {
136
+ if (!e.length) return null;
137
+ const a = await C({
138
+ multiplier: n?.multiplier ?? 2,
139
+ format: n?.format ?? "png",
140
+ imageIds: e
141
+ }), c = a?.url;
142
+ if (!c) return null;
143
+ try {
144
+ const s = await i.executeCommand("detectEdge", c, {
145
+ expand: n?.detect?.expand ?? 0,
146
+ smoothing: n?.detect?.smoothing ?? !0,
147
+ simplifyTolerance: n?.detect?.simplifyTolerance ?? 2,
148
+ threshold: n?.detect?.threshold,
149
+ debug: !1
308
150
  });
309
- }
310
- for (const l of t) {
311
- const w = Math.max(
312
- r.width / Math.max(1, l.sourceWidth),
313
- r.height / Math.max(1, l.sourceHeight)
314
- ), y = Math.max(0.05, l.objectScale / w), f = l.centerX - m, v = l.centerY - s, p = M(
315
- (f - r.left) / Math.max(1, r.width)
316
- ), x = M(
317
- (v - r.top) / Math.max(1, r.height)
318
- );
319
- i && console.info("[PooderEditor] detectDieline alignment item", {
320
- id: l.id,
321
- target: n,
322
- frame: r,
323
- sourceSize: {
324
- width: l.sourceWidth,
325
- height: l.sourceHeight
326
- },
327
- objectScale: l.objectScale,
328
- coverScale: w,
329
- targetScale: y,
330
- centerBefore: { x: l.centerX, y: l.centerY },
331
- centerAfter: { x: f, y: v },
332
- normalizedAfter: { left: p, top: x }
333
- }), await g.executeCommand(
334
- "updateImage",
335
- l.id,
336
- {
337
- scale: y,
338
- left: p,
339
- top: x
340
- },
341
- {
342
- target: n
343
- }
344
- );
345
- }
346
- }, me = async (e, t, i, n, d, r = !1, m = "auto", s = "offset") => {
347
- if (!d.length || !Number.isFinite(e) || !Number.isFinite(t) || !Number.isFinite(i) || !Number.isFinite(n) || i <= 0 || n <= 0)
348
- return;
349
- const a = await g.executeCommand("getSceneLayout"), o = k(a);
350
- if (!o) return;
351
- const h = e * o.width / i, b = t * o.height / n;
352
- r && console.info("[PooderEditor] detectDieline direct compensation", {
353
- label: s,
354
- target: m,
355
- sourceWidth: i,
356
- sourceHeight: n,
357
- offsetX: e,
358
- offsetY: t,
359
- frame: o,
360
- shiftX: h,
361
- shiftY: b,
362
- shiftNormalized: {
363
- x: o.width > 0 ? h / o.width : 0,
364
- y: o.height > 0 ? b / o.height : 0
365
- },
366
- snapshotCount: d.length
367
- });
368
- for (const l of d) {
369
- const w = l.centerX - h, y = l.centerY - b, f = M(
370
- (w - o.left) / Math.max(1, o.width)
371
- ), v = M(
372
- (y - o.top) / Math.max(1, o.height)
373
- );
374
- r && console.info("[PooderEditor] detectDieline direct compensation item", {
375
- label: s,
376
- id: l.id,
377
- centerBefore: { x: l.centerX, y: l.centerY },
378
- centerAfter: { x: w, y },
379
- normalizedAfter: { left: f, top: v }
380
- }), await g.executeCommand(
381
- "updateImage",
382
- l.id,
383
- {
384
- left: f,
385
- top: v
386
- },
387
- {
388
- target: m
389
- }
390
- );
151
+ return s ? V(
152
+ s,
153
+ a,
154
+ t
155
+ ) : null;
156
+ } finally {
157
+ URL.revokeObjectURL(c);
391
158
  }
392
159
  };
393
- N({
394
- importConfig: _,
395
- exportConfig: Y,
396
- getImages: X,
397
- generateCutImage: Q,
398
- addImage: U,
399
- upsertImage: O,
400
- updateImage: Z,
401
- clearImages: ee,
402
- exportUserCroppedImage: B,
403
- focusImage: te,
160
+ l({
161
+ importConfig: p,
162
+ exportConfig: w,
163
+ getImages: y,
164
+ generateCutImage: A,
165
+ addImage: D,
166
+ upsertImage: _,
167
+ updateImage: U,
168
+ clearImages: z,
169
+ exportUserCroppedImage: C,
170
+ focusImage: M,
404
171
  detectDieline: async (e) => {
405
- const t = u.getService("CanvasService"), i = D(t), n = await g.executeCommand("detectEdge", e, {
172
+ const t = await i.executeCommand("detectEdge", e, {
406
173
  expand: 10,
407
174
  // 安全距离(像素)
408
175
  smoothing: !0,
@@ -410,226 +177,121 @@ const Ee = /* @__PURE__ */ J({
410
177
  simplifyTolerance: 2
411
178
  // 平滑度容差,值越大越圆润
412
179
  });
413
- if (n) {
414
- P(n);
415
- const r = (c.get("image.items") || []).find((m) => m.url === e);
416
- if (r?.id) {
417
- const m = i.filter(
418
- (s) => s.id === r.id
419
- );
420
- await T(n, m);
421
- }
422
- return n.pathData;
423
- }
424
- return null;
180
+ return t ? (x(t), t.pathData) : null;
425
181
  },
426
182
  detectDielineFromFrame: async (e) => {
427
- const t = e?.detect?.debug === !0, i = e?.inspect?.includeCroppedImage === !0, n = e?.inspect?.includeDiagnostics === !0, d = u.getService("CanvasService"), r = D(d);
428
- let m = null;
429
- if (t)
430
- try {
431
- m = await g.executeCommand("getSceneLayout");
432
- } catch (o) {
433
- console.warn("[PooderEditor] detectDielineFromFrame layout(before) failed", {
434
- error: o
435
- });
436
- }
437
- const s = await B({
183
+ const t = e?.detect?.debug === !0, n = e?.inspect?.includeCroppedImage === !0, a = e?.inspect?.includeDiagnostics === !0, c = Math.max(0, Number(e?.detect?.expand ?? 0)), s = await C({
438
184
  multiplier: e?.export?.multiplier ?? 2,
439
185
  format: e?.export?.format ?? "png",
440
186
  imageIds: e?.export?.imageIds
441
- }), a = s?.url;
442
- if (!a) return null;
187
+ }), d = s?.url;
188
+ if (!d)
189
+ return console.warn("[PooderEditor] detectDielineFromFrame no source image"), null;
443
190
  try {
444
- t && console.info("[PooderEditor] detectDielineFromFrame sourceImage", {
445
- width: s.width,
446
- height: s.height,
447
- format: s.format,
448
- multiplier: s.multiplier,
449
- imageCount: s.imageIds.length,
450
- size: {
451
- actualWidthMm: c.get("size.actualWidthMm"),
452
- actualHeightMm: c.get("size.actualHeightMm"),
453
- viewPadding: c.get("size.viewPadding")
454
- },
455
- layoutBeforeCommit: W(m),
456
- imageSnapshots: r.map((p) => ({
457
- id: p.id,
458
- centerX: p.centerX,
459
- centerY: p.centerY,
460
- objectScale: p.objectScale,
461
- sourceWidth: p.sourceWidth,
462
- sourceHeight: p.sourceHeight
463
- }))
464
- });
465
- const o = await g.executeCommand("detectEdge", a, {
191
+ const g = await i.executeCommand("detectEdge", d, {
466
192
  expand: e?.detect?.expand ?? 0,
467
193
  smoothing: e?.detect?.smoothing ?? !0,
468
194
  simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
469
195
  threshold: e?.detect?.threshold,
470
196
  debug: t
471
197
  });
472
- if (!o) return null;
473
- const h = ce(o, s);
474
- if (t && console.info(
475
- "[PooderEditor] detectDielineFromFrame diagnostics",
476
- h
477
- ), e?.commit === !1)
198
+ if (!g)
199
+ return console.warn(
200
+ "[PooderEditor] detectDielineFromFrame detectEdge returned null"
201
+ ), null;
202
+ const I = E(g, s);
203
+ if (e?.commit === !1)
478
204
  return {
479
- ...o,
480
- ...i ? { sourceImage: s } : {},
481
- ...n ? { diagnostics: h } : {}
205
+ ...g,
206
+ ...n ? { sourceImage: s } : {},
207
+ ...a ? { diagnostics: I } : {}
482
208
  };
483
- P(o);
484
- const b = ne(o, t), l = await ae(t);
485
- let w = [];
486
- const y = A(r, s.imageIds);
487
- await T(
488
- o,
489
- y,
490
- t,
491
- l
492
- );
493
- const f = await B({
209
+ x(g, s);
210
+ const X = {
494
211
  multiplier: e?.export?.multiplier ?? 2,
495
212
  format: e?.export?.format ?? "png",
496
- imageIds: s.imageIds
497
- }), v = f?.url;
498
- if (v)
499
- try {
500
- const p = await g.executeCommand("detectEdge", v, {
501
- expand: e?.detect?.expand ?? 0,
502
- smoothing: e?.detect?.smoothing ?? !0,
503
- simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
504
- threshold: e?.detect?.threshold,
505
- debug: t
506
- });
507
- if (p) {
508
- const x = re(
509
- p,
510
- f.width,
511
- f.height
512
- );
513
- if (t && console.info("[PooderEditor] detectDieline verify pass", {
514
- sourceWidth: f.width,
515
- sourceHeight: f.height,
516
- offset: x,
517
- imageIds: s.imageIds
518
- }), x && (Math.abs(x.offsetX) > 0.01 || Math.abs(x.offsetY) > 0.01)) {
519
- const le = A(
520
- D(d),
521
- s.imageIds
522
- );
523
- await me(
524
- x.offsetX,
525
- x.offsetY,
526
- f.width,
527
- f.height,
528
- le,
529
- t,
530
- l,
531
- "verify-pass"
532
- );
533
- }
534
- }
535
- } finally {
536
- URL.revokeObjectURL(v);
213
+ detect: {
214
+ expand: e?.detect?.expand ?? 0,
215
+ smoothing: e?.detect?.smoothing ?? !0,
216
+ simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
217
+ threshold: e?.detect?.threshold
537
218
  }
538
- if (l === "config" && s.imageIds.length > 0 && (w = await se(
219
+ };
220
+ let S = await W(
539
221
  s.imageIds,
540
- {
541
- multiplier: e?.export?.multiplier ?? 2,
542
- format: e?.export?.format ?? "png"
543
- },
544
- t
545
- )), t) {
546
- let p = null;
547
- try {
548
- p = await g.executeCommand("getSceneLayout");
549
- } catch (x) {
550
- console.warn("[PooderEditor] detectDielineFromFrame layout(after) failed", {
551
- error: x
552
- });
553
- }
554
- console.info("[PooderEditor] detectDielineFromFrame commit result", {
555
- mappedSize: b,
556
- imageUpdateTarget: l,
557
- committedSync: w,
558
- sizeAfter: {
559
- actualWidthMm: c.get("size.actualWidthMm"),
560
- actualHeightMm: c.get("size.actualHeightMm"),
561
- viewPadding: c.get("size.viewPadding")
562
- },
563
- layoutAfterCommit: W(p)
564
- });
565
- }
566
- return {
567
- ...o,
568
- ...i ? { sourceImage: s } : {},
569
- ...n ? { diagnostics: h } : {}
222
+ c,
223
+ X
224
+ );
225
+ return S ? console.info(
226
+ "[PooderEditor] detectDielineFromFrame post-commit diagnostics",
227
+ S
228
+ ) : s.imageIds.length > 0 && console.warn(
229
+ "[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"
230
+ ), {
231
+ ...g,
232
+ ...n ? { sourceImage: s } : {},
233
+ ...a ? { diagnostics: I, postCommitDiagnostics: S } : {}
570
234
  };
571
235
  } finally {
572
- a && !i && URL.revokeObjectURL(a);
236
+ d && !n && URL.revokeObjectURL(d);
573
237
  }
574
238
  },
575
239
  uploadAndDetectEdge: async (e, t) => {
576
- const i = u.getService("CanvasService"), n = await U(e), d = D(i).filter(
577
- (m) => m.id === n
578
- ), r = await g.executeCommand("detectEdge", e, {
240
+ const n = await D(e), a = await i.executeCommand("detectEdge", e, {
579
241
  expand: t?.expand ?? 10,
580
242
  smoothing: t?.smoothing ?? !0,
581
243
  simplifyTolerance: t?.simplifyTolerance ?? 2
582
244
  });
583
- return r ? (P(r), await T(r, d), { imageId: n, url: e, pathData: r.pathData }) : null;
245
+ return a ? (x(a), { imageId: n, url: e, pathData: a.pathData }) : null;
584
246
  },
585
- activateTool: async (e) => await S.switchTool(e),
586
- deactivateTool: async () => await S.deactivate(),
587
- on: (e, t) => u.eventBus.on(e, t),
588
- off: (e, t) => u.eventBus.off(e, t),
589
- emit: (e, t) => u.eventBus.emit(e, t),
590
- executeCommand: (e, ...t) => g.executeCommand(e, ...t),
591
- getConfig: (e) => c.get(e),
592
- updateConfig: (e, t) => c.update(e, t),
247
+ activateTool: async (e) => await u.switchTool(e),
248
+ deactivateTool: async () => await u.deactivate(),
249
+ on: (e, t) => r.eventBus.on(e, t),
250
+ off: (e, t) => r.eventBus.off(e, t),
251
+ emit: (e, t) => r.eventBus.emit(e, t),
252
+ executeCommand: (e, ...t) => i.executeCommand(e, ...t),
253
+ getConfig: (e) => o.get(e),
254
+ updateConfig: (e, t) => o.update(e, t),
593
255
  services: {
594
- workbench: S,
595
- command: g,
596
- config: c
256
+ workbench: u,
257
+ command: i,
258
+ config: o
597
259
  }
598
260
  });
599
- const ue = (e) => {
600
- const t = new ve(e, {
601
- eventBus: u.eventBus
261
+ const Y = (e) => {
262
+ const t = new K(e, {
263
+ eventBus: r.eventBus
602
264
  });
603
- u.registerService(t, "CanvasService"), u.registerService(new be(), j), u.registerService(
604
- new xe(),
605
- V
265
+ r.registerService(t, "CanvasService"), r.registerService(new Q(), F), r.registerService(
266
+ new Z(),
267
+ B
606
268
  ), [
607
- new Se(),
608
- new Ce(),
609
- new Ne(),
269
+ new ee(),
270
+ new te(),
271
+ new ne(),
610
272
  // new FilmTool(),
611
- new Ie(),
612
- new Fe(),
613
- new Be(),
614
- new Me(),
615
- new De()
616
- ].forEach((n) => {
617
- u.extensionManager.register(n);
273
+ new re(),
274
+ new ie(),
275
+ new oe(),
276
+ new ae(),
277
+ new ce()
278
+ ].forEach((a) => {
279
+ r.extensionManager.register(a);
618
280
  });
619
- }, ge = (e, t) => {
620
- const i = u.getService("CanvasService");
621
- i && i.resize(e, t);
281
+ }, H = (e, t) => {
282
+ const n = r.getService("CanvasService");
283
+ n && n.resize(e, t);
622
284
  };
623
- return G(() => {
624
- z.dispose(), u.extensionManager.destroy(), u.unregisterService(V), u.unregisterService(j), u.unregisterService("CanvasService");
625
- }), (e, t) => (q(), $("div", _e, [
626
- we(ze, {
627
- onCanvasReady: ue,
628
- onResize: ge
285
+ return N(() => {
286
+ v.dispose(), r.extensionManager.destroy(), r.unregisterService(B), r.unregisterService(F), r.unregisterService("CanvasService");
287
+ }), (e, t) => (k(), P("div", me, [
288
+ G(de, {
289
+ onCanvasReady: Y,
290
+ onResize: H
629
291
  })
630
292
  ]));
631
293
  }
632
- }), We = /* @__PURE__ */ K(Pe, [["__scopeId", "data-v-7e138562"]]);
294
+ }), we = /* @__PURE__ */ R(ue, [["__scopeId", "data-v-53ea55ea"]]);
633
295
  export {
634
- We as PooderEditor
296
+ we as PooderEditor
635
297
  };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.PooderVue={},v.Vue,v.PooderCore,v.PooderKit))})(this,(function(v,w,P,S){"use strict";const $=w.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(y,{emit:M}){const F=M,u=w.ref(null),l=w.ref(null);let c=null;return w.onMounted(()=>{if(u.value&&l.value){const{clientWidth:B,clientHeight:D}=u.value;l.value.width=B,l.value.height=D,F("canvas-ready",l.value),c=new ResizeObserver(X=>{for(const O of X){const{width:T,height:R}=O.contentRect;F("resize",T,R)}}),c.observe(u.value)}}),w.onUnmounted(()=>{c&&c.disconnect()}),(B,D)=>(w.openBlock(),w.createElementBlock("div",{ref_key:"container",ref:u,class:"pooder-canvas-area"},[w.createElementVNode("canvas",{ref_key:"canvas",ref:l},null,512)],512))}}),W=(y,M)=>{const F=y.__vccOpts||y;for(const[u,l]of M)F[u]=l;return F},Q=W($,[["__scopeId","data-v-9668bbd7"]]),Z={class:"pooder-editor"},L="SceneLayoutService",H="SceneVisibilityService",ee="image.user",te="pooder.kit.image",ie=W(w.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(y,{expose:M,emit:F}){const u=new P.Pooder;w.provide("pooder",u);const l=u.getService("CommandService"),c=u.getService("ConfigurationService"),B=u.getService("WorkbenchService"),D=F,X=c.onAnyChange(e=>{e.key==="image.items"&&D("image-change",e.value)}),O=e=>{c.import(e)},T=()=>c.export(),R=()=>c.get("image.items",[]),ne=async e=>{try{const t=await l.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(c.get("image.items")||[]).length,hasCanvasService:!!u.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},k=async(e,t)=>await l.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),V=async(e,t)=>(await k(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,oe=async(e,t)=>await l.executeCommand("updateImage",e,t),re=async()=>await l.executeCommand("clearImages"),E=async e=>await l.executeCommand("exportUserCroppedImage",e),ae=async(e,t)=>await l.executeCommand("focusImage",e,t),z=e=>Math.max(-1,Math.min(2,e)),q=e=>{const t=e?.cutRect;if(!t)return null;const i=Number(t.width),n=Number(t.height),d=Number(t.left),o=Number(t.top);return!Number.isFinite(i)||!Number.isFinite(n)||!Number.isFinite(d)||!Number.isFinite(o)||i<=0||n<=0?null:{left:d,top:o,width:i,height:n}},_=e=>{if(!e)return[];const t=e.canvas.getObjects(),i=[];for(const n of t){if(n?.data?.layerId!==ee)continue;const d=n?.data?.id;if(typeof d!="string")continue;const o=n.getCenterPoint?n.getCenterPoint():null,m=Number(o?.x??n.left),s=Number(o?.y??n.top),a=Number(n.scaleX),r=Number(n.width),h=Number(n.height);!Number.isFinite(m)||!Number.isFinite(s)||!Number.isFinite(a)||!Number.isFinite(r)||!Number.isFinite(h)||r<=0||h<=0||i.push({id:d,centerX:m,centerY:s,objectScale:a,sourceWidth:r,sourceHeight:h})}return i},J=(e,t)=>{if(!t||t.length===0)return e;const i=new Set(t);return e.filter(n=>i.has(n.id))},U=e=>{c.update("dieline.shape","custom"),c.update("dieline.pathData",e.pathData),c.update("dieline.features",[]),c.update("size.cutMode","trim"),c.update("size.cutMarginMm",0)},Y=e=>!!e&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0,se=e=>{const t=e.baseBounds||e.rawBounds,i=e.rawBounds||e.baseBounds;if(!Y(t)||!Y(i))return null;const n=Number(c.get("size.actualWidthMm",0)),d=Number(c.get("size.actualHeightMm",0)),o=Math.max(n,d),m=Math.max(t.width,t.height),s=Math.max(i.width,i.height);if(!Number.isFinite(o)||!Number.isFinite(m)||!Number.isFinite(s)||o<=0||m<=0||s<=0)return null;const a=o/s,r=i.width*a,h=i.height*a;return!Number.isFinite(r)||!Number.isFinite(h)||r<=0||h<=0?null:{widthMm:r,heightMm:h,scale:a,sizeLongEdgeMm:o,baseLongEdge:m,appliedBounds:i,baseBounds:t}},ce=(e,t=!1)=>{const i=se(e);return i?(c.update("size.actualWidthMm",i.widthMm),c.update("size.actualHeightMm",i.heightMm),c.update("size.aspectRatio",i.widthMm/Math.max(.001,i.heightMm)),t&&console.info("[PooderEditor] detectDielineFromFrame size mapping",{mappedSize:i,rawBounds:e.rawBounds,baseBounds:e.baseBounds}),i):null},A=e=>{if(!e)return null;const t=Number(e.left),i=Number(e.top),n=Number(e.width),d=Number(e.height),o=Number(e.centerX),m=Number(e.centerY);return!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)||!Number.isFinite(d)||!Number.isFinite(o)||!Number.isFinite(m)?null:{left:t,top:i,width:n,height:d,centerX:o,centerY:m}},G=e=>{if(!e)return null;const t=Number(e.scale),i=Number(e.canvasWidth),n=Number(e.canvasHeight);return!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)?null:{scale:t,canvasWidth:i,canvasHeight:n,viewPadding:c.get("size.viewPadding"),trimRect:A(e.trimRect),cutRect:A(e.cutRect),bleedRect:A(e.bleedRect)}},de=(e,t,i)=>{const n=e.rawBounds||e.baseBounds;return!Y(n)||!Number.isFinite(t)||!Number.isFinite(i)||t<=0||i<=0?null:{bounds:n,offsetX:n.x+n.width/2-t/2,offsetY:n.y+n.height/2-i/2}},K=e=>(e||[]).map(t=>({id:String(t?.id??""),left:Number(t?.left??0),top:Number(t?.top??0),scale:Number(t?.scale??1),angle:Number(t?.angle??0),url:typeof t?.url=="string"?t.url:"",sourceUrl:typeof t?.sourceUrl=="string"?t.sourceUrl:"",committedUrl:typeof t?.committedUrl=="string"?t.committedUrl:""})),me=async()=>{try{const e=await l.executeCommand("getWorkingImages")||[],t=c.get("image.items",[])||[],i=K(e),n=K(t);return JSON.stringify(i)!==JSON.stringify(n)}catch{return!1}},ue=async(e=!1)=>{const t=typeof B?.activeToolId=="string"?String(B.activeToolId):null;if(t!==te)return e&&console.info("[PooderEditor] detectDielineFromFrame image update target",{activeToolId:t,target:"config",reason:"image-tool-inactive"}),"config";const i=await me(),n=i?"working":"config";return e&&console.info("[PooderEditor] detectDielineFromFrame image update target",{activeToolId:t,workingDirty:i,target:n,reason:i?"working-session-dirty-follow-working":"working-session-clean-update-config"}),n},le=async(e,t,i=!1)=>{const n=[...new Set(e)].filter(a=>typeof a=="string"&&a.length>0);if(!n.length)return[];const d=new Map;for(const a of n){const r=await E({multiplier:t?.multiplier??2,format:t?.format??"png",imageIds:[a]});r?.url&&d.set(a,{url:r.url,width:r.width,height:r.height})}if(!d.size)return[];const m=(Array.isArray(c.get("image.items",[]))?c.get("image.items",[]):[]).map(a=>{const r=typeof a?.id=="string"?a.id:"",h=d.get(r);if(!h)return a;const N=typeof a?.sourceUrl=="string"&&a.sourceUrl.length>0?a.sourceUrl:typeof a?.url=="string"?a.url:"";return{...a,url:h.url,sourceUrl:N,committedUrl:h.url}});c.update("image.items",m);const s=n.map(a=>{const r=d.get(a);return r?{id:a,width:r.width,height:r.height}:null}).filter(a=>!!a);return i&&console.info("[PooderEditor] detectDieline committed image sync",{imageIds:n,synced:s,count:s.length}),s},ge=(e,t)=>{const i=e.rawBounds||e.baseBounds||null;if(!i)return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:null,centerOffsetX:0,centerOffsetY:0,coverageX:0,coverageY:0};const n=t.width/2,d=t.height/2,o=i.x+i.width/2,m=i.y+i.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:i,centerOffsetX:o-n,centerOffsetY:m-d,coverageX:t.width>0?i.width/t.width:0,coverageY:t.height>0?i.height/t.height:0}},he=(e,t)=>{const i=e.rawBounds||e.baseBounds,n=Number(e.imageWidth??0),d=Number(e.imageHeight??0);if(!i||!Number.isFinite(i.x)||!Number.isFinite(i.y)||!Number.isFinite(i.width)||!Number.isFinite(i.height)||i.width<=0||i.height<=0||n<=0||d<=0)return{shiftX:0,shiftY:0};const o=t.width/i.width,m=t.height/i.height,s=i.x+i.width/2,a=i.y+i.height/2,r=n/2,h=d/2;return{shiftX:(s-r)*o,shiftY:(a-h)*m}},j=async(e,t,i=!1,n="auto")=>{if(!t.length)return;const d=await l.executeCommand("getSceneLayout"),o=q(d);if(!o)return;const{shiftX:m,shiftY:s}=he(e,o),a=e.rawBounds,r=e.baseBounds,h=Number(e.imageWidth??0),N=Number(e.imageHeight??0);if(i){const g=f=>{if(!Y(f)||h<=0||N<=0)return null;const x=f.x+f.width/2-h/2,p=f.y+f.height/2-N/2;return{dx:x,dy:p,byBounds:{shiftX:x*(o.width/Math.max(1,f.width)),shiftY:p*(o.height/Math.max(1,f.height))},byImage:{shiftX:x*(o.width/Math.max(1,h)),shiftY:p*(o.height/Math.max(1,N))}}},b=g(a),C=g(r);console.info("[PooderEditor] detectDieline alignment",{frame:o,shiftX:m,shiftY:s,shiftNormalized:{x:o.width>0?m/o.width:0,y:o.height>0?s/o.height:0},snapshotCount:t.length,baseBounds:r,rawBounds:a,imageWidth:h,imageHeight:N,shiftCandidates:{raw:b,base:C},shiftRawByBoundsX:b?.byBounds?.shiftX,shiftRawByBoundsY:b?.byBounds?.shiftY,shiftRawByImageX:b?.byImage?.shiftX,shiftRawByImageY:b?.byImage?.shiftY,shiftBaseByBoundsX:C?.byBounds?.shiftX,shiftBaseByBoundsY:C?.byBounds?.shiftY,shiftBaseByImageX:C?.byImage?.shiftX,shiftBaseByImageY:C?.byImage?.shiftY})}for(const g of t){const b=Math.max(o.width/Math.max(1,g.sourceWidth),o.height/Math.max(1,g.sourceHeight)),C=Math.max(.05,g.objectScale/b),f=g.centerX-m,x=g.centerY-s,p=z((f-o.left)/Math.max(1,o.width)),I=z((x-o.top)/Math.max(1,o.height));i&&console.info("[PooderEditor] detectDieline alignment item",{id:g.id,target:n,frame:o,sourceSize:{width:g.sourceWidth,height:g.sourceHeight},objectScale:g.objectScale,coverScale:b,targetScale:C,centerBefore:{x:g.centerX,y:g.centerY},centerAfter:{x:f,y:x},normalizedAfter:{left:p,top:I}}),await l.executeCommand("updateImage",g.id,{scale:C,left:p,top:I},{target:n})}},fe=async(e,t,i,n,d,o=!1,m="auto",s="offset")=>{if(!d.length||!Number.isFinite(e)||!Number.isFinite(t)||!Number.isFinite(i)||!Number.isFinite(n)||i<=0||n<=0)return;const a=await l.executeCommand("getSceneLayout"),r=q(a);if(!r)return;const h=e*r.width/i,N=t*r.height/n;o&&console.info("[PooderEditor] detectDieline direct compensation",{label:s,target:m,sourceWidth:i,sourceHeight:n,offsetX:e,offsetY:t,frame:r,shiftX:h,shiftY:N,shiftNormalized:{x:r.width>0?h/r.width:0,y:r.height>0?N/r.height:0},snapshotCount:d.length});for(const g of d){const b=g.centerX-h,C=g.centerY-N,f=z((b-r.left)/Math.max(1,r.width)),x=z((C-r.top)/Math.max(1,r.height));o&&console.info("[PooderEditor] detectDieline direct compensation item",{label:s,id:g.id,centerBefore:{x:g.centerX,y:g.centerY},centerAfter:{x:b,y:C},normalizedAfter:{left:f,top:x}}),await l.executeCommand("updateImage",g.id,{left:f,top:x},{target:m})}};M({importConfig:O,exportConfig:T,getImages:R,generateCutImage:ne,addImage:V,upsertImage:k,updateImage:oe,clearImages:re,exportUserCroppedImage:E,focusImage:ae,detectDieline:async e=>{const t=u.getService("CanvasService"),i=_(t),n=await l.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});if(n){U(n);const o=(c.get("image.items")||[]).find(m=>m.url===e);if(o?.id){const m=i.filter(s=>s.id===o.id);await j(n,m)}return n.pathData}return null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,i=e?.inspect?.includeCroppedImage===!0,n=e?.inspect?.includeDiagnostics===!0,d=u.getService("CanvasService"),o=_(d);let m=null;if(t)try{m=await l.executeCommand("getSceneLayout")}catch(r){console.warn("[PooderEditor] detectDielineFromFrame layout(before) failed",{error:r})}const s=await E({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),a=s?.url;if(!a)return null;try{t&&console.info("[PooderEditor] detectDielineFromFrame sourceImage",{width:s.width,height:s.height,format:s.format,multiplier:s.multiplier,imageCount:s.imageIds.length,size:{actualWidthMm:c.get("size.actualWidthMm"),actualHeightMm:c.get("size.actualHeightMm"),viewPadding:c.get("size.viewPadding")},layoutBeforeCommit:G(m),imageSnapshots:o.map(p=>({id:p.id,centerX:p.centerX,centerY:p.centerY,objectScale:p.objectScale,sourceWidth:p.sourceWidth,sourceHeight:p.sourceHeight}))});const r=await l.executeCommand("detectEdge",a,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(!r)return null;const h=ge(r,s);if(t&&console.info("[PooderEditor] detectDielineFromFrame diagnostics",h),e?.commit===!1)return{...r,...i?{sourceImage:s}:{},...n?{diagnostics:h}:{}};U(r);const N=ce(r,t),g=await ue(t);let b=[];const C=J(o,s.imageIds);await j(r,C,t,g);const f=await E({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:s.imageIds}),x=f?.url;if(x)try{const p=await l.executeCommand("detectEdge",x,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(p){const I=de(p,f.width,f.height);if(t&&console.info("[PooderEditor] detectDieline verify pass",{sourceWidth:f.width,sourceHeight:f.height,offset:I,imageIds:s.imageIds}),I&&(Math.abs(I.offsetX)>.01||Math.abs(I.offsetY)>.01)){const ye=J(_(d),s.imageIds);await fe(I.offsetX,I.offsetY,f.width,f.height,ye,t,g,"verify-pass")}}}finally{URL.revokeObjectURL(x)}if(g==="config"&&s.imageIds.length>0&&(b=await le(s.imageIds,{multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png"},t)),t){let p=null;try{p=await l.executeCommand("getSceneLayout")}catch(I){console.warn("[PooderEditor] detectDielineFromFrame layout(after) failed",{error:I})}console.info("[PooderEditor] detectDielineFromFrame commit result",{mappedSize:N,imageUpdateTarget:g,committedSync:b,sizeAfter:{actualWidthMm:c.get("size.actualWidthMm"),actualHeightMm:c.get("size.actualHeightMm"),viewPadding:c.get("size.viewPadding")},layoutAfterCommit:G(p)})}return{...r,...i?{sourceImage:s}:{},...n?{diagnostics:h}:{}}}finally{a&&!i&&URL.revokeObjectURL(a)}},uploadAndDetectEdge:async(e,t)=>{const i=u.getService("CanvasService"),n=await V(e),d=_(i).filter(m=>m.id===n),o=await l.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return o?(U(o),await j(o,d),{imageId:n,url:e,pathData:o.pathData}):null},activateTool:async e=>await B.switchTool(e),deactivateTool:async()=>await B.deactivate(),on:(e,t)=>u.eventBus.on(e,t),off:(e,t)=>u.eventBus.off(e,t),emit:(e,t)=>u.eventBus.emit(e,t),executeCommand:(e,...t)=>l.executeCommand(e,...t),getConfig:e=>c.get(e),updateConfig:(e,t)=>c.update(e,t),services:{workbench:B,command:l,config:c}});const pe=e=>{const t=new S.CanvasService(e,{eventBus:u.eventBus});u.registerService(t,"CanvasService"),u.registerService(new S.SceneLayoutService,L),u.registerService(new S.SceneVisibilityService,H),[new S.BackgroundTool,new S.SizeTool,new S.ImageTool,new S.WhiteInkTool,new S.MirrorTool,new S.DielineTool,new S.RulerTool,new S.FeatureTool].forEach(n=>{u.extensionManager.register(n)})},we=(e,t)=>{const i=u.getService("CanvasService");i&&i.resize(e,t)};return w.onUnmounted(()=>{X.dispose(),u.extensionManager.destroy(),u.unregisterService(H),u.unregisterService(L),u.unregisterService("CanvasService")}),(e,t)=>(w.openBlock(),w.createElementBlock("div",Z,[w.createVNode(Q,{onCanvasReady:pe,onResize:we})]))}}),[["__scopeId","data-v-7e138562"]]);v.PooderEditor=ie,Object.keys(P).forEach(y=>{y!=="default"&&!Object.prototype.hasOwnProperty.call(v,y)&&Object.defineProperty(v,y,{enumerable:!0,get:()=>P[y]})}),Object.keys(S).forEach(y=>{y!=="default"&&!Object.prototype.hasOwnProperty.call(v,y)&&Object.defineProperty(v,y,{enumerable:!0,get:()=>S[y]})}),Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l.PooderVue={},l.Vue,l.PooderCore,l.PooderKit))})(this,(function(l,s,w,m){"use strict";const U=s.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(d,{emit:p}){const f=p,r=s.ref(null),o=s.ref(null);let i=null;return s.onMounted(()=>{if(r.value&&o.value){const{clientWidth:h,clientHeight:y}=r.value;o.value.width=h,o.value.height=y,f("canvas-ready",o.value),i=new ResizeObserver(C=>{for(const S of C){const{width:x,height:b}=S.contentRect;f("resize",x,b)}}),i.observe(r.value)}}),s.onUnmounted(()=>{i&&i.disconnect()}),(h,y)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"container",ref:r,class:"pooder-canvas-area"},[s.createElementVNode("canvas",{ref_key:"canvas",ref:o},null,512)],512))}}),O=(d,p)=>{const f=d.__vccOpts||d;for(const[r,o]of p)f[r]=o;return f},j=O(U,[["__scopeId","data-v-203ff8d9"]]),A={class:"pooder-editor"},I="SceneLayoutService",T="SceneVisibilityService",M=O(s.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(d,{expose:p,emit:f}){const r=new w.Pooder;s.provide("pooder",r);const o=r.getService("CommandService"),i=r.getService("ConfigurationService"),h=r.getService("WorkbenchService"),y=f,C=i.onAnyChange(e=>{e.key==="image.items"&&y("image-change",e.value)}),S=e=>{i.import(e)},x=()=>i.export(),b=()=>i.get("image.items",[]),V=async e=>{try{const t=await o.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(i.get("image.items")||[]).length,hasCanvasService:!!r.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},P=async(e,t)=>await o.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),F=async(e,t)=>(await P(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,z=async(e,t)=>await o.executeCommand("updateImage",e,t),L=async()=>await o.executeCommand("clearImages"),_=async e=>await o.executeCommand("exportUserCroppedImage",e),W=async(e,t)=>await o.executeCommand("focusImage",e,t),D=(e,t)=>{i.update("dieline.shape","custom"),i.update("dieline.pathData",e.pathData);const n=Number(e.imageWidth??t?.width??0),c=Number(e.imageHeight??t?.height??0);i.update("dieline.customSourceWidthPx",Number.isFinite(n)&&n>0?n:void 0),i.update("dieline.customSourceHeightPx",Number.isFinite(c)&&c>0?c:void 0),i.update("size.cutMode","trim"),i.update("size.cutMarginMm",0)},B=e=>!!e&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0,N=(e,t)=>{const n=e.rawBounds||e.baseBounds||null;if(!n)return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:null,centerOffsetX:0,centerOffsetY:0,coverageX:0,coverageY:0};const c=t.width/2,a=t.height/2,u=n.x+n.width/2,g=n.y+n.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:n,centerOffsetX:u-c,centerOffsetY:g-a,coverageX:t.width>0?n.width/t.width:0,coverageY:t.height>0?n.height/t.height:0}},Y=e=>{if(!B(e.rawBounds)||!B(e.baseBounds))return null;const t=e.rawBounds,n=e.baseBounds;return{left:n.x-t.x,top:n.y-t.y,right:t.x+t.width-(n.x+n.width),bottom:t.y+t.height-(n.y+n.height)}},H=(e,t,n)=>{const c=N(e,t),a=Y(e),u=a?{left:a.left-n,top:a.top-n,right:a.right-n,bottom:a.bottom-n}:null,g=a?{x:a.right-a.left,y:a.bottom-a.top}:null;return{frame:c,margin:a,expectedExpand:n,marginDeltaFromExpected:u,marginAsymmetry:g}},X=async(e,t,n)=>{if(!e.length)return null;const c=await _({multiplier:n?.multiplier??2,format:n?.format??"png",imageIds:e}),a=c?.url;if(!a)return null;try{const u=await o.executeCommand("detectEdge",a,{expand:n?.detect?.expand??0,smoothing:n?.detect?.smoothing??!0,simplifyTolerance:n?.detect?.simplifyTolerance??2,threshold:n?.detect?.threshold,debug:!1});return u?H(u,c,t):null}finally{URL.revokeObjectURL(a)}};p({importConfig:S,exportConfig:x,getImages:b,generateCutImage:V,addImage:F,upsertImage:P,updateImage:z,clearImages:L,exportUserCroppedImage:_,focusImage:W,detectDieline:async e=>{const t=await o.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});return t?(D(t),t.pathData):null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,n=e?.inspect?.includeCroppedImage===!0,c=e?.inspect?.includeDiagnostics===!0,a=Math.max(0,Number(e?.detect?.expand??0)),u=await _({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),g=u?.url;if(!g)return console.warn("[PooderEditor] detectDielineFromFrame no source image"),null;try{const v=await o.executeCommand("detectEdge",g,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,debug:t});if(!v)return console.warn("[PooderEditor] detectDielineFromFrame detectEdge returned null"),null;const R=N(v,u);if(e?.commit===!1)return{...v,...n?{sourceImage:u}:{},...c?{diagnostics:R}:{}};D(v,u);const $={multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",detect:{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold}};let E=await X(u.imageIds,a,$);return E?console.info("[PooderEditor] detectDielineFromFrame post-commit diagnostics",E):u.imageIds.length>0&&console.warn("[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"),{...v,...n?{sourceImage:u}:{},...c?{diagnostics:R,postCommitDiagnostics:E}:{}}}finally{g&&!n&&URL.revokeObjectURL(g)}},uploadAndDetectEdge:async(e,t)=>{const n=await F(e),c=await o.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return c?(D(c),{imageId:n,url:e,pathData:c.pathData}):null},activateTool:async e=>await h.switchTool(e),deactivateTool:async()=>await h.deactivate(),on:(e,t)=>r.eventBus.on(e,t),off:(e,t)=>r.eventBus.off(e,t),emit:(e,t)=>r.eventBus.emit(e,t),executeCommand:(e,...t)=>o.executeCommand(e,...t),getConfig:e=>i.get(e),updateConfig:(e,t)=>i.update(e,t),services:{workbench:h,command:o,config:i}});const q=e=>{const t=new m.CanvasService(e,{eventBus:r.eventBus});r.registerService(t,"CanvasService"),r.registerService(new m.SceneLayoutService,I),r.registerService(new m.SceneVisibilityService,T),[new m.BackgroundTool,new m.SizeTool,new m.ImageTool,new m.WhiteInkTool,new m.MirrorTool,new m.DielineTool,new m.RulerTool,new m.FeatureTool].forEach(c=>{r.extensionManager.register(c)})},K=(e,t)=>{const n=r.getService("CanvasService");n&&n.resize(e,t)};return s.onUnmounted(()=>{C.dispose(),r.extensionManager.destroy(),r.unregisterService(T),r.unregisterService(I),r.unregisterService("CanvasService")}),(e,t)=>(s.openBlock(),s.createElementBlock("div",A,[s.createVNode(j,{onCanvasReady:q,onResize:K})]))}}),[["__scopeId","data-v-53ea55ea"]]);l.PooderEditor=M,Object.keys(w).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(l,d)&&Object.defineProperty(l,d,{enumerable:!0,get:()=>w[d]})}),Object.keys(m).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(l,d)&&Object.defineProperty(l,d,{enumerable:!0,get:()=>m[d]})}),Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
@@ -14,6 +14,22 @@ interface DetectFrameDiagnostics {
14
14
  coverageX: number;
15
15
  coverageY: number;
16
16
  }
17
+ interface DetectMarginDiagnostics {
18
+ left: number;
19
+ top: number;
20
+ right: number;
21
+ bottom: number;
22
+ }
23
+ interface DetectPostCommitDiagnostics {
24
+ frame: DetectFrameDiagnostics;
25
+ margin: DetectMarginDiagnostics | null;
26
+ expectedExpand: number;
27
+ marginDeltaFromExpected: DetectMarginDiagnostics | null;
28
+ marginAsymmetry: {
29
+ x: number;
30
+ y: number;
31
+ } | null;
32
+ }
17
33
  interface ExportUserCroppedImageResult {
18
34
  url: string;
19
35
  width: number;
@@ -67,6 +83,7 @@ declare const _default: import('vue').DefineComponent<{}, {
67
83
  commit?: boolean;
68
84
  }) => Promise<{
69
85
  diagnostics?: DetectFrameDiagnostics | undefined;
86
+ postCommitDiagnostics?: DetectPostCommitDiagnostics | null | undefined;
70
87
  sourceImage?: ExportUserCroppedImageResult | undefined;
71
88
  pathData: string;
72
89
  rawBounds?: DetectBounds;
@@ -83,8 +100,8 @@ declare const _default: import('vue').DefineComponent<{}, {
83
100
  url: string;
84
101
  pathData: string;
85
102
  } | null>;
86
- activateTool: (id: string | null) => Promise<import('../../core/src/index.ts/src/services/WorkbenchService').ToolSwitchResult>;
87
- deactivateTool: () => Promise<import('../../core/src/index.ts/src/services/WorkbenchService').ToolSwitchResult>;
103
+ activateTool: (id: string | null) => Promise<import('../../core/src/services/WorkbenchService').ToolSwitchResult>;
104
+ deactivateTool: () => Promise<import('../../core/src/services/WorkbenchService').ToolSwitchResult>;
88
105
  on: (event: string, handler: any) => void;
89
106
  off: (event: string, handler: any) => void;
90
107
  emit: (event: string, data: any) => void;
package/dist/vue.css CHANGED
@@ -1 +1 @@
1
- .pooder-canvas-area[data-v-9668bbd7]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#ececec;position:relative}canvas[data-v-9668bbd7]{display:block}.pooder-editor[data-v-7e138562]{display:flex;width:100%;height:100%;overflow:hidden}
1
+ .pooder-canvas-area[data-v-203ff8d9]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#ececec;position:relative}canvas[data-v-203ff8d9]{display:block}.pooder-editor[data-v-53ea55ea]{display:flex;width:100%;height:100%;overflow:hidden}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pooder/vue",
3
- "version": "4.2.7",
3
+ "version": "4.2.8",
4
4
  "main": "./dist/index.umd.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "types": "./dist/index.d.ts",
@@ -19,8 +19,8 @@
19
19
  "access": "public"
20
20
  },
21
21
  "dependencies": {
22
- "@pooder/kit": "5.3.0",
23
- "@pooder/core": "2.2.0"
22
+ "@pooder/core": "2.2.0",
23
+ "@pooder/kit": "5.3.1"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "vue": "^3.0.0"
@@ -1,2 +0,0 @@
1
- declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
2
- export default _default;