@anu3ev/fabric-image-editor 0.3.1 → 0.4.0

package/dist/main.js

@@ -35,7 +35,7 @@ var C = (h, t, e) => new Promise((s, n) => {
   }, i = (r) => r.done ? s(r.value) : Promise.resolve(r.value).then(o, a);
   i((e = e.apply(h, t)).next());
 });
-import { ActiveSelection as D, Textbox as gt, util as mt, controlsUtils as pe, InteractiveFabricObject as Me, loadSVGFromURL as Ne, FabricImage as ht, Point as bt, Gradient as ye, Rect as Le, Circle as xe, Triangle as ke, Group as $, Canvas as Be, Pattern as _e } from "fabric";
+import { ActiveSelection as D, Textbox as gt, util as mt, controlsUtils as pe, InteractiveFabricObject as Me, loadSVGFromURL as Ne, FabricImage as ht, Point as bt, Gradient as ye, Rect as Le, Circle as xe, Triangle as ke, Group as $, Canvas as _e, Pattern as Be } from "fabric";
 import { create as Re } from "jsondiffpatch";
 import Ue from "diff-match-patch";
 var ze = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict", x = function() {
@@ -463,18 +463,18 @@ class He {
     this.worker.terminate();
   }
 }
-const F = 12, Ze = 2, Dt = 8, Ot = 20, We = 100, Tt = 20, Nt = 8, Pe = 100, vt = 32, xt = 1, Ve = "#2B2D33", kt = "#3D8BF4", Bt = "#FFFFFF";
+const F = 12, Ze = 2, Dt = 8, Ot = 20, We = 100, Tt = 20, Nt = 8, Pe = 100, vt = 32, xt = 1, Ve = "#2B2D33", kt = "#3D8BF4", _t = "#FFFFFF";
 function Mt(h, t, e, s, n) {
   const o = F, a = Ze;
-  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Bt, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -o / 2, o, o, a), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = _t, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -o / 2, o, o, a), h.fill(), h.stroke(), h.restore();
 }
 function be(h, t, e, s, n) {
   const o = Dt, a = Ot, i = We;
-  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Bt, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -a / 2, o, a, i), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = _t, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -a / 2, o, a, i), h.fill(), h.stroke(), h.restore();
 }
 function ve(h, t, e, s, n) {
   const o = Tt, a = Nt, i = Pe;
-  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = Bt, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -a / 2, o, a, i), h.fill(), h.stroke(), h.restore();
+  h.save(), h.translate(t, e), h.rotate(mt.degreesToRadians(n.angle)), h.fillStyle = _t, h.strokeStyle = kt, h.lineWidth = xt, h.beginPath(), h.roundRect(-o / 2, -a / 2, o, a, i), h.fill(), h.stroke(), h.restore();
 }
 const Ge = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE4Ljc1IDQuMzc1djMuNzVhLjYyNS42MjUgMCAwIDEtLjYyNS42MjVoLTMuNzVhLjYyNS42MjUgMCAwIDEgMC0xLjI1aDIuMTRsLTIuMDc3LTEuOTAzLS4wMi0uMDE5YTYuMjUgNi4yNSAwIDEgMC0uMTMgOC45NjcuNjI2LjYyNiAwIDAgMSAuODYuOTA5QTcuNDU2IDcuNDU2IDAgMCAxIDEwIDE3LjVoLS4xMDNhNy41IDcuNSAwIDEgMSA1LjM5Ni0xMi44MTJMMTcuNSA2LjcwM1Y0LjM3NWEuNjI1LjYyNSAwIDAgMSAxLjI1IDBaIi8+PC9zdmc+", we = new Image();
 we.src = Ge;
@@ -972,7 +972,7 @@ const as = {
   "white-space": "nowrap",
   "box-shadow": "0 2px 8px rgba(0, 0, 0, 0.2)"
 }, je = 16, Ie = 16, is = "fabric-editor-angle-indicator";
