@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/shapes/video/VideoShapeUtil.js

@@ -0,0 +1,202 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VideoShapeUtil_exports = {};
+__export(VideoShapeUtil_exports, {
+  VideoShapeUtil: () => VideoShapeUtil
+});
+module.exports = __toCommonJS(VideoShapeUtil_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = __toESM(require("react"));
+var import_HyperlinkButton = require("../shared/HyperlinkButton");
+var import_usePrefersReducedMotion = require("../shared/usePrefersReducedMotion");
+class VideoShapeUtil extends import_editor.BaseBoxShapeUtil {
+  static type = "video";
+  static props = import_editor.videoShapeProps;
+  static migrations = import_editor.videoShapeMigrations;
+  canEdit = () => true;
+  isAspectRatioLocked = () => true;
+  getDefaultProps() {
+    return {
+      w: 100,
+      h: 100,
+      assetId: null,
+      time: 0,
+      playing: true,
+      url: ""
+    };
+  }
+  component(shape) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TLVideoUtilComponent, { shape, videoUtil: this });
+  }
+  indicator(shape) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: (0, import_editor.toDomPrecision)(shape.props.w), height: (0, import_editor.toDomPrecision)(shape.props.h) });
+  }
+  toSvg(shape) {
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    const image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+    image.setAttributeNS("http://www.w3.org/1999/xlink", "href", serializeVideo(shape.id));
+    image.setAttribute("width", shape.props.w.toString());
+    image.setAttribute("height", shape.props.h.toString());
+    g.appendChild(image);
+    return g;
+  }
+}
+function serializeVideo(id) {
+  const splitId = id.split(":")[1];
+  const video = document.querySelector(`.tl-video-shape-${splitId}`);
+  if (video) {
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext("2d").drawImage(video, 0, 0);
+    return canvas.toDataURL("image/png");
+  } else
+    throw new Error("Video with id " + splitId + " not found");
+}
+const TLVideoUtilComponent = (0, import_editor.track)(function TLVideoUtilComponent2(props) {
+  const { shape, videoUtil } = props;
+  const showControls = videoUtil.editor.getShapeGeometry(shape).bounds.w * videoUtil.editor.getZoomLevel() >= 110;
+  const asset = shape.props.assetId ? videoUtil.editor.getAsset(shape.props.assetId) : null;
+  const { time, playing } = shape.props;
+  const isEditing = (0, import_editor.useIsEditing)(shape.id);
+  const prefersReducedMotion = (0, import_usePrefersReducedMotion.usePrefersReducedMotion)();
+  const rVideo = import_react.default.useRef(null);
+  const handlePlay = import_react.default.useCallback(
+    (e) => {
+      const video = e.currentTarget;
+      videoUtil.editor.updateShapes([
+        {
+          type: "video",
+          id: shape.id,
+          props: {
+            playing: true,
+            time: video.currentTime
+          }
+        }
+      ]);
+    },
+    [shape.id, videoUtil.editor]
+  );
+  const handlePause = import_react.default.useCallback(
+    (e) => {
+      const video = e.currentTarget;
+      videoUtil.editor.updateShapes([
+        {
+          type: "video",
+          id: shape.id,
+          props: {
+            playing: false,
+            time: video.currentTime
+          }
+        }
+      ]);
+    },
+    [shape.id, videoUtil.editor]
+  );
+  const handleSetCurrentTime = import_react.default.useCallback(
+    (e) => {
+      const video = e.currentTarget;
+      if (isEditing) {
+        videoUtil.editor.updateShapes([
+          {
+            type: "video",
+            id: shape.id,
+            props: {
+              time: video.currentTime
+            }
+          }
+        ]);
+      }
+    },
+    [isEditing, shape.id, videoUtil.editor]
+  );
+  const [isLoaded, setIsLoaded] = import_react.default.useState(false);
+  const handleLoadedData = import_react.default.useCallback(
+    (e) => {
+      const video = e.currentTarget;
+      if (time !== video.currentTime) {
+        video.currentTime = time;
+      }
+      if (!playing) {
+        video.pause();
+      }
+      setIsLoaded(true);
+    },
+    [playing, time]
+  );
+  import_react.default.useEffect(() => {
+    const video = rVideo.current;
+    if (!video)
+      return;
+    if (isLoaded && !isEditing && time !== video.currentTime) {
+      video.currentTime = time;
+    }
+    if (isEditing) {
+      if (document.activeElement !== video) {
+        video.focus();
+      }
+    }
+  }, [isEditing, isLoaded, time]);
+  import_react.default.useEffect(() => {
+    if (prefersReducedMotion) {
+      const video = rVideo.current;
+      video.pause();
+      video.currentTime = 0;
+    }
+  }, [rVideo, prefersReducedMotion]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_editor.HTMLContainer, { id: shape.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tl-counter-scaled", children: asset?.props.src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "video",
+      {
+        ref: rVideo,
+        style: isEditing ? { pointerEvents: "all" } : void 0,
+        className: `tl-video tl-video-shape-${shape.id.split(":")[1]}`,
+        width: "100%",
+        height: "100%",
+        draggable: false,
+        playsInline: true,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        disableRemotePlayback: true,
+        disablePictureInPicture: true,
+        controls: isEditing && showControls,
+        onPlay: handlePlay,
+        onPause: handlePause,
+        onTimeUpdate: handleSetCurrentTime,
+        onLoadedData: handleLoadedData,
+        hidden: !isLoaded,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: asset.props.src })
+      }
+    ) : null }) }),
+    "url" in shape.props && shape.props.url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HyperlinkButton.HyperlinkButton, { url: shape.props.url, zoomLevel: videoUtil.editor.getZoomLevel() })
+  ] });
+});
+//# sourceMappingURL=VideoShapeUtil.js.map

