@ashraf_mizo/htmlcanvas 1.0.0

package/editor/shortcuts.js

@@ -0,0 +1,143 @@
+// editor/shortcuts.js — Keyboard shortcut handling
+//
+// Uses a single native keydown handler attached to both the editor document
+// and the iframe document. No synthetic event relay needed.
+
+/** @type {Object|null} Stored callbacks from initShortcuts */
+let _callbacks = null;
+
+/** @type {EventListener|null} The keydown handler */
+let _handler = null;
+
+/** @type {Document|null} Currently attached iframe document */
+let _iframeDoc = null;
+
+/** @type {boolean} When true, onKeyDown returns early — used during text editing */
+let _suspended = false;
+
+/**
+ * Suspends shortcut processing. While suspended, all keydown events are ignored.
+ * Idempotent — calling multiple times has no additional effect.
+ */
+export function suspendShortcuts() { _suspended = true; }
+
+/**
+ * Resumes shortcut processing after a suspendShortcuts() call.
+ * Idempotent — safe to call even if not currently suspended.
+ */
+export function resumeShortcuts() { _suspended = false; }
+
+/**
+ * The core keydown handler — works on any document it's attached to.
+ */
+function onKeyDown(e) {
+  if (_suspended) return;
+  if (!_callbacks) return;
+
+  const key = e.key.toLowerCase();
+  const code = e.code;           // physical key — layout-independent
+  const ctrl = e.ctrlKey || e.metaKey;
+  const shift = e.shiftKey;
+
+  // On non-Latin layouts (Arabic, etc.) e.shiftKey can be unreliable for
+  // physical key detection. When the key character isn't a Latin letter,
+  // ignore shift state for code-based matching to prevent Ctrl+Z from
+  // accidentally routing to redo (Ctrl+Shift+Z).
+  const isNonLatin = !/^[a-z]$/i.test(e.key);
+
+  let matched = true;
+
+  if (key === 'escape') {
+    _callbacks.escape();
+  } else if (key === 'delete' || key === 'backspace') {
+    _callbacks.deleteSelected();
+  } else if (ctrl && code === 'KeyZ') {
+    // Non-Latin layout: physical Z always means undo (shift unreliable)
+    // Latin layout: Ctrl+Z = undo, Ctrl+Shift+Z = redo
+    if (isNonLatin || !shift) {
+      _callbacks.undo();
+    } else {
+      _callbacks.redo();
+    }
+  } else if (ctrl && !shift && (key === 'y' || code === 'KeyY')) {
+    _callbacks.redo();
+  } else if (ctrl && !shift && (key === 's' || code === 'KeyS')) {
+    _callbacks.save();
+  } else if (ctrl && shift && (key === 's' || code === 'KeyS')) {
+    _callbacks.exportFile();
+  } else if (ctrl && !shift && (key === 'c' || code === 'KeyC')) {
+    _callbacks.copy();
+  } else if (ctrl && !shift && (key === 'x' || code === 'KeyX')) {
+    _callbacks.cut();
+  } else if (ctrl && !shift && (key === 'v' || code === 'KeyV')) {
+    _callbacks.paste();
+  } else if (ctrl && !shift && (key === 'a' || code === 'KeyA')) {
+    _callbacks.selectAll();
+  } else if (ctrl && shift && (key === 'g' || code === 'KeyG')) {
+    _callbacks.ungroup();
+  } else if (ctrl && !shift && (key === 'g' || code === 'KeyG')) {
+    _callbacks.group();
+  } else if (ctrl && (key === '=' || key === '+')) {
+    _callbacks.zoomIn();
+  } else if (ctrl && key === '-') {
+    _callbacks.zoomOut();
+  } else if (ctrl && (key === '0' || code === 'Digit0')) {
+    _callbacks.zoomReset();
+  } else {
+    matched = false;
+  }
+
+  if (matched) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+}
+
+/**
+ * Initialises all keyboard shortcuts.
+ *
+ * @param {{
+ *   undo: Function,
+ *   redo: Function,
+ *   deleteSelected: Function,
+ *   copy: Function,
+ *   cut: Function,
+ *   paste: Function,
+ *   selectAll: Function,
+ *   escape: Function,
+ *   save: Function,
+ *   exportFile: Function,
+ *   zoomIn: Function,
+ *   zoomOut: Function,
+ *   zoomReset: Function,
+ *   group: Function,
+ *   ungroup: Function
+ * }} callbacks
+ */
+export function initShortcuts(callbacks) {
+  _callbacks = callbacks;
+  _handler = onKeyDown;
+
+  // Attach to the editor's top-level document
+  document.addEventListener('keydown', _handler, true);
+}
+
+/**
+ * Attaches the same keydown handler to an iframe's contentDocument
+ * so shortcuts work even when the iframe has focus.
+ *
+ * Safe to call multiple times — removes previous listener first.
+ *
+ * @param {Document} iframeDoc - The iframe's contentDocument
+ */
+export function attachIframeRelay(iframeDoc) {
+  if (!_handler) return;
+
+  // Remove from previous iframe doc
+  if (_iframeDoc) {
+    try { _iframeDoc.removeEventListener('keydown', _handler, true); } catch (_) {}
+  }
+
+  _iframeDoc = iframeDoc;
+  _iframeDoc.addEventListener('keydown', _handler, true);
+}