-class _t {
+class Bt {
   constructor({ editor: t }) {
     this.isActive = !1, this.currentAngle = 0, this.editor = t, this.canvas = t.canvas, this.options = t.options, this._createDOM(), this._bindEvents();
   }
@@ -1000,7 +1000,7 @@ class _t {
       return;
     }
     const s = e.angle || 0;
-    this.currentAngle = _t._normalizeAngle(s), this.el.textContent = `${this.currentAngle}°`, this._positionIndicator(t.e), this.isActive || this._showIndicator();
+    this.currentAngle = Bt._normalizeAngle(s), this.el.textContent = `${this.currentAngle}°`, this._positionIndicator(t.e), this.isActive || this._showIndicator();
   }
   /**
    * Обработчик отпускания кнопки мыши
@@ -1538,7 +1538,7 @@ class H {
           [T]
         );
         if (d) {
-          const w = m * 0.264583, L = b * 0.264583, B = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, Y = new B({
+          const w = m * 0.264583, L = b * 0.264583, _ = (yield this.editor.moduleLoader.loadModule("jspdf")).jsPDF, Y = new _({
             orientation: w > L ? "landscape" : "portrait",
             unit: "mm",
             format: [w, L]
@@ -1552,8 +1552,8 @@ class H {
             };
             return a.fire("editor:canvas-exported", W), W;
           }
-          const _ = Y.output("blob"), Z = {
-            image: new File([_], e, { type: "application/pdf" }),
+          const B = Y.output("blob"), Z = {
+            image: new File([B], e, { type: "application/pdf" }),
             format: "pdf",
             contentType: "application/pdf",
             fileName: e
@@ -2442,8 +2442,8 @@ class ps {
     const { canvas: a, montageArea: i } = this.editor, r = a.viewportTransform, c = a.getWidth(), d = a.getHeight(), l = t.x - r[4], u = t.y - r[5], g = Math.abs(n), f = e - s;
     if (Math.abs(f) / g <= 0.1)
       return { x: l, y: u };
-    const b = c / 2, p = d / 2, M = i.left, S = i.top, O = b - M * s, T = p - S * s, y = (O - r[4]) / (e - s), A = (T - r[5]) / (e - s), N = y * g, I = A * g, v = N * o, w = I * o, L = Math.abs(v) > Math.abs(l) ? l : v, B = Math.abs(w) > Math.abs(u) ? u : w;
-    return { x: L, y: B };
+    const b = c / 2, p = d / 2, M = i.left, S = i.top, O = b - M * s, T = p - S * s, y = (O - r[4]) / (e - s), A = (T - r[5]) / (e - s), N = y * g, I = A * g, v = N * o, w = I * o, L = Math.abs(v) > Math.abs(l) ? l : v, _ = Math.abs(w) > Math.abs(u) ? u : w;
+    return { x: L, y: _ };
   }
   /**
    * Применяет плавное центрирование viewport при приближении к defaultZoom.
@@ -3996,9 +3996,9 @@ const Et = 0.01;
 class k {
   constructor({ editor: t }) {
     var e;
-    this.handleTextEditingEntered = () => {
+    this._handleTextEditingEntered = () => {
       this.isTextEditingActive = !0;
-    }, this.handleTextChanged = (s) => {
+    }, this._handleTextChanged = (s) => {
       var r, c;
       const { target: n } = s;
       if (!k._isTextbox(n)) return;
@@ -4013,7 +4013,7 @@ class k {
         } else u < l ? n.textCaseRaw = i.slice(0, u) : n.textCaseRaw = o.toLocaleLowerCase();
       } else
         n.textCaseRaw = o;
-    }, this.handleTextEditingExited = (s) => {
+    }, this._handleTextEditingExited = (s) => {
       var i, r;
       const { target: n } = s;
       if (!k._isTextbox(n)) return;
@@ -4029,7 +4029,7 @@ class k {
       }), setTimeout(() => {
         this.isTextEditingActive = !1, this.editor.historyManager.saveState();
       }, hs);
-    }, this.handleObjectScaling = (s) => {
+    }, this._handleObjectScaling = (s) => {
       var Z, G, W, tt, et, st, nt, ot, at, it, rt, ct, dt, lt;
       const { target: n, transform: o } = s;
       if (!k._isTextbox(n) || !o) return;
@@ -4046,27 +4046,21 @@ class k {
         scaleX: 1,
         scaleY: 1
       });
-      const B = (dt = n.width) != null ? dt : T, Y = Math.abs(B - v) > Et;
-      let _ = g;
-      Y && (b || M) && (A === "right" ? _ = N - B : A === "center" && (_ = I - B / 2)), n.set({ left: _ }), a.baseLeft = _, o.scaleX = 1, o.scaleY = 1;
+      const _ = (dt = n.width) != null ? dt : T, Y = Math.abs(_ - v) > Et;
+      let B = g;
+      Y && (b || M) && (A === "right" ? B = N - _ : A === "center" && (B = I - _ / 2)), n.set({ left: B }), a.baseLeft = B, o.scaleX = 1, o.scaleY = 1;
       const { original: R } = o;
-      R && (R.scaleX = 1, R.scaleY = 1, R.width = B, R.height = n.height, R.left = _), n.setCoords(), this.canvas.requestRenderAll(), a.baseWidth = B, a.baseFontSize = (lt = n.fontSize) != null ? lt : y, a.hasWidthChange = Y || L;
-    }, this.handleObjectModified = (s) => {
+      R && (R.scaleX = 1, R.scaleY = 1, R.width = _, R.height = n.height, R.left = B), n.setCoords(), this.canvas.requestRenderAll(), a.baseWidth = _, a.baseFontSize = (lt = n.fontSize) != null ? lt : y, a.hasWidthChange = Y || L;
+    }, this._handleObjectModified = (s) => {
       var r, c, d;
       const { target: n } = s;
       if (!k._isTextbox(n)) return;
       const o = this.scalingState.get(n);
       if (this.scalingState.delete(n), !(o != null && o.hasWidthChange)) return;
       const a = (r = n.width) != null ? r : n.calcTextWidth(), i = (d = (c = n.fontSize) != null ? c : o == null ? void 0 : o.baseFontSize) != null ? d : 16;
-      this.updateText(n, { width: a, fontSize: i }), n.set({ scaleX: 1, scaleY: 1 }), n.setCoords();
+      this.updateText({ target: n, style: { width: a, fontSize: i } }), n.set({ scaleX: 1, scaleY: 1 }), n.setCoords();
     }, this.editor = t, this.canvas = t.canvas, this.fonts = (e = t.options.fonts) != null ? e : [], this.scalingState = /* @__PURE__ */ new WeakMap(), this.isTextEditingActive = !1, this._bindEvents();
   }