package/dist-cjs/lib/shapes/video/VideoShapeUtil.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/shapes/video/VideoShapeUtil.tsx"],
+  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tTLVideoShape,\n\ttoDomPrecision,\n\ttrack,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@bigbluebutton/editor'\nimport React from 'react'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride canEdit = () => true\n\toverride isAspectRatioLocked = () => true\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t\turl: '',\n\t\t}\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <TLVideoUtilComponent shape={shape} videoUtil={this} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride toSvg(shape: TLVideoShape) {\n\t\tconst g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n\t\tconst image = document.createElementNS('http://www.w3.org/2000/svg', 'image')\n\t\timage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', serializeVideo(shape.id))\n\t\timage.setAttribute('width', shape.props.w.toString())\n\t\timage.setAttribute('height', shape.props.h.toString())\n\t\tg.appendChild(image)\n\n\t\treturn g\n\t}\n}\n\n// Function from v1, could be improved bu explicitly using this.model.time (?)\nfunction serializeVideo(id: string): string {\n\tconst splitId = id.split(':')[1]\n\tconst video = document.querySelector(`.tl-video-shape-${splitId}`) as HTMLVideoElement\n\tif (video) {\n\t\tconst canvas = document.createElement('canvas')\n\t\tcanvas.width = video.videoWidth\n\t\tcanvas.height = video.videoHeight\n\t\tcanvas.getContext('2d')!.drawImage(video, 0, 0)\n\t\treturn canvas.toDataURL('image/png')\n\t} else throw new Error('Video with id ' + splitId + ' not found')\n}\n\nconst TLVideoUtilComponent = track(function TLVideoUtilComponent(props: {\n\tshape: TLVideoShape\n\tvideoUtil: VideoShapeUtil\n}) {\n\tconst { shape, videoUtil } = props\n\tconst showControls =\n\t\tvideoUtil.editor.getShapeGeometry(shape).bounds.w * videoUtil.editor.getZoomLevel() >= 110\n\tconst asset = shape.props.assetId ? videoUtil.editor.getAsset(shape.props.assetId) : null\n\tconst { time, playing } = shape.props\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\n\tconst rVideo = React.useRef<HTMLVideoElement>(null!)\n\n\tconst handlePlay = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tplaying: true,\n\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t},\n\t\t[shape.id, videoUtil.editor]\n\t)\n\n\tconst handlePause = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t{\n\t\t\t\t\ttype: 'video',\n\t\t\t\t\tid: shape.id,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tplaying: false,\n\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t},\n\t\t[shape.id, videoUtil.editor]\n\t)\n\n\tconst handleSetCurrentTime = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\n\t\t\tif (isEditing) {\n\t\t\t\tvideoUtil.editor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'video',\n\t\t\t\t\t\tid: shape.id,\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttime: video.currentTime,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t},\n\t\t[isEditing, shape.id, videoUtil.editor]\n\t)\n\n\tconst [isLoaded, setIsLoaded] = React.useState(false)\n\n\tconst handleLoadedData = React.useCallback<React.ReactEventHandler<HTMLVideoElement>>(\n\t\t(e) => {\n\t\t\tconst video = e.currentTarget\n\t\t\tif (time !== video.currentTime) {\n\t\t\t\tvideo.currentTime = time\n\t\t\t}\n\n\t\t\tif (!playing) {\n\t\t\t\tvideo.pause()\n\t\t\t}\n\n\t\t\tsetIsLoaded(true)\n\t\t},\n\t\t[playing, time]\n\t)\n\n\t// If the current time changes and we're not editing the video, update the video time\n\tReact.useEffect(() => {\n\t\tconst video = rVideo.current\n\n\t\tif (!video) return\n\n\t\tif (isLoaded && !isEditing && time !== video.currentTime) {\n\t\t\tvideo.currentTime = time\n\t\t}\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded, time])\n\n\tReact.useEffect(() => {\n\t\tif (prefersReducedMotion) {\n\t\t\tconst video = rVideo.current\n\t\t\tvideo.pause()\n\t\t\tvideo.currentTime = 0\n\t\t}\n\t}, [rVideo, prefersReducedMotion])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer id={shape.id}>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t{asset?.props.src ? (\n\t\t\t\t\t\t<video\n\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\tstyle={isEditing ? { pointerEvents: 'all' } : undefined}\n\t\t\t\t\t\t\tclassName={`tl-video tl-video-shape-${shape.id.split(':')[1]}`}\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\tonPlay={handlePlay}\n\t\t\t\t\t\t\tonPause={handlePause}\n\t\t\t\t\t\t\tonTimeUpdate={handleSetCurrentTime}\n\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<source src={asset.props.src} />\n\t\t\t\t\t\t</video>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && (\n\t\t\t\t<HyperlinkButton url={shape.props.url} zoomLevel={videoUtil.editor.getZoomLevel()} />\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCS;AAnCT,oBASO;AACP,mBAAkB;AAClB,6BAAgC;AAChC,qCAAwC;AAGjC,MAAM,uBAAuB,+BAA+B;AAAA,EAClE,OAAgB,OAAO;AAAA,EACvB,OAAgB,QAAQ;AAAA,EACxB,OAAgB,aAAa;AAAA,EAEpB,UAAU,MAAM;AAAA,EAChB,sBAAsB,MAAM;AAAA,EAE5B,kBAAyC;AACjD,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,IACN;AAAA,EACD;AAAA,EAEA,UAAU,OAAqB;AAC9B,WAAO,4CAAC,wBAAqB,OAAc,WAAW,MAAM;AAAA,EAC7D;AAAA,EAEA,UAAU,OAAqB;AAC9B,WAAO,4CAAC,UAAK,WAAO,8BAAe,MAAM,MAAM,CAAC,GAAG,YAAQ,8BAAe,MAAM,MAAM,CAAC,GAAG;AAAA,EAC3F;AAAA,EAES,MAAM,OAAqB;AACnC,UAAM,IAAI,SAAS,gBAAgB,8BAA8B,GAAG;AACpE,UAAM,QAAQ,SAAS,gBAAgB,8BAA8B,OAAO;AAC5E,UAAM,eAAe,gCAAgC,QAAQ,eAAe,MAAM,EAAE,CAAC;AACrF,UAAM,aAAa,SAAS,MAAM,MAAM,EAAE,SAAS,CAAC;AACpD,UAAM,aAAa,UAAU,MAAM,MAAM,EAAE,SAAS,CAAC;AACrD,MAAE,YAAY,KAAK;AAEnB,WAAO;AAAA,EACR;AACD;AAGA,SAAS,eAAe,IAAoB;AAC3C,QAAM,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC;AAC/B,QAAM,QAAQ,SAAS,cAAc,mBAAmB,OAAO,EAAE;AACjE,MAAI,OAAO;AACV,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ,MAAM;AACrB,WAAO,SAAS,MAAM;AACtB,WAAO,WAAW,IAAI,EAAG,UAAU,OAAO,GAAG,CAAC;AAC9C,WAAO,OAAO,UAAU,WAAW;AAAA,EACpC;AAAO,UAAM,IAAI,MAAM,mBAAmB,UAAU,YAAY;AACjE;AAEA,MAAM,2BAAuB,qBAAM,SAASA,sBAAqB,OAG9D;AACF,QAAM,EAAE,OAAO,UAAU,IAAI;AAC7B,QAAM,eACL,UAAU,OAAO,iBAAiB,KAAK,EAAE,OAAO,IAAI,UAAU,OAAO,aAAa,KAAK;AACxF,QAAM,QAAQ,MAAM,MAAM,UAAU,UAAU,OAAO,SAAS,MAAM,MAAM,OAAO,IAAI;AACrF,QAAM,EAAE,MAAM,QAAQ,IAAI,MAAM;AAChC,QAAM,gBAAY,4BAAa,MAAM,EAAE;AACvC,QAAM,2BAAuB,wDAAwB;AAErD,QAAM,SAAS,aAAAC,QAAM,OAAyB,IAAK;AAEnD,QAAM,aAAa,aAAAA,QAAM;AAAA,IACxB,CAAC,MAAM;AACN,YAAM,QAAQ,EAAE;AAEhB,gBAAU,OAAO,aAAa;AAAA,QAC7B;AAAA,UACC,MAAM;AAAA,UACN,IAAI,MAAM;AAAA,UACV,OAAO;AAAA,YACN,SAAS;AAAA,YACT,MAAM,MAAM;AAAA,UACb;AAAA,QACD;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,CAAC,MAAM,IAAI,UAAU,MAAM;AAAA,EAC5B;AAEA,QAAM,cAAc,aAAAA,QAAM;AAAA,IACzB,CAAC,MAAM;AACN,YAAM,QAAQ,EAAE;AAEhB,gBAAU,OAAO,aAAa;AAAA,QAC7B;AAAA,UACC,MAAM;AAAA,UACN,IAAI,MAAM;AAAA,UACV,OAAO;AAAA,YACN,SAAS;AAAA,YACT,MAAM,MAAM;AAAA,UACb;AAAA,QACD;AAAA,MACD,CAAC;AAAA,IACF;AAAA,IACA,CAAC,MAAM,IAAI,UAAU,MAAM;AAAA,EAC5B;AAEA,QAAM,uBAAuB,aAAAA,QAAM;AAAA,IAClC,CAAC,MAAM;AACN,YAAM,QAAQ,EAAE;AAEhB,UAAI,WAAW;AACd,kBAAU,OAAO,aAAa;AAAA,UAC7B;AAAA,YACC,MAAM;AAAA,YACN,IAAI,MAAM;AAAA,YACV,OAAO;AAAA,cACN,MAAM,MAAM;AAAA,YACb;AAAA,UACD;AAAA,QACD,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IACA,CAAC,WAAW,MAAM,IAAI,UAAU,MAAM;AAAA,EACvC;AAEA,QAAM,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAAS,KAAK;AAEpD,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC9B,CAAC,MAAM;AACN,YAAM,QAAQ,EAAE;AAChB,UAAI,SAAS,MAAM,aAAa;AAC/B,cAAM,cAAc;AAAA,MACrB;AAEA,UAAI,CAAC,SAAS;AACb,cAAM,MAAM;AAAA,MACb;AAEA,kBAAY,IAAI;AAAA,IACjB;AAAA,IACA,CAAC,SAAS,IAAI;AAAA,EACf;AAGA,eAAAA,QAAM,UAAU,MAAM;AACrB,UAAM,QAAQ,OAAO;AAErB,QAAI,CAAC;AAAO;AAEZ,QAAI,YAAY,CAAC,aAAa,SAAS,MAAM,aAAa;AACzD,YAAM,cAAc;AAAA,IACrB;AAEA,QAAI,WAAW;AACd,UAAI,SAAS,kBAAkB,OAAO;AACrC,cAAM,MAAM;AAAA,MACb;AAAA,IACD;AAAA,EACD,GAAG,CAAC,WAAW,UAAU,IAAI,CAAC;AAE9B,eAAAA,QAAM,UAAU,MAAM;AACrB,QAAI,sBAAsB;AACzB,YAAM,QAAQ,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,cAAc;AAAA,IACrB;AAAA,EACD,GAAG,CAAC,QAAQ,oBAAoB,CAAC;AAEjC,SACC,4EACC;AAAA,gDAAC,+BAAc,IAAI,MAAM,IACxB,sDAAC,SAAI,WAAU,qBACb,iBAAO,MAAM,MACb;AAAA,MAAC;AAAA;AAAA,QACA,KAAK;AAAA,QACL,OAAO,YAAY,EAAE,eAAe,MAAM,IAAI;AAAA,QAC9C,WAAW,2BAA2B,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,QAC5D,OAAM;AAAA,QACN,QAAO;AAAA,QACP,WAAW;AAAA,QACX,aAAW;AAAA,QACX,UAAQ;AAAA,QACR,OAAK;AAAA,QACL,MAAI;AAAA,QACJ,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB,UAAU,aAAa;AAAA,QACvB,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,cAAc;AAAA,QACd,cAAc;AAAA,QACd,QAAQ,CAAC;AAAA,QAET,sDAAC,YAAO,KAAK,MAAM,MAAM,KAAK;AAAA;AAAA,IAC/B,IACG,MACL,GACD;AAAA,IACC,SAAS,MAAM,SAAS,MAAM,MAAM,OACpC,4CAAC,0CAAgB,KAAK,MAAM,MAAM,KAAK,WAAW,UAAU,OAAO,aAAa,GAAG;AAAA,KAErF;AAEF,CAAC;",
+  "names": ["TLVideoUtilComponent", "React"]
+}

