@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/NavigationZone/MinimapManager.mjs

@@ -0,0 +1,279 @@
+import {
+  Box2d,
+  PI2,
+  Vec2d,
+  clamp,
+  uniqueId
+} from "@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 = uniqueId();
+  cvs = null;
+  pageBounds = [];
+  collaborators = [];
+  canvasScreenBounds = new Box2d();
+  canvasPageBounds = new Box2d();
+  contentPageBounds = new Box2d();
+  contentScreenBounds = new Box2d();
+  originPagePoint = new Vec2d();
+  originPageCenter = new 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 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 = clamp(px, minX, maxX);
+      py = 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 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,
+        clamp(rx, ax, pb.width / bx),
+        clamp(ry, ay, pb.height / by)
+      );
+    }
+    ctx.fillStyle = shapeFill;
+    ctx.fill(shapesPath);
+    ctx.fillStyle = selectFill;
+    ctx.fill(selectedPath);
+    if (this.debug) {
+      const commonBounds = 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(
+        clamp(collaborator.cursor.x, canvasPageBounds.minX + px, canvasPageBounds.maxX - px),
+        clamp(collaborator.cursor.y, canvasPageBounds.minY + py, canvasPageBounds.maxY - py),
+        5 / sx,
+        5 / sy,
+        0,
+        0,
+        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);
+  }
+}
+export {
+  MinimapManager
+};
+//# sourceMappingURL=MinimapManager.mjs.map

package/dist-esm/lib/ui/components/NavigationZone/MinimapManager.mjs.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"]
+}

package/dist-esm/lib/ui/components/NavigationZone/NavigationZone.mjs

@@ -0,0 +1,83 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { useActions } from "../../hooks/useActions.mjs";
+import { useBreakpoint } from "../../hooks/useBreakpoint.mjs";
+import { useLocalStorageState } from "../../hooks/useLocalStorageState.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import { kbdStr } from "../primitives/shared.mjs";
+import { Minimap } from "./Minimap.mjs";
+import { ZoomMenu } from "./ZoomMenu.mjs";
+const NavigationZone = memo(function NavigationZone2() {
+  const actions = useActions();
+  const msg = useTranslation();
+  const breakpoint = useBreakpoint();
+  const [collapsed, setCollapsed] = useLocalStorageState("minimap", true);
+  const toggleMinimap = useCallback(() => {
+    setCollapsed((s) => !s);
+  }, [setCollapsed]);
+  if (breakpoint < 4) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-navigation-zone", children: [
+    /* @__PURE__ */ jsx("div", { className: "tlui-buttons__horizontal", children: breakpoint < 6 ? /* @__PURE__ */ jsx(ZoomMenu, {}) : collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ZoomMenu, {}),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "icon",
+          icon: collapsed ? "chevrons-ne" : "chevrons-sw",
+          "data-testid": "minimap.toggle",
+          title: msg("navigation-zone.toggle-minimap"),
+          className: "tlui-navigation-zone__toggle",
+          onClick: toggleMinimap
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "icon",
+          icon: "minus",
+          "data-testid": "minimap.zoom-out",
+          title: `${msg(actions["zoom-out"].label)} ${kbdStr(actions["zoom-out"].kbd)}`,
+          onClick: () => actions["zoom-out"].onSelect("navigation-zone")
+        }
+      ),
+      /* @__PURE__ */ jsx(ZoomMenu, {}),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "icon",
+          icon: "plus",
+          "data-testid": "minimap.zoom-in",
+          title: `${msg(actions["zoom-in"].label)} ${kbdStr(actions["zoom-in"].kbd)}`,
+          onClick: () => actions["zoom-in"].onSelect("navigation-zone")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "icon",
+          icon: collapsed ? "chevrons-ne" : "chevrons-sw",
+          "data-testid": "minimap.toggle",
+          title: msg("navigation-zone.toggle-minimap"),
+          className: "tlui-navigation-zone__toggle",
+          onClick: toggleMinimap
+        }
+      )
+    ] }) }),
+    breakpoint >= 6 && !collapsed && /* @__PURE__ */ jsx(
+      Minimap,
+      {
+        viewportFill: "--color-muted-1",
+        selectFill: "--color-selected",
+        shapeFill: "--color-text-3"
+      }
+    )
+  ] });
+});
+export {
+  NavigationZone
+};
+//# sourceMappingURL=NavigationZone.mjs.map

