@twick/canvas 0.14.17 → 0.14.20

package/README.md

@@ -20,6 +20,8 @@ npm install @twick/canvas
 pnpm add @twick/canvas
 ```
 
+**Note:** All required dependencies (`@twick/media-utils`) are automatically installed with `@twick/canvas`.
+
 ## Quick Start
 
 ### Basic Canvas Setup

package/dist/index.js

@@ -93,8 +93,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 fabric.Canvas(canvasRef, {
     backgroundColor,
@@ -344,35 +344,40 @@ const addTextElement = ({
   canvas,
   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;
+  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;
   const { x, y } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
     canvasMetadata
   );
-  const text = new fabric.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;
+  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
+    width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+  }
+  const text = new fabric.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,
-    fontSize: Math.round(
-      (((_e = element.props) == null ? void 0 : _e.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: ((_i = element.props) == null ? void 0 : _i.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: ((_n = element.props) == null ? void 0 : _n.shadowColor) ? new fabric.Shadow({
-      offsetX: ((_p = (_o = element.props) == null ? void 0 : _o.shadowOffset) == null ? void 0 : _p.length) && ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t.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: ((_i = element.props) == null ? void 0 : _i.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: ((_n = element.props) == null ? void 0 : _n.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_o = element.props) == null ? void 0 : _o.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    shadow: ((_p = element.props) == null ? void 0 : _p.shadowColor) ? new fabric.Shadow({
+      offsetX: ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) && ((_t = (_s = element.props) == null ? void 0 : _s.shadowOffset) == null ? void 0 : _t.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);
@@ -784,6 +789,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({
@@ -800,6 +806,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;
@@ -807,6 +814,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 _a, _b, _c;
     if (event.target) {