package/dist-cjs/lib/tools/EraserTool/EraserTool.js

@@ -0,0 +1,36 @@
+"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 EraserTool_exports = {};
+__export(EraserTool_exports, {
+  EraserTool: () => EraserTool
+});
+module.exports = __toCommonJS(EraserTool_exports);
+var import_editor = require("@bigbluebutton/editor");
+var import_Erasing = require("./childStates/Erasing");
+var import_Idle = require("./childStates/Idle");
+var import_Pointing = require("./childStates/Pointing");
+class EraserTool extends import_editor.StateNode {
+  static id = "eraser";
+  static initial = "idle";
+  static children = () => [import_Idle.Idle, import_Pointing.Pointing, import_Erasing.Erasing];
+  onEnter = () => {
+    this.editor.setCursor({ type: "cross", rotation: 0 });
+  };
+}
+//# sourceMappingURL=EraserTool.js.map

package/dist-cjs/lib/tools/EraserTool/EraserTool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/tools/EraserTool/EraserTool.ts"],
+  "sourcesContent": ["import { StateNode } from '@bigbluebutton/editor'\nimport { Erasing } from './childStates/Erasing'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class EraserTool extends StateNode {\n\tstatic override id = 'eraser'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Erasing]\n\n\toverride onEnter = () => {\n\t\tthis.editor.setCursor({ type: 'cross', rotation: 0 })\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA0B;AAC1B,qBAAwB;AACxB,kBAAqB;AACrB,sBAAyB;AAGlB,MAAM,mBAAmB,wBAAU;AAAA,EACzC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,0BAAU,sBAAO;AAAA,EAEhD,UAAU,MAAM;AACxB,SAAK,OAAO,UAAU,EAAE,MAAM,SAAS,UAAU,EAAE,CAAC;AAAA,EACrD;AACD;",
+  "names": []
+}

