@ashraf_mizo/htmlcanvas 1.0.0

package/bin/cli.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+
+// CLI entry point for npx @ashraf_mizo/htmlcanvas
+// Starts the editor server and opens the browser
+
+import { fileURLToPath } from 'url';
+import path from 'path';
+import { fork } from 'child_process';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const serverPath = path.join(__dirname, '..', 'server.js');
+
+console.log('Starting HTMLCanvas editor...');
+
+const child = fork(serverPath, [], {
+  cwd: path.join(__dirname, '..'),
+  stdio: 'inherit'
+});
+
+child.on('error', (err) => {
+  console.error('Failed to start:', err.message);
+  process.exit(1);
+});
+
+// Forward termination signals
+process.on('SIGINT', () => child.kill('SIGINT'));
+process.on('SIGTERM', () => child.kill('SIGTERM'));

package/editor/alignment.js

@@ -0,0 +1,211 @@
+// editor/alignment.js — Alignment & distribution tools
+//
+// Exports:
+//   alignElements(elements, hcIds, direction, iframeDoc)
+//   distributeElements(elements, hcIds, axis, iframeDoc)
+//
+// Works with both single elements (align to parent) and multi-selection.
+// All changes go through the Command Pattern for undo/redo.
+
+import { push } from './history.js';
+import { recordChange } from './serializer.js';
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function getRect(el) {
+  return el.getBoundingClientRect();
+}
+
+function getParentRect(el) {
+  const parent = el.parentElement;
+  return parent ? parent.getBoundingClientRect() : { left: 0, top: 0, width: 1000, height: 1000, right: 1000, bottom: 1000 };
+}
+
+/**
+ * Snapshot inline positioning styles for undo.
+ */
+function snapPos(el) {
+  return {
+    left: el.style.left || '',
+    top: el.style.top || '',
+    transform: el.style.transform || '',
+  };
+}
+
+function restorePos(el, snap) {
+  if (snap.left) el.style.left = snap.left; else el.style.removeProperty('left');
+  if (snap.top) el.style.top = snap.top; else el.style.removeProperty('top');
+  if (snap.transform) el.style.transform = snap.transform; else el.style.removeProperty('transform');
+}
+
+/**
+ * Parse translate(Xpx, Ypx) from inline transform.
+ */
+function parseTranslate(el) {
+  const t = el.style.transform || '';
+  const m = t.match(/translate\(\s*(-?[\d.]+)px\s*,\s*(-?[\d.]+)px\s*\)/);
+  return m ? { x: parseFloat(m[1]), y: parseFloat(m[2]) } : { x: 0, y: 0 };
+}
+
+/**
+ * Sets only the translate portion of transform, preserving rotate/scale.
+ */
+function setTranslateOnly(el, tx, ty) {
+  let t = el.style.transform || '';
+  t = t.replace(/translate\([^)]*\)/g, '').trim();
+  const prefix = (tx !== 0 || ty !== 0) ? `translate(${tx}px, ${ty}px)` : '';
+  el.style.transform = [prefix, t].filter(Boolean).join(' ') || '';
+  if (!el.style.transform) el.style.removeProperty('transform');
+}
+
+/**
+ * Move element by delta pixels (adjusts translate).
+ */
+function moveBy(el, dx, dy) {
+  const cur = parseTranslate(el);
+  setTranslateOnly(el, cur.x + dx, cur.y + dy);
+}
+
+// ── Alignment ────────────────────────────────────────────────────────────────
+
+/**
+ * Aligns elements to a direction. If multiple elements, aligns to group bounds.
+ * If single element, aligns to parent bounds.
+ *
+ * @param {Element[]} elements
+ * @param {string[]}  hcIds
+ * @param {'left'|'center'|'right'|'top'|'middle'|'bottom'} direction
+ */
+export function alignElements(elements, hcIds, direction) {
+  if (!elements || elements.length === 0) return;
+
+  const befores = elements.map(el => snapPos(el));
+  const rects = elements.map(el => getRect(el));
+
+  let ref;
+  if (elements.length === 1) {
+    // Align to parent
+    ref = getParentRect(elements[0]);
+  } else {
+    // Align to group bounding box
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const r of rects) {
+      minX = Math.min(minX, r.left);
+      minY = Math.min(minY, r.top);
+      maxX = Math.max(maxX, r.right);
+      maxY = Math.max(maxY, r.bottom);
+    }
+    ref = { left: minX, top: minY, right: maxX, bottom: maxY, width: maxX - minX, height: maxY - minY };
+  }
+
+  for (let i = 0; i < elements.length; i++) {
+    const el = elements[i];
+    const r = rects[i];
+    let dx = 0, dy = 0;
+
+    switch (direction) {
+      case 'left':   dx = ref.left - r.left; break;
+      case 'center': dx = (ref.left + ref.width / 2) - (r.left + r.width / 2); break;
+      case 'right':  dx = ref.right - r.right; break;
+      case 'top':    dy = ref.top - r.top; break;
+      case 'middle': dy = (ref.top + ref.height / 2) - (r.top + r.height / 2); break;
+      case 'bottom': dy = ref.bottom - r.bottom; break;
+    }
+
+    if (dx !== 0 || dy !== 0) moveBy(el, dx, dy);
+  }
+
+  const afters = elements.map(el => snapPos(el));
+
+  const cmd = {
+    description: `Align ${direction}`,
+    execute() {
+      for (let i = 0; i < elements.length; i++) {
+        restorePos(elements[i], afters[i]);
+        recordChange(hcIds[i], elements[i].outerHTML);
+      }
+    },
+    undo() {
+      for (let i = 0; i < elements.length; i++) {
+        restorePos(elements[i], befores[i]);
+        recordChange(hcIds[i], elements[i].outerHTML);
+      }
+    }
+  };
+
+  // Already applied, so push without re-executing
+  // push() calls execute() which re-applies (harmless no-op since styles are already set)
+  push(cmd);
+}
+
+// ── Distribution ────────────────────────────────────────────────────────────
+
+/**
+ * Distributes elements evenly along an axis.
+ * Requires 3+ elements for meaningful distribution.
+ *
+ * @param {Element[]} elements
+ * @param {string[]}  hcIds
+ * @param {'horizontal'|'vertical'} axis
+ */
+export function distributeElements(elements, hcIds, axis) {
+  if (!elements || elements.length < 3) return;
+
+  const befores = elements.map(el => snapPos(el));
+  const rects = elements.map(el => getRect(el));
+
+  // Sort by position along axis
+  const indexed = rects.map((r, i) => ({ r, i }));
+  if (axis === 'horizontal') {
+    indexed.sort((a, b) => a.r.left - b.r.left);
+  } else {
+    indexed.sort((a, b) => a.r.top - b.r.top);
+  }
+
+  const first = indexed[0].r;
+  const last = indexed[indexed.length - 1].r;
+
+  if (axis === 'horizontal') {
+    const totalWidth = indexed.reduce((s, { r }) => s + r.width, 0);
+    const totalSpace = (last.right - first.left) - totalWidth;
+    const gap = totalSpace / (elements.length - 1);
+
+    let cursor = first.left;
+    for (const { r, i } of indexed) {
+      const dx = cursor - r.left;
+      if (dx !== 0) moveBy(elements[i], dx, 0);
+      cursor += r.width + gap;
+    }
+  } else {
+    const totalHeight = indexed.reduce((s, { r }) => s + r.height, 0);
+    const totalSpace = (last.bottom - first.top) - totalHeight;
+    const gap = totalSpace / (elements.length - 1);
+
+    let cursor = first.top;
+    for (const { r, i } of indexed) {
+      const dy = cursor - r.top;
+      if (dy !== 0) moveBy(elements[i], 0, dy);
+      cursor += r.height + gap;
+    }
+  }
+
+  const afters = elements.map(el => snapPos(el));
+
+  const cmd = {
+    description: `Distribute ${axis}`,
+    execute() {
+      for (let i = 0; i < elements.length; i++) {
+        restorePos(elements[i], afters[i]);
+        recordChange(hcIds[i], elements[i].outerHTML);
+      }
+    },
+    undo() {
+      for (let i = 0; i < elements.length; i++) {
+        restorePos(elements[i], befores[i]);
+        recordChange(hcIds[i], elements[i].outerHTML);
+      }
+    }
+  };
+
+  push(cmd);
+}