@twick/video-editor 0.14.16 → 0.14.18

package/dist/index.mjs

@@ -6898,8 +6898,8 @@ const createCanvas = ({
     width: canvasSize.width,
     height: canvasSize.height,
     aspectRatio: canvasSize.width / canvasSize.height,
-    scaleX: canvasSize.width / videoSize.width,
-    scaleY: canvasSize.height / videoSize.height
+    scaleX: Number((canvasSize.width / videoSize.width).toFixed(2)),
+    scaleY: Number((canvasSize.height / videoSize.height).toFixed(2))
   };
   const canvas = new Sn(canvasRef, {
     backgroundColor,
@@ -7149,35 +7149,40 @@ const addTextElement = ({
   canvas,
   canvasMetadata
 }) => {
-  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w;
+  var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y;
   const { x: x2, y: y2 } = convertToCanvasPosition(
     ((_a2 = element.props) == null ? void 0 : _a2.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
     canvasMetadata
   );
-  const text = new ko(((_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;
+  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
+    width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+  }
+  const text = new Vo(((_e2 = element.props) == null ? void 0 : _e2.text) || element.t || "", {
     left: x2,
     top: y2,
     originX: "center",
     originY: "center",
-    angle: ((_d = element.props) == null ? void 0 : _d.rotation) || 0,
-    fontSize: Math.round(
-      (((_e2 = element.props) == null ? void 0 : _e2.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
+    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
+    fontSize: Math.floor(
+      (((_g = element.props) == null ? void 0 : _g.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: ((_f = element.props) == null ? void 0 : _f.fontFamily) || DEFAULT_TEXT_PROPS.family,
-    fontStyle: ((_g = element.props) == null ? void 0 : _g.fontStyle) || "normal",
-    fontWeight: ((_h = element.props) == null ? void 0 : _h.fontWeight) || "normal",
-    fill: ((_i2 = element.props) == null ? void 0 : _i2.fill) || DEFAULT_TEXT_PROPS.fill,
-    opacity: ((_j = element.props) == null ? void 0 : _j.opacity) ?? 1,
-    skipWrapping: false,
-    textAlign: ((_k = element.props) == null ? void 0 : _k.textAlign) || "center",
-    stroke: ((_l = element.props) == null ? void 0 : _l.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_m = element.props) == null ? void 0 : _m.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_n2 = element.props) == null ? void 0 : _n2.shadowColor) ? new ds({
-      offsetX: ((_p = (_o2 = element.props) == null ? void 0 : _o2.shadowOffset) == null ? void 0 : _p.length) && ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) && ((_u = element.props) == null ? void 0 : _u.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-      blur: (((_v = element.props) == null ? void 0 : _v.shadowBlur) || 2) / 2,
-      color: (_w = element.props) == null ? void 0 : _w.shadowColor
+    fontFamily: ((_h = element.props) == null ? void 0 : _h.fontFamily) || DEFAULT_TEXT_PROPS.family,
+    fontStyle: ((_i2 = element.props) == null ? void 0 : _i2.fontStyle) || "normal",
+    fontWeight: ((_j = element.props) == null ? void 0 : _j.fontWeight) || "normal",
+    fill: ((_k = element.props) == null ? void 0 : _k.fill) || DEFAULT_TEXT_PROPS.fill,
+    opacity: ((_l = element.props) == null ? void 0 : _l.opacity) ?? 1,
+    width,
+    splitByGrapheme: false,
+    textAlign: ((_m = element.props) == null ? void 0 : _m.textAlign) || "center",
+    stroke: ((_n2 = element.props) == null ? void 0 : _n2.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_o2 = element.props) == null ? void 0 : _o2.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    shadow: ((_p = element.props) == null ? void 0 : _p.shadowColor) ? new ds({
+      offsetX: ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) && ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v.length) && ((_w = element.props) == null ? void 0 : _w.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_x = element.props) == null ? void 0 : _x.shadowBlur) || 2) / 2,
+      color: (_y = element.props) == null ? void 0 : _y.shadowColor
     }) : void 0
   });
   text.set("id", element.id);
@@ -7589,6 +7594,7 @@ const useTwickCanvas = ({
     if (twickCanvasRef.current) {
       console.log("Destroying twickCanvas");
       twickCanvasRef.current.off("mouse:up", handleMouseUp);
+      twickCanvasRef.current.off("text:editing:exited", onTextEdit);
       twickCanvasRef.current.dispose();
     }
     const { canvas, canvasMetadata } = createCanvas({
@@ -7605,6 +7611,7 @@ const useTwickCanvas = ({
     canvasMetadataRef.current = canvasMetadata;
     videoSizeRef.current = videoSize;
     canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
+    canvas == null ? void 0 : canvas.on("text:editing:exited", onTextEdit);
     canvasResolutionRef.current = canvasSize;
     setTwickCanvas(canvas);
     twickCanvasRef.current = canvas;
@@ -7612,6 +7619,23 @@ const useTwickCanvas = ({
       onCanvasReady(canvas);
     }
   };
+  const onTextEdit = (event) => {
+    if (event.target) {
+      const object = event.target;
+      const elementId = object.get("id");
+      elementMap.current[elementId] = {
+        ...elementMap.current[elementId],
+        props: {
+          ...elementMap.current[elementId].props,
+          text: object.text ?? elementMap.current[elementId].props.text
+        }
+      };
+      onCanvasOperation == null ? void 0 : onCanvasOperation(
+        CANVAS_OPERATIONS.ITEM_UPDATED,
+        elementMap.current[elementId]
+      );
+    }
+  };
   const handleMouseUp = (event) => {
     var _a2, _b, _c;
     if (event.target) {