@pooder/vue 4.5.0 → 4.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +98 -95
- package/dist/index.umd.js +1 -1
- package/dist/vue/src/PooderEditor.vue.d.ts +5 -2
- package/dist/vue/src/model.d.ts +5 -2
- package/dist/vue.css +1 -1
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
|
@@ -1,55 +1,57 @@
|
|
|
1
|
-
import { defineComponent as F, ref as
|
|
2
|
-
import { Pooder as
|
|
1
|
+
import { defineComponent as F, ref as E, onMounted as J, onUnmounted as O, createElementBlock as N, openBlock as P, createElementVNode as K, provide as Q, createVNode as Z } from "vue";
|
|
2
|
+
import { Pooder as ee } from "@pooder/core";
|
|
3
3
|
export * from "@pooder/core";
|
|
4
|
-
import { CanvasService as
|
|
4
|
+
import { CanvasService as te, SceneLayoutService as ne, BackgroundTool as oe, SizeTool as ae, ImageTool as re, WhiteInkTool as ie, DielineTool as ce, RulerTool as se, FeatureTool as de } from "@pooder/kit";
|
|
5
5
|
export * from "@pooder/kit";
|
|
6
|
-
const
|
|
6
|
+
const me = /* @__PURE__ */ F({
|
|
7
7
|
__name: "CanvasArea",
|
|
8
8
|
emits: ["canvas-ready", "resize"],
|
|
9
|
-
setup(
|
|
10
|
-
const m = l,
|
|
9
|
+
setup(f, { emit: l }) {
|
|
10
|
+
const m = l, o = E(null), a = E(null);
|
|
11
11
|
let c = null;
|
|
12
|
-
return
|
|
13
|
-
if (
|
|
14
|
-
const { clientWidth: u, clientHeight:
|
|
15
|
-
a.value.width = u, a.value.height =
|
|
16
|
-
for (const
|
|
17
|
-
const { width: w, height: y } =
|
|
12
|
+
return J(() => {
|
|
13
|
+
if (o.value && a.value) {
|
|
14
|
+
const { clientWidth: u, clientHeight: g } = o.value;
|
|
15
|
+
a.value.width = u, a.value.height = g, m("canvas-ready", a.value), c = new ResizeObserver((v) => {
|
|
16
|
+
for (const p of v) {
|
|
17
|
+
const { width: w, height: y } = p.contentRect;
|
|
18
18
|
m("resize", w, y);
|
|
19
19
|
}
|
|
20
|
-
}), c.observe(
|
|
20
|
+
}), c.observe(o.value);
|
|
21
21
|
}
|
|
22
22
|
}), O(() => {
|
|
23
23
|
c && c.disconnect();
|
|
24
|
-
}), (u,
|
|
24
|
+
}), (u, g) => (P(), N("div", {
|
|
25
25
|
ref_key: "container",
|
|
26
|
-
ref:
|
|
26
|
+
ref: o,
|
|
27
27
|
class: "pooder-canvas-area"
|
|
28
28
|
}, [
|
|
29
|
-
|
|
29
|
+
K("canvas", {
|
|
30
30
|
ref_key: "canvas",
|
|
31
31
|
ref: a
|
|
32
32
|
}, null, 512)
|
|
33
33
|
], 512));
|
|
34
34
|
}
|
|
35
|
-
}), k = (
|
|
36
|
-
const m =
|
|
37
|
-
for (const [
|
|
38
|
-
m[
|
|
35
|
+
}), k = (f, l) => {
|
|
36
|
+
const m = f.__vccOpts || f;
|
|
37
|
+
for (const [o, a] of l)
|
|
38
|
+
m[o] = a;
|
|
39
39
|
return m;
|
|
40
|
-
},
|
|
40
|
+
}, ue = /* @__PURE__ */ k(me, [["__scopeId", "data-v-203ff8d9"]]), le = { class: "pooder-editor" }, T = "SceneLayoutService", ge = /* @__PURE__ */ F({
|
|
41
41
|
__name: "PooderEditor",
|
|
42
|
-
emits: ["image-state-change"],
|
|
43
|
-
setup(
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
const a =
|
|
47
|
-
|
|
42
|
+
emits: ["image-state-change", "image-session-notice"],
|
|
43
|
+
setup(f, { expose: l, emit: m }) {
|
|
44
|
+
const o = new ee();
|
|
45
|
+
Q("pooder", o);
|
|
46
|
+
const a = o.getService("CommandService"), c = o.getService("ConfigurationService"), u = o.getService("WorkbenchService"), g = m, v = (e) => {
|
|
47
|
+
g("image-state-change", e);
|
|
48
|
+
}, p = (e) => {
|
|
49
|
+
g("image-session-notice", e);
|
|
48
50
|
};
|
|
49
|
-
|
|
50
|
-
const
|
|
51
|
+
o.eventBus.on("image:state:change", v), o.eventBus.on("image:session:notice", p);
|
|
52
|
+
const w = (e) => {
|
|
51
53
|
c.import(e);
|
|
52
|
-
},
|
|
54
|
+
}, y = () => c.export(), R = async (e) => {
|
|
53
55
|
try {
|
|
54
56
|
const t = await a.executeCommand(
|
|
55
57
|
"exportCutImage",
|
|
@@ -58,7 +60,7 @@ const se = /* @__PURE__ */ F({
|
|
|
58
60
|
return t || console.warn("[PooderEditor] generateCutImage returned null", {
|
|
59
61
|
options: e,
|
|
60
62
|
imageCount: (c.get("image.items") || []).length,
|
|
61
|
-
hasCanvasService: !!
|
|
63
|
+
hasCanvasService: !!o.getService("CanvasService")
|
|
62
64
|
}), t;
|
|
63
65
|
} catch (t) {
|
|
64
66
|
throw console.error("[PooderEditor] generateCutImage failed", t), t;
|
|
@@ -71,23 +73,23 @@ const se = /* @__PURE__ */ F({
|
|
|
71
73
|
}), D = async (e, t) => (await _(e, {
|
|
72
74
|
mode: "add",
|
|
73
75
|
addOptions: t
|
|
74
|
-
})).id,
|
|
76
|
+
})).id, U = async (e, t, n) => await a.executeCommand(
|
|
75
77
|
"applyImageOperation",
|
|
76
78
|
e,
|
|
77
79
|
t,
|
|
78
80
|
n
|
|
79
|
-
),
|
|
81
|
+
), z = async () => await a.executeCommand("getImageViewState"), M = async (e, t, n) => await a.executeCommand("setImageTransform", e, t, n), W = (e) => (o.eventBus.on("image:state:change", e), () => o.eventBus.off("image:state:change", e)), L = (e) => (o.eventBus.on("image:session:notice", e), () => o.eventBus.off("image:session:notice", e)), Y = async (e, t) => await a.executeCommand("updateImage", e, t), A = async () => await a.executeCommand("clearImages"), C = async (e) => await a.executeCommand(
|
|
80
82
|
"exportUserCroppedImage",
|
|
81
83
|
e
|
|
82
|
-
),
|
|
84
|
+
), H = async (e, t) => await a.executeCommand("focusImage", e, t), x = (e, t) => {
|
|
83
85
|
c.update("dieline.shape", "custom"), c.update("dieline.pathData", e.pathData);
|
|
84
|
-
const n = Number(e.imageWidth ?? t?.width ?? 0),
|
|
86
|
+
const n = Number(e.imageWidth ?? t?.width ?? 0), r = Number(e.imageHeight ?? t?.height ?? 0);
|
|
85
87
|
c.update(
|
|
86
88
|
"dieline.customSourceWidthPx",
|
|
87
89
|
Number.isFinite(n) && n > 0 ? n : void 0
|
|
88
90
|
), c.update(
|
|
89
91
|
"dieline.customSourceHeightPx",
|
|
90
|
-
Number.isFinite(
|
|
92
|
+
Number.isFinite(r) && r > 0 ? r : void 0
|
|
91
93
|
), c.update("size.cutMode", "trim"), c.update("size.cutMarginMm", 0);
|
|
92
94
|
}, 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, I = (e, t) => {
|
|
93
95
|
const n = e.rawBounds || e.baseBounds || null;
|
|
@@ -101,17 +103,17 @@ const se = /* @__PURE__ */ F({
|
|
|
101
103
|
coverageX: 0,
|
|
102
104
|
coverageY: 0
|
|
103
105
|
};
|
|
104
|
-
const
|
|
106
|
+
const r = t.width / 2, i = t.height / 2, s = n.x + n.width / 2, d = n.y + n.height / 2;
|
|
105
107
|
return {
|
|
106
108
|
sourceWidth: t.width,
|
|
107
109
|
sourceHeight: t.height,
|
|
108
110
|
detectedBounds: n,
|
|
109
|
-
centerOffsetX: s -
|
|
111
|
+
centerOffsetX: s - r,
|
|
110
112
|
centerOffsetY: d - i,
|
|
111
113
|
coverageX: t.width > 0 ? n.width / t.width : 0,
|
|
112
114
|
coverageY: t.height > 0 ? n.height / t.height : 0
|
|
113
115
|
};
|
|
114
|
-
},
|
|
116
|
+
}, X = (e) => {
|
|
115
117
|
if (!b(e.rawBounds) || !b(e.baseBounds))
|
|
116
118
|
return null;
|
|
117
119
|
const t = e.rawBounds, n = e.baseBounds;
|
|
@@ -121,8 +123,8 @@ const se = /* @__PURE__ */ F({
|
|
|
121
123
|
right: t.x + t.width - (n.x + n.width),
|
|
122
124
|
bottom: t.y + t.height - (n.y + n.height)
|
|
123
125
|
};
|
|
124
|
-
},
|
|
125
|
-
const
|
|
126
|
+
}, V = (e, t, n) => {
|
|
127
|
+
const r = I(e, t), i = X(e), s = i ? {
|
|
126
128
|
left: i.left - n,
|
|
127
129
|
top: i.top - n,
|
|
128
130
|
right: i.right - n,
|
|
@@ -132,19 +134,19 @@ const se = /* @__PURE__ */ F({
|
|
|
132
134
|
y: i.bottom - i.top
|
|
133
135
|
} : null;
|
|
134
136
|
return {
|
|
135
|
-
frame:
|
|
137
|
+
frame: r,
|
|
136
138
|
margin: i,
|
|
137
139
|
expectedExpand: n,
|
|
138
140
|
marginDeltaFromExpected: s,
|
|
139
141
|
marginAsymmetry: d
|
|
140
142
|
};
|
|
141
|
-
},
|
|
143
|
+
}, j = async (e, t, n) => {
|
|
142
144
|
if (!e.length) return null;
|
|
143
|
-
const
|
|
145
|
+
const r = await C({
|
|
144
146
|
multiplier: n?.multiplier ?? 2,
|
|
145
147
|
format: n?.format ?? "png",
|
|
146
148
|
imageIds: e
|
|
147
|
-
}), i =
|
|
149
|
+
}), i = r?.url;
|
|
148
150
|
if (!i) return null;
|
|
149
151
|
try {
|
|
150
152
|
const s = await a.executeCommand("detectEdge", i, {
|
|
@@ -154,9 +156,9 @@ const se = /* @__PURE__ */ F({
|
|
|
154
156
|
threshold: n?.detect?.threshold,
|
|
155
157
|
debug: !1
|
|
156
158
|
});
|
|
157
|
-
return s ?
|
|
159
|
+
return s ? V(
|
|
158
160
|
s,
|
|
159
|
-
|
|
161
|
+
r,
|
|
160
162
|
t
|
|
161
163
|
) : null;
|
|
162
164
|
} finally {
|
|
@@ -164,19 +166,20 @@ const se = /* @__PURE__ */ F({
|
|
|
164
166
|
}
|
|
165
167
|
};
|
|
166
168
|
l({
|
|
167
|
-
importConfig:
|
|
168
|
-
exportConfig:
|
|
169
|
-
generateCutImage:
|
|
169
|
+
importConfig: w,
|
|
170
|
+
exportConfig: y,
|
|
171
|
+
generateCutImage: R,
|
|
170
172
|
addImage: D,
|
|
171
173
|
upsertImage: _,
|
|
172
|
-
getImageState:
|
|
173
|
-
onImageStateChange:
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
174
|
+
getImageState: z,
|
|
175
|
+
onImageStateChange: W,
|
|
176
|
+
onImageSessionNotice: L,
|
|
177
|
+
applyImageOperation: U,
|
|
178
|
+
setImageTransform: M,
|
|
179
|
+
updateImage: Y,
|
|
180
|
+
clearImages: A,
|
|
178
181
|
exportUserCroppedImage: C,
|
|
179
|
-
focusImage:
|
|
182
|
+
focusImage: H,
|
|
180
183
|
detectDieline: async (e) => {
|
|
181
184
|
const t = await a.executeCommand("detectEdge", e, {
|
|
182
185
|
expand: 10,
|
|
@@ -189,7 +192,7 @@ const se = /* @__PURE__ */ F({
|
|
|
189
192
|
return t ? (x(t), t.pathData) : null;
|
|
190
193
|
},
|
|
191
194
|
detectDielineFromFrame: async (e = {}) => {
|
|
192
|
-
const t = e?.detect?.debug === !0, n = e?.inspect?.includeCroppedImage === !0,
|
|
195
|
+
const t = e?.detect?.debug === !0, n = e?.inspect?.includeCroppedImage === !0, r = e?.inspect?.includeDiagnostics === !0, i = Math.max(0, Number(e?.detect?.expand ?? 0)), s = await C({
|
|
193
196
|
multiplier: e?.export?.multiplier ?? 2,
|
|
194
197
|
format: e?.export?.format ?? "png",
|
|
195
198
|
imageIds: e?.export?.imageIds
|
|
@@ -197,26 +200,26 @@ const se = /* @__PURE__ */ F({
|
|
|
197
200
|
if (!d)
|
|
198
201
|
return console.warn("[PooderEditor] detectDielineFromFrame no source image"), null;
|
|
199
202
|
try {
|
|
200
|
-
const
|
|
203
|
+
const h = await a.executeCommand("detectEdge", d, {
|
|
201
204
|
expand: e?.detect?.expand ?? 0,
|
|
202
205
|
smoothing: e?.detect?.smoothing ?? !0,
|
|
203
206
|
simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
|
|
204
207
|
threshold: e?.detect?.threshold,
|
|
205
208
|
debug: t
|
|
206
209
|
});
|
|
207
|
-
if (!
|
|
210
|
+
if (!h)
|
|
208
211
|
return console.warn(
|
|
209
212
|
"[PooderEditor] detectDielineFromFrame detectEdge returned null"
|
|
210
213
|
), null;
|
|
211
|
-
const
|
|
214
|
+
const B = I(h, s);
|
|
212
215
|
if (e?.commit === !1)
|
|
213
216
|
return {
|
|
214
|
-
...
|
|
217
|
+
...h,
|
|
215
218
|
...n ? { sourceImage: s } : {},
|
|
216
|
-
...
|
|
219
|
+
...r ? { diagnostics: B } : {}
|
|
217
220
|
};
|
|
218
|
-
x(
|
|
219
|
-
const
|
|
221
|
+
x(h, s);
|
|
222
|
+
const G = {
|
|
220
223
|
multiplier: e?.export?.multiplier ?? 2,
|
|
221
224
|
format: e?.export?.format ?? "png",
|
|
222
225
|
detect: {
|
|
@@ -226,10 +229,10 @@ const se = /* @__PURE__ */ F({
|
|
|
226
229
|
threshold: e?.detect?.threshold
|
|
227
230
|
}
|
|
228
231
|
};
|
|
229
|
-
let S = await
|
|
232
|
+
let S = await j(
|
|
230
233
|
s.imageIds,
|
|
231
234
|
i,
|
|
232
|
-
|
|
235
|
+
G
|
|
233
236
|
);
|
|
234
237
|
return S ? console.info(
|
|
235
238
|
"[PooderEditor] detectDielineFromFrame post-commit diagnostics",
|
|
@@ -237,27 +240,27 @@ const se = /* @__PURE__ */ F({
|
|
|
237
240
|
) : s.imageIds.length > 0 && console.warn(
|
|
238
241
|
"[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"
|
|
239
242
|
), {
|
|
240
|
-
...
|
|
243
|
+
...h,
|
|
241
244
|
...n ? { sourceImage: s } : {},
|
|
242
|
-
...
|
|
245
|
+
...r ? { diagnostics: B, postCommitDiagnostics: S } : {}
|
|
243
246
|
};
|
|
244
247
|
} finally {
|
|
245
248
|
d && !n && URL.revokeObjectURL(d);
|
|
246
249
|
}
|
|
247
250
|
},
|
|
248
251
|
uploadAndDetectEdge: async (e, t) => {
|
|
249
|
-
const n = await D(e),
|
|
252
|
+
const n = await D(e), r = await a.executeCommand("detectEdge", e, {
|
|
250
253
|
expand: t?.expand ?? 10,
|
|
251
254
|
smoothing: t?.smoothing ?? !0,
|
|
252
255
|
simplifyTolerance: t?.simplifyTolerance ?? 2
|
|
253
256
|
});
|
|
254
|
-
return
|
|
257
|
+
return r ? (x(r), { imageId: n, url: e, pathData: r.pathData }) : null;
|
|
255
258
|
},
|
|
256
259
|
activateTool: async (e) => await u.switchTool(e),
|
|
257
260
|
deactivateTool: async () => await u.deactivate(),
|
|
258
|
-
on: (e, t) =>
|
|
259
|
-
off: (e, t) =>
|
|
260
|
-
emit: (e, t) =>
|
|
261
|
+
on: (e, t) => o.eventBus.on(e, t),
|
|
262
|
+
off: (e, t) => o.eventBus.off(e, t),
|
|
263
|
+
emit: (e, t) => o.eventBus.emit(e, t),
|
|
261
264
|
executeCommand: (e, ...t) => a.executeCommand(e, ...t),
|
|
262
265
|
getConfig: (e) => c.get(e),
|
|
263
266
|
updateConfig: (e, t) => c.update(e, t),
|
|
@@ -267,37 +270,37 @@ const se = /* @__PURE__ */ F({
|
|
|
267
270
|
config: c
|
|
268
271
|
}
|
|
269
272
|
});
|
|
270
|
-
const
|
|
271
|
-
const t = new
|
|
272
|
-
eventBus:
|
|
273
|
+
const $ = (e) => {
|
|
274
|
+
const t = new te(e, {
|
|
275
|
+
eventBus: o.eventBus
|
|
273
276
|
});
|
|
274
|
-
|
|
275
|
-
new
|
|
276
|
-
new
|
|
277
|
+
o.registerService(t, "CanvasService"), o.registerService(new ne(), T), [
|
|
278
|
+
new oe(),
|
|
279
|
+
new ae(),
|
|
277
280
|
new re(),
|
|
278
281
|
// new FilmTool(),
|
|
279
|
-
new ae(),
|
|
280
|
-
// new MirrorTool(),
|
|
281
|
-
new oe(),
|
|
282
282
|
new ie(),
|
|
283
|
-
new
|
|
284
|
-
|
|
285
|
-
|
|
283
|
+
// new MirrorTool(),
|
|
284
|
+
new ce(),
|
|
285
|
+
new se(),
|
|
286
|
+
new de()
|
|
287
|
+
].forEach((r) => {
|
|
288
|
+
o.extensionManager.register(r);
|
|
286
289
|
});
|
|
287
|
-
},
|
|
288
|
-
const n =
|
|
290
|
+
}, q = (e, t) => {
|
|
291
|
+
const n = o.getService("CanvasService");
|
|
289
292
|
n && n.resize(e, t);
|
|
290
293
|
};
|
|
291
294
|
return O(() => {
|
|
292
|
-
|
|
293
|
-
}), (e, t) => (
|
|
294
|
-
|
|
295
|
-
onCanvasReady:
|
|
296
|
-
onResize:
|
|
295
|
+
o.eventBus.off("image:state:change", v), o.eventBus.off("image:session:notice", p), o.extensionManager.destroy(), o.unregisterService(T), o.unregisterService("CanvasService");
|
|
296
|
+
}), (e, t) => (P(), N("div", le, [
|
|
297
|
+
Z(ue, {
|
|
298
|
+
onCanvasReady: $,
|
|
299
|
+
onResize: q
|
|
297
300
|
})
|
|
298
301
|
]));
|
|
299
302
|
}
|
|
300
|
-
}),
|
|
303
|
+
}), xe = /* @__PURE__ */ k(ge, [["__scopeId", "data-v-d74921ee"]]);
|
|
301
304
|
export {
|
|
302
|
-
|
|
305
|
+
xe as PooderEditor
|
|
303
306
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u.PooderVue={},u.Vue,u.PooderCore,u.PooderKit))})(this,(function(u,c,
|
|
1
|
+
(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u.PooderVue={},u.Vue,u.PooderCore,u.PooderKit))})(this,(function(u,c,x,l){"use strict";const R=c.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(d,{emit:p}){const f=p,o=c.ref(null),r=c.ref(null);let s=null;return c.onMounted(()=>{if(o.value&&r.value){const{clientWidth:h,clientHeight:v}=o.value;r.value.width=h,r.value.height=v,f("canvas-ready",r.value),s=new ResizeObserver(w=>{for(const C of w){const{width:S,height:b}=C.contentRect;f("resize",S,b)}}),s.observe(o.value)}}),c.onUnmounted(()=>{s&&s.disconnect()}),(h,v)=>(c.openBlock(),c.createElementBlock("div",{ref_key:"container",ref:o,class:"pooder-canvas-area"},[c.createElementVNode("canvas",{ref_key:"canvas",ref:r},null,512)],512))}}),B=(d,p)=>{const f=d.__vccOpts||d;for(const[o,r]of p)f[o]=r;return f},U=B(R,[["__scopeId","data-v-203ff8d9"]]),j={class:"pooder-editor"},E="SceneLayoutService",z=B(c.defineComponent({__name:"PooderEditor",emits:["image-state-change","image-session-notice"],setup(d,{expose:p,emit:f}){const o=new x.Pooder;c.provide("pooder",o);const r=o.getService("CommandService"),s=o.getService("ConfigurationService"),h=o.getService("WorkbenchService"),v=f,w=e=>{v("image-state-change",e)},C=e=>{v("image-session-notice",e)};o.eventBus.on("image:state:change",w),o.eventBus.on("image:session:notice",C);const S=e=>{s.import(e)},b=()=>s.export(),M=async e=>{try{const t=await r.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(s.get("image.items")||[]).length,hasCanvasService:!!o.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},O=async(e,t)=>await r.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,operation:t?.operation}),T=async(e,t)=>(await O(e,{mode:"add",addOptions:t})).id,W=async(e,t,n)=>await r.executeCommand("applyImageOperation",e,t,n),L=async()=>await r.executeCommand("getImageViewState"),V=async(e,t,n)=>await r.executeCommand("setImageTransform",e,t,n),Y=e=>(o.eventBus.on("image:state:change",e),()=>o.eventBus.off("image:state:change",e)),A=e=>(o.eventBus.on("image:session:notice",e),()=>o.eventBus.off("image:session:notice",e)),H=async(e,t)=>await r.executeCommand("updateImage",e,t),X=async()=>await r.executeCommand("clearImages"),_=async e=>await r.executeCommand("exportUserCroppedImage",e),q=async(e,t)=>await r.executeCommand("focusImage",e,t),D=(e,t)=>{s.update("dieline.shape","custom"),s.update("dieline.pathData",e.pathData);const n=Number(e.imageWidth??t?.width??0),a=Number(e.imageHeight??t?.height??0);s.update("dieline.customSourceWidthPx",Number.isFinite(n)&&n>0?n:void 0),s.update("dieline.customSourceHeightPx",Number.isFinite(a)&&a>0?a:void 0),s.update("size.cutMode","trim"),s.update("size.cutMarginMm",0)},P=e=>!!e&&Number.isFinite(e.x)&&Number.isFinite(e.y)&&Number.isFinite(e.width)&&Number.isFinite(e.height)&&e.width>0&&e.height>0,F=(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 a=t.width/2,i=t.height/2,m=n.x+n.width/2,g=n.y+n.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:n,centerOffsetX:m-a,centerOffsetY:g-i,coverageX:t.width>0?n.width/t.width:0,coverageY:t.height>0?n.height/t.height:0}},k=e=>{if(!P(e.rawBounds)||!P(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)}},K=(e,t,n)=>{const a=F(e,t),i=k(e),m=i?{left:i.left-n,top:i.top-n,right:i.right-n,bottom:i.bottom-n}:null,g=i?{x:i.right-i.left,y:i.bottom-i.top}:null;return{frame:a,margin:i,expectedExpand:n,marginDeltaFromExpected:m,marginAsymmetry:g}},$=async(e,t,n)=>{if(!e.length)return null;const a=await _({multiplier:n?.multiplier??2,format:n?.format??"png",imageIds:e}),i=a?.url;if(!i)return null;try{const m=await r.executeCommand("detectEdge",i,{expand:n?.detect?.expand??0,smoothing:n?.detect?.smoothing??!0,simplifyTolerance:n?.detect?.simplifyTolerance??2,threshold:n?.detect?.threshold,debug:!1});return m?K(m,a,t):null}finally{URL.revokeObjectURL(i)}};p({importConfig:S,exportConfig:b,generateCutImage:M,addImage:T,upsertImage:O,getImageState:L,onImageStateChange:Y,onImageSessionNotice:A,applyImageOperation:W,setImageTransform:V,updateImage:H,clearImages:X,exportUserCroppedImage:_,focusImage:q,detectDieline:async e=>{const t=await r.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,a=e?.inspect?.includeDiagnostics===!0,i=Math.max(0,Number(e?.detect?.expand??0)),m=await _({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),g=m?.url;if(!g)return console.warn("[PooderEditor] detectDielineFromFrame no source image"),null;try{const y=await r.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(!y)return console.warn("[PooderEditor] detectDielineFromFrame detectEdge returned null"),null;const N=F(y,m);if(e?.commit===!1)return{...y,...n?{sourceImage:m}:{},...a?{diagnostics:N}:{}};D(y,m);const Q={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 I=await $(m.imageIds,i,Q);return I?console.info("[PooderEditor] detectDielineFromFrame post-commit diagnostics",I):m.imageIds.length>0&&console.warn("[PooderEditor] detectDielineFromFrame post-commit detectEdge returned null"),{...y,...n?{sourceImage:m}:{},...a?{diagnostics:N,postCommitDiagnostics:I}:{}}}finally{g&&!n&&URL.revokeObjectURL(g)}},uploadAndDetectEdge:async(e,t)=>{const n=await T(e),a=await r.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return a?(D(a),{imageId:n,url:e,pathData:a.pathData}):null},activateTool:async e=>await h.switchTool(e),deactivateTool:async()=>await h.deactivate(),on:(e,t)=>o.eventBus.on(e,t),off:(e,t)=>o.eventBus.off(e,t),emit:(e,t)=>o.eventBus.emit(e,t),executeCommand:(e,...t)=>r.executeCommand(e,...t),getConfig:e=>s.get(e),updateConfig:(e,t)=>s.update(e,t),services:{workbench:h,command:r,config:s}});const G=e=>{const t=new l.CanvasService(e,{eventBus:o.eventBus});o.registerService(t,"CanvasService"),o.registerService(new l.SceneLayoutService,E),[new l.BackgroundTool,new l.SizeTool,new l.ImageTool,new l.WhiteInkTool,new l.DielineTool,new l.RulerTool,new l.FeatureTool].forEach(a=>{o.extensionManager.register(a)})},J=(e,t)=>{const n=o.getService("CanvasService");n&&n.resize(e,t)};return c.onUnmounted(()=>{o.eventBus.off("image:state:change",w),o.eventBus.off("image:session:notice",C),o.extensionManager.destroy(),o.unregisterService(E),o.unregisterService("CanvasService")}),(e,t)=>(c.openBlock(),c.createElementBlock("div",j,[c.createVNode(U,{onCanvasReady:G,onResize:J})]))}}),[["__scopeId","data-v-d74921ee"]]);u.PooderEditor=z,Object.keys(x).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(u,d)&&Object.defineProperty(u,d,{enumerable:!0,get:()=>x[d]})}),Object.keys(l).forEach(d=>{d!=="default"&&!Object.prototype.hasOwnProperty.call(u,d)&&Object.defineProperty(u,d,{enumerable:!0,get:()=>l[d]})}),Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommandService, ConfigurationService, WorkbenchService } from '../../core/src/index.ts';
|
|
2
|
-
import { ImageOperation, ImageTransformUpdates, ImageViewState } from '../../kit/src/index.ts';
|
|
3
|
-
import { PooderDetectDielineFromFrameOptions, PooderDetectDielineFromFrameResult, PooderEditorImageStateChangeHandler, PooderExportUserCroppedImageOptions, PooderExportUserCroppedImageResult as ExportUserCroppedImageResult, PooderFocusImageOptions, PooderGenerateCutImageOptions, PooderImageTarget, PooderUpsertImageOptions, PooderUploadAndDetectEdgeOptions, PooderUploadAndDetectEdgeResult } from './model';
|
|
2
|
+
import { ImageOperation, ImageSessionNotice, ImageTransformUpdates, ImageViewState } from '../../kit/src/index.ts';
|
|
3
|
+
import { PooderDetectDielineFromFrameOptions, PooderDetectDielineFromFrameResult, PooderEditorImageStateChangeHandler, PooderEditorImageSessionNoticeHandler, PooderExportUserCroppedImageOptions, PooderExportUserCroppedImageResult as ExportUserCroppedImageResult, PooderFocusImageOptions, PooderGenerateCutImageOptions, PooderImageTarget, PooderUpsertImageOptions, PooderUploadAndDetectEdgeOptions, PooderUploadAndDetectEdgeResult } from './model';
|
|
4
4
|
declare const _default: import('vue').DefineComponent<{}, {
|
|
5
5
|
importConfig: (config: Record<string, any>) => void;
|
|
6
6
|
exportConfig: () => Record<string, any>;
|
|
@@ -9,6 +9,7 @@ declare const _default: import('vue').DefineComponent<{}, {
|
|
|
9
9
|
upsertImage: (url: string, options?: PooderUpsertImageOptions) => Promise<any>;
|
|
10
10
|
getImageState: () => Promise<ImageViewState>;
|
|
11
11
|
onImageStateChange: (handler: PooderEditorImageStateChangeHandler) => () => void;
|
|
12
|
+
onImageSessionNotice: (handler: PooderEditorImageSessionNoticeHandler) => () => void;
|
|
12
13
|
applyImageOperation: (id: string, operation: ImageOperation, options?: {
|
|
13
14
|
target?: PooderImageTarget;
|
|
14
15
|
}) => Promise<any>;
|
|
@@ -37,7 +38,9 @@ declare const _default: import('vue').DefineComponent<{}, {
|
|
|
37
38
|
};
|
|
38
39
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
39
40
|
"image-state-change": (state: ImageViewState) => any;
|
|
41
|
+
"image-session-notice": (notice: ImageSessionNotice | null) => any;
|
|
40
42
|
}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
|
|
41
43
|
"onImage-state-change"?: ((state: ImageViewState) => any) | undefined;
|
|
44
|
+
"onImage-session-notice"?: ((notice: ImageSessionNotice | null) => any) | undefined;
|
|
42
45
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
43
46
|
export default _default;
|
package/dist/vue/src/model.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { CommandService, ConfigurationService, WorkbenchService } from '../../core/src/index.ts';
|
|
2
|
-
import { ImageOperation, ImageTransformUpdates, ImageViewState } from '../../kit/src/index.ts';
|
|
2
|
+
import { ImageOperation, ImageSessionNotice, ImageTransformUpdates, ImageViewState } from '../../kit/src/index.ts';
|
|
3
3
|
export type PooderImageTarget = "auto" | "config" | "working";
|
|
4
4
|
export type PooderEditorEventHandler = (data: any) => void;
|
|
5
5
|
export type PooderEditorImageStateChangeHandler = (state: ImageViewState) => void;
|
|
6
|
+
export type PooderEditorImageSessionNoticeHandler = (notice: ImageSessionNotice | null) => void;
|
|
6
7
|
export interface PooderGenerateCutImageOptions {
|
|
7
8
|
debug?: boolean;
|
|
8
9
|
}
|
|
@@ -107,6 +108,7 @@ export interface PooderToolSwitchResult {
|
|
|
107
108
|
from: string | null;
|
|
108
109
|
to: string | null;
|
|
109
110
|
reason?: string;
|
|
111
|
+
detail?: any;
|
|
110
112
|
}
|
|
111
113
|
export interface PooderEditorExposed {
|
|
112
114
|
importConfig(config: Record<string, any>): void;
|
|
@@ -119,6 +121,7 @@ export interface PooderEditorExposed {
|
|
|
119
121
|
}>;
|
|
120
122
|
getImageState(): Promise<ImageViewState>;
|
|
121
123
|
onImageStateChange(handler: PooderEditorImageStateChangeHandler): () => void;
|
|
124
|
+
onImageSessionNotice(handler: PooderEditorImageSessionNoticeHandler): () => void;
|
|
122
125
|
applyImageOperation(id: string, operation: ImageOperation, options?: {
|
|
123
126
|
target?: PooderImageTarget;
|
|
124
127
|
}): Promise<void>;
|
|
@@ -142,4 +145,4 @@ export interface PooderEditorExposed {
|
|
|
142
145
|
updateConfig(key: string, val: any): void;
|
|
143
146
|
services: PooderEditorServices;
|
|
144
147
|
}
|
|
145
|
-
export type PooderEditorImageApi = Pick<PooderEditorExposed, "addImage" | "upsertImage" | "getImageState" | "onImageStateChange" | "applyImageOperation" | "setImageTransform" | "updateImage" | "clearImages" | "focusImage">;
|
|
148
|
+
export type PooderEditorImageApi = Pick<PooderEditorExposed, "addImage" | "upsertImage" | "getImageState" | "onImageStateChange" | "onImageSessionNotice" | "applyImageOperation" | "setImageTransform" | "updateImage" | "clearImages" | "focusImage">;
|
package/dist/vue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-d74921ee]{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.5.
|
|
3
|
+
"version": "4.5.1",
|
|
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/
|
|
23
|
-
"@pooder/
|
|
22
|
+
"@pooder/core": "2.2.2",
|
|
23
|
+
"@pooder/kit": "6.3.1"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"vue": "^3.0.0"
|