package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js

@@ -0,0 +1,111 @@
+"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 Erasing_exports = {};
+__export(Erasing_exports, {
+  Erasing: () => Erasing
+});
+module.exports = __toCommonJS(Erasing_exports);
+var import_editor = require("@bigbluebutton/editor");
+class Erasing extends import_editor.StateNode {
+  static id = "erasing";
+  info = {};
+  scribbleId = "id";
+  markId = "";
+  excludedShapeIds = /* @__PURE__ */ new Set();
+  onEnter = (info) => {
+    this.markId = "erase scribble begin";
+    this.editor.mark(this.markId);
+    this.info = info;
+    const { originPagePoint } = this.editor.inputs;
+    this.excludedShapeIds = new Set(
+      this.editor.getCurrentPageShapes().filter((shape) => {
+        if (this.editor.isShapeOrAncestorLocked(shape))
+          return true;
+        if (this.editor.isShapeOfType(shape, "group") || this.editor.isShapeOfType(shape, "frame")) {
+          const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint);
+          const geometry = this.editor.getShapeGeometry(shape);
+          return geometry.bounds.containsPoint(pointInShapeShape);
+        }
+        return false;
+      }).map((shape) => shape.id)
+    );
+    const scribble = this.editor.scribbles.addScribble({
+      color: "muted-1",
+      size: 12
+    });
+    this.scribbleId = scribble.id;
+    this.update();
+  };
+  pushPointToScribble = () => {
+    const { x, y } = this.editor.inputs.currentPagePoint;
+    this.editor.scribbles.addPoint(this.scribbleId, x, y);
+  };
+  onExit = () => {
+    this.editor.scribbles.stop(this.scribbleId);
+  };
+  onPointerMove = () => {
+    this.update();
+  };
+  onPointerUp = () => {
+    this.complete();
+  };
+  onCancel = () => {
+    this.cancel();
+  };
+  onComplete = () => {
+    this.complete();
+  };
+  update() {
+    const erasingShapeIds = this.editor.getErasingShapeIds();
+    const zoomLevel = this.editor.getZoomLevel();
+    const currentPageShapes = this.editor.getCurrentPageShapes();
+    const {
+      inputs: { currentPagePoint, previousPagePoint }
+    } = this.editor;
+    const { excludedShapeIds } = this;
+    this.pushPointToScribble();
+    const erasing = new Set(erasingShapeIds);
+    for (const shape of currentPageShapes) {
+      if (this.editor.isShapeOfType(shape, "group"))
+        continue;
+      const pageMask = this.editor.getShapeMask(shape.id);
+      if (pageMask && !(0, import_editor.pointInPolygon)(currentPagePoint, pageMask)) {
+        continue;
+      }
+      const geometry = this.editor.getShapeGeometry(shape);
+      const A = this.editor.getPointInShapeSpace(shape, previousPagePoint);
+      const B = this.editor.getPointInShapeSpace(shape, currentPagePoint);
+      if (geometry.hitTestLineSegment(A, B, import_editor.HIT_TEST_MARGIN / zoomLevel)) {
+        erasing.add(this.editor.getOutermostSelectableShape(shape).id);
+      }
+    }
+    this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)));
+  }
+  complete() {
+    this.editor.deleteShapes(this.editor.getCurrentPageState().erasingShapeIds);
+    this.editor.setErasingShapes([]);
+    this.parent.transition("idle");
+  }
+  cancel() {
+    this.editor.setErasingShapes([]);
+    this.editor.bailToMark(this.markId);
+    this.parent.transition("idle", this.info);
+  }
+}
+//# sourceMappingURL=Erasing.js.map