-  /**
-   * Уничтожает менеджер и снимает слушатели.
-   */
-  destroy() {
-    this.canvas.off("object:scaling", this.handleObjectScaling), this.canvas.off("object:modified", this.handleObjectModified), this.canvas.off("text:editing:exited", this.handleTextEditingExited), this.canvas.off("text:editing:entered", this.handleTextEditingEntered), this.canvas.off("text:changed", this.handleTextChanged);
-  }
   /**
    * Добавляет новый текстовый объект на канвас.
    * @param options — настройки текста
@@ -4159,12 +4153,14 @@ class k {
   }
   /**
    * Обновляет текстовый объект.
-   * @param target — объект, его id или активный объект (если не передан)
-   * @param style — стиль, который нужно применить
    * @param options — настройки обновления
+   * @param options.target — объект, его id или активный объект (если не передан)
+   * @param options.style — стиль, который нужно применить
+   * @param options.withoutSave — не сохранять состояние в историю
+   * @param options.skipRender — не вызывать перерисовку канваса
    */
-  updateText(t, e = {}, { withoutSave: s, skipRender: n } = {}) {
-    var Y, _, R, Z, G, W, tt, et, st, nt, ot, at, it, rt, ct, dt, lt, zt, Yt, Ht, Zt, Wt, Pt, Vt, Gt, Xt, Kt, $t, Qt, Jt, qt, te, ee, se, ne, oe, ae, ie, re, ce, de, le;
+  updateText({ target: t, style: e = {}, withoutSave: s, skipRender: n } = {}) {
+    var Y, B, R, Z, G, W, tt, et, st, nt, ot, at, it, rt, ct, dt, lt, zt, Yt, Ht, Zt, Wt, Pt, Vt, Gt, Xt, Kt, $t, Qt, Jt, qt, te, ee, se, ne, oe, ae, ie, re, ce, de, le;
     const o = this._resolveTextObject(t);
     if (!o) return null;
     const { historyManager: a } = this.editor;
@@ -4172,7 +4168,7 @@ class k {
     const i = {
       id: o.id,
       text: (Y = o.text) != null ? Y : void 0,
-      textCaseRaw: (_ = o.textCaseRaw) != null ? _ : void 0,
+      textCaseRaw: (B = o.textCaseRaw) != null ? B : void 0,
       uppercase: !!o.uppercase,
       fontFamily: (R = o.fontFamily) != null ? R : void 0,
       fontSize: (Z = o.fontSize) != null ? Z : void 0,
@@ -4232,7 +4228,7 @@ class k {
       y.text = wt, o.textCaseRaw = v;
     } else o.textCaseRaw === void 0 && (o.textCaseRaw = A);
     o.uppercase = w, o.set(y), o.setCoords(), n || this.canvas.requestRenderAll(), a.resumeHistory(), s || a.saveState();
-    const B = {
+    const _ = {
       id: o.id,
       text: (Vt = o.text) != null ? Vt : void 0,
       textCaseRaw: (Gt = o.textCaseRaw) != null ? Gt : void 0,
@@ -4266,9 +4262,15 @@ class k {
       },
       updates: y,
       before: i,
-      after: B
+      after: _
     }), o;
   }
+  /**
+   * Уничтожает менеджер и снимает слушатели.
+   */
+  destroy() {
+    this.canvas.off("object:scaling", this._handleObjectScaling), this.canvas.off("object:modified", this._handleObjectModified), this.canvas.off("text:editing:exited", this._handleTextEditingExited), this.canvas.off("text:editing:entered", this._handleTextEditingEntered), this.canvas.off("text:changed", this._handleTextChanged);
+  }
   /**
    * Возвращает активный текст или ищет по id.
    */
@@ -4288,7 +4290,7 @@ class k {
     return !!t && t instanceof gt;
   }
   _bindEvents() {
-    this.canvas.on("object:scaling", this.handleObjectScaling), this.canvas.on("object:modified", this.handleObjectModified), this.canvas.on("text:editing:entered", this.handleTextEditingEntered), this.canvas.on("text:editing:exited", this.handleTextEditingExited), this.canvas.on("text:changed", this.handleTextChanged);
+    this.canvas.on("object:scaling", this._handleObjectScaling), this.canvas.on("object:modified", this._handleObjectModified), this.canvas.on("text:editing:entered", this._handleTextEditingEntered), this.canvas.on("text:editing:exited", this._handleTextEditingExited), this.canvas.on("text:changed", this._handleTextChanged);
   }
   _ensureScalingState(t) {
     var s, n, o;
@@ -4349,7 +4351,7 @@ class Ut {
         showRotationAngle: d,
         _onReadyCallback: l
       } = this.options;
-      if (jt.apply(), this.canvas = new Be(this.containerId, this.options), this.moduleLoader = new Ye(), this.workerManager = new He(), this.errorManager = new St({ editor: this }), this.historyManager = new It({ editor: this }), this.toolbar = new os({ editor: this }), this.transformManager = new ms({ editor: this }), this.zoomManager = new ps({ editor: this }), this.canvasManager = new fs({ editor: this }), this.imageManager = new H({ editor: this }), this.layerManager = new At({ editor: this }), this.shapeManager = new ys({ editor: this }), this.interactionBlocker = new Ms({ editor: this }), this.backgroundManager = new Q({ editor: this }), this.clipboardManager = new bs({ editor: this }), this.objectLockManager = new Ct({ editor: this }), this.groupingManager = new vs({ editor: this }), this.selectionManager = new js({ editor: this }), this.deletionManager = new Rt({ editor: this }), this.panConstraintManager = new As({ editor: this }), this.fontManager = new Lt((u = this.options.fonts) != null ? u : []), this.textManager = new k({ editor: this }), d && (this.angleIndicator = new _t({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new ft({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(a), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), i != null && i.source) {
+      if (jt.apply(), this.canvas = new _e(this.containerId, this.options), this.moduleLoader = new Ye(), this.workerManager = new He(), this.errorManager = new St({ editor: this }), this.historyManager = new It({ editor: this }), this.toolbar = new os({ editor: this }), this.transformManager = new ms({ editor: this }), this.zoomManager = new ps({ editor: this }), this.canvasManager = new fs({ editor: this }), this.imageManager = new H({ editor: this }), this.layerManager = new At({ editor: this }), this.shapeManager = new ys({ editor: this }), this.interactionBlocker = new Ms({ editor: this }), this.backgroundManager = new Q({ editor: this }), this.clipboardManager = new bs({ editor: this }), this.objectLockManager = new Ct({ editor: this }), this.groupingManager = new vs({ editor: this }), this.selectionManager = new js({ editor: this }), this.deletionManager = new Rt({ editor: this }), this.panConstraintManager = new As({ editor: this }), this.fontManager = new Lt((u = this.options.fonts) != null ? u : []), this.textManager = new k({ editor: this }), d && (this.angleIndicator = new Bt({ editor: this })), this._createMontageArea(), this._createClippingArea(), this.listeners = new ft({ editor: this, options: this.options }), this.canvasManager.setEditorContainerWidth(t), this.canvasManager.setEditorContainerHeight(e), this.canvasManager.setCanvasWrapperWidth(s), this.canvasManager.setCanvasWrapperHeight(n), this.canvasManager.setCanvasCSSWidth(o), this.canvasManager.setCanvasCSSHeight(a), this.canvasManager.updateCanvas(), this.zoomManager.calculateAndApplyDefaultZoom(), yield this.fontManager.loadFonts(), i != null && i.source) {
         const {
           source: g,
           scale: f = `image-${c}`,
@@ -4422,7 +4424,7 @@ class Ut {
     const t = document.createElement("canvas");
     t.width = 20, t.height = 20;
     const e = t.getContext("2d");
-    return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new _e({
+    return e.fillStyle = "#ddd", e.fillRect(0, 0, 40, 40), e.fillStyle = "#ccc", e.fillRect(0, 0, 10, 10), e.fillRect(10, 10, 10, 10), new Be({
       source: t,
       repeat: "repeat"
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anu3ev/fabric-image-editor",
-  "version": "0.03.01",
+  "version": "0.4.0",
   "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.",
   "module": "dist/main.js",
   "files": [

package/readme.md

@@ -129,17 +129,20 @@ const textbox = editor.textManager.addText({
 })
 
 // Update existing text
-editor.textManager.updateText(textbox, {
-  text: 'HELLO FABRIC',
-  uppercase: true,
-  strokeColor: '#2563eb',
-  strokeWidth: 2
+editor.textManager.updateText({
+  target: textbox,
+  style: {
+    text: 'HELLO FABRIC',
+    uppercase: true,
+    strokeColor: '#2563eb',
+    strokeWidth: 2
+  }
 })
 ```
 
 ### Configuring Fonts
 
-By default the editor ships with a curated Google Fonts collection (Latin + Cyrillic coverage).  
+By default the editor ships with a curated Google Fonts collection (Latin + Cyrillic coverage).
 If you want to use your own fonts, supply a `fonts` array – the provided list will replace the defaults.
 
 ```typescript