package/editor/slidePanel.js

@@ -0,0 +1,361 @@
+// editor/slidePanel.js — PowerPoint-style slide thumbnail panel with scroll sync
+//
+// Exports:
+//   initSlidePanel(iframe, iframeDoc, canvasArea, iframeContainer)
+//   goToSlide(index)
+//   getCurrentSlideIndex()
+//   isSlideMode()
+//
+// When a multi-page slide deck is loaded (.page elements > 1):
+//   - Left panel shows scrollable slide thumbnails with real visual previews
+//   - Main canvas shows all pages stacked (continuous scroll)
+//   - Scrolling the canvas highlights the corresponding thumbnail
+//   - Clicking a thumbnail scrolls the canvas to that page
+//   - PageUp/PageDown navigates between slides
+
+import { clearSelection } from './selection.js';
+import { clearMultiSelection } from './multiSelect.js';
+
+// ── Constants ───────────────────────────────────────────────────────────────
+
+const THUMB_PREVIEW_W = 250;   // thumbnail preview width in px
+
+// ── Module state ────────────────────────────────────────────────────────────
+
+let _renderIframe    = null;
+let _iframeDoc       = null;
+let _canvasArea      = null;
+let _iframeContainer = null;
+let _slides          = [];     // Array of .page DOM elements
+let _currentIndex    = 0;
+let _panelEl         = null;
+let _pageWidth       = 794;
+let _pageHeight      = 1123;
+let _isSlideMode     = false;
+let _scrollSyncActive = true;  // prevent feedback loops during goToSlide scroll
+
+// ── Exported queries ────────────────────────────────────────────────────────
+
+export function getCurrentSlideIndex() { return _currentIndex; }
+export function getSlideCount() { return _slides.length; }
+export function isSlideMode() { return _isSlideMode; }
+
+// ── Initialization ──────────────────────────────────────────────────────────
+
+/**
+ * Initialises the slide panel for multi-page decks.
+ * Shows all pages (continuous scroll) with thumbnail sync on the left.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Document} iframeDoc
+ * @param {HTMLElement} canvasArea
+ * @param {HTMLElement} iframeContainerEl
+ * @returns {{ isSlideMode: boolean, pageWidth?: number, pageHeight?: number }}
+ */
+export function initSlidePanel(iframe, iframeDoc, canvasArea, iframeContainerEl) {
+  _renderIframe = iframe;
+  _iframeDoc = iframeDoc;
+  _canvasArea = canvasArea;
+  _iframeContainer = iframeContainerEl;
+
+  const pages = Array.from(iframeDoc.querySelectorAll('.page'));
+  _panelEl = document.querySelector('.slide-panel');
+
+  if (pages.length <= 1) {
+    _isSlideMode = false;
+    if (_panelEl) _panelEl.style.display = 'none';
+    _showLeftPanelSections(true);
+    return { isSlideMode: false };
+  }
+
+  _isSlideMode = true;
+  _slides = pages;
+  _currentIndex = 0;
+
+  // Measure first page dimensions
+  _pageWidth = Math.max(pages[0].offsetWidth, 794);
+  _pageHeight = Math.max(pages[0].offsetHeight, 1123);
+
+  // Ensure ALL pages are visible (continuous scroll)
+  _slides.forEach(page => { page.style.display = ''; });
+
+  // Build thumbnail previews
+  _buildThumbnails();
+
+  // Hide assets/components sections in slide mode
+  _showLeftPanelSections(false);
+
+  // Wire scroll sync (canvas scroll → thumbnail highlight)
+  _wireScrollSync();
+
+  // Wire keyboard navigation
+  _wireKeyboardNav();
+
+  // Update slide count indicator
+  _updateSlideCount();
+
+  // Expose API for other modules (e.g., assets.js getVisiblePage)
+  window._slidePanelAPI = { getCurrentSlideIndex, isSlideMode };
+
+  return { isSlideMode: true, pageWidth: _pageWidth, pageHeight: _pageHeight };
+}
+
+// ── Navigation ──────────────────────────────────────────────────────────────
+
+/**
+ * Scrolls the canvas to the given slide and highlights its thumbnail.
+ */
+export function goToSlide(index) {
+  if (!_isSlideMode) return;
+  if (index < 0 || index >= _slides.length) return;
+
+  // Suppress scroll-sync feedback while we programmatically scroll
+  _scrollSyncActive = false;
+  _currentIndex = index;
+
+  _updateThumbnailActive(index);
+  _scrollThumbnailIntoView(index);
+  _updateSlideCount();
+
+  // Scroll the canvas so the target page is at the top of the viewport
+  _scrollCanvasToSlide(index);
+
+  // Trigger layout recalculation
+  window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+  window.dispatchEvent(new CustomEvent('hc:slide-changed', {
+    detail: { index, element: _slides[index], count: _slides.length }
+  }));
+
+  // Re-enable scroll sync after the scroll animation settles
+  setTimeout(() => { _scrollSyncActive = true; }, 400);
+}
+
+export function nextSlide() { goToSlide(_currentIndex + 1); }
+export function prevSlide() { goToSlide(_currentIndex - 1); }
+
+// ── Internal: Scroll canvas to slide ────────────────────────────────────────
+
+function _scrollCanvasToSlide(index) {
+  const page = _slides[index];
+  if (!page || !_renderIframe || !_canvasArea) return;
+
+  // Get the page's position within the iframe document
+  const pageRect = page.getBoundingClientRect();
+  const iframeRect = _renderIframe.getBoundingClientRect();
+  const canvasRect = _canvasArea.getBoundingClientRect();
+
+  // Calculate the scroll target in canvas-area coordinates
+  const scale = _getContainerScale();
+  const targetScrollTop = (iframeRect.top - canvasRect.top + _canvasArea.scrollTop)
+                        + (pageRect.top * scale);
+
+  // Scroll with a small offset from top for visual breathing room
+  _canvasArea.scrollTo({
+    top: Math.max(0, targetScrollTop - 20),
+    behavior: 'smooth'
+  });
+}
+
+function _getContainerScale() {
+  if (!_iframeContainer) return 1;
+  const transform = getComputedStyle(_iframeContainer).transform;
+  if (transform && transform !== 'none') {
+    const match = transform.match(/matrix\(([^,]+)/);
+    if (match) return parseFloat(match[1]);
+  }
+  return 1;
+}
+
+// ── Internal: Scroll sync (canvas → thumbnail) ─────────────────────────────
+
+let _scrollSyncWired = false;
+
+function _wireScrollSync() {
+  if (_scrollSyncWired) return;
+  _scrollSyncWired = true;
+
+  let rafPending = false;
+
+  _canvasArea.addEventListener('scroll', () => {
+    if (!_isSlideMode || !_scrollSyncActive) return;
+    if (rafPending) return;
+    rafPending = true;
+
+    requestAnimationFrame(() => {
+      rafPending = false;
+      _detectVisibleSlide();
+    });
+  });
+}
+
+/**
+ * Determines which slide is most visible in the canvas viewport
+ * and updates the thumbnail highlight accordingly.
+ */
+function _detectVisibleSlide() {
+  if (!_renderIframe || !_canvasArea || _slides.length === 0) return;
+
+  const canvasRect = _canvasArea.getBoundingClientRect();
+  const iframeRect = _renderIframe.getBoundingClientRect();
+  const scale = _getContainerScale();
+
+  // The vertical center of the canvas viewport (the "focus line")
+  const viewportCenterY = canvasRect.top + canvasRect.height * 0.35;
+
+  let bestIndex = 0;
+  let bestDistance = Infinity;
+
+  for (let i = 0; i < _slides.length; i++) {
+    const pageRect = _slides[i].getBoundingClientRect();
+
+    // Page top/bottom in viewport coordinates (account for iframe position + zoom scale)
+    const pageTopInViewport = iframeRect.top + pageRect.top * scale;
+    const pageBottomInViewport = iframeRect.top + pageRect.bottom * scale;
+    const pageCenterInViewport = (pageTopInViewport + pageBottomInViewport) / 2;
+
+    // Distance from page center to viewport focus line
+    const distance = Math.abs(pageCenterInViewport - viewportCenterY);
+
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestIndex = i;
+    }
+  }
+
+  if (bestIndex !== _currentIndex) {
+    _currentIndex = bestIndex;
+    _updateThumbnailActive(bestIndex);
+    _scrollThumbnailIntoView(bestIndex);
+    _updateSlideCount();
+
+    window.dispatchEvent(new CustomEvent('hc:slide-changed', {
+      detail: { index: bestIndex, element: _slides[bestIndex], count: _slides.length }
+    }));
+  }
+}
+
+// ── Internal: Slide count ───────────────────────────────────────────────────
+
+function _updateSlideCount() {
+  const el = document.getElementById('slide-count');
+  if (el) {
+    el.textContent = `${_currentIndex + 1} / ${_slides.length}`;
+    el.style.display = '';
+  }
+}
+
+// ── Internal: Thumbnail building ────────────────────────────────────────────
+
+function _buildThumbnails() {
+  if (!_panelEl) return;
+
+  _panelEl.innerHTML = '';
+  _panelEl.style.display = '';
+
+  const thumbScale = THUMB_PREVIEW_W / _pageWidth;
+  const thumbH = Math.round(_pageHeight * thumbScale);
+
+  // Get annotated HTML for srcdoc preview iframes
+  const annotatedHTML = window._editorState?.annotatedHTML || '';
+  const baseUrl = window.location.origin + '/';
+
+  _slides.forEach((page, i) => {
+    const item = document.createElement('div');
+    item.className = 'slide-thumb' + (i === 0 ? ' active' : '');
+    item.dataset.index = String(i);
+
+    // Slide number (left side)
+    const num = document.createElement('span');
+    num.className = 'slide-thumb-num';
+    num.textContent = String(i + 1);
+
+    // Preview container (holds the scaled iframe)
+    const preview = document.createElement('div');
+    preview.className = 'slide-thumb-preview';
+    preview.style.width = THUMB_PREVIEW_W + 'px';
+    preview.style.height = thumbH + 'px';
+
+    // Create mini iframe with a visual preview of this specific page
+    const hcId = page.getAttribute('data-hc-id');
+    if (annotatedHTML && hcId) {
+      const hideCSS = `<style>
+.page{display:none!important}
+[data-hc-id="${hcId}"]{display:block!important;margin:0!important;box-shadow:none!important}
+html,body{margin:0;padding:0;overflow:hidden;background:#fff}
+</style>`;
+
+      let modHTML = annotatedHTML;
+      modHTML = modHTML.replace('<head>', `<head><base href="${baseUrl}">`);
+      modHTML = modHTML.replace('</head>', hideCSS + '</head>');
+      // Strip scripts to keep thumbnails lightweight
+      modHTML = modHTML.replace(/<script[\s\S]*?<\/script>/gi, '');
+
+      const miniFrame = document.createElement('iframe');
+      miniFrame.srcdoc = modHTML;
+      miniFrame.sandbox = 'allow-same-origin';
+      miniFrame.className = 'slide-thumb-iframe';
+      miniFrame.loading = 'lazy';
+      miniFrame.tabIndex = -1;
+      miniFrame.style.width = _pageWidth + 'px';
+      miniFrame.style.height = _pageHeight + 'px';
+      miniFrame.style.transform = `scale(${thumbScale})`;
+
+      preview.appendChild(miniFrame);
+    }
+
+    item.appendChild(num);
+    item.appendChild(preview);
+    item.addEventListener('click', () => goToSlide(i));
+
+    _panelEl.appendChild(item);
+  });
+}
+
+// ── Internal: Thumbnail active state ────────────────────────────────────────
+
+function _updateThumbnailActive(index) {
+  if (!_panelEl) return;
+  const thumbs = _panelEl.querySelectorAll('.slide-thumb');
+  thumbs.forEach((t, i) => t.classList.toggle('active', i === index));
+}
+
+function _scrollThumbnailIntoView(index) {
+  if (!_panelEl) return;
+  const thumb = _panelEl.querySelector(`.slide-thumb[data-index="${index}"]`);
+  if (thumb) thumb.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+}
+
+// ── Internal: Left panel section visibility ─────────────────────────────────
+
+function _showLeftPanelSections(show) {
+  const selectors = [
+    '.panel-layers .panel-header-collapsible',
+    '.panel-layers .panel-section-assets',
+    '.panel-layers .panel-section-components',
+  ];
+  selectors.forEach(sel => {
+    document.querySelectorAll(sel).forEach(el => {
+      el.style.display = show ? '' : 'none';
+    });
+  });
+}
+
+// ── Internal: Keyboard navigation ───────────────────────────────────────────
+
+let _keyNavWired = false;
+
+function _wireKeyboardNav() {
+  if (_keyNavWired) return;
+  _keyNavWired = true;
+
+  document.addEventListener('keydown', (e) => {
+    if (!_isSlideMode) return;
+    if (e.key === 'PageDown') {
+      e.preventDefault();
+      nextSlide();
+    } else if (e.key === 'PageUp') {
+      e.preventDefault();
+      prevSlide();
+    }
+  });
+}