package/dist-cjs/lib/tools/EraserTool/childStates/Erasing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/tools/EraserTool/childStates/Erasing.ts"],
+  "sourcesContent": ["import {\n\tHIT_TEST_MARGIN,\n\tStateNode,\n\tTLEventHandlers,\n\tTLFrameShape,\n\tTLGroupShape,\n\tTLPointerEventInfo,\n\tTLShapeId,\n\tpointInPolygon,\n} from '@bigbluebutton/editor'\n\nexport class Erasing extends StateNode {\n\tstatic override id = 'erasing'\n\n\tprivate info = {} as TLPointerEventInfo\n\tprivate scribbleId = 'id'\n\tprivate markId = ''\n\tprivate excludedShapeIds = new Set<TLShapeId>()\n\n\toverride onEnter = (info: TLPointerEventInfo) => {\n\t\tthis.markId = 'erase scribble begin'\n\t\tthis.editor.mark(this.markId)\n\t\tthis.info = info\n\n\t\tconst { originPagePoint } = this.editor.inputs\n\t\tthis.excludedShapeIds = new Set(\n\t\t\tthis.editor\n\t\t\t\t.getCurrentPageShapes()\n\t\t\t\t.filter((shape) => {\n\t\t\t\t\t//If the shape is locked, we shouldn't erase it\n\t\t\t\t\tif (this.editor.isShapeOrAncestorLocked(shape)) return true\n\t\t\t\t\t//If the shape is a group or frame, check we're inside it when we start erasing\n\t\t\t\t\tif (\n\t\t\t\t\t\tthis.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||\n\t\t\t\t\t\tthis.editor.isShapeOfType<TLFrameShape>(shape, 'frame')\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)\n\t\t\t\t\t\tconst geometry = this.editor.getShapeGeometry(shape)\n\t\t\t\t\t\treturn geometry.bounds.containsPoint(pointInShapeShape)\n\t\t\t\t\t}\n\n\t\t\t\t\treturn false\n\t\t\t\t})\n\t\t\t\t.map((shape) => shape.id)\n\t\t)\n\n\t\tconst scribble = this.editor.scribbles.addScribble({\n\t\t\tcolor: 'muted-1',\n\t\t\tsize: 12,\n\t\t})\n\t\tthis.scribbleId = scribble.id\n\n\t\tthis.update()\n\t}\n\n\tprivate pushPointToScribble = () => {\n\t\tconst { x, y } = this.editor.inputs.currentPagePoint\n\t\tthis.editor.scribbles.addPoint(this.scribbleId, x, y)\n\t}\n\n\toverride onExit = () => {\n\t\tthis.editor.scribbles.stop(this.scribbleId)\n\t}\n\n\toverride onPointerMove = () => {\n\t\tthis.update()\n\t}\n\n\toverride onPointerUp: TLEventHandlers['onPointerUp'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel: TLEventHandlers['onCancel'] = () => {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete: TLEventHandlers['onComplete'] = () => {\n\t\tthis.complete()\n\t}\n\n\tupdate() {\n\t\tconst erasingShapeIds = this.editor.getErasingShapeIds()\n\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\tconst currentPageShapes = this.editor.getCurrentPageShapes()\n\t\tconst {\n\t\t\tinputs: { currentPagePoint, previousPagePoint },\n\t\t} = this.editor\n\n\t\tconst { excludedShapeIds } = this\n\n\t\tthis.pushPointToScribble()\n\n\t\tconst erasing = new Set<TLShapeId>(erasingShapeIds)\n\n\t\tfor (const shape of currentPageShapes) {\n\t\t\tif (this.editor.isShapeOfType<TLGroupShape>(shape, 'group')) continue\n\n\t\t\t// Avoid testing masked shapes, unless the pointer is inside the mask\n\t\t\tconst pageMask = this.editor.getShapeMask(shape.id)\n\t\t\tif (pageMask && !pointInPolygon(currentPagePoint, pageMask)) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\t// Hit test the shape using a line segment\n\t\t\tconst geometry = this.editor.getShapeGeometry(shape)\n\t\t\tconst A = this.editor.getPointInShapeSpace(shape, previousPagePoint)\n\t\t\tconst B = this.editor.getPointInShapeSpace(shape, currentPagePoint)\n\n\t\t\tif (geometry.hitTestLineSegment(A, B, HIT_TEST_MARGIN / zoomLevel)) {\n\t\t\t\terasing.add(this.editor.getOutermostSelectableShape(shape).id)\n\t\t\t}\n\t\t}\n\n\t\t// Remove the hit shapes, except if they're in the list of excluded shapes\n\t\t// (these excluded shapes will be any frames or groups the pointer was inside of\n\t\t// when the user started erasing)\n\t\tthis.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))\n\t}\n\n\tcomplete() {\n\t\tthis.editor.deleteShapes(this.editor.getCurrentPageState().erasingShapeIds)\n\t\tthis.editor.setErasingShapes([])\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcancel() {\n\t\tthis.editor.setErasingShapes([])\n\t\tthis.editor.bailToMark(this.markId)\n\t\tthis.parent.transition('idle', this.info)\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AAEA,MAAM,gBAAgB,wBAAU;AAAA,EACtC,OAAgB,KAAK;AAAA,EAEb,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,EACb,SAAS;AAAA,EACT,mBAAmB,oBAAI,IAAe;AAAA,EAErC,UAAU,CAAC,SAA6B;AAChD,SAAK,SAAS;AACd,SAAK,OAAO,KAAK,KAAK,MAAM;AAC5B,SAAK,OAAO;AAEZ,UAAM,EAAE,gBAAgB,IAAI,KAAK,OAAO;AACxC,SAAK,mBAAmB,IAAI;AAAA,MAC3B,KAAK,OACH,qBAAqB,EACrB,OAAO,CAAC,UAAU;AAElB,YAAI,KAAK,OAAO,wBAAwB,KAAK;AAAG,iBAAO;AAEvD,YACC,KAAK,OAAO,cAA4B,OAAO,OAAO,KACtD,KAAK,OAAO,cAA4B,OAAO,OAAO,GACrD;AACD,gBAAM,oBAAoB,KAAK,OAAO,qBAAqB,OAAO,eAAe;AACjF,gBAAM,WAAW,KAAK,OAAO,iBAAiB,KAAK;AACnD,iBAAO,SAAS,OAAO,cAAc,iBAAiB;AAAA,QACvD;AAEA,eAAO;AAAA,MACR,CAAC,EACA,IAAI,CAAC,UAAU,MAAM,EAAE;AAAA,IAC1B;AAEA,UAAM,WAAW,KAAK,OAAO,UAAU,YAAY;AAAA,MAClD,OAAO;AAAA,MACP,MAAM;AAAA,IACP,CAAC;AACD,SAAK,aAAa,SAAS;AAE3B,SAAK,OAAO;AAAA,EACb;AAAA,EAEQ,sBAAsB,MAAM;AACnC,UAAM,EAAE,GAAG,EAAE,IAAI,KAAK,OAAO,OAAO;AACpC,SAAK,OAAO,UAAU,SAAS,KAAK,YAAY,GAAG,CAAC;AAAA,EACrD;AAAA,EAES,SAAS,MAAM;AACvB,SAAK,OAAO,UAAU,KAAK,KAAK,UAAU;AAAA,EAC3C;AAAA,EAES,gBAAgB,MAAM;AAC9B,SAAK,OAAO;AAAA,EACb;AAAA,EAES,cAA8C,MAAM;AAC5D,SAAK,SAAS;AAAA,EACf;AAAA,EAES,WAAwC,MAAM;AACtD,SAAK,OAAO;AAAA,EACb;AAAA,EAES,aAA4C,MAAM;AAC1D,SAAK,SAAS;AAAA,EACf;AAAA,EAEA,SAAS;AACR,UAAM,kBAAkB,KAAK,OAAO,mBAAmB;AACvD,UAAM,YAAY,KAAK,OAAO,aAAa;AAC3C,UAAM,oBAAoB,KAAK,OAAO,qBAAqB;AAC3D,UAAM;AAAA,MACL,QAAQ,EAAE,kBAAkB,kBAAkB;AAAA,IAC/C,IAAI,KAAK;AAET,UAAM,EAAE,iBAAiB,IAAI;AAE7B,SAAK,oBAAoB;AAEzB,UAAM,UAAU,IAAI,IAAe,eAAe;AAElD,eAAW,SAAS,mBAAmB;AACtC,UAAI,KAAK,OAAO,cAA4B,OAAO,OAAO;AAAG;AAG7D,YAAM,WAAW,KAAK,OAAO,aAAa,MAAM,EAAE;AAClD,UAAI,YAAY,KAAC,8BAAe,kBAAkB,QAAQ,GAAG;AAC5D;AAAA,MACD;AAGA,YAAM,WAAW,KAAK,OAAO,iBAAiB,KAAK;AACnD,YAAM,IAAI,KAAK,OAAO,qBAAqB,OAAO,iBAAiB;AACnE,YAAM,IAAI,KAAK,OAAO,qBAAqB,OAAO,gBAAgB;AAElE,UAAI,SAAS,mBAAmB,GAAG,GAAG,gCAAkB,SAAS,GAAG;AACnE,gBAAQ,IAAI,KAAK,OAAO,4BAA4B,KAAK,EAAE,EAAE;AAAA,MAC9D;AAAA,IACD;AAKA,SAAK,OAAO,iBAAiB,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;AAAA,EACpF;AAAA,EAEA,WAAW;AACV,SAAK,OAAO,aAAa,KAAK,OAAO,oBAAoB,EAAE,eAAe;AAC1E,SAAK,OAAO,iBAAiB,CAAC,CAAC;AAC/B,SAAK,OAAO,WAAW,MAAM;AAAA,EAC9B;AAAA,EAEA,SAAS;AACR,SAAK,OAAO,iBAAiB,CAAC,CAAC;AAC/B,SAAK,OAAO,WAAW,KAAK,MAAM;AAClC,SAAK,OAAO,WAAW,QAAQ,KAAK,IAAI;AAAA,EACzC;AACD;",
+  "names": []
+}