package/dist-esm/lib/ui/components/NavigationZone/NavigationZone.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/NavigationZone/NavigationZone.tsx"],
+  "sourcesContent": ["import { memo, useCallback } from 'react'\nimport { useActions } from '../../hooks/useActions'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useLocalStorageState } from '../../hooks/useLocalStorageState'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport { kbdStr } from '../primitives/shared'\nimport { Minimap } from './Minimap'\nimport { ZoomMenu } from './ZoomMenu'\n\n/** @internal */\nexport const NavigationZone = memo(function NavigationZone() {\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst [collapsed, setCollapsed] = useLocalStorageState('minimap', true)\n\n\tconst toggleMinimap = useCallback(() => {\n\t\tsetCollapsed((s) => !s)\n\t}, [setCollapsed])\n\n\tif (breakpoint < 4) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-navigation-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t{breakpoint < 6 ? (\n\t\t\t\t\t<ZoomMenu />\n\t\t\t\t) : collapsed ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ZoomMenu />\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ticon={collapsed ? 'chevrons-ne' : 'chevrons-sw'}\n\t\t\t\t\t\t\tdata-testid=\"minimap.toggle\"\n\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\tclassName=\"tlui-navigation-zone__toggle\"\n\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ticon=\"minus\"\n\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-out\"\n\t\t\t\t\t\t\ttitle={`${msg(actions['zoom-out'].label!)} ${kbdStr(actions['zoom-out'].kbd!)}`}\n\t\t\t\t\t\t\tonClick={() => actions['zoom-out'].onSelect('navigation-zone')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ZoomMenu />\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\t\tdata-testid=\"minimap.zoom-in\"\n\t\t\t\t\t\t\ttitle={`${msg(actions['zoom-in'].label!)} ${kbdStr(actions['zoom-in'].kbd!)}`}\n\t\t\t\t\t\t\tonClick={() => actions['zoom-in'].onSelect('navigation-zone')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\ticon={collapsed ? 'chevrons-ne' : 'chevrons-sw'}\n\t\t\t\t\t\t\tdata-testid=\"minimap.toggle\"\n\t\t\t\t\t\t\ttitle={msg('navigation-zone.toggle-minimap')}\n\t\t\t\t\t\t\tclassName=\"tlui-navigation-zone__toggle\"\n\t\t\t\t\t\t\tonClick={toggleMinimap}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{breakpoint >= 6 && !collapsed && (\n\t\t\t\t<Minimap\n\t\t\t\t\tviewportFill=\"--color-muted-1\"\n\t\t\t\t\tselectFill=\"--color-selected\"\n\t\t\t\t\tshapeFill=\"--color-text-3\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AA8BK,SAEA,UAFA,KAEA,YAFA;AA9BL,SAAS,MAAM,mBAAmB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAGlB,MAAM,iBAAiB,KAAK,SAASA,kBAAiB;AAC5D,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB,WAAW,IAAI;AAEtE,QAAM,gBAAgB,YAAY,MAAM;AACvC,iBAAa,CAAC,MAAM,CAAC,CAAC;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,aAAa,GAAG;AACnB,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,SAAI,WAAU,wBACd;AAAA,wBAAC,SAAI,WAAU,4BACb,uBAAa,IACb,oBAAC,YAAS,IACP,YACH,iCACC;AAAA,0BAAC,YAAS;AAAA,MACV;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,MAAM,YAAY,gBAAgB;AAAA,UAClC,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,WAAU;AAAA,UACV,SAAS;AAAA;AAAA,MACV;AAAA,OACD,IAEA,iCACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,QAAQ,UAAU,EAAE,KAAM,CAAC,IAAI,OAAO,QAAQ,UAAU,EAAE,GAAI,CAAC;AAAA,UAC7E,SAAS,MAAM,QAAQ,UAAU,EAAE,SAAS,iBAAiB;AAAA;AAAA,MAC9D;AAAA,MACA,oBAAC,YAAS;AAAA,MACV;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,MAAK;AAAA,UACL,eAAY;AAAA,UACZ,OAAO,GAAG,IAAI,QAAQ,SAAS,EAAE,KAAM,CAAC,IAAI,OAAO,QAAQ,SAAS,EAAE,GAAI,CAAC;AAAA,UAC3E,SAAS,MAAM,QAAQ,SAAS,EAAE,SAAS,iBAAiB;AAAA;AAAA,MAC7D;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,MAAK;AAAA,UACL,MAAM,YAAY,gBAAgB;AAAA,UAClC,eAAY;AAAA,UACZ,OAAO,IAAI,gCAAgC;AAAA,UAC3C,WAAU;AAAA,UACV,SAAS;AAAA;AAAA,MACV;AAAA,OACD,GAEF;AAAA,IACC,cAAc,KAAK,CAAC,aACpB;AAAA,MAAC;AAAA;AAAA,QACA,cAAa;AAAA,QACb,YAAW;AAAA,QACX,WAAU;AAAA;AAAA,IACX;AAAA,KAEF;AAEF,CAAC;",
+  "names": ["NavigationZone"]
+}

