@ashraf_mizo/htmlcanvas 1.0.0

package/editor/clipboard.js

@@ -0,0 +1,177 @@
+// editor/clipboard.js — Copy/Paste for selected elements
+//
+// Copy stores the selected element's outerHTML (stripped of hc-ids).
+// Paste clones it as a sibling with fresh hc-ids in the same position.
+// Both operations go through the Command Pattern for undo support.
+//
+// Exports:
+//   copySelected(element)
+//   pasteElement(iframeDoc, push, showStatus)
+
+import { recordChange, recordDeletion, cancelDeletion } from './serializer.js';
+import { getTopZIndex, notifyLayersChanged } from './layers.js';
+
+// ── Clipboard state ──────────────────────────────────────────────────────────
+
+let _clipboardHTML = null;
+let _clipboardParentSelector = null;
+let _clipboardSourceHcId = null;
+
+// ── ID management ────────────────────────────────────────────────────────────
+
+/**
+ * Finds the highest hc-N id in the iframe document and returns N+1.
+ */
+function getNextHcId(iframeDoc) {
+  const allTagged = iframeDoc.querySelectorAll('[data-hc-id]');
+  let max = 0;
+  for (const el of allTagged) {
+    const id = el.getAttribute('data-hc-id');
+    const m = id.match(/^hc-(\d+)$/);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  return max + 1;
+}
+
+/**
+ * Assigns fresh data-hc-id attributes to an element and all its descendants.
+ */
+function assignFreshIds(element, startId) {
+  let counter = startId;
+  element.setAttribute('data-hc-id', `hc-${counter++}`);
+  const descendants = element.querySelectorAll('*');
+  for (const desc of descendants) {
+    // Only tag HTML elements that would normally get IDs
+    if (desc.nodeType === 1 && desc.tagName) {
+      const tag = desc.tagName.toLowerCase();
+      if (tag !== 'script' && tag !== 'style') {
+        desc.setAttribute('data-hc-id', `hc-${counter++}`);
+      }
+    }
+  }
+  return counter;
+}
+
+// ── Strip hc-ids from HTML string ────────────────────────────────────────────
+
+function stripHcIds(html) {
+  return html.replace(/\s*data-hc-id="[^"]*"/g, '');
+}
+
+// ── Copy ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Copies the selected element to the internal clipboard.
+ *
+ * @param {Element} element - The selected DOM element (inside iframe)
+ * @returns {boolean} true if copied successfully
+ */
+export function copySelected(element) {
+  if (!element) return false;
+
+  // Store cleaned HTML (no hc-ids)
+  _clipboardHTML = stripHcIds(element.outerHTML);
+
+  // Store a selector to find the parent for pasting
+  const parent = element.parentElement;
+  if (parent) {
+    _clipboardParentSelector = parent.getAttribute('data-hc-id') || null;
+  }
+
+  // Store the source element's hc-id so paste can insert right after it
+  _clipboardSourceHcId = element.getAttribute('data-hc-id') || null;
+
+  return true;
+}
+
+/**
+ * Returns true if there's content in the clipboard.
+ */
+export function hasClipboardContent() {
+  return _clipboardHTML !== null;
+}
+
+// ── Paste ────────────────────────────────────────────────────────────────────
+
+/**
+ * Pastes the clipboard content as a new element.
+ * Inserts right after the source element with a slight offset so the
+ * duplicate is visible next to the original.
+ *
+ * @param {Document} iframeDoc - The iframe's contentDocument
+ * @returns {{ execute(): void, undo(): void, description: string } | null}
+ */
+export function makePasteCommand(iframeDoc) {
+  if (!_clipboardHTML || !iframeDoc) return null;
+
+  // Create the element from stored HTML
+  const tempContainer = iframeDoc.createElement('div');
+  tempContainer.innerHTML = _clipboardHTML;
+  const newElement = tempContainer.firstElementChild;
+  if (!newElement) return null;
+
+  // Assign fresh hc-ids
+  const startId = getNextHcId(iframeDoc);
+  assignFreshIds(newElement, startId);
+
+  const newHcId = newElement.getAttribute('data-hc-id');
+
+  // Find the source element so we can insert right after it
+  let sourceElement = null;
+  if (_clipboardSourceHcId) {
+    sourceElement = iframeDoc.querySelector(`[data-hc-id="${_clipboardSourceHcId}"]`);
+  }
+
+  // Find the insertion parent
+  let insertParent = null;
+  if (sourceElement) {
+    insertParent = sourceElement.parentElement;
+  }
+  if (!insertParent && _clipboardParentSelector) {
+    insertParent = iframeDoc.querySelector(`[data-hc-id="${_clipboardParentSelector}"]`);
+  }
+  if (!insertParent) {
+    insertParent = iframeDoc.querySelector('.page') || iframeDoc.body;
+  }
+
+  // Offset the duplicate so it's visible next to the original
+  const position = newElement.style.position;
+  if (position === 'absolute' || position === 'fixed') {
+    const left = parseFloat(newElement.style.left) || 0;
+    const top = parseFloat(newElement.style.top) || 0;
+    newElement.style.left = (left + 20) + 'px';
+    newElement.style.top = (top + 20) + 'px';
+  }
+
+  // Place pasted element on top of all existing siblings
+  // z-index requires a positioned element — ensure at least position: relative
+  const topZ = getTopZIndex(insertParent);
+  newElement.style.zIndex = String(topZ);
+  if (!newElement.style.position || newElement.style.position === 'static') {
+    newElement.style.position = 'relative';
+  }
+
+  const cleanHTML = stripHcIds(newElement.outerHTML);
+  const insertBefore = sourceElement ? sourceElement.nextSibling : null;
+
+  return {
+    description: `Paste <${newElement.tagName.toLowerCase()}>`,
+
+    execute() {
+      // Insert right after the source element, or append if source not found
+      if (insertBefore) {
+        insertParent.insertBefore(newElement, insertBefore);
+      } else {
+        insertParent.appendChild(newElement);
+      }
+      recordChange(newHcId, cleanHTML);
+      notifyLayersChanged();
+    },
+
+    undo() {
+      newElement.remove();
+      recordDeletion(newHcId);
+      notifyLayersChanged();
+    }
+  };
+}

package/editor/coords.js

@@ -0,0 +1,121 @@
+/**
+ * coords.js — Coordinate transforms between iframe content and editor canvas.
+ *
+ * The iframe is positioned inside #iframe-container, which is inside .canvas-area.
+ * The canvas area can be scrolled. The iframe container can be scaled (zoom, Phase 2 Plan 03).
+ *
+ * Coordinate spaces:
+ *   - iframe-local: (0,0) is top-left of iframe content document
+ *   - canvas-local: (0,0) is top-left of .canvas-area's scroll container
+ *   - viewport: (0,0) is top-left of browser viewport
+ */
+
+/**
+ * Extracts the scale factor from the iframe container's CSS transform matrix.
+ * @param {HTMLElement} container - The #iframe-container element
+ * @returns {number} Current scale factor (1 if no scale applied)
+ */
+function getContainerScale(container) {
+  const transform = getComputedStyle(container).transform;
+  if (transform && transform !== 'none') {
+    const match = transform.match(/matrix\(([^,]+)/);
+    if (match) return parseFloat(match[1]);
+  }
+  return 1;
+}
+
+/**
+ * Converts a point from iframe content coordinates to canvas-area coordinates.
+ *
+ * @param {number} iframeX - X coordinate relative to iframe content document
+ * @param {number} iframeY - Y coordinate relative to iframe content document
+ * @param {HTMLIFrameElement} iframe - The render iframe element
+ * @param {HTMLElement} canvasArea - The .canvas-area element
+ * @returns {{ x: number, y: number }} Point in canvas-area scroll coordinates
+ */
+export function iframeToCanvas(iframeX, iframeY, iframe, canvasArea) {
+  const iframeRect = iframe.getBoundingClientRect();
+  const canvasRect = canvasArea.getBoundingClientRect();
+  const scale = getContainerScale(iframe.parentElement);
+
+  // iframe-local to viewport
+  const viewportX = iframeRect.left + (iframeX * scale);
+  const viewportY = iframeRect.top + (iframeY * scale);
+
+  // viewport to canvas-local (accounting for canvas scroll)
+  const canvasX = viewportX - canvasRect.left + canvasArea.scrollLeft;
+  const canvasY = viewportY - canvasRect.top + canvasArea.scrollTop;
+
+  return { x: canvasX, y: canvasY };
+}
+
+/**
+ * Converts a point from canvas-area coordinates to iframe content coordinates.
+ *
+ * @param {number} canvasX - X coordinate relative to canvas-area scroll container
+ * @param {number} canvasY - Y coordinate relative to canvas-area scroll container
+ * @param {HTMLIFrameElement} iframe - The render iframe element
+ * @param {HTMLElement} canvasArea - The .canvas-area element
+ * @returns {{ x: number, y: number }} Point in iframe content document coordinates
+ */
+export function canvasToIframe(canvasX, canvasY, iframe, canvasArea) {
+  const iframeRect = iframe.getBoundingClientRect();
+  const canvasRect = canvasArea.getBoundingClientRect();
+  const scale = getContainerScale(iframe.parentElement);
+
+  // canvas-local to viewport
+  const viewportX = canvasX - canvasArea.scrollLeft + canvasRect.left;
+  const viewportY = canvasY - canvasArea.scrollTop + canvasRect.top;
+
+  // viewport to iframe-local
+  const iframeX = (viewportX - iframeRect.left) / scale;
+  const iframeY = (viewportY - iframeRect.top) / scale;
+
+  return { x: iframeX, y: iframeY };
+}
+
+/**
+ * Returns a rect for an element inside the iframe, expressed in canvas-area coordinates.
+ * Accounts for clip-path: inset() so the rect wraps only the visible (cropped) area.
+ *
+ * @param {Element} element - An element inside the iframe's contentDocument
+ * @param {HTMLIFrameElement} iframe - The render iframe element
+ * @param {HTMLElement} canvasArea - The .canvas-area element
+ * @returns {{ x: number, y: number, width: number, height: number }}
+ */
+export function getElementCanvasRect(element, iframe, canvasArea) {
+  const rect = element.getBoundingClientRect();
+  const scale = getContainerScale(iframe.parentElement);
+
+  // Adjust for clip-path: inset() (used by image crop)
+  const clip = parseClipPathInset(element);
+  const adjLeft   = rect.left   + rect.width  * clip.left;
+  const adjTop    = rect.top    + rect.height * clip.top;
+  const adjWidth  = rect.width  * (1 - clip.left - clip.right);
+  const adjHeight = rect.height * (1 - clip.top - clip.bottom);
+
+  const topLeft = iframeToCanvas(adjLeft, adjTop, iframe, canvasArea);
+
+  return {
+    x: topLeft.x,
+    y: topLeft.y,
+    width: adjWidth * scale,
+    height: adjHeight * scale
+  };
+}
+
+/**
+ * Parses clip-path: inset(T% R% B% L%) from an element's inline style.
+ * Returns fractional values (0-1). Returns zeros if no clip-path is set.
+ */
+function parseClipPathInset(element) {
+  const clipPath = element.style.clipPath || '';
+  const m = clipPath.match(/inset\(([\d.]+)%\s+([\d.]+)%\s+([\d.]+)%\s+([\d.]+)%\)/);
+  if (!m) return { top: 0, right: 0, bottom: 0, left: 0 };
+  return {
+    top:    parseFloat(m[1]) / 100,
+    right:  parseFloat(m[2]) / 100,
+    bottom: parseFloat(m[3]) / 100,
+    left:   parseFloat(m[4]) / 100,
+  };
+}

package/editor/crop.js

@@ -0,0 +1,325 @@
+// editor/crop.js — Image cropping tool using CSS clip-path: inset()
+//
+// Exports:
+//   initCrop(iframe, iframeDoc, canvasArea)
+//   startCrop()          — enter crop mode on the currently selected image
+//   cancelCrop()         — exit without applying
+//   isCropActive()       — true if cropping
+//
+// Uses clip-path: inset(top right bottom left) for non-destructive cropping.
+// All changes go through the Command Pattern for undo/redo.
+
+import { push } from './history.js';
+import { recordChange } from './serializer.js';
+import { getSelectedElement, getSelectedHcId } from './selection.js';
+
+let _iframe = null;
+let _iframeDoc = null;
+let _canvasArea = null;
+let _cropActive = false;
+let _cropOverlay = null;
+let _cropTarget = null;
+let _cropHcId = null;
+
+// Crop inset values (percentages 0-100)
+let _insetTop = 0;
+let _insetRight = 0;
+let _insetBottom = 0;
+let _insetLeft = 0;
+let _savedClipPath = ''; // stored while crop mode is active
+
+export function isCropActive() { return _cropActive; }
+
+export function initCrop(iframe, iframeDoc, canvasArea) {
+  _iframe = iframe;
+  _iframeDoc = iframeDoc;
+  _canvasArea = canvasArea;
+}
+
+/**
+ * Enter crop mode on the currently selected image.
+ */
+export function startCrop() {
+  const el = getSelectedElement();
+  const hcId = getSelectedHcId();
+  if (!el || !hcId || el.tagName.toLowerCase() !== 'img') return;
+
+  _cropTarget = el;
+  _cropHcId = hcId;
+  _cropActive = true;
+
+  // Parse existing clip-path if any
+  const existing = el.style.clipPath || '';
+  _savedClipPath = existing;
+  const m = existing.match(/inset\(([\d.]+)%\s+([\d.]+)%\s+([\d.]+)%\s+([\d.]+)%\)/);
+  if (m) {
+    _insetTop = parseFloat(m[1]);
+    _insetRight = parseFloat(m[2]);
+    _insetBottom = parseFloat(m[3]);
+    _insetLeft = parseFloat(m[4]);
+  } else {
+    _insetTop = _insetRight = _insetBottom = _insetLeft = 0;
+  }
+
+  // Temporarily remove clip-path so the full image is visible during crop
+  el.style.clipPath = '';
+
+  _createCropOverlay();
+  _positionCropOverlay();
+}
+
+export function cancelCrop() {
+  // Restore original clip-path
+  if (_cropTarget && _savedClipPath) {
+    _cropTarget.style.clipPath = _savedClipPath;
+  }
+  _removeCropOverlay();
+  _cropActive = false;
+  _cropTarget = null;
+  _cropHcId = null;
+  _savedClipPath = '';
+}
+
+/**
+ * Apply the crop and exit crop mode.
+ */
+function applyCrop() {
+  if (!_cropTarget || !_cropHcId) return;
+
+  const el = _cropTarget;
+  const hcId = _cropHcId;
+  // Use the saved clip-path from before crop mode started (since we cleared it)
+  const oldClip = _savedClipPath;
+  const newClip = `inset(${_insetTop.toFixed(1)}% ${_insetRight.toFixed(1)}% ${_insetBottom.toFixed(1)}% ${_insetLeft.toFixed(1)}%)`;
+
+  const command = {
+    description: 'Crop image',
+    execute() {
+      el.style.clipPath = newClip;
+      recordChange(hcId, el.outerHTML);
+      // Refresh selection overlay to wrap cropped area
+      window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+    },
+    undo() {
+      if (oldClip) el.style.clipPath = oldClip;
+      else el.style.removeProperty('clip-path');
+      recordChange(hcId, el.outerHTML);
+      window.dispatchEvent(new CustomEvent('hc:zoom-changed'));
+    },
+  };
+
+  push(command);
+  _removeCropOverlay();
+  _cropActive = false;
+  _cropTarget = null;
+  _cropHcId = null;
+  _savedClipPath = '';
+}
+
+// ── Crop overlay UI ────────────────────────────────────────────────────────
+
+function _createCropOverlay() {
+  _removeCropOverlay();
+
+  const overlay = document.createElement('div');
+  overlay.className = 'crop-overlay';
+  overlay.innerHTML = `
+    <div class="crop-dim-area"></div>
+    <div class="crop-handle crop-handle-t" data-edge="top"></div>
+    <div class="crop-handle crop-handle-r" data-edge="right"></div>
+    <div class="crop-handle crop-handle-b" data-edge="bottom"></div>
+    <div class="crop-handle crop-handle-l" data-edge="left"></div>
+    <div class="crop-handle crop-handle-tl" data-edge="top-left"></div>
+    <div class="crop-handle crop-handle-tr" data-edge="top-right"></div>
+    <div class="crop-handle crop-handle-bl" data-edge="bottom-left"></div>
+    <div class="crop-handle crop-handle-br" data-edge="bottom-right"></div>
+    <div class="crop-toolbar">
+      <button class="crop-btn crop-btn-apply" title="Apply crop">Apply</button>
+      <button class="crop-btn crop-btn-cancel" title="Cancel crop">Cancel</button>
+      <button class="crop-btn crop-btn-reset" title="Reset crop">Reset</button>
+    </div>
+  `;
+
+  _canvasArea.appendChild(overlay);
+  _cropOverlay = overlay;
+
+  // Wire buttons
+  overlay.querySelector('.crop-btn-apply').addEventListener('click', applyCrop);
+  overlay.querySelector('.crop-btn-cancel').addEventListener('click', cancelCrop);
+  overlay.querySelector('.crop-btn-reset').addEventListener('click', () => {
+    _insetTop = _insetRight = _insetBottom = _insetLeft = 0;
+    _positionCropOverlay();
+  });
+
+  // Wire handle dragging
+  overlay.querySelectorAll('.crop-handle').forEach(handle => {
+    handle.addEventListener('mousedown', _onHandleDown);
+  });
+
+  // Escape to cancel
+  _onKeyDown = (e) => {
+    if (e.key === 'Escape') { cancelCrop(); e.stopPropagation(); }
+    if (e.key === 'Enter') { applyCrop(); e.stopPropagation(); }
+  };
+  document.addEventListener('keydown', _onKeyDown, true);
+}
+
+let _onKeyDown = null;
+
+function _removeCropOverlay() {
+  if (_cropOverlay) {
+    _cropOverlay.remove();
+    _cropOverlay = null;
+  }
+  if (_onKeyDown) {
+    document.removeEventListener('keydown', _onKeyDown, true);
+    _onKeyDown = null;
+  }
+}
+
+function _getElementCanvasRect() {
+  if (!_cropTarget || !_iframe || !_canvasArea) return null;
+  const elRect = _cropTarget.getBoundingClientRect();
+  const iframeRect = _iframe.getBoundingClientRect();
+  const canvasRect = _canvasArea.getBoundingClientRect();
+
+  // The iframe is scaled via CSS transform on #iframe-container.
+  // elRect values are in the iframe's own (unscaled) coordinate space,
+  // so we must multiply by the scale factor to get parent-page coordinates.
+  const scale = iframeRect.width / (_iframe.offsetWidth || 1);
+
+  return {
+    x: iframeRect.left - canvasRect.left + _canvasArea.scrollLeft + elRect.left * scale,
+    y: iframeRect.top - canvasRect.top + _canvasArea.scrollTop + elRect.top * scale,
+    width: elRect.width * scale,
+    height: elRect.height * scale,
+  };
+}
+
+function _positionCropOverlay() {
+  if (!_cropOverlay || !_cropTarget) return;
+
+  const rect = _getElementCanvasRect();
+  if (!rect) return;
+
+  // Get iframe scale (zoom)
+  const iframeRect = _iframe.getBoundingClientRect();
+  const iframeNaturalWidth = _iframe.offsetWidth;
+  const scale = iframeRect.width / iframeNaturalWidth || 1;
+
+  // Full element rect (scaled)
+  const fw = rect.width;
+  const fh = rect.height;
+
+  // Crop area within the element
+  const cropX = rect.x + (fw * _insetLeft / 100);
+  const cropY = rect.y + (fh * _insetTop / 100);
+  const cropW = fw * (1 - (_insetLeft + _insetRight) / 100);
+  const cropH = fh * (1 - (_insetTop + _insetBottom) / 100);
+
+  _cropOverlay.style.left = rect.x + 'px';
+  _cropOverlay.style.top = rect.y + 'px';
+  _cropOverlay.style.width = fw + 'px';
+  _cropOverlay.style.height = fh + 'px';
+
+  // Dim area shows the crop region (transparent center, dimmed edges)
+  const dimArea = _cropOverlay.querySelector('.crop-dim-area');
+  if (dimArea) {
+    dimArea.style.clipPath = `polygon(
+      0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
+      ${_insetLeft}% ${_insetTop}%,
+      ${_insetLeft}% ${100 - _insetBottom}%,
+      ${100 - _insetRight}% ${100 - _insetBottom}%,
+      ${100 - _insetRight}% ${_insetTop}%,
+      ${_insetLeft}% ${_insetTop}%
+    )`;
+  }
+
+  // Position handles
+  _positionHandle('.crop-handle-t', _insetLeft, _insetTop, 100 - _insetLeft - _insetRight, 0);
+  _positionHandle('.crop-handle-b', _insetLeft, 100 - _insetBottom, 100 - _insetLeft - _insetRight, 0);
+  _positionHandle('.crop-handle-l', _insetLeft, _insetTop, 0, 100 - _insetTop - _insetBottom);
+  _positionHandle('.crop-handle-r', 100 - _insetRight, _insetTop, 0, 100 - _insetTop - _insetBottom);
+
+  _positionCorner('.crop-handle-tl', _insetLeft, _insetTop);
+  _positionCorner('.crop-handle-tr', 100 - _insetRight, _insetTop);
+  _positionCorner('.crop-handle-bl', _insetLeft, 100 - _insetBottom);
+  _positionCorner('.crop-handle-br', 100 - _insetRight, 100 - _insetBottom);
+
+  // Position toolbar below the crop area
+  const toolbar = _cropOverlay.querySelector('.crop-toolbar');
+  if (toolbar) {
+    toolbar.style.left = _insetLeft + '%';
+    toolbar.style.top = (100 - _insetBottom + 1) + '%';
+  }
+}
+
+function _positionHandle(selector, leftPct, topPct, widthPct, heightPct) {
+  const el = _cropOverlay.querySelector(selector);
+  if (!el) return;
+  el.style.left = leftPct + '%';
+  el.style.top = topPct + '%';
+  if (widthPct > 0) el.style.width = widthPct + '%';
+  if (heightPct > 0) el.style.height = heightPct + '%';
+}
+
+function _positionCorner(selector, leftPct, topPct) {
+  const el = _cropOverlay.querySelector(selector);
+  if (!el) return;
+  el.style.left = leftPct + '%';
+  el.style.top = topPct + '%';
+}
+
+// ── Handle dragging ─────────────────────────────────────────────────────────
+
+function _onHandleDown(e) {
+  e.preventDefault();
+  e.stopPropagation();
+
+  const edge = e.target.dataset.edge;
+  if (!edge) return;
+
+  const rect = _getElementCanvasRect();
+  if (!rect) return;
+
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startInsets = {
+    top: _insetTop,
+    right: _insetRight,
+    bottom: _insetBottom,
+    left: _insetLeft,
+  };
+
+  function onMove(ev) {
+    const dx = ev.clientX - startX;
+    const dy = ev.clientY - startY;
+
+    // Convert pixel delta to percentage
+    const dxPct = (dx / rect.width) * 100;
+    const dyPct = (dy / rect.height) * 100;
+
+    if (edge.includes('top')) {
+      _insetTop = Math.max(0, Math.min(100 - _insetBottom - 5, startInsets.top + dyPct));
+    }
+    if (edge.includes('bottom')) {
+      _insetBottom = Math.max(0, Math.min(100 - _insetTop - 5, startInsets.bottom - dyPct));
+    }
+    if (edge.includes('left')) {
+      _insetLeft = Math.max(0, Math.min(100 - _insetRight - 5, startInsets.left + dxPct));
+    }
+    if (edge.includes('right')) {
+      _insetRight = Math.max(0, Math.min(100 - _insetLeft - 5, startInsets.right - dxPct));
+    }
+
+    _positionCropOverlay();
+  }
+
+  function onUp() {
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  }
+
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+}