@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs

@@ -0,0 +1,198 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Circle2d,
+  Polygon2d,
+  SVGContainer,
+  ShapeUtil,
+  getDefaultColorTheme,
+  highlightShapeMigrations,
+  highlightShapeProps,
+  last,
+  rng
+} from "@bigbluebutton/editor";
+import { getHighlightFreehandSettings, getPointsFromSegments } from "../draw/getPath.mjs";
+import { useDefaultColorTheme } from "../shared/ShapeFill.mjs";
+import { FONT_SIZES } from "../shared/default-shape-constants.mjs";
+import { getStrokeOutlinePoints } from "../shared/freehand/getStrokeOutlinePoints.mjs";
+import { getStrokePoints } from "../shared/freehand/getStrokePoints.mjs";
+import { setStrokePointRadii } from "../shared/freehand/setStrokePointRadii.mjs";
+import { getSvgPathFromStrokePoints } from "../shared/freehand/svg.mjs";
+import { useColorSpace } from "../shared/useColorSpace.mjs";
+import { useForceSolid } from "../shared/useForceSolid.mjs";
+const OVERLAY_OPACITY = 0.35;
+const UNDERLAY_OPACITY = 0.82;
+class HighlightShapeUtil extends ShapeUtil {
+  static type = "highlight";
+  static props = highlightShapeProps;
+  static migrations = highlightShapeMigrations;
+  hideResizeHandles = (shape) => getIsDot(shape);
+  hideRotateHandle = (shape) => getIsDot(shape);
+  hideSelectionBoundsFg = (shape) => getIsDot(shape);
+  getDefaultProps() {
+    return {
+      segments: [],
+      color: "black",
+      size: "m",
+      isComplete: false,
+      isPen: false
+    };
+  }
+  getGeometry(shape) {
+    const strokeWidth = getStrokeWidth(shape);
+    if (getIsDot(shape)) {
+      return new Circle2d({
+        x: -strokeWidth / 2,
+        y: -strokeWidth / 2,
+        radius: strokeWidth / 2,
+        isFilled: true
+      });
+    }
+    const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, true);
+    const opts = getHighlightFreehandSettings({ strokeWidth: sw, showAsComplete: true });
+    setStrokePointRadii(strokePoints, opts);
+    return new Polygon2d({
+      points: getStrokeOutlinePoints(strokePoints, opts),
+      isFilled: true
+    });
+  }
+  component(shape) {
+    return /* @__PURE__ */ jsx(
+      HighlightRenderer,
+      {
+        strokeWidth: getStrokeWidth(shape),
+        shape,
+        opacity: OVERLAY_OPACITY
+      }
+    );
+  }
+  backgroundComponent(shape) {
+    return /* @__PURE__ */ jsx(
+      HighlightRenderer,
+      {
+        strokeWidth: getStrokeWidth(shape),
+        shape,
+        opacity: UNDERLAY_OPACITY
+      }
+    );
+  }
+  indicator(shape) {
+    const forceSolid = useForceSolid();
+    const strokeWidth = getStrokeWidth(shape);
+    const allPointsFromSegments = getPointsFromSegments(shape.props.segments);
+    let sw = strokeWidth;
+    if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
+      sw += rng(shape.id)() * (strokeWidth / 6);
+    }
+    const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === "straight";
+    const options = getHighlightFreehandSettings({
+      strokeWidth,
+      showAsComplete
+    });
+    const strokePoints = getStrokePoints(allPointsFromSegments, options);
+    let strokePath;
+    if (strokePoints.length < 2) {
+      strokePath = getIndicatorDot(allPointsFromSegments[0], sw);
+    } else {
+      strokePath = getSvgPathFromStrokePoints(strokePoints, false);
+    }
+    return /* @__PURE__ */ jsx("path", { d: strokePath });
+  }
+  toSvg(shape) {
+    const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() });
+    return highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme);
+  }
+  toBackgroundSvg(shape) {
+    const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() });
+    return highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme);
+  }
+  onResize = (shape, info) => {
+    const { scaleX, scaleY } = info;
+    const newSegments = [];
+    for (const segment of shape.props.segments) {
+      newSegments.push({
+        ...segment,
+        points: segment.points.map(({ x, y, z }) => {
+          return {
+            x: scaleX * x,
+            y: scaleY * y,
+            z
+          };
+        })
+      });
+    }
+    return {
+      props: {
+        segments: newSegments
+      }
+    };
+  };
+}
+function getShapeDot(point) {
+  const r = 0.1;
+  return `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
+}
+function getIndicatorDot(point, sw) {
+  const r = sw / 2;
+  return `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0`;
+}
+function getHighlightStrokePoints(shape, strokeWidth, forceSolid) {
+  const allPointsFromSegments = getPointsFromSegments(shape.props.segments);
+  const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === "straight";
+  let sw = strokeWidth;
+  if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
+    sw += rng(shape.id)() * (strokeWidth / 6);
+  }
+  const options = getHighlightFreehandSettings({
+    strokeWidth: sw,
+    showAsComplete
+  });
+  const strokePoints = getStrokePoints(allPointsFromSegments, options);
+  return { strokePoints, sw };
+}
+function getHighlightSvgPath(shape, strokeWidth, forceSolid) {
+  const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid);
+  const solidStrokePath = strokePoints.length > 1 ? getSvgPathFromStrokePoints(strokePoints, false) : getShapeDot(shape.props.segments[0].points[0]);
+  return { solidStrokePath, sw };
+}
+function HighlightRenderer({
+  strokeWidth,
+  shape,
+  opacity
+}) {
+  const theme = useDefaultColorTheme();
+  const forceSolid = useForceSolid();
+  const { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, forceSolid);
+  const colorSpace = useColorSpace();
+  const color = theme[shape.props.color].highlight[colorSpace];
+  return /* @__PURE__ */ jsx(SVGContainer, { id: shape.id, style: { opacity }, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: solidStrokePath,
+      strokeLinecap: "round",
+      fill: "none",
+      pointerEvents: "all",
+      stroke: color,
+      strokeWidth: sw
+    }
+  ) });
+}
+function highlighterToSvg(strokeWidth, shape, opacity, theme) {
+  const { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, false);
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", solidStrokePath);
+  path.setAttribute("fill", "none");
+  path.setAttribute("stroke", theme[shape.props.color].highlight.srgb);
+  path.setAttribute("stroke-width", `${sw}`);
+  path.setAttribute("opacity", `${opacity}`);
+  return path;
+}
+function getStrokeWidth(shape) {
+  return FONT_SIZES[shape.props.size] * 1.12;
+}
+function getIsDot(shape) {
+  return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2;
+}
+export {
+  HighlightShapeUtil
+};
+//# sourceMappingURL=HighlightShapeUtil.mjs.map

package/dist-esm/lib/shapes/highlight/HighlightShapeUtil.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/highlight/HighlightShapeUtil.tsx"],
+  "sourcesContent": ["/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n\tCircle2d,\n\tPolygon2d,\n\tSVGContainer,\n\tShapeUtil,\n\tTLDefaultColorTheme,\n\tTLDrawShapeSegment,\n\tTLHighlightShape,\n\tTLOnResizeHandler,\n\tVecLike,\n\tgetDefaultColorTheme,\n\thighlightShapeMigrations,\n\thighlightShapeProps,\n\tlast,\n\trng,\n} from '@bigbluebutton/editor'\nimport { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'\nimport { useDefaultColorTheme } from '../shared/ShapeFill'\nimport { FONT_SIZES } from '../shared/default-shape-constants'\nimport { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'\nimport { getStrokePoints } from '../shared/freehand/getStrokePoints'\nimport { setStrokePointRadii } from '../shared/freehand/setStrokePointRadii'\nimport { getSvgPathFromStrokePoints } from '../shared/freehand/svg'\nimport { useColorSpace } from '../shared/useColorSpace'\nimport { useForceSolid } from '../shared/useForceSolid'\n\nconst OVERLAY_OPACITY = 0.35\nconst UNDERLAY_OPACITY = 0.82\n\n/** @public */\nexport class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {\n\tstatic override type = 'highlight' as const\n\tstatic override props = highlightShapeProps\n\tstatic override migrations = highlightShapeMigrations\n\n\toverride hideResizeHandles = (shape: TLHighlightShape) => getIsDot(shape)\n\toverride hideRotateHandle = (shape: TLHighlightShape) => getIsDot(shape)\n\toverride hideSelectionBoundsFg = (shape: TLHighlightShape) => getIsDot(shape)\n\n\toverride getDefaultProps(): TLHighlightShape['props'] {\n\t\treturn {\n\t\t\tsegments: [],\n\t\t\tcolor: 'black',\n\t\t\tsize: 'm',\n\t\t\tisComplete: false,\n\t\t\tisPen: false,\n\t\t}\n\t}\n\n\tgetGeometry(shape: TLHighlightShape) {\n\t\tconst strokeWidth = getStrokeWidth(shape)\n\t\tif (getIsDot(shape)) {\n\t\t\treturn new Circle2d({\n\t\t\t\tx: -strokeWidth / 2,\n\t\t\t\ty: -strokeWidth / 2,\n\t\t\t\tradius: strokeWidth / 2,\n\t\t\t\tisFilled: true,\n\t\t\t})\n\t\t}\n\n\t\tconst { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, true)\n\t\tconst opts = getHighlightFreehandSettings({ strokeWidth: sw, showAsComplete: true })\n\t\tsetStrokePointRadii(strokePoints, opts)\n\n\t\treturn new Polygon2d({\n\t\t\tpoints: getStrokeOutlinePoints(strokePoints, opts),\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: TLHighlightShape) {\n\t\treturn (\n\t\t\t<HighlightRenderer\n\t\t\t\tstrokeWidth={getStrokeWidth(shape)}\n\t\t\t\tshape={shape}\n\t\t\t\topacity={OVERLAY_OPACITY}\n\t\t\t/>\n\t\t)\n\t}\n\n\toverride backgroundComponent(shape: TLHighlightShape) {\n\t\treturn (\n\t\t\t<HighlightRenderer\n\t\t\t\tstrokeWidth={getStrokeWidth(shape)}\n\t\t\t\tshape={shape}\n\t\t\t\topacity={UNDERLAY_OPACITY}\n\t\t\t/>\n\t\t)\n\t}\n\n\tindicator(shape: TLHighlightShape) {\n\t\tconst forceSolid = useForceSolid()\n\t\tconst strokeWidth = getStrokeWidth(shape)\n\t\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\n\t\tlet sw = strokeWidth\n\t\tif (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {\n\t\t\tsw += rng(shape.id)() * (strokeWidth / 6)\n\t\t}\n\n\t\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\t\tconst options = getHighlightFreehandSettings({\n\t\t\tstrokeWidth,\n\t\t\tshowAsComplete,\n\t\t})\n\t\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\n\t\tlet strokePath\n\t\tif (strokePoints.length < 2) {\n\t\t\tstrokePath = getIndicatorDot(allPointsFromSegments[0], sw)\n\t\t} else {\n\t\t\tstrokePath = getSvgPathFromStrokePoints(strokePoints, false)\n\t\t}\n\n\t\treturn <path d={strokePath} />\n\t}\n\n\toverride toSvg(shape: TLHighlightShape) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\treturn highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme)\n\t}\n\n\toverride toBackgroundSvg(shape: TLHighlightShape) {\n\t\tconst theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })\n\t\treturn highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme)\n\t}\n\n\toverride onResize: TLOnResizeHandler<TLHighlightShape> = (shape, info) => {\n\t\tconst { scaleX, scaleY } = info\n\n\t\tconst newSegments: TLDrawShapeSegment[] = []\n\n\t\tfor (const segment of shape.props.segments) {\n\t\t\tnewSegments.push({\n\t\t\t\t...segment,\n\t\t\t\tpoints: segment.points.map(({ x, y, z }) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tx: scaleX * x,\n\t\t\t\t\t\ty: scaleY * y,\n\t\t\t\t\t\tz,\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tprops: {\n\t\t\t\tsegments: newSegments,\n\t\t\t},\n\t\t}\n\t}\n}\n\nfunction getShapeDot(point: VecLike) {\n\tconst r = 0.1\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getIndicatorDot(point: VecLike, sw: number) {\n\tconst r = sw / 2\n\treturn `M ${point.x} ${point.y} m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${\n\t\tr * 2\n\t},0`\n}\n\nfunction getHighlightStrokePoints(\n\tshape: TLHighlightShape,\n\tstrokeWidth: number,\n\tforceSolid: boolean\n) {\n\tconst allPointsFromSegments = getPointsFromSegments(shape.props.segments)\n\tconst showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'\n\n\tlet sw = strokeWidth\n\tif (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {\n\t\tsw += rng(shape.id)() * (strokeWidth / 6)\n\t}\n\n\tconst options = getHighlightFreehandSettings({\n\t\tstrokeWidth: sw,\n\t\tshowAsComplete,\n\t})\n\tconst strokePoints = getStrokePoints(allPointsFromSegments, options)\n\n\treturn { strokePoints, sw }\n}\n\nfunction getHighlightSvgPath(shape: TLHighlightShape, strokeWidth: number, forceSolid: boolean) {\n\tconst { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid)\n\n\tconst solidStrokePath =\n\t\tstrokePoints.length > 1\n\t\t\t? getSvgPathFromStrokePoints(strokePoints, false)\n\t\t\t: getShapeDot(shape.props.segments[0].points[0])\n\n\treturn { solidStrokePath, sw }\n}\n\nfunction HighlightRenderer({\n\tstrokeWidth,\n\tshape,\n\topacity,\n}: {\n\tstrokeWidth: number\n\tshape: TLHighlightShape\n\topacity?: number\n}) {\n\tconst theme = useDefaultColorTheme()\n\tconst forceSolid = useForceSolid()\n\tconst { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, forceSolid)\n\tconst colorSpace = useColorSpace()\n\tconst color = theme[shape.props.color].highlight[colorSpace]\n\n\treturn (\n\t\t<SVGContainer id={shape.id} style={{ opacity }}>\n\t\t\t<path\n\t\t\t\td={solidStrokePath}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tpointerEvents=\"all\"\n\t\t\t\tstroke={color}\n\t\t\t\tstrokeWidth={sw}\n\t\t\t/>\n\t\t</SVGContainer>\n\t)\n}\n\nfunction highlighterToSvg(\n\tstrokeWidth: number,\n\tshape: TLHighlightShape,\n\topacity: number,\n\ttheme: TLDefaultColorTheme\n) {\n\tconst { solidStrokePath, sw } = getHighlightSvgPath(shape, strokeWidth, false)\n\n\tconst path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\tpath.setAttribute('d', solidStrokePath)\n\tpath.setAttribute('fill', 'none')\n\tpath.setAttribute('stroke', theme[shape.props.color].highlight.srgb)\n\tpath.setAttribute('stroke-width', `${sw}`)\n\tpath.setAttribute('opacity', `${opacity}`)\n\n\treturn path\n}\n\nfunction getStrokeWidth(shape: TLHighlightShape) {\n\treturn FONT_SIZES[shape.props.size] * 1.12\n}\n\nfunction getIsDot(shape: TLHighlightShape) {\n\treturn shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs

@@ -0,0 +1,252 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  BaseBoxShapeUtil,
+  HTMLContainer,
+  Vec2d,
+  deepCopy,
+  imageShapeMigrations,
+  imageShapeProps,
+  toDomPrecision,
+  useIsCropping,
+  useValue
+} from "@bigbluebutton/editor";
+import { useEffect, useState } from "react";
+import { HyperlinkButton } from "../shared/HyperlinkButton.mjs";
+import { usePrefersReducedMotion } from "../shared/usePrefersReducedMotion.mjs";
+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 BaseBoxShapeUtil {
+  static type = "image";
+  static props = imageShapeProps;
+  static migrations = 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 = useIsCropping(shape.id);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [staticFrameSrc, setStaticFrameSrc] = 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 = 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"));
+    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__ */ jsxs(Fragment, { children: [
+      asset?.props.src && showCropPreview && /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tl-image",
+          style: {
+            opacity: 0.1,
+            backgroundImage: `url(${!shape.props.playing || reduceMotion ? staticFrameSrc : asset.props.src})`
+          },
+          draggable: false
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        HTMLContainer,
+        {
+          id: shape.id,
+          style: { overflow: "hidden", width: shape.props.w, height: shape.props.h },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "tl-image-container", style: containerStyle, children: [
+              asset?.props.src ? /* @__PURE__ */ 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__ */ jsx("div", { className: "tl-image__tg", children: "GIF" })
+            ] }),
+            "url" in shape.props && shape.props.url && /* @__PURE__ */ jsx(HyperlinkButton, { url: shape.props.url, zoomLevel: this.editor.getZoomLevel() })
+          ]
+        }
+      )
+    ] });
+  }
+  indicator(shape) {
+    const isCropping = useIsCropping(shape.id);
+    if (isCropping) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("rect", { width: toDomPrecision(shape.props.w), height: 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 Vec2d(0, 0),
+        new Vec2d(croppedWidth, 0),
+        new Vec2d(croppedWidth, croppedHeight),
+        new 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 = 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 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
+  };
+}
+export {
+  ImageShapeUtil
+};
+//# sourceMappingURL=ImageShapeUtil.mjs.map

package/dist-esm/lib/shapes/image/ImageShapeUtil.mjs.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-esm/lib/shapes/line/LineShapeTool.mjs

@@ -0,0 +1,13 @@
+import { StateNode } from "@bigbluebutton/editor";
+import { Idle } from "./toolStates/Idle.mjs";
+import { Pointing } from "./toolStates/Pointing.mjs";
+class LineShapeTool extends StateNode {
+  static id = "line";
+  static initial = "idle";
+  static children = () => [Idle, Pointing];
+  shapeType = "line";
+}
+export {
+  LineShapeTool
+};
+//# sourceMappingURL=LineShapeTool.mjs.map

package/dist-esm/lib/shapes/line/LineShapeTool.mjs.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,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAGlB,MAAM,sBAAsB,UAAU;AAAA,EAC5C,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,MAAM,QAAQ;AAAA,EAEvC,YAAY;AACtB;",
+  "names": []
+}