package/dist-cjs/lib/tools/EraserTool/childStates/Idle.js

@@ -0,0 +1,34 @@
+"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 Idle_exports = {};
+__export(Idle_exports, {
+  Idle: () => Idle
+});
+module.exports = __toCommonJS(Idle_exports);
+var import_editor = require("@bigbluebutton/editor");
+class Idle extends import_editor.StateNode {
+  static id = "idle";
+  onPointerDown = (info) => {
+    this.parent.transition("pointing", info);
+  };
+  onCancel = () => {
+    this.editor.setCurrentTool("select");
+  };
+}
+//# sourceMappingURL=Idle.js.map

package/dist-cjs/lib/tools/EraserTool/childStates/Idle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/tools/EraserTool/childStates/Idle.ts"],
+  "sourcesContent": ["import { StateNode, TLEventHandlers } from '@bigbluebutton/editor'\n\nexport class Idle extends StateNode {\n\tstatic override id = 'idle'\n\n\toverride onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {\n\t\tthis.parent.transition('pointing', info)\n\t}\n\n\toverride onCancel = () => {\n\t\tthis.editor.setCurrentTool('select')\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA2C;AAEpC,MAAM,aAAa,wBAAU;AAAA,EACnC,OAAgB,KAAK;AAAA,EAEZ,gBAAkD,CAAC,SAAS;AACpE,SAAK,OAAO,WAAW,YAAY,IAAI;AAAA,EACxC;AAAA,EAES,WAAW,MAAM;AACzB,SAAK,OAAO,eAAe,QAAQ;AAAA,EACpC;AACD;",
+  "names": []
+}

package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js

@@ -0,0 +1,84 @@
+"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 Pointing_exports = {};
+__export(Pointing_exports, {
+  Pointing: () => Pointing
+});
+module.exports = __toCommonJS(Pointing_exports);
+var import_editor = require("@bigbluebutton/editor");
+class Pointing extends import_editor.StateNode {
+  static id = "pointing";
+  onEnter = () => {
+    const zoomLevel = this.editor.getZoomLevel();
+    const currentPageShapesSorted = this.editor.getCurrentPageShapesSorted();
+    const {
+      inputs: { currentPagePoint }
+    } = this.editor;
+    const erasing = /* @__PURE__ */ new Set();
+    const initialSize = erasing.size;
+    for (let n = currentPageShapesSorted.length, i = n - 1; i >= 0; i--) {
+      const shape = currentPageShapesSorted[i];
+      if (this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, "group")) {
+        continue;
+      }
+      if (this.editor.isPointInShape(shape, currentPagePoint, {
+        hitInside: false,
+        margin: import_editor.HIT_TEST_MARGIN / zoomLevel
+      })) {
+        const hitShape = this.editor.getOutermostSelectableShape(shape);
+        if (this.editor.isShapeOfType(hitShape, "frame") && erasing.size > initialSize) {
+          break;
+        }
+        erasing.add(hitShape.id);
+      }
+    }
+    this.editor.setErasingShapes([...erasing]);
+  };
+  onPointerMove = (info) => {
+    if (this.editor.inputs.isDragging) {
+      this.parent.transition("erasing", info);
+    }
+  };
+  onPointerUp = () => {
+    this.complete();
+  };
+  onCancel = () => {
+    this.cancel();
+  };
+  onComplete = () => {
+    this.complete();
+  };
+  onInterrupt = () => {
+    this.cancel();
+  };
+  complete() {
+    const erasingShapeIds = this.editor.getErasingShapeIds();
+    if (erasingShapeIds.length) {
+      this.editor.mark("erase end");
+      this.editor.deleteShapes(erasingShapeIds);
+    }
+    this.editor.setErasingShapes([]);
+    this.parent.transition("idle");
+  }
+  cancel() {
+    this.editor.setErasingShapes([]);
+    this.parent.transition("idle");
+  }
+}
+//# sourceMappingURL=Pointing.js.map

