@ashraf_mizo/htmlcanvas 1.0.0

package/editor/multiSelect.js

@@ -0,0 +1,436 @@
+// editor/multiSelect.js — Multi-element selection, marquee drag, group/ungroup
+//
+// Exports:
+//   initMultiSelect(iframe, iframeDoc, canvasArea) — attach marquee + shift-click listeners
+//   addToSelection(element)       — add element to multi-selection set
+//   removeFromSelection(element)  — remove element from set
+//   clearMultiSelection()         — empty the set
+//   getSelectedElements()         — returns array of selected elements
+//   getSelectedHcIds()            — returns array of selected hc-id strings
+//   isMultiSelectActive()         — true if 2+ elements selected
+//   makeGroupCommand(elements, hcIds, iframeDoc) — Command to wrap in data-hc-group
+//   makeUngroupCommand(wrapper, iframeDoc)       — Command to unwrap group
+
+// ── Module state ─────────────────────────────────────────────────────────────
+
+let _selectedElements = new Set();
+let _selectedHcIds    = new Set();
+let _iframe           = null;
+let _iframeDoc        = null;
+let _canvasArea       = null;
+let _marqueeDiv       = null;
+let _marqueeStart     = null;
+
+// Stored handler refs for clean removal on re-init
+let _onZoomForMulti   = null;
+let _onScrollForMulti = null;
+
+// ── DOM refs (lazy — only accessed after DOM is ready) ────────────────────────
+
+function getMultiOverlay() {
+  if (typeof document === 'undefined') return null;
+  return document.getElementById('multi-selection-overlay');
+}
+
+// ── Selection API ─────────────────────────────────────────────────────────────
+
+/**
+ * Add an element to the multi-selection set.
+ * Dispatches hc:multi-selection-changed.
+ * @param {Element} element
+ */
+export function addToSelection(element) {
+  if (!element) return;
+  const hcId = element.getAttribute ? element.getAttribute('data-hc-id') : null;
+  _selectedElements.add(element);
+  if (hcId) _selectedHcIds.add(hcId);
+  _dispatchMultiSelectionChanged();
+  _updateMultiOverlay();
+}
+
+/**
+ * Remove an element from the multi-selection set.
+ * Dispatches hc:multi-selection-changed.
+ * @param {Element} element
+ */
+export function removeFromSelection(element) {
+  if (!element) return;
+  const hcId = element.getAttribute ? element.getAttribute('data-hc-id') : null;
+  _selectedElements.delete(element);
+  if (hcId) _selectedHcIds.delete(hcId);
+  _dispatchMultiSelectionChanged();
+  _updateMultiOverlay();
+}
+
+/**
+ * Clear all multi-selection state.
+ * Dispatches hc:multi-selection-changed with empty arrays.
+ */
+export function clearMultiSelection() {
+  _selectedElements.clear();
+  _selectedHcIds.clear();
+  _dispatchMultiSelectionChanged();
+  _hideMultiOverlay();
+}
+
+/**
+ * Returns the array of all currently selected elements.
+ * @returns {Element[]}
+ */
+export function getSelectedElements() {
+  return [..._selectedElements];
+}
+
+/**
+ * Returns the array of all currently selected hc-id strings.
+ * @returns {string[]}
+ */
+export function getSelectedHcIds() {
+  return [..._selectedHcIds];
+}
+
+/**
+ * Returns true if 2 or more elements are selected.
+ * @returns {boolean}
+ */
+export function isMultiSelectActive() {
+  return _selectedElements.size > 1;
+}
+
+// ── Event dispatch ────────────────────────────────────────────────────────────
+
+function _dispatchMultiSelectionChanged() {
+  // Guard: only dispatch in browser context
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent('hc:multi-selection-changed', {
+    detail: {
+      elements: [..._selectedElements],
+      hcIds:    [..._selectedHcIds],
+    }
+  }));
+}
+
+// ── Multi-selection overlay ───────────────────────────────────────────────────
+
+/**
+ * Update the position of the multi-selection bounding box overlay.
+ * Uses getElementCanvasRect for each element, then computes the union rect.
+ */
+function _updateMultiOverlay() {
+  // Only works in browser with iframe refs
+  if (!_iframe || !_canvasArea || _selectedElements.size < 2) {
+    _hideMultiOverlay();
+    return;
+  }
+
+  const overlay = getMultiOverlay();
+  if (!overlay) return;
+
+  // Import getElementCanvasRect dynamically to avoid circular deps in tests
+  // (this path is only reached when _iframe is set = browser only)
+  import('./coords.js').then(({ getElementCanvasRect }) => {
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+    for (const el of _selectedElements) {
+      try {
+        const r = getElementCanvasRect(el, _iframe, _canvasArea);
+        minX = Math.min(minX, r.x !== undefined ? r.x : r.left);
+        minY = Math.min(minY, r.y !== undefined ? r.y : r.top);
+        maxX = Math.max(maxX, (r.x !== undefined ? r.x : r.left) + r.width);
+        maxY = Math.max(maxY, (r.y !== undefined ? r.y : r.top) + r.height);
+      } catch { /* element may have been removed */ }
+    }
+
+    if (!isFinite(minX)) { _hideMultiOverlay(); return; }
+
+    overlay.style.left    = minX + 'px';
+    overlay.style.top     = minY + 'px';
+    overlay.style.width   = (maxX - minX) + 'px';
+    overlay.style.height  = (maxY - minY) + 'px';
+    overlay.style.display = '';
+  }).catch(() => {});
+}
+
+function _hideMultiOverlay() {
+  const overlay = getMultiOverlay();
+  if (overlay) overlay.style.display = 'none';
+}
+
+// ── Marquee drag ──────────────────────────────────────────────────────────────
+
+/**
+ * Initialises (or re-initialises) the multi-select module for a new iframe.
+ * Attaches marquee drag listeners on the canvasArea.
+ *
+ * @param {HTMLIFrameElement} iframe
+ * @param {Document} iframeDoc
+ * @param {HTMLElement} canvasArea
+ */
+export function initMultiSelect(iframe, iframeDoc, canvasArea) {
+  _iframe     = iframe;
+  _iframeDoc  = iframeDoc;
+  _canvasArea = canvasArea;
+
+  clearMultiSelection();
+
+  // Remove existing listeners (avoid stacking on reload)
+  canvasArea.removeEventListener('pointerdown', _onMarqueeStart);
+  if (_onZoomForMulti) window.removeEventListener('hc:zoom-changed', _onZoomForMulti);
+  if (_onScrollForMulti && _canvasArea) _canvasArea.removeEventListener('scroll', _onScrollForMulti);
+
+  // Attach marquee handler
+  canvasArea.addEventListener('pointerdown', _onMarqueeStart);
+
+  // Re-sync overlay on zoom/scroll (stored refs to prevent stacking)
+  _onZoomForMulti = () => _updateMultiOverlay();
+  _onScrollForMulti = () => _updateMultiOverlay();
+  window.addEventListener('hc:zoom-changed', _onZoomForMulti);
+  canvasArea.addEventListener('scroll', _onScrollForMulti);
+}
+
+function _onMarqueeStart(e) {
+  // Only start marquee if clicking directly on canvas background (not iframe)
+  // and not on an existing overlay
+  if (e.target !== _canvasArea) return;
+  if (e.button !== 0) return;
+
+  const canvasRect = _canvasArea.getBoundingClientRect();
+  const scrollLeft = _canvasArea.scrollLeft;
+  const scrollTop  = _canvasArea.scrollTop;
+
+  _marqueeStart = {
+    x: e.clientX - canvasRect.left + scrollLeft,
+    y: e.clientY - canvasRect.top  + scrollTop,
+  };
+
+  // Create marquee div
+  _marqueeDiv = document.createElement('div');
+  _marqueeDiv.className = 'marquee-rect';
+  _marqueeDiv.style.left   = _marqueeStart.x + 'px';
+  _marqueeDiv.style.top    = _marqueeStart.y + 'px';
+  _marqueeDiv.style.width  = '0px';
+  _marqueeDiv.style.height = '0px';
+  _canvasArea.appendChild(_marqueeDiv);
+
+  document.addEventListener('pointermove', _onMarqueeMove);
+  document.addEventListener('pointerup',   _onMarqueeEnd);
+}
+
+function _onMarqueeMove(e) {
+  if (!_marqueeDiv || !_marqueeStart) return;
+
+  const canvasRect = _canvasArea.getBoundingClientRect();
+  const scrollLeft = _canvasArea.scrollLeft;
+  const scrollTop  = _canvasArea.scrollTop;
+
+  const curX = e.clientX - canvasRect.left + scrollLeft;
+  const curY = e.clientY - canvasRect.top  + scrollTop;
+
+  const left   = Math.min(curX, _marqueeStart.x);
+  const top    = Math.min(curY, _marqueeStart.y);
+  const width  = Math.abs(curX - _marqueeStart.x);
+  const height = Math.abs(curY - _marqueeStart.y);
+
+  _marqueeDiv.style.left   = left   + 'px';
+  _marqueeDiv.style.top    = top    + 'px';
+  _marqueeDiv.style.width  = width  + 'px';
+  _marqueeDiv.style.height = height + 'px';
+}
+
+function _onMarqueeEnd(e) {
+  document.removeEventListener('pointermove', _onMarqueeMove);
+  document.removeEventListener('pointerup',   _onMarqueeEnd);
+
+  if (!_marqueeDiv || !_marqueeStart) return;
+
+  const marqueeRect = {
+    left:   parseFloat(_marqueeDiv.style.left),
+    top:    parseFloat(_marqueeDiv.style.top),
+    width:  parseFloat(_marqueeDiv.style.width),
+    height: parseFloat(_marqueeDiv.style.height),
+  };
+
+  _marqueeDiv.remove();
+  _marqueeDiv  = null;
+  _marqueeStart = null;
+
+  // Skip tiny / accidental drags
+  if (marqueeRect.width < 4 || marqueeRect.height < 4) return;
+
+  // Select all elements whose canvas rects intersect the marquee
+  if (!_iframeDoc || !_iframe) return;
+
+  import('./coords.js').then(({ getElementCanvasRect }) => {
+    const candidates = _iframeDoc.querySelectorAll('[data-hc-id]');
+    for (const el of candidates) {
+      try {
+        const r = getElementCanvasRect(el, _iframe, _canvasArea);
+        const elRect = { left: r.x !== undefined ? r.x : r.left, top: r.y !== undefined ? r.y : r.top, width: r.width, height: r.height };
+        if (_rectsIntersect(marqueeRect, elRect)) {
+          addToSelection(el);
+        }
+      } catch { /* skip elements that error */ }
+    }
+  }).catch(() => {});
+}
+
+function _rectsIntersect(a, b) {
+  return !(a.left + a.width < b.left ||
+           b.left + b.width < a.left ||
+           a.top + a.height < b.top  ||
+           b.top + b.height < a.top);
+}
+
+// ── Grouping ──────────────────────────────────────────────────────────────────
+
+/**
+ * Returns the highest hc-N numeric suffix in iframeDoc.
+ */
+function _getNextHcId(iframeDoc) {
+  const allTagged = iframeDoc.querySelectorAll('[data-hc-id]');
+  let max = 0;
+  for (const el of allTagged) {
+    const id = el.getAttribute ? el.getAttribute('data-hc-id') : null;
+    if (!id) continue;
+    const m = id.match(/^hc-(\d+)$/);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  return max + 1;
+}
+
+/**
+ * Creates a Command that wraps the given elements in a data-hc-group div.
+ *
+ * @param {Element[]} elements   - Live iframe DOM elements to group
+ * @param {string[]}  hcIds      - Their data-hc-id values
+ * @param {Document}  iframeDoc  - iframe contentDocument
+ * @returns {{ execute(), undo(), description: string }}
+ */
+export function makeGroupCommand(elements, hcIds, iframeDoc) {
+  // Snapshot parent + sibling references before execute
+  const snapshots = elements.map(el => ({
+    el,
+    parent:      el.parentElement,
+    nextSibling: el.nextSibling,
+  }));
+
+  // Compute bounding box using getBoundingClientRect (works in tests + browser)
+  let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
+  for (const el of elements) {
+    const r = el.getBoundingClientRect ? el.getBoundingClientRect() : { left: 0, top: 0, right: 100, bottom: 100 };
+    minLeft   = Math.min(minLeft,   r.left);
+    minTop    = Math.min(minTop,    r.top);
+    maxRight  = Math.max(maxRight,  r.right  || (r.left + (r.width  || 0)));
+    maxBottom = Math.max(maxBottom, r.bottom || (r.top  + (r.height || 0)));
+  }
+
+  // Create wrapper element
+  const wrapper = iframeDoc.createElement('div');
+  wrapper.setAttribute('data-hc-group', '');
+  const wrapperHcId = `hc-${_getNextHcId(iframeDoc)}`;
+  wrapper.setAttribute('data-hc-id', wrapperHcId);
+  wrapper._style = wrapper._style || {};
+  wrapper.style.position = 'relative';
+
+  // Reference parent (the common parent — use the first element's parent)
+  const insertParent    = snapshots[0].parent;
+  const insertBefore    = snapshots[0].nextSibling;
+
+  let _wrapperParent = null;
+
+  return {
+    description: 'Group elements',
+
+    execute() {
+      // Insert wrapper before first element's original position
+      if (insertParent && insertBefore) {
+        insertParent.insertBefore(wrapper, insertBefore);
+      } else if (insertParent) {
+        insertParent.appendChild(wrapper);
+      }
+      _wrapperParent = insertParent;
+
+      // Move all elements into wrapper
+      for (const { el } of snapshots) {
+        wrapper.appendChild(el);
+      }
+    },
+
+    undo() {
+      // Move children back to original parents at original positions
+      for (const { el, parent, nextSibling } of snapshots) {
+        if (parent) {
+          if (nextSibling && nextSibling.parentElement === parent) {
+            parent.insertBefore(el, nextSibling);
+          } else {
+            parent.appendChild(el);
+          }
+        }
+      }
+
+      // Remove wrapper from its parent
+      if (wrapper.parentElement) {
+        wrapper.parentElement._children = wrapper.parentElement._children
+          ? wrapper.parentElement._children.filter(c => c !== wrapper)
+          : undefined;
+        wrapper.remove ? wrapper.remove() : (wrapper.parentElement._children = (wrapper.parentElement._children || []).filter(c => c !== wrapper));
+      } else if (_wrapperParent) {
+        if (_wrapperParent._children) {
+          _wrapperParent._children = _wrapperParent._children.filter(c => c !== wrapper);
+        }
+        wrapper._parent = null;
+      }
+    },
+  };
+}
+
+/**
+ * Creates a Command that removes a data-hc-group wrapper, moving its children
+ * back to the wrapper's parent.
+ *
+ * @param {Element}  groupWrapper - The wrapper div with data-hc-group
+ * @param {Document} iframeDoc    - iframe contentDocument
+ * @returns {{ execute(), undo(), description: string }}
+ */
+export function makeUngroupCommand(groupWrapper, iframeDoc) {
+  const parent   = groupWrapper.parentElement || groupWrapper._parent;
+  const children = groupWrapper._children
+    ? [...groupWrapper._children]
+    : (groupWrapper.children ? [...groupWrapper.children] : []);
+
+  return {
+    description: 'Ungroup elements',
+
+    execute() {
+      // Move children out of wrapper to parent (before wrapper)
+      for (const child of children) {
+        if (parent) {
+          if (groupWrapper.parentElement === parent) {
+            parent.insertBefore(child, groupWrapper);
+          } else {
+            parent.appendChild(child);
+          }
+        }
+      }
+
+      // Remove wrapper
+      if (groupWrapper.remove && groupWrapper.parentElement) {
+        groupWrapper.remove();
+      } else if (parent && parent._children) {
+        parent._children = parent._children.filter(c => c !== groupWrapper);
+        groupWrapper._parent = null;
+      }
+    },
+
+    undo() {
+      // Re-create wrapper structure: insert wrapper back into parent
+      if (parent) {
+        parent.appendChild(groupWrapper);
+      }
+      // Move children back into wrapper
+      for (const child of children) {
+        groupWrapper.appendChild ? groupWrapper.appendChild(child) : groupWrapper._children.push(child);
+      }
+    },
+  };
+}