@codingfactory/mediables-vue 2.4.15 → 2.4.17
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/{PixiFrameExporter-DEGLAGQh.js → PixiFrameExporter-DpA_aGpS.js} +2 -2
- package/dist/{PixiFrameExporter-DEGLAGQh.js.map → PixiFrameExporter-DpA_aGpS.js.map} +1 -1
- package/dist/{PixiFrameExporter-BLuF2QKx.cjs → PixiFrameExporter-dT2uNWrS.cjs} +2 -2
- package/dist/{PixiFrameExporter-BLuF2QKx.cjs.map → PixiFrameExporter-dT2uNWrS.cjs.map} +1 -1
- package/dist/editor-2u2tIKvW.cjs +42 -0
- package/dist/editor-2u2tIKvW.cjs.map +1 -0
- package/dist/{editor-B9JJoibh.js → editor-COzKP3ld.js} +376 -372
- package/dist/editor-COzKP3ld.js.map +1 -0
- package/dist/{index-CtlxKss3.js → index-BGiY-ZYy.js} +3 -3
- package/dist/{index-CtlxKss3.js.map → index-BGiY-ZYy.js.map} +1 -1
- package/dist/{index-xTpjmGH0.cjs → index-C_lYGySf.cjs} +3 -3
- package/dist/{index-xTpjmGH0.cjs.map → index-C_lYGySf.cjs.map} +1 -1
- package/dist/mediables-vanilla.cjs +1 -1
- package/dist/mediables-vanilla.mjs +1 -1
- package/dist/mediables-vue.cjs +1 -1
- package/dist/mediables-vue.mjs +2 -2
- package/dist/render-page/assets/{index-DigDyl_v.js → index-ZZVWF3LA.js} +34 -4
- package/dist/render-page/index.html +1 -1
- package/package.json +1 -1
- package/dist/editor-B9JJoibh.js.map +0 -1
- package/dist/editor-DJk8cX17.cjs +0 -42
- package/dist/editor-DJk8cX17.cjs.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var Ce = Object.defineProperty;
|
|
2
|
+
var we = (s, e, t) => e in s ? Ce(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
|
|
3
|
+
var W = (s, e, t) => we(s, typeof e != "symbol" ? e + "" : e, t);
|
|
4
4
|
import * as b from "pixi-filters";
|
|
5
|
-
import * as
|
|
6
|
-
import { GlProgram as
|
|
7
|
-
class
|
|
5
|
+
import * as w from "pixi.js";
|
|
6
|
+
import { GlProgram as Se } from "pixi.js";
|
|
7
|
+
class U {
|
|
8
8
|
constructor() {
|
|
9
9
|
this._events = /* @__PURE__ */ new Map();
|
|
10
10
|
}
|
|
@@ -34,7 +34,7 @@ class O {
|
|
|
34
34
|
e ? this._events.delete(e) : this._events.clear();
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
class
|
|
37
|
+
class ve extends U {
|
|
38
38
|
constructor() {
|
|
39
39
|
super(), this._state = {
|
|
40
40
|
// Image state
|
|
@@ -189,10 +189,10 @@ class Se extends O {
|
|
|
189
189
|
this.set("isDarkMode", this._state.theme === "dark");
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
|
-
function
|
|
193
|
-
return new
|
|
192
|
+
function ke() {
|
|
193
|
+
return new ve();
|
|
194
194
|
}
|
|
195
|
-
class
|
|
195
|
+
class Pe extends U {
|
|
196
196
|
constructor() {
|
|
197
197
|
super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._mountPromise = null;
|
|
198
198
|
}
|
|
@@ -313,47 +313,47 @@ class ke extends O {
|
|
|
313
313
|
* @returns {string|null} Data URL
|
|
314
314
|
*/
|
|
315
315
|
exportImage(e = "png", t = 0.92, i = 0, r = !0) {
|
|
316
|
-
var
|
|
317
|
-
if (!((
|
|
316
|
+
var S;
|
|
317
|
+
if (!((S = this.app) != null && S.renderer) || !this.originalTexture || !this.sprite)
|
|
318
318
|
return null;
|
|
319
319
|
const a = window.PIXI, o = Math.round(this.originalTexture.width), n = Math.round(this.originalTexture.height);
|
|
320
320
|
if (o <= 0 || n <= 0)
|
|
321
321
|
return null;
|
|
322
|
-
let l = o;
|
|
322
|
+
let l = o, c = n;
|
|
323
323
|
if (i > 0) {
|
|
324
|
-
const
|
|
325
|
-
let
|
|
326
|
-
r && (
|
|
324
|
+
const M = Math.max(o, n);
|
|
325
|
+
let F = i / M;
|
|
326
|
+
r && (F = Math.min(1, F)), l = Math.round(o * F), c = Math.round(n * F);
|
|
327
327
|
}
|
|
328
|
-
const
|
|
329
|
-
if (
|
|
328
|
+
const d = this.sprite, h = d.x, p = d.y, m = d.scale.x, _ = d.scale.y, g = d.width, y = d.height;
|
|
329
|
+
if (g <= 0 || y <= 0)
|
|
330
330
|
return null;
|
|
331
|
-
const
|
|
332
|
-
let
|
|
331
|
+
const v = l / g, x = c / y;
|
|
332
|
+
let P = null;
|
|
333
333
|
try {
|
|
334
|
-
if (
|
|
335
|
-
width: Math.ceil(
|
|
336
|
-
height: Math.ceil(
|
|
337
|
-
resolution:
|
|
338
|
-
}), this.app.renderer.render({ container: this.app.stage, target:
|
|
334
|
+
if (d.x = 0, d.y = 0, d.scale.x = m * v, d.scale.y = _ * x, P = a.RenderTexture.create({
|
|
335
|
+
width: Math.ceil(l),
|
|
336
|
+
height: Math.ceil(c),
|
|
337
|
+
resolution: 1
|
|
338
|
+
}), this.app.renderer.render({ container: this.app.stage, target: P }), !this.app.renderer.extract)
|
|
339
339
|
return null;
|
|
340
|
-
const
|
|
341
|
-
if (!
|
|
340
|
+
const M = this.app.renderer.extract.canvas(P);
|
|
341
|
+
if (!M)
|
|
342
342
|
return null;
|
|
343
|
-
let
|
|
344
|
-
if (typeof
|
|
345
|
-
|
|
346
|
-
else if (typeof
|
|
347
|
-
const
|
|
348
|
-
|
|
349
|
-
const
|
|
350
|
-
|
|
343
|
+
let F = null;
|
|
344
|
+
if (typeof M.toDataURL == "function")
|
|
345
|
+
F = M.toDataURL(`image/${e}`, t);
|
|
346
|
+
else if (typeof M.getContext == "function") {
|
|
347
|
+
const B = document.createElement("canvas");
|
|
348
|
+
B.width = M.width, B.height = M.height;
|
|
349
|
+
const V = B.getContext("2d");
|
|
350
|
+
V && (V.drawImage(M, 0, 0), F = B.toDataURL(`image/${e}`, t));
|
|
351
351
|
}
|
|
352
|
-
return
|
|
352
|
+
return F || null;
|
|
353
353
|
} catch {
|
|
354
354
|
return null;
|
|
355
355
|
} finally {
|
|
356
|
-
|
|
356
|
+
d.x = h, d.y = p, d.scale.x = m, d.scale.y = _, P && P.destroy(!0);
|
|
357
357
|
}
|
|
358
358
|
}
|
|
359
359
|
/**
|
|
@@ -431,7 +431,7 @@ class ke extends O {
|
|
|
431
431
|
this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
|
|
432
432
|
}
|
|
433
433
|
}
|
|
434
|
-
const
|
|
434
|
+
const Me = {
|
|
435
435
|
adjust: ["adjust", "advanced"],
|
|
436
436
|
// adjustment, adjustmentAdvanced, alpha, colorMatrix
|
|
437
437
|
blur: ["blur"],
|
|
@@ -447,7 +447,7 @@ const Pe = {
|
|
|
447
447
|
stylize: ["stylize"]
|
|
448
448
|
// ascii, crt, crossHatch, dot, emboss
|
|
449
449
|
};
|
|
450
|
-
class
|
|
450
|
+
class Fe extends U {
|
|
451
451
|
constructor(e, t) {
|
|
452
452
|
super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
|
|
453
453
|
}
|
|
@@ -482,7 +482,7 @@ class Me extends O {
|
|
|
482
482
|
*/
|
|
483
483
|
getFiltersByCategory(e) {
|
|
484
484
|
if (!this._filterRegistry) return [];
|
|
485
|
-
const t =
|
|
485
|
+
const t = Me[e] || [e], i = [], r = /* @__PURE__ */ new Set();
|
|
486
486
|
for (const a of t) {
|
|
487
487
|
const o = this._filterRegistry.getFiltersByCategory(a) || [];
|
|
488
488
|
for (const n of o)
|
|
@@ -624,7 +624,7 @@ class Me extends O {
|
|
|
624
624
|
return this.instances[e] || null;
|
|
625
625
|
}
|
|
626
626
|
}
|
|
627
|
-
const
|
|
627
|
+
const X = class X extends U {
|
|
628
628
|
constructor(e, t) {
|
|
629
629
|
super(), this.state = e, this.renderer = t, this._overlayCanvas = null, this._isDragging = !1, this._dragStart = null, this._dragMode = null, this._startRect = null, this._hoverMode = null, this._lastAutoZoomCheck = 0, this.HANDLE_SIZE = 14, this.EDGE_HIT_PAD = 10, this._onPointerDown = this._handlePointerDown.bind(this), this._onPointerMove = this._handlePointerMove.bind(this), this._onPointerUp = this._handlePointerUp.bind(this);
|
|
630
630
|
}
|
|
@@ -701,7 +701,7 @@ const I = class I extends O {
|
|
|
701
701
|
if (!e || !r || !a || !o) return null;
|
|
702
702
|
const l = e.width > t, c = e.height > i;
|
|
703
703
|
if (!l && !c) return null;
|
|
704
|
-
const d =
|
|
704
|
+
const d = X.AUTO_ZOOM_PADDING;
|
|
705
705
|
let h = n;
|
|
706
706
|
if (l) {
|
|
707
707
|
const p = e.width / (d * r * o);
|
|
@@ -720,11 +720,11 @@ const I = class I extends O {
|
|
|
720
720
|
_checkAutoZoom() {
|
|
721
721
|
if (!this.state.get("autoZoomOnCropOverflow")) return;
|
|
722
722
|
const e = Date.now();
|
|
723
|
-
if (e - this._lastAutoZoomCheck <
|
|
723
|
+
if (e - this._lastAutoZoomCheck < X.AUTO_ZOOM_THROTTLE_MS) return;
|
|
724
724
|
this._lastAutoZoomCheck = e;
|
|
725
725
|
const t = this.state.get("crop.rect"), i = this.renderer.sprite, r = this.renderer.originalTexture;
|
|
726
726
|
if (!t || !i || !r) return;
|
|
727
|
-
const a =
|
|
727
|
+
const a = X.calcAutoZoom(
|
|
728
728
|
t,
|
|
729
729
|
i.width,
|
|
730
730
|
i.height,
|
|
@@ -752,8 +752,8 @@ const I = class I extends O {
|
|
|
752
752
|
if (!l) return;
|
|
753
753
|
const c = this.state.get("crop.shape");
|
|
754
754
|
if (n.save(), c === "circle") {
|
|
755
|
-
const y = l.x + l.width / 2,
|
|
756
|
-
n.beginPath(), n.arc(y,
|
|
755
|
+
const y = l.x + l.width / 2, v = l.y + l.height / 2, x = Math.min(l.width, l.height) / 2;
|
|
756
|
+
n.beginPath(), n.arc(y, v, x, 0, Math.PI * 2), n.clip();
|
|
757
757
|
} else
|
|
758
758
|
n.beginPath(), n.rect(l.x, l.y, l.width, l.height), n.clip();
|
|
759
759
|
n.clearRect(l.x, l.y, l.width, l.height), n.restore(), n.strokeStyle = "#ffffff", n.lineWidth = 2, n.setLineDash([5, 5]), c === "circle" ? (n.beginPath(), n.arc(
|
|
@@ -771,15 +771,15 @@ const I = class I extends O {
|
|
|
771
771
|
{ x: l.x + l.width, y: l.y, m: "resize-ne" },
|
|
772
772
|
{ x: l.x, y: l.y + l.height, m: "resize-sw" },
|
|
773
773
|
{ x: l.x + l.width, y: l.y + l.height, m: "resize-se" }
|
|
774
|
-
],
|
|
774
|
+
], _ = [
|
|
775
775
|
{ x: l.x + l.width / 2, y: l.y, m: "n" },
|
|
776
776
|
{ x: l.x + l.width / 2, y: l.y + l.height, m: "s" },
|
|
777
777
|
{ x: l.x, y: l.y + l.height / 2, m: "w" },
|
|
778
778
|
{ x: l.x + l.width, y: l.y + l.height / 2, m: "e" }
|
|
779
|
-
], g = [...m, ...
|
|
779
|
+
], g = [...m, ..._];
|
|
780
780
|
for (const y of g) {
|
|
781
|
-
const
|
|
782
|
-
n.beginPath(), n.rect(y.x -
|
|
781
|
+
const v = this._hoverMode === y.m, x = v ? p + 4 : p;
|
|
782
|
+
n.beginPath(), n.rect(y.x - x / 2, y.y - x / 2, x, x), n.fillStyle = v ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
|
|
783
783
|
}
|
|
784
784
|
}
|
|
785
785
|
/**
|
|
@@ -890,33 +890,33 @@ const I = class I extends O {
|
|
|
890
890
|
const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, r = this.state.get("crop.rect");
|
|
891
891
|
if (!r || !t || !e || !i) return null;
|
|
892
892
|
const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, d = (r.y - t.y) * l;
|
|
893
|
-
let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c),
|
|
893
|
+
let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c), _ = Math.round(d);
|
|
894
894
|
if (h <= 0 || p <= 0) return null;
|
|
895
895
|
const g = new a.Container(), y = new a.Sprite(i);
|
|
896
896
|
if (this.state.get("crop.shape") === "circle") {
|
|
897
|
-
const
|
|
898
|
-
m = Math.round(
|
|
899
|
-
const
|
|
900
|
-
typeof
|
|
897
|
+
const $ = Math.round(Math.max(h, p)), _e = m + h / 2, xe = _ + p / 2;
|
|
898
|
+
m = Math.round(_e - $ / 2), _ = Math.round(xe - $ / 2), h = p = $;
|
|
899
|
+
const R = new a.Graphics();
|
|
900
|
+
typeof R.circle == "function" && typeof R.fill == "function" ? R.circle(h / 2, p / 2, h / 2).fill(16777215) : (R.beginFill(16777215, 1), R.drawCircle(h / 2, p / 2, h / 2), R.endFill()), y.mask = R, g.addChild(R);
|
|
901
901
|
}
|
|
902
|
-
y.x = -m, y.y = -
|
|
903
|
-
const
|
|
902
|
+
y.x = -m, y.y = -_, g.addChild(y);
|
|
903
|
+
const x = a.RenderTexture.create({ width: h, height: p });
|
|
904
904
|
e.renderer.render({
|
|
905
905
|
container: g,
|
|
906
|
-
target:
|
|
906
|
+
target: x,
|
|
907
907
|
clear: !0
|
|
908
908
|
}), g.destroy({ children: !0 });
|
|
909
|
-
const
|
|
910
|
-
|
|
911
|
-
const
|
|
912
|
-
e.stage.addChild(
|
|
913
|
-
const
|
|
914
|
-
x: Math.round(
|
|
915
|
-
y: Math.round(
|
|
909
|
+
const P = this.renderer.originalTexture;
|
|
910
|
+
P && P !== this.renderer.baseTexture && P.destroy(!0), this.renderer.originalTexture = x, e.stage.removeChild(t), t.destroy();
|
|
911
|
+
const S = new a.Sprite(x);
|
|
912
|
+
e.stage.addChild(S), this.renderer.sprite = S, this.renderer.fitScale = this.renderer.getFitScaleFor(x), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
|
|
913
|
+
const T = this.state.get("crop.appliedRect"), F = T && Number.isFinite(T.x) && Number.isFinite(T.y) && Number.isFinite(T.width) && Number.isFinite(T.height) ? {
|
|
914
|
+
x: Math.round(T.x + m),
|
|
915
|
+
y: Math.round(T.y + _),
|
|
916
916
|
width: h,
|
|
917
917
|
height: p
|
|
918
|
-
} : { x: m, y:
|
|
919
|
-
return this.disable(), this.state.set("crop.appliedRect",
|
|
918
|
+
} : { x: m, y: _, width: h, height: p }, B = this.state.get("crop.shape") || "free", V = this.state.get("crop.aspect") || "free";
|
|
919
|
+
return this.disable(), this.state.set("crop.appliedRect", F), this.state.set("crop.appliedShape", B), this.state.set("crop.appliedAspect", V), this.emit("applied", { width: h, height: p }), { texture: x, preservedZoom: o };
|
|
920
920
|
}
|
|
921
921
|
/**
|
|
922
922
|
* Apply a crop from saved texture-pixel coordinates (for state rehydration).
|
|
@@ -933,18 +933,18 @@ const I = class I extends O {
|
|
|
933
933
|
if (l <= 0 || c <= 0) return null;
|
|
934
934
|
const p = new o.Container(), m = new o.Sprite(a);
|
|
935
935
|
if (t === "circle") {
|
|
936
|
-
const
|
|
937
|
-
d = Math.round(
|
|
938
|
-
const
|
|
939
|
-
typeof
|
|
936
|
+
const v = Math.round(Math.max(l, c)), x = d + l / 2, P = h + c / 2;
|
|
937
|
+
d = Math.round(x - v / 2), h = Math.round(P - v / 2), l = c = v;
|
|
938
|
+
const S = new o.Graphics();
|
|
939
|
+
typeof S.circle == "function" && typeof S.fill == "function" ? S.circle(l / 2, c / 2, l / 2).fill(16777215) : (S.beginFill(16777215, 1), S.drawCircle(l / 2, c / 2, l / 2), S.endFill()), m.mask = S, p.addChild(S);
|
|
940
940
|
}
|
|
941
941
|
m.x = -d, m.y = -h, p.addChild(m);
|
|
942
|
-
const
|
|
943
|
-
i.renderer.render({ container: p, target:
|
|
942
|
+
const _ = o.RenderTexture.create({ width: l, height: c });
|
|
943
|
+
i.renderer.render({ container: p, target: _, clear: !0 }), p.destroy({ children: !0 });
|
|
944
944
|
const g = this.renderer.originalTexture;
|
|
945
|
-
g && g !== this.renderer.baseTexture && g.destroy(!0), this.renderer.originalTexture =
|
|
946
|
-
const y = new o.Sprite(
|
|
947
|
-
return i.stage.addChild(y), this.renderer.sprite = y, this.renderer.fitScale = this.renderer.getFitScaleFor(
|
|
945
|
+
g && g !== this.renderer.baseTexture && g.destroy(!0), this.renderer.originalTexture = _, i.stage.removeChild(r), r.destroy();
|
|
946
|
+
const y = new o.Sprite(_);
|
|
947
|
+
return i.stage.addChild(y), this.renderer.sprite = y, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), { texture: _, preservedZoom: n };
|
|
948
948
|
}
|
|
949
949
|
/**
|
|
950
950
|
* Cancel crop
|
|
@@ -971,12 +971,12 @@ const I = class I extends O {
|
|
|
971
971
|
* Padding factor for auto-zoom: image will be ~91% of crop size (1/1.1).
|
|
972
972
|
* Higher values = more aggressive zoom-out, more padding around image.
|
|
973
973
|
*/
|
|
974
|
-
|
|
974
|
+
W(X, "AUTO_ZOOM_PADDING", 1.1), /**
|
|
975
975
|
* Minimum interval (ms) between auto-zoom adjustments during drag.
|
|
976
976
|
*/
|
|
977
|
-
|
|
978
|
-
let
|
|
979
|
-
class
|
|
977
|
+
W(X, "AUTO_ZOOM_THROTTLE_MS", 100);
|
|
978
|
+
let Q = X;
|
|
979
|
+
class Ae {
|
|
980
980
|
/**
|
|
981
981
|
* Create a new RemoveBgManager
|
|
982
982
|
* @param {Object} options
|
|
@@ -1102,7 +1102,7 @@ function u(s, e = {}, ...t) {
|
|
|
1102
1102
|
typeof r == "string" ? i.appendChild(document.createTextNode(r)) : r instanceof HTMLElement && i.appendChild(r);
|
|
1103
1103
|
return i;
|
|
1104
1104
|
}
|
|
1105
|
-
function
|
|
1105
|
+
function he({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
|
|
1106
1106
|
const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = u("div", {
|
|
1107
1107
|
className: "slider-control slider-wrapper",
|
|
1108
1108
|
"data-control": n,
|
|
@@ -1111,7 +1111,7 @@ function oe({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
|
|
|
1111
1111
|
"div",
|
|
1112
1112
|
{ className: "slider-header" },
|
|
1113
1113
|
u("label", { for: s, className: "slider-label" }, e),
|
|
1114
|
-
u("span", { className: "slider-value", id: `${s}-value` },
|
|
1114
|
+
u("span", { className: "slider-value", id: `${s}-value` }, Z(a))
|
|
1115
1115
|
), d = u("input", {
|
|
1116
1116
|
type: "range",
|
|
1117
1117
|
id: s,
|
|
@@ -1122,19 +1122,19 @@ function oe({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
|
|
|
1122
1122
|
value: String(a),
|
|
1123
1123
|
onInput: (h) => {
|
|
1124
1124
|
const p = parseFloat(h.target.value), m = l.querySelector(".slider-value");
|
|
1125
|
-
m && (m.textContent =
|
|
1125
|
+
m && (m.textContent = Z(p)), o == null || o(p);
|
|
1126
1126
|
}
|
|
1127
1127
|
});
|
|
1128
1128
|
return l.appendChild(c), l.appendChild(d), l.setValue = (h) => {
|
|
1129
1129
|
d.value = String(h);
|
|
1130
1130
|
const p = l.querySelector(".slider-value");
|
|
1131
|
-
p && (p.textContent =
|
|
1131
|
+
p && (p.textContent = Z(h));
|
|
1132
1132
|
}, l;
|
|
1133
1133
|
}
|
|
1134
|
-
function
|
|
1134
|
+
function Z(s) {
|
|
1135
1135
|
return Number.isInteger(s) ? String(s) : s.toFixed(2);
|
|
1136
1136
|
}
|
|
1137
|
-
function
|
|
1137
|
+
function de({ id: s, label: e, checked: t = !1, onChange: i }) {
|
|
1138
1138
|
const r = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: s }, e), o = u("input", {
|
|
1139
1139
|
type: "checkbox",
|
|
1140
1140
|
id: s,
|
|
@@ -1151,7 +1151,7 @@ function ne({ id: s, label: e, checked: t = !1, onChange: i }) {
|
|
|
1151
1151
|
o.checked = c;
|
|
1152
1152
|
}, r;
|
|
1153
1153
|
}
|
|
1154
|
-
function
|
|
1154
|
+
function ue({ id: s, label: e, value: t = "#000000", onChange: i }) {
|
|
1155
1155
|
const r = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: s }, e), o = u("input", {
|
|
1156
1156
|
type: "color",
|
|
1157
1157
|
id: s,
|
|
@@ -1163,7 +1163,7 @@ function le({ id: s, label: e, value: t = "#000000", onChange: i }) {
|
|
|
1163
1163
|
o.value = n;
|
|
1164
1164
|
}, r;
|
|
1165
1165
|
}
|
|
1166
|
-
function
|
|
1166
|
+
function pe({ id: s, label: e, options: t = [], value: i, onChange: r }) {
|
|
1167
1167
|
const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: s }, e), n = u("select", {
|
|
1168
1168
|
id: s,
|
|
1169
1169
|
className: "select-input",
|
|
@@ -1177,7 +1177,7 @@ function ce({ id: s, label: e, options: t = [], value: i, onChange: r }) {
|
|
|
1177
1177
|
n.value = l;
|
|
1178
1178
|
}, a;
|
|
1179
1179
|
}
|
|
1180
|
-
function
|
|
1180
|
+
function N({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
|
|
1181
1181
|
const a = u("button", {
|
|
1182
1182
|
type: "button",
|
|
1183
1183
|
className: `btn ${e}`.trim(),
|
|
@@ -1192,7 +1192,7 @@ function R({ label: s, className: e = "", onClick: t, icon: i = null, disabled:
|
|
|
1192
1192
|
}
|
|
1193
1193
|
return s && a.appendChild(document.createTextNode(s)), a;
|
|
1194
1194
|
}
|
|
1195
|
-
function
|
|
1195
|
+
function C({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
|
|
1196
1196
|
const n = {
|
|
1197
1197
|
type: "button",
|
|
1198
1198
|
className: `icon-btn ${t}`.trim(),
|
|
@@ -1207,7 +1207,7 @@ function w({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1,
|
|
|
1207
1207
|
const c = l.querySelector("svg");
|
|
1208
1208
|
return c && c.setAttribute("aria-hidden", "true"), l;
|
|
1209
1209
|
}
|
|
1210
|
-
function
|
|
1210
|
+
function J({ label: s, icon: e, active: t = !1, onClick: i }) {
|
|
1211
1211
|
const r = u("button", {
|
|
1212
1212
|
type: "button",
|
|
1213
1213
|
className: `chip ${t ? "active" : ""}`.trim(),
|
|
@@ -1223,8 +1223,8 @@ function Z({ label: s, icon: e, active: t = !1, onClick: i }) {
|
|
|
1223
1223
|
r.classList.toggle("active", a);
|
|
1224
1224
|
}, r;
|
|
1225
1225
|
}
|
|
1226
|
-
const
|
|
1227
|
-
class
|
|
1226
|
+
const fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>', me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>', ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M256 184v74m-37-37h74"/></svg>', Re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', Ne = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', Te = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"/></svg>', Ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 320c0 88.37-55.63 144-144 144s-144-55.63-144-144c0-94.83 103.23-222.85 134.89-259.88a12 12 0 0118.23 0C296.77 97.15 400 225.17 400 320z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 328a72 72 0 01-72 72"/></svg>', Ee = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"/><circle cx="144" cy="208" r="32"/><circle cx="152" cy="311" r="32"/><circle cx="224" cy="144" r="32"/><circle cx="256" cy="367" r="32"/><circle cx="328" cy="144" r="32"/></svg>', Xe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"/></svg>', Ye = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></svg>', Be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z"/></svg>', ge = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M144 48v272a48 48 0 0048 48h272"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 464V192a48 48 0 00-48-48H48"/></svg>', Oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>', te = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 146s24.36-12-64-12a160 160 0 10160 160"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 58l80 80-80 80"/></svg>', Le = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 112h352"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224"/></svg>', De = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M479.9 226.55L463.68 392a40 40 0 01-39.93 40H88.25a40 40 0 01-39.93-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z"/></svg>', ee = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Ue = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="64" y="64" width="384" height="384" rx="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Ve = '<svg viewBox="0 0 512 512" width="20" height="20"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>', je = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M80 96h64l64 320h64l64-160h96"/></svg>', ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>', re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"/></svg>', qe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56"/></svg>';
|
|
1227
|
+
class He {
|
|
1228
1228
|
constructor(e, t) {
|
|
1229
1229
|
this.state = e, this.editor = t, this.element = null, this._unsubscribers = [];
|
|
1230
1230
|
}
|
|
@@ -1234,8 +1234,8 @@ class qe {
|
|
|
1234
1234
|
*/
|
|
1235
1235
|
render() {
|
|
1236
1236
|
this.element = u("div", { className: "editor-toolbar" });
|
|
1237
|
-
const e = u("div", { className: "toolbar-section toolbar-left" }), t =
|
|
1238
|
-
icon:
|
|
1237
|
+
const e = u("div", { className: "toolbar-section toolbar-left" }), t = C({
|
|
1238
|
+
icon: De,
|
|
1239
1239
|
title: "Open Image",
|
|
1240
1240
|
className: "toolbar-btn",
|
|
1241
1241
|
testId: "btn-open-image",
|
|
@@ -1243,8 +1243,8 @@ class qe {
|
|
|
1243
1243
|
onClick: () => this.editor.openFilePicker()
|
|
1244
1244
|
});
|
|
1245
1245
|
e.appendChild(t);
|
|
1246
|
-
const i = u("div", { className: "toolbar-section toolbar-center" }), r =
|
|
1247
|
-
icon:
|
|
1246
|
+
const i = u("div", { className: "toolbar-section toolbar-center" }), r = C({
|
|
1247
|
+
icon: Re,
|
|
1248
1248
|
title: "Zoom Out",
|
|
1249
1249
|
className: "toolbar-btn",
|
|
1250
1250
|
testId: "btn-zoom-out",
|
|
@@ -1260,8 +1260,8 @@ class qe {
|
|
|
1260
1260
|
"aria-atomic": "true",
|
|
1261
1261
|
role: "status"
|
|
1262
1262
|
}, "100%");
|
|
1263
|
-
const a =
|
|
1264
|
-
icon:
|
|
1263
|
+
const a = C({
|
|
1264
|
+
icon: ze,
|
|
1265
1265
|
title: "Zoom In",
|
|
1266
1266
|
className: "toolbar-btn",
|
|
1267
1267
|
testId: "btn-zoom-in",
|
|
@@ -1270,8 +1270,8 @@ class qe {
|
|
|
1270
1270
|
const h = this.state.get("zoom");
|
|
1271
1271
|
this.editor.setZoom(h + 0.25);
|
|
1272
1272
|
}
|
|
1273
|
-
}), o =
|
|
1274
|
-
icon:
|
|
1273
|
+
}), o = C({
|
|
1274
|
+
icon: Ne,
|
|
1275
1275
|
title: "Fit to Screen",
|
|
1276
1276
|
className: "toolbar-btn",
|
|
1277
1277
|
testId: "btn-fit-screen",
|
|
@@ -1280,15 +1280,15 @@ class qe {
|
|
|
1280
1280
|
});
|
|
1281
1281
|
i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
|
|
1282
1282
|
const n = u("div", { className: "toolbar-section toolbar-right" });
|
|
1283
|
-
this._themeBtn =
|
|
1284
|
-
icon: this.state.get("isDarkMode") ?
|
|
1283
|
+
this._themeBtn = C({
|
|
1284
|
+
icon: this.state.get("isDarkMode") ? ie : re,
|
|
1285
1285
|
title: "Toggle Theme",
|
|
1286
1286
|
className: "toolbar-btn toolbar-btn-theme",
|
|
1287
1287
|
testId: "btn-toggle-theme",
|
|
1288
1288
|
ariaLabel: "Toggle theme",
|
|
1289
1289
|
onClick: () => this.editor.toggleTheme()
|
|
1290
|
-
}), this._cropBtn =
|
|
1291
|
-
icon:
|
|
1290
|
+
}), this._cropBtn = C({
|
|
1291
|
+
icon: ge,
|
|
1292
1292
|
title: "Crop",
|
|
1293
1293
|
className: "toolbar-btn toolbar-btn-crop",
|
|
1294
1294
|
testId: "btn-crop",
|
|
@@ -1297,22 +1297,22 @@ class qe {
|
|
|
1297
1297
|
this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
|
|
1298
1298
|
}
|
|
1299
1299
|
});
|
|
1300
|
-
const l =
|
|
1301
|
-
icon:
|
|
1300
|
+
const l = C({
|
|
1301
|
+
icon: be,
|
|
1302
1302
|
title: "Reset All",
|
|
1303
1303
|
className: "toolbar-btn",
|
|
1304
1304
|
testId: "btn-reset-all",
|
|
1305
1305
|
ariaLabel: "Reset all changes",
|
|
1306
1306
|
onClick: () => this.editor.resetAll()
|
|
1307
|
-
}), c =
|
|
1308
|
-
icon:
|
|
1307
|
+
}), c = C({
|
|
1308
|
+
icon: Oe,
|
|
1309
1309
|
title: "Save Image",
|
|
1310
1310
|
className: "toolbar-btn toolbar-btn-primary",
|
|
1311
1311
|
testId: "btn-save-edit",
|
|
1312
1312
|
ariaLabel: "Save image",
|
|
1313
1313
|
onClick: () => this.editor.save()
|
|
1314
|
-
}), d =
|
|
1315
|
-
icon:
|
|
1314
|
+
}), d = C({
|
|
1315
|
+
icon: te,
|
|
1316
1316
|
title: "Close",
|
|
1317
1317
|
className: "toolbar-btn",
|
|
1318
1318
|
testId: "btn-cancel-edit",
|
|
@@ -1330,7 +1330,7 @@ class qe {
|
|
|
1330
1330
|
});
|
|
1331
1331
|
this._unsubscribers.push(e);
|
|
1332
1332
|
const t = this.state.on("change:isDarkMode", ({ value: r }) => {
|
|
1333
|
-
this._themeBtn.innerHTML = r ?
|
|
1333
|
+
this._themeBtn.innerHTML = r ? ie : re;
|
|
1334
1334
|
});
|
|
1335
1335
|
this._unsubscribers.push(t);
|
|
1336
1336
|
const i = this.state.on("change:mode", ({ value: r }) => {
|
|
@@ -1353,24 +1353,24 @@ class qe {
|
|
|
1353
1353
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], (e = this.element) == null || e.remove(), this.element = null;
|
|
1354
1354
|
}
|
|
1355
1355
|
}
|
|
1356
|
-
const
|
|
1357
|
-
{ id: "adjust", name: "Adjust", icon:
|
|
1356
|
+
const j = [
|
|
1357
|
+
{ id: "adjust", name: "Adjust", icon: Te },
|
|
1358
1358
|
// adjustment, adjustmentAdvanced, alpha
|
|
1359
|
-
{ id: "blur", name: "Blur", icon:
|
|
1359
|
+
{ id: "blur", name: "Blur", icon: Ie },
|
|
1360
1360
|
// blur, kawaseBlur, motionBlur, radialBlur, etc.
|
|
1361
|
-
{ id: "color", name: "Color", icon:
|
|
1361
|
+
{ id: "color", name: "Color", icon: Ee },
|
|
1362
1362
|
// colorOverlay, grayscale, hslAdjustment, etc.
|
|
1363
|
-
{ id: "effects", name: "Effects", icon:
|
|
1363
|
+
{ id: "effects", name: "Effects", icon: Xe },
|
|
1364
1364
|
// noise, vignette, pixelate, dropShadow, etc.
|
|
1365
|
-
{ id: "distortion", name: "Distortion", icon:
|
|
1365
|
+
{ id: "distortion", name: "Distortion", icon: Ye },
|
|
1366
1366
|
// twist, bulgePinch, displacement, etc.
|
|
1367
|
-
{ id: "light", name: "Light", icon:
|
|
1367
|
+
{ id: "light", name: "Light", icon: Be },
|
|
1368
1368
|
// bloom, glow, godray, advancedBloom
|
|
1369
|
-
{ id: "stylize", name: "Stylize", icon:
|
|
1369
|
+
{ id: "stylize", name: "Stylize", icon: qe },
|
|
1370
1370
|
// ascii, crt, crossHatch, dot, emboss
|
|
1371
|
-
{ id: "crop", name: "Crop", icon:
|
|
1371
|
+
{ id: "crop", name: "Crop", icon: ge }
|
|
1372
1372
|
];
|
|
1373
|
-
class
|
|
1373
|
+
class $e {
|
|
1374
1374
|
constructor(e, t) {
|
|
1375
1375
|
this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
|
|
1376
1376
|
}
|
|
@@ -1383,21 +1383,21 @@ class He {
|
|
|
1383
1383
|
this._onSelect = e, this.element = u("div", {
|
|
1384
1384
|
className: "category-carousel-container",
|
|
1385
1385
|
"data-testid": "category-carousel"
|
|
1386
|
-
}), this._leftBtn =
|
|
1387
|
-
icon:
|
|
1386
|
+
}), this._leftBtn = C({
|
|
1387
|
+
icon: fe,
|
|
1388
1388
|
title: "Previous categories",
|
|
1389
1389
|
className: "carousel-nav carousel-nav-left",
|
|
1390
1390
|
onClick: () => this._scrollLeft()
|
|
1391
|
-
}), this._carousel = u("div", { className: "category-carousel" }),
|
|
1392
|
-
const r =
|
|
1391
|
+
}), this._carousel = u("div", { className: "category-carousel" }), j.forEach((i) => {
|
|
1392
|
+
const r = J({
|
|
1393
1393
|
label: i.name,
|
|
1394
1394
|
icon: i.icon,
|
|
1395
1395
|
active: this.state.get("selectedCategory") === i.id,
|
|
1396
1396
|
onClick: () => this._selectCategory(i.id)
|
|
1397
1397
|
});
|
|
1398
1398
|
r.dataset.categoryId = i.id, r.dataset.category = i.id, r.dataset.testid = `category-${i.id}`, this._chips.set(i.id, r), this._carousel.appendChild(r);
|
|
1399
|
-
}), this._rightBtn =
|
|
1400
|
-
icon:
|
|
1399
|
+
}), this._rightBtn = C({
|
|
1400
|
+
icon: me,
|
|
1401
1401
|
title: "Next categories",
|
|
1402
1402
|
className: "carousel-nav carousel-nav-right",
|
|
1403
1403
|
onClick: () => this._scrollRight()
|
|
@@ -1406,7 +1406,7 @@ class He {
|
|
|
1406
1406
|
role: "tablist",
|
|
1407
1407
|
"aria-label": "Category pages"
|
|
1408
1408
|
});
|
|
1409
|
-
const t = Math.ceil(
|
|
1409
|
+
const t = Math.ceil(j.length / 3);
|
|
1410
1410
|
for (let i = 0; i < t; i++) {
|
|
1411
1411
|
const r = u("button", {
|
|
1412
1412
|
type: "button",
|
|
@@ -1436,8 +1436,12 @@ class He {
|
|
|
1436
1436
|
* @param {string} categoryId
|
|
1437
1437
|
*/
|
|
1438
1438
|
_selectCategory(e) {
|
|
1439
|
-
var
|
|
1440
|
-
this.state.set("selectedCategory", e)
|
|
1439
|
+
var r;
|
|
1440
|
+
this.state.set("selectedCategory", e);
|
|
1441
|
+
const t = this.state.get("mode");
|
|
1442
|
+
e === "crop" ? t !== "crop" && this.editor.setMode("crop") : t !== "filters" && this.editor.setMode("filters");
|
|
1443
|
+
const i = this._chips.get(e);
|
|
1444
|
+
i && this._carousel && i.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }), (r = this._onSelect) == null || r.call(this, e);
|
|
1441
1445
|
}
|
|
1442
1446
|
/**
|
|
1443
1447
|
* Scroll carousel left
|
|
@@ -1449,7 +1453,7 @@ class He {
|
|
|
1449
1453
|
* Scroll carousel right
|
|
1450
1454
|
*/
|
|
1451
1455
|
_scrollRight() {
|
|
1452
|
-
this._scrollIndex <
|
|
1456
|
+
this._scrollIndex < j.length - 3 && (this._scrollIndex++, this._scrollCarousel());
|
|
1453
1457
|
}
|
|
1454
1458
|
/**
|
|
1455
1459
|
* Scroll to a specific page
|
|
@@ -1476,7 +1480,7 @@ class He {
|
|
|
1476
1480
|
* Update navigation button states
|
|
1477
1481
|
*/
|
|
1478
1482
|
_updateNavButtons() {
|
|
1479
|
-
this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >=
|
|
1483
|
+
this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= j.length - 3);
|
|
1480
1484
|
}
|
|
1481
1485
|
/**
|
|
1482
1486
|
* Update pagination dot states
|
|
@@ -1505,7 +1509,7 @@ class He {
|
|
|
1505
1509
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
1506
1510
|
}
|
|
1507
1511
|
}
|
|
1508
|
-
class
|
|
1512
|
+
class We {
|
|
1509
1513
|
constructor(e, t) {
|
|
1510
1514
|
this.state = e, this.filterManager = t, this.element = null, this._filterCards = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
|
|
1511
1515
|
}
|
|
@@ -1515,13 +1519,13 @@ class $e {
|
|
|
1515
1519
|
* @returns {HTMLElement}
|
|
1516
1520
|
*/
|
|
1517
1521
|
render({ onToggle: e, onSelect: t }) {
|
|
1518
|
-
return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn =
|
|
1519
|
-
icon:
|
|
1522
|
+
return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = C({
|
|
1523
|
+
icon: fe,
|
|
1520
1524
|
title: "Previous filters",
|
|
1521
1525
|
className: "carousel-nav carousel-nav-left",
|
|
1522
1526
|
onClick: () => this._scrollLeft()
|
|
1523
|
-
}), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn =
|
|
1524
|
-
icon:
|
|
1527
|
+
}), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = C({
|
|
1528
|
+
icon: me,
|
|
1525
1529
|
title: "Next filters",
|
|
1526
1530
|
className: "carousel-nav carousel-nav-right",
|
|
1527
1531
|
onClick: () => this._scrollRight()
|
|
@@ -1583,7 +1587,7 @@ class $e {
|
|
|
1583
1587
|
this._handleToggle(e.id, h), h && (this.state.set("selectedFilter", e.id), (p = this._onSelect) == null || p.call(this, e.id));
|
|
1584
1588
|
}
|
|
1585
1589
|
});
|
|
1586
|
-
return l.innerHTML = t ?
|
|
1590
|
+
return l.innerHTML = t ? ee : "", r.appendChild(a), r.appendChild(n), r.appendChild(l), r._toggle = l, r._isActive = t, r;
|
|
1587
1591
|
}
|
|
1588
1592
|
/**
|
|
1589
1593
|
* Handle filter card click (select)
|
|
@@ -1609,7 +1613,7 @@ class $e {
|
|
|
1609
1613
|
const e = this.state.get("activeFilters");
|
|
1610
1614
|
this._filterCards.forEach((t, i) => {
|
|
1611
1615
|
const r = e.has(i);
|
|
1612
|
-
t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ?
|
|
1616
|
+
t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? ee : "", t._isActive = r;
|
|
1613
1617
|
});
|
|
1614
1618
|
}
|
|
1615
1619
|
/**
|
|
@@ -1662,7 +1666,7 @@ class $e {
|
|
|
1662
1666
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
1663
1667
|
}
|
|
1664
1668
|
}
|
|
1665
|
-
class
|
|
1669
|
+
class Ze {
|
|
1666
1670
|
constructor(e, t) {
|
|
1667
1671
|
this.state = e, this.filterManager = t, this.element = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onAction = null, this._unsubscribers = [];
|
|
1668
1672
|
}
|
|
@@ -1707,7 +1711,7 @@ class We {
|
|
|
1707
1711
|
return;
|
|
1708
1712
|
}
|
|
1709
1713
|
const i = u("div", { className: "adjustments-header" });
|
|
1710
|
-
i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(
|
|
1714
|
+
i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(N({
|
|
1711
1715
|
label: "Reset",
|
|
1712
1716
|
className: "btn-text",
|
|
1713
1717
|
onClick: () => this._handleReset(e)
|
|
@@ -1730,7 +1734,7 @@ class We {
|
|
|
1730
1734
|
const r = t.label || t.id;
|
|
1731
1735
|
switch (this._normalizeControlType(t.type)) {
|
|
1732
1736
|
case "slider":
|
|
1733
|
-
return
|
|
1737
|
+
return he({
|
|
1734
1738
|
id: `${e}-${t.id}`,
|
|
1735
1739
|
label: r,
|
|
1736
1740
|
min: t.min ?? 0,
|
|
@@ -1740,14 +1744,14 @@ class We {
|
|
|
1740
1744
|
onChange: (l) => this._handleChange(e, t.id, l)
|
|
1741
1745
|
});
|
|
1742
1746
|
case "toggle":
|
|
1743
|
-
return
|
|
1747
|
+
return de({
|
|
1744
1748
|
id: `${e}-${t.id}`,
|
|
1745
1749
|
label: r,
|
|
1746
1750
|
checked: !!i,
|
|
1747
1751
|
onChange: (l) => this._handleChange(e, t.id, l)
|
|
1748
1752
|
});
|
|
1749
1753
|
case "color":
|
|
1750
|
-
return
|
|
1754
|
+
return ue({
|
|
1751
1755
|
id: `${e}-${t.id}`,
|
|
1752
1756
|
label: r,
|
|
1753
1757
|
value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
|
|
@@ -1755,7 +1759,7 @@ class We {
|
|
|
1755
1759
|
});
|
|
1756
1760
|
case "select":
|
|
1757
1761
|
const o = this._normalizeOptions(t.options);
|
|
1758
|
-
return
|
|
1762
|
+
return pe({
|
|
1759
1763
|
id: `${e}-${t.id}`,
|
|
1760
1764
|
label: r,
|
|
1761
1765
|
options: o,
|
|
@@ -1764,7 +1768,7 @@ class We {
|
|
|
1764
1768
|
});
|
|
1765
1769
|
case "button":
|
|
1766
1770
|
const n = u("div", { className: "button-control" });
|
|
1767
|
-
return n.appendChild(
|
|
1771
|
+
return n.appendChild(N({
|
|
1768
1772
|
label: r,
|
|
1769
1773
|
className: "btn-secondary",
|
|
1770
1774
|
onClick: () => this._handleAction(e, t.action || t.id)
|
|
@@ -1865,7 +1869,7 @@ class We {
|
|
|
1865
1869
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
1866
1870
|
}
|
|
1867
1871
|
}
|
|
1868
|
-
class
|
|
1872
|
+
class Ge {
|
|
1869
1873
|
constructor(e, t) {
|
|
1870
1874
|
this.state = e, this.filterManager = t, this._drawer = null, this._body = null, this._titleEl = null, this._isOpen = !1, this._currentFilterId = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onRemove = null, this._onAction = null, this._container = null;
|
|
1871
1875
|
}
|
|
@@ -1878,22 +1882,22 @@ class Ze {
|
|
|
1878
1882
|
this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = u("div", { className: "mobile-filter-drawer" });
|
|
1879
1883
|
const o = u("div", { className: "drawer-header" });
|
|
1880
1884
|
this._titleEl = u("span", { className: "drawer-title" }, "Filter");
|
|
1881
|
-
const n = u("div", { className: "drawer-header-actions" }), l =
|
|
1885
|
+
const n = u("div", { className: "drawer-header-actions" }), l = N({
|
|
1882
1886
|
label: "Reset",
|
|
1883
1887
|
className: "btn-text",
|
|
1884
1888
|
onClick: () => {
|
|
1885
1889
|
var h;
|
|
1886
1890
|
this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
|
|
1887
1891
|
}
|
|
1888
|
-
}), c =
|
|
1892
|
+
}), c = N({
|
|
1889
1893
|
label: "Remove",
|
|
1890
1894
|
className: "btn-text btn-danger",
|
|
1891
1895
|
onClick: () => {
|
|
1892
1896
|
var h;
|
|
1893
1897
|
this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
|
|
1894
1898
|
}
|
|
1895
|
-
}), d =
|
|
1896
|
-
icon:
|
|
1899
|
+
}), d = C({
|
|
1900
|
+
icon: te,
|
|
1897
1901
|
title: "Close",
|
|
1898
1902
|
className: "btn-icon-sm",
|
|
1899
1903
|
ariaLabel: "Close drawer",
|
|
@@ -1967,7 +1971,7 @@ class Ze {
|
|
|
1967
1971
|
const r = t.label || t.id;
|
|
1968
1972
|
switch (this._normalizeControlType(t.type)) {
|
|
1969
1973
|
case "slider":
|
|
1970
|
-
return
|
|
1974
|
+
return he({
|
|
1971
1975
|
id: `drawer-${e}-${t.id}`,
|
|
1972
1976
|
label: r,
|
|
1973
1977
|
min: t.min ?? 0,
|
|
@@ -1980,7 +1984,7 @@ class Ze {
|
|
|
1980
1984
|
}
|
|
1981
1985
|
});
|
|
1982
1986
|
case "toggle":
|
|
1983
|
-
return
|
|
1987
|
+
return de({
|
|
1984
1988
|
id: `drawer-${e}-${t.id}`,
|
|
1985
1989
|
label: r,
|
|
1986
1990
|
checked: !!i,
|
|
@@ -1990,7 +1994,7 @@ class Ze {
|
|
|
1990
1994
|
}
|
|
1991
1995
|
});
|
|
1992
1996
|
case "color":
|
|
1993
|
-
return
|
|
1997
|
+
return ue({
|
|
1994
1998
|
id: `drawer-${e}-${t.id}`,
|
|
1995
1999
|
label: r,
|
|
1996
2000
|
value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
|
|
@@ -2001,7 +2005,7 @@ class Ze {
|
|
|
2001
2005
|
});
|
|
2002
2006
|
case "select": {
|
|
2003
2007
|
const o = this._normalizeOptions(t.options);
|
|
2004
|
-
return
|
|
2008
|
+
return pe({
|
|
2005
2009
|
id: `drawer-${e}-${t.id}`,
|
|
2006
2010
|
label: r,
|
|
2007
2011
|
options: o,
|
|
@@ -2014,7 +2018,7 @@ class Ze {
|
|
|
2014
2018
|
}
|
|
2015
2019
|
case "button": {
|
|
2016
2020
|
const o = u("div", { className: "button-control" });
|
|
2017
|
-
return o.appendChild(
|
|
2021
|
+
return o.appendChild(N({
|
|
2018
2022
|
label: r,
|
|
2019
2023
|
className: "btn-secondary",
|
|
2020
2024
|
onClick: () => {
|
|
@@ -2061,7 +2065,7 @@ class Ze {
|
|
|
2061
2065
|
this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
|
|
2062
2066
|
}
|
|
2063
2067
|
}
|
|
2064
|
-
class
|
|
2068
|
+
class Ke {
|
|
2065
2069
|
constructor(e, t) {
|
|
2066
2070
|
this.state = e, this.filterManager = t, this.element = null, this._scrollContainer = null, this._chips = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
|
|
2067
2071
|
}
|
|
@@ -2134,11 +2138,11 @@ class Ge {
|
|
|
2134
2138
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
2135
2139
|
}
|
|
2136
2140
|
}
|
|
2137
|
-
const
|
|
2138
|
-
{ id: "free", name: "Free", icon:
|
|
2139
|
-
{ id: "square", name: "Square", icon:
|
|
2140
|
-
{ id: "circle", name: "Circle", icon:
|
|
2141
|
-
],
|
|
2141
|
+
const Qe = [
|
|
2142
|
+
{ id: "free", name: "Free", icon: je },
|
|
2143
|
+
{ id: "square", name: "Square", icon: Ue },
|
|
2144
|
+
{ id: "circle", name: "Circle", icon: Ve }
|
|
2145
|
+
], Je = [
|
|
2142
2146
|
{ id: "free", name: "Free" },
|
|
2143
2147
|
{ id: "1:1", name: "1:1" },
|
|
2144
2148
|
{ id: "4:3", name: "4:3" },
|
|
@@ -2146,7 +2150,7 @@ const Ke = [
|
|
|
2146
2150
|
{ id: "3:2", name: "3:2" },
|
|
2147
2151
|
{ id: "2:3", name: "2:3" }
|
|
2148
2152
|
];
|
|
2149
|
-
class
|
|
2153
|
+
class et {
|
|
2150
2154
|
constructor(e, t) {
|
|
2151
2155
|
this.state = e, this.cropManager = t, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._unsubscribers = [];
|
|
2152
2156
|
}
|
|
@@ -2170,8 +2174,8 @@ class Je {
|
|
|
2170
2174
|
const e = u("div", { className: "crop-section" });
|
|
2171
2175
|
e.appendChild(u("label", { className: "section-label" }, "Shape"));
|
|
2172
2176
|
const t = u("div", { className: "chip-row" }), i = this.state.get("crop.shape");
|
|
2173
|
-
|
|
2174
|
-
const d =
|
|
2177
|
+
Qe.forEach((c) => {
|
|
2178
|
+
const d = J({
|
|
2175
2179
|
label: c.name,
|
|
2176
2180
|
icon: c.icon,
|
|
2177
2181
|
active: i === c.id,
|
|
@@ -2180,25 +2184,25 @@ class Je {
|
|
|
2180
2184
|
d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), t.appendChild(d);
|
|
2181
2185
|
}), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = u("div", { className: "crop-section" }), this._aspectSection.appendChild(u("label", { className: "section-label" }, "Aspect Ratio"));
|
|
2182
2186
|
const r = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
|
|
2183
|
-
|
|
2184
|
-
const d =
|
|
2187
|
+
Je.forEach((c) => {
|
|
2188
|
+
const d = J({
|
|
2185
2189
|
label: c.name,
|
|
2186
2190
|
active: a === c.id,
|
|
2187
2191
|
onClick: () => this._selectAspect(c.id)
|
|
2188
2192
|
});
|
|
2189
2193
|
d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
|
|
2190
2194
|
}), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
|
|
2191
|
-
const o = u("div", { className: "crop-actions" }), n =
|
|
2195
|
+
const o = u("div", { className: "crop-actions" }), n = N({
|
|
2192
2196
|
label: "Cancel",
|
|
2193
2197
|
className: "btn-secondary crop-cancel-btn",
|
|
2194
|
-
icon:
|
|
2198
|
+
icon: te,
|
|
2195
2199
|
onClick: () => this.cropManager.cancel()
|
|
2196
2200
|
});
|
|
2197
2201
|
n.dataset.testid = "cancel-crop";
|
|
2198
|
-
const l =
|
|
2202
|
+
const l = N({
|
|
2199
2203
|
label: "Apply Crop",
|
|
2200
2204
|
className: "btn-primary crop-apply-btn",
|
|
2201
|
-
icon:
|
|
2205
|
+
icon: ee,
|
|
2202
2206
|
onClick: () => this._applyCropAndReturnToFilters()
|
|
2203
2207
|
});
|
|
2204
2208
|
return l.dataset.testid = "apply-crop", o.appendChild(n), o.appendChild(l), this.element.appendChild(o), this._subscribeToState(), this.element;
|
|
@@ -2261,7 +2265,7 @@ class Je {
|
|
|
2261
2265
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
2262
2266
|
}
|
|
2263
2267
|
}
|
|
2264
|
-
class
|
|
2268
|
+
class tt {
|
|
2265
2269
|
constructor(e, t) {
|
|
2266
2270
|
this.state = e, this.filterManager = t, this.element = null, this._filterItems = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onRemove = null, this._onReset = null, this._onClearAll = null, this._onUpdateValue = null, this._onSelect = null;
|
|
2267
2271
|
}
|
|
@@ -2277,7 +2281,7 @@ class et {
|
|
|
2277
2281
|
});
|
|
2278
2282
|
const o = u("div", { className: "panel-header" });
|
|
2279
2283
|
o.appendChild(u("h3", { className: "panel-title" }, "Active Filters"));
|
|
2280
|
-
const n =
|
|
2284
|
+
const n = N({
|
|
2281
2285
|
label: "Clear All",
|
|
2282
2286
|
className: "btn-text btn-danger",
|
|
2283
2287
|
onClick: () => this._handleClearAll()
|
|
@@ -2343,13 +2347,13 @@ class et {
|
|
|
2343
2347
|
onClick: (m) => {
|
|
2344
2348
|
m.target.closest(".filter-item-actions") || this._handleSelect(e);
|
|
2345
2349
|
}
|
|
2346
|
-
}), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c =
|
|
2347
|
-
icon:
|
|
2350
|
+
}), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c = C({
|
|
2351
|
+
icon: be,
|
|
2348
2352
|
title: "Reset filter",
|
|
2349
2353
|
className: "btn-icon-sm",
|
|
2350
2354
|
onClick: () => this._handleReset(e)
|
|
2351
|
-
}), d =
|
|
2352
|
-
icon:
|
|
2355
|
+
}), d = C({
|
|
2356
|
+
icon: Le,
|
|
2353
2357
|
title: "Remove filter",
|
|
2354
2358
|
className: "btn-icon-sm btn-danger",
|
|
2355
2359
|
onClick: () => this._handleRemove(e)
|
|
@@ -2462,7 +2466,7 @@ class et {
|
|
|
2462
2466
|
this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterItems.clear(), (e = this.element) == null || e.remove(), this.element = null;
|
|
2463
2467
|
}
|
|
2464
2468
|
}
|
|
2465
|
-
const
|
|
2469
|
+
const D = {
|
|
2466
2470
|
name: "free",
|
|
2467
2471
|
initialMode: "filters",
|
|
2468
2472
|
cropShape: "free",
|
|
@@ -2474,12 +2478,12 @@ const B = {
|
|
|
2474
2478
|
showCropControls: !0,
|
|
2475
2479
|
maxExportWidth: void 0,
|
|
2476
2480
|
maxExportHeight: void 0
|
|
2477
|
-
},
|
|
2481
|
+
}, G = {
|
|
2478
2482
|
free: {
|
|
2479
|
-
...
|
|
2483
|
+
...D
|
|
2480
2484
|
},
|
|
2481
2485
|
avatar: {
|
|
2482
|
-
...
|
|
2486
|
+
...D,
|
|
2483
2487
|
name: "avatar",
|
|
2484
2488
|
initialMode: "crop",
|
|
2485
2489
|
cropShape: "circle",
|
|
@@ -2489,7 +2493,7 @@ const B = {
|
|
|
2489
2493
|
lockAspectRatio: !0
|
|
2490
2494
|
},
|
|
2491
2495
|
banner: {
|
|
2492
|
-
...
|
|
2496
|
+
...D,
|
|
2493
2497
|
name: "banner",
|
|
2494
2498
|
initialMode: "crop",
|
|
2495
2499
|
cropShape: "square",
|
|
@@ -2499,7 +2503,7 @@ const B = {
|
|
|
2499
2503
|
lockAspectRatio: !0
|
|
2500
2504
|
},
|
|
2501
2505
|
product: {
|
|
2502
|
-
...
|
|
2506
|
+
...D,
|
|
2503
2507
|
name: "product",
|
|
2504
2508
|
initialMode: "filters",
|
|
2505
2509
|
cropShape: "square",
|
|
@@ -2509,15 +2513,15 @@ const B = {
|
|
|
2509
2513
|
lockAspectRatio: !1
|
|
2510
2514
|
}
|
|
2511
2515
|
};
|
|
2512
|
-
function
|
|
2516
|
+
function it(s) {
|
|
2513
2517
|
if (!s)
|
|
2514
|
-
return { ...
|
|
2518
|
+
return { ...G.free };
|
|
2515
2519
|
if (typeof s == "object" && s !== null)
|
|
2516
|
-
return { ...
|
|
2517
|
-
const e =
|
|
2518
|
-
return e ? { ...e } : { ...
|
|
2520
|
+
return { ...D, ...s };
|
|
2521
|
+
const e = G[s];
|
|
2522
|
+
return e ? { ...e } : { ...G.free };
|
|
2519
2523
|
}
|
|
2520
|
-
class ii extends
|
|
2524
|
+
class ii extends U {
|
|
2521
2525
|
/**
|
|
2522
2526
|
* Create a new VanillaImageEditor
|
|
2523
2527
|
* @param {HTMLElement} container - Container element to mount the editor
|
|
@@ -2528,7 +2532,7 @@ class ii extends O {
|
|
|
2528
2532
|
if (super(), !e)
|
|
2529
2533
|
throw new Error("VanillaImageEditor: container element is required");
|
|
2530
2534
|
this._container = e, this._destroyed = !1, this._loadVersion = 0, this._objectUrls = /* @__PURE__ */ new Set();
|
|
2531
|
-
const i = t.preset ?
|
|
2535
|
+
const i = t.preset ? it(t.preset) : null, r = i ? {
|
|
2532
2536
|
initialMode: i.initialMode === "crop" ? "crop" : "adjust",
|
|
2533
2537
|
cropShape: i.cropShape,
|
|
2534
2538
|
initialAspectRatio: i.aspectRatio
|
|
@@ -2546,7 +2550,7 @@ class ii extends O {
|
|
|
2546
2550
|
},
|
|
2547
2551
|
...r,
|
|
2548
2552
|
...t
|
|
2549
|
-
}, this._preset = i, this._state =
|
|
2553
|
+
}, this._preset = i, this._state = ke(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._preset && (this._state.set("lockCropShape", !!this._preset.lockCropShape), this._state.set("lockAspectRatio", !!this._preset.lockAspectRatio), this._state.set("showFilters", this._preset.showFilters !== !1), this._state.set("showCropControls", this._preset.showCropControls !== !1), this._state.set("autoZoomOnCropOverflow", !!this._preset.autoZoomOnCropOverflow)), this._renderer = new Pe(), this._filterManager = new Fe(this._state, this._renderer), this._cropManager = new Q(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new Ae({
|
|
2550
2554
|
endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
|
|
2551
2555
|
fallbackEndpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.fallbackEndpoint
|
|
2552
2556
|
})), this._loadingOverlay = null, this._isMobile = typeof window < "u" ? window.innerWidth <= 768 : !1, this._toolbar = null, this._categoryCarousel = null, this._filterCarousel = null, this._filterAdjustments = null, this._mobileFilterDrawer = null, this._mobileActiveFilters = null, this._cropControls = null, this._activeFiltersPanel = null, this._editorEl = null, this._canvasContainer = null, this._cropOverlay = null, this._controlsSection = null, this._filterControlsEl = null, this._fileInput = null, this._resizeObserver = null, this._init();
|
|
@@ -2582,31 +2586,31 @@ class ii extends O {
|
|
|
2582
2586
|
* Initialize UI components
|
|
2583
2587
|
*/
|
|
2584
2588
|
_initUI() {
|
|
2585
|
-
this._toolbar = new
|
|
2589
|
+
this._toolbar = new He(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = u("div", { className: "filter-controls-container" }), this._categoryCarousel = new $e(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
|
|
2586
2590
|
}));
|
|
2587
2591
|
const e = u("div", { className: "filter-layout" }), t = u("div", { className: "filter-left-column" });
|
|
2588
|
-
this._filterCarousel = new
|
|
2592
|
+
this._filterCarousel = new We(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
|
|
2589
2593
|
onToggle: (r, a) => this._handleFilterToggle(r, a),
|
|
2590
2594
|
onSelect: (r) => {
|
|
2591
2595
|
this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
|
|
2592
2596
|
}
|
|
2593
|
-
})), this._filterAdjustments = new
|
|
2597
|
+
})), this._filterAdjustments = new Ze(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
|
|
2594
2598
|
onChange: (r, a, o) => this._handleFilterChange(r, a, o),
|
|
2595
2599
|
onReset: (r) => this._handleFilterReset(r),
|
|
2596
2600
|
onAction: (r, a) => this._handleFilterAction(r, a)
|
|
2597
2601
|
})), e.appendChild(t);
|
|
2598
2602
|
const i = u("div", { className: "filter-right-column" });
|
|
2599
|
-
this._activeFiltersPanel = new
|
|
2603
|
+
this._activeFiltersPanel = new tt(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
|
|
2600
2604
|
onRemove: (r) => this._handleFilterToggle(r, !1),
|
|
2601
2605
|
onReset: (r) => this._handleFilterReset(r),
|
|
2602
2606
|
onClearAll: () => this.resetAll(),
|
|
2603
2607
|
onSelect: (r) => this._handleFilterSelect(r)
|
|
2604
|
-
})), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new
|
|
2608
|
+
})), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new Ke(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
|
|
2605
2609
|
onToggle: (r, a) => this._handleFilterToggle(r, a),
|
|
2606
2610
|
onSelect: (r) => {
|
|
2607
2611
|
this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
|
|
2608
2612
|
}
|
|
2609
|
-
})), this._cropControls = new
|
|
2613
|
+
})), this._cropControls = new et(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new Ge(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
|
|
2610
2614
|
onChange: (r, a, o) => this._handleFilterChange(r, a, o),
|
|
2611
2615
|
onReset: (r) => this._handleFilterReset(r),
|
|
2612
2616
|
onRemove: (r) => {
|
|
@@ -2963,22 +2967,22 @@ class ii extends O {
|
|
|
2963
2967
|
this._objectUrls.clear(), (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
|
|
2964
2968
|
}
|
|
2965
2969
|
}
|
|
2966
|
-
const k = /* @__PURE__ */ new Map(),
|
|
2967
|
-
function
|
|
2970
|
+
const k = /* @__PURE__ */ new Map(), Y = /* @__PURE__ */ new Map();
|
|
2971
|
+
function rt(s, e) {
|
|
2968
2972
|
return !Array.isArray(s.mediaTargets) || s.mediaTargets.length === 0 ? !0 : s.mediaTargets.includes(e);
|
|
2969
2973
|
}
|
|
2970
2974
|
function f(s) {
|
|
2971
2975
|
var e;
|
|
2972
|
-
return k.has(s.id), k.set(s.id, s),
|
|
2976
|
+
return k.has(s.id), k.set(s.id, s), Y.has(s.category) || Y.set(s.category, []), (e = Y.get(s.category)) == null || e.push(s.id), s;
|
|
2973
2977
|
}
|
|
2974
|
-
function
|
|
2978
|
+
function st(s) {
|
|
2975
2979
|
return k.get(s);
|
|
2976
2980
|
}
|
|
2977
|
-
function
|
|
2981
|
+
function H() {
|
|
2978
2982
|
return Array.from(k.values());
|
|
2979
2983
|
}
|
|
2980
|
-
function
|
|
2981
|
-
|
|
2984
|
+
function at() {
|
|
2985
|
+
H().map((t) => t.id), Object.entries(b).filter(
|
|
2982
2986
|
(t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
|
|
2983
2987
|
).forEach(([t, i]) => {
|
|
2984
2988
|
const r = t.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
@@ -3001,32 +3005,32 @@ function st() {
|
|
|
3001
3005
|
});
|
|
3002
3006
|
});
|
|
3003
3007
|
}
|
|
3004
|
-
function
|
|
3005
|
-
return (
|
|
3008
|
+
function ot(s) {
|
|
3009
|
+
return (Y.get(s) || []).map((t) => k.get(t)).filter(Boolean);
|
|
3006
3010
|
}
|
|
3007
|
-
function
|
|
3008
|
-
return Array.from(
|
|
3011
|
+
function nt() {
|
|
3012
|
+
return Array.from(Y.keys());
|
|
3009
3013
|
}
|
|
3010
3014
|
function ri(s) {
|
|
3011
3015
|
return k.has(s);
|
|
3012
3016
|
}
|
|
3013
|
-
function
|
|
3017
|
+
function lt(s) {
|
|
3014
3018
|
const e = k.get(s);
|
|
3015
3019
|
if (!e)
|
|
3016
3020
|
return !1;
|
|
3017
3021
|
k.delete(s);
|
|
3018
|
-
const t =
|
|
3022
|
+
const t = Y.get(e.category);
|
|
3019
3023
|
if (t) {
|
|
3020
3024
|
const i = t.indexOf(s);
|
|
3021
|
-
i !== -1 && t.splice(i, 1), t.length === 0 &&
|
|
3025
|
+
i !== -1 && t.splice(i, 1), t.length === 0 && Y.delete(e.category);
|
|
3022
3026
|
}
|
|
3023
3027
|
return !0;
|
|
3024
3028
|
}
|
|
3025
3029
|
function si(s, e) {
|
|
3026
3030
|
const t = k.get(s);
|
|
3027
|
-
return t ?
|
|
3031
|
+
return t ? rt(t, e) : !1;
|
|
3028
3032
|
}
|
|
3029
|
-
function
|
|
3033
|
+
function ct() {
|
|
3030
3034
|
return Array.from(k.values()).map((s) => ({
|
|
3031
3035
|
id: s.id,
|
|
3032
3036
|
name: s.name,
|
|
@@ -3035,7 +3039,7 @@ function lt() {
|
|
|
3035
3039
|
}));
|
|
3036
3040
|
}
|
|
3037
3041
|
if (typeof window < "u") {
|
|
3038
|
-
window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), window.getAllFilters =
|
|
3042
|
+
window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), window.getAllFilters = H, window.getFilter = st, window.getFiltersByCategory = ot, window.getRegisteredFilters = ct;
|
|
3039
3043
|
const s = f;
|
|
3040
3044
|
window.registerFilter = (e) => {
|
|
3041
3045
|
const t = s(e);
|
|
@@ -3045,7 +3049,7 @@ if (typeof window < "u") {
|
|
|
3045
3049
|
typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
|
|
3046
3050
|
return [];
|
|
3047
3051
|
});
|
|
3048
|
-
const { AdjustmentFilter:
|
|
3052
|
+
const { AdjustmentFilter: ht } = b, { ColorMatrixFilter: dt } = w, A = {
|
|
3049
3053
|
gamma: 1,
|
|
3050
3054
|
saturation: 1,
|
|
3051
3055
|
contrast: 1,
|
|
@@ -3054,7 +3058,7 @@ const { AdjustmentFilter: ct } = b, { ColorMatrixFilter: ht } = S, F = {
|
|
|
3054
3058
|
green: 1,
|
|
3055
3059
|
blue: 1,
|
|
3056
3060
|
alpha: 1
|
|
3057
|
-
},
|
|
3061
|
+
}, ut = /* @__PURE__ */ new Set([
|
|
3058
3062
|
"gamma",
|
|
3059
3063
|
"saturation",
|
|
3060
3064
|
"contrast",
|
|
@@ -3064,7 +3068,7 @@ const { AdjustmentFilter: ct } = b, { ColorMatrixFilter: ht } = S, F = {
|
|
|
3064
3068
|
"blue",
|
|
3065
3069
|
"alpha"
|
|
3066
3070
|
]);
|
|
3067
|
-
function
|
|
3071
|
+
function z(s, e) {
|
|
3068
3072
|
if (typeof s == "number" && Number.isFinite(s))
|
|
3069
3073
|
return s;
|
|
3070
3074
|
if (typeof s == "string") {
|
|
@@ -3074,22 +3078,22 @@ function A(s, e) {
|
|
|
3074
3078
|
}
|
|
3075
3079
|
return e;
|
|
3076
3080
|
}
|
|
3077
|
-
function
|
|
3078
|
-
return
|
|
3081
|
+
function se(s) {
|
|
3082
|
+
return ut.has(s);
|
|
3079
3083
|
}
|
|
3080
|
-
function
|
|
3084
|
+
function pt(s) {
|
|
3081
3085
|
return {
|
|
3082
|
-
gamma:
|
|
3083
|
-
saturation:
|
|
3084
|
-
contrast:
|
|
3085
|
-
brightness:
|
|
3086
|
-
red:
|
|
3087
|
-
green:
|
|
3088
|
-
blue:
|
|
3089
|
-
alpha:
|
|
3086
|
+
gamma: z(s.gamma, A.gamma),
|
|
3087
|
+
saturation: z(s.saturation, A.saturation),
|
|
3088
|
+
contrast: z(s.contrast, A.contrast),
|
|
3089
|
+
brightness: z(s.brightness, A.brightness),
|
|
3090
|
+
red: z(s.red, A.red),
|
|
3091
|
+
green: z(s.green, A.green),
|
|
3092
|
+
blue: z(s.blue, A.blue),
|
|
3093
|
+
alpha: z(s.alpha, A.alpha)
|
|
3090
3094
|
};
|
|
3091
3095
|
}
|
|
3092
|
-
function
|
|
3096
|
+
function ae(s, e) {
|
|
3093
3097
|
s.reset(), s.brightness(e.brightness, !0), s.contrast(e.contrast, !0), s.saturate(e.saturation, !0);
|
|
3094
3098
|
}
|
|
3095
3099
|
f({
|
|
@@ -3100,14 +3104,14 @@ f({
|
|
|
3100
3104
|
// Create an instance of the AdjustmentFilter with the provided parameters
|
|
3101
3105
|
createFilter: (s) => {
|
|
3102
3106
|
try {
|
|
3103
|
-
const e =
|
|
3107
|
+
const e = pt(s ?? {}), t = { ...e };
|
|
3104
3108
|
try {
|
|
3105
|
-
const i = new
|
|
3109
|
+
const i = new ht(t), r = i;
|
|
3106
3110
|
return r._customParams = { ...e }, r.updateUIParam = function(o, n) {
|
|
3107
3111
|
try {
|
|
3108
|
-
if (!
|
|
3112
|
+
if (!se(o))
|
|
3109
3113
|
return;
|
|
3110
|
-
const l = this._customParams ?? { ...
|
|
3114
|
+
const l = this._customParams ?? { ...A }, c = z(n, l[o]);
|
|
3111
3115
|
l[o] = c, this._customParams = l;
|
|
3112
3116
|
const d = this;
|
|
3113
3117
|
o in d && (d[o] = c);
|
|
@@ -3115,13 +3119,13 @@ f({
|
|
|
3115
3119
|
}
|
|
3116
3120
|
}, i;
|
|
3117
3121
|
} catch {
|
|
3118
|
-
const r = new
|
|
3119
|
-
return a._customParams = { ...e },
|
|
3122
|
+
const r = new dt(), a = r;
|
|
3123
|
+
return a._customParams = { ...e }, ae(r, e), a.updateUIParam = function(n, l) {
|
|
3120
3124
|
try {
|
|
3121
|
-
if (!
|
|
3125
|
+
if (!se(n))
|
|
3122
3126
|
return;
|
|
3123
|
-
const c = this._customParams ?? { ...
|
|
3124
|
-
c[n] = d, this._customParams = c,
|
|
3127
|
+
const c = this._customParams ?? { ...A }, d = z(l, c[n]);
|
|
3128
|
+
c[n] = d, this._customParams = c, ae(this, c);
|
|
3125
3129
|
} catch {
|
|
3126
3130
|
}
|
|
3127
3131
|
}, r;
|
|
@@ -3225,14 +3229,14 @@ f({
|
|
|
3225
3229
|
}
|
|
3226
3230
|
]
|
|
3227
3231
|
});
|
|
3228
|
-
const { ColorMatrixFilter:
|
|
3232
|
+
const { ColorMatrixFilter: ft } = w, E = {
|
|
3229
3233
|
brightness: 1,
|
|
3230
3234
|
contrast: 1,
|
|
3231
3235
|
saturation: 1,
|
|
3232
3236
|
hue: 0,
|
|
3233
3237
|
sepia: 0,
|
|
3234
3238
|
negative: !1
|
|
3235
|
-
},
|
|
3239
|
+
}, mt = /* @__PURE__ */ new Set([
|
|
3236
3240
|
"brightness",
|
|
3237
3241
|
"contrast",
|
|
3238
3242
|
"saturation",
|
|
@@ -3240,10 +3244,10 @@ const { ColorMatrixFilter: pt } = S, T = {
|
|
|
3240
3244
|
"sepia",
|
|
3241
3245
|
"negative"
|
|
3242
3246
|
]);
|
|
3243
|
-
function
|
|
3244
|
-
return
|
|
3247
|
+
function gt(s) {
|
|
3248
|
+
return mt.has(s);
|
|
3245
3249
|
}
|
|
3246
|
-
function
|
|
3250
|
+
function L(s, e) {
|
|
3247
3251
|
if (typeof s == "number" && Number.isFinite(s))
|
|
3248
3252
|
return s;
|
|
3249
3253
|
if (typeof s == "string") {
|
|
@@ -3253,7 +3257,7 @@ function Y(s, e) {
|
|
|
3253
3257
|
}
|
|
3254
3258
|
return e;
|
|
3255
3259
|
}
|
|
3256
|
-
function
|
|
3260
|
+
function ye(s, e) {
|
|
3257
3261
|
if (typeof s == "boolean")
|
|
3258
3262
|
return s;
|
|
3259
3263
|
if (typeof s == "string") {
|
|
@@ -3264,17 +3268,17 @@ function fe(s, e) {
|
|
|
3264
3268
|
}
|
|
3265
3269
|
return e;
|
|
3266
3270
|
}
|
|
3267
|
-
function
|
|
3271
|
+
function bt(s) {
|
|
3268
3272
|
return {
|
|
3269
|
-
brightness:
|
|
3270
|
-
contrast:
|
|
3271
|
-
saturation:
|
|
3272
|
-
hue:
|
|
3273
|
-
sepia:
|
|
3274
|
-
negative:
|
|
3273
|
+
brightness: L(s.brightness, E.brightness),
|
|
3274
|
+
contrast: L(s.contrast, E.contrast),
|
|
3275
|
+
saturation: L(s.saturation, E.saturation),
|
|
3276
|
+
hue: L(s.hue, E.hue),
|
|
3277
|
+
sepia: L(s.sepia, E.sepia),
|
|
3278
|
+
negative: ye(s.negative, E.negative)
|
|
3275
3279
|
};
|
|
3276
3280
|
}
|
|
3277
|
-
function
|
|
3281
|
+
function oe(s, e) {
|
|
3278
3282
|
s.reset(), e.brightness !== 1 && s.brightness(e.brightness, !0), e.contrast !== 1 && s.contrast(e.contrast, !0), e.saturation !== 1 && s.saturate(e.saturation, !0), e.hue !== 0 && s.hue(e.hue, !0), e.sepia > 0 && s.sepia(!0), e.negative && s.negative(!0);
|
|
3279
3283
|
}
|
|
3280
3284
|
f({
|
|
@@ -3285,19 +3289,19 @@ f({
|
|
|
3285
3289
|
// Create an instance of the ColorMatrixFilter with the provided parameters
|
|
3286
3290
|
createFilter: (s) => {
|
|
3287
3291
|
try {
|
|
3288
|
-
const e =
|
|
3289
|
-
return i._customParams = { ...e },
|
|
3292
|
+
const e = bt(s ?? {}), t = new ft(), i = t;
|
|
3293
|
+
return i._customParams = { ...e }, oe(t, e), i.updateUIParam = function(a, o) {
|
|
3290
3294
|
try {
|
|
3291
|
-
if (!
|
|
3295
|
+
if (!gt(a))
|
|
3292
3296
|
return;
|
|
3293
|
-
const n = this._customParams ?? { ...
|
|
3297
|
+
const n = this._customParams ?? { ...E };
|
|
3294
3298
|
if (a === "negative")
|
|
3295
|
-
n.negative =
|
|
3299
|
+
n.negative = ye(o, n.negative);
|
|
3296
3300
|
else {
|
|
3297
3301
|
const l = a;
|
|
3298
|
-
n[l] =
|
|
3302
|
+
n[l] = L(o, n[l]);
|
|
3299
3303
|
}
|
|
3300
|
-
this._customParams = n,
|
|
3304
|
+
this._customParams = n, oe(this, n);
|
|
3301
3305
|
} catch {
|
|
3302
3306
|
}
|
|
3303
3307
|
}, t;
|
|
@@ -3383,7 +3387,7 @@ f({
|
|
|
3383
3387
|
// Create an instance of the ColorMatrixFilter with alpha adjustment
|
|
3384
3388
|
createFilter: (s) => {
|
|
3385
3389
|
try {
|
|
3386
|
-
const e = s.alpha !== void 0 ? s.alpha : 1, t = new
|
|
3390
|
+
const e = s.alpha !== void 0 ? s.alpha : 1, t = new w.ColorMatrixFilter();
|
|
3387
3391
|
return t.alpha = e, t._customParams = {
|
|
3388
3392
|
alpha: e
|
|
3389
3393
|
}, t.updateUIParam = function(i, r) {
|
|
@@ -3430,7 +3434,7 @@ f({
|
|
|
3430
3434
|
*/
|
|
3431
3435
|
createFilter: (s) => {
|
|
3432
3436
|
try {
|
|
3433
|
-
const e = new
|
|
3437
|
+
const e = new w.BlurFilter({
|
|
3434
3438
|
strength: s.blur || 8,
|
|
3435
3439
|
quality: s.quality || 4
|
|
3436
3440
|
});
|
|
@@ -3489,7 +3493,7 @@ f({
|
|
|
3489
3493
|
description: "Advanced color adjustments including sepia, hue rotation, and more",
|
|
3490
3494
|
// Create an instance of the ColorMatrixFilter with the provided parameters
|
|
3491
3495
|
createFilter: (s) => {
|
|
3492
|
-
const e =
|
|
3496
|
+
const e = w.ColorMatrixFilter;
|
|
3493
3497
|
if (!e)
|
|
3494
3498
|
return null;
|
|
3495
3499
|
const t = new e();
|
|
@@ -3569,7 +3573,7 @@ f({
|
|
|
3569
3573
|
}
|
|
3570
3574
|
]
|
|
3571
3575
|
});
|
|
3572
|
-
const { ColorOverlayFilter:
|
|
3576
|
+
const { ColorOverlayFilter: yt } = b;
|
|
3573
3577
|
f({
|
|
3574
3578
|
id: "colorOverlay",
|
|
3575
3579
|
name: "Color Overlay",
|
|
@@ -3584,7 +3588,7 @@ f({
|
|
|
3584
3588
|
try {
|
|
3585
3589
|
let e = 16711680;
|
|
3586
3590
|
s.color && (typeof s.color == "string" ? e = parseInt(s.color.replace("#", "0x"), 16) : typeof s.color == "number" && (e = s.color));
|
|
3587
|
-
const t = new
|
|
3591
|
+
const t = new yt({
|
|
3588
3592
|
color: e,
|
|
3589
3593
|
alpha: s.alpha || 0.5
|
|
3590
3594
|
});
|
|
@@ -3816,7 +3820,7 @@ f({
|
|
|
3816
3820
|
}
|
|
3817
3821
|
]
|
|
3818
3822
|
});
|
|
3819
|
-
const { ColorMatrixFilter:
|
|
3823
|
+
const { ColorMatrixFilter: _t } = w;
|
|
3820
3824
|
f({
|
|
3821
3825
|
id: "grayscale",
|
|
3822
3826
|
name: "Grayscale",
|
|
@@ -3829,14 +3833,14 @@ f({
|
|
|
3829
3833
|
*/
|
|
3830
3834
|
createFilter: (s) => {
|
|
3831
3835
|
try {
|
|
3832
|
-
const e = new
|
|
3836
|
+
const e = new _t();
|
|
3833
3837
|
e._customParams = { ...s };
|
|
3834
3838
|
const t = s.intensity !== void 0 ? s.intensity : 1;
|
|
3835
|
-
return
|
|
3839
|
+
return ne(e, t), e.updateUIParam = function(i, r) {
|
|
3836
3840
|
const a = this._customParams || {};
|
|
3837
3841
|
switch (this._customParams = a, a[i] = r, i) {
|
|
3838
3842
|
case "intensity":
|
|
3839
|
-
|
|
3843
|
+
ne(this, r);
|
|
3840
3844
|
break;
|
|
3841
3845
|
default:
|
|
3842
3846
|
i in this && (this[i] = r);
|
|
@@ -3866,10 +3870,10 @@ f({
|
|
|
3866
3870
|
}
|
|
3867
3871
|
]
|
|
3868
3872
|
});
|
|
3869
|
-
function
|
|
3873
|
+
function ne(s, e) {
|
|
3870
3874
|
s.reset(), s.greyscale(e);
|
|
3871
3875
|
}
|
|
3872
|
-
const { HslAdjustmentFilter:
|
|
3876
|
+
const { HslAdjustmentFilter: xt } = b;
|
|
3873
3877
|
f({
|
|
3874
3878
|
id: "hsl-adjustment",
|
|
3875
3879
|
name: "HSL Adjustment",
|
|
@@ -3881,7 +3885,7 @@ f({
|
|
|
3881
3885
|
*/
|
|
3882
3886
|
createFilter: (s) => {
|
|
3883
3887
|
try {
|
|
3884
|
-
const e = new
|
|
3888
|
+
const e = new xt({
|
|
3885
3889
|
hue: s.hue !== void 0 ? s.hue : 0,
|
|
3886
3890
|
saturation: s.saturation !== void 0 ? s.saturation : 0,
|
|
3887
3891
|
lightness: s.lightness !== void 0 ? s.lightness : 0,
|
|
@@ -3979,7 +3983,7 @@ f({
|
|
|
3979
3983
|
}
|
|
3980
3984
|
]
|
|
3981
3985
|
});
|
|
3982
|
-
const { KawaseBlurFilter:
|
|
3986
|
+
const { KawaseBlurFilter: Ct } = b;
|
|
3983
3987
|
f({
|
|
3984
3988
|
id: "kawase-blur",
|
|
3985
3989
|
name: "Kawase Blur",
|
|
@@ -3992,7 +3996,7 @@ f({
|
|
|
3992
3996
|
*/
|
|
3993
3997
|
createFilter: (s) => {
|
|
3994
3998
|
try {
|
|
3995
|
-
const e = new
|
|
3999
|
+
const e = new Ct({
|
|
3996
4000
|
strength: s.strength || 4,
|
|
3997
4001
|
quality: s.quality || 3,
|
|
3998
4002
|
clamp: s.clamp || !1,
|
|
@@ -4097,7 +4101,7 @@ f({
|
|
|
4097
4101
|
}
|
|
4098
4102
|
]
|
|
4099
4103
|
});
|
|
4100
|
-
const { MotionBlurFilter:
|
|
4104
|
+
const { MotionBlurFilter: wt } = b;
|
|
4101
4105
|
f({
|
|
4102
4106
|
id: "motion-blur",
|
|
4103
4107
|
name: "Motion Blur",
|
|
@@ -4110,7 +4114,7 @@ f({
|
|
|
4110
4114
|
*/
|
|
4111
4115
|
createFilter: (s) => {
|
|
4112
4116
|
try {
|
|
4113
|
-
const e = new
|
|
4117
|
+
const e = new wt({
|
|
4114
4118
|
velocity: {
|
|
4115
4119
|
x: s.velocityX !== void 0 ? s.velocityX : 0,
|
|
4116
4120
|
y: s.velocityY !== void 0 ? s.velocityY : 0
|
|
@@ -4205,7 +4209,7 @@ f({
|
|
|
4205
4209
|
}
|
|
4206
4210
|
]
|
|
4207
4211
|
});
|
|
4208
|
-
const { RadialBlurFilter:
|
|
4212
|
+
const { RadialBlurFilter: St } = b;
|
|
4209
4213
|
f({
|
|
4210
4214
|
id: "radial-blur",
|
|
4211
4215
|
name: "Radial Blur",
|
|
@@ -4214,7 +4218,7 @@ f({
|
|
|
4214
4218
|
// Create an instance of the RadialBlurFilter with the provided parameters
|
|
4215
4219
|
createFilter: (s) => {
|
|
4216
4220
|
try {
|
|
4217
|
-
const e = new
|
|
4221
|
+
const e = new St({
|
|
4218
4222
|
angle: s.angle ?? 20,
|
|
4219
4223
|
center: { x: s.centerX ?? 0, y: s.centerY ?? 0 },
|
|
4220
4224
|
kernelSize: s.kernelSize ?? 15,
|
|
@@ -4329,7 +4333,7 @@ f({
|
|
|
4329
4333
|
}
|
|
4330
4334
|
]
|
|
4331
4335
|
});
|
|
4332
|
-
const { TiltShiftFilter:
|
|
4336
|
+
const { TiltShiftFilter: vt } = b;
|
|
4333
4337
|
f({
|
|
4334
4338
|
id: "tilt-shift",
|
|
4335
4339
|
name: "Tilt Shift",
|
|
@@ -4338,7 +4342,7 @@ f({
|
|
|
4338
4342
|
// Create an instance of the TiltShiftFilter with the provided parameters
|
|
4339
4343
|
createFilter: (s) => {
|
|
4340
4344
|
try {
|
|
4341
|
-
const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new
|
|
4345
|
+
const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new vt({
|
|
4342
4346
|
blur: Number(e),
|
|
4343
4347
|
gradientBlur: Number(t),
|
|
4344
4348
|
start: { x: Number(i), y: Number(r) },
|
|
@@ -4457,7 +4461,7 @@ f({
|
|
|
4457
4461
|
}
|
|
4458
4462
|
]
|
|
4459
4463
|
});
|
|
4460
|
-
const { ZoomBlurFilter:
|
|
4464
|
+
const { ZoomBlurFilter: kt } = b;
|
|
4461
4465
|
f({
|
|
4462
4466
|
id: "zoom-blur",
|
|
4463
4467
|
name: "Zoom Blur",
|
|
@@ -4470,7 +4474,7 @@ f({
|
|
|
4470
4474
|
*/
|
|
4471
4475
|
createFilter: (s) => {
|
|
4472
4476
|
try {
|
|
4473
|
-
const e = new
|
|
4477
|
+
const e = new kt({
|
|
4474
4478
|
strength: s.strength || 0.1,
|
|
4475
4479
|
center: {
|
|
4476
4480
|
x: s.centerX !== void 0 ? s.centerX : 0.5,
|
|
@@ -4584,7 +4588,7 @@ f({
|
|
|
4584
4588
|
}
|
|
4585
4589
|
]
|
|
4586
4590
|
});
|
|
4587
|
-
const { ColorGradientFilter:
|
|
4591
|
+
const { ColorGradientFilter: le } = b;
|
|
4588
4592
|
f({
|
|
4589
4593
|
id: "color-gradient",
|
|
4590
4594
|
name: "Color Gradient",
|
|
@@ -4608,7 +4612,7 @@ f({
|
|
|
4608
4612
|
{ offset: 0, color: 16711680, alpha: 1 },
|
|
4609
4613
|
{ offset: 1, color: 255, alpha: 1 }
|
|
4610
4614
|
]), e.sort((i, r) => i.offset - r.offset);
|
|
4611
|
-
const t = new
|
|
4615
|
+
const t = new le({
|
|
4612
4616
|
type: s.gradientType,
|
|
4613
4617
|
// 0: linear, 1: radial, 2: conic
|
|
4614
4618
|
stops: e,
|
|
@@ -4698,7 +4702,7 @@ f({
|
|
|
4698
4702
|
case "cssGradient":
|
|
4699
4703
|
if (r && typeof r == "string" && r.trim() !== "")
|
|
4700
4704
|
try {
|
|
4701
|
-
const h = new
|
|
4705
|
+
const h = new le({ css: r });
|
|
4702
4706
|
this.type = h.type, this.angle = h.angle, this.stops = [...h.stops], a.colorStops = this.stops.map((p) => ({
|
|
4703
4707
|
offset: p.offset,
|
|
4704
4708
|
color: typeof p.color == "number" ? "#" + p.color.toString(16).padStart(6, "0") : p.color,
|
|
@@ -4721,9 +4725,9 @@ f({
|
|
|
4721
4725
|
if (/colorStops\[\d+\]\..*/.test(i)) {
|
|
4722
4726
|
const h = i.match(/colorStops\[(\d+)\]\.(.*)/);
|
|
4723
4727
|
if (h) {
|
|
4724
|
-
const [p, m,
|
|
4728
|
+
const [p, m, _] = h, g = parseInt(m), y = [...this.stops];
|
|
4725
4729
|
if (g >= 0 && g < y.length)
|
|
4726
|
-
return
|
|
4730
|
+
return _ === "color" && typeof r == "string" ? y[g].color = parseInt(r.replace("#", "0x")) : (_ === "offset" || _ === "alpha") && (y[g][_] = r), this.stops = y, this.stops.sort((v, x) => v.offset - x.offset), a.colorStops = this.getColorStopsForUI(), !0;
|
|
4727
4731
|
}
|
|
4728
4732
|
} else i in this && (this[i] = r);
|
|
4729
4733
|
break;
|
|
@@ -4840,7 +4844,7 @@ f({
|
|
|
4840
4844
|
if (!e)
|
|
4841
4845
|
return null;
|
|
4842
4846
|
let t = null;
|
|
4843
|
-
s.texturePath ? t =
|
|
4847
|
+
s.texturePath ? t = w.Texture.from(s.texturePath) : t = w.Texture.from("/examples/filters-main/examples/images/colormap.png");
|
|
4844
4848
|
const i = new e({
|
|
4845
4849
|
colorMap: t,
|
|
4846
4850
|
nearest: s.nearest,
|
|
@@ -4850,7 +4854,7 @@ f({
|
|
|
4850
4854
|
const o = this._customParams || {};
|
|
4851
4855
|
switch (this._customParams = o, o[r] = a, r) {
|
|
4852
4856
|
case "texturePath":
|
|
4853
|
-
a && (this.colorMap =
|
|
4857
|
+
a && (this.colorMap = w.Texture.from(a));
|
|
4854
4858
|
break;
|
|
4855
4859
|
case "mix":
|
|
4856
4860
|
this.mix = a;
|
|
@@ -4911,7 +4915,7 @@ f({
|
|
|
4911
4915
|
}
|
|
4912
4916
|
]
|
|
4913
4917
|
});
|
|
4914
|
-
const
|
|
4918
|
+
const Pt = b.ColorReplaceFilter;
|
|
4915
4919
|
f({
|
|
4916
4920
|
id: "color-replace",
|
|
4917
4921
|
name: "Color Replace",
|
|
@@ -4928,7 +4932,7 @@ f({
|
|
|
4928
4932
|
s.originalColor && (typeof s.originalColor == "string" ? e = parseInt(s.originalColor.replace("#", "0x"), 16) : typeof s.originalColor == "number" && (e = s.originalColor));
|
|
4929
4933
|
let t = 255;
|
|
4930
4934
|
s.targetColor && (typeof s.targetColor == "string" ? t = parseInt(s.targetColor.replace("#", "0x"), 16) : typeof s.targetColor == "number" && (t = s.targetColor));
|
|
4931
|
-
const i = new
|
|
4935
|
+
const i = new Pt({
|
|
4932
4936
|
originalColor: e,
|
|
4933
4937
|
targetColor: t,
|
|
4934
4938
|
tolerance: s.tolerance || 0.4
|
|
@@ -4992,7 +4996,7 @@ f({
|
|
|
4992
4996
|
}
|
|
4993
4997
|
]
|
|
4994
4998
|
});
|
|
4995
|
-
const
|
|
4999
|
+
const Mt = b.MultiColorReplaceFilter;
|
|
4996
5000
|
f({
|
|
4997
5001
|
id: "multi-color-replace",
|
|
4998
5002
|
name: "Multi-Color Replace",
|
|
@@ -5018,7 +5022,7 @@ f({
|
|
|
5018
5022
|
const i = typeof s.originalColor3 == "string" ? parseInt(s.originalColor3.replace("#", "0x"), 16) : s.originalColor3, r = typeof s.targetColor3 == "string" ? parseInt(s.targetColor3.replace("#", "0x"), 16) : s.targetColor3;
|
|
5019
5023
|
e.push([i, r]);
|
|
5020
5024
|
}
|
|
5021
|
-
const t = new
|
|
5025
|
+
const t = new Mt(
|
|
5022
5026
|
e,
|
|
5023
5027
|
s.tolerance || 0.05,
|
|
5024
5028
|
3
|
|
@@ -5129,7 +5133,7 @@ f({
|
|
|
5129
5133
|
}
|
|
5130
5134
|
]
|
|
5131
5135
|
});
|
|
5132
|
-
const { RGBSplitFilter:
|
|
5136
|
+
const { RGBSplitFilter: Ft } = b;
|
|
5133
5137
|
f({
|
|
5134
5138
|
id: "rgb-split",
|
|
5135
5139
|
name: "RGB Split",
|
|
@@ -5150,7 +5154,7 @@ f({
|
|
|
5150
5154
|
}, i = {
|
|
5151
5155
|
x: s.blueX !== void 0 ? s.blueX : 0,
|
|
5152
5156
|
y: s.blueY !== void 0 ? s.blueY : 0
|
|
5153
|
-
}, r = new
|
|
5157
|
+
}, r = new Ft({
|
|
5154
5158
|
red: e,
|
|
5155
5159
|
green: t,
|
|
5156
5160
|
blue: i
|
|
@@ -5263,7 +5267,7 @@ f({
|
|
|
5263
5267
|
}
|
|
5264
5268
|
]
|
|
5265
5269
|
});
|
|
5266
|
-
const { AdvancedBloomFilter:
|
|
5270
|
+
const { AdvancedBloomFilter: At } = b;
|
|
5267
5271
|
f({
|
|
5268
5272
|
id: "advanced-bloom",
|
|
5269
5273
|
name: "Advanced Bloom",
|
|
@@ -5272,7 +5276,7 @@ f({
|
|
|
5272
5276
|
// Create an instance of the AdvancedBloomFilter with the provided parameters
|
|
5273
5277
|
createFilter: (s) => {
|
|
5274
5278
|
try {
|
|
5275
|
-
const e = new
|
|
5279
|
+
const e = new At({
|
|
5276
5280
|
threshold: s.threshold || 0.5,
|
|
5277
5281
|
bloomScale: s.bloomScale || 1,
|
|
5278
5282
|
brightness: s.brightness || 1,
|
|
@@ -5419,7 +5423,7 @@ f({
|
|
|
5419
5423
|
}
|
|
5420
5424
|
]
|
|
5421
5425
|
});
|
|
5422
|
-
const
|
|
5426
|
+
const zt = b.AsciiFilter;
|
|
5423
5427
|
f({
|
|
5424
5428
|
id: "ascii",
|
|
5425
5429
|
name: "ASCII",
|
|
@@ -5431,7 +5435,7 @@ f({
|
|
|
5431
5435
|
const e = typeof s.size == "number" ? s.size : 8;
|
|
5432
5436
|
let t = s.color;
|
|
5433
5437
|
typeof t == "string" && t.startsWith("#") && (t = parseInt(t.replace("#", "0x"), 16));
|
|
5434
|
-
const i = s.replaceColor === !0, r = new
|
|
5438
|
+
const i = s.replaceColor === !0, r = new zt({
|
|
5435
5439
|
size: e,
|
|
5436
5440
|
color: t,
|
|
5437
5441
|
replaceColor: i
|
|
@@ -5498,7 +5502,7 @@ f({
|
|
|
5498
5502
|
}
|
|
5499
5503
|
]
|
|
5500
5504
|
});
|
|
5501
|
-
const
|
|
5505
|
+
const Rt = b.BackdropBlurFilter;
|
|
5502
5506
|
f({
|
|
5503
5507
|
id: "backdrop-blur",
|
|
5504
5508
|
name: "Backdrop Blur",
|
|
@@ -5507,7 +5511,7 @@ f({
|
|
|
5507
5511
|
// Create an instance of the BackdropBlurFilter with the provided parameters
|
|
5508
5512
|
createFilter: (s) => {
|
|
5509
5513
|
try {
|
|
5510
|
-
const e = new
|
|
5514
|
+
const e = new Rt({
|
|
5511
5515
|
// Higher strength values (20-50) make the effect more noticeable
|
|
5512
5516
|
strength: s.strength || 20,
|
|
5513
5517
|
quality: s.quality || 4,
|
|
@@ -5605,7 +5609,7 @@ f({
|
|
|
5605
5609
|
}
|
|
5606
5610
|
]
|
|
5607
5611
|
});
|
|
5608
|
-
const { BevelFilter:
|
|
5612
|
+
const { BevelFilter: Nt } = b;
|
|
5609
5613
|
f({
|
|
5610
5614
|
id: "bevel",
|
|
5611
5615
|
name: "Bevel",
|
|
@@ -5617,7 +5621,7 @@ f({
|
|
|
5617
5621
|
*/
|
|
5618
5622
|
createFilter: (s) => {
|
|
5619
5623
|
try {
|
|
5620
|
-
const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new
|
|
5624
|
+
const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new Nt({
|
|
5621
5625
|
rotation: s.rotation !== void 0 ? s.rotation : 45,
|
|
5622
5626
|
thickness: s.thickness !== void 0 ? s.thickness : 2,
|
|
5623
5627
|
lightColor: parseInt(e, 16),
|
|
@@ -5733,7 +5737,7 @@ f({
|
|
|
5733
5737
|
}
|
|
5734
5738
|
]
|
|
5735
5739
|
});
|
|
5736
|
-
const { BloomFilter:
|
|
5740
|
+
const { BloomFilter: Tt } = b;
|
|
5737
5741
|
f({
|
|
5738
5742
|
id: "bloom",
|
|
5739
5743
|
name: "Bloom/Glow",
|
|
@@ -5742,7 +5746,7 @@ f({
|
|
|
5742
5746
|
// Create an instance of the BloomFilter with the provided parameters
|
|
5743
5747
|
createFilter: (s) => {
|
|
5744
5748
|
try {
|
|
5745
|
-
const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new
|
|
5749
|
+
const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new Tt({
|
|
5746
5750
|
strength: {
|
|
5747
5751
|
x: Number(e),
|
|
5748
5752
|
y: Number(t)
|
|
@@ -5845,7 +5849,7 @@ f({
|
|
|
5845
5849
|
}
|
|
5846
5850
|
]
|
|
5847
5851
|
});
|
|
5848
|
-
const { BulgePinchFilter:
|
|
5852
|
+
const { BulgePinchFilter: It } = b;
|
|
5849
5853
|
f({
|
|
5850
5854
|
id: "bulge-pinch",
|
|
5851
5855
|
// ID must match what the application expects
|
|
@@ -5855,7 +5859,7 @@ f({
|
|
|
5855
5859
|
// Create an instance of the BulgePinchFilter with the provided parameters
|
|
5856
5860
|
createFilter: (s) => {
|
|
5857
5861
|
try {
|
|
5858
|
-
const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new
|
|
5862
|
+
const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new It({
|
|
5859
5863
|
center: {
|
|
5860
5864
|
x: e,
|
|
5861
5865
|
y: t
|
|
@@ -5937,7 +5941,7 @@ f({
|
|
|
5937
5941
|
}
|
|
5938
5942
|
]
|
|
5939
5943
|
});
|
|
5940
|
-
const { ConvolutionFilter:
|
|
5944
|
+
const { ConvolutionFilter: Et } = b, O = {
|
|
5941
5945
|
normal: [0, 0, 0, 0, 1, 0, 0, 0, 0],
|
|
5942
5946
|
gaussianBlur: [0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045],
|
|
5943
5947
|
boxBlur: [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9],
|
|
@@ -5970,16 +5974,16 @@ f({
|
|
|
5970
5974
|
];
|
|
5971
5975
|
else {
|
|
5972
5976
|
const i = s.preset;
|
|
5973
|
-
e =
|
|
5977
|
+
e = O[i] || O.normal;
|
|
5974
5978
|
}
|
|
5975
|
-
const t = new
|
|
5979
|
+
const t = new Et(e, s.width || 200, s.height || 200);
|
|
5976
5980
|
return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
|
|
5977
5981
|
const a = this._customParams || {};
|
|
5978
5982
|
switch (this._customParams = a, a[i] = r, i) {
|
|
5979
5983
|
case "preset":
|
|
5980
5984
|
if (!a.customMatrix) {
|
|
5981
5985
|
const o = r;
|
|
5982
|
-
|
|
5986
|
+
O[o] && (this.matrix = O[o]);
|
|
5983
5987
|
}
|
|
5984
5988
|
break;
|
|
5985
5989
|
case "customMatrix":
|
|
@@ -5988,7 +5992,7 @@ f({
|
|
|
5988
5992
|
a.m00 = o[0], a.m01 = o[1], a.m02 = o[2], a.m10 = o[3], a.m11 = o[4], a.m12 = o[5], a.m20 = o[6], a.m21 = o[7], a.m22 = o[8];
|
|
5989
5993
|
} else {
|
|
5990
5994
|
const o = a.preset;
|
|
5991
|
-
this.matrix =
|
|
5995
|
+
this.matrix = O[o] || O.normal;
|
|
5992
5996
|
}
|
|
5993
5997
|
break;
|
|
5994
5998
|
case "m00":
|
|
@@ -6183,7 +6187,7 @@ f({
|
|
|
6183
6187
|
}
|
|
6184
6188
|
]
|
|
6185
6189
|
});
|
|
6186
|
-
const { CrossHatchFilter:
|
|
6190
|
+
const { CrossHatchFilter: Xt } = b;
|
|
6187
6191
|
f({
|
|
6188
6192
|
id: "cross-hatch",
|
|
6189
6193
|
name: "Cross Hatch",
|
|
@@ -6193,7 +6197,7 @@ f({
|
|
|
6193
6197
|
// Note: CrossHatchFilter has NO parameters according to PixiJS examples
|
|
6194
6198
|
createFilter: (s) => {
|
|
6195
6199
|
try {
|
|
6196
|
-
const e = new
|
|
6200
|
+
const e = new Xt();
|
|
6197
6201
|
return e.updateUIParam = function(t, i) {
|
|
6198
6202
|
return !0;
|
|
6199
6203
|
}, e;
|
|
@@ -6390,7 +6394,7 @@ f({
|
|
|
6390
6394
|
}
|
|
6391
6395
|
]
|
|
6392
6396
|
});
|
|
6393
|
-
const
|
|
6397
|
+
const Yt = w.DisplacementFilter, Bt = w.Sprite, K = w.Texture;
|
|
6394
6398
|
f({
|
|
6395
6399
|
id: "displacement",
|
|
6396
6400
|
// ID must match what the application expects
|
|
@@ -6403,7 +6407,7 @@ f({
|
|
|
6403
6407
|
const e = s.mapTexture || "/assets/images/displacement_map.png";
|
|
6404
6408
|
let t;
|
|
6405
6409
|
try {
|
|
6406
|
-
t =
|
|
6410
|
+
t = K.from(e), t.source.addressMode = "repeat";
|
|
6407
6411
|
} catch {
|
|
6408
6412
|
const o = document.createElement("canvas");
|
|
6409
6413
|
o.width = 256, o.height = 256;
|
|
@@ -6414,9 +6418,9 @@ f({
|
|
|
6414
6418
|
for (let c = 0; c < 10; c++)
|
|
6415
6419
|
(l + c) % 2 === 0 && n.fillRect(l * 25, c * 25, 25, 25);
|
|
6416
6420
|
}
|
|
6417
|
-
t =
|
|
6421
|
+
t = K.from(o);
|
|
6418
6422
|
}
|
|
6419
|
-
const i = new
|
|
6423
|
+
const i = new Bt(t), r = new Yt(i, s.scale || 50);
|
|
6420
6424
|
return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = i, r.updateUIParam = function(a, o) {
|
|
6421
6425
|
const n = this._customParams || {};
|
|
6422
6426
|
switch (this._customParams = n, n[a] = o, a) {
|
|
@@ -6430,7 +6434,7 @@ f({
|
|
|
6430
6434
|
try {
|
|
6431
6435
|
const l = this._displacementSprite;
|
|
6432
6436
|
if (l) {
|
|
6433
|
-
const c =
|
|
6437
|
+
const c = K.from(o);
|
|
6434
6438
|
c.source.addressMode = "repeat", l.texture = c;
|
|
6435
6439
|
}
|
|
6436
6440
|
} catch {
|
|
@@ -6563,7 +6567,7 @@ f({
|
|
|
6563
6567
|
}
|
|
6564
6568
|
]
|
|
6565
6569
|
});
|
|
6566
|
-
const { EmbossFilter:
|
|
6570
|
+
const { EmbossFilter: Ot } = b;
|
|
6567
6571
|
f({
|
|
6568
6572
|
id: "emboss",
|
|
6569
6573
|
name: "Emboss",
|
|
@@ -6572,7 +6576,7 @@ f({
|
|
|
6572
6576
|
// Create an instance of the Emboss filter with the provided parameters
|
|
6573
6577
|
createFilter: (s) => {
|
|
6574
6578
|
try {
|
|
6575
|
-
const e = typeof s.strength == "number" ? s.strength : 5, t = new
|
|
6579
|
+
const e = typeof s.strength == "number" ? s.strength : 5, t = new Ot(e);
|
|
6576
6580
|
return t._customParams = {
|
|
6577
6581
|
strength: e
|
|
6578
6582
|
}, t.updateUIParam = function(i, r) {
|
|
@@ -6612,7 +6616,7 @@ f({
|
|
|
6612
6616
|
}
|
|
6613
6617
|
]
|
|
6614
6618
|
});
|
|
6615
|
-
const { GlitchFilter:
|
|
6619
|
+
const { GlitchFilter: Lt } = b, I = {
|
|
6616
6620
|
TRANSPARENT: 0,
|
|
6617
6621
|
ORIGINAL: 1,
|
|
6618
6622
|
LOOP: 2,
|
|
@@ -6626,7 +6630,7 @@ f({
|
|
|
6626
6630
|
description: "Apply digital distortion and glitch effects",
|
|
6627
6631
|
createFilter: (s) => {
|
|
6628
6632
|
try {
|
|
6629
|
-
const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new
|
|
6633
|
+
const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new Lt({
|
|
6630
6634
|
slices: s.slices,
|
|
6631
6635
|
offset: s.offset,
|
|
6632
6636
|
direction: s.direction,
|
|
@@ -6704,7 +6708,7 @@ f({
|
|
|
6704
6708
|
slices: 10,
|
|
6705
6709
|
offset: 100,
|
|
6706
6710
|
direction: 0,
|
|
6707
|
-
fillMode:
|
|
6711
|
+
fillMode: I.LOOP,
|
|
6708
6712
|
// LOOP mode looks better for the demo
|
|
6709
6713
|
seed: 0.5,
|
|
6710
6714
|
average: !1,
|
|
@@ -6767,13 +6771,13 @@ f({
|
|
|
6767
6771
|
label: "Fill Mode",
|
|
6768
6772
|
property: "fillMode",
|
|
6769
6773
|
options: [
|
|
6770
|
-
{ value:
|
|
6771
|
-
{ value:
|
|
6772
|
-
{ value:
|
|
6773
|
-
{ value:
|
|
6774
|
-
{ value:
|
|
6774
|
+
{ value: I.TRANSPARENT, label: "Transparent" },
|
|
6775
|
+
{ value: I.ORIGINAL, label: "Original" },
|
|
6776
|
+
{ value: I.LOOP, label: "Loop" },
|
|
6777
|
+
{ value: I.CLAMP, label: "Clamp" },
|
|
6778
|
+
{ value: I.MIRROR, label: "Mirror" }
|
|
6775
6779
|
],
|
|
6776
|
-
default:
|
|
6780
|
+
default: I.LOOP
|
|
6777
6781
|
},
|
|
6778
6782
|
{
|
|
6779
6783
|
id: "seed",
|
|
@@ -6867,7 +6871,7 @@ f({
|
|
|
6867
6871
|
}
|
|
6868
6872
|
]
|
|
6869
6873
|
});
|
|
6870
|
-
const { GlowFilter:
|
|
6874
|
+
const { GlowFilter: Dt } = b;
|
|
6871
6875
|
f({
|
|
6872
6876
|
id: "glow",
|
|
6873
6877
|
name: "Glow",
|
|
@@ -6876,7 +6880,7 @@ f({
|
|
|
6876
6880
|
// Create an instance of the GlowFilter with the provided parameters
|
|
6877
6881
|
createFilter: (s) => {
|
|
6878
6882
|
try {
|
|
6879
|
-
const e = parseInt(s.color.replace("#", "0x"), 16), t = new
|
|
6883
|
+
const e = parseInt(s.color.replace("#", "0x"), 16), t = new Dt({
|
|
6880
6884
|
distance: s.distance || 10,
|
|
6881
6885
|
outerStrength: s.outerStrength || 4,
|
|
6882
6886
|
innerStrength: s.innerStrength || 0,
|
|
@@ -7002,7 +7006,7 @@ f({
|
|
|
7002
7006
|
}
|
|
7003
7007
|
]
|
|
7004
7008
|
});
|
|
7005
|
-
const { GodrayFilter:
|
|
7009
|
+
const { GodrayFilter: Ut } = b;
|
|
7006
7010
|
f({
|
|
7007
7011
|
id: "godray",
|
|
7008
7012
|
name: "Godray",
|
|
@@ -7011,7 +7015,7 @@ f({
|
|
|
7011
7015
|
// Create an instance of the GodrayFilter with the provided parameters
|
|
7012
7016
|
createFilter: (s) => {
|
|
7013
7017
|
try {
|
|
7014
|
-
const e = new
|
|
7018
|
+
const e = new Ut({
|
|
7015
7019
|
angle: s.angle || 30,
|
|
7016
7020
|
parallel: s.parallel ?? !0,
|
|
7017
7021
|
center: {
|
|
@@ -7164,7 +7168,7 @@ f({
|
|
|
7164
7168
|
}
|
|
7165
7169
|
]
|
|
7166
7170
|
});
|
|
7167
|
-
const
|
|
7171
|
+
const Vt = b.SimpleLightmapFilter, ce = w.Texture;
|
|
7168
7172
|
f({
|
|
7169
7173
|
id: "lightmap",
|
|
7170
7174
|
name: "Lightmap",
|
|
@@ -7189,14 +7193,14 @@ f({
|
|
|
7189
7193
|
const c = a.createRadialGradient(128, 128, 10, 128, 128, 160);
|
|
7190
7194
|
c.addColorStop(0, "white"), c.addColorStop(0.3, "rgba(220, 220, 220, 1)"), c.addColorStop(0.6, "rgba(150, 150, 150, 1)"), c.addColorStop(1, "black"), a.fillStyle = c, a.fillRect(0, 0, 256, 256);
|
|
7191
7195
|
}
|
|
7192
|
-
const o =
|
|
7196
|
+
const o = ce.from(r);
|
|
7193
7197
|
let n;
|
|
7194
7198
|
try {
|
|
7195
7199
|
typeof t == "string" && t.startsWith("#") ? n = parseInt(t.replace("#", "0x"), 16) : n = 0;
|
|
7196
7200
|
} catch {
|
|
7197
7201
|
n = 0;
|
|
7198
7202
|
}
|
|
7199
|
-
const l = new
|
|
7203
|
+
const l = new Vt(o, n, i);
|
|
7200
7204
|
return l._customParams = {
|
|
7201
7205
|
textureType: e,
|
|
7202
7206
|
color: t,
|
|
@@ -7222,8 +7226,8 @@ f({
|
|
|
7222
7226
|
const g = m.createRadialGradient(128, 128, 10, 128, 128, 160);
|
|
7223
7227
|
g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.6, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "black"), m.fillStyle = g, m.fillRect(0, 0, 256, 256);
|
|
7224
7228
|
}
|
|
7225
|
-
const
|
|
7226
|
-
if (this.lightMap =
|
|
7229
|
+
const _ = ce.from(p);
|
|
7230
|
+
if (this.lightMap = _, this.enabled !== void 0) {
|
|
7227
7231
|
const g = this.enabled;
|
|
7228
7232
|
this.enabled = !1, setTimeout(() => {
|
|
7229
7233
|
this.enabled = g;
|
|
@@ -7295,7 +7299,7 @@ f({
|
|
|
7295
7299
|
}
|
|
7296
7300
|
]
|
|
7297
7301
|
});
|
|
7298
|
-
const { NoiseFilter:
|
|
7302
|
+
const { NoiseFilter: jt } = w;
|
|
7299
7303
|
f({
|
|
7300
7304
|
id: "noise",
|
|
7301
7305
|
name: "Noise",
|
|
@@ -7303,7 +7307,7 @@ f({
|
|
|
7303
7307
|
description: "Add random noise to the image",
|
|
7304
7308
|
createFilter: (s) => {
|
|
7305
7309
|
try {
|
|
7306
|
-
const e = new
|
|
7310
|
+
const e = new jt({
|
|
7307
7311
|
noise: s.noise || 0.5,
|
|
7308
7312
|
seed: s.seed || Math.random()
|
|
7309
7313
|
});
|
|
@@ -7380,7 +7384,7 @@ f({
|
|
|
7380
7384
|
}
|
|
7381
7385
|
]
|
|
7382
7386
|
});
|
|
7383
|
-
const { OldFilmFilter:
|
|
7387
|
+
const { OldFilmFilter: qt } = b;
|
|
7384
7388
|
f({
|
|
7385
7389
|
id: "old-film",
|
|
7386
7390
|
name: "Old Film",
|
|
@@ -7388,7 +7392,7 @@ f({
|
|
|
7388
7392
|
description: "Apply a vintage film effect with scratches and grain",
|
|
7389
7393
|
createFilter: (s) => {
|
|
7390
7394
|
try {
|
|
7391
|
-
const e = new
|
|
7395
|
+
const e = new qt({
|
|
7392
7396
|
sepia: s.sepia,
|
|
7393
7397
|
noise: s.noise,
|
|
7394
7398
|
noiseSize: s.noiseSize,
|
|
@@ -7569,7 +7573,7 @@ f({
|
|
|
7569
7573
|
}
|
|
7570
7574
|
]
|
|
7571
7575
|
});
|
|
7572
|
-
const { OutlineFilter:
|
|
7576
|
+
const { OutlineFilter: Ht } = b;
|
|
7573
7577
|
f({
|
|
7574
7578
|
id: "outline",
|
|
7575
7579
|
name: "Outline",
|
|
@@ -7579,7 +7583,7 @@ f({
|
|
|
7579
7583
|
try {
|
|
7580
7584
|
let e = s.color;
|
|
7581
7585
|
typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
|
|
7582
|
-
const t = new
|
|
7586
|
+
const t = new Ht({
|
|
7583
7587
|
thickness: s.thickness || 4,
|
|
7584
7588
|
color: e,
|
|
7585
7589
|
alpha: s.alpha || 1,
|
|
@@ -7669,7 +7673,7 @@ f({
|
|
|
7669
7673
|
}
|
|
7670
7674
|
]
|
|
7671
7675
|
});
|
|
7672
|
-
const { PixelateFilter:
|
|
7676
|
+
const { PixelateFilter: $t } = b;
|
|
7673
7677
|
f({
|
|
7674
7678
|
id: "pixelate",
|
|
7675
7679
|
name: "Pixelate",
|
|
@@ -7677,7 +7681,7 @@ f({
|
|
|
7677
7681
|
description: "Create a pixelated or mosaic effect",
|
|
7678
7682
|
createFilter: (s) => {
|
|
7679
7683
|
try {
|
|
7680
|
-
const e = new
|
|
7684
|
+
const e = new $t(
|
|
7681
7685
|
s.useUniform ? Math.max(4, s.size || 10) : [Math.max(4, s.sizeX || 10), Math.max(4, s.sizeY || 10)]
|
|
7682
7686
|
);
|
|
7683
7687
|
return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
|
|
@@ -7760,7 +7764,7 @@ f({
|
|
|
7760
7764
|
}
|
|
7761
7765
|
]
|
|
7762
7766
|
});
|
|
7763
|
-
const { ReflectionFilter:
|
|
7767
|
+
const { ReflectionFilter: Wt } = b;
|
|
7764
7768
|
f({
|
|
7765
7769
|
id: "reflection",
|
|
7766
7770
|
// ID must match what the application expects
|
|
@@ -7777,7 +7781,7 @@ f({
|
|
|
7777
7781
|
waveLength: new Float32Array([s.wavelengthStart ?? 30, s.wavelengthEnd ?? 100]),
|
|
7778
7782
|
alpha: new Float32Array([s.alphaStart ?? 1, s.alphaEnd ?? 1]),
|
|
7779
7783
|
time: s.time ?? 0
|
|
7780
|
-
}, t = new
|
|
7784
|
+
}, t = new Wt(e);
|
|
7781
7785
|
return t._customParams = { ...s }, t.animating = s.animating ?? !1, t.updateUIParam = function(i, r) {
|
|
7782
7786
|
const a = this._customParams || {};
|
|
7783
7787
|
switch (this._customParams = a, a[i] = r, i) {
|
|
@@ -7928,7 +7932,7 @@ f({
|
|
|
7928
7932
|
}
|
|
7929
7933
|
]
|
|
7930
7934
|
});
|
|
7931
|
-
const { ShockwaveFilter:
|
|
7935
|
+
const { ShockwaveFilter: Zt } = b;
|
|
7932
7936
|
f({
|
|
7933
7937
|
id: "shockwave",
|
|
7934
7938
|
// ID must match what the application expects
|
|
@@ -7938,7 +7942,7 @@ f({
|
|
|
7938
7942
|
// Create an instance of the ShockwaveFilter with the provided parameters
|
|
7939
7943
|
createFilter: (s) => {
|
|
7940
7944
|
try {
|
|
7941
|
-
const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new
|
|
7945
|
+
const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new Zt({
|
|
7942
7946
|
center: i,
|
|
7943
7947
|
amplitude: r,
|
|
7944
7948
|
wavelength: a,
|
|
@@ -8080,7 +8084,7 @@ f({
|
|
|
8080
8084
|
}
|
|
8081
8085
|
]
|
|
8082
8086
|
});
|
|
8083
|
-
const { SimplexNoiseFilter:
|
|
8087
|
+
const { SimplexNoiseFilter: Gt } = b;
|
|
8084
8088
|
f({
|
|
8085
8089
|
id: "simplex-noise",
|
|
8086
8090
|
name: "Simplex Noise",
|
|
@@ -8088,7 +8092,7 @@ f({
|
|
|
8088
8092
|
description: "Apply procedural noise to create texture effects",
|
|
8089
8093
|
createFilter: (s) => {
|
|
8090
8094
|
try {
|
|
8091
|
-
const e = s.animating ? 0 : s.offsetZ || 0, t = new
|
|
8095
|
+
const e = s.animating ? 0 : s.offsetZ || 0, t = new Gt({
|
|
8092
8096
|
strength: s.strength,
|
|
8093
8097
|
noiseScale: s.noiseScale,
|
|
8094
8098
|
offsetX: s.offsetX,
|
|
@@ -8235,9 +8239,9 @@ f({
|
|
|
8235
8239
|
}
|
|
8236
8240
|
]
|
|
8237
8241
|
});
|
|
8238
|
-
class
|
|
8242
|
+
class Kt extends w.Filter {
|
|
8239
8243
|
constructor(e) {
|
|
8240
|
-
const t =
|
|
8244
|
+
const t = Se.from({
|
|
8241
8245
|
vertex: `
|
|
8242
8246
|
attribute vec2 aPosition;
|
|
8243
8247
|
varying vec2 vTextureCoord;
|
|
@@ -8346,7 +8350,7 @@ f({
|
|
|
8346
8350
|
description: "Creates a twisting distortion effect around a central point",
|
|
8347
8351
|
createFilter: (s) => {
|
|
8348
8352
|
try {
|
|
8349
|
-
const e = new
|
|
8353
|
+
const e = new Kt({
|
|
8350
8354
|
centerX: s.centerX ?? 0.5,
|
|
8351
8355
|
centerY: s.centerY ?? 0.5,
|
|
8352
8356
|
radius: s.radius ?? 0.25,
|
|
@@ -8416,8 +8420,8 @@ f({
|
|
|
8416
8420
|
}
|
|
8417
8421
|
]
|
|
8418
8422
|
});
|
|
8419
|
-
const { AdjustmentFilter:
|
|
8420
|
-
function
|
|
8423
|
+
const { AdjustmentFilter: Qt } = b;
|
|
8424
|
+
function q(s) {
|
|
8421
8425
|
const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
|
|
8422
8426
|
return [
|
|
8423
8427
|
(e >> 16 & 255) / 255,
|
|
@@ -8425,14 +8429,14 @@ function D(s) {
|
|
|
8425
8429
|
(e & 255) / 255
|
|
8426
8430
|
];
|
|
8427
8431
|
}
|
|
8428
|
-
class
|
|
8432
|
+
class Jt extends Qt {
|
|
8429
8433
|
constructor(e = {}) {
|
|
8430
8434
|
super({
|
|
8431
8435
|
brightness: 1,
|
|
8432
8436
|
contrast: 1,
|
|
8433
8437
|
saturation: 1,
|
|
8434
8438
|
alpha: 1
|
|
8435
|
-
}), this._radius = 0.8, this._strength = 1, this._colorRgb = [0, 0, 0], this._colorValue = "#000000", this._radius = e.radius ?? 0.8, this._strength = e.strength ?? 1, e.color !== void 0 && (typeof e.color == "string" ? (this._colorValue = e.color, this._colorRgb =
|
|
8439
|
+
}), this._radius = 0.8, this._strength = 1, this._colorRgb = [0, 0, 0], this._colorValue = "#000000", this._radius = e.radius ?? 0.8, this._strength = e.strength ?? 1, e.color !== void 0 && (typeof e.color == "string" ? (this._colorValue = e.color, this._colorRgb = q(e.color)) : (this._colorValue = "#" + e.color.toString(16).padStart(6, "0"), this._colorRgb = q(e.color))), this.updateVignette();
|
|
8436
8440
|
}
|
|
8437
8441
|
/**
|
|
8438
8442
|
* Updates the filter parameters to simulate a vignette effect
|
|
@@ -8458,7 +8462,7 @@ class Qt extends Kt {
|
|
|
8458
8462
|
return this._colorValue;
|
|
8459
8463
|
}
|
|
8460
8464
|
set color(e) {
|
|
8461
|
-
typeof e == "string" ? (this._colorValue = e, this._colorRgb =
|
|
8465
|
+
typeof e == "string" ? (this._colorValue = e, this._colorRgb = q(e)) : (this._colorValue = "#" + e.toString(16).padStart(6, "0"), this._colorRgb = q(e)), this.updateVignette();
|
|
8462
8466
|
}
|
|
8463
8467
|
}
|
|
8464
8468
|
f({
|
|
@@ -8468,7 +8472,7 @@ f({
|
|
|
8468
8472
|
description: "Add a classic darkened border effect to the image",
|
|
8469
8473
|
createFilter: (s) => {
|
|
8470
8474
|
try {
|
|
8471
|
-
const e = new
|
|
8475
|
+
const e = new Jt({
|
|
8472
8476
|
radius: s.radius || 0.8,
|
|
8473
8477
|
strength: s.strength || 1,
|
|
8474
8478
|
color: s.color || "#000000"
|
|
@@ -8536,18 +8540,18 @@ function ai(s) {
|
|
|
8536
8540
|
try {
|
|
8537
8541
|
let e = [], t = [];
|
|
8538
8542
|
try {
|
|
8539
|
-
e =
|
|
8543
|
+
e = H(), e.length === 0 && at();
|
|
8540
8544
|
} catch {
|
|
8541
8545
|
}
|
|
8542
8546
|
const i = s == null ? void 0 : s.disabled;
|
|
8543
8547
|
if (Array.isArray(i) && i.length > 0) {
|
|
8544
8548
|
let r = 0;
|
|
8545
8549
|
for (const a of i)
|
|
8546
|
-
|
|
8550
|
+
lt(a) && r++;
|
|
8547
8551
|
r > 0;
|
|
8548
8552
|
}
|
|
8549
8553
|
try {
|
|
8550
|
-
e =
|
|
8554
|
+
e = H(), t = nt();
|
|
8551
8555
|
} catch {
|
|
8552
8556
|
e || (e = []), t || (t = []);
|
|
8553
8557
|
}
|
|
@@ -8558,15 +8562,15 @@ function ai(s) {
|
|
|
8558
8562
|
}
|
|
8559
8563
|
export {
|
|
8560
8564
|
ii as V,
|
|
8561
|
-
|
|
8562
|
-
|
|
8563
|
-
|
|
8564
|
-
|
|
8565
|
+
st as a,
|
|
8566
|
+
ot as b,
|
|
8567
|
+
nt as c,
|
|
8568
|
+
at as d,
|
|
8565
8569
|
si as e,
|
|
8566
|
-
|
|
8567
|
-
|
|
8570
|
+
ct as f,
|
|
8571
|
+
H as g,
|
|
8568
8572
|
ri as h,
|
|
8569
8573
|
ai as i,
|
|
8570
8574
|
f as r
|
|
8571
8575
|
};
|
|
8572
|
-
//# sourceMappingURL=editor-
|
|
8576
|
+
//# sourceMappingURL=editor-COzKP3ld.js.map
|