@twick/canvas 0.0.1

package/dist/index.mjs

@@ -0,0 +1,972 @@
+import { Canvas, Control, controlsUtils, FabricImage, Rect, FabricText, Shadow, Group } from "fabric";
+import { useState, useRef } from "react";
+const isBrowser = typeof window !== "undefined";
+const isCanvasSupported = isBrowser && !!window.HTMLCanvasElement;
+function assertBrowser() {
+  if (!isBrowser) {
+    throw new Error("This code can only run in a browser environment");
+  }
+}
+function assertCanvasSupport() {
+  if (!isCanvasSupported) {
+    throw new Error("Canvas is not supported in this environment");
+  }
+}
+function createCanvas({
+  videoSize,
+  canvasSize,
+  canvasRef,
+  backgroundColor = "#000000",
+  selectionBorderColor = "#2563eb",
+  selectionLineWidth = 2,
+  uniScaleTransform = true,
+  enableRetinaScaling = true,
+  touchZoomThreshold = 10
+}) {
+  assertBrowser();
+  assertCanvasSupport();
+  const canvasMetadata = {
+    width: canvasSize.width,
+    height: canvasSize.height,
+    aspectRatio: canvasSize.width / canvasSize.height,
+    scaleX: canvasSize.width / videoSize.width,
+    scaleY: canvasSize.height / videoSize.height
+  };
+  const canvas = new Canvas(canvasRef, {
+    backgroundColor,
+    width: canvasSize.width,
+    height: canvasSize.height,
+    preserveObjectStacking: true,
+    enableRetinaScaling,
+    selectionBorderColor,
+    selectionLineWidth,
+    uniScaleTransform,
+    touchZoomThreshold,
+    renderOnAddRemove: false,
+    stateful: false,
+    selection: true,
+    skipTargetFind: false,
+    controlsAboveOverlay: true
+  });
+  if (canvasRef) {
+    canvas.setDimensions({
+      width: canvasMetadata.width,
+      height: canvasMetadata.height
+    });
+    canvas.renderAll();
+  }
+  return {
+    canvas,
+    canvasMetadata
+  };
+}
+function reorderElementsByZIndex(canvas) {
+  if (!canvas) return;
+  let backgroundColor = canvas.backgroundColor;
+  const objects = canvas.getObjects();
+  objects.sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
+  canvas.clear();
+  canvas.backgroundColor = backgroundColor;
+  objects.forEach((obj) => canvas.add(obj));
+  canvas.renderAll();
+}
+function clearCanvas(canvas) {
+  if (!canvas) return;
+  canvas.clear();
+  canvas.renderAll();
+}
+function convertToCanvasPosition(x, y, canvasMetadata) {
+  return {
+    x: x * canvasMetadata.scaleX + canvasMetadata.width / 2,
+    y: y * canvasMetadata.scaleY + canvasMetadata.height / 2
+  };
+}
+function convertToVideoPosition(x, y, canvasMetadata, videoSize) {
+  return {
+    x: x / canvasMetadata.scaleX - videoSize.width / 2,
+    y: y / canvasMetadata.scaleY - videoSize.height / 2
+  };
+}
+function getCurrentFrameEffect(item, seekTime) {
+  var _a;
+  let currentFrameEffect;
+  for (let i = 0; i < ((_a = item == null ? void 0 : item.frameEffects) == null ? void 0 : _a.length); i++) {
+    if (item.frameEffects[i].s <= seekTime && item.frameEffects[i].e >= seekTime) {
+      currentFrameEffect = item.frameEffects[i];
+      break;
+    }
+  }
+  return currentFrameEffect;
+}
+const DEFAULT_TEXT_PROPS = {
+  family: "Poppins",
+  size: 48,
+  fill: "#FFFFFF",
+  stroke: "#000000",
+  lineWidth: 0
+};
+const DEFAULT_CAPTION_PROPS = {
+  family: "Poppins",
+  size: 48,
+  fill: "#FFFFFF",
+  fontWeight: 600,
+  stroke: "#000000",
+  lineWidth: 0.2,
+  shadowColor: "#000000",
+  shadowBlur: 2,
+  shadowOffset: [0, 0]
+};
+const CANVAS_OPERATIONS = {
+  ITEM_SELECTED: "ITEM_SELECTED",
+  ITEM_UPDATED: "ITEM_UPDATED",
+  ITEM_DELETED: "ITEM_DELETED",
+  ITEM_ADDED: "ITEM_ADDED",
+  ITEM_GROUPED: "ITEM_GROUPED",
+  ITEM_UNGROUPED: "ITEM_UNGROUPED"
+};
+const ELEMENT_TYPES = {
+  TEXT: "text",
+  CAPTION: "caption",
+  IMAGE: "image",
+  VIDEO: "video",
+  RECT: "rect"
+};
+const disabledControl = new Control({
+  x: 0,
+  y: -0.5,
+  offsetY: 0,
+  cursorStyle: "pointer",
+  actionHandler: () => {
+    return true;
+  },
+  actionName: "scale",
+  render: function(ctx, left, top) {
+    const size = 0;
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.fillStyle = "#red";
+    ctx.fillRect(-0 / 2, -0 / 2, size, size);
+    ctx.restore();
+  }
+});
+const rotateControl = new Control({
+  x: 0,
+  y: -0.5,
+  offsetY: -25,
+  cursorStyle: "crosshair",
+  actionHandler: controlsUtils.rotationWithSnapping,
+  actionName: "rotate",
+  withConnection: true
+});
+async function getThumbnail(videoUrl, seekTime = 0.1, playbackRate = 1) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.playsInline = true;
+    video.autoplay = false;
+    video.preload = "auto";
+    video.playbackRate = playbackRate;
+    let timeoutId;
+    const cleanup = () => {
+      if (video.parentNode) video.remove();
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+    const handleError = () => {
+      var _a;
+      cleanup();
+      reject(new Error(`Failed to load video: ${((_a = video.error) == null ? void 0 : _a.message) || "Unknown error"}`));
+    };
+    const handleSeeked = () => {
+      try {
+        video.pause();
+        const canvas = document.createElement("canvas");
+        const width = video.videoWidth || 640;
+        const height = video.videoHeight || 360;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          cleanup();
+          reject(new Error("Failed to get canvas context"));
+          return;
+        }
+        ctx.drawImage(video, 0, 0, width, height);
+        try {
+          const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+          cleanup();
+          resolve(dataUrl);
+        } catch {
+          canvas.toBlob((blob) => {
+            if (!blob) {
+              cleanup();
+              reject(new Error("Failed to create Blob"));
+              return;
+            }
+            const blobUrl = URL.createObjectURL(blob);
+            cleanup();
+            resolve(blobUrl);
+          }, "image/jpeg", 0.8);
+        }
+      } catch (err) {
+        cleanup();
+        reject(new Error(`Error creating thumbnail: ${err}`));
+      }
+    };
+    video.addEventListener("error", handleError, { once: true });
+    video.addEventListener("seeked", handleSeeked, { once: true });
+    video.addEventListener("loadedmetadata", () => {
+      const playPromise = video.play();
+      if (playPromise !== void 0) {
+        playPromise.then(() => {
+          video.currentTime = seekTime;
+        }).catch(() => {
+          video.currentTime = seekTime;
+        });
+      } else {
+        video.currentTime = seekTime;
+      }
+    }, { once: true });
+    timeoutId = window.setTimeout(() => {
+      cleanup();
+      reject(new Error("Video loading timed out"));
+    }, 5e3);
+    video.src = videoUrl;
+    document.body.appendChild(video);
+  });
+}
+function getObjectFitSize(objectFit, elementSize, containerSize) {
+  const elementAspectRatio = elementSize.width / elementSize.height;
+  const containerAspectRatio = containerSize.width / containerSize.height;
+  switch (objectFit) {
+    case "contain":
+      if (elementAspectRatio > containerAspectRatio) {
+        return {
+          width: containerSize.width,
+          height: containerSize.width / elementAspectRatio
+        };
+      } else {
+        return {
+          width: containerSize.height * elementAspectRatio,
+          height: containerSize.height
+        };
+      }
+    case "cover":
+      if (elementAspectRatio > containerAspectRatio) {
+        return {
+          width: containerSize.height * elementAspectRatio,
+          height: containerSize.height
+        };
+      } else {
+        return {
+          width: containerSize.width,
+          height: containerSize.width / elementAspectRatio
+        };
+      }
+    case "fill":
+      return {
+        width: containerSize.width,
+        height: containerSize.height
+      };
+    default:
+      return {
+        width: elementSize.width,
+        height: elementSize.height
+      };
+  }
+}
+const addTextElement = ({
+  element,
+  index,
+  canvas,
+  canvasMetadata
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  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 FabricText(((_c = element.props) == null ? void 0 : _c.text) || "", {
+    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
+    ),
+    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,
+    stroke: ((_j = element.props) == null ? void 0 : _j.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_k = element.props) == null ? void 0 : _k.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    shadow: ((_l = element.props) == null ? void 0 : _l.shadowColor) ? new Shadow({
+      offsetX: ((_n = (_m = element.props) == null ? void 0 : _m.shadowOffset) == null ? void 0 : _n.length) && ((_p = (_o = element.props) == null ? void 0 : _o.shadowOffset) == null ? void 0 : _p.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_r = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r.length) && ((_s = element.props) == null ? void 0 : _s.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_t = element.props) == null ? void 0 : _t.shadowBlur) || 2) / 2,
+      color: (_u = element.props) == null ? void 0 : _u.shadowColor
+    }) : void 0
+  });
+  text.set("id", element.id);
+  text.set("zIndex", index);
+  text.controls.mt = disabledControl;
+  text.controls.mb = disabledControl;
+  text.controls.ml = disabledControl;
+  text.controls.mr = disabledControl;
+  text.controls.bl = disabledControl;
+  text.controls.br = disabledControl;
+  text.controls.tl = disabledControl;
+  text.controls.tr = disabledControl;
+  text.controls.mtr = rotateControl;
+  canvas.add(text);
+  return text;
+};
+const setImageProps = ({
+  img,
+  element,
+  index,
+  canvasMetadata
+}) => {
+  var _a, _b, _c, _d;
+  const width = (((_a = element.props) == null ? void 0 : _a.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
+  const height = (((_b = element.props) == null ? void 0 : _b.height) || 0) * canvasMetadata.scaleY || canvasMetadata.height;
+  const { x, y } = convertToCanvasPosition(
+    ((_c = element.props) == null ? void 0 : _c.x) || 0,
+    ((_d = element.props) == null ? void 0 : _d.y) || 0,
+    canvasMetadata
+  );
+  console.log(width, height, x, y);
+  img.set("id", element.id);
+  img.set("zIndex", index);
+  img.set("width", width);
+  img.set("height", height);
+  img.set("left", x);
+  img.set("top", y);
+  img.set("selectable", true);
+  img.set("hasControls", true);
+  img.set("touchAction", "all");
+};
+const addCaptionElement = ({
+  element,
+  index,
+  canvas,
+  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;
+  const { x, y } = convertToCanvasPosition(
+    ((_b = (_a = element.props) == null ? void 0 : _a.pos) == null ? void 0 : _b.x) || ((_c = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _c.x) || 0,
+    ((_e = (_d = element.props) == null ? void 0 : _d.pos) == null ? void 0 : _e.y) || ((_f = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _f.y) || 0,
+    canvasMetadata
+  );
+  const caption = new FabricText(((_g = element.props) == null ? void 0 : _g.text) || "", {
+    left: x,
+    top: y,
+    originX: "center",
+    originY: "center",
+    angle: ((_h = element.props) == null ? void 0 : _h.rotation) || 0,
+    fontSize: Math.round(
+      (((_j = (_i = element.props) == null ? void 0 : _i.font) == null ? void 0 : _j.size) || ((_k = captionProps.font) == null ? void 0 : _k.size) || DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+    ),
+    fontFamily: ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) || ((_n = captionProps.font) == null ? void 0 : _n.family) || DEFAULT_CAPTION_PROPS.family,
+    fill: ((_o = element.props) == null ? void 0 : _o.fill) || ((_p = captionProps.color) == null ? void 0 : _p.text) || DEFAULT_CAPTION_PROPS.fill,
+    fontWeight: DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: ((_q = element.props) == null ? void 0 : _q.stroke) || DEFAULT_CAPTION_PROPS.stroke,
+    shadow: new Shadow({
+      offsetX: ((_s = (_r = element.props) == null ? void 0 : _r.shadowOffset) == null ? void 0 : _s[0]) || ((_t = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _t[0]),
+      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v[1]) || ((_w = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _w[1]),
+      blur: ((_x = element.props) == null ? void 0 : _x.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: ((_y = element.props) == null ? void 0 : _y.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+    }),
+    strokeWidth: ((_z = element.props) == null ? void 0 : _z.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+  });
+  caption.set("id", element.id);
+  caption.set("zIndex", index);
+  caption.controls.mt = disabledControl;
+  caption.controls.mb = disabledControl;
+  caption.controls.ml = disabledControl;
+  caption.controls.mr = disabledControl;
+  caption.controls.bl = disabledControl;
+  caption.controls.br = disabledControl;
+  caption.controls.tl = disabledControl;
+  caption.controls.tr = disabledControl;
+  caption.controls.mtr = disabledControl;
+  canvas.add(caption);
+  return caption;
+};
+const addVideoElement = async ({
+  element,
+  index,
+  canvas,
+  snapTime,
+  canvasMetadata,
+  currentFrameEffect
+}) => {
+  var _a;
+  try {
+    const thumbnailUrl = await getThumbnail(
+      ((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.src) || "",
+      snapTime
+    );
+    if (!thumbnailUrl) {
+      console.error("Failed to get thumbnail");
+      return;
+    }
+    return addImageElement({
+      imageUrl: thumbnailUrl,
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      currentFrameEffect
+    });
+  } catch (error) {
+    console.error("Error loading image:", error);
+  }
+};
+const addImageElement = async ({
+  imageUrl,
+  element,
+  index,
+  canvas,
+  canvasMetadata,
+  currentFrameEffect
+}) => {
+  try {
+    const img = await FabricImage.fromURL(imageUrl || element.props.src || "");
+    img.set({
+      originX: "center",
+      originY: "center",
+      lockMovementX: false,
+      lockMovementY: false,
+      lockUniScaling: true,
+      hasControls: false,
+      selectable: false
+    });
+    if (element.frame) {
+      return addMediaGroup({
+        element,
+        img,
+        index,
+        canvas,
+        canvasMetadata,
+        currentFrameEffect
+      });
+    } else {
+      setImageProps({ img, element, index, canvasMetadata });
+      canvas.add(img);
+      return img;
+    }
+  } catch (error) {
+    console.error("Error loading image:", error);
+  }
+};
+const addMediaGroup = ({
+  element,
+  img,
+  index,
+  canvas,
+  canvasMetadata,
+  currentFrameEffect
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  let frameSize;
+  let angle;
+  let framePosition;
+  let frameRadius = 0;
+  if (currentFrameEffect) {
+    frameSize = {
+      width: (((_a = currentFrameEffect.props.frameSize) == null ? void 0 : _a[0]) || 0) * canvasMetadata.scaleX || canvasMetadata.width,
+      height: (((_b = currentFrameEffect.props.frameSize) == null ? void 0 : _b[1]) || 0) * canvasMetadata.scaleY || canvasMetadata.height
+    };
+    angle = currentFrameEffect.props.rotation || 0;
+    framePosition = currentFrameEffect.props.framePosition;
+    if (currentFrameEffect.props.shape === "circle") {
+      frameRadius = frameSize.width / 2;
+    } else {
+      frameRadius = ((_c = currentFrameEffect == null ? void 0 : currentFrameEffect.props) == null ? void 0 : _c.radius) || 0;
+    }
+  } else {
+    frameRadius = ((_d = element == null ? void 0 : element.frame) == null ? void 0 : _d.radius) || 0;
+    frameSize = {
+      width: (((_f = (_e = element == null ? void 0 : element.frame) == null ? void 0 : _e.size) == null ? void 0 : _f[0]) || 0) * canvasMetadata.scaleX || canvasMetadata.width,
+      height: (((_h = (_g = element == null ? void 0 : element.frame) == null ? void 0 : _g.size) == null ? void 0 : _h[1]) || 0) * canvasMetadata.scaleY || canvasMetadata.height
+    };
+    angle = ((_i = element == null ? void 0 : element.frame) == null ? void 0 : _i.rotation) || 0;
+    framePosition = {
+      x: ((_j = element == null ? void 0 : element.frame) == null ? void 0 : _j.x) || 0,
+      y: ((_k = element == null ? void 0 : element.frame) == null ? void 0 : _k.y) || 0
+    };
+  }
+  const newSize = getObjectFitSize(
+    element.objectFit,
+    { width: img.width, height: img.height },
+    frameSize
+  );
+  const frameRect = new Rect({
+    originX: "center",
+    originY: "center",
+    lockMovementX: false,
+    lockMovementY: false,
+    lockUniScaling: true,
+    hasControls: false,
+    selectable: false,
+    width: frameSize.width,
+    height: frameSize.height,
+    stroke: ((_l = element == null ? void 0 : element.frame) == null ? void 0 : _l.stroke) || "#ffffff",
+    strokeWidth: ((_m = element == null ? void 0 : element.frame) == null ? void 0 : _m.lineWidth) || 0,
+    hasRotatingPoint: true,
+    rx: frameRadius || 0,
+    ry: frameRadius || 0
+  });
+  img.set({
+    lockUniScaling: true,
+    originX: "center",
+    originY: "center",
+    width: newSize.width,
+    height: newSize.height
+  });
+  const { x, y } = convertToCanvasPosition(
+    (framePosition == null ? void 0 : framePosition.x) || 0,
+    (framePosition == null ? void 0 : framePosition.y) || 0,
+    canvasMetadata
+  );
+  const groupProps = {
+    left: x,
+    top: y,
+    width: frameSize.width,
+    height: frameSize.height,
+    angle
+  };
+  const group = new Group([frameRect, img], {
+    ...groupProps,
+    originX: "center",
+    originY: "center",
+    angle: groupProps.angle,
+    selectable: true,
+    hasControls: true,
+    hasBorders: true,
+    clipPath: frameRect
+  });
+  group.controls.mt = disabledControl;
+  group.controls.mb = disabledControl;
+  group.controls.ml = disabledControl;
+  group.controls.mr = disabledControl;
+  group.controls.mtr = rotateControl;
+  group.set("id", element.id);
+  group.set("zIndex", index);
+  canvas.add(group);
+  return group;
+};
+const addRectElement = ({
+  element,
+  index,
+  canvas,
+  canvasMetadata
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const { x, y } = convertToCanvasPosition(
+    ((_a = element.props) == null ? void 0 : _a.x) || 0,
+    ((_b = element.props) == null ? void 0 : _b.y) || 0,
+    canvasMetadata
+  );
+  const rect = new Rect({
+    left: x,
+    // X-coordinate on the canvas
+    top: y,
+    // Y-coordinate on the canvas
+    originX: "center",
+    // Center the rectangle based on its position
+    originY: "center",
+    // Center the rectangle based on its position
+    angle: ((_c = element.props) == null ? void 0 : _c.rotation) || 0,
+    // Rotation angle
+    rx: (((_d = element.props) == null ? void 0 : _d.radius) || 0) * canvasMetadata.scaleX,
+    // Horizontal radius for rounded corners
+    ry: (((_e = element.props) == null ? void 0 : _e.radius) || 0) * canvasMetadata.scaleY,
+    // Vertical radius for rounded corners
+    stroke: ((_f = element.props) == null ? void 0 : _f.stroke) || "#000000",
+    // Stroke color
+    strokeWidth: (((_g = element.props) == null ? void 0 : _g.lineWidth) || 0) * canvasMetadata.scaleX,
+    // Scaled stroke width
+    fill: ((_h = element.props) == null ? void 0 : _h.fill) || "#000000",
+    // Fill color
+    opacity: ((_i = element.props) == null ? void 0 : _i.opacity) || 1,
+    // Opacity level
+    width: (((_j = element.props) == null ? void 0 : _j.width) || 0) * canvasMetadata.scaleX,
+    // Scaled width
+    height: (((_k = element.props) == null ? void 0 : _k.height) || 0) * canvasMetadata.scaleY
+    // Scaled height
+  });
+  rect.set("id", element.id);
+  rect.set("zIndex", index);
+  rect.controls.mtr = rotateControl;
+  canvas.add(rect);
+  return rect;
+};
+const addBackgroundColor = ({
+  element,
+  index,
+  canvas,
+  canvasMetadata
+}) => {
+  const bgRect = new Rect({
+    width: canvasMetadata.width,
+    height: canvasMetadata.height,
+    left: canvasMetadata.width / 2,
+    top: canvasMetadata.height / 2,
+    fill: element.backgoundColor ?? "#000000",
+    originX: "center",
+    originY: "center",
+    hasControls: false,
+    hasBorders: false,
+    selectable: false
+  });
+  bgRect.controls.mt = disabledControl;
+  bgRect.controls.mb = disabledControl;
+  bgRect.controls.ml = disabledControl;
+  bgRect.controls.mr = disabledControl;
+  bgRect.controls.bl = disabledControl;
+  bgRect.controls.br = disabledControl;
+  bgRect.controls.tl = disabledControl;
+  bgRect.controls.tr = disabledControl;
+  bgRect.controls.mtr = disabledControl;
+  bgRect.set("zIndex", index - 0.5);
+  canvas.add(bgRect);
+  return bgRect;
+};
+const useTwickCanvas = ({
+  onCanvasReady,
+  onCanvasOperation
+}) => {
+  const [twickCanvas, setTwickCanvas] = useState(null);
+  const elementMap = useRef({});
+  const elementFrameMap = useRef({});
+  const twickCanvasRef = useRef(null);
+  const videoSizeRef = useRef({ width: 1, height: 1 });
+  const canvasMetadataRef = useRef({
+    width: 0,
+    height: 0,
+    aspectRatio: 0,
+    scaleX: 1,
+    scaleY: 1
+  });
+  const onVideoSizeChange = (videoSize) => {
+    if (videoSize) {
+      videoSizeRef.current = videoSize;
+      canvasMetadataRef.current.scaleX = canvasMetadataRef.current.width / videoSize.width;
+      canvasMetadataRef.current.scaleY = canvasMetadataRef.current.height / videoSize.height;
+    }
+  };
+  const buildCanvas = ({
+    videoSize,
+    canvasSize,
+    canvasRef,
+    backgroundColor = "#000000",
+    selectionBorderColor = "#2563eb",
+    selectionLineWidth = 2,
+    uniScaleTransform = true,
+    enableRetinaScaling = true,
+    touchZoomThreshold = 10
+  }) => {
+    if (!canvasRef) return;
+    if (twickCanvasRef.current) {
+      console.log("Destroying twickCanvas");
+      twickCanvasRef.current.off("mouse:up", handleMouseUp);
+      twickCanvasRef.current.dispose();
+    }
+    const { canvas, canvasMetadata } = createCanvas({
+      videoSize,
+      canvasSize,
+      canvasRef,
+      backgroundColor,
+      selectionBorderColor,
+      selectionLineWidth,
+      uniScaleTransform,
+      enableRetinaScaling,
+      touchZoomThreshold
+    });
+    canvasMetadataRef.current = canvasMetadata;
+    videoSizeRef.current = videoSize;
+    canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
+    setTwickCanvas(canvas);
+    twickCanvasRef.current = canvas;
+    if (onCanvasReady) {
+      onCanvasReady(canvas);
+    }
+  };
+  const handleMouseUp = (event) => {
+    var _a, _b;
+    if (event.target) {
+      const object = event.target;
+      const elementId = object.get("id");
+      if (((_a = event.transform) == null ? void 0 : _a.action) === "drag") {
+        const original = event.transform.original;
+        if (object.left === original.left && object.top === original.top) {
+          onCanvasOperation == null ? void 0 : onCanvasOperation(
+            CANVAS_OPERATIONS.ITEM_SELECTED,
+            elementMap.current[elementId]
+          );
+          return;
+        }
+      }
+      switch ((_b = event.transform) == null ? void 0 : _b.action) {
+        case "drag":
+        case "scale":
+        case "scaleX":
+        case "scaleY":
+        case "rotate":
+          const { x, y } = convertToVideoPosition(
+            object.left,
+            object.top,
+            canvasMetadataRef.current,
+            videoSizeRef.current
+          );
+          if (elementMap.current[elementId].type === "caption") {
+            elementMap.current[elementId] = {
+              ...elementMap.current[elementId],
+              props: {
+                ...elementMap.current[elementId].props,
+                pos: {
+                  x,
+                  y
+                }
+              }
+            };
+            onCanvasOperation == null ? void 0 : onCanvasOperation(
+              CANVAS_OPERATIONS.ITEM_UPDATED,
+              elementMap.current[elementId]
+            );
+          } else {
+            if ((object == null ? void 0 : object.type) === "group") {
+              const currentFrameEffect = elementFrameMap.current[elementId];
+              let updatedFrameSize;
+              if (currentFrameEffect) {
+                updatedFrameSize = [
+                  currentFrameEffect.props.frameSize[0] * object.scaleX,
+                  currentFrameEffect.props.frameSize[1] * object.scaleY
+                ];
+              } else {
+                updatedFrameSize = [
+                  elementMap.current[elementId].frame.size[0] * object.scaleX,
+                  elementMap.current[elementId].frame.size[1] * object.scaleY
+                ];
+              }
+              if (currentFrameEffect) {
+                elementMap.current[elementId] = {
+                  ...elementMap.current[elementId],
+                  frameEffects: (elementMap.current[elementId].frameEffects || []).map(
+                    (frameEffect) => frameEffect.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+                      ...frameEffect,
+                      props: {
+                        ...frameEffect.props,
+                        framePosition: {
+                          x,
+                          y
+                        },
+                        frameSize: updatedFrameSize
+                      }
+                    } : frameEffect
+                  )
+                };
+                elementFrameMap.current[elementId] = {
+                  ...elementFrameMap.current[elementId],
+                  framePosition: {
+                    x,
+                    y
+                  },
+                  frameSize: updatedFrameSize
+                };
+              } else {
+                elementMap.current[elementId] = {
+                  ...elementMap.current[elementId],
+                  frame: {
+                    ...elementMap.current[elementId].frame,
+                    rotation: object.angle,
+                    size: updatedFrameSize,
+                    x,
+                    y
+                  }
+                };
+              }
+            } else {
+              if ((object == null ? void 0 : object.type) === "text") {
+                elementMap.current[elementId] = {
+                  ...elementMap.current[elementId],
+                  props: {
+                    ...elementMap.current[elementId].props,
+                    rotation: object.angle,
+                    x,
+                    y
+                  }
+                };
+              } else {
+                elementMap.current[elementId] = {
+                  ...elementMap.current[elementId],
+                  props: {
+                    ...elementMap.current[elementId].props,
+                    rotation: object.angle,
+                    width: elementMap.current[elementId].props.width * object.scaleX,
+                    height: elementMap.current[elementId].props.height * object.scaleY,
+                    x,
+                    y
+                  }
+                };
+              }
+            }
+            onCanvasOperation == null ? void 0 : onCanvasOperation(
+              CANVAS_OPERATIONS.ITEM_UPDATED,
+              elementMap.current[elementId]
+            );
+          }
+          break;
+      }
+    }
+  };
+  const setCanvasElements = async ({
+    elements,
+    seekTime = 0,
+    captionProps,
+    cleanAndAdd = false
+  }) => {
+    if (!twickCanvas) {
+      console.warn("Canvas not initialized");
+      return;
+    }
+    try {
+      if (cleanAndAdd) {
+        clearCanvas(twickCanvas);
+      }
+      await Promise.all(
+        elements.map(async (element, index) => {
+          try {
+            if (!element) {
+              console.warn("Element not found");
+              return;
+            }
+            await addElementToCanvas({
+              element,
+              index,
+              reorder: false,
+              seekTime,
+              captionProps
+            });
+          } catch (error) {
+            console.error(`Error adding element ${element.id}:`, error);
+          }
+        })
+      );
+      reorderElementsByZIndex(twickCanvas);
+    } catch (error) {
+      console.error("Error in setCanvasElements:", error);
+    }
+  };
+  const addElementToCanvas = async ({
+    element,
+    index,
+    reorder = true,
+    seekTime,
+    captionProps
+  }) => {
+    var _a, _b;
+    if (!twickCanvas) {
+      console.warn("Canvas not initialized");
+      return;
+    }
+    switch (element.type) {
+      case ELEMENT_TYPES.VIDEO:
+        const currentFrameEffect = getCurrentFrameEffect(element, seekTime || 0);
+        elementFrameMap.current[element.id] = currentFrameEffect;
+        const snapTime = ((seekTime || 0) - ((element == null ? void 0 : element.s) || 0)) * (((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.playbackRate) || 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) || 0);
+        await addVideoElement({
+          element,
+          index,
+          canvas: twickCanvas,
+          canvasMetadata: canvasMetadataRef.current,
+          currentFrameEffect,
+          snapTime
+        });
+        if (element.timelineType === "scene") {
+          await addBackgroundColor({
+            element,
+            index,
+            canvas: twickCanvas,
+            canvasMetadata: canvasMetadataRef.current
+          });
+        }
+        break;
+      case ELEMENT_TYPES.IMAGE:
+        await addImageElement({
+          element,
+          index,
+          canvas: twickCanvas,
+          canvasMetadata: canvasMetadataRef.current
+        });
+        if (element.timelineType === "scene") {
+          await addBackgroundColor({
+            element,
+            index,
+            canvas: twickCanvas,
+            canvasMetadata: canvasMetadataRef.current
+          });
+        }
+        break;
+      case ELEMENT_TYPES.RECT:
+        await addRectElement({
+          element,
+          index,
+          canvas: twickCanvas,
+          canvasMetadata: canvasMetadataRef.current
+        });
+        break;
+      case ELEMENT_TYPES.TEXT:
+        await addTextElement({
+          element,
+          index,
+          canvas: twickCanvas,
+          canvasMetadata: canvasMetadataRef.current
+        });
+        break;
+      case ELEMENT_TYPES.CAPTION:
+        await addCaptionElement({
+          element,
+          index,
+          canvas: twickCanvas,
+          captionProps,
+          canvasMetadata: canvasMetadataRef.current
+        });
+        break;
+    }
+    elementMap.current[element.id] = element;
+    if (reorder) {
+      reorderElementsByZIndex(twickCanvas);
+    }
+  };
+  return {
+    twickCanvas,
+    buildCanvas,
+    onVideoSizeChange,
+    addElementToCanvas,
+    setCanvasElements
+  };
+};
+export {
+  CANVAS_OPERATIONS,
+  addBackgroundColor,
+  addCaptionElement,
+  addImageElement,
+  addRectElement,
+  addTextElement,
+  addVideoElement,
+  convertToCanvasPosition,
+  convertToVideoPosition,
+  createCanvas,
+  disabledControl,
+  getCurrentFrameEffect,
+  reorderElementsByZIndex,
+  rotateControl,
+  useTwickCanvas
+};
+//# sourceMappingURL=index.mjs.map