@anu3ev/fabric-image-editor 0.1.52 → 0.1.54
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/main.js +204 -194
- package/package.json +2 -1
package/dist/main.js
CHANGED
|
@@ -2,40 +2,40 @@ var je = Object.defineProperty, fe = Object.defineProperties;
|
|
|
2
2
|
var be = Object.getOwnPropertyDescriptors;
|
|
3
3
|
var H = Object.getOwnPropertySymbols;
|
|
4
4
|
var ce = Object.prototype.hasOwnProperty, de = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var re = (
|
|
5
|
+
var re = (d, e, t) => e in d ? je(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t, f = (d, e) => {
|
|
6
6
|
for (var t in e || (e = {}))
|
|
7
|
-
ce.call(e, t) && re(
|
|
7
|
+
ce.call(e, t) && re(d, t, e[t]);
|
|
8
8
|
if (H)
|
|
9
9
|
for (var t of H(e))
|
|
10
|
-
de.call(e, t) && re(
|
|
11
|
-
return
|
|
12
|
-
}, le = (
|
|
13
|
-
var Y = (
|
|
10
|
+
de.call(e, t) && re(d, t, e[t]);
|
|
11
|
+
return d;
|
|
12
|
+
}, le = (d, e) => fe(d, be(e));
|
|
13
|
+
var Y = (d, e) => {
|
|
14
14
|
var t = {};
|
|
15
|
-
for (var s in
|
|
16
|
-
ce.call(
|
|
17
|
-
if (
|
|
18
|
-
for (var s of H(
|
|
19
|
-
e.indexOf(s) < 0 && de.call(
|
|
15
|
+
for (var s in d)
|
|
16
|
+
ce.call(d, s) && e.indexOf(s) < 0 && (t[s] = d[s]);
|
|
17
|
+
if (d != null && H)
|
|
18
|
+
for (var s of H(d))
|
|
19
|
+
e.indexOf(s) < 0 && de.call(d, s) && (t[s] = d[s]);
|
|
20
20
|
return t;
|
|
21
21
|
};
|
|
22
|
-
var
|
|
23
|
-
var n = (
|
|
22
|
+
var p = (d, e, t) => new Promise((s, i) => {
|
|
23
|
+
var n = (c) => {
|
|
24
24
|
try {
|
|
25
|
-
o(t.next(
|
|
26
|
-
} catch (
|
|
27
|
-
i(
|
|
25
|
+
o(t.next(c));
|
|
26
|
+
} catch (r) {
|
|
27
|
+
i(r);
|
|
28
28
|
}
|
|
29
|
-
}, a = (
|
|
29
|
+
}, a = (c) => {
|
|
30
30
|
try {
|
|
31
|
-
o(t.throw(
|
|
32
|
-
} catch (
|
|
33
|
-
i(
|
|
31
|
+
o(t.throw(c));
|
|
32
|
+
} catch (r) {
|
|
33
|
+
i(r);
|
|
34
34
|
}
|
|
35
|
-
}, o = (
|
|
36
|
-
o((t = t.apply(
|
|
35
|
+
}, o = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(n, a);
|
|
36
|
+
o((t = t.apply(d, e)).next());
|
|
37
37
|
});
|
|
38
|
-
import { ActiveSelection as v, util as R, controlsUtils as ye, InteractiveFabricObject as
|
|
38
|
+
import { ActiveSelection as v, util as R, controlsUtils as ye, InteractiveFabricObject as Ie, loadSVGFromURL as pe, FabricImage as Z, Point as _, Rect as ve, Circle as Ae, Triangle as Se, Group as X, Canvas as Ce, Pattern as Ne } from "fabric";
|
|
39
39
|
import { create as De } from "jsondiffpatch";
|
|
40
40
|
import Le from "diff-match-patch";
|
|
41
41
|
var we = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", D = function() {
|
|
@@ -75,11 +75,11 @@ class z {
|
|
|
75
75
|
copyObjectsByHotkey: n,
|
|
76
76
|
pasteImageFromClipboard: a,
|
|
77
77
|
undoRedoByHotKeys: o,
|
|
78
|
-
selectAllByHotkey:
|
|
79
|
-
deleteObjectsByHotkey:
|
|
78
|
+
selectAllByHotkey: c,
|
|
79
|
+
deleteObjectsByHotkey: r,
|
|
80
80
|
resetObjectFitByDoubleClick: l
|
|
81
81
|
} = this.options;
|
|
82
|
-
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), i && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), l && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })),
|
|
82
|
+
t && (this.canvas.on("mouse:down", this.handleCanvasDragStartBound), this.canvas.on("mouse:move", this.handleCanvasDraggingBound), this.canvas.on("mouse:up", this.handleCanvasDragEndBound), document.addEventListener("keydown", this.handleSpaceKeyDownBound, { capture: !0 }), document.addEventListener("keyup", this.handleSpaceKeyUpBound, { capture: !0 })), s && this.canvas.on("mouse:wheel", this.handleMouseWheelZoomBound), i && (this.canvas.on("selection:created", this.handleBringToFrontBound), this.canvas.on("selection:updated", this.handleBringToFrontBound)), l && this.canvas.on("mouse:dblclick", this.handleResetObjectFitBound), e && window.addEventListener("resize", this.handleContainerResizeBound, { capture: !0 }), n && document.addEventListener("keydown", this.handleCopyEventBound, { capture: !0 }), a && document.addEventListener("paste", this.handlePasteEventBound, { capture: !0 }), o && (document.addEventListener("keydown", this.handleUndoRedoEventBound, { capture: !0 }), document.addEventListener("keyup", this.handleUndoRedoKeyUpBound, { capture: !0 })), c && document.addEventListener("keydown", this.handleSelectAllEventBound, { capture: !0 }), r && document.addEventListener("keydown", this.handleDeleteObjectsEventBound, { capture: !0 }), this.canvas.on("object:modified", this.handleObjectModifiedHistoryBound), this.canvas.on("object:rotating", this.handleObjectRotatingHistoryBound), this.canvas.on("object:added", this.handleObjectAddedHistoryBound), this.canvas.on("object:removed", this.handleObjectRemovedHistoryBound), this.canvas.on("object:added", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleOverlayUpdateBound), this.canvas.on("selection:created", this.handleLockedSelectionBound), this.canvas.on("selection:updated", this.handleLockedSelectionBound);
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
85
85
|
* При массовом выделении объектов удаляем из него залоченные.
|
|
@@ -160,7 +160,7 @@ class z {
|
|
|
160
160
|
* @param event.code — код клавиши
|
|
161
161
|
*/
|
|
162
162
|
handleUndoRedoEvent(e) {
|
|
163
|
-
return
|
|
163
|
+
return p(this, null, function* () {
|
|
164
164
|
const { ctrlKey: t, metaKey: s, code: i, repeat: n } = e;
|
|
165
165
|
!t && !s || n || !/Mac/i.test(navigator.userAgent) && this.isUndoRedoKeyPressed || (i === "KeyZ" ? (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.undo()) : i === "KeyY" && (e.preventDefault(), this.isUndoRedoKeyPressed = !0, yield this.editor.historyManager.redo()));
|
|
166
166
|
});
|
|
@@ -324,11 +324,11 @@ class Ee {
|
|
|
324
324
|
return this.loaders[e] ? (this.cache.has(e) || this.cache.set(e, this.loaders[e]()), this.cache.get(e)) : Promise.reject(new Error(`Unknown module "${e}"`));
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
|
-
function Oe(
|
|
327
|
+
function Oe(d) {
|
|
328
328
|
return new Worker(
|
|
329
329
|
"" + new URL("assets/worker-Cmho-Hr0.js", import.meta.url).href,
|
|
330
330
|
{
|
|
331
|
-
name:
|
|
331
|
+
name: d == null ? void 0 : d.name
|
|
332
332
|
}
|
|
333
333
|
);
|
|
334
334
|
}
|
|
@@ -379,23 +379,23 @@ class Te {
|
|
|
379
379
|
}
|
|
380
380
|
}
|
|
381
381
|
const C = 12, ke = 2, Q = 8, J = 20, xe = 100, $ = 20, K = 8, Be = 100, q = 32, ee = 1, Ze = "#2B2D33", te = "#3D8BF4", se = "#FFFFFF";
|
|
382
|
-
function W(
|
|
382
|
+
function W(d, e, t, s, i) {
|
|
383
383
|
const n = C, a = ke;
|
|
384
|
-
|
|
384
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-12 / 2, -12 / 2, n, n, a), d.fill(), d.stroke(), d.restore();
|
|
385
385
|
}
|
|
386
|
-
function he(
|
|
386
|
+
function he(d, e, t, s, i) {
|
|
387
387
|
const n = Q, a = J, o = xe;
|
|
388
|
-
|
|
388
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-8 / 2, -20 / 2, n, a, o), d.fill(), d.stroke(), d.restore();
|
|
389
389
|
}
|
|
390
|
-
function ge(
|
|
390
|
+
function ge(d, e, t, s, i) {
|
|
391
391
|
const n = $, a = K, o = Be;
|
|
392
|
-
|
|
392
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = se, d.strokeStyle = te, d.lineWidth = ee, d.beginPath(), d.roundRect(-20 / 2, -8 / 2, n, a, o), d.fill(), d.stroke(), d.restore();
|
|
393
393
|
}
|
|
394
394
|
const Ue = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", ue = new Image();
|
|
395
395
|
ue.src = Ue;
|
|
396
|
-
function ze(
|
|
396
|
+
function ze(d, e, t, s, i) {
|
|
397
397
|
const a = q / 2;
|
|
398
|
-
|
|
398
|
+
d.save(), d.translate(e, t), d.rotate(R.degreesToRadians(i.angle)), d.fillStyle = Ze, d.beginPath(), d.arc(0, 0, a, 0, 2 * Math.PI), d.fill(), d.drawImage(ue, -16 / 2, -16 / 2, a, a), d.restore();
|
|
399
399
|
}
|
|
400
400
|
const Re = {
|
|
401
401
|
// Угловые точки
|
|
@@ -476,11 +476,11 @@ class He {
|
|
|
476
476
|
sizeY: s.sizeY,
|
|
477
477
|
offsetX: s.offsetX,
|
|
478
478
|
offsetY: s.offsetY
|
|
479
|
-
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, a, o,
|
|
479
|
+
}), t === "mtr" && (e[t].cursorStyle = "grab", e[t].mouseDownHandler = (n, a, o, c) => {
|
|
480
480
|
var l;
|
|
481
481
|
(l = a.target.canvas) == null || l.setCursor("grabbing");
|
|
482
482
|
});
|
|
483
|
-
}),
|
|
483
|
+
}), Ie.ownDefaults.controls = e;
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
486
|
const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44NzUgMi41YS42MjUuNjI1IDAgMCAwLS42MjUuNjI0VjYuMjVIMy4xMjVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2MTBjMCAuMzQ1LjI4LjYyNS42MjUuNjI1aDEwYy4zNDUgMCAuNjI1LS4yOC42MjUtLjYyNXYtMy4xMjZoMy4xMjVjLjM0NSAwIC42MjUtLjI4LjYyNS0uNjI1di0xMGEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTEwWm02Ljg3NSAxMGgyLjVWMy43NUg3LjV2Mi41aDUuNjI1Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NS42MjRabS0xMCAzLjc1VjcuNWg4Ljc1djguNzVIMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", We = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMi41IDcuNWMwLS42OS41Ni0xLjI1IDEuMjUtMS4yNWgxMi41Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djguNzVjMCAuNjktLjU2IDEuMjUtMS4yNSAxLjI1SDMuNzVjLS42OSAwLTEuMjUtLjU2LTEuMjUtMS4yNVY3LjVabTEzLjc1IDBIMy43NXY4Ljc1aDEyLjVWNy41WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMS44NzVhMi4xODggMi4xODggMCAwIDAtMi4xODggMi4xODh2Mi44MTJhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyYTMuNDM3IDMuNDM3IDAgMSAxIDYuODc1IDB2Mi44MTNhLjYyNS42MjUgMCAxIDEtMS4yNSAwVjQuMDYyQTIuMTg4IDIuMTg4IDAgMCAwIDEwIDEuODc2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEwIDEyLjgxM2EuOTM3LjkzNyAwIDEgMCAwLTEuODc1LjkzNy45MzcgMCAwIDAgMCAxLjg3NFoiLz48L3N2Zz4=", _e = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2LjI1IDYuMjVINy41VjQuMzc1YTIuNSAyLjUgMCAwIDEgMi41LTIuNWMxLjIgMCAyLjI4MS44NiAyLjUxMiAyYS42MjUuNjI1IDAgMCAwIDEuMjI2LS4yNWMtLjM1NC0xLjczOC0xLjkyNS0zLTMuNzM4LTNhMy43NTQgMy43NTQgMCAwIDAtMy43NSAzLjc1VjYuMjVoLTIuNUExLjI1IDEuMjUgMCAwIDAgMi41IDcuNXY4Ljc1YTEuMjUgMS4yNSAwIDAgMCAxLjI1IDEuMjVoMTIuNWExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjcuNWExLjI1IDEuMjUgMCAwIDAtMS4yNS0xLjI1Wm0wIDEwSDMuNzVWNy41aDEyLjV2OC43NVptLTUuMzEzLTQuMzc1YS45MzcuOTM3IDAgMSAxLTEuODc0IDAgLjkzNy45MzcgMCAwIDEgMS44NzQgMFoiLz48L3N2Zz4K", Pe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIuNSA4LjEyNSAxMCAxMi41bDcuNS00LjM3NUwxMCAzLjc1IDIuNSA4LjEyNVoiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjY4NSAzLjIxYS42MjUuNjI1IDAgMCAxIC42MyAwbDcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOGw3LjUtNC4zNzVaTTMuNzQgOC4xMjUgMTAgMTEuNzc2bDYuMjYtMy42NTFMMTAgNC40NzQgMy43NCA4LjEyNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA5LjQ2YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDExLjc3NmwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA5LjQ2Wm0tMS42NiAyLjQxNUwxMCAxNS41MjZsNi4yNi0zLjY1MS0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNi0xLjk3NSAxLjE1MVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", Fe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMy4yMWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDguMTI1IDEwIDExLjc3Nmw2LjI2LTMuNjUxTDEwIDQuNDc0IDMuNzQgOC4xMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjcxNCAxMCAxMCAxMi41bDQuMjg2LTIuNSAzLjIxNCAxLjg3NUwxMCAxNi4yNWwtNy41LTQuMzc1TDUuNzE0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDkuNDZhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgMTEuNzc2bDMuOTctMi4zMTZhLjYyNS42MjUgMCAwIDEgLjYzIDBsMy4yMTUgMS44NzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhMNS40IDkuNDZabS0xLjY2IDIuNDE1TDEwIDE1LjUyNmw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2LTEuOTc1IDEuMTUxWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Ve = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0ibTIuNSA2LjI1IDcuNSA0LjM3NSA3LjUtNC4zNzVMMTAgMS44NzUgMi41IDYuMjVaIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS42ODUgMS4zMzVhLjYyNS42MjUgMCAwIDEgLjYzIDBsNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4bDcuNS00LjM3NVpNMy43NCA2LjI1IDEwIDkuOTAxbDYuMjYtMy42NTFMMTAgMi41OTkgMy43NCA2LjI1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS40IDExLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCAxMy42NTFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgMTEuMzM1Wk0zLjc0IDEzLjc1IDEwIDE3LjQwMWw2LjI2LTMuNjUxLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTMuNzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgNy41ODVhLjYyNS42MjUgMCAwIDEgLjYzIDBMMTAgOS45MDFsMy45Ny0yLjMxNmEuNjI1LjYyNSAwIDAgMSAuNjMgMGwzLjIxNSAxLjg3NWEuNjI1LjYyNSAwIDAgMSAwIDEuMDhsLTcuNSA0LjM3NWEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtNy41LTQuMzc1YS42MjUuNjI1IDAgMCAxIDAtMS4wOEw1LjQgNy41ODVaTTMuNzQgMTAgMTAgMTMuNjUxIDE2LjI2IDEwbC0xLjk3NC0xLjE1MS0zLjk3MSAyLjMxNmEuNjI1LjYyNSAwIDAgMS0uNjMgMGwtMy45Ny0yLjMxNkwzLjc0IDEwWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+", Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS45NiAxMy40MzVhLjYyNS42MjUgMCAwIDEgLjg1NS0uMjI1TDEwIDE3LjQwMWw3LjE4NS00LjE5YS42MjUuNjI1IDAgMCAxIC42MyAxLjA3OWwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEtLjIyNS0uODU1Wk05LjY4NSAxLjMzNWEuNjI1LjYyNSAwIDAgMSAuNjMgMGw3LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEgMCAxLjA4bC03LjUgNC4zNzVhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTcuNS00LjM3NWEuNjI1LjYyNSAwIDAgMSAwLTEuMDhsNy41LTQuMzc1Wk0zLjc0IDYuMjUgMTAgOS45MDFsNi4yNi0zLjY1MUwxMCAyLjU5OSAzLjc0IDYuMjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im01LjcxNCAxMS44NzUgNC4yODYgMi41IDQuMjg2LTIuNUwxNy41IDEzLjc1IDEwIDE4LjEyNSAyLjUgMTMuNzVsMy4yMTQtMS44NzVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjQgMTEuMzM1YS42MjUuNjI1IDAgMCAxIC42MyAwTDEwIDEzLjY1MWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCAxMS4zMzVaTTMuNzQgMTMuNzUgMTAgMTcuNDAxbDYuMjYtMy42NTEtMS45NzQtMS4xNTEtMy45NzEgMi4zMTZhLjYyNS42MjUgMCAwIDEtLjYzIDBsLTMuOTctMi4zMTZMMy43NCAxMy43NVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNCA3LjU4NWEuNjI1LjYyNSAwIDAgMSAuNjMgMEwxMCA5LjkwMWwzLjk3LTIuMzE2YS42MjUuNjI1IDAgMCAxIC42MyAwbDMuMjE1IDEuODc1YS42MjUuNjI1IDAgMCAxIDAgMS4wOGwtNy41IDQuMzc1YS42MjUuNjI1IDAgMCAxLS42MyAwbC03LjUtNC4zNzVhLjYyNS42MjUgMCAwIDEgMC0xLjA4TDUuNCA3LjU4NVpNMy43NCAxMCAxMCAxMy42NTEgMTYuMjYgMTBsLTEuOTc0LTEuMTUxLTMuOTcxIDIuMzE2YS42MjUuNjI1IDAgMCAxLS42MyAwbC0zLjk3LTIuMzE2TDMuNzQgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=", Xe = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0VDNEU0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4xMjUgMS4yNUExLjg3NSAxLjg3NSAwIDAgMCA2LjI1IDMuMTI1di42MjVIMy4xMjVhLjYyNS42MjUgMCAwIDAgMCAxLjI1aC42MjV2MTEuMjVBMS4yNSAxLjI1IDAgMCAwIDUgMTcuNWgxMGExLjI1IDEuMjUgMCAwIDAgMS4yNS0xLjI1VjVoLjYyNWEuNjI1LjYyNSAwIDAgMCAwLTEuMjVIMTMuNzV2LS42MjVhMS44NzUgMS44NzUgMCAwIDAtMS44NzUtMS44NzVoLTMuNzVabTQuMzc1IDIuNXYtLjYyNWEuNjI1LjYyNSAwIDAgMC0uNjI1LS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDAtLjYyNS42MjV2LjYyNWg1Wk01IDE2LjI1VjVoMTB2MTEuMjVINVpNOC4xMjUgNy41Yy4zNDUgMCAuNjI1LjI4LjYyNS42MjV2NWEuNjI1LjYyNSAwIDEgMS0xLjI1IDB2LTVjMC0uMzQ1LjI4LS42MjUuNjI1LS42MjVabTQuMzc1IDUuNjI1di01YS42MjUuNjI1IDAgMCAwLTEuMjUgMHY1YS42MjUuNjI1IDAgMSAwIDEuMjUgMFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==", U = {
|
|
@@ -560,29 +560,29 @@ const Ye = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMj
|
|
|
560
560
|
sendBackwards: Fe
|
|
561
561
|
},
|
|
562
562
|
handlers: {
|
|
563
|
-
copyPaste: (
|
|
564
|
-
yield
|
|
563
|
+
copyPaste: (d) => p(void 0, null, function* () {
|
|
564
|
+
yield d.clipboardManager.copy(), yield d.clipboardManager.paste();
|
|
565
565
|
}),
|
|
566
|
-
delete: (
|
|
567
|
-
|
|
566
|
+
delete: (d) => {
|
|
567
|
+
d.deletionManager.deleteSelectedObjects();
|
|
568
568
|
},
|
|
569
|
-
lock: (
|
|
570
|
-
|
|
569
|
+
lock: (d) => {
|
|
570
|
+
d.objectLockManager.lockObject();
|
|
571
571
|
},
|
|
572
|
-
unlock: (
|
|
573
|
-
|
|
572
|
+
unlock: (d) => {
|
|
573
|
+
d.objectLockManager.unlockObject();
|
|
574
574
|
},
|
|
575
|
-
bringForward: (
|
|
576
|
-
|
|
575
|
+
bringForward: (d) => {
|
|
576
|
+
d.layerManager.bringForward();
|
|
577
577
|
},
|
|
578
|
-
bringToFront: (
|
|
579
|
-
|
|
578
|
+
bringToFront: (d) => {
|
|
579
|
+
d.layerManager.bringToFront();
|
|
580
580
|
},
|
|
581
|
-
sendToBack: (
|
|
582
|
-
|
|
581
|
+
sendToBack: (d) => {
|
|
582
|
+
d.layerManager.sendToBack();
|
|
583
583
|
},
|
|
584
|
-
sendBackwards: (
|
|
585
|
-
|
|
584
|
+
sendBackwards: (d) => {
|
|
585
|
+
d.layerManager.sendBackwards();
|
|
586
586
|
}
|
|
587
587
|
}
|
|
588
588
|
};
|
|
@@ -624,11 +624,11 @@ class Qe {
|
|
|
624
624
|
_renderButtons(e) {
|
|
625
625
|
this.el.innerHTML = "";
|
|
626
626
|
for (const t of e) {
|
|
627
|
-
const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config,
|
|
628
|
-
|
|
629
|
-
var
|
|
630
|
-
return (
|
|
631
|
-
}, this.el.appendChild(
|
|
627
|
+
const { name: s, handle: i } = t, { icons: n = {}, btnStyle: a, handlers: o = {} } = this.config, c = document.createElement("button");
|
|
628
|
+
c.innerHTML = n[i] ? `<img src="${n[i]}" title="${s}" />` : s, Object.assign(c.style, a), c.onclick = () => {
|
|
629
|
+
var r;
|
|
630
|
+
return (r = o[i]) == null ? void 0 : r.call(o, this.editor);
|
|
631
|
+
}, this.el.appendChild(c);
|
|
632
632
|
}
|
|
633
633
|
}
|
|
634
634
|
/**
|
|
@@ -686,7 +686,7 @@ class Qe {
|
|
|
686
686
|
}
|
|
687
687
|
const { el: t, config: s, canvas: i } = this;
|
|
688
688
|
e.setCoords();
|
|
689
|
-
const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x:
|
|
689
|
+
const n = i.getZoom(), [, , , , a, o] = i.viewportTransform, { x: c } = e.getCenterPoint(), { top: r, height: l } = e.getBoundingRect(), g = c * n + a - t.offsetWidth / 2, u = s.offsetTop || 0, m = (r + l) * n + o + u;
|
|
690
690
|
Object.assign(t.style, {
|
|
691
691
|
left: `${g}px`,
|
|
692
692
|
top: `${m}px`,
|
|
@@ -810,15 +810,15 @@ class Je {
|
|
|
810
810
|
* @fires editor:history-state-loaded
|
|
811
811
|
*/
|
|
812
812
|
loadStateFromFullState(e) {
|
|
813
|
-
return
|
|
813
|
+
return p(this, null, function* () {
|
|
814
814
|
if (!e) return;
|
|
815
815
|
console.log("loadStateFromFullState fullState", e);
|
|
816
816
|
const { canvas: t, canvasManager: s, interactionBlocker: i } = this.editor, { width: n, height: a } = t;
|
|
817
817
|
yield t.loadFromJSON(e);
|
|
818
|
-
const o = t.getObjects().find((
|
|
818
|
+
const o = t.getObjects().find((r) => r.id === "montage-area");
|
|
819
819
|
o && (this.editor.montageArea = o, (n !== e.width || a !== e.height) && s.updateCanvasAndFitObjects());
|
|
820
|
-
const
|
|
821
|
-
|
|
820
|
+
const c = t.getObjects().find((r) => r.id === "overlay-mask");
|
|
821
|
+
c && (i.overlayMask = c, i.overlayMask.visible = !1), t.renderAll(), t.fire("editor:history-state-loaded", {
|
|
822
822
|
fullState: e,
|
|
823
823
|
currentIndex: this.currentIndex,
|
|
824
824
|
totalChangesCount: this.totalChangesCount,
|
|
@@ -833,7 +833,7 @@ class Je {
|
|
|
833
833
|
* @fires editor:undo
|
|
834
834
|
*/
|
|
835
835
|
undo() {
|
|
836
|
-
return
|
|
836
|
+
return p(this, null, function* () {
|
|
837
837
|
if (!this.skipHistory) {
|
|
838
838
|
if (this.currentIndex <= 0) {
|
|
839
839
|
console.log("Нет предыдущих состояний для отмены.");
|
|
@@ -870,7 +870,7 @@ class Je {
|
|
|
870
870
|
* @fires editor:redo
|
|
871
871
|
*/
|
|
872
872
|
redo() {
|
|
873
|
-
return
|
|
873
|
+
return p(this, null, function* () {
|
|
874
874
|
if (!this.skipHistory) {
|
|
875
875
|
if (this.currentIndex >= this.patches.length) {
|
|
876
876
|
console.log("Нет состояний для повтора.");
|
|
@@ -921,17 +921,17 @@ class N {
|
|
|
921
921
|
* @returns возвращает Promise с объектом изображения или null в случае ошибки
|
|
922
922
|
*/
|
|
923
923
|
importImage(e) {
|
|
924
|
-
return
|
|
924
|
+
return p(this, null, function* () {
|
|
925
925
|
const {
|
|
926
926
|
source: t,
|
|
927
927
|
scale: s = `image-${this.options.scaleType}`,
|
|
928
928
|
withoutSave: i = !1
|
|
929
929
|
} = e;
|
|
930
930
|
if (!t) return null;
|
|
931
|
-
const { canvas: n, montageArea: a, transformManager: o, historyManager:
|
|
931
|
+
const { canvas: n, montageArea: a, transformManager: o, historyManager: c, errorManager: r } = this.editor, l = yield this.getContentType(t), h = N.getFormatFromContentType(l), { acceptContentTypes: g, acceptFormats: u } = this;
|
|
932
932
|
if (!this.isAllowedContentType(l)) {
|
|
933
933
|
const m = `Неверный contentType для изображения: ${l}. Ожидается один из: ${this.acceptContentTypes.join(", ")}.`;
|
|
934
|
-
return
|
|
934
|
+
return r.emitError({
|
|
935
935
|
origin: "ImageManager",
|
|
936
936
|
method: "importImage",
|
|
937
937
|
code: "INVALID_CONTENT_TYPE",
|
|
@@ -939,7 +939,7 @@ class N {
|
|
|
939
939
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
940
940
|
}), null;
|
|
941
941
|
}
|
|
942
|
-
|
|
942
|
+
c.suspendHistory();
|
|
943
943
|
try {
|
|
944
944
|
let m, M;
|
|
945
945
|
if (t instanceof File)
|
|
@@ -948,7 +948,7 @@ class N {
|
|
|
948
948
|
const A = yield (yield fetch(t, { mode: "cors" })).blob();
|
|
949
949
|
m = URL.createObjectURL(A);
|
|
950
950
|
} else
|
|
951
|
-
return
|
|
951
|
+
return r.emitError({
|
|
952
952
|
origin: "ImageManager",
|
|
953
953
|
method: "importImage",
|
|
954
954
|
code: "INVALID_SOURCE_TYPE",
|
|
@@ -956,15 +956,15 @@ class N {
|
|
|
956
956
|
data: { source: t, format: h, contentType: l, acceptContentTypes: g, acceptFormats: u }
|
|
957
957
|
}), null;
|
|
958
958
|
if (this._createdBlobUrls.push(m), h === "svg") {
|
|
959
|
-
const
|
|
960
|
-
M = R.groupSVGElements(
|
|
959
|
+
const I = yield pe(m);
|
|
960
|
+
M = R.groupSVGElements(I.objects, I.options);
|
|
961
961
|
} else
|
|
962
962
|
M = yield Z.fromURL(m, { crossOrigin: "anonymous" });
|
|
963
963
|
const { width: j, height: b } = M;
|
|
964
964
|
if (M instanceof Z) {
|
|
965
|
-
const
|
|
965
|
+
const I = M.getElement();
|
|
966
966
|
let A = "";
|
|
967
|
-
if (
|
|
967
|
+
if (I instanceof HTMLImageElement ? A = I.src : I instanceof HTMLCanvasElement && (A = I.toDataURL()), b > T || j > O) {
|
|
968
968
|
const w = yield this.resizeImageToBoundaries(A, "max"), E = URL.createObjectURL(w);
|
|
969
969
|
this._createdBlobUrls.push(E), M = yield Z.fromURL(E, { crossOrigin: "anonymous" });
|
|
970
970
|
} else if (b < B || j < x) {
|
|
@@ -975,10 +975,10 @@ class N {
|
|
|
975
975
|
if (M.set("id", `${M.type}-${D()}`), M.set("format", h), s === "scale-montage")
|
|
976
976
|
this.editor.canvasManager.scaleMontageAreaToImage({ object: M, withoutSave: !0 });
|
|
977
977
|
else {
|
|
978
|
-
const { width:
|
|
979
|
-
s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (j >
|
|
978
|
+
const { width: I, height: A } = a, w = this.calculateScaleFactor({ imageObject: M, scaleType: s });
|
|
979
|
+
s === "image-contain" && w < 1 ? o.fitObject({ object: M, type: "contain", withoutSave: !0 }) : s === "image-cover" && (j > I || b > A) && o.fitObject({ object: M, type: "cover", withoutSave: !0 });
|
|
980
980
|
}
|
|
981
|
-
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(),
|
|
981
|
+
n.add(M), n.centerObject(M), n.setActiveObject(M), n.renderAll(), c.resumeHistory(), i || c.saveState();
|
|
982
982
|
const L = {
|
|
983
983
|
image: M,
|
|
984
984
|
format: h,
|
|
@@ -989,13 +989,13 @@ class N {
|
|
|
989
989
|
};
|
|
990
990
|
return n.fire("editor:image-imported", L), L;
|
|
991
991
|
} catch (m) {
|
|
992
|
-
return
|
|
992
|
+
return r.emitError({
|
|
993
993
|
origin: "ImageManager",
|
|
994
994
|
method: "importImage",
|
|
995
995
|
code: "IMPORT_FAILED",
|
|
996
996
|
message: `Ошибка импорта изображения: ${m.message}`,
|
|
997
997
|
data: { source: t, format: h, contentType: l, scale: s, withoutSave: i }
|
|
998
|
-
}),
|
|
998
|
+
}), c.resumeHistory(), null;
|
|
999
999
|
}
|
|
1000
1000
|
});
|
|
1001
1001
|
}
|
|
@@ -1008,7 +1008,7 @@ class N {
|
|
|
1008
1008
|
* @returns возвращает Promise с Blob-объектом уменьшенного изображения
|
|
1009
1009
|
*/
|
|
1010
1010
|
resizeImageToBoundaries(e, t = "max") {
|
|
1011
|
-
return
|
|
1011
|
+
return p(this, null, function* () {
|
|
1012
1012
|
let s = `Размер изображения больше максимального размера канваса, поэтому оно будет уменьшено до максимальных размеров c сохранением пропорций: ${O}x${T}`;
|
|
1013
1013
|
t === "min" && (s = `Размер изображения меньше минимального размера канваса, поэтому оно будет увеличено до минимальных размеров c сохранением пропорций: ${x}x${B}`);
|
|
1014
1014
|
const i = {
|
|
@@ -1040,15 +1040,15 @@ class N {
|
|
|
1040
1040
|
* @fires editor:canvas-exported
|
|
1041
1041
|
*/
|
|
1042
1042
|
exportCanvasAsImageFile() {
|
|
1043
|
-
return
|
|
1043
|
+
return p(this, arguments, function* (e = {}) {
|
|
1044
1044
|
const {
|
|
1045
1045
|
fileName: t = "image.png",
|
|
1046
1046
|
contentType: s = "image/png",
|
|
1047
1047
|
exportAsBase64: i = !1,
|
|
1048
1048
|
exportAsBlob: n = !1
|
|
1049
|
-
} = e, { canvas: a, montageArea: o, workerManager:
|
|
1049
|
+
} = e, { canvas: a, montageArea: o, workerManager: c } = this.editor;
|
|
1050
1050
|
try {
|
|
1051
|
-
const
|
|
1051
|
+
const r = s === "application/pdf", l = r ? "image/jpg" : s, h = N.getFormatFromContentType(l);
|
|
1052
1052
|
o.setCoords();
|
|
1053
1053
|
const { left: g, top: u, width: m, height: M } = o.getBoundingRect(), j = yield a.clone(["id", "format", "locked"]);
|
|
1054
1054
|
["image/jpg", "image/jpeg"].includes(l) && (j.backgroundColor = "#ffffff");
|
|
@@ -1070,26 +1070,26 @@ class N {
|
|
|
1070
1070
|
};
|
|
1071
1071
|
return a.fire("editor:canvas-exported", S), S;
|
|
1072
1072
|
}
|
|
1073
|
-
const
|
|
1073
|
+
const I = yield new Promise((y, k) => {
|
|
1074
1074
|
j.getElement().toBlob((S) => {
|
|
1075
1075
|
S ? y(S) : k(new Error("Failed to create Blob from canvas"));
|
|
1076
1076
|
});
|
|
1077
1077
|
});
|
|
1078
1078
|
if (j.dispose(), n) {
|
|
1079
1079
|
const y = {
|
|
1080
|
-
image:
|
|
1080
|
+
image: I,
|
|
1081
1081
|
format: h,
|
|
1082
1082
|
contentType: l,
|
|
1083
1083
|
fileName: t
|
|
1084
1084
|
};
|
|
1085
1085
|
return a.fire("editor:canvas-exported", y), y;
|
|
1086
1086
|
}
|
|
1087
|
-
const A = yield createImageBitmap(
|
|
1087
|
+
const A = yield createImageBitmap(I), w = yield c.post(
|
|
1088
1088
|
"toDataURL",
|
|
1089
1089
|
{ format: h, quality: 1, bitmap: A },
|
|
1090
1090
|
[A]
|
|
1091
1091
|
);
|
|
1092
|
-
if (
|
|
1092
|
+
if (r) {
|
|
1093
1093
|
const k = m * 0.264583, S = M * 0.264583, Me = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, G = new Me({
|
|
1094
1094
|
orientation: k > S ? "landscape" : "portrait",
|
|
1095
1095
|
unit: "mm",
|
|
@@ -1122,18 +1122,18 @@ class N {
|
|
|
1122
1122
|
return a.fire("editor:canvas-exported", y), y;
|
|
1123
1123
|
}
|
|
1124
1124
|
const E = h === "svg" && !L ? t.replace(/\.[^/.]+$/, ".png") : t, ne = {
|
|
1125
|
-
image: new File([
|
|
1125
|
+
image: new File([I], E, { type: l }),
|
|
1126
1126
|
format: h,
|
|
1127
1127
|
contentType: l,
|
|
1128
1128
|
fileName: E
|
|
1129
1129
|
};
|
|
1130
1130
|
return a.fire("editor:canvas-exported", ne), ne;
|
|
1131
|
-
} catch (
|
|
1131
|
+
} catch (r) {
|
|
1132
1132
|
return this.editor.errorManager.emitError({
|
|
1133
1133
|
origin: "ImageManager",
|
|
1134
1134
|
method: "exportCanvasAsImageFile",
|
|
1135
1135
|
code: "IMAGE_EXPORT_FAILED",
|
|
1136
|
-
message: `Ошибка экспорта изображения: ${
|
|
1136
|
+
message: `Ошибка экспорта изображения: ${r.message}`,
|
|
1137
1137
|
data: { contentType: s, fileName: t, exportAsBase64: i, exportAsBlob: n }
|
|
1138
1138
|
}), null;
|
|
1139
1139
|
}
|
|
@@ -1151,15 +1151,15 @@ class N {
|
|
|
1151
1151
|
* @fires editor:object-exported
|
|
1152
1152
|
*/
|
|
1153
1153
|
exportObjectAsImageFile() {
|
|
1154
|
-
return
|
|
1154
|
+
return p(this, arguments, function* (e = {}) {
|
|
1155
1155
|
const {
|
|
1156
1156
|
object: t,
|
|
1157
1157
|
fileName: s = "image.png",
|
|
1158
1158
|
contentType: i = "image/png",
|
|
1159
1159
|
exportAsBase64: n = !1,
|
|
1160
1160
|
exportAsBlob: a = !1
|
|
1161
|
-
} = e, { canvas: o, workerManager:
|
|
1162
|
-
if (!
|
|
1161
|
+
} = e, { canvas: o, workerManager: c } = this.editor, r = t || o.getActiveObject();
|
|
1162
|
+
if (!r)
|
|
1163
1163
|
return this.editor.errorManager.emitError({
|
|
1164
1164
|
origin: "ImageManager",
|
|
1165
1165
|
method: "exportObjectAsImageFile",
|
|
@@ -1170,12 +1170,12 @@ class N {
|
|
|
1170
1170
|
try {
|
|
1171
1171
|
const l = N.getFormatFromContentType(i);
|
|
1172
1172
|
if (l === "svg") {
|
|
1173
|
-
const M =
|
|
1173
|
+
const M = r.toSVG(), j = N._exportSVGStringAsFile(M, {
|
|
1174
1174
|
exportAsBase64: n,
|
|
1175
1175
|
exportAsBlob: a,
|
|
1176
1176
|
fileName: s
|
|
1177
1177
|
}), b = {
|
|
1178
|
-
object:
|
|
1178
|
+
object: r,
|
|
1179
1179
|
image: j,
|
|
1180
1180
|
format: l,
|
|
1181
1181
|
contentType: "image/svg+xml",
|
|
@@ -1183,8 +1183,8 @@ class N {
|
|
|
1183
1183
|
};
|
|
1184
1184
|
return o.fire("editor:object-exported", b), b;
|
|
1185
1185
|
}
|
|
1186
|
-
if (n &&
|
|
1187
|
-
const M = yield createImageBitmap(
|
|
1186
|
+
if (n && r instanceof Z) {
|
|
1187
|
+
const M = yield createImageBitmap(r.getElement()), j = yield c.post(
|
|
1188
1188
|
"toDataURL",
|
|
1189
1189
|
{
|
|
1190
1190
|
format: l,
|
|
@@ -1193,7 +1193,7 @@ class N {
|
|
|
1193
1193
|
},
|
|
1194
1194
|
[M]
|
|
1195
1195
|
), b = {
|
|
1196
|
-
object:
|
|
1196
|
+
object: r,
|
|
1197
1197
|
image: j,
|
|
1198
1198
|
format: l,
|
|
1199
1199
|
contentType: i,
|
|
@@ -1201,14 +1201,14 @@ class N {
|
|
|
1201
1201
|
};
|
|
1202
1202
|
return o.fire("editor:object-exported", b), b;
|
|
1203
1203
|
}
|
|
1204
|
-
const h =
|
|
1204
|
+
const h = r.toCanvasElement(), g = yield new Promise((M, j) => {
|
|
1205
1205
|
h.toBlob((b) => {
|
|
1206
1206
|
b ? M(b) : j(new Error("Failed to create Blob from canvas"));
|
|
1207
1207
|
});
|
|
1208
1208
|
});
|
|
1209
1209
|
if (a) {
|
|
1210
1210
|
const M = {
|
|
1211
|
-
object:
|
|
1211
|
+
object: r,
|
|
1212
1212
|
image: g,
|
|
1213
1213
|
format: l,
|
|
1214
1214
|
contentType: i,
|
|
@@ -1217,7 +1217,7 @@ class N {
|
|
|
1217
1217
|
return o.fire("editor:object-exported", M), M;
|
|
1218
1218
|
}
|
|
1219
1219
|
const u = new File([g], s, { type: i }), m = {
|
|
1220
|
-
object:
|
|
1220
|
+
object: r,
|
|
1221
1221
|
image: u,
|
|
1222
1222
|
format: l,
|
|
1223
1223
|
contentType: i,
|
|
@@ -1262,7 +1262,7 @@ class N {
|
|
|
1262
1262
|
* @public
|
|
1263
1263
|
*/
|
|
1264
1264
|
getContentType(e) {
|
|
1265
|
-
return
|
|
1265
|
+
return p(this, null, function* () {
|
|
1266
1266
|
return typeof e == "string" ? this.getContentTypeFromUrl(e) : e.type || "application/octet-stream";
|
|
1267
1267
|
});
|
|
1268
1268
|
}
|
|
@@ -1273,7 +1273,7 @@ class N {
|
|
|
1273
1273
|
* @public
|
|
1274
1274
|
*/
|
|
1275
1275
|
getContentTypeFromUrl(e) {
|
|
1276
|
-
return
|
|
1276
|
+
return p(this, null, function* () {
|
|
1277
1277
|
if (e.startsWith("data:")) {
|
|
1278
1278
|
const t = e.match(/^data:([^;]+)/);
|
|
1279
1279
|
return t ? t[1] : "application/octet-stream";
|
|
@@ -1376,9 +1376,9 @@ class tt {
|
|
|
1376
1376
|
canvas: n,
|
|
1377
1377
|
montageArea: a,
|
|
1378
1378
|
options: { canvasBackstoreWidth: o }
|
|
1379
|
-
} = this.editor, { width:
|
|
1379
|
+
} = this.editor, { width: c, height: r } = a, l = Math.max(Math.min(Number(e), O), x);
|
|
1380
1380
|
if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreWidth(Number(o)) : this.setCanvasBackstoreWidth(l), a.set({ width: l }), (m = n.clipPath) == null || m.set({ width: l }), t) {
|
|
1381
|
-
const M = l /
|
|
1381
|
+
const M = l / c, j = r * M;
|
|
1382
1382
|
this.setResolutionHeight(j);
|
|
1383
1383
|
return;
|
|
1384
1384
|
}
|
|
@@ -1406,9 +1406,9 @@ class tt {
|
|
|
1406
1406
|
canvas: n,
|
|
1407
1407
|
montageArea: a,
|
|
1408
1408
|
options: { canvasBackstoreHeight: o }
|
|
1409
|
-
} = this.editor, { width:
|
|
1409
|
+
} = this.editor, { width: c, height: r } = a, l = Math.max(Math.min(Number(e), T), B);
|
|
1410
1410
|
if (!o || o === "auto" || i ? this.adaptCanvasToContainer() : o ? this.setCanvasBackstoreHeight(Number(o)) : this.setCanvasBackstoreHeight(l), a.set({ height: l }), (m = n.clipPath) == null || m.set({ height: l }), t) {
|
|
1411
|
-
const M = l /
|
|
1411
|
+
const M = l / r, j = c * M;
|
|
1412
1412
|
this.setResolutionWidth(j);
|
|
1413
1413
|
return;
|
|
1414
1414
|
}
|
|
@@ -1425,12 +1425,12 @@ class tt {
|
|
|
1425
1425
|
* и устанавливает правильный viewportTransform.
|
|
1426
1426
|
*/
|
|
1427
1427
|
centerMontageArea() {
|
|
1428
|
-
var
|
|
1428
|
+
var c;
|
|
1429
1429
|
const { canvas: e, montageArea: t } = this.editor, s = e.getWidth(), i = e.getHeight(), n = e.getZoom(), a = new _(s / 2, i / 2);
|
|
1430
1430
|
t.set({
|
|
1431
1431
|
left: s / 2,
|
|
1432
1432
|
top: i / 2
|
|
1433
|
-
}), (
|
|
1433
|
+
}), (c = e.clipPath) == null || c.set({
|
|
1434
1434
|
left: s / 2,
|
|
1435
1435
|
top: i / 2
|
|
1436
1436
|
}), e.renderAll();
|
|
@@ -1451,8 +1451,8 @@ class tt {
|
|
|
1451
1451
|
code: "NO_ACTIVE_OBJECT",
|
|
1452
1452
|
message: "Не выбран объект для получения координат"
|
|
1453
1453
|
}), { left: 0, top: 0 };
|
|
1454
|
-
const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2,
|
|
1455
|
-
return { left: o, top:
|
|
1454
|
+
const { width: i, height: n } = s, a = t.getZoom(), o = (i - i * a) / 2, c = (n - n * a) / 2;
|
|
1455
|
+
return { left: o, top: c };
|
|
1456
1456
|
}
|
|
1457
1457
|
/**
|
|
1458
1458
|
* Устанавливаем ширину канваса в backstore (для экспорта)
|
|
@@ -1514,9 +1514,9 @@ class tt {
|
|
|
1514
1514
|
updateCssDimensionsForZoom(e) {
|
|
1515
1515
|
const { canvas: t, montageArea: s } = this.editor, i = s.width * e, n = s.height * e, a = t.wrapperEl.parentNode;
|
|
1516
1516
|
if (!(a instanceof HTMLElement)) return;
|
|
1517
|
-
const o = i <= a.clientWidth ? "100%" : i,
|
|
1517
|
+
const o = i <= a.clientWidth ? "100%" : i, c = n <= a.clientHeight ? "100%" : n;
|
|
1518
1518
|
t.setDimensions(
|
|
1519
|
-
{ width: o, height:
|
|
1519
|
+
{ width: o, height: c },
|
|
1520
1520
|
{ cssOnly: !0 }
|
|
1521
1521
|
);
|
|
1522
1522
|
}
|
|
@@ -1619,15 +1619,15 @@ class tt {
|
|
|
1619
1619
|
}
|
|
1620
1620
|
const o = t === "width" ? "width" : "height";
|
|
1621
1621
|
if (typeof s == "string") {
|
|
1622
|
-
a.forEach((
|
|
1623
|
-
|
|
1622
|
+
a.forEach((r) => {
|
|
1623
|
+
r.style[o] = s;
|
|
1624
1624
|
});
|
|
1625
1625
|
return;
|
|
1626
1626
|
}
|
|
1627
1627
|
if (isNaN(s)) return;
|
|
1628
|
-
const
|
|
1629
|
-
a.forEach((
|
|
1630
|
-
|
|
1628
|
+
const c = `${s}px`;
|
|
1629
|
+
a.forEach((r) => {
|
|
1630
|
+
r.style[o] = c;
|
|
1631
1631
|
}), i.fire(`editor:display-${e}-${o}-changed`, {
|
|
1632
1632
|
element: e,
|
|
1633
1633
|
value: s
|
|
@@ -1648,11 +1648,11 @@ class tt {
|
|
|
1648
1648
|
transformManager: a,
|
|
1649
1649
|
options: {
|
|
1650
1650
|
montageAreaWidth: o,
|
|
1651
|
-
montageAreaHeight:
|
|
1651
|
+
montageAreaHeight: c
|
|
1652
1652
|
}
|
|
1653
|
-
} = this.editor,
|
|
1654
|
-
if (!
|
|
1655
|
-
const { width: l, height: h } =
|
|
1653
|
+
} = this.editor, r = e || i.getActiveObject();
|
|
1654
|
+
if (!r || r.type !== "image" && r.format !== "svg") return;
|
|
1655
|
+
const { width: l, height: h } = r;
|
|
1656
1656
|
let g = Math.min(l, O), u = Math.min(h, T);
|
|
1657
1657
|
if (t) {
|
|
1658
1658
|
const {
|
|
@@ -1661,8 +1661,8 @@ class tt {
|
|
|
1661
1661
|
} = n, j = l / m, b = h / M, L = Math.max(j, b);
|
|
1662
1662
|
g = m * L, u = M * L;
|
|
1663
1663
|
}
|
|
1664
|
-
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h >
|
|
1665
|
-
object:
|
|
1664
|
+
this.setResolutionWidth(g, { withoutSave: !0 }), this.setResolutionHeight(u, { withoutSave: !0 }), (l > o || h > c) && a.calculateAndApplyDefaultZoom(), a.resetObject(r, { withoutSave: !0 }), i.centerObject(r), i.renderAll(), s || this.editor.historyManager.saveState(), i.fire("editor:montage-area-scaled-to-image", {
|
|
1665
|
+
object: r,
|
|
1666
1666
|
width: g,
|
|
1667
1667
|
height: u,
|
|
1668
1668
|
preserveAspectRatio: t,
|
|
@@ -1716,8 +1716,8 @@ class st {
|
|
|
1716
1716
|
* @param scale - Желаемый масштаб относительно размеров контейнера редактора.
|
|
1717
1717
|
*/
|
|
1718
1718
|
calculateAndApplyDefaultZoom(e = this.options.defaultScale) {
|
|
1719
|
-
const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea,
|
|
1720
|
-
this.defaultZoom = Math.min(
|
|
1719
|
+
const { canvas: t } = this.editor, s = t.editorContainer, i = s.clientWidth, n = s.clientHeight, { width: a, height: o } = this.editor.montageArea, c = i / a * e, r = n / o * e;
|
|
1720
|
+
this.defaultZoom = Math.min(c, r);
|
|
1721
1721
|
const { defaultZoom: l, maxZoomFactor: h, minZoom: g, maxZoom: u } = this;
|
|
1722
1722
|
this.minZoom = Math.min(l / h, g), this.maxZoom = Math.max(l * h, u), this.setZoom();
|
|
1723
1723
|
}
|
|
@@ -1733,7 +1733,7 @@ class st {
|
|
|
1733
1733
|
zoom(e = qe, t = {}) {
|
|
1734
1734
|
var g, u;
|
|
1735
1735
|
if (!e) return;
|
|
1736
|
-
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(),
|
|
1736
|
+
const { minZoom: s, maxZoom: i } = this, { canvas: n } = this.editor, a = n.getZoom(), o = n.getCenterPoint(), c = (g = t.pointX) != null ? g : o.x, r = (u = t.pointY) != null ? u : o.y, l = new _(c, r);
|
|
1737
1737
|
let h = Number((a + Number(e)).toFixed(2));
|
|
1738
1738
|
h > i && (h = i), h < s && (h = s), n.zoomToPoint(l, h), console.log({
|
|
1739
1739
|
currentZoom: a,
|
|
@@ -1852,25 +1852,25 @@ class st {
|
|
|
1852
1852
|
withoutSave: s,
|
|
1853
1853
|
fitAsOneObject: i
|
|
1854
1854
|
} = {}) {
|
|
1855
|
-
const { canvas: n, imageManager: a, historyManager: o } = this.editor,
|
|
1856
|
-
if (
|
|
1857
|
-
if (
|
|
1858
|
-
const
|
|
1859
|
-
n.discardActiveObject(),
|
|
1855
|
+
const { canvas: n, imageManager: a, historyManager: o } = this.editor, c = e || n.getActiveObject();
|
|
1856
|
+
if (c) {
|
|
1857
|
+
if (c.set("angle", 0), c instanceof v && !i) {
|
|
1858
|
+
const r = c.getObjects();
|
|
1859
|
+
n.discardActiveObject(), r.forEach((h) => {
|
|
1860
1860
|
const g = a.calculateScaleFactor({ imageObject: h, scaleType: t });
|
|
1861
1861
|
h.scale(g), n.centerObject(h);
|
|
1862
1862
|
});
|
|
1863
|
-
const l = new v(
|
|
1863
|
+
const l = new v(r, { canvas: n });
|
|
1864
1864
|
n.setActiveObject(l);
|
|
1865
1865
|
} else {
|
|
1866
|
-
const
|
|
1867
|
-
imageObject:
|
|
1866
|
+
const r = a.calculateScaleFactor({
|
|
1867
|
+
imageObject: c,
|
|
1868
1868
|
scaleType: t
|
|
1869
1869
|
});
|
|
1870
|
-
|
|
1870
|
+
c.scale(r), n.centerObject(c);
|
|
1871
1871
|
}
|
|
1872
1872
|
n.renderAll(), s || o.saveState(), n.fire("editor:object-fitted", {
|
|
1873
|
-
object:
|
|
1873
|
+
object: c,
|
|
1874
1874
|
type: t,
|
|
1875
1875
|
withoutSave: s,
|
|
1876
1876
|
fitAsOneObject: i
|
|
@@ -1899,26 +1899,26 @@ class st {
|
|
|
1899
1899
|
montageArea: n,
|
|
1900
1900
|
imageManager: a,
|
|
1901
1901
|
historyManager: o,
|
|
1902
|
-
options: { scaleType:
|
|
1903
|
-
} = this.editor,
|
|
1904
|
-
if (!
|
|
1905
|
-
if (o.suspendHistory(),
|
|
1902
|
+
options: { scaleType: c }
|
|
1903
|
+
} = this.editor, r = e || i.getActiveObject();
|
|
1904
|
+
if (!r || r.locked) return;
|
|
1905
|
+
if (o.suspendHistory(), r.type === "image" || r.format === "svg" || r.set({
|
|
1906
1906
|
scaleX: 1,
|
|
1907
1907
|
scaleY: 1,
|
|
1908
1908
|
flipX: !1,
|
|
1909
1909
|
flipY: !1,
|
|
1910
1910
|
angle: 0
|
|
1911
1911
|
}), t)
|
|
1912
|
-
this.fitObject({ object:
|
|
1912
|
+
this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 });
|
|
1913
1913
|
else {
|
|
1914
|
-
const { width: h, height: g } = n, { width: u, height: m } =
|
|
1915
|
-
imageObject:
|
|
1916
|
-
scaleType:
|
|
1914
|
+
const { width: h, height: g } = n, { width: u, height: m } = r, M = a.calculateScaleFactor({
|
|
1915
|
+
imageObject: r,
|
|
1916
|
+
scaleType: c
|
|
1917
1917
|
});
|
|
1918
|
-
|
|
1918
|
+
c === "contain" && M < 1 || c === "cover" && (u > h || m > g) ? this.fitObject({ object: r, withoutSave: !0, fitAsOneObject: !0 }) : r.set({ scaleX: 1, scaleY: 1 });
|
|
1919
1919
|
}
|
|
1920
|
-
|
|
1921
|
-
object:
|
|
1920
|
+
r.set({ flipX: !1, flipY: !1, angle: 0 }), i.centerObject(r), i.renderAll(), o.resumeHistory(), s || o.saveState(), i.fire("editor:object-reset", {
|
|
1921
|
+
object: r,
|
|
1922
1922
|
withoutSave: s,
|
|
1923
1923
|
alwaysFitObject: t
|
|
1924
1924
|
});
|
|
@@ -2037,9 +2037,9 @@ class P {
|
|
|
2037
2037
|
const o = e || s.getActiveObject();
|
|
2038
2038
|
if (o) {
|
|
2039
2039
|
if (o instanceof v) {
|
|
2040
|
-
const
|
|
2041
|
-
for (let
|
|
2042
|
-
s.sendObjectToBack(
|
|
2040
|
+
const c = o.getObjects();
|
|
2041
|
+
for (let r = c.length - 1; r >= 0; r -= 1)
|
|
2042
|
+
s.sendObjectToBack(c[r]);
|
|
2043
2043
|
} else
|
|
2044
2044
|
s.sendObjectToBack(o);
|
|
2045
2045
|
s.sendObjectToBack(i), a && s.sendObjectToBack(a), s.renderAll(), n.resumeHistory(), t || n.saveState(), s.fire("editor:object-send-to-back", {
|
|
@@ -2077,15 +2077,15 @@ class P {
|
|
|
2077
2077
|
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2078
2078
|
let a = -1;
|
|
2079
2079
|
for (let o = 0; o < s.length; o += 1) {
|
|
2080
|
-
const
|
|
2081
|
-
if (!i.includes(
|
|
2080
|
+
const c = s[o];
|
|
2081
|
+
if (!i.includes(c) && n.some((r) => o > r)) {
|
|
2082
2082
|
a = o;
|
|
2083
2083
|
break;
|
|
2084
2084
|
}
|
|
2085
2085
|
}
|
|
2086
|
-
a !== -1 && i.map((
|
|
2087
|
-
const
|
|
2088
|
-
|
|
2086
|
+
a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => r.index - c.index).forEach((c) => {
|
|
2087
|
+
const r = s.indexOf(c.obj);
|
|
2088
|
+
r < a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2089
2089
|
});
|
|
2090
2090
|
}
|
|
2091
2091
|
/**
|
|
@@ -2094,9 +2094,19 @@ class P {
|
|
|
2094
2094
|
* @param activeSelection - активное выделение
|
|
2095
2095
|
*/
|
|
2096
2096
|
static _moveSelectionBackwards(e, t) {
|
|
2097
|
-
const s = e.getObjects(), i = t.getObjects(), n =
|
|
2098
|
-
|
|
2099
|
-
|
|
2097
|
+
const s = e.getObjects(), i = t.getObjects(), n = i.map((o) => s.indexOf(o));
|
|
2098
|
+
let a = -1;
|
|
2099
|
+
for (let o = s.length - 1; o >= 0; o -= 1) {
|
|
2100
|
+
const c = s[o];
|
|
2101
|
+
if (!i.includes(c) && n.some((r) => o < r)) {
|
|
2102
|
+
a = o;
|
|
2103
|
+
break;
|
|
2104
|
+
}
|
|
2105
|
+
}
|
|
2106
|
+
a !== -1 && i.map((c) => ({ obj: c, index: s.indexOf(c) })).sort((c, r) => c.index - r.index).forEach((c) => {
|
|
2107
|
+
const r = s.indexOf(c.obj);
|
|
2108
|
+
r > a && (e.moveObjectTo(c.obj, a), a = r);
|
|
2109
|
+
});
|
|
2100
2110
|
}
|
|
2101
2111
|
}
|
|
2102
2112
|
class nt {
|
|
@@ -2123,7 +2133,7 @@ class nt {
|
|
|
2123
2133
|
* @param flags.withoutSelection - Не выделять объект
|
|
2124
2134
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2125
2135
|
*/
|
|
2126
|
-
addRectangle(l = {}, { withoutSelection:
|
|
2136
|
+
addRectangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
|
|
2127
2137
|
var h = l, {
|
|
2128
2138
|
id: e = `rect-${D()}`,
|
|
2129
2139
|
left: t,
|
|
@@ -2147,7 +2157,7 @@ class nt {
|
|
|
2147
2157
|
height: n,
|
|
2148
2158
|
fill: a
|
|
2149
2159
|
}, o));
|
|
2150
|
-
return !t && !s && g.centerObject(u),
|
|
2160
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2151
2161
|
}
|
|
2152
2162
|
/**
|
|
2153
2163
|
* Добавление круга
|
|
@@ -2165,8 +2175,8 @@ class nt {
|
|
|
2165
2175
|
* @param flags.withoutSelection - Не выделять объект
|
|
2166
2176
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2167
2177
|
*/
|
|
2168
|
-
addCircle(
|
|
2169
|
-
var l =
|
|
2178
|
+
addCircle(r = {}, { withoutSelection: o, withoutAdding: c } = {}) {
|
|
2179
|
+
var l = r, {
|
|
2170
2180
|
id: e = `circle-${D()}`,
|
|
2171
2181
|
left: t,
|
|
2172
2182
|
top: s,
|
|
@@ -2186,7 +2196,7 @@ class nt {
|
|
|
2186
2196
|
fill: n,
|
|
2187
2197
|
radius: i
|
|
2188
2198
|
}, a));
|
|
2189
|
-
return !t && !s && h.centerObject(g),
|
|
2199
|
+
return !t && !s && h.centerObject(g), c || (h.add(g), o || h.setActiveObject(g), h.renderAll()), g;
|
|
2190
2200
|
}
|
|
2191
2201
|
/**
|
|
2192
2202
|
* Добавление треугольника
|
|
@@ -2205,7 +2215,7 @@ class nt {
|
|
|
2205
2215
|
* @param flags.withoutSelection - Не выделять объект
|
|
2206
2216
|
* @param flags.withoutAdding - Не добавлять объект в canvas
|
|
2207
2217
|
*/
|
|
2208
|
-
addTriangle(l = {}, { withoutSelection:
|
|
2218
|
+
addTriangle(l = {}, { withoutSelection: c, withoutAdding: r } = {}) {
|
|
2209
2219
|
var h = l, {
|
|
2210
2220
|
id: e = `triangle-${D()}`,
|
|
2211
2221
|
left: t,
|
|
@@ -2229,7 +2239,7 @@ class nt {
|
|
|
2229
2239
|
width: i,
|
|
2230
2240
|
height: n
|
|
2231
2241
|
}, o));
|
|
2232
|
-
return !t && !s && g.centerObject(u),
|
|
2242
|
+
return !t && !s && g.centerObject(u), r || (g.add(u), c || g.setActiveObject(u), g.renderAll()), u;
|
|
2233
2243
|
}
|
|
2234
2244
|
}
|
|
2235
2245
|
class at {
|
|
@@ -2270,10 +2280,10 @@ class at {
|
|
|
2270
2280
|
}), this._cloneAndFire(e, s);
|
|
2271
2281
|
return;
|
|
2272
2282
|
}
|
|
2273
|
-
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1],
|
|
2274
|
-
for (let g = 0; g <
|
|
2275
|
-
|
|
2276
|
-
const l = new Blob([
|
|
2283
|
+
const n = s.toCanvasElement().toDataURL(), a = n.slice(5).split(";")[0], o = n.split(",")[1], c = atob(o), r = new Uint8Array(c.length);
|
|
2284
|
+
for (let g = 0; g < c.length; g += 1)
|
|
2285
|
+
r[g] = c.charCodeAt(g);
|
|
2286
|
+
const l = new Blob([r.buffer], { type: a }), h = new ClipboardItem({ [a]: l });
|
|
2277
2287
|
navigator.clipboard.write([h]).catch((g) => {
|
|
2278
2288
|
t.emitWarning({
|
|
2279
2289
|
origin: "ClipboardManager",
|
|
@@ -2314,17 +2324,17 @@ class at {
|
|
|
2314
2324
|
if (i.type !== "text/html") {
|
|
2315
2325
|
const o = i.getAsFile();
|
|
2316
2326
|
if (!o) return;
|
|
2317
|
-
const
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
},
|
|
2327
|
+
const c = new FileReader();
|
|
2328
|
+
c.onload = (r) => {
|
|
2329
|
+
r.target && this.editor.imageManager.importImage({ source: r.target.result });
|
|
2330
|
+
}, c.readAsDataURL(o);
|
|
2321
2331
|
return;
|
|
2322
2332
|
}
|
|
2323
2333
|
const n = e.getData("text/html");
|
|
2324
2334
|
if (n) {
|
|
2325
|
-
const
|
|
2326
|
-
if (
|
|
2327
|
-
t.importImage({ source:
|
|
2335
|
+
const r = new DOMParser().parseFromString(n, "text/html").querySelector("img");
|
|
2336
|
+
if (r != null && r.src) {
|
|
2337
|
+
t.importImage({ source: r.src });
|
|
2328
2338
|
return;
|
|
2329
2339
|
}
|
|
2330
2340
|
}
|
|
@@ -2335,7 +2345,7 @@ class at {
|
|
|
2335
2345
|
* @fires editor:object-pasted
|
|
2336
2346
|
*/
|
|
2337
2347
|
paste() {
|
|
2338
|
-
return
|
|
2348
|
+
return p(this, null, function* () {
|
|
2339
2349
|
const { canvas: e } = this.editor;
|
|
2340
2350
|
if (!this.clipboard) return;
|
|
2341
2351
|
const t = yield this.clipboard.clone(["format"]);
|
|
@@ -2375,8 +2385,8 @@ class F {
|
|
|
2375
2385
|
lockSkewingY: !0,
|
|
2376
2386
|
locked: !0
|
|
2377
2387
|
};
|
|
2378
|
-
a.set(o), !t && F._isGroupOrSelection(a) && a.getObjects().forEach((
|
|
2379
|
-
|
|
2388
|
+
a.set(o), !t && F._isGroupOrSelection(a) && a.getObjects().forEach((r) => {
|
|
2389
|
+
r.set(o);
|
|
2380
2390
|
}), i.renderAll(), s || n.saveState(), i.fire("editor:object-locked", {
|
|
2381
2391
|
object: a,
|
|
2382
2392
|
skipInnerObjects: t,
|
|
@@ -2434,7 +2444,7 @@ class ot {
|
|
|
2434
2444
|
const n = e || s.getActiveObject();
|
|
2435
2445
|
if (!n || !(n instanceof v)) return;
|
|
2436
2446
|
const a = n.getObjects(), o = new X(a);
|
|
2437
|
-
a.forEach((
|
|
2447
|
+
a.forEach((c) => s.remove(c)), o.set("id", `${o.type}-${D()}`), s.add(o), s.setActiveObject(o), s.renderAll(), i.resumeHistory(), t || i.saveState(), s.fire("editor:objects-grouped", {
|
|
2438
2448
|
object: n,
|
|
2439
2449
|
group: o,
|
|
2440
2450
|
withoutSave: t
|
|
@@ -2456,7 +2466,7 @@ class ot {
|
|
|
2456
2466
|
const n = e || s.getActiveObject();
|
|
2457
2467
|
if (!(n instanceof X)) return;
|
|
2458
2468
|
const a = n.removeAll();
|
|
2459
|
-
s.remove(n), a.forEach((
|
|
2469
|
+
s.remove(n), a.forEach((c) => s.add(c));
|
|
2460
2470
|
const o = new v(a, {
|
|
2461
2471
|
canvas: s
|
|
2462
2472
|
});
|
|
@@ -2669,7 +2679,7 @@ class ie {
|
|
|
2669
2679
|
* @fires editor:ready
|
|
2670
2680
|
*/
|
|
2671
2681
|
init() {
|
|
2672
|
-
return
|
|
2682
|
+
return p(this, null, function* () {
|
|
2673
2683
|
const {
|
|
2674
2684
|
editorContainerWidth: e,
|
|
2675
2685
|
editorContainerHeight: t,
|
|
@@ -2678,20 +2688,20 @@ class ie {
|
|
|
2678
2688
|
canvasCSSWidth: n,
|
|
2679
2689
|
canvasCSSHeight: a,
|
|
2680
2690
|
initialImage: o,
|
|
2681
|
-
initialStateJSON:
|
|
2682
|
-
scaleType:
|
|
2691
|
+
initialStateJSON: c,
|
|
2692
|
+
scaleType: r,
|
|
2683
2693
|
_onReadyCallback: l
|
|
2684
2694
|
} = this.options;
|
|
2685
2695
|
if (He.apply(), this.canvas = new Ce(this.containerId, this.options), this.moduleLoader = new Ee(), this.workerManager = new Te(), this.errorManager = new V({ editor: this }), this.historyManager = new Je({ editor: this }), this.toolbar = new Qe({ editor: this }), this.transformManager = new st({ editor: this }), this.canvasManager = new tt({ editor: this }), this.imageManager = new N({ editor: this }), this.layerManager = new P({ editor: this }), this.shapeManager = new nt({ editor: this }), this.interactionBlocker = new it({ editor: this }), this.clipboardManager = new at({ editor: this }), this.objectLockManager = new F({ editor: this }), this.groupingManager = new ot({ editor: this }), this.selectionManager = new rt({ editor: this }), this.deletionManager = new ct({ editor: this }), this._createMontageArea(), this._createClippingArea(), this.listeners = new z({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(e), this.canvasManager.setEditorContainerHeight(t), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(i), this.canvasManager.setCanvasCSSWidth(n), this.canvasManager.setCanvasCSSHeight(a), o != null && o.source) {
|
|
2686
2696
|
const {
|
|
2687
2697
|
source: h,
|
|
2688
|
-
scale: g = `image-${
|
|
2698
|
+
scale: g = `image-${r}`,
|
|
2689
2699
|
withoutSave: u = !0
|
|
2690
2700
|
} = o;
|
|
2691
2701
|
yield this.imageManager.importImage({ source: h, scale: g, withoutSave: u });
|
|
2692
2702
|
} else
|
|
2693
2703
|
this.canvasManager.setDefaultScale({ withoutSave: !0 });
|
|
2694
|
-
|
|
2704
|
+
c && this.historyManager.loadStateFromFullState(c), this.historyManager.saveState(), console.log("editor:ready"), this.canvas.fire("editor:ready", this), typeof l == "function" && l(this);
|
|
2695
2705
|
});
|
|
2696
2706
|
}
|
|
2697
2707
|
/**
|
|
@@ -2849,15 +2859,15 @@ const lt = {
|
|
|
2849
2859
|
deleteObjectsByHotkey: !0,
|
|
2850
2860
|
resetObjectFitByDoubleClick: !0
|
|
2851
2861
|
};
|
|
2852
|
-
function bt(
|
|
2853
|
-
const t = f(f({}, lt), e), s = document.getElementById(
|
|
2862
|
+
function bt(d, e = {}) {
|
|
2863
|
+
const t = f(f({}, lt), e), s = document.getElementById(d);
|
|
2854
2864
|
if (!s)
|
|
2855
|
-
return Promise.reject(new Error(`Контейнер с ID "${
|
|
2865
|
+
return Promise.reject(new Error(`Контейнер с ID "${d}" не найден.`));
|
|
2856
2866
|
const i = document.createElement("canvas");
|
|
2857
|
-
return i.id = `${
|
|
2867
|
+
return i.id = `${d}-canvas`, s.appendChild(i), t.editorContainer = s, new Promise((n) => {
|
|
2858
2868
|
t._onReadyCallback = n;
|
|
2859
2869
|
const a = new ie(i.id, t);
|
|
2860
|
-
window[
|
|
2870
|
+
window[d] = a;
|
|
2861
2871
|
});
|
|
2862
2872
|
}
|
|
2863
2873
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anu3ev/fabric-image-editor",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.54",
|
|
4
4
|
"description": "JavaScript image editor built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
|
|
5
5
|
"module": "dist/main.js",
|
|
6
6
|
"files": [
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"vite": "^6.3.5",
|
|
36
36
|
"vite-bundle-analyzer": "^0.21.0",
|
|
37
37
|
"vite-plugin-babel": "^1.3.0",
|
|
38
|
+
"vite-plugin-static-copy": "^3.1.1",
|
|
38
39
|
"vue-eslint-parser": "^10.1.3"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|