@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/shapes/image/ImageShapeUtil.js

@@ -0,0 +1,262 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ImageShapeUtil_exports = {};
+__export(ImageShapeUtil_exports, {
+  ImageShapeUtil: () => ImageShapeUtil
+});
+module.exports = __toCommonJS(ImageShapeUtil_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_HyperlinkButton = require("../shared/HyperlinkButton");
+var import_usePrefersReducedMotion = require("../shared/usePrefersReducedMotion");
+const loadImage = async (url) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("Failed to load image"));
+    image.crossOrigin = "anonymous";
+    image.src = url;
+  });
+};
+const getStateFrame = async (url) => {
+  const image = await loadImage(url);
+  const canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return;
+  ctx.drawImage(image, 0, 0);
+  return canvas.toDataURL();
+};
+async function getDataURIFromURL(url) {
+  const response = await fetch(url);
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+class ImageShapeUtil extends import_editor.BaseBoxShapeUtil {
+  static type = "image";
+  static props = import_editor.imageShapeProps;
+  static migrations = import_editor.imageShapeMigrations;
+  isAspectRatioLocked = () => true;
+  canCrop = () => true;
+  getDefaultProps() {
+    return {
+      w: 100,
+      h: 100,
+      assetId: null,
+      playing: true,
+      url: "",
+      crop: null
+    };
+  }
+  component(shape) {
+    const containerStyle = getContainerStyle(shape);
+    const isCropping = (0, import_editor.useIsCropping)(shape.id);
+    const prefersReducedMotion = (0, import_usePrefersReducedMotion.usePrefersReducedMotion)();
+    const [staticFrameSrc, setStaticFrameSrc] = (0, import_react.useState)("");
+    const asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : void 0;
+    if (asset?.type === "bookmark") {
+      throw Error("Bookmark assets can't be rendered as images");
+    }
+    const isSelected = (0, import_editor.useValue)(
+      "onlySelectedShape",
+      () => shape.id === this.editor.getOnlySelectedShape()?.id,
+      [this.editor]
+    );
+    const showCropPreview = isSelected && isCropping && this.editor.isInAny("select.crop", "select.cropping", "select.pointing_crop_handle");
+    const reduceMotion = prefersReducedMotion && (asset?.props.mimeType?.includes("video") || asset?.props.mimeType?.includes("gif"));
+    (0, import_react.useEffect)(() => {
+      if (asset?.props.src && "mimeType" in asset.props && asset?.props.mimeType === "image/gif") {
+        let cancelled = false;
+        const run = async () => {
+          const newStaticFrame = await getStateFrame(asset.props.src);
+          if (cancelled)
+            return;
+          if (newStaticFrame) {
+            setStaticFrameSrc(newStaticFrame);
+          }
+        };
+        run();
+        return () => {
+          cancelled = true;
+        };
+      }
+    }, [prefersReducedMotion, asset?.props]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      asset?.props.src && showCropPreview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "tl-image",
+          style: {
+            opacity: 0.1,
+            backgroundImage: `url(${!shape.props.playing || reduceMotion ? staticFrameSrc : asset.props.src})`
+          },
+          draggable: false
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_editor.HTMLContainer,
+        {
+          id: shape.id,
+          style: { overflow: "hidden", width: shape.props.w, height: shape.props.h },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tl-image-container", style: containerStyle, children: [
+              asset?.props.src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "tl-image",
+                  style: {
+                    backgroundImage: `url(${!shape.props.playing || reduceMotion ? staticFrameSrc : asset.props.src})`
+                  },
+                  draggable: false
+                }
+              ) : null,
+              asset?.props.isAnimated && !shape.props.playing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-image__tg", children: "GIF" })
+            ] }),
+            "url" in shape.props && shape.props.url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HyperlinkButton.HyperlinkButton, { url: shape.props.url, zoomLevel: this.editor.getZoomLevel() })
+          ]
+        }
+      )
+    ] });
+  }
+  indicator(shape) {
+    const isCropping = (0, import_editor.useIsCropping)(shape.id);
+    if (isCropping) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: (0, import_editor.toDomPrecision)(shape.props.w), height: (0, import_editor.toDomPrecision)(shape.props.h) });
+  }
+  async toSvg(shape) {
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null;
+    let src = asset?.props.src || "";
+    if (src && src.startsWith("http")) {
+      src = await getDataURIFromURL(src) || "";
+    }
+    const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    image.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);
+    const containerStyle = getContainerStyle(shape);
+    const crop = shape.props.crop;
+    if (containerStyle.transform && crop) {
+      const { transform, width, height } = containerStyle;
+      const croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width;
+      const croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height;
+      const points = [
+        new import_editor.Vec2d(0, 0),
+        new import_editor.Vec2d(croppedWidth, 0),
+        new import_editor.Vec2d(croppedWidth, croppedHeight),
+        new import_editor.Vec2d(0, croppedHeight)
+      ];
+      const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+      polygon.setAttribute("points", points.map((p) => `${p.x},${p.y}`).join(" "));
+      const clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+      clipPath.setAttribute("id", "cropClipPath");
+      clipPath.appendChild(polygon);
+      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+      defs.appendChild(clipPath);
+      g.appendChild(defs);
+      const innerElement = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      innerElement.setAttribute("clip-path", "url(#cropClipPath)");
+      image.setAttribute("width", width.toString());
+      image.setAttribute("height", height.toString());
+      image.style.transform = transform;
+      innerElement.appendChild(image);
+      g.appendChild(innerElement);
+    } else {
+      image.setAttribute("width", shape.props.w.toString());
+      image.setAttribute("height", shape.props.h.toString());
+      g.appendChild(image);
+    }
+    return g;
+  }
+  onDoubleClick = (shape) => {
+    const asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : void 0;
+    if (!asset)
+      return;
+    const canPlay = asset.props.src && "mimeType" in asset.props && asset.props.mimeType === "image/gif";
+    if (!canPlay)
+      return;
+    this.editor.updateShapes([
+      {
+        type: "image",
+        id: shape.id,
+        props: {
+          playing: !shape.props.playing
+        }
+      }
+    ]);
+  };
+  onDoubleClickEdge = (shape) => {
+    const props = shape.props;
+    if (!props)
+      return;
+    if (this.editor.getCroppingShapeId() !== shape.id) {
+      return;
+    }
+    const crop = (0, import_editor.deepCopy)(props.crop) || {
+      topLeft: { x: 0, y: 0 },
+      bottomRight: { x: 1, y: 1 }
+    };
+    const w = 1 / (crop.bottomRight.x - crop.topLeft.x) * shape.props.w;
+    const h = 1 / (crop.bottomRight.y - crop.topLeft.y) * shape.props.h;
+    const pointDelta = new import_editor.Vec2d(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation);
+    const partial = {
+      id: shape.id,
+      type: shape.type,
+      x: shape.x - pointDelta.x,
+      y: shape.y - pointDelta.y,
+      props: {
+        crop: {
+          topLeft: { x: 0, y: 0 },
+          bottomRight: { x: 1, y: 1 }
+        },
+        w,
+        h
+      }
+    };
+    this.editor.updateShapes([partial]);
+  };
+}
+function getContainerStyle(shape) {
+  const crop = shape.props.crop;
+  const topLeft = crop?.topLeft;
+  if (!topLeft) {
+    return {
+      width: shape.props.w,
+      height: shape.props.h
+    };
+  }
+  const w = 1 / (crop.bottomRight.x - crop.topLeft.x) * shape.props.w;
+  const h = 1 / (crop.bottomRight.y - crop.topLeft.y) * shape.props.h;
+  const offsetX = -topLeft.x * w;
+  const offsetY = -topLeft.y * h;
+  return {
+    transform: `translate(${offsetX}px, ${offsetY}px)`,
+    width: w,
+    height: h
+  };
+}
+//# sourceMappingURL=ImageShapeUtil.js.map