package/editor/slides.js

@@ -0,0 +1,101 @@
+// editor/slides.js — Slide awareness for .page containers
+
+/**
+ * SlideInfo shape:
+ *   {
+ *     index: number,        // 0-based slide index
+ *     element: Element,     // the .page element in the iframe DOM
+ *     hcId: string,         // the data-hc-id of the .page element
+ *     bounds: DOMRect,      // bounding box in iframe-local coordinates
+ *   }
+ */
+
+let _slides = [];
+
+/**
+ * Scans the iframe document for .page elements and records their bounding boxes.
+ * Call this after the iframe has loaded.
+ *
+ * @param {Document} iframeDoc - The iframe's contentDocument
+ * @returns {{ count: number, slides: SlideInfo[] }}
+ */
+export function detectSlides(iframeDoc) {
+  const pageElements = iframeDoc.querySelectorAll('.page');
+  _slides = [];
+
+  pageElements.forEach((el, index) => {
+    const hcId = el.getAttribute('data-hc-id') || null;
+    const bounds = el.getBoundingClientRect();
+
+    _slides.push({
+      index,
+      element: el,
+      hcId,
+      bounds: {
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+        top: bounds.top,
+        right: bounds.right,
+        bottom: bounds.bottom,
+        left: bounds.left,
+      },
+    });
+  });
+
+  return { count: _slides.length, slides: _slides };
+}
+
+/**
+ * Returns the currently detected slides.
+ * @returns {SlideInfo[]}
+ */
+export function getSlides() {
+  return _slides;
+}
+
+/**
+ * Returns the slide that contains the given iframe-local Y coordinate.
+ * Useful for determining which slide the user is interacting with.
+ *
+ * @param {number} iframeY - Y coordinate in iframe-local space
+ * @returns {SlideInfo|null}
+ */
+export function getSlideAtY(iframeY) {
+  for (const slide of _slides) {
+    if (iframeY >= slide.bounds.top && iframeY <= slide.bounds.bottom) {
+      return slide;
+    }
+  }
+  return null;
+}
+
+/**
+ * Returns snap targets for all slide boundaries.
+ * Each slide contributes: top edge, bottom edge, left edge, right edge, center X, center Y.
+ * Used by the snapping system in Phase 4.
+ *
+ * @returns {{ horizontalLines: number[], verticalLines: number[] }}
+ *   horizontalLines: Y coordinates of horizontal snap lines (top/bottom edges, vertical centers)
+ *   verticalLines: X coordinates of vertical snap lines (left/right edges, horizontal centers)
+ */
+export function getSlideSnapTargets() {
+  const horizontalLines = new Set();
+  const verticalLines = new Set();
+
+  for (const slide of _slides) {
+    const b = slide.bounds;
+    horizontalLines.add(b.top);
+    horizontalLines.add(b.bottom);
+    horizontalLines.add(b.top + b.height / 2); // vertical center
+    verticalLines.add(b.left);
+    verticalLines.add(b.right);
+    verticalLines.add(b.left + b.width / 2); // horizontal center
+  }
+
+  return {
+    horizontalLines: [...horizontalLines].sort((a, b) => a - b),
+    verticalLines: [...verticalLines].sort((a, b) => a - b),
+  };
+}

