@twick/canvas 0.15.8 → 0.15.10

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Canvas, Control, controlsUtils, FabricImage, Rect, Textbox, Shadow, FabricText, Group, Circle } from "fabric";
+import { Canvas, Control, controlsUtils, FabricImage, Rect, Textbox, Shadow, Group, Circle } from "fabric";
 import { useState, useRef } from "react";
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
@@ -593,6 +593,7 @@ const getObjectFitSize = (objectFit, elementSize, containerSize) => {
       };
   }
 };
+const MARGIN = 10;
 const addTextElement = ({
   element,
   index,
@@ -605,7 +606,7 @@ const addTextElement = ({
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
     canvasMetadata
   );
-  let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width;
+  let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
   if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
     width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
   }
@@ -681,33 +682,40 @@ const addCaptionElement = ({
   captionProps,
   canvasMetadata
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
   const { x, y } = convertToCanvasPosition(
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : (_a = element.props) == null ? void 0 : _a.x) ?? 0,
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : (_b = element.props) == null ? void 0 : _b.y) ?? 0,
+    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : ((_a = element.props) == null ? void 0 : _a.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
+    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : ((_b = element.props) == null ? void 0 : _b.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
     canvasMetadata
   );
-  const caption = new FabricText(((_c = element.props) == null ? void 0 : _c.text) || element.t || "", {
+  let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
+  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
+    width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+  }
+  const caption = new Textbox(((_e = element.props) == null ? void 0 : _e.text) || element.t || "", {
     left: x,
     top: y,
     originX: "center",
     originY: "center",
-    angle: ((_d = element.props) == null ? void 0 : _d.rotation) || 0,
+    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
     fontSize: Math.round(
-      (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_e = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _e.size : ((_g = (_f = element.props) == null ? void 0 : _f.font) == null ? void 0 : _g.size) ?? ((_h = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _h.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_g = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _g.size : ((_i = (_h = element.props) == null ? void 0 : _h.font) == null ? void 0 : _i.size) ?? ((_j = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _j.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_i = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _i.family : ((_k = (_j = element.props) == null ? void 0 : _j.font) == null ? void 0 : _k.family) ?? ((_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.family)) ?? DEFAULT_CAPTION_PROPS.family,
-    fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_m = captionProps.color) == null ? void 0 : _m.text : ((_n = element.props) == null ? void 0 : _n.fill) ?? ((_o = captionProps.color) == null ? void 0 : _o.text)) ?? DEFAULT_CAPTION_PROPS.fill,
-    fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.weight : ((_q = element.props) == null ? void 0 : _q.fontWeight) ?? ((_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_s = element.props) == null ? void 0 : _s.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
-    opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_t = element.props) == null ? void 0 : _t.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.family : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) ?? ((_n = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_o = captionProps.color) == null ? void 0 : _o.text : ((_p = element.props) == null ? void 0 : _p.fill) ?? ((_q = captionProps.color) == null ? void 0 : _q.text)) ?? DEFAULT_CAPTION_PROPS.fill,
+    fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_r = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r.weight : ((_s = element.props) == null ? void 0 : _s.fontWeight) ?? ((_t = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_u = element.props) == null ? void 0 : _u.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+    opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_v = element.props) == null ? void 0 : _v.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    width,
+    splitByGrapheme: false,
+    textAlign: ((_w = element.props) == null ? void 0 : _w.textAlign) ?? "center",
     shadow: new Shadow({
-      offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[0] : ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[0]) ?? ((_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0])) ?? ((_y = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _y[0]),
-      offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[1] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[1]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[1]),
-      blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_E = element.props) == null ? void 0 : _E.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_F = element.props) == null ? void 0 : _F.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0] : ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z[0]) ?? ((_A = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _A[0])) ?? ((_B = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _B[0]),
+      offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1] : ((_E = (_D = element.props) == null ? void 0 : _D.shadowOffset) == null ? void 0 : _E[1]) ?? ((_F = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _F[1])) ?? ((_G = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _G[1]),
+      blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_H = element.props) == null ? void 0 : _H.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_I = element.props) == null ? void 0 : _I.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_G = element.props) == null ? void 0 : _G.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_J = element.props) == null ? void 0 : _J.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);