@ashraf_mizo/htmlcanvas 1.0.0

package/editor/selection.js

@@ -0,0 +1,432 @@
+// editor/selection.js — Hover highlight, click-to-select, selection overlay, hit-testing
+//
+// Exports:
+//   initSelection(iframe, iframeDoc, canvasArea)  — attach listeners on iframe-ready
+//   getSelectedElement()                           — returns selected DOM element or null
+//   getSelectedHcId()                              — returns selected data-hc-id or null
+//   clearSelection()                               — hides overlay, nulls state
+//   resolveSelectable(element)                     — exported for unit tests
+
+import { getElementCanvasRect } from './coords.js';
+import { addToSelection, removeFromSelection, getSelectedElements, clearMultiSelection } from './multiSelect.js';
+import { isLocked } from './layers.js';
+import { getZoom } from './zoom.js';
+
+// ── Exclusion list ────────────────────────────────────────────────────────────
+
+export const EXCLUDED_TAGS = new Set(['script', 'style', 'link', 'meta', 'head', 'html', 'body']);
+
+// SVG child elements that should bubble up to their container
+const SVG_INTERNALS = new Set([
+  'path', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+  'rect', 'g', 'text', 'tspan', 'use', 'defs', 'clippath',
+  'mask', 'pattern', 'symbol', 'marker', 'foreignobject',
+]);
+
+// Pure inline formatting tags that should bubble up to their block parent.
+// Note: 'span' and 'a' are excluded — they're often used as standalone
+// positioned elements (slide numbers, brand labels, links) and must stay selectable.
+const INLINE_TAGS = new Set([
+  'strong', 'em', 'b', 'i', 'u', 'small', 'sub', 'sup',
+  'abbr', 'code', 'mark', 'del', 'ins', 'br', 'wbr',
+]);
+
+// ── Module state ──────────────────────────────────────────────────────────────
+
+let _iframe     = null;
+let _iframeDoc  = null;
+let _canvasArea = null;
+
+let _selectedElement  = null;
+let _selectedHcId     = null;
+let _hoveredElement   = null;
+let _rafPending       = false;
+
+// Stored handler references for clean re-attachment on iframe reload
+let _onMouseMove  = null;
+let _onClick      = null;
+let _onMouseLeave = null;
+
+// ── DOM refs (queried once at module load, guarded for Node.js test environments) ────
+
+const hoverOverlay     = typeof document !== 'undefined' ? document.getElementById('hover-overlay') : null;
+const selectionOverlay = typeof document !== 'undefined' ? document.getElementById('selection-overlay') : null;
+const dimLabel         = selectionOverlay ? selectionOverlay.querySelector('.sel-dim-label') : null;
+
+// ── Hit-testing ───────────────────────────────────────────────────────────────
+
+/**
+ * Resolves the best selectable element from a given element.
+ *
+ * Bubbling rules:
+ *   - SVG internals (path, circle, etc.) → bubble up to <svg> and stop there
+ *   - Inline text (strong, em, span, etc.) → bubble up to block parent
+ *   - Everything else → select directly
+ *
+ * @param {Element} element
+ * @returns {Element|null}
+ */
+export function resolveSelectable(element) {
+  if (!element) return null;
+
+  let el = element;
+
+  while (el) {
+    const tag = el.tagName ? el.tagName.toLowerCase() : '';
+
+    if (EXCLUDED_TAGS.has(tag)) return null;
+    if (el.classList && el.classList.contains('page')) return null;
+
+    // SVG internals → bubble up to the <svg> element
+    if (SVG_INTERNALS.has(tag)) {
+      el = el.parentElement;
+      continue;
+    }
+
+    // <svg> itself → stop here (individually selectable and scalable)
+    if (tag === 'svg') break;
+
+    // Inline text → bubble up to block parent
+    if (INLINE_TAGS.has(tag)) {
+      el = el.parentElement;
+      continue;
+    }
+
+    // Block-level or other element → stop here
+    break;
+  }
+
+  if (!el) return null;
+
+  const tag = el.tagName ? el.tagName.toLowerCase() : '';
+  if (EXCLUDED_TAGS.has(tag)) return null;
+  if (el.classList && el.classList.contains('page')) return null;
+
+  if (el.closest) {
+    const parentPage = el.closest('.page');
+    if (parentPage) return el;
+
+    const parentBody = el.closest('body');
+    if (parentBody && tag !== 'body') return el;
+  }
+
+  return null;
+}
+
+// ── Overlay positioning ───────────────────────────────────────────────────────
+
+/**
+ * Positions the hover overlay over the given element.
+ * @param {Element} element
+ */
+function positionHoverOverlay(element) {
+  const rect = getElementCanvasRect(element, _iframe, _canvasArea);
+  hoverOverlay.style.left   = rect.x + 'px';
+  hoverOverlay.style.top    = rect.y + 'px';
+  hoverOverlay.style.width  = rect.width + 'px';
+  hoverOverlay.style.height = rect.height + 'px';
+  hoverOverlay.style.display = '';
+}
+
+/**
+ * Updates the selection overlay to track the currently selected element.
+ * Uses the element's un-scaled getBoundingClientRect for the dimension label.
+ */
+function updateSelectionOverlay() {
+  if (!_selectedElement) {
+    selectionOverlay.style.display = 'none';
+    return;
+  }
+
+  const rect = getElementCanvasRect(_selectedElement, _iframe, _canvasArea);
+  selectionOverlay.style.left   = rect.x + 'px';
+  selectionOverlay.style.top    = rect.y + 'px';
+  selectionOverlay.style.width  = rect.width + 'px';
+  selectionOverlay.style.height = rect.height + 'px';
+  selectionOverlay.style.display = '';
+
+  // Dimension label: use visible dimensions (cropped if clip-path is set), un-scaled by zoom
+  const zoom = getZoom();
+  dimLabel.textContent = `${Math.round(rect.width / zoom)}x${Math.round(rect.height / zoom)} px`;
+
+  // Text-edit cursor hint: show text cursor on drag surface for text-editable elements
+  const dragSurface = selectionOverlay.querySelector('.sel-drag-surface');
+  if (dragSurface) {
+    const tag = _selectedElement.tagName.toLowerCase();
+    const isImg = tag === 'img' || tag === 'svg' || tag === 'video' || tag === 'canvas';
+    dragSurface.classList.toggle('text-cursor', !isImg);
+  }
+}
+
+// ── iframe event handlers ─────────────────────────────────────────────────────
+
+function onIframeMouseMove(e) {
+  const target = _iframeDoc.elementFromPoint(e.clientX, e.clientY);
+  const resolved = resolveSelectable(target);
+
+  // Avoid redundant rect calculations when hovering the same element
+  if (resolved === _hoveredElement) return;
+  _hoveredElement = resolved;
+
+  // Hide hover overlay if nothing valid or hovering the selected element
+  if (!resolved || resolved === _selectedElement) {
+    hoverOverlay.style.display = 'none';
+    return;
+  }
+
+  // Throttle with rAF
+  if (_rafPending) return;
+  _rafPending = true;
+  requestAnimationFrame(() => {
+    _rafPending = false;
+    if (_hoveredElement && _hoveredElement !== _selectedElement) {
+      positionHoverOverlay(_hoveredElement);
+    } else {
+      hoverOverlay.style.display = 'none';
+    }
+  });
+}
+
+function onIframeClick(e) {
+  const target = _iframeDoc.elementFromPoint(e.clientX, e.clientY);
+  let resolved = resolveSelectable(target);
+
+  // Skip locked elements (can't select by clicking canvas)
+  if (resolved) {
+    const hcId = resolved.getAttribute('data-hc-id');
+    if (hcId && isLocked(hcId)) resolved = null;
+  }
+
+  // ── Ctrl/Shift-click: toggle element in multi-selection ─────────────────────
+  if ((e.shiftKey || e.ctrlKey || e.metaKey) && resolved) {
+    const multiSelected = getSelectedElements();
+
+    // If transitioning from single selection to multi, add the current single selection too
+    if (_selectedElement && multiSelected.length === 0) {
+      addToSelection(_selectedElement);
+    }
+
+    if (multiSelected.includes(resolved)) {
+      removeFromSelection(resolved);
+    } else {
+      addToSelection(resolved);
+    }
+
+    // Hide hover overlay
+    hoverOverlay.style.display = 'none';
+    _hoveredElement = null;
+    return;
+  }
+
+  // ── Normal click: clear multi-selection, do single select ─────────────────
+  clearMultiSelection();
+
+  if (!resolved) {
+    // Clicked empty .page space or excluded element
+    clearSelection();
+    return;
+  }
+
+  // Already selected — try to drill into a child element under the cursor.
+  // This allows clicking the orange strip inside a card even when the card is selected.
+  if (resolved === _selectedElement) {
+    const allUnderCursor = _iframeDoc.elementsFromPoint(e.clientX, e.clientY);
+    for (const candidate of allUnderCursor) {
+      // Stop searching once we reach the currently selected element
+      if (candidate === _selectedElement) break;
+      if (!candidate.hasAttribute('data-hc-id')) continue;
+      const tag = candidate.tagName ? candidate.tagName.toLowerCase() : '';
+      if (EXCLUDED_TAGS.has(tag)) continue;
+      if (candidate.classList && candidate.classList.contains('page')) continue;
+      // Found a selectable child — select it
+      _selectedElement = candidate;
+      _selectedHcId    = candidate.getAttribute('data-hc-id');
+      hoverOverlay.style.display = 'none';
+      _hoveredElement = null;
+      updateSelectionOverlay();
+      window.dispatchEvent(new CustomEvent('hc:selection-changed', {
+        detail: { hcId: _selectedHcId, element: _selectedElement }
+      }));
+      return;
+    }
+    return;
+  }
+
+  _selectedElement = resolved;
+  _selectedHcId    = resolved.getAttribute('data-hc-id') || null;
+
+  // Hide hover overlay (selection takes visual priority)
+  hoverOverlay.style.display = 'none';
+  _hoveredElement = null;
+
+  updateSelectionOverlay();
+
+  // Notify other modules (layer panel, manipulation) that selection changed
+  window.dispatchEvent(new CustomEvent('hc:selection-changed', {
+    detail: { hcId: _selectedHcId, element: _selectedElement }
+  }));
+}
+
+function clearHover() {
+  hoverOverlay.style.display = 'none';
+  _hoveredElement = null;
+}
+
+// ── Exported API ──────────────────────────────────────────────────────────────
+
+/**
+ * Clears the current selection. Hides overlays and nulls all state.
+ * Called on Escape, canvas-background click, iframe reload, and DeleteCommand.
+ */
+export function clearSelection() {
+  const hadSelection = !!_selectedElement;
+  _selectedElement = null;
+  _selectedHcId    = null;
+  selectionOverlay.style.display = 'none';
+  hoverOverlay.style.display     = 'none';
+  _hoveredElement = null;
+
+  // Notify manipulation + other modules so they clear stale targets
+  if (hadSelection) {
+    window.dispatchEvent(new CustomEvent('hc:selection-cleared'));
+  }
+}
+
+/**
+ * Programmatically selects an element (e.g. from the layer panel).
+ * Clears multi-selection, updates overlay, and dispatches selection-changed.
+ *
+ * @param {Element} element - The iframe DOM element to select
+ */
+export function selectElement(element) {
+  if (!element) return;
+
+  const resolved = resolveSelectable(element) || element;
+  if (resolved === _selectedElement) return;
+
+  clearMultiSelection();
+
+  _selectedElement = resolved;
+  _selectedHcId    = resolved.getAttribute('data-hc-id') || null;
+
+  hoverOverlay.style.display = 'none';
+  _hoveredElement = null;
+
+  updateSelectionOverlay();
+
+  window.dispatchEvent(new CustomEvent('hc:selection-changed', {
+    detail: { hcId: _selectedHcId, element: _selectedElement }
+  }));
+}
+
+/**
+ * Returns the currently selected DOM element (inside the iframe), or null.
+ * @returns {Element|null}
+ */
+export function getSelectedElement() {
+  return _selectedElement;
+}
+
+/**
+ * Returns the data-hc-id of the currently selected element, or null.
+ * @returns {string|null}
+ */
+export function getSelectedHcId() {
+  return _selectedHcId;
+}
+
+/**
+ * Initialises (or re-initialises) the selection module for a new iframe load.
+ * Removes stale listeners from the previous iframeDoc, attaches fresh ones.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Document} iframeDoc
+ * @param {HTMLElement} canvasArea
+ */
+export function initSelection(iframe, iframeDoc, canvasArea) {
+  // Remove old listeners if we have a previous iframeDoc
+  if (_iframeDoc && _onMouseMove) {
+    _iframeDoc.removeEventListener('mousemove',  _onMouseMove);
+    _iframeDoc.removeEventListener('click',      _onClick);
+    _iframeDoc.removeEventListener('mouseleave', _onMouseLeave);
+  }
+
+  _iframe     = iframe;
+  _iframeDoc  = iframeDoc;
+  _canvasArea = canvasArea;
+
+  // Clear stale selection from any previously opened file
+  clearSelection();
+
+  // Create stable handler references for later removal
+  _onMouseMove  = onIframeMouseMove;
+  _onClick      = onIframeClick;
+  _onMouseLeave = clearHover;
+
+  iframeDoc.addEventListener('mousemove',  _onMouseMove);
+  iframeDoc.addEventListener('click',      _onClick);
+  iframeDoc.addEventListener('mouseleave', _onMouseLeave);
+}
+
+// ── Browser-only top-level wiring (skipped in Node.js test environments) ─────
+
+if (typeof document !== 'undefined') {
+  // ── Parent escalation (double-click on drag surface) ─────────────────────
+
+  // Double-click the selection overlay body to select the parent element.
+  // (Handles are now used for resize, so single-click escalation is removed.)
+  const dragSurfaceEl = selectionOverlay ? selectionOverlay.querySelector('.sel-drag-surface') : null;
+  if (dragSurfaceEl) {
+    dragSurfaceEl.addEventListener('dblclick', (e) => {
+      if (!_selectedElement || !_selectedElement.parentElement) return;
+
+      const parent = resolveSelectable(_selectedElement.parentElement);
+      if (parent) {
+        _selectedElement = parent;
+        _selectedHcId    = parent.getAttribute('data-hc-id') || null;
+        updateSelectionOverlay();
+
+        window.dispatchEvent(new CustomEvent('hc:selection-changed', {
+          detail: { hcId: _selectedHcId, element: _selectedElement }
+        }));
+      }
+    });
+  }
+
+  // ── Canvas background deselect ──────────────────────────────────────────
+
+  // Query canvasArea now (it exists at module load time in the static HTML)
+  const canvasArea = document.getElementById('canvas-area');
+
+  if (canvasArea) {
+    canvasArea.addEventListener('click', (e) => {
+      // Only deselect if clicking directly on the canvas background or empty-state
+      // (not on the iframe, not on overlay handles)
+      if (e.target === canvasArea || e.target.id === 'canvas-empty-state') {
+        clearSelection();
+      }
+    });
+
+    // ── Scroll / zoom re-sync ─────────────────────────────────────────────
+
+    canvasArea.addEventListener('scroll', () => {
+      if (_selectedElement) {
+        requestAnimationFrame(() => updateSelectionOverlay());
+      }
+      // Hover overlay does not need scroll sync (mouse has moved away)
+    });
+  }
+
+  window.addEventListener('hc:zoom-changed', () => {
+    if (_selectedElement) updateSelectionOverlay();
+    if (_hoveredElement && _hoveredElement !== _selectedElement) {
+      positionHoverOverlay(_hoveredElement);
+    }
+  });
+
+  // ── hc:selection-cleared (fired by DeleteCommand.execute()) ───────────────
+
+  window.addEventListener('hc:selection-cleared', () => {
+    clearSelection();
+  });
+}