package/dist-esm/lib/ui/components/NavigationZone/ZoomMenu.mjs

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ANIMATION_MEDIUM_MS, track, useEditor } from "@bigbluebutton/editor";
+import * as React from "react";
+import { useActions } from "../../hooks/useActions.mjs";
+import { useBreakpoint } from "../../hooks/useBreakpoint.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import * as M from "../primitives/DropdownMenu.mjs";
+const ZoomMenu = track(function ZoomMenu2() {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const breakpoint = useBreakpoint();
+  const zoom = editor.getZoomLevel();
+  const hasShapes = editor.getCurrentPageShapeIds().size > 0;
+  const hasSelected = editor.getSelectedShapeIds().length > 0;
+  const isZoomedTo100 = editor.getZoomLevel() === 1;
+  const handleDoubleClick = React.useCallback(() => {
+    editor.resetZoom(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS });
+  }, [editor]);
+  return /* @__PURE__ */ jsxs(M.Root, { id: "zoom", children: [
+    /* @__PURE__ */ jsx(M.Trigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "icon",
+        title: `${msg("navigation-zone.zoom")}`,
+        "data-testid": "minimap.zoom-menu",
+        className: breakpoint < 5 ? "tlui-zoom-menu__button" : "tlui-zoom-menu__button__pct",
+        onDoubleClick: handleDoubleClick,
+        icon: breakpoint < 4 ? "zoom-in" : void 0,
+        children: breakpoint < 4 ? null : /* @__PURE__ */ jsxs("span", { style: { flexGrow: 0, textAlign: "center" }, children: [
+          Math.floor(zoom * 100),
+          "%"
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(M.Content, { side: "top", align: "start", alignOffset: 0, children: /* @__PURE__ */ jsxs(M.Group, { children: [
+      /* @__PURE__ */ jsx(ZoomMenuItem, { action: "zoom-in", "data-testid": "minimap.zoom-menu.zoom-in", noClose: true }),
+      /* @__PURE__ */ jsx(ZoomMenuItem, { action: "zoom-out", "data-testid": "minimap.zoom-menu.zoom-out", noClose: true }),
+      /* @__PURE__ */ jsx(
+        ZoomMenuItem,
+        {
+          action: "zoom-to-100",
+          "data-testid": "minimap.zoom-menu.zoom-to-100",
+          noClose: true,
+          disabled: isZoomedTo100
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ZoomMenuItem,
+        {
+          action: "zoom-to-fit",
+          disabled: !hasShapes,
+          "data-testid": "minimap.zoom-menu.zoom-to-fit",
+          noClose: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ZoomMenuItem,
+        {
+          action: "zoom-to-selection",
+          disabled: !hasSelected,
+          "data-testid": "minimap.zoom-menu.zoom-to-selection",
+          noClose: true
+        }
+      )
+    ] }) })
+  ] });
+});
+function ZoomMenuItem(props) {
+  const { action, disabled = false, noClose = false } = props;
+  const actions = useActions();
+  return /* @__PURE__ */ jsx(
+    M.Item,
+    {
+      type: "menu",
+      label: actions[action].label,
+      kbd: actions[action].kbd,
+      "data-testid": props["data-testid"],
+      onClick: () => actions[action].onSelect("zoom-menu"),
+      noClose,
+      disabled
+    }
+  );
+}
+export {
+  ZoomMenu
+};
+//# sourceMappingURL=ZoomMenu.mjs.map

package/dist-esm/lib/ui/components/NavigationZone/ZoomMenu.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/NavigationZone/ZoomMenu.tsx"],
+  "sourcesContent": ["import { ANIMATION_MEDIUM_MS, track, useEditor } from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport { useActions } from '../../hooks/useActions'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\n\nexport const ZoomMenu = track(function ZoomMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst zoom = editor.getZoomLevel()\n\tconst hasShapes = editor.getCurrentPageShapeIds().size > 0\n\tconst hasSelected = editor.getSelectedShapeIds().length > 0\n\tconst isZoomedTo100 = editor.getZoomLevel() === 1\n\n\tconst handleDoubleClick = React.useCallback(() => {\n\t\teditor.resetZoom(editor.getViewportScreenCenter(), { duration: ANIMATION_MEDIUM_MS })\n\t}, [editor])\n\n\treturn (\n\t\t<M.Root id=\"zoom\">\n\t\t\t<M.Trigger>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={`${msg('navigation-zone.zoom')}`}\n\t\t\t\t\tdata-testid=\"minimap.zoom-menu\"\n\t\t\t\t\tclassName={breakpoint < 5 ? 'tlui-zoom-menu__button' : 'tlui-zoom-menu__button__pct'}\n\t\t\t\t\tonDoubleClick={handleDoubleClick}\n\t\t\t\t\ticon={breakpoint < 4 ? 'zoom-in' : undefined}\n\t\t\t\t>\n\t\t\t\t\t{breakpoint < 4 ? null : (\n\t\t\t\t\t\t<span style={{ flexGrow: 0, textAlign: 'center' }}>{Math.floor(zoom * 100)}%</span>\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</M.Trigger>\n\t\t\t<M.Content side=\"top\" align=\"start\" alignOffset={0}>\n\t\t\t\t<M.Group>\n\t\t\t\t\t<ZoomMenuItem action=\"zoom-in\" data-testid=\"minimap.zoom-menu.zoom-in\" noClose />\n\t\t\t\t\t<ZoomMenuItem action=\"zoom-out\" data-testid=\"minimap.zoom-menu.zoom-out\" noClose />\n\t\t\t\t\t<ZoomMenuItem\n\t\t\t\t\t\taction=\"zoom-to-100\"\n\t\t\t\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-100\"\n\t\t\t\t\t\tnoClose\n\t\t\t\t\t\tdisabled={isZoomedTo100}\n\t\t\t\t\t/>\n\t\t\t\t\t<ZoomMenuItem\n\t\t\t\t\t\taction=\"zoom-to-fit\"\n\t\t\t\t\t\tdisabled={!hasShapes}\n\t\t\t\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\t\t\t\tnoClose\n\t\t\t\t\t/>\n\t\t\t\t\t<ZoomMenuItem\n\t\t\t\t\t\taction=\"zoom-to-selection\"\n\t\t\t\t\t\tdisabled={!hasSelected}\n\t\t\t\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\t\t\t\tnoClose\n\t\t\t\t\t/>\n\t\t\t\t</M.Group>\n\t\t\t</M.Content>\n\t\t</M.Root>\n\t)\n})\n\nfunction ZoomMenuItem(props: {\n\taction: string\n\tdisabled?: boolean\n\tnoClose?: boolean\n\t'data-testid'?: string\n}) {\n\tconst { action, disabled = false, noClose = false } = props\n\tconst actions = useActions()\n\n\treturn (\n\t\t<M.Item\n\t\t\ttype=\"menu\"\n\t\t\tlabel={actions[action].label}\n\t\t\tkbd={actions[action].kbd}\n\t\t\tdata-testid={props['data-testid']}\n\t\t\tonClick={() => actions[action].onSelect('zoom-menu')}\n\t\t\tnoClose={noClose}\n\t\t\tdisabled={disabled}\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAyBI,cASE,YATF;AAzBJ,SAAS,qBAAqB,OAAO,iBAAiB;AACtD,YAAY,WAAW;AACvB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,YAAY,OAAO;AAEZ,MAAM,WAAW,MAAM,SAASA,YAAW;AACjD,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AAEjC,QAAM,OAAO,OAAO,aAAa;AACjC,QAAM,YAAY,OAAO,uBAAuB,EAAE,OAAO;AACzD,QAAM,cAAc,OAAO,oBAAoB,EAAE,SAAS;AAC1D,QAAM,gBAAgB,OAAO,aAAa,MAAM;AAEhD,QAAM,oBAAoB,MAAM,YAAY,MAAM;AACjD,WAAO,UAAU,OAAO,wBAAwB,GAAG,EAAE,UAAU,oBAAoB,CAAC;AAAA,EACrF,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,qBAAC,EAAE,MAAF,EAAO,IAAG,QACV;AAAA,wBAAC,EAAE,SAAF,EACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAO,GAAG,IAAI,sBAAsB,CAAC;AAAA,QACrC,eAAY;AAAA,QACZ,WAAW,aAAa,IAAI,2BAA2B;AAAA,QACvD,eAAe;AAAA,QACf,MAAM,aAAa,IAAI,YAAY;AAAA,QAElC,uBAAa,IAAI,OACjB,qBAAC,UAAK,OAAO,EAAE,UAAU,GAAG,WAAW,SAAS,GAAI;AAAA,eAAK,MAAM,OAAO,GAAG;AAAA,UAAE;AAAA,WAAC;AAAA;AAAA,IAE9E,GACD;AAAA,IACA,oBAAC,EAAE,SAAF,EAAU,MAAK,OAAM,OAAM,SAAQ,aAAa,GAChD,+BAAC,EAAE,OAAF,EACA;AAAA,0BAAC,gBAAa,QAAO,WAAU,eAAY,6BAA4B,SAAO,MAAC;AAAA,MAC/E,oBAAC,gBAAa,QAAO,YAAW,eAAY,8BAA6B,SAAO,MAAC;AAAA,MACjF;AAAA,QAAC;AAAA;AAAA,UACA,QAAO;AAAA,UACP,eAAY;AAAA,UACZ,SAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACX;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,QAAO;AAAA,UACP,UAAU,CAAC;AAAA,UACX,eAAY;AAAA,UACZ,SAAO;AAAA;AAAA,MACR;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,QAAO;AAAA,UACP,UAAU,CAAC;AAAA,UACX,eAAY;AAAA,UACZ,SAAO;AAAA;AAAA,MACR;AAAA,OACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,SAAS,aAAa,OAKnB;AACF,QAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,MAAM,IAAI;AACtD,QAAM,UAAU,WAAW;AAE3B,SACC;AAAA,IAAC,EAAE;AAAA,IAAF;AAAA,MACA,MAAK;AAAA,MACL,OAAO,QAAQ,MAAM,EAAE;AAAA,MACvB,KAAK,QAAQ,MAAM,EAAE;AAAA,MACrB,eAAa,MAAM,aAAa;AAAA,MAChC,SAAS,MAAM,QAAQ,MAAM,EAAE,SAAS,WAAW;AAAA,MACnD;AAAA,MACA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["ZoomMenu"]
+}

package/dist-esm/lib/ui/components/OfflineIndicator/OfflineIndicator.mjs

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useRef } from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Icon } from "../primitives/Icon.mjs";
+function OfflineIndicator() {
+  const msg = useTranslation();
+  const rContainer = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: classNames("tlui-offline-indicator"), ref: rContainer, children: [
+    msg("status.offline"),
+    /* @__PURE__ */ jsx(Icon, { "aria-label": "offline", icon: "status-offline", small: true })
+  ] });
+}
+export {
+  OfflineIndicator
+};
+//# sourceMappingURL=OfflineIndicator.mjs.map

package/dist-esm/lib/ui/components/OfflineIndicator/OfflineIndicator.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/OfflineIndicator/OfflineIndicator.tsx"],
+  "sourcesContent": ["import classNames from 'classnames'\nimport { useRef } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Icon } from '../primitives/Icon'\n\n/** @public */\nexport function OfflineIndicator() {\n\tconst msg = useTranslation()\n\tconst rContainer = useRef<HTMLDivElement>(null)\n\n\treturn (\n\t\t<div className={classNames('tlui-offline-indicator')} ref={rContainer}>\n\t\t\t{msg('status.offline')}\n\t\t\t<Icon aria-label=\"offline\" icon=\"status-offline\" small />\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAWE,SAEC,KAFD;AAXF,OAAO,gBAAgB;AACvB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AAGd,SAAS,mBAAmB;AAClC,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,OAAuB,IAAI;AAE9C,SACC,qBAAC,SAAI,WAAW,WAAW,wBAAwB,GAAG,KAAK,YACzD;AAAA,QAAI,gBAAgB;AAAA,IACrB,oBAAC,QAAK,cAAW,WAAU,MAAK,kBAAiB,OAAK,MAAC;AAAA,KACxD;AAEF;",
+  "names": []
+}

package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useEditor } from "@bigbluebutton/editor";
+import { useCallback, useRef } from "react";
+import { Input } from "../primitives/Input.mjs";
+const PageItemInput = function PageItemInput2({
+  name,
+  id,
+  isCurrentPage
+}) {
+  const editor = useEditor();
+  const rInput = useRef(null);
+  const handleChange = useCallback(
+    (value) => {
+      editor.renamePage(id, value ? value : "New Page", { ephemeral: true });
+    },
+    [editor, id]
+  );
+  const handleComplete = useCallback(
+    (value) => {
+      editor.mark("rename page");
+      editor.renamePage(id, value || "New Page", { ephemeral: false });
+    },
+    [editor, id]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      className: "tlui-page-menu__item__input",
+      ref: (el) => rInput.current = el,
+      defaultValue: name,
+      onValueChange: handleChange,
+      onComplete: handleComplete,
+      onCancel: handleComplete,
+      shouldManuallyMaintainScrollPositionWhenFocused: true,
+      autofocus: isCurrentPage,
+      autoselect: true
+    }
+  );
+};
+export {
+  PageItemInput
+};
+//# sourceMappingURL=PageItemInput.mjs.map