package/dist-cjs/lib/tools/EraserTool/childStates/Pointing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/tools/EraserTool/childStates/Pointing.ts"],
+  "sourcesContent": ["import {\n\tHIT_TEST_MARGIN,\n\tStateNode,\n\tTLEventHandlers,\n\tTLFrameShape,\n\tTLGroupShape,\n\tTLShapeId,\n} from '@bigbluebutton/editor'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\toverride onEnter = () => {\n\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\tconst currentPageShapesSorted = this.editor.getCurrentPageShapesSorted()\n\t\tconst {\n\t\t\tinputs: { currentPagePoint },\n\t\t} = this.editor\n\n\t\tconst erasing = new Set<TLShapeId>()\n\n\t\tconst initialSize = erasing.size\n\n\t\tfor (let n = currentPageShapesSorted.length, i = n - 1; i >= 0; i--) {\n\t\t\tconst shape = currentPageShapesSorted[i]\n\t\t\tif (\n\t\t\t\tthis.editor.isShapeOrAncestorLocked(shape) ||\n\t\t\t\tthis.editor.isShapeOfType<TLGroupShape>(shape, 'group')\n\t\t\t) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\tthis.editor.isPointInShape(shape, currentPagePoint, {\n\t\t\t\t\thitInside: false,\n\t\t\t\t\tmargin: HIT_TEST_MARGIN / zoomLevel,\n\t\t\t\t})\n\t\t\t) {\n\t\t\t\tconst hitShape = this.editor.getOutermostSelectableShape(shape)\n\t\t\t\t// If we've hit a frame after hitting any other shape, stop here\n\t\t\t\tif (\n\t\t\t\t\tthis.editor.isShapeOfType<TLFrameShape>(hitShape, 'frame') &&\n\t\t\t\t\terasing.size > initialSize\n\t\t\t\t) {\n\t\t\t\t\tbreak\n\t\t\t\t}\n\n\t\t\t\terasing.add(hitShape.id)\n\t\t\t}\n\t\t}\n\n\t\tthis.editor.setErasingShapes([...erasing])\n\t}\n\n\toverride onPointerMove: TLEventHandlers['onPointerMove'] = (info) => {\n\t\tif (this.editor.inputs.isDragging) {\n\t\t\tthis.parent.transition('erasing', info)\n\t\t}\n\t}\n\n\toverride onPointerUp: TLEventHandlers['onPointerUp'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onCancel: TLEventHandlers['onCancel'] = () => {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete: TLEventHandlers['onComplete'] = () => {\n\t\tthis.complete()\n\t}\n\n\toverride onInterrupt: TLEventHandlers['onInterrupt'] = () => {\n\t\tthis.cancel()\n\t}\n\n\tcomplete() {\n\t\tconst erasingShapeIds = this.editor.getErasingShapeIds()\n\n\t\tif (erasingShapeIds.length) {\n\t\t\tthis.editor.mark('erase end')\n\t\t\tthis.editor.deleteShapes(erasingShapeIds)\n\t\t}\n\n\t\tthis.editor.setErasingShapes([])\n\t\tthis.parent.transition('idle')\n\t}\n\n\tcancel() {\n\t\tthis.editor.setErasingShapes([])\n\t\tthis.parent.transition('idle')\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOO;AAEA,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAEZ,UAAU,MAAM;AACxB,UAAM,YAAY,KAAK,OAAO,aAAa;AAC3C,UAAM,0BAA0B,KAAK,OAAO,2BAA2B;AACvE,UAAM;AAAA,MACL,QAAQ,EAAE,iBAAiB;AAAA,IAC5B,IAAI,KAAK;AAET,UAAM,UAAU,oBAAI,IAAe;AAEnC,UAAM,cAAc,QAAQ;AAE5B,aAAS,IAAI,wBAAwB,QAAQ,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;AACpE,YAAM,QAAQ,wBAAwB,CAAC;AACvC,UACC,KAAK,OAAO,wBAAwB,KAAK,KACzC,KAAK,OAAO,cAA4B,OAAO,OAAO,GACrD;AACD;AAAA,MACD;AAEA,UACC,KAAK,OAAO,eAAe,OAAO,kBAAkB;AAAA,QACnD,WAAW;AAAA,QACX,QAAQ,gCAAkB;AAAA,MAC3B,CAAC,GACA;AACD,cAAM,WAAW,KAAK,OAAO,4BAA4B,KAAK;AAE9D,YACC,KAAK,OAAO,cAA4B,UAAU,OAAO,KACzD,QAAQ,OAAO,aACd;AACD;AAAA,QACD;AAEA,gBAAQ,IAAI,SAAS,EAAE;AAAA,MACxB;AAAA,IACD;AAEA,SAAK,OAAO,iBAAiB,CAAC,GAAG,OAAO,CAAC;AAAA,EAC1C;AAAA,EAES,gBAAkD,CAAC,SAAS;AACpE,QAAI,KAAK,OAAO,OAAO,YAAY;AAClC,WAAK,OAAO,WAAW,WAAW,IAAI;AAAA,IACvC;AAAA,EACD;AAAA,EAES,cAA8C,MAAM;AAC5D,SAAK,SAAS;AAAA,EACf;AAAA,EAES,WAAwC,MAAM;AACtD,SAAK,OAAO;AAAA,EACb;AAAA,EAES,aAA4C,MAAM;AAC1D,SAAK,SAAS;AAAA,EACf;AAAA,EAES,cAA8C,MAAM;AAC5D,SAAK,OAAO;AAAA,EACb;AAAA,EAEA,WAAW;AACV,UAAM,kBAAkB,KAAK,OAAO,mBAAmB;AAEvD,QAAI,gBAAgB,QAAQ;AAC3B,WAAK,OAAO,KAAK,WAAW;AAC5B,WAAK,OAAO,aAAa,eAAe;AAAA,IACzC;AAEA,SAAK,OAAO,iBAAiB,CAAC,CAAC;AAC/B,SAAK,OAAO,WAAW,MAAM;AAAA,EAC9B;AAAA,EAEA,SAAS;AACR,SAAK,OAAO,iBAAiB,CAAC,CAAC;AAC/B,SAAK,OAAO,WAAW,MAAM;AAAA,EAC9B;AACD;",
+  "names": []
+}

