@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/NavigationZone/Minimap.js

@@ -0,0 +1,208 @@
+"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 Minimap_exports = {};
+__export(Minimap_exports, {
+  Minimap: () => Minimap
+});
+module.exports = __toCommonJS(Minimap_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var React = __toESM(require("react"));
+var import_MinimapManager = require("./MinimapManager");
+function Minimap({ shapeFill, selectFill, viewportFill }) {
+  const editor = (0, import_editor.useEditor)();
+  const rCanvas = React.useRef(null);
+  const rPointing = React.useRef(false);
+  const isDarkMode = (0, import_editor.useIsDarkMode)();
+  const devicePixelRatio = (0, import_editor.useComputed)("dpr", () => editor.getInstanceState().devicePixelRatio, [
+    editor
+  ]);
+  const presences = React.useMemo(() => editor.store.query.records("instance_presence"), [editor]);
+  const minimap = React.useMemo(() => new import_MinimapManager.MinimapManager(editor), [editor]);
+  React.useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      const style = getComputedStyle(editor.getContainer());
+      minimap.colors = {
+        shapeFill: style.getPropertyValue(shapeFill).trim(),
+        selectFill: style.getPropertyValue(selectFill).trim(),
+        viewportFill: style.getPropertyValue(viewportFill).trim()
+      };
+      minimap.render();
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+    };
+  }, [editor, selectFill, shapeFill, viewportFill, minimap, isDarkMode]);
+  const onDoubleClick = React.useCallback(
+    (e) => {
+      if (!editor.getCurrentPageShapeIds().size)
+        return;
+      const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false);
+      const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true);
+      minimap.originPagePoint.setTo(clampedPoint);
+      minimap.originPageCenter.setTo(editor.getViewportPageBounds().center);
+      editor.centerOnPoint(point, { duration: import_editor.ANIMATION_MEDIUM_MS });
+    },
+    [editor, minimap]
+  );
+  const onPointerDown = React.useCallback(
+    (e) => {
+      const elm = e.currentTarget;
+      (0, import_editor.setPointerCapture)(elm, e);
+      if (!editor.getCurrentPageShapeIds().size)
+        return;
+      rPointing.current = true;
+      minimap.isInViewport = false;
+      const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false);
+      const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true);
+      const _vpPageBounds = editor.getViewportPageBounds();
+      minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint);
+      if (minimap.isInViewport) {
+        minimap.originPagePoint.setTo(clampedPoint);
+        minimap.originPageCenter.setTo(_vpPageBounds.center);
+      } else {
+        const delta = import_editor.Vec2d.Sub(_vpPageBounds.center, _vpPageBounds.point);
+        const pagePoint = import_editor.Vec2d.Add(point, delta);
+        minimap.originPagePoint.setTo(pagePoint);
+        minimap.originPageCenter.setTo(point);
+        editor.centerOnPoint(point, { duration: import_editor.ANIMATION_MEDIUM_MS });
+      }
+      function release(e2) {
+        if (elm) {
+          (0, import_editor.releasePointerCapture)(elm, e2);
+        }
+        rPointing.current = false;
+        document.body.removeEventListener("pointerup", release);
+      }
+      document.body.addEventListener("pointerup", release);
+    },
+    [editor, minimap]
+  );
+  const onPointerMove = React.useCallback(
+    (e) => {
+      const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true);
+      if (rPointing.current) {
+        if (minimap.isInViewport) {
+          const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter);
+          editor.centerOnPoint(import_editor.Vec2d.Sub(point, delta));
+          return;
+        }
+        editor.centerOnPoint(point);
+      }
+      const pagePoint = minimap.getPagePoint(e.clientX, e.clientY);
+      const screenPoint = editor.pageToScreen(pagePoint);
+      const info = {
+        type: "pointer",
+        target: "canvas",
+        name: "pointer_move",
+        ...(0, import_editor.getPointerInfo)(e),
+        point: screenPoint,
+        isPen: editor.getInstanceState().isPenMode
+      };
+      editor.dispatch(info);
+    },
+    [editor, minimap]
+  );
+  const onWheel = React.useCallback(
+    (e) => {
+      const offset = (0, import_editor.normalizeWheel)(e);
+      editor.dispatch({
+        type: "wheel",
+        name: "wheel",
+        delta: offset,
+        point: new import_editor.Vec2d(e.clientX, e.clientY),
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        ctrlKey: e.metaKey || e.ctrlKey
+      });
+    },
+    [editor]
+  );
+  (0, import_editor.useQuickReactor)(
+    "update when dpr changes",
+    () => {
+      const dpr = devicePixelRatio.get();
+      minimap.setDpr(dpr);
+      const canvas = rCanvas.current;
+      const rect = canvas.getBoundingClientRect();
+      const width = rect.width * dpr;
+      const height = rect.height * dpr;
+      canvas.width = width;
+      canvas.height = height;
+      minimap.canvasScreenBounds.set(rect.x, rect.y, width, height);
+      minimap.cvs = rCanvas.current;
+    },
+    [devicePixelRatio, minimap]
+  );
+  (0, import_editor.useQuickReactor)(
+    "minimap render when pagebounds or collaborators changes",
+    () => {
+      const shapeIdsOnCurrentPage = editor.getCurrentPageShapeIds();
+      const commonBoundsOfAllShapesOnCurrentPage = editor.getCurrentPageBounds();
+      const viewportPageBounds = editor.getViewportPageBounds();
+      const _dpr = devicePixelRatio.get();
+      minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage ? import_editor.Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds) : viewportPageBounds;
+      minimap.updateContentScreenBounds();
+      const allShapeBounds = [];
+      shapeIdsOnCurrentPage.forEach((id) => {
+        let pageBounds = editor.getShapePageBounds(id);
+        if (!pageBounds)
+          return;
+        const pageMask = editor.getShapeMask(id);
+        if (pageMask) {
+          const intersection = (0, import_editor.intersectPolygonPolygon)(pageMask, pageBounds.corners);
+          if (!intersection) {
+            return;
+          }
+          pageBounds = import_editor.Box2d.FromPoints(intersection);
+        }
+        if (pageBounds) {
+          pageBounds.id = id;
+          allShapeBounds.push(pageBounds);
+        }
+      });
+      minimap.pageBounds = allShapeBounds;
+      minimap.collaborators = presences.get();
+      minimap.render();
+    },
+    [editor, minimap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-minimap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "canvas",
+    {
+      ref: rCanvas,
+      className: "tlui-minimap__canvas",
+      onDoubleClick,
+      onPointerMove,
+      onPointerDown,
+      onWheel
+    }
+  ) });
+}
+//# sourceMappingURL=Minimap.js.map