package/dist-cjs/lib/shapes/image/ImageShapeUtil.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/image/ImageShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLImageShape,\n\tTLOnDoubleClickHandler,\n\tTLShapePartial,\n\tVec2d,\n\tdeepCopy,\n\timageShapeMigrations,\n\timageShapeProps,\n\ttoDomPrecision,\n\tuseIsCropping,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport { useEffect, useState } from 'react'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nconst loadImage = async (url: string): Promise<HTMLImageElement> => {\n\treturn new Promise((resolve, reject) => {\n\t\tconst image = new Image()\n\t\timage.onload = () => resolve(image)\n\t\timage.onerror = () => reject(new Error('Failed to load image'))\n\t\timage.crossOrigin = 'anonymous'\n\t\timage.src = url\n\t})\n}\n\nconst getStateFrame = async (url: string) => {\n\tconst image = await loadImage(url)\n\n\tconst canvas = document.createElement('canvas')\n\tcanvas.width = image.width\n\tcanvas.height = image.height\n\n\tconst ctx = canvas.getContext('2d')\n\tif (!ctx) return\n\n\tctx.drawImage(image, 0, 0)\n\treturn canvas.toDataURL()\n}\n\nasync function getDataURIFromURL(url: string): Promise<string> {\n\tconst response = await fetch(url)\n\tconst blob = await response.blob()\n\treturn new Promise((resolve, reject) => {\n\t\tconst reader = new FileReader()\n\t\treader.onloadend = () => resolve(reader.result as string)\n\t\treader.onerror = reject\n\t\treader.readAsDataURL(blob)\n\t})\n}\n\n/** @public */\nexport class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {\n\tstatic override type = 'image' as const\n\tstatic override props = imageShapeProps\n\tstatic override migrations = imageShapeMigrations\n\n\toverride isAspectRatioLocked = () => true\n\toverride canCrop = () => true\n\n\toverride getDefaultProps(): TLImageShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t\tcrop: null,\n\t\t}\n\t}\n\n\tcomponent(shape: TLImageShape) {\n\t\tconst containerStyle = getContainerStyle(shape)\n\t\tconst isCropping = useIsCropping(shape.id)\n\t\tconst prefersReducedMotion = usePrefersReducedMotion()\n\t\tconst [staticFrameSrc, setStaticFrameSrc] = useState('')\n\n\t\tconst asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : undefined\n\n\t\tif (asset?.type === 'bookmark') {\n\t\t\tthrow Error(\"Bookmark assets can't be rendered as images\")\n\t\t}\n\n\t\tconst isSelected = useValue(\n\t\t\t'onlySelectedShape',\n\t\t\t() => shape.id === this.editor.getOnlySelectedShape()?.id,\n\t\t\t[this.editor]\n\t\t)\n\n\t\tconst showCropPreview =\n\t\t\tisSelected &&\n\t\t\tisCropping &&\n\t\t\tthis.editor.isInAny('select.crop', 'select.cropping', 'select.pointing_crop_handle')\n\n\t\t// We only want to reduce motion for mimeTypes that have motion\n\t\tconst reduceMotion =\n\t\t\tprefersReducedMotion &&\n\t\t\t(asset?.props.mimeType?.includes('video') || asset?.props.mimeType?.includes('gif'))\n\n\t\tuseEffect(() => {\n\t\t\tif (asset?.props.src && 'mimeType' in asset.props && asset?.props.mimeType === 'image/gif') {\n\t\t\t\tlet cancelled = false\n\t\t\t\tconst run = async () => {\n\t\t\t\t\tconst newStaticFrame = await getStateFrame(asset.props.src!)\n\t\t\t\t\tif (cancelled) return\n\t\t\t\t\tif (newStaticFrame) {\n\t\t\t\t\t\tsetStaticFrameSrc(newStaticFrame)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\trun()\n\n\t\t\t\treturn () => {\n\t\t\t\t\tcancelled = true\n\t\t\t\t}\n\t\t\t}\n\t\t}, [prefersReducedMotion, asset?.props])\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{asset?.props.src && showCropPreview && (\n\t\t\t\t\t<div style={containerStyle}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${\n\t\t\t\t\t\t\t\t\t!shape.props.playing || reduceMotion ? staticFrameSrc : asset.props.src\n\t\t\t\t\t\t\t\t})`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<HTMLContainer\n\t\t\t\t\tid={shape.id}\n\t\t\t\t\tstyle={{ overflow: 'hidden', width: shape.props.w, height: shape.props.h }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tl-image-container\" style={containerStyle}>\n\t\t\t\t\t\t{asset?.props.src ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tl-image\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundImage: `url(${\n\t\t\t\t\t\t\t\t\t\t!shape.props.playing || reduceMotion ? staticFrameSrc : asset.props.src\n\t\t\t\t\t\t\t\t\t})`,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{asset?.props.isAnimated && !shape.props.playing && (\n\t\t\t\t\t\t\t<div className=\"tl-image__tg\">GIF</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{'url' in shape.props && shape.props.url && (\n\t\t\t\t\t\t<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />\n\t\t\t\t\t)}\n\t\t\t\t</HTMLContainer>\n\t\t\t</>\n\t\t)\n\t}\n\n\tindicator(shape: TLImageShape) {\n\t\tconst isCropping = useIsCropping(shape.id)\n\t\tif (isCropping) {\n\t\t\treturn null\n\t\t}\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLImageShape) {\n\t\tconst g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\t\tconst asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null\n\n\t\tlet src = asset?.props.src || ''\n\t\tif (src && src.startsWith('http')) {\n\t\t\t// If it's a remote image, we need to fetch it and convert it to a data URI\n\t\t\tsrc = (await getDataURIFromURL(src)) || ''\n\t\t}\n\n\t\tconst image = document.createElementNS('http://www.w3.org/2000/svg', 'image')\n\t\timage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', src)\n\t\tconst containerStyle = getContainerStyle(shape)\n\t\tconst crop = shape.props.crop\n\t\tif (containerStyle.transform && crop) {\n\t\t\tconst { transform, width, height } = containerStyle\n\t\t\tconst croppedWidth = (crop.bottomRight.x - crop.topLeft.x) * width\n\t\t\tconst croppedHeight = (crop.bottomRight.y - crop.topLeft.y) * height\n\n\t\t\tconst points = [\n\t\t\t\tnew Vec2d(0, 0),\n\t\t\t\tnew Vec2d(croppedWidth, 0),\n\t\t\t\tnew Vec2d(croppedWidth, croppedHeight),\n\t\t\t\tnew Vec2d(0, croppedHeight),\n\t\t\t]\n\n\t\t\tconst polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')\n\t\t\tpolygon.setAttribute('points', points.map((p) => `${p.x},${p.y}`).join(' '))\n\n\t\t\tconst clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath')\n\t\t\tclipPath.setAttribute('id', 'cropClipPath')\n\t\t\tclipPath.appendChild(polygon)\n\n\t\t\tconst defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')\n\t\t\tdefs.appendChild(clipPath)\n\t\t\tg.appendChild(defs)\n\n\t\t\tconst innerElement = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\t\t\tinnerElement.setAttribute('clip-path', 'url(#cropClipPath)')\n\t\t\timage.setAttribute('width', width.toString())\n\t\t\timage.setAttribute('height', height.toString())\n\t\t\timage.style.transform = transform\n\t\t\tinnerElement.appendChild(image)\n\t\t\tg.appendChild(innerElement)\n\t\t} else {\n\t\t\timage.setAttribute('width', shape.props.w.toString())\n\t\t\timage.setAttribute('height', shape.props.h.toString())\n\t\t\tg.appendChild(image)\n\t\t}\n\n\t\treturn g\n\t}\n\n\toverride onDoubleClick = (shape: TLImageShape) => {\n\t\tconst asset = shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : undefined\n\n\t\tif (!asset) return\n\n\t\tconst canPlay =\n\t\t\tasset.props.src && 'mimeType' in asset.props && asset.props.mimeType === 'image/gif'\n\n\t\tif (!canPlay) return\n\n\t\tthis.editor.updateShapes([\n\t\t\t{\n\t\t\t\ttype: 'image',\n\t\t\t\tid: shape.id,\n\t\t\t\tprops: {\n\t\t\t\t\tplaying: !shape.props.playing,\n\t\t\t\t},\n\t\t\t},\n\t\t])\n\t}\n\n\toverride onDoubleClickEdge: TLOnDoubleClickHandler<TLImageShape> = (shape) => {\n\t\tconst props = shape.props\n\t\tif (!props) return\n\n\t\tif (this.editor.getCroppingShapeId() !== shape.id) {\n\t\t\treturn\n\t\t}\n\n\t\tconst crop = deepCopy(props.crop) || {\n\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t}\n\n\t\t// The true asset dimensions\n\t\tconst w = (1 / (crop.bottomRight.x - crop.topLeft.x)) * shape.props.w\n\t\tconst h = (1 / (crop.bottomRight.y - crop.topLeft.y)) * shape.props.h\n\n\t\tconst pointDelta = new Vec2d(crop.topLeft.x * w, crop.topLeft.y * h).rot(shape.rotation)\n\n\t\tconst partial: TLShapePartial<TLImageShape> = {\n\t\t\tid: shape.id,\n\t\t\ttype: shape.type,\n\t\t\tx: shape.x - pointDelta.x,\n\t\t\ty: shape.y - pointDelta.y,\n\t\t\tprops: {\n\t\t\t\tcrop: {\n\t\t\t\t\ttopLeft: { x: 0, y: 0 },\n\t\t\t\t\tbottomRight: { x: 1, y: 1 },\n\t\t\t\t},\n\t\t\t\tw,\n\t\t\t\th,\n\t\t\t},\n\t\t}\n\n\t\tthis.editor.updateShapes([partial])\n\t}\n}\n\n/**\n * When an image is cropped we need to translate the image to show the portion withing the cropped\n * area. We do this by translating the image by the negative of the top left corner of the crop\n * area.\n *\n * @param shape - Shape The image shape for which to get the container style\n * @returns - Styles to apply to the image container\n */\nfunction getContainerStyle(shape: TLImageShape) {\n\tconst crop = shape.props.crop\n\tconst topLeft = crop?.topLeft\n\tif (!topLeft) {\n\t\treturn {\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t}\n\t}\n\n\tconst w = (1 / (crop.bottomRight.x - crop.topLeft.x)) * shape.props.w\n\tconst h = (1 / (crop.bottomRight.y - crop.topLeft.y)) * shape.props.h\n\n\tconst offsetX = -topLeft.x * w\n\tconst offsetY = -topLeft.y * h\n\treturn {\n\t\ttransform: `translate(${offsetX}px, ${offsetY}px)`,\n\t\twidth: w,\n\t\theight: h,\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/lib/shapes/line/LineShapeTool.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LineShapeTool_exports = {};
+__export(LineShapeTool_exports, {
+  LineShapeTool: () => LineShapeTool
+});
+module.exports = __toCommonJS(LineShapeTool_exports);
+var import_editor = require("@bigbluebutton/editor");
+var import_Idle = require("./toolStates/Idle");
+var import_Pointing = require("./toolStates/Pointing");
+class LineShapeTool extends import_editor.StateNode {
+  static id = "line";
+  static initial = "idle";
+  static children = () => [import_Idle.Idle, import_Pointing.Pointing];
+  shapeType = "line";
+}
+//# sourceMappingURL=LineShapeTool.js.map

package/dist-cjs/lib/shapes/line/LineShapeTool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/line/LineShapeTool.ts"],
+  "sourcesContent": ["import { StateNode } from '@bigbluebutton/editor'\nimport { Idle } from './toolStates/Idle'\nimport { Pointing } from './toolStates/Pointing'\n\n/** @public */\nexport class LineShapeTool extends StateNode {\n\tstatic override id = 'line'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing]\n\n\toverride shapeType = 'line'\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA0B;AAC1B,kBAAqB;AACrB,sBAAyB;AAGlB,MAAM,sBAAsB,wBAAU;AAAA,EAC5C,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,wBAAQ;AAAA,EAEvC,YAAY;AACtB;",
+  "names": []
+}