npm - pdf-presenter - Versions diffs - 1.0.0 → 1.2.0 - Mend

pdf-presenter 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README-zhtw.md +23 -1
package/README.md +28 -1
package/dist/pdf-presenter.js +345 -29
package/package.json +1 -1
package/src/ui/audience.html +3 -1
package/src/ui/audience.js +18 -0
package/src/ui/favicon-presenter.svg +1 -0
package/src/ui/favicon.svg +1 -0
package/src/ui/listing.html +66 -0
package/src/ui/listing.js +49 -0
package/src/ui/modules/cursor-sync.js +76 -0
package/src/ui/modules/grid-view.js +222 -0
package/src/ui/presenter-main.js +54 -0
package/src/ui/presenter.css +185 -0
package/src/ui/presenter.html +23 -1

package/src/ui/listing.html ADDED Viewed

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>PDF Presenter</title>
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
+    <!--PDF_PRESENTER_CONFIG-->
+    <style>
+      * { box-sizing: border-box; }
+      html, body {
+        margin: 0; padding: 0; height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
+        background: #0d1117; color: #e6edf3;
+      }
+      .container { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
+      h1 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
+      .subtitle { font-size: 13px; color: #8b949e; margin-bottom: 24px; }
+      .pdf-list { display: flex; flex-direction: column; gap: 8px; }
+      .pdf-card {
+        display: flex; align-items: center; gap: 16px;
+        background: #161b22; border: 1px solid #21262d; border-radius: 8px;
+        padding: 14px 18px; transition: border-color 0.15s;
+      }
+      .pdf-card:hover { border-color: #388bfd44; }
+      .pdf-name {
+        flex: 1; min-width: 0; font-size: 14px; font-weight: 500;
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      }
+      .badge {
+        font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 12px;
+        white-space: nowrap; flex-shrink: 0;
+      }
+      .badge-ready { background: #238636; color: #fff; }
+      .badge-partial { background: #9e6a03; color: #fff; }
+      .badge-empty { background: #30363d; color: #8b949e; }
+      .badge-none { background: #21262d; color: #484f58; }
+      .slide-count { font-size: 11px; color: #8b949e; white-space: nowrap; flex-shrink: 0; }
+      .actions { display: flex; gap: 6px; flex-shrink: 0; }
+      .btn {
+        appearance: none; background: #1d222a; color: #d7dbe3;
+        border: 1px solid #2d333b; border-radius: 4px;
+        padding: 6px 12px; font-size: 12px; font-family: inherit;
+        cursor: pointer; text-decoration: none; transition: background 0.1s;
+      }
+      .btn:hover { background: #252b35; border-color: #3a4049; }
+      .btn-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
+      .btn-primary:hover { background: #388bfd; }
+      .empty-state {
+        text-align: center; padding: 64px 24px; color: #8b949e; font-size: 14px;
+      }
+      .loading { text-align: center; padding: 64px 24px; color: #8b949e; }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>PDF Presenter</h1>
+      <div class="subtitle" id="dir-path"></div>
+      <div id="list" class="pdf-list"><div class="loading">Loading...</div></div>
+    </div>
+    <script type="module">
+      import { initListing } from "/assets/listing.js";
+      initListing();
+    </script>
+  </body>
+</html>

package/src/ui/listing.js ADDED Viewed

@@ -0,0 +1,49 @@
+/** @typedef {{ pdfName: string; hasNotes: boolean; filledCount: number; totalSlides: number }} PdfStatus */
+function readConfig() {
+  const el = document.getElementById("pdf-presenter-config");
+  return el ? JSON.parse(el.textContent) : {};
+}
+/** @param {PdfStatus} s */
+function badgeHtml(s) {
+  if (!s.hasNotes) return `<span class="badge badge-none">No notes</span>`;
+  if (s.filledCount === 0) return `<span class="badge badge-empty">Empty template</span>`;
+  if (s.filledCount >= s.totalSlides) return `<span class="badge badge-ready">Ready</span>`;
+  return `<span class="badge badge-partial">${s.filledCount}/${s.totalSlides}</span>`;
+}
+/** @param {PdfStatus} s */
+function cardHtml(s) {
+  const encoded = encodeURIComponent(s.pdfName);
+  const slides = s.totalSlides > 0 ? `<span class="slide-count">${s.totalSlides} slides</span>` : "";
+  return `<div class="pdf-card">
+    <span class="pdf-name" title="${s.pdfName}">${s.pdfName}</span>
+    ${badgeHtml(s)}
+    ${slides}
+    <span class="actions">
+      <a class="btn btn-primary" href="/pdf/${encoded}/presenter">Open</a>
+      <a class="btn" href="/pdf/${encoded}/">Audience</a>
+    </span>
+  </div>`;
+}
+export async function initListing() {
+  const config = readConfig();
+  const dirEl = document.getElementById("dir-path");
+  if (dirEl && config.dirName) dirEl.textContent = config.dirName;
+  const listEl = document.getElementById("list");
+  try {
+    const res = await fetch("/api/listing");
+    /** @type {PdfStatus[]} */
+    const pdfs = await res.json();
+    if (pdfs.length === 0) {
+      listEl.innerHTML = `<div class="empty-state">No PDF files found in this directory.</div>`;
+      return;
+    }
+    listEl.innerHTML = pdfs.map(cardHtml).join("");
+  } catch (err) {
+    listEl.innerHTML = `<div class="empty-state">Failed to load listing: ${err.message}</div>`;
+  }
+}

package/src/ui/modules/cursor-sync.js ADDED Viewed

@@ -0,0 +1,76 @@
+// Cursor sync: mirrors the presenter's mouse position over the Current
+// canvas to the audience view as a red laser dot. Coordinates are sent
+// normalized ([0,1]) over the existing BroadcastChannel and throttled
+// via requestAnimationFrame so a fast drag won't spam messages.
+export function createCursorSync({ canvas, channel }) {
+  let enabled = false;
+  let pending = null; // {x, y} | null
+  let rafId = 0;
+  let hiddenPosted = true;
+  function postPending() {
+    rafId = 0;
+    if (!enabled) return;
+    if (!pending) return;
+    channel.postMessage({ type: "cursor", x: pending.x, y: pending.y });
+    hiddenPosted = false;
+    pending = null;
+  }
+  function schedulePost(x, y) {
+    pending = { x, y };
+    if (rafId) return;
+    rafId = requestAnimationFrame(postPending);
+  }
+  function onMove(ev) {
+    if (!enabled) return;
+    const rect = canvas.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const x = (ev.clientX - rect.left) / rect.width;
+    const y = (ev.clientY - rect.top) / rect.height;
+    if (x < 0 || x > 1 || y < 0 || y > 1) {
+      postHide();
+      return;
+    }
+    schedulePost(x, y);
+  }
+  function postHide() {
+    if (hiddenPosted) return;
+    pending = null;
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    channel.postMessage({ type: "cursor", hidden: true });
+    hiddenPosted = true;
+  }
+  function onLeave() {
+    postHide();
+  }
+  function setEnabled(on) {
+    if (on === enabled) return;
+    enabled = on;
+    if (enabled) {
+      canvas.addEventListener("mousemove", onMove);
+      canvas.addEventListener("mouseleave", onLeave);
+    } else {
+      canvas.removeEventListener("mousemove", onMove);
+      canvas.removeEventListener("mouseleave", onLeave);
+      postHide();
+    }
+  }
+  return {
+    setEnabled,
+    toggle: () => {
+      setEnabled(!enabled);
+      return enabled;
+    },
+    isEnabled: () => enabled,
+  };
+}

package/src/ui/modules/grid-view.js ADDED Viewed

@@ -0,0 +1,222 @@
+// Grid view overlay: thumbnail grid for fast slide navigation.
+// Thumbnails are rendered lazily on first open and cached for the session.
+// Keyboard: arrow keys move selection, Enter picks, Esc closes.
+// Render at 2x the min-column width so tiles stay crisp when the grid
+// auto-expands columns wider than the minimum. Display size is driven
+// by CSS (width:100%, height:auto), so the canvas keeps its natural ratio.
+const THUMB_RENDER_WIDTH = 480;
+const CONTAINER_ID = "grid-overlay";
+export function createGridView({ pdf, total, getCurrentSlide, onSelect }) {
+  let overlayEl = null;
+  let gridEl = null;
+  let tileEls = []; // index 0 => slide 1
+  const thumbCache = new Map(); // pageNumber -> HTMLImageElement
+  let selected = 1;
+  let open = false;
+  let renderToken = 0;
+  let aspectsLoaded = false;
+  // Pre-compute each page's aspect ratio and pin it onto the tile BEFORE
+  // any images load. Without this, CSS Grid with definite-height container
+  // recomputes row heights as images decode, shrinking tiles to squeeze all
+  // rows into view. Fetching page viewports is cheap — no rendering, just
+  // metadata from pdf.js.
+  async function pinAspects() {
+    if (aspectsLoaded) return;
+    aspectsLoaded = true;
+    const pagePromises = [];
+    for (let i = 1; i <= total; i++) pagePromises.push(pdf.getPage(i));
+    const pages = await Promise.all(pagePromises);
+    for (let i = 0; i < pages.length; i++) {
+      const vp = pages[i].getViewport({ scale: 1 });
+      const wrap = tileEls[i].querySelector(".grid-thumb");
+      wrap.style.aspectRatio = `${vp.width} / ${vp.height}`;
+    }
+  }
+  function build() {
+    overlayEl = document.createElement("div");
+    overlayEl.id = CONTAINER_ID;
+    overlayEl.className = "grid-overlay hidden";
+    overlayEl.setAttribute("role", "dialog");
+    overlayEl.setAttribute("aria-modal", "true");
+    overlayEl.setAttribute("aria-label", "Slide grid");
+    const header = document.createElement("div");
+    header.className = "grid-header";
+    const title = document.createElement("div");
+    title.className = "grid-title";
+    title.textContent = "All Slides";
+    const hint = document.createElement("div");
+    hint.className = "grid-hint";
+    hint.innerHTML =
+      '<span>← ↑ → ↓</span> move <span>Enter</span> jump <span>Esc</span> close';
+    header.appendChild(title);
+    header.appendChild(hint);
+    gridEl = document.createElement("div");
+    gridEl.className = "grid-tiles";
+    for (let i = 1; i <= total; i++) {
+      const tile = document.createElement("button");
+      tile.type = "button";
+      tile.className = "grid-tile";
+      tile.dataset.slide = String(i);
+      // Wrap content in a plain block div so the <button> itself never acts
+      // as a flex/grid container — button UA styles collapse flex children
+      // with percentage-width replaced elements in some browsers.
+      const inner = document.createElement("div");
+      inner.className = "grid-tile-inner";
+      const canvasWrap = document.createElement("div");
+      canvasWrap.className = "grid-thumb";
+      const label = document.createElement("div");
+      label.className = "grid-label";
+      label.textContent = String(i);
+      inner.appendChild(canvasWrap);
+      inner.appendChild(label);
+      tile.appendChild(inner);
+      tile.addEventListener("click", () => pick(i));
+      tile.addEventListener("mouseenter", () => setSelected(i, false));
+      gridEl.appendChild(tile);
+      tileEls.push(tile);
+    }
+    overlayEl.appendChild(header);
+    overlayEl.appendChild(gridEl);
+    overlayEl.addEventListener("click", (ev) => {
+      if (ev.target === overlayEl) close();
+    });
+    document.body.appendChild(overlayEl);
+  }
+  async function renderThumb(pageNumber) {
+    if (thumbCache.has(pageNumber)) return thumbCache.get(pageNumber);
+    const page = await pdf.getPage(pageNumber);
+    const unscaled = page.getViewport({ scale: 1 });
+    const scale = THUMB_RENDER_WIDTH / unscaled.width;
+    const viewport = page.getViewport({ scale });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.floor(viewport.width);
+    canvas.height = Math.floor(viewport.height);
+    const ctx = canvas.getContext("2d");
+    await page.render({ canvasContext: ctx, viewport }).promise;
+    // <img> is a proper replaced element — width:100% / height:auto always
+    // yields the image's natural aspect ratio.
+    const img = new Image(canvas.width, canvas.height);
+    img.src = canvas.toDataURL("image/png");
+    img.decoding = "async";
+    img.alt = `Slide ${pageNumber}`;
+    thumbCache.set(pageNumber, img);
+    return img;
+  }
+  async function fillTiles() {
+    const token = ++renderToken;
+    // Render in two passes: selected tile first so it shows up instantly,
+    // then the rest in order. Each await checks the token so a close()
+    // during rendering aborts cleanly.
+    const order = [selected];
+    for (let i = 1; i <= total; i++) if (i !== selected) order.push(i);
+    for (const n of order) {
+      if (token !== renderToken) return;
+      const tile = tileEls[n - 1];
+      const wrap = tile.querySelector(".grid-thumb");
+      if (wrap.firstChild) continue;
+      try {
+        const canvas = await renderThumb(n);
+        if (token !== renderToken) return;
+        if (!wrap.firstChild) wrap.appendChild(canvas);
+      } catch {
+        // ignore render failures — tile stays blank
+      }
+    }
+  }
+  function setSelected(n, scroll = true) {
+    if (n < 1 || n > total) return;
+    selected = n;
+    for (const t of tileEls) t.classList.remove("selected");
+    const tile = tileEls[n - 1];
+    tile.classList.add("selected");
+    if (scroll) tile.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }
+  function pick(n) {
+    close();
+    onSelect(n);
+  }
+  function columnsPerRow() {
+    if (!gridEl || !tileEls.length) return 1;
+    const first = tileEls[0].getBoundingClientRect();
+    const gridRect = gridEl.getBoundingClientRect();
+    const gapX = 12;
+    const cols = Math.max(
+      1,
+      Math.floor((gridRect.width + gapX) / (first.width + gapX)),
+    );
+    return cols;
+  }
+  function onKey(ev) {
+    if (!open) return;
+    const cols = columnsPerRow();
+    if (ev.key === "Escape") {
+      ev.preventDefault();
+      close();
+    } else if (ev.key === "Enter") {
+      ev.preventDefault();
+      pick(selected);
+    } else if (ev.key === "ArrowRight") {
+      ev.preventDefault();
+      setSelected(Math.min(total, selected + 1));
+    } else if (ev.key === "ArrowLeft") {
+      ev.preventDefault();
+      setSelected(Math.max(1, selected - 1));
+    } else if (ev.key === "ArrowDown") {
+      ev.preventDefault();
+      setSelected(Math.min(total, selected + cols));
+    } else if (ev.key === "ArrowUp") {
+      ev.preventDefault();
+      setSelected(Math.max(1, selected - cols));
+    } else if (ev.key === "Home") {
+      ev.preventDefault();
+      setSelected(1);
+    } else if (ev.key === "End") {
+      ev.preventDefault();
+      setSelected(total);
+    }
+  }
+  function openView() {
+    if (!overlayEl) build();
+    open = true;
+    overlayEl.classList.remove("hidden");
+    setSelected(getCurrentSlide(), true);
+    // Fire and forget — pins each tile's box geometry to its slide aspect,
+    // then kicks off rendering. fillTiles runs in parallel; it's safe because
+    // the tiles already exist and we only update wrap.style.aspectRatio.
+    pinAspects().then(fillTiles);
+    window.addEventListener("keydown", onKey, true);
+  }
+  function close() {
+    if (!open) return;
+    open = false;
+    renderToken++;
+    overlayEl.classList.add("hidden");
+    window.removeEventListener("keydown", onKey, true);
+  }
+  return {
+    open: openView,
+    close,
+    isOpen: () => open,
+  };
+}

package/src/ui/presenter-main.js CHANGED Viewed

@@ -16,6 +16,8 @@ import { wireImportExport } from "./modules/import-export.js";
 import { createRecordingDialog } from "./modules/recording-dialog.js";
 import { createRecorder } from "./modules/recording.js";
 import { createResizableLayout } from "./modules/resizable-layout.js";
+import { createGridView } from "./modules/grid-view.js";
+import { createCursorSync } from "./modules/cursor-sync.js";
 export async function initPresenter() {
   const config = readConfig();
@@ -31,6 +33,23 @@ export async function initPresenter() {
   const notesHint = document.getElementById("notes-hint");
   const counter = document.getElementById("counter");
   const timerEl = document.getElementById("timer");
+  const pdfNameEl = document.getElementById("pdf-name");
+  const gridBtn = document.getElementById("grid-btn");
+  const cursorSyncBtn = document.getElementById("cursor-sync-btn");
+  if (pdfNameEl && config.pdfName) {
+    pdfNameEl.textContent = config.pdfName;
+    pdfNameEl.title = config.pdfName;
+  }
+  // Show "back to list" button when launched from directory mode
+  if (config.listUrl) {
+    const backBtn = document.getElementById("back-to-list");
+    if (backBtn) {
+      backBtn.href = config.listUrl;
+      backBtn.classList.remove("hidden");
+    }
+  }
   const channel = new BroadcastChannel(CHANNEL_NAME);
   let currentSlide = 1;
@@ -125,6 +144,8 @@ export async function initPresenter() {
       }
       return;
     }
+    // Grid view owns the keyboard while open (arrows / Enter / Esc).
+    if (gridView.isOpen()) return;
     if (ev.key === "ArrowRight" || ev.key === "PageDown" || ev.key === " ") {
       ev.preventDefault();
       show(currentSlide + 1);
@@ -141,6 +162,13 @@ export async function initPresenter() {
       toggleBlack();
     } else if (ev.key === "r" || ev.key === "R") {
       timer.reset();
+    } else if (ev.key === "g" || ev.key === "G") {
+      ev.preventDefault();
+      gridView.open();
+    } else if (ev.key === "l" || ev.key === "L") {
+      ev.preventDefault();
+      cursorSync.toggle();
+      updateCursorSyncBtn();
     }
   });
@@ -154,6 +182,32 @@ export async function initPresenter() {
       : null;
   const timer = createTimer({ timerEl, resetBtnEl: timerResetBtn, countdownMs });
+  // ---- Grid view ----
+  const gridView = createGridView({
+    pdf,
+    total,
+    getCurrentSlide: () => currentSlide,
+    onSelect: (n) => show(n),
+  });
+  if (gridBtn) gridBtn.addEventListener("click", () => gridView.open());
+  // ---- Cursor sync ----
+  const cursorSync = createCursorSync({ canvas: currentCanvas, channel });
+  function updateCursorSyncBtn() {
+    if (!cursorSyncBtn) return;
+    const on = cursorSync.isEnabled();
+    cursorSyncBtn.textContent = `◉ Cursor sync: ${on ? "on" : "off"}`;
+    cursorSyncBtn.setAttribute("aria-pressed", String(on));
+    cursorSyncBtn.classList.toggle("active", on);
+  }
+  if (cursorSyncBtn) {
+    cursorSyncBtn.addEventListener("click", () => {
+      cursorSync.toggle();
+      updateCursorSyncBtn();
+    });
+  }
+  updateCursorSyncBtn();
   // ---- Resizable layout dividers ----
   createResizableLayout({
     layoutEl: document.querySelector(".layout"),

package/src/ui/presenter.css CHANGED Viewed

@@ -667,3 +667,188 @@ button.timer:focus-visible {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 9px;
 }
+/* ==========================================================================
+   Meta: filename + view row (grid + cursor sync)
+   ========================================================================== */
+.meta > .pdf-name {
+  grid-column: 1 / -1;
+  font-size: 11px;
+  color: #9aa3b0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 0 0;
+}
+.meta > .view-row {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 6px;
+}
+.meta > .view-row > .btn {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+}
+.meta > .view-row > .hidden {
+  display: none;
+}
+#cursor-sync-btn.active {
+  background: #1f3a28;
+  border-color: #3d7a52;
+  color: #d4f0de;
+}
+/* ==========================================================================
+   Grid view overlay
+   ========================================================================== */
+.grid-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 8, 11, 0.94);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 28px 28px;
+  overflow: hidden;
+}
+.grid-overlay.hidden {
+  display: none;
+}
+.grid-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #23272e;
+}
+.grid-title {
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: #c0c6d0;
+}
+.grid-hint {
+  font-size: 11px;
+  color: #7a8291;
+}
+.grid-hint span {
+  display: inline-block;
+  padding: 1px 6px;
+  margin: 0 2px 0 8px;
+  border: 1px solid #2d323b;
+  border-radius: 3px;
+  color: #9aa3b0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+}
+.grid-tiles {
+  flex: 1;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  /* max-content on implicit rows prevents the grid from recomputing row
+     heights against the container when images decode — rows stay at the
+     size their aspect-ratio-pinned .grid-thumb asks for. */
+  grid-auto-rows: max-content;
+  gap: 14px;
+  align-content: start;
+  padding: 4px 4px 12px;
+}
+.grid-tile {
+  appearance: none;
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: #15181d;
+  border: 2px solid #23272e;
+  border-radius: 6px;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  font-family: inherit;
+  transition: border-color 0.1s ease, transform 0.1s ease;
+}
+.grid-tile-inner {
+  display: block;
+}
+.grid-tile:hover {
+  border-color: #3a4049;
+}
+.grid-tile.selected {
+  border-color: #7fd4a0;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(127, 212, 160, 0.15);
+}
+.grid-thumb {
+  display: block;
+  width: 100%;
+  /* aspect-ratio is set inline by grid-view.js pinAspects() per slide,
+     with a sane fallback so the box has some height before pages load. */
+  aspect-ratio: 16 / 9;
+  background: #000;
+}
+.grid-thumb img,
+.grid-thumb canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.grid-label {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: #9aa3b0;
+  text-align: left;
+  font-variant-numeric: tabular-nums;
+  background: #11141a;
+  border-top: 1px solid #1e2229;
+}
+.grid-tile.selected .grid-label {
+  color: #7fd4a0;
+}
+/* ==========================================================================
+   Audience: laser dot (cursor sync)
+   ========================================================================== */
+.laser-dot {
+  position: fixed;
+  width: 14px;
+  height: 14px;
+  margin-left: -7px;
+  margin-top: -7px;
+  border-radius: 50%;
+  background: #ff3a3a;
+  box-shadow: 0 0 12px 4px rgba(255, 58, 58, 0.55),
+    0 0 2px 1px rgba(255, 255, 255, 0.6) inset;
+  pointer-events: none;
+  z-index: 1500;
+}
+.laser-dot.hidden {
+  display: none;
+}