package/dist-cjs/lib/ui/components/NavigationZone/Minimap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/NavigationZone/Minimap.tsx"],
+  "sourcesContent": ["import {\n\tANIMATION_MEDIUM_MS,\n\tBox2d,\n\tTLPointerEventInfo,\n\tTLShapeId,\n\tVec2d,\n\tgetPointerInfo,\n\tintersectPolygonPolygon,\n\tnormalizeWheel,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseComputed,\n\tuseEditor,\n\tuseIsDarkMode,\n\tuseQuickReactor,\n} from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport { MinimapManager } from './MinimapManager'\n\nexport interface MinimapProps {\n\tshapeFill: string\n\tselectFill: string\n\tviewportFill: string\n}\n\nexport function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {\n\tconst editor = useEditor()\n\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null!)\n\tconst rPointing = React.useRef(false)\n\n\tconst isDarkMode = useIsDarkMode()\n\tconst devicePixelRatio = useComputed('dpr', () => editor.getInstanceState().devicePixelRatio, [\n\t\teditor,\n\t])\n\tconst presences = React.useMemo(() => editor.store.query.records('instance_presence'), [editor])\n\n\tconst minimap = React.useMemo(() => new MinimapManager(editor), [editor])\n\n\tReact.useEffect(() => {\n\t\t// Must check after render\n\t\tconst raf = requestAnimationFrame(() => {\n\t\t\tconst style = getComputedStyle(editor.getContainer())\n\n\t\t\tminimap.colors = {\n\t\t\t\tshapeFill: style.getPropertyValue(shapeFill).trim(),\n\t\t\t\tselectFill: style.getPropertyValue(selectFill).trim(),\n\t\t\t\tviewportFill: style.getPropertyValue(viewportFill).trim(),\n\t\t\t}\n\n\t\t\tminimap.render()\n\t\t})\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(raf)\n\t\t}\n\t}, [editor, selectFill, shapeFill, viewportFill, minimap, isDarkMode])\n\n\tconst onDoubleClick = React.useCallback(\n\t\t(e: React.MouseEvent<HTMLCanvasElement>) => {\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\tconst point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)\n\n\t\t\tconst clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)\n\n\t\t\tminimap.originPagePoint.setTo(clampedPoint)\n\t\t\tminimap.originPageCenter.setTo(editor.getViewportPageBounds().center)\n\n\t\t\teditor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })\n\t\t},\n\t\t[editor, minimap]\n\t)\n\n\tconst onPointerDown = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tconst elm = e.currentTarget\n\t\t\tsetPointerCapture(elm, e)\n\t\t\tif (!editor.getCurrentPageShapeIds().size) return\n\n\t\t\trPointing.current = true\n\n\t\t\tminimap.isInViewport = false\n\n\t\t\tconst point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)\n\n\t\t\tconst clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)\n\n\t\t\tconst _vpPageBounds = editor.getViewportPageBounds()\n\n\t\t\tminimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint)\n\n\t\t\tif (minimap.isInViewport) {\n\t\t\t\tminimap.originPagePoint.setTo(clampedPoint)\n\t\t\t\tminimap.originPageCenter.setTo(_vpPageBounds.center)\n\t\t\t} else {\n\t\t\t\tconst delta = Vec2d.Sub(_vpPageBounds.center, _vpPageBounds.point)\n\t\t\t\tconst pagePoint = Vec2d.Add(point, delta)\n\t\t\t\tminimap.originPagePoint.setTo(pagePoint)\n\t\t\t\tminimap.originPageCenter.setTo(point)\n\t\t\t\teditor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })\n\t\t\t}\n\n\t\t\tfunction release(e: PointerEvent) {\n\t\t\t\tif (elm) {\n\t\t\t\t\treleasePointerCapture(elm, e)\n\t\t\t\t}\n\t\t\t\trPointing.current = false\n\t\t\t\tdocument.body.removeEventListener('pointerup', release)\n\t\t\t}\n\n\t\t\tdocument.body.addEventListener('pointerup', release)\n\t\t},\n\t\t[editor, minimap]\n\t)\n\n\tconst onPointerMove = React.useCallback(\n\t\t(e: React.PointerEvent<HTMLCanvasElement>) => {\n\t\t\tconst point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true)\n\n\t\t\tif (rPointing.current) {\n\t\t\t\tif (minimap.isInViewport) {\n\t\t\t\t\tconst delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)\n\t\t\t\t\teditor.centerOnPoint(Vec2d.Sub(point, delta))\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\teditor.centerOnPoint(point)\n\t\t\t}\n\n\t\t\tconst pagePoint = minimap.getPagePoint(e.clientX, e.clientY)\n\n\t\t\tconst screenPoint = editor.pageToScreen(pagePoint)\n\n\t\t\tconst info: TLPointerEventInfo = {\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_move',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t\tpoint: screenPoint,\n\t\t\t\tisPen: editor.getInstanceState().isPenMode,\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t},\n\t\t[editor, minimap]\n\t)\n\n\tconst onWheel = React.useCallback(\n\t\t(e: React.WheelEvent<HTMLCanvasElement>) => {\n\t\t\tconst offset = normalizeWheel(e)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta: offset,\n\t\t\t\tpoint: new Vec2d(e.clientX, e.clientY),\n\t\t\t\tshiftKey: e.shiftKey,\n\t\t\t\taltKey: e.altKey,\n\t\t\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\t\t})\n\t\t},\n\t\t[editor]\n\t)\n\n\t// Update the minimap's dpr when the dpr changes\n\tuseQuickReactor(\n\t\t'update when dpr changes',\n\t\t() => {\n\t\t\tconst dpr = devicePixelRatio.get()\n\t\t\tminimap.setDpr(dpr)\n\n\t\t\tconst canvas = rCanvas.current as HTMLCanvasElement\n\t\t\tconst rect = canvas.getBoundingClientRect()\n\t\t\tconst width = rect.width * dpr\n\t\t\tconst height = rect.height * dpr\n\n\t\t\t// These must happen in order\n\t\t\tcanvas.width = width\n\t\t\tcanvas.height = height\n\t\t\tminimap.canvasScreenBounds.set(rect.x, rect.y, width, height)\n\n\t\t\tminimap.cvs = rCanvas.current\n\t\t},\n\t\t[devicePixelRatio, minimap]\n\t)\n\n\tuseQuickReactor(\n\t\t'minimap render when pagebounds or collaborators changes',\n\t\t() => {\n\t\t\tconst shapeIdsOnCurrentPage = editor.getCurrentPageShapeIds()\n\t\t\tconst commonBoundsOfAllShapesOnCurrentPage = editor.getCurrentPageBounds()\n\t\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\n\t\t\tconst _dpr = devicePixelRatio.get() // dereference\n\n\t\t\tminimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage\n\t\t\t\t? Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)\n\t\t\t\t: viewportPageBounds\n\n\t\t\tminimap.updateContentScreenBounds()\n\n\t\t\t// All shape bounds\n\n\t\t\tconst allShapeBounds = [] as (Box2d & { id: TLShapeId })[]\n\n\t\t\tshapeIdsOnCurrentPage.forEach((id) => {\n\t\t\t\tlet pageBounds = editor.getShapePageBounds(id) as Box2d & { id: TLShapeId }\n\t\t\t\tif (!pageBounds) return\n\n\t\t\t\tconst pageMask = editor.getShapeMask(id)\n\n\t\t\t\tif (pageMask) {\n\t\t\t\t\tconst intersection = intersectPolygonPolygon(pageMask, pageBounds.corners)\n\t\t\t\t\tif (!intersection) {\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\tpageBounds = Box2d.FromPoints(intersection) as Box2d & { id: TLShapeId }\n\t\t\t\t}\n\n\t\t\t\tif (pageBounds) {\n\t\t\t\t\tpageBounds.id = id // kinda dirty but we want to include the id here\n\t\t\t\t\tallShapeBounds.push(pageBounds)\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tminimap.pageBounds = allShapeBounds\n\t\t\tminimap.collaborators = presences.get()\n\t\t\tminimap.render()\n\t\t},\n\t\t[editor, minimap]\n\t)\n\n\treturn (\n\t\t<div className=\"tlui-minimap\">\n\t\t\t<canvas\n\t\t\t\tref={rCanvas}\n\t\t\t\tclassName=\"tlui-minimap__canvas\"\n\t\t\t\tonDoubleClick={onDoubleClick}\n\t\t\t\tonPointerMove={onPointerMove}\n\t\t\t\tonPointerDown={onPointerDown}\n\t\t\t\tonWheel={onWheel}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["e"]
+}