package/dist-cjs/lib/tools/HandTool/HandTool.js

@@ -0,0 +1,58 @@
+"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 HandTool_exports = {};
+__export(HandTool_exports, {
+  HandTool: () => HandTool
+});
+module.exports = __toCommonJS(HandTool_exports);
+var import_editor = require("@bigbluebutton/editor");
+var import_Dragging = require("./childStates/Dragging");
+var import_Idle = require("./childStates/Idle");
+var import_Pointing = require("./childStates/Pointing");
+class HandTool extends import_editor.StateNode {
+  static id = "hand";
+  static initial = "idle";
+  static children = () => [import_Idle.Idle, import_Pointing.Pointing, import_Dragging.Dragging];
+  onDoubleClick = (info) => {
+    if (info.phase === "settle") {
+      const { currentScreenPoint } = this.editor.inputs;
+      this.editor.zoomIn(currentScreenPoint, { duration: 220, easing: import_editor.EASINGS.easeOutQuint });
+    }
+  };
+  onTripleClick = (info) => {
+    if (info.phase === "settle") {
+      const { currentScreenPoint } = this.editor.inputs;
+      this.editor.zoomOut(currentScreenPoint, { duration: 320, easing: import_editor.EASINGS.easeOutQuint });
+    }
+  };
+  onQuadrupleClick = (info) => {
+    if (info.phase === "settle") {
+      const zoomLevel = this.editor.getZoomLevel();
+      const {
+        inputs: { currentScreenPoint }
+      } = this.editor;
+      if (zoomLevel === 1) {
+        this.editor.zoomToFit({ duration: 400, easing: import_editor.EASINGS.easeOutQuint });
+      } else {
+        this.editor.resetZoom(currentScreenPoint, { duration: 320, easing: import_editor.EASINGS.easeOutQuint });
+      }
+    }
+  };
+}
+//# sourceMappingURL=HandTool.js.map

package/dist-cjs/lib/tools/HandTool/HandTool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/tools/HandTool/HandTool.ts"],
+  "sourcesContent": ["import { EASINGS, StateNode, TLClickEvent } from '@bigbluebutton/editor'\nimport { Dragging } from './childStates/Dragging'\nimport { Idle } from './childStates/Idle'\nimport { Pointing } from './childStates/Pointing'\n\n/** @public */\nexport class HandTool extends StateNode {\n\tstatic override id = 'hand'\n\tstatic override initial = 'idle'\n\tstatic override children = () => [Idle, Pointing, Dragging]\n\n\toverride onDoubleClick: TLClickEvent = (info) => {\n\t\tif (info.phase === 'settle') {\n\t\t\tconst { currentScreenPoint } = this.editor.inputs\n\t\t\tthis.editor.zoomIn(currentScreenPoint, { duration: 220, easing: EASINGS.easeOutQuint })\n\t\t}\n\t}\n\n\toverride onTripleClick: TLClickEvent = (info) => {\n\t\tif (info.phase === 'settle') {\n\t\t\tconst { currentScreenPoint } = this.editor.inputs\n\t\t\tthis.editor.zoomOut(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t}\n\t}\n\n\toverride onQuadrupleClick: TLClickEvent = (info) => {\n\t\tif (info.phase === 'settle') {\n\t\t\tconst zoomLevel = this.editor.getZoomLevel()\n\t\t\tconst {\n\t\t\t\tinputs: { currentScreenPoint },\n\t\t\t} = this.editor\n\n\t\t\tif (zoomLevel === 1) {\n\t\t\t\tthis.editor.zoomToFit({ duration: 400, easing: EASINGS.easeOutQuint })\n\t\t\t} else {\n\t\t\t\tthis.editor.resetZoom(currentScreenPoint, { duration: 320, easing: EASINGS.easeOutQuint })\n\t\t\t}\n\t\t}\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAiD;AACjD,sBAAyB;AACzB,kBAAqB;AACrB,sBAAyB;AAGlB,MAAM,iBAAiB,wBAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW,MAAM,CAAC,kBAAM,0BAAU,wBAAQ;AAAA,EAEjD,gBAA8B,CAAC,SAAS;AAChD,QAAI,KAAK,UAAU,UAAU;AAC5B,YAAM,EAAE,mBAAmB,IAAI,KAAK,OAAO;AAC3C,WAAK,OAAO,OAAO,oBAAoB,EAAE,UAAU,KAAK,QAAQ,sBAAQ,aAAa,CAAC;AAAA,IACvF;AAAA,EACD;AAAA,EAES,gBAA8B,CAAC,SAAS;AAChD,QAAI,KAAK,UAAU,UAAU;AAC5B,YAAM,EAAE,mBAAmB,IAAI,KAAK,OAAO;AAC3C,WAAK,OAAO,QAAQ,oBAAoB,EAAE,UAAU,KAAK,QAAQ,sBAAQ,aAAa,CAAC;AAAA,IACxF;AAAA,EACD;AAAA,EAES,mBAAiC,CAAC,SAAS;AACnD,QAAI,KAAK,UAAU,UAAU;AAC5B,YAAM,YAAY,KAAK,OAAO,aAAa;AAC3C,YAAM;AAAA,QACL,QAAQ,EAAE,mBAAmB;AAAA,MAC9B,IAAI,KAAK;AAET,UAAI,cAAc,GAAG;AACpB,aAAK,OAAO,UAAU,EAAE,UAAU,KAAK,QAAQ,sBAAQ,aAAa,CAAC;AAAA,MACtE,OAAO;AACN,aAAK,OAAO,UAAU,oBAAoB,EAAE,UAAU,KAAK,QAAQ,sBAAQ,aAAa,CAAC;AAAA,MAC1F;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": []
+}