@ashraf_mizo/htmlcanvas 1.0.0

package/editor/guides.js

@@ -0,0 +1,513 @@
+// editor/guides.js — Rulers and draggable guide lines
+//
+// Exports:
+//   initGuides(canvasArea, iframeContainer, iframe)
+//
+// Features:
+//   - Horizontal ruler (top) and vertical ruler (left) showing pixel positions
+//   - Rulers update with zoom and scroll
+//   - Drag from ruler to create a guide line
+//   - Drag guide to reposition, drag back to ruler to remove
+//   - Toggle visibility via toolbar button
+
+import { getZoom } from './zoom.js';
+import { isSlideMode } from './slidePanel.js';
+
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const RULER_SIZE = 20;        // ruler thickness in px
+const TICK_SMALL = 10;        // small tick every N px (content space)
+const TICK_LARGE = 100;       // large tick + label every N px
+const GUIDE_COLOR = 'rgba(0, 160, 255, 0.45)';
+const GUIDE_ACTIVE_COLOR = 'rgba(0, 160, 255, 0.85)';
+
+// ── Module state ─────────────────────────────────────────────────────────────
+
+let _canvasArea      = null;
+let _iframeContainer = null;
+let _iframe          = null;
+let _rulersWrapper   = null;
+let _rulerH          = null;  // horizontal ruler (top)
+let _rulerV          = null;  // vertical ruler (left)
+let _rulerCorner     = null;  // corner square
+let _guidesContainer = null;
+let _guides          = [];    // { id, axis: 'h'|'v', position (content px), element, extraEls: [] }
+let _nextGuideId     = 1;
+let _visible         = true;
+
+// Stored handler refs for clean removal on re-init
+let _onScrollGuides  = null;
+let _onZoomGuides    = null;
+let _onResizeGuides  = null;
+
+// ── Ruler rendering ──────────────────────────────────────────────────────────
+
+/**
+ * Pin the rulers wrapper to the canvas-area's visible viewport
+ * (counteract scroll so rulers stay fixed on screen).
+ */
+function _pinRulersToViewport() {
+  if (!_rulersWrapper || !_canvasArea) return;
+  _rulersWrapper.style.top = _canvasArea.scrollTop + 'px';
+  _rulersWrapper.style.left = _canvasArea.scrollLeft + 'px';
+  _rulersWrapper.style.width = _canvasArea.clientWidth + 'px';
+  _rulersWrapper.style.height = _canvasArea.clientHeight + 'px';
+}
+
+function renderRulerH() {
+  if (!_rulerH || !_canvasArea || !_iframeContainer) return;
+
+  const canvas = _rulerH.querySelector('canvas');
+  const ctx = canvas.getContext('2d');
+  const zoom = getZoom();
+  const scrollLeft = _canvasArea.scrollLeft;
+  const width = _canvasArea.clientWidth;
+
+  canvas.width = width * 2;  // 2x for retina
+  canvas.height = RULER_SIZE * 2;
+  canvas.style.width = width + 'px';
+  canvas.style.height = RULER_SIZE + 'px';
+  ctx.scale(2, 2);
+
+  ctx.fillStyle = '#1c1c1e';
+  ctx.fillRect(0, 0, width, RULER_SIZE);
+
+  // Bottom border
+  ctx.strokeStyle = '#2a2a2e';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, RULER_SIZE - 0.5);
+  ctx.lineTo(width, RULER_SIZE - 0.5);
+  ctx.stroke();
+
+  // Container's layout origin (unaffected by CSS transform)
+  const originX = _iframeContainer.offsetLeft - scrollLeft;
+
+  // Determine tick interval based on zoom (adaptive)
+  let tickSmall = TICK_SMALL;
+  let tickLarge = TICK_LARGE;
+  if (zoom < 0.5) { tickSmall = 50; tickLarge = 200; }
+  else if (zoom < 0.8) { tickSmall = 20; tickLarge = 100; }
+  else if (zoom > 2) { tickSmall = 5; tickLarge = 50; }
+
+  // Calculate visible range in content pixels
+  const startPx = Math.floor(-originX / zoom / tickSmall) * tickSmall;
+  const endPx = Math.ceil((width - originX) / zoom / tickSmall) * tickSmall + tickSmall;
+
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'top';
+  ctx.font = '9px "DM Sans", system-ui, sans-serif';
+
+  for (let px = startPx; px <= endPx; px += tickSmall) {
+    const screenX = originX + px * zoom;
+    if (screenX < RULER_SIZE || screenX > width) continue;
+
+    const isLarge = px % tickLarge === 0;
+
+    ctx.strokeStyle = isLarge ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(Math.round(screenX) + 0.5, isLarge ? 2 : RULER_SIZE - 6);
+    ctx.lineTo(Math.round(screenX) + 0.5, RULER_SIZE - 1);
+    ctx.stroke();
+
+    if (isLarge && px >= 0) {
+      ctx.fillStyle = 'rgba(255,255,255,0.45)';
+      ctx.fillText(String(px), Math.round(screenX) + 3, 2);
+    }
+  }
+}
+
+function renderRulerV() {
+  if (!_rulerV || !_canvasArea || !_iframeContainer) return;
+
+  const canvas = _rulerV.querySelector('canvas');
+  const ctx = canvas.getContext('2d');
+  const zoom = getZoom();
+  const scrollTop = _canvasArea.scrollTop;
+  const height = _canvasArea.clientHeight;
+
+  canvas.width = RULER_SIZE * 2;
+  canvas.height = height * 2;
+  canvas.style.width = RULER_SIZE + 'px';
+  canvas.style.height = height + 'px';
+  ctx.scale(2, 2);
+
+  ctx.fillStyle = '#1c1c1e';
+  ctx.fillRect(0, 0, RULER_SIZE, height);
+
+  // Right border
+  ctx.strokeStyle = '#2a2a2e';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(RULER_SIZE - 0.5, 0);
+  ctx.lineTo(RULER_SIZE - 0.5, height);
+  ctx.stroke();
+
+  // Container's layout origin (unaffected by CSS transform)
+  const originY = _iframeContainer.offsetTop - scrollTop;
+
+  let tickSmall = TICK_SMALL;
+  let tickLarge = TICK_LARGE;
+  if (zoom < 0.5) { tickSmall = 50; tickLarge = 200; }
+  else if (zoom < 0.8) { tickSmall = 20; tickLarge = 100; }
+  else if (zoom > 2) { tickSmall = 5; tickLarge = 50; }
+
+  const startPx = Math.floor(-originY / zoom / tickSmall) * tickSmall;
+  const endPx = Math.ceil((height - originY) / zoom / tickSmall) * tickSmall + tickSmall;
+
+  ctx.font = '9px "DM Sans", system-ui, sans-serif';
+
+  for (let px = startPx; px <= endPx; px += tickSmall) {
+    const screenY = originY + px * zoom;
+    if (screenY < RULER_SIZE || screenY > height) continue;
+
+    const isLarge = px % tickLarge === 0;
+
+    ctx.strokeStyle = isLarge ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(isLarge ? 2 : RULER_SIZE - 6, Math.round(screenY) + 0.5);
+    ctx.lineTo(RULER_SIZE - 1, Math.round(screenY) + 0.5);
+    ctx.stroke();
+
+    if (isLarge && px >= 0) {
+      ctx.save();
+      ctx.fillStyle = 'rgba(255,255,255,0.45)';
+      ctx.translate(3, Math.round(screenY) + 3);
+      ctx.rotate(-Math.PI / 2);
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'top';
+      ctx.fillText(String(px), 0, 0);
+      ctx.restore();
+    }
+  }
+}
+
+function renderRulers() {
+  renderRulerH();
+  renderRulerV();
+}
+
+// ── Guide positioning ────────────────────────────────────────────────────────
+
+/**
+ * Get all .page elements from the iframe document and their top offsets.
+ */
+function _getPageOffsets() {
+  if (!_iframe || !_iframe.contentDocument) return [];
+  const pages = Array.from(_iframe.contentDocument.querySelectorAll('.page'));
+  return pages.map(p => ({ top: p.offsetTop, height: p.offsetHeight }));
+}
+
+/**
+ * Convert an absolute content Y position to a page-relative offset.
+ * Returns { pageRelativeY } — the Y offset within the page the guide lands on.
+ */
+function _toPageRelativeY(absoluteY, pages) {
+  for (let i = pages.length - 1; i >= 0; i--) {
+    if (absoluteY >= pages[i].top) {
+      return absoluteY - pages[i].top;
+    }
+  }
+  return absoluteY;
+}
+
+function positionGuide(guide) {
+  // Guides live inside #iframe-container, which has transform: scale(zoom).
+  // CSS transform makes the container a containing block for absolute children.
+  // So we position guides in RAW CONTENT PIXELS — no zoom math needed.
+  // The transform automatically scales them to match the content.
+
+  const contentW = _iframeContainer.offsetWidth;
+  const contentH = _iframeContainer.offsetHeight;
+
+  if (guide.axis === 'h') {
+    // In slide mode, repeat the guide on every page at the same page-relative Y
+    const pages = isSlideMode() ? _getPageOffsets() : [];
+    if (pages.length > 1) {
+      const pageRelY = _toPageRelativeY(guide.position, pages);
+
+      // Position the primary element on the first page
+      guide.element.style.top = (pages[0].top + pageRelY) + 'px';
+      guide.element.style.left = '0';
+      guide.element.style.width = contentW + 'px';
+      guide.element.style.height = '0';
+
+      _ensureExtraEls(guide, pages.length - 1);
+
+      for (let i = 1; i < pages.length; i++) {
+        const el = guide.extraEls[i - 1];
+        el.style.top = (pages[i].top + pageRelY) + 'px';
+        el.style.left = '0';
+        el.style.width = contentW + 'px';
+        el.style.height = '0';
+      }
+    } else {
+      guide.element.style.top = guide.position + 'px';
+      guide.element.style.left = '0';
+      guide.element.style.width = contentW + 'px';
+      guide.element.style.height = '0';
+      _clearExtraEls(guide);
+    }
+  } else {
+    guide.element.style.left = guide.position + 'px';
+    guide.element.style.top = '0';
+    guide.element.style.height = contentH + 'px';
+    guide.element.style.width = '0';
+    _clearExtraEls(guide);
+  }
+}
+
+/**
+ * Ensure a guide has the right number of extra (cloned) elements for multi-page display.
+ */
+function _ensureExtraEls(guide, count) {
+  if (!guide.extraEls) guide.extraEls = [];
+  // Add missing elements
+  while (guide.extraEls.length < count) {
+    const el = createGuideElement(guide.axis);
+    el.style.pointerEvents = 'none'; // only the primary is draggable
+    _guidesContainer.appendChild(el);
+    guide.extraEls.push(el);
+  }
+  // Remove surplus elements
+  while (guide.extraEls.length > count) {
+    const el = guide.extraEls.pop();
+    el.remove();
+  }
+}
+
+function _clearExtraEls(guide) {
+  if (!guide.extraEls) return;
+  guide.extraEls.forEach(el => el.remove());
+  guide.extraEls = [];
+}
+
+function repositionAllGuides() {
+  for (const g of _guides) positionGuide(g);
+}
+
+// ── Guide creation / removal ─────────────────────────────────────────────────
+
+function createGuideElement(axis) {
+  const el = document.createElement('div');
+  el.className = 'canvas-guide canvas-guide-' + axis;
+  el.style.position = 'absolute';
+  el.style.background = 'none';
+  el.style.zIndex = '9';
+  el.style.pointerEvents = 'all';
+  el.style.cursor = axis === 'h' ? 'row-resize' : 'col-resize';
+
+  // Thicker hit area via padding, visual line via dashed border
+  if (axis === 'h') {
+    el.style.height = '0';
+    el.style.borderTop = '1px dashed ' + GUIDE_COLOR;
+    el.style.padding = '3px 0';
+    el.style.marginTop = '-3px';
+  } else {
+    el.style.width = '0';
+    el.style.borderLeft = '1px dashed ' + GUIDE_COLOR;
+    el.style.padding = '0 3px';
+    el.style.marginLeft = '-3px';
+  }
+
+  return el;
+}
+
+function addGuide(axis, contentPx) {
+  const el = createGuideElement(axis);
+  const guide = { id: _nextGuideId++, axis, position: contentPx, element: el, extraEls: [] };
+  _guides.push(guide);
+  _guidesContainer.appendChild(el);
+  positionGuide(guide);
+
+  // Make guide draggable
+  el.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    el.setPointerCapture(e.pointerId);
+    _setGuideColor(guide, GUIDE_ACTIVE_COLOR);
+
+    const onMove = (me) => {
+      const zoom = getZoom();
+      const cBCR = _iframeContainer.getBoundingClientRect();
+
+      if (axis === 'h') {
+        guide.position = Math.round((me.clientY - cBCR.top) / zoom);
+        positionGuide(guide);
+      } else {
+        guide.position = Math.round((me.clientX - cBCR.left) / zoom);
+        positionGuide(guide);
+      }
+    };
+
+    const onUp = (ue) => {
+      el.releasePointerCapture(ue.pointerId);
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      _setGuideColor(guide, GUIDE_COLOR);
+
+      // If dragged back into ruler area, remove the guide
+      const canvasRect = _canvasArea.getBoundingClientRect();
+      if (axis === 'h' && ue.clientY < canvasRect.top + RULER_SIZE) {
+        removeGuide(guide);
+      } else if (axis === 'v' && ue.clientX < canvasRect.left + RULER_SIZE) {
+        removeGuide(guide);
+      }
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  });
+
+  return guide;
+}
+
+/**
+ * Set the border color on a guide's primary element and all its extra (repeated) elements.
+ */
+function _setGuideColor(guide, color) {
+  const prop = guide.axis === 'h' ? 'borderTopColor' : 'borderLeftColor';
+  guide.element.style[prop] = color;
+  if (guide.extraEls) {
+    guide.extraEls.forEach(el => { el.style[prop] = color; });
+  }
+}
+
+function removeGuide(guide) {
+  guide.element.remove();
+  _clearExtraEls(guide);
+  _guides = _guides.filter(g => g.id !== guide.id);
+}
+
+// ── Ruler drag-to-create ─────────────────────────────────────────────────────
+
+function initRulerDrag(rulerEl, axis) {
+  rulerEl.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    rulerEl.setPointerCapture(e.pointerId);
+
+    const zoom = getZoom();
+    const cBCR = _iframeContainer.getBoundingClientRect();
+
+    let contentPx;
+    if (axis === 'h') {
+      contentPx = Math.round((e.clientY - cBCR.top) / zoom);
+    } else {
+      contentPx = Math.round((e.clientX - cBCR.left) / zoom);
+    }
+
+    const guide = addGuide(axis, contentPx);
+    _setGuideColor(guide, GUIDE_ACTIVE_COLOR);
+
+    const onMove = (me) => {
+      const z = getZoom();
+      const bcr = _iframeContainer.getBoundingClientRect();
+
+      if (axis === 'h') {
+        guide.position = Math.round((me.clientY - bcr.top) / z);
+      } else {
+        guide.position = Math.round((me.clientX - bcr.left) / z);
+      }
+      positionGuide(guide);
+    };
+
+    const onUp = (ue) => {
+      rulerEl.releasePointerCapture(ue.pointerId);
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      _setGuideColor(guide, GUIDE_COLOR);
+
+      // If released still inside ruler area, remove (user didn't drag far enough)
+      const aRect = _canvasArea.getBoundingClientRect();
+      if (axis === 'h' && ue.clientY < aRect.top + RULER_SIZE + 5) {
+        removeGuide(guide);
+      } else if (axis === 'v' && ue.clientX < aRect.left + RULER_SIZE + 5) {
+        removeGuide(guide);
+      }
+    };
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+  });
+}
+
+// ── Toggle visibility ────────────────────────────────────────────────────────
+
+export function toggleGuides() {
+  _visible = !_visible;
+  const display = _visible ? '' : 'none';
+  if (_rulersWrapper) _rulersWrapper.style.display = display;
+  if (_guidesContainer) _guidesContainer.style.display = display;
+  return _visible;
+}
+
+// ── Initialization ───────────────────────────────────────────────────────────
+
+export function initGuides(canvasArea, iframeContainer, iframe) {
+  _canvasArea = canvasArea;
+  _iframeContainer = iframeContainer;
+  _iframe = iframe;
+
+  // Remove any existing rulers and guides (on reload)
+  canvasArea.querySelectorAll('.canvas-rulers-wrapper').forEach(el => el.remove());
+  // Guides container may be in canvas area (old) or iframe container (new)
+  canvasArea.querySelectorAll('.canvas-guides-container').forEach(el => el.remove());
+  iframeContainer.querySelectorAll('.canvas-guides-container').forEach(el => el.remove());
+
+  // Create non-scrolling wrapper for rulers (pinned to viewport via JS)
+  const rulersWrapper = document.createElement('div');
+  rulersWrapper.className = 'canvas-rulers-wrapper';
+  canvasArea.appendChild(rulersWrapper);
+  _rulersWrapper = rulersWrapper;
+
+  // Create corner piece
+  _rulerCorner = document.createElement('div');
+  _rulerCorner.className = 'canvas-ruler-corner';
+  rulersWrapper.appendChild(_rulerCorner);
+
+  // Create horizontal ruler
+  _rulerH = document.createElement('div');
+  _rulerH.className = 'canvas-ruler canvas-ruler-h';
+  _rulerH.innerHTML = '<canvas></canvas>';
+  rulersWrapper.appendChild(_rulerH);
+
+  // Create vertical ruler
+  _rulerV = document.createElement('div');
+  _rulerV.className = 'canvas-ruler canvas-ruler-v';
+  _rulerV.innerHTML = '<canvas></canvas>';
+  rulersWrapper.appendChild(_rulerV);
+
+  // Create guides container INSIDE the iframe container so guides are in
+  // the same transformed coordinate space as the content — no zoom math needed.
+  _guidesContainer = document.createElement('div');
+  _guidesContainer.className = 'canvas-guides-container';
+  iframeContainer.appendChild(_guidesContainer);
+
+  // Clear previous guides
+  _guides = [];
+
+  // Wire ruler drag-to-create
+  initRulerDrag(_rulerH, 'h');
+  initRulerDrag(_rulerV, 'v');
+
+  // Pin rulers to viewport and render
+  _pinRulersToViewport();
+  renderRulers();
+
+  // Remove old listeners before adding (prevent stacking on re-init)
+  if (_onScrollGuides && _canvasArea) _canvasArea.removeEventListener('scroll', _onScrollGuides);
+  if (_onZoomGuides) window.removeEventListener('hc:zoom-changed', _onZoomGuides);
+  if (_onResizeGuides) window.removeEventListener('resize', _onResizeGuides);
+
+  // Re-render rulers on scroll/zoom. Guides inside the iframe container
+  // are automatically repositioned by the CSS transform — no JS needed.
+  _onScrollGuides = () => { _pinRulersToViewport(); renderRulers(); };
+  _onZoomGuides   = () => { _pinRulersToViewport(); renderRulers(); repositionAllGuides(); };
+  _onResizeGuides = () => { _pinRulersToViewport(); renderRulers(); };
+
+  canvasArea.addEventListener('scroll', _onScrollGuides);
+  window.addEventListener('hc:zoom-changed', _onZoomGuides);
+  window.addEventListener('resize', _onResizeGuides);
+}