package/dist-cjs/lib/ui/components/NavigationZone/MinimapManager.js

@@ -0,0 +1,293 @@
+"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 MinimapManager_exports = {};
+__export(MinimapManager_exports, {
+  MinimapManager: () => MinimapManager
+});
+module.exports = __toCommonJS(MinimapManager_exports);
+var import_editor = require("@bigbluebutton/editor");
+class MinimapManager {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  dpr = 1;
+  colors = {
+    shapeFill: "rgba(144, 144, 144, .1)",
+    selectFill: "#2f80ed",
+    viewportFill: "rgba(144, 144, 144, .1)"
+  };
+  id = (0, import_editor.uniqueId)();
+  cvs = null;
+  pageBounds = [];
+  collaborators = [];
+  canvasScreenBounds = new import_editor.Box2d();
+  canvasPageBounds = new import_editor.Box2d();
+  contentPageBounds = new import_editor.Box2d();
+  contentScreenBounds = new import_editor.Box2d();
+  originPagePoint = new import_editor.Vec2d();
+  originPageCenter = new import_editor.Vec2d();
+  isInViewport = false;
+  debug = false;
+  setDpr(dpr) {
+    this.dpr = +dpr.toFixed(2);
+  }
+  updateContentScreenBounds = () => {
+    const { contentScreenBounds, contentPageBounds: content, canvasScreenBounds: canvas } = this;
+    let { x, y, w, h } = contentScreenBounds;
+    if (content.w > content.h) {
+      const sh = canvas.w / (content.w / content.h);
+      if (sh > canvas.h) {
+        x = (canvas.w - canvas.w * (canvas.h / sh)) / 2;
+        y = 0;
+        w = canvas.w * (canvas.h / sh);
+        h = canvas.h;
+      } else {
+        x = 0;
+        y = (canvas.h - sh) / 2;
+        w = canvas.w;
+        h = sh;
+      }
+    } else if (content.w < content.h) {
+      const sw = canvas.h / (content.h / content.w);
+      x = (canvas.w - sw) / 2;
+      y = 0;
+      w = sw;
+      h = canvas.h;
+    } else {
+      x = canvas.h / 2;
+      y = 0;
+      w = canvas.h;
+      h = canvas.h;
+    }
+    contentScreenBounds.set(x, y, w, h);
+  };
+  /** Get the canvas's true bounds converted to page bounds. */
+  updateCanvasPageBounds = () => {
+    const { canvasPageBounds, canvasScreenBounds, contentPageBounds, contentScreenBounds } = this;
+    canvasPageBounds.set(
+      0,
+      0,
+      contentPageBounds.width / (contentScreenBounds.width / canvasScreenBounds.width),
+      contentPageBounds.height / (contentScreenBounds.height / canvasScreenBounds.height)
+    );
+    canvasPageBounds.center = contentPageBounds.center;
+  };
+  getScreenPoint = (x, y) => {
+    const { canvasScreenBounds } = this;
+    const screenX = (x - canvasScreenBounds.minX) * this.dpr;
+    const screenY = (y - canvasScreenBounds.minY) * this.dpr;
+    return { x: screenX, y: screenY };
+  };
+  getPagePoint = (x, y) => {
+    const { contentPageBounds, contentScreenBounds, canvasPageBounds } = this;
+    const { x: screenX, y: screenY } = this.getScreenPoint(x, y);
+    return new import_editor.Vec2d(
+      canvasPageBounds.minX + screenX * contentPageBounds.width / contentScreenBounds.width,
+      canvasPageBounds.minY + screenY * contentPageBounds.height / contentScreenBounds.height,
+      1
+    );
+  };
+  minimapScreenPointToPagePoint = (x, y, shiftKey = false, clampToBounds = false) => {
+    const { editor } = this;
+    const viewportPageBounds = editor.getViewportPageBounds();
+    let { x: px, y: py } = this.getPagePoint(x, y);
+    if (clampToBounds) {
+      const shapesPageBounds = this.editor.getCurrentPageBounds();
+      const vpPageBounds = viewportPageBounds;
+      const minX = (shapesPageBounds?.minX ?? 0) - vpPageBounds.width / 2;
+      const maxX = (shapesPageBounds?.maxX ?? 0) + vpPageBounds.width / 2;
+      const minY = (shapesPageBounds?.minY ?? 0) - vpPageBounds.height / 2;
+      const maxY = (shapesPageBounds?.maxY ?? 0) + vpPageBounds.height / 2;
+      const lx = Math.max(0, minX + vpPageBounds.width - px);
+      const rx = Math.max(0, -(maxX - vpPageBounds.width - px));
+      const ly = Math.max(0, minY + vpPageBounds.height - py);
+      const ry = Math.max(0, -(maxY - vpPageBounds.height - py));
+      const ql = Math.max(0, lx - rx);
+      const qr = Math.max(0, rx - lx);
+      const qt = Math.max(0, ly - ry);
+      const qb = Math.max(0, ry - ly);
+      if (ql && ql > qr) {
+        px += ql / 2;
+      } else if (qr) {
+        px -= qr / 2;
+      }
+      if (qt && qt > qb) {
+        py += qt / 2;
+      } else if (qb) {
+        py -= qb / 2;
+      }
+      px = (0, import_editor.clamp)(px, minX, maxX);
+      py = (0, import_editor.clamp)(py, minY, maxY);
+    }
+    if (shiftKey) {
+      const { originPagePoint } = this;
+      const dx = Math.abs(px - originPagePoint.x);
+      const dy = Math.abs(py - originPagePoint.y);
+      if (dx > dy) {
+        py = originPagePoint.y;
+      } else {
+        px = originPagePoint.x;
+      }
+    }
+    return new import_editor.Vec2d(px, py);
+  };
+  render = () => {
+    const { cvs, pageBounds } = this;
+    this.updateCanvasPageBounds();
+    const { editor, canvasScreenBounds, canvasPageBounds, contentPageBounds, contentScreenBounds } = this;
+    const { width: cw, height: ch } = canvasScreenBounds;
+    const selectedShapeIds = editor.getSelectedShapeIds();
+    const viewportPageBounds = editor.getViewportPageBounds();
+    if (!cvs || !pageBounds) {
+      return;
+    }
+    const ctx = cvs.getContext("2d");
+    if (!ctx) {
+      throw new Error("Minimap (shapes): Could not get context");
+    }
+    ctx.resetTransform();
+    ctx.globalAlpha = 1;
+    ctx.clearRect(0, 0, cw, ch);
+    const sx = contentScreenBounds.width / contentPageBounds.width;
+    const sy = contentScreenBounds.height / contentPageBounds.height;
+    ctx.translate((cw - contentScreenBounds.width) / 2, (ch - contentScreenBounds.height) / 2);
+    ctx.scale(sx, sy);
+    ctx.translate(-contentPageBounds.minX, -contentPageBounds.minY);
+    const rx = 8 / sx;
+    const ry = 8 / sx;
+    const ax = 1 / sx;
+    const ay = 1 / sx;
+    const bx = rx / 4;
+    const by = ry / 4;
+    const shapesPath = new Path2D();
+    const selectedPath = new Path2D();
+    const { shapeFill, selectFill, viewportFill } = this.colors;
+    let pb;
+    for (let i = 0, n = pageBounds.length; i < n; i++) {
+      pb = pageBounds[i];
+      MinimapManager.roundedRect(
+        selectedShapeIds.includes(pb.id) ? selectedPath : shapesPath,
+        pb.minX,
+        pb.minY,
+        pb.width,
+        pb.height,
+        (0, import_editor.clamp)(rx, ax, pb.width / bx),
+        (0, import_editor.clamp)(ry, ay, pb.height / by)
+      );
+    }
+    ctx.fillStyle = shapeFill;
+    ctx.fill(shapesPath);
+    ctx.fillStyle = selectFill;
+    ctx.fill(selectedPath);
+    if (this.debug) {
+      const commonBounds = import_editor.Box2d.Common(pageBounds);
+      const { minX, minY, width, height } = commonBounds;
+      ctx.strokeStyle = "green";
+      ctx.lineWidth = 2 / sx;
+      ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy);
+    }
+    {
+      const { brush } = editor.getInstanceState();
+      if (brush) {
+        const { x, y, w, h } = brush;
+        ctx.beginPath();
+        MinimapManager.sharpRect(ctx, x, y, w, h);
+        ctx.closePath();
+        ctx.fillStyle = viewportFill;
+        ctx.fill();
+      }
+    }
+    {
+      const { minX, minY, width, height } = viewportPageBounds;
+      ctx.beginPath();
+      const rx2 = 12 / sx;
+      const ry2 = 12 / sx;
+      MinimapManager.roundedRect(
+        ctx,
+        minX,
+        minY,
+        width,
+        height,
+        Math.min(width / 4, rx2),
+        Math.min(height / 4, ry2)
+      );
+      ctx.closePath();
+      ctx.fillStyle = viewportFill;
+      ctx.fill();
+      if (this.debug) {
+        ctx.strokeStyle = "orange";
+        ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy);
+      }
+    }
+    const px = 2.5 / sx;
+    const py = 2.5 / sy;
+    const currentPageId = editor.getCurrentPageId();
+    let collaborator;
+    for (let i = 0; i < this.collaborators.length; i++) {
+      collaborator = this.collaborators[i];
+      if (collaborator.currentPageId !== currentPageId) {
+        continue;
+      }
+      ctx.beginPath();
+      ctx.ellipse(
+        (0, import_editor.clamp)(collaborator.cursor.x, canvasPageBounds.minX + px, canvasPageBounds.maxX - px),
+        (0, import_editor.clamp)(collaborator.cursor.y, canvasPageBounds.minY + py, canvasPageBounds.maxY - py),
+        5 / sx,
+        5 / sy,
+        0,
+        0,
+        import_editor.PI2
+      );
+      ctx.fillStyle = collaborator.color;
+      ctx.fill();
+    }
+    if (this.debug) {
+      ctx.lineWidth = 2 / sx;
+      {
+        const { minX, minY, width, height } = contentPageBounds;
+        ctx.strokeStyle = "red";
+        ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy);
+      }
+      {
+        const { minX, minY, width, height } = canvasPageBounds;
+        ctx.strokeStyle = "blue";
+        ctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy);
+      }
+    }
+  };
+  static roundedRect(ctx, x, y, width, height, rx, ry) {
+    if (rx < 1 && ry < 1) {
+      ctx.rect(x, y, width, height);
+      return;
+    }
+    ctx.moveTo(x + rx, y);
+    ctx.lineTo(x + width - rx, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + ry);
+    ctx.lineTo(x + width, y + height - ry);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height);
+    ctx.lineTo(x + rx, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - ry);
+    ctx.lineTo(x, y + ry);
+    ctx.quadraticCurveTo(x, y, x + rx, y);
+  }
+  static sharpRect(ctx, x, y, width, height, _rx, _ry) {
+    ctx.rect(x, y, width, height);
+  }
+}
+//# sourceMappingURL=MinimapManager.js.map