package/editor/snap.js

@@ -0,0 +1,98 @@
+// editor/snap.js — Snap target computation for Moveable snapping
+//
+// Computes snap guidelines from two sources:
+//   1. Slide boundaries (from slides.js getSlideSnapTargets)
+//   2. Sibling element edges and centers (all [data-hc-id] elements except the dragged one)
+//
+// Exports:
+//   computeSnapTargets(iframeDoc, excludeElement)
+//   isSnapEnabled()
+//   toggleSnap()
+
+import { getSlideSnapTargets } from './slides.js';
+
+// ── State ──────────────────────────────────────────────────────────────────────
+
+let _snapEnabled = true;
+
+// ── isSnapEnabled ──────────────────────────────────────────────────────────────
+
+/**
+ * Returns whether snapping is currently enabled.
+ * @returns {boolean}
+ */
+export function isSnapEnabled() {
+  return _snapEnabled;
+}
+
+// ── toggleSnap ─────────────────────────────────────────────────────────────────
+
+/**
+ * Toggles snapping on or off.
+ * @returns {boolean} The new snap state (true = enabled)
+ */
+export function toggleSnap() {
+  _snapEnabled = !_snapEnabled;
+  return _snapEnabled;
+}
+
+// ── computeSnapTargets ─────────────────────────────────────────────────────────
+
+/**
+ * Computes snap guidelines from slide boundaries and sibling element edges.
+ *
+ * Sources:
+ *   - Slide boundaries: top, bottom, left, right, center X, center Y of each .page
+ *   - Sibling elements: top, bottom, vertical-center, left, right, horizontal-center
+ *     of each [data-hc-id] element that is NOT the excludeElement
+ *
+ * All coordinates are in iframe-local space (as returned by getBoundingClientRect).
+ *
+ * @param {Document} iframeDoc - The iframe's contentDocument
+ * @param {Element|null} excludeElement - The element currently being dragged (excluded from siblings)
+ * @returns {{ verticalGuidelines: number[], horizontalGuidelines: number[] }}
+ *   verticalGuidelines:   X coordinates for vertical snap lines
+ *   horizontalGuidelines: Y coordinates for horizontal snap lines
+ */
+export function computeSnapTargets(iframeDoc, excludeElement) {
+  const vertSet = new Set();
+  const horizSet = new Set();
+
+  // ── Source 1: Slide boundaries ─────────────────────────────────────────────
+  try {
+    const { horizontalLines, verticalLines } = getSlideSnapTargets();
+    for (const y of horizontalLines) horizSet.add(y);
+    for (const x of verticalLines)   vertSet.add(x);
+  } catch {
+    // slides.js may not have been initialised yet — silently skip
+  }
+
+  // ── Source 2: Sibling elements ─────────────────────────────────────────────
+  if (iframeDoc) {
+    const siblings = iframeDoc.querySelectorAll('[data-hc-id]');
+    for (const el of siblings) {
+      if (el === excludeElement) continue;
+
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) continue;
+
+      // Horizontal lines: top edge, bottom edge, vertical center
+      horizSet.add(rect.top);
+      horizSet.add(rect.bottom);
+      horizSet.add(rect.top + rect.height / 2);
+
+      // Vertical lines: left edge, right edge, horizontal center
+      vertSet.add(rect.left);
+      vertSet.add(rect.right);
+      vertSet.add(rect.left + rect.width / 2);
+    }
+  }
+
+  // Convert sets to sorted arrays, round to avoid floating-point noise
+  const round = (v) => Math.round(v * 100) / 100;
+
+  const verticalGuidelines   = [...vertSet].map(round).sort((a, b) => a - b);
+  const horizontalGuidelines = [...horizSet].map(round).sort((a, b) => a - b);
+
+  return { verticalGuidelines, horizontalGuidelines };
+}