package/editor/history.js

@@ -0,0 +1,135 @@
+// editor/history.js — Command Pattern undo/redo stack
+//
+// Command interface contract:
+//   { execute(): void, undo(): void, description: string }
+//
+// All editing operations must be wrapped in a command and pushed via push().
+// This ensures all changes are undoable and the dirty flag is always accurate.
+
+import { recordDeletion, cancelDeletion } from './serializer.js';
+
+const MAX_HISTORY = 50;
+
+/** @type {Array<{execute(): void, undo(): void, description: string}>} */
+let _undoStack = [];
+
+/** @type {Array<{execute(): void, undo(): void, description: string}>} */
+let _redoStack = [];
+
+/** Index into _undoStack representing the last saved state. */
+let _savedIndex = 0;
+
+// ── Stack operations ─────────────────────────────────────────────────────────
+
+/**
+ * Executes a command and pushes it onto the undo stack.
+ * Clears the redo stack. Bounds the undo stack to MAX_HISTORY entries.
+ *
+ * @param {{execute(): void, undo(): void, description: string}} command
+ */
+export function push(command) {
+  command.execute();
+  _undoStack.push(command);
+  _redoStack = [];
+
+  // Bound undo stack to MAX_HISTORY entries
+  if (_undoStack.length > MAX_HISTORY) {
+    _undoStack.shift();
+    // Adjust savedIndex: if the oldest entry was popped, savedIndex shifts down
+    if (_savedIndex > 0) {
+      _savedIndex--;
+    }
+  }
+}
+
+/**
+ * Undoes the most recent command. No-op if the undo stack is empty.
+ * @returns {string|null} The command description, or null if nothing to undo.
+ */
+export function undo() {
+  if (_undoStack.length === 0) return null;
+  const command = _undoStack.pop();
+  command.undo();
+  _redoStack.push(command);
+  return command.description;
+}
+
+/**
+ * Redoes the most recently undone command. No-op if the redo stack is empty.
+ * @returns {string|null} The command description, or null if nothing to redo.
+ */
+export function redo() {
+  if (_redoStack.length === 0) return null;
+  const command = _redoStack.pop();
+  command.execute();
+  _undoStack.push(command);
+  return command.description;
+}
+
+// ── Dirty flag ───────────────────────────────────────────────────────────────
+
+/**
+ * Returns true if the current state differs from the last saved state.
+ *
+ * @returns {boolean}
+ */
+export function isDirty() {
+  return _undoStack.length !== _savedIndex;
+}
+
+/**
+ * Marks the current undo stack position as the saved state.
+ * Called by the save/export flow after a successful write.
+ */
+export function markSaved() {
+  _savedIndex = _undoStack.length;
+}
+
+/**
+ * Clears all undo/redo history and resets the dirty flag.
+ * Called when a new file is opened.
+ */
+export function clearHistory() {
+  _undoStack = [];
+  _redoStack = [];
+  _savedIndex = 0;
+}
+
+// ── Command factories ────────────────────────────────────────────────────────
+
+/**
+ * Creates a DeleteCommand for removing an element from the DOM.
+ *
+ * The command captures the element's parentElement and nextSibling at creation
+ * time so that undo() can re-insert the element at its original position.
+ *
+ * @param {string} hcId - The data-hc-id of the element to delete
+ * @param {Element} element - The DOM element to delete
+ * @returns {{execute(): void, undo(): void, description: string}}
+ */
+export function makeDeleteCommand(hcId, element) {
+  // Capture position at command-creation time (before execute)
+  const parent = element.parentElement;
+  const nextSibling = element.nextSibling;
+  const tagName = element.tagName.toLowerCase();
+
+  return {
+    description: `Delete <${tagName}>`,
+
+    execute() {
+      element.remove();
+      recordDeletion(hcId);
+      // Notify the selection module that the selection has been cleared
+      window.dispatchEvent(new CustomEvent('hc:selection-cleared'));
+      window.dispatchEvent(new CustomEvent('hc:layers-changed'));
+    },
+
+    undo() {
+      if (parent) {
+        parent.insertBefore(element, nextSibling);
+      }
+      cancelDeletion(hcId);
+      window.dispatchEvent(new CustomEvent('hc:layers-changed'));
+    }
+  };
+}