package/dist-cjs/lib/ui/components/NavigationZone/MinimapManager.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/NavigationZone/MinimapManager.ts"],
+  "sourcesContent": ["import {\n\tBox2d,\n\tEditor,\n\tPI2,\n\tTLInstancePresence,\n\tTLShapeId,\n\tVec2d,\n\tclamp,\n\tuniqueId,\n} from '@bigbluebutton/editor'\n\nexport class MinimapManager {\n\tconstructor(public editor: Editor) {}\n\n\tdpr = 1\n\n\tcolors = {\n\t\tshapeFill: 'rgba(144, 144, 144, .1)',\n\t\tselectFill: '#2f80ed',\n\t\tviewportFill: 'rgba(144, 144, 144, .1)',\n\t}\n\n\tid = uniqueId()\n\tcvs: HTMLCanvasElement | null = null\n\tpageBounds: (Box2d & { id: TLShapeId })[] = []\n\tcollaborators: TLInstancePresence[] = []\n\n\tcanvasScreenBounds = new Box2d()\n\tcanvasPageBounds = new Box2d()\n\n\tcontentPageBounds = new Box2d()\n\tcontentScreenBounds = new Box2d()\n\n\toriginPagePoint = new Vec2d()\n\toriginPageCenter = new Vec2d()\n\n\tisInViewport = false\n\n\tdebug = false\n\n\tsetDpr(dpr: number) {\n\t\tthis.dpr = +dpr.toFixed(2)\n\t}\n\n\tupdateContentScreenBounds = () => {\n\t\tconst { contentScreenBounds, contentPageBounds: content, canvasScreenBounds: canvas } = this\n\n\t\tlet { x, y, w, h } = contentScreenBounds\n\n\t\tif (content.w > content.h) {\n\t\t\tconst sh = canvas.w / (content.w / content.h)\n\t\t\tif (sh > canvas.h) {\n\t\t\t\tx = (canvas.w - canvas.w * (canvas.h / sh)) / 2\n\t\t\t\ty = 0\n\t\t\t\tw = canvas.w * (canvas.h / sh)\n\t\t\t\th = canvas.h\n\t\t\t} else {\n\t\t\t\tx = 0\n\t\t\t\ty = (canvas.h - sh) / 2\n\t\t\t\tw = canvas.w\n\t\t\t\th = sh\n\t\t\t}\n\t\t} else if (content.w < content.h) {\n\t\t\tconst sw = canvas.h / (content.h / content.w)\n\t\t\tx = (canvas.w - sw) / 2\n\t\t\ty = 0\n\t\t\tw = sw\n\t\t\th = canvas.h\n\t\t} else {\n\t\t\tx = canvas.h / 2\n\t\t\ty = 0\n\t\t\tw = canvas.h\n\t\t\th = canvas.h\n\t\t}\n\n\t\tcontentScreenBounds.set(x, y, w, h)\n\t}\n\n\t/** Get the canvas's true bounds converted to page bounds. */\n\tupdateCanvasPageBounds = () => {\n\t\tconst { canvasPageBounds, canvasScreenBounds, contentPageBounds, contentScreenBounds } = this\n\n\t\tcanvasPageBounds.set(\n\t\t\t0,\n\t\t\t0,\n\t\t\tcontentPageBounds.width / (contentScreenBounds.width / canvasScreenBounds.width),\n\t\t\tcontentPageBounds.height / (contentScreenBounds.height / canvasScreenBounds.height)\n\t\t)\n\n\t\tcanvasPageBounds.center = contentPageBounds.center\n\t}\n\n\tgetScreenPoint = (x: number, y: number) => {\n\t\tconst { canvasScreenBounds } = this\n\n\t\tconst screenX = (x - canvasScreenBounds.minX) * this.dpr\n\t\tconst screenY = (y - canvasScreenBounds.minY) * this.dpr\n\n\t\treturn { x: screenX, y: screenY }\n\t}\n\n\tgetPagePoint = (x: number, y: number) => {\n\t\tconst { contentPageBounds, contentScreenBounds, canvasPageBounds } = this\n\n\t\tconst { x: screenX, y: screenY } = this.getScreenPoint(x, y)\n\n\t\treturn new Vec2d(\n\t\t\tcanvasPageBounds.minX + (screenX * contentPageBounds.width) / contentScreenBounds.width,\n\t\t\tcanvasPageBounds.minY + (screenY * contentPageBounds.height) / contentScreenBounds.height,\n\t\t\t1\n\t\t)\n\t}\n\n\tminimapScreenPointToPagePoint = (\n\t\tx: number,\n\t\ty: number,\n\t\tshiftKey = false,\n\t\tclampToBounds = false\n\t) => {\n\t\tconst { editor } = this\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\n\t\tlet { x: px, y: py } = this.getPagePoint(x, y)\n\n\t\tif (clampToBounds) {\n\t\t\tconst shapesPageBounds = this.editor.getCurrentPageBounds()\n\t\t\tconst vpPageBounds = viewportPageBounds\n\n\t\t\tconst minX = (shapesPageBounds?.minX ?? 0) - vpPageBounds.width / 2\n\t\t\tconst maxX = (shapesPageBounds?.maxX ?? 0) + vpPageBounds.width / 2\n\t\t\tconst minY = (shapesPageBounds?.minY ?? 0) - vpPageBounds.height / 2\n\t\t\tconst maxY = (shapesPageBounds?.maxY ?? 0) + vpPageBounds.height / 2\n\n\t\t\tconst lx = Math.max(0, minX + vpPageBounds.width - px)\n\t\t\tconst rx = Math.max(0, -(maxX - vpPageBounds.width - px))\n\t\t\tconst ly = Math.max(0, minY + vpPageBounds.height - py)\n\t\t\tconst ry = Math.max(0, -(maxY - vpPageBounds.height - py))\n\n\t\t\tconst ql = Math.max(0, lx - rx)\n\t\t\tconst qr = Math.max(0, rx - lx)\n\t\t\tconst qt = Math.max(0, ly - ry)\n\t\t\tconst qb = Math.max(0, ry - ly)\n\n\t\t\tif (ql && ql > qr) {\n\t\t\t\tpx += ql / 2\n\t\t\t} else if (qr) {\n\t\t\t\tpx -= qr / 2\n\t\t\t}\n\n\t\t\tif (qt && qt > qb) {\n\t\t\t\tpy += qt / 2\n\t\t\t} else if (qb) {\n\t\t\t\tpy -= qb / 2\n\t\t\t}\n\n\t\t\tpx = clamp(px, minX, maxX)\n\t\t\tpy = clamp(py, minY, maxY)\n\t\t}\n\n\t\tif (shiftKey) {\n\t\t\tconst { originPagePoint } = this\n\t\t\tconst dx = Math.abs(px - originPagePoint.x)\n\t\t\tconst dy = Math.abs(py - originPagePoint.y)\n\t\t\tif (dx > dy) {\n\t\t\t\tpy = originPagePoint.y\n\t\t\t} else {\n\t\t\t\tpx = originPagePoint.x\n\t\t\t}\n\t\t}\n\n\t\treturn new Vec2d(px, py)\n\t}\n\n\trender = () => {\n\t\tconst { cvs, pageBounds } = this\n\t\tthis.updateCanvasPageBounds()\n\n\t\tconst { editor, canvasScreenBounds, canvasPageBounds, contentPageBounds, contentScreenBounds } =\n\t\t\tthis\n\t\tconst { width: cw, height: ch } = canvasScreenBounds\n\n\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\n\t\tif (!cvs || !pageBounds) {\n\t\t\treturn\n\t\t}\n\n\t\tconst ctx = cvs.getContext('2d')!\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Minimap (shapes): Could not get context')\n\t\t}\n\n\t\tctx.resetTransform()\n\t\tctx.globalAlpha = 1\n\t\tctx.clearRect(0, 0, cw, ch)\n\n\t\t// Transform canvas\n\n\t\tconst sx = contentScreenBounds.width / contentPageBounds.width\n\t\tconst sy = contentScreenBounds.height / contentPageBounds.height\n\n\t\tctx.translate((cw - contentScreenBounds.width) / 2, (ch - contentScreenBounds.height) / 2)\n\t\tctx.scale(sx, sy)\n\t\tctx.translate(-contentPageBounds.minX, -contentPageBounds.minY)\n\n\t\t// Default radius for rounded rects\n\t\tconst rx = 8 / sx\n\t\tconst ry = 8 / sx\n\t\t// Min radius\n\t\tconst ax = 1 / sx\n\t\tconst ay = 1 / sx\n\t\t// Max radius factor\n\t\tconst bx = rx / 4\n\t\tconst by = ry / 4\n\n\t\t// shapes\n\t\tconst shapesPath = new Path2D()\n\t\tconst selectedPath = new Path2D()\n\n\t\tconst { shapeFill, selectFill, viewportFill } = this.colors\n\n\t\t// When there are many shapes, don't draw rounded rectangles;\n\t\t// consider using the shape's size instead.\n\n\t\tlet pb: Box2d & { id: TLShapeId }\n\t\tfor (let i = 0, n = pageBounds.length; i < n; i++) {\n\t\t\tpb = pageBounds[i]\n\t\t\tMinimapManager.roundedRect(\n\t\t\t\tselectedShapeIds.includes(pb.id) ? selectedPath : shapesPath,\n\t\t\t\tpb.minX,\n\t\t\t\tpb.minY,\n\t\t\t\tpb.width,\n\t\t\t\tpb.height,\n\t\t\t\tclamp(rx, ax, pb.width / bx),\n\t\t\t\tclamp(ry, ay, pb.height / by)\n\t\t\t)\n\t\t}\n\n\t\t// Fill the shapes paths\n\t\tctx.fillStyle = shapeFill\n\t\tctx.fill(shapesPath)\n\n\t\t// Fill the selected paths\n\t\tctx.fillStyle = selectFill\n\t\tctx.fill(selectedPath)\n\n\t\tif (this.debug) {\n\t\t\t// Page bounds\n\t\t\tconst commonBounds = Box2d.Common(pageBounds)\n\t\t\tconst { minX, minY, width, height } = commonBounds\n\t\t\tctx.strokeStyle = 'green'\n\t\t\tctx.lineWidth = 2 / sx\n\t\t\tctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)\n\t\t}\n\n\t\t// Brush\n\t\t{\n\t\t\tconst { brush } = editor.getInstanceState()\n\t\t\tif (brush) {\n\t\t\t\tconst { x, y, w, h } = brush\n\t\t\t\tctx.beginPath()\n\t\t\t\tMinimapManager.sharpRect(ctx, x, y, w, h)\n\t\t\t\tctx.closePath()\n\t\t\t\tctx.fillStyle = viewportFill\n\t\t\t\tctx.fill()\n\t\t\t}\n\t\t}\n\n\t\t// Viewport\n\t\t{\n\t\t\tconst { minX, minY, width, height } = viewportPageBounds\n\n\t\t\tctx.beginPath()\n\n\t\t\tconst rx = 12 / sx\n\t\t\tconst ry = 12 / sx\n\t\t\tMinimapManager.roundedRect(\n\t\t\t\tctx,\n\t\t\t\tminX,\n\t\t\t\tminY,\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t\tMath.min(width / 4, rx),\n\t\t\t\tMath.min(height / 4, ry)\n\t\t\t)\n\t\t\tctx.closePath()\n\t\t\tctx.fillStyle = viewportFill\n\t\t\tctx.fill()\n\n\t\t\tif (this.debug) {\n\t\t\t\tctx.strokeStyle = 'orange'\n\t\t\t\tctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)\n\t\t\t}\n\t\t}\n\n\t\t// Show collaborator cursors\n\n\t\t// Padding for canvas bounds edges\n\t\tconst px = 2.5 / sx\n\t\tconst py = 2.5 / sy\n\n\t\tconst currentPageId = editor.getCurrentPageId()\n\n\t\tlet collaborator: TLInstancePresence\n\t\tfor (let i = 0; i < this.collaborators.length; i++) {\n\t\t\tcollaborator = this.collaborators[i]\n\t\t\tif (collaborator.currentPageId !== currentPageId) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\tctx.beginPath()\n\t\t\tctx.ellipse(\n\t\t\t\tclamp(collaborator.cursor.x, canvasPageBounds.minX + px, canvasPageBounds.maxX - px),\n\t\t\t\tclamp(collaborator.cursor.y, canvasPageBounds.minY + py, canvasPageBounds.maxY - py),\n\t\t\t\t5 / sx,\n\t\t\t\t5 / sy,\n\t\t\t\t0,\n\t\t\t\t0,\n\t\t\t\tPI2\n\t\t\t)\n\t\t\tctx.fillStyle = collaborator.color\n\t\t\tctx.fill()\n\t\t}\n\n\t\tif (this.debug) {\n\t\t\tctx.lineWidth = 2 / sx\n\n\t\t\t{\n\t\t\t\t// Minimap Bounds\n\t\t\t\tconst { minX, minY, width, height } = contentPageBounds\n\t\t\t\tctx.strokeStyle = 'red'\n\t\t\t\tctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)\n\t\t\t}\n\n\t\t\t{\n\t\t\t\t// Canvas Bounds\n\t\t\t\tconst { minX, minY, width, height } = canvasPageBounds\n\t\t\t\tctx.strokeStyle = 'blue'\n\t\t\t\tctx.strokeRect(minX + 1 / sx, minY + 1 / sy, width - 2 / sx, height - 2 / sy)\n\t\t\t}\n\t\t}\n\t}\n\n\tstatic roundedRect(\n\t\tctx: CanvasRenderingContext2D | Path2D,\n\t\tx: number,\n\t\ty: number,\n\t\twidth: number,\n\t\theight: number,\n\t\trx: number,\n\t\try: number\n\t) {\n\t\tif (rx < 1 && ry < 1) {\n\t\t\tctx.rect(x, y, width, height)\n\t\t\treturn\n\t\t}\n\n\t\tctx.moveTo(x + rx, y)\n\t\tctx.lineTo(x + width - rx, y)\n\t\tctx.quadraticCurveTo(x + width, y, x + width, y + ry)\n\t\tctx.lineTo(x + width, y + height - ry)\n\t\tctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height)\n\t\tctx.lineTo(x + rx, y + height)\n\t\tctx.quadraticCurveTo(x, y + height, x, y + height - ry)\n\t\tctx.lineTo(x, y + ry)\n\t\tctx.quadraticCurveTo(x, y, x + rx, y)\n\t}\n\n\tstatic sharpRect(\n\t\tctx: CanvasRenderingContext2D | Path2D,\n\t\tx: number,\n\t\ty: number,\n\t\twidth: number,\n\t\theight: number,\n\t\t_rx?: number,\n\t\t_ry?: number\n\t) {\n\t\tctx.rect(x, y, width, height)\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["rx", "ry"]
+}