@twick/video-editor 0.14.16 → 0.14.18

package/dist/index.js

@@ -6898,8 +6898,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         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) {