package/editor/serializer.js

@@ -0,0 +1,160 @@
+// editor/serializer.js — Patch-based HTML serializer
+//
+// Tracks changes made to elements by their data-hc-id. On save, patches
+// only the changed elements in the original source text. When no changes
+// exist, returns the original rawHTML verbatim (byte-identical round-trip).
+//
+// CRITICAL: This module NEVER re-serializes the whole document.
+
+import { getModel } from './domModel.js';
+
+// ── Change tracking ─────────────────────────────────────────────────────────
+
+/**
+ * Pending changes keyed by hc-id.
+ * ChangeRecord shape:
+ *   {
+ *     id: string,                  // hc-id of the changed element
+ *     type: 'attribute' | 'content' | 'delete' | 'insert',
+ *     newOuterHTML: string | null,  // cleaned HTML (data-hc-id stripped)
+ *   }
+ * @type {Map<string, ChangeRecord>}
+ */
+const _pendingChanges = new Map();
+
+/**
+ * Records a change to an element. Called by editing operations in later phases.
+ *
+ * @param {string} hcId - The data-hc-id of the changed element
+ * @param {string} newOuterHTML - The new outerHTML (may contain data-hc-id)
+ */
+export function recordChange(hcId, newOuterHTML) {
+  const cleaned = stripHcIds(newOuterHTML);
+  _pendingChanges.set(hcId, {
+    id: hcId,
+    type: 'attribute',
+    newOuterHTML: cleaned,
+  });
+}
+
+/**
+ * Records that an element has been deleted.
+ *
+ * @param {string} hcId - The data-hc-id of the deleted element
+ */
+export function recordDeletion(hcId) {
+  _pendingChanges.set(hcId, {
+    id: hcId,
+    type: 'delete',
+    newOuterHTML: null,
+  });
+}
+
+/**
+ * Cancels a pending deletion. Called by DeleteCommand.undo() to reverse
+ * a recordDeletion when the user undoes a delete operation.
+ *
+ * @param {string} hcId - The data-hc-id of the element whose deletion to cancel
+ */
+export function cancelDeletion(hcId) {
+  _pendingChanges.delete(hcId);
+}
+
+/**
+ * Clears all pending changes. Called after a successful save.
+ */
+export function clearChanges() {
+  _pendingChanges.clear();
+}
+
+/**
+ * Returns true if there are unsaved changes.
+ */
+export function hasChanges() {
+  return _pendingChanges.size > 0;
+}
+
+// ── ID stripping ────────────────────────────────────────────────────────────
+
+/**
+ * Strips all data-hc-id attributes from an HTML string.
+ * Handles double quotes, single quotes, and unquoted attribute values.
+ * Also removes the leading whitespace before the attribute.
+ *
+ * @param {string} html - HTML string that may contain data-hc-id attributes
+ * @returns {string} HTML with all data-hc-id attributes removed
+ */
+export function stripHcIds(html) {
+  return html
+    .replace(/\s+data-hc-id=(?:"[^"]*"|'[^']*'|[^\s>]*)/g, '')
+    .replace(/\s*data-hc-group(?:=(?:"[^"]*"|'[^']*'|[^\s>]*))?/g, '');
+}
+
+// ── Serialization ───────────────────────────────────────────────────────────
+
+/**
+ * Produces the final HTML output by patching changes into the original source.
+ *
+ * Algorithm:
+ * 1. Start with the original raw HTML (before any data-hc-id injection).
+ * 2. If there are no pending changes, return the original HTML verbatim
+ *    (byte-identical round-trip guarantee).
+ * 3. For each pending change, find the element's position in the original
+ *    source using sourceIndex and sourceLength from the element map.
+ * 4. Replace only the changed portions. Work backwards (highest sourceIndex
+ *    first) so earlier indices remain valid after replacements.
+ *
+ * @returns {string} The final HTML ready to be saved to disk
+ */
+export function serialize() {
+  const { elementMap, rawHTML } = getModel();
+
+  if (!rawHTML || !elementMap) {
+    throw new Error('No DOM model loaded. Open a file first.');
+  }
+
+  // No changes — return original verbatim (byte-identical guarantee)
+  if (_pendingChanges.size === 0) {
+    return rawHTML;
+  }
+
+  // Collect changes with their source positions
+  const patches = [];
+  for (const [hcId, change] of _pendingChanges) {
+    const record = elementMap.get(hcId);
+    if (!record) {
+      console.warn(`serializer: no element record for hc-id "${hcId}", skipping`);
+      continue;
+    }
+
+    // For Phase 2, we track opening tag positions only.
+    // Full element replacement (opening + content + closing) will be
+    // computed by walking the annotated DOM in Phase 3.
+    patches.push({
+      ...change,
+      sourceIndex: record.sourceIndex,
+      sourceLength: record.sourceLength,
+    });
+  }
+
+  // Sort patches by sourceIndex descending (patch from end to start)
+  patches.sort((a, b) => b.sourceIndex - a.sourceIndex);
+
+  let result = rawHTML;
+  for (const patch of patches) {
+    if (patch.type === 'delete') {
+      // Remove the opening tag from the source.
+      // Full element deletion (content + closing tag) will be refined in Phase 3.
+      result = result.slice(0, patch.sourceIndex) +
+               result.slice(patch.sourceIndex + patch.sourceLength);
+    } else if (patch.newOuterHTML !== null) {
+      // Replace the element's opening tag portion.
+      // Full replacement logic will be refined in Phase 3.
+      result = result.slice(0, patch.sourceIndex) +
+               patch.newOuterHTML +
+               result.slice(patch.sourceIndex + patch.sourceLength);
+    }
+  }
+
+  return result;
+}