package/dist-esm/lib/ui/components/PageMenu/PageItemInput.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/PageMenu/PageItemInput.tsx"],
+  "sourcesContent": ["import { TLPageId, useEditor } from '@bigbluebutton/editor'\nimport { useCallback, useRef } from 'react'\nimport { Input } from '../primitives/Input'\n\nexport const PageItemInput = function PageItemInput({\n\tname,\n\tid,\n\tisCurrentPage,\n}: {\n\tname: string\n\tid: TLPageId\n\tisCurrentPage: boolean\n}) {\n\tconst editor = useEditor()\n\n\tconst rInput = useRef<HTMLInputElement | null>(null)\n\n\tconst handleChange = useCallback(\n\t\t(value: string) => {\n\t\t\teditor.renamePage(id, value ? value : 'New Page', { ephemeral: true })\n\t\t},\n\t\t[editor, id]\n\t)\n\n\tconst handleComplete = useCallback(\n\t\t(value: string) => {\n\t\t\teditor.mark('rename page')\n\t\t\teditor.renamePage(id, value || 'New Page', { ephemeral: false })\n\t\t},\n\t\t[editor, id]\n\t)\n\n\treturn (\n\t\t<Input\n\t\t\tclassName=\"tlui-page-menu__item__input\"\n\t\t\tref={(el) => (rInput.current = el)}\n\t\t\tdefaultValue={name}\n\t\t\tonValueChange={handleChange}\n\t\t\tonComplete={handleComplete}\n\t\t\tonCancel={handleComplete}\n\t\t\tshouldManuallyMaintainScrollPositionWhenFocused\n\t\t\tautofocus={isCurrentPage}\n\t\t\tautoselect\n\t\t/>\n\t)\n}\n"],
+  "mappings": "AAiCE;AAjCF,SAAmB,iBAAiB;AACpC,SAAS,aAAa,cAAc;AACpC,SAAS,aAAa;AAEf,MAAM,gBAAgB,SAASA,eAAc;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACD,GAIG;AACF,QAAM,SAAS,UAAU;AAEzB,QAAM,SAAS,OAAgC,IAAI;AAEnD,QAAM,eAAe;AAAA,IACpB,CAAC,UAAkB;AAClB,aAAO,WAAW,IAAI,QAAQ,QAAQ,YAAY,EAAE,WAAW,KAAK,CAAC;AAAA,IACtE;AAAA,IACA,CAAC,QAAQ,EAAE;AAAA,EACZ;AAEA,QAAM,iBAAiB;AAAA,IACtB,CAAC,UAAkB;AAClB,aAAO,KAAK,aAAa;AACzB,aAAO,WAAW,IAAI,SAAS,YAAY,EAAE,WAAW,MAAM,CAAC;AAAA,IAChE;AAAA,IACA,CAAC,QAAQ,EAAE;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,KAAK,CAAC,OAAQ,OAAO,UAAU;AAAA,MAC/B,cAAc;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,iDAA+C;AAAA,MAC/C,WAAW;AAAA,MACX,YAAU;AAAA;AAAA,EACX;AAEF;",
+  "names": ["PageItemInput"]
+}