@ashraf_mizo/htmlcanvas 1.0.0

package/editor/layers.js

@@ -0,0 +1,389 @@
+// editor/layers.js — Layer manager panel (right sidebar)
+//
+// Exports:
+//   initLayers(iframe, iframeDoc, canvasArea)  — set up layer panel after iframe-ready
+//   buildLayerTree(iframeDoc, panelBody)        — populate layer panel from DOM
+//   makeZIndexCommand(element, hcId, oldZ, newZ) — Command factory for z-index reorder
+//   getTopZIndex(parent)                         — returns highest z-index + 1 among siblings
+//   notifyLayersChanged()                        — dispatches event to rebuild layer tree
+//
+// SortableJS is expected as window.Sortable (loaded via <script> tag before editor.js).
+
+import { push } from './history.js';
+import { recordChange } from './serializer.js';
+
+// ── Module state ──────────────────────────────────────────────────────────────
+
+let _iframeDoc = null;
+let _rightContainer = null;
+
+// Lock/hide state maps (keyed by hcId)
+const _lockedElements = new Set();
+const _hiddenElements = new Set();
+
+/**
+ * Returns true if an element is locked (non-selectable, non-draggable).
+ */
+export function isLocked(hcId) {
+  return _lockedElements.has(hcId);
+}
+
+/**
+ * Returns true if an element is hidden.
+ */
+export function isHidden(hcId) {
+  return _hiddenElements.has(hcId);
+}
+
+/**
+ * Toggles lock state on an element.
+ */
+export function toggleLock(hcId) {
+  if (_lockedElements.has(hcId)) _lockedElements.delete(hcId);
+  else _lockedElements.add(hcId);
+}
+
+/**
+ * Toggles visibility on an element.
+ */
+export function toggleHide(hcId, iframeDoc) {
+  if (_hiddenElements.has(hcId)) {
+    _hiddenElements.delete(hcId);
+    const el = iframeDoc?.querySelector(`[data-hc-id="${hcId}"]`);
+    if (el) el.style.visibility = '';
+  } else {
+    _hiddenElements.add(hcId);
+    const el = iframeDoc?.querySelector(`[data-hc-id="${hcId}"]`);
+    if (el) el.style.visibility = 'hidden';
+  }
+}
+
+// ── Layer ordering helpers ────────────────────────────────────────────────────
+
+/**
+ * Scans all direct children of a parent element and returns the highest
+ * z-index + 1. Used by insert/paste commands to place new elements on top.
+ */
+export function getTopZIndex(parent) {
+  if (!parent) return 1;
+  let max = 0;
+  for (const child of parent.children) {
+    const z = parseInt(child.style.zIndex, 10);
+    if (!isNaN(z) && z > max) max = z;
+  }
+  return max + 1;
+}
+
+/**
+ * Dispatches an event that triggers a layer tree rebuild.
+ * Call after any DOM insertion, deletion, or reorder.
+ */
+export function notifyLayersChanged() {
+  window.dispatchEvent(new CustomEvent('hc:layers-changed'));
+}
+
+// ── Label builder ─────────────────────────────────────────────────────────────
+
+/**
+ * Returns a friendly display label for a DOM element.
+ * Priority: tag-specific labels > class name > tag name
+ */
+function buildLabel(element) {
+  const tag = element.tagName.toLowerCase();
+
+  // Tag-specific friendly names
+  if (tag === 'img') {
+    const alt = element.getAttribute('alt');
+    if (alt) return `Image: ${alt.slice(0, 20)}`;
+    const src = element.getAttribute('src') || '';
+    const filename = src.split('/').pop().split('?')[0];
+    return filename ? `Image: ${filename.slice(0, 20)}` : 'Image';
+  }
+  if (tag === 'svg') return 'Shape';
+  if (tag === 'video') return 'Video';
+  if (tag === 'iframe') return 'Embed';
+  if (tag === 'a') return 'Link';
+  if (tag === 'ul' || tag === 'ol') return 'List';
+  if (tag === 'table') return 'Table';
+  if (tag === 'hr') return 'Divider';
+
+  // Text elements: show truncated text content
+  if (tag === 'h1' || tag === 'h2' || tag === 'h3' || tag === 'h4' || tag === 'h5' || tag === 'h6') {
+    const text = element.textContent.trim().slice(0, 24);
+    return text ? `${tag.toUpperCase()}: ${text}` : tag.toUpperCase();
+  }
+  if (tag === 'p' || tag === 'span' || tag === 'em' || tag === 'strong') {
+    const text = element.textContent.trim().slice(0, 24);
+    if (text) return text;
+  }
+
+  // Class-based labels (first meaningful class)
+  if (element.classList && element.classList.length > 0) {
+    const cls = element.classList[0];
+    // Convert class to readable name: "heading-xl" -> "Heading Xl"
+    const readable = cls.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    return readable;
+  }
+
+  return `<${tag}>`;
+}
+
+// ── Recursive tree builder ────────────────────────────────────────────────────
+
+/**
+ * Recursively builds layer items for an element's children.
+ * Only includes elements with a data-hc-id attribute.
+ */
+function buildChildItems(parentElement, listEl, depth) {
+  const allChildren = Array.from(parentElement.children)
+    .filter(c => c.getAttribute('data-hc-id'));
+
+  // Sort by z-index descending (highest = front = top of list).
+  // When z-index is equal or unset, later DOM order = on top (CSS paint order).
+  const children = allChildren.sort((a, b) => {
+    const zA = parseInt(a.style.zIndex, 10);
+    const zB = parseInt(b.style.zIndex, 10);
+    const hasA = !isNaN(zA);
+    const hasB = !isNaN(zB);
+
+    // Both have z-index: sort descending
+    if (hasA && hasB) {
+      if (zB !== zA) return zB - zA;
+      // Same z-index: later DOM order = higher
+      return allChildren.indexOf(b) - allChildren.indexOf(a);
+    }
+    // Only one has z-index: it wins
+    if (hasA && !hasB) return -1;
+    if (!hasA && hasB) return 1;
+    // Neither has z-index: later DOM order = higher (on top)
+    return allChildren.indexOf(b) - allChildren.indexOf(a);
+  });
+
+  for (const child of children) {
+    const hcId = child.getAttribute('data-hc-id');
+    const label = buildLabel(child);
+    const z = child.style.zIndex;
+
+    const li = document.createElement('li');
+    li.className = 'layer-item';
+    li.dataset.layerHcid = hcId;
+    li.style.paddingLeft = `${8 + depth * 12}px`;
+    li.title = label + (z ? ` (z: ${z})` : '');
+
+    // Label span
+    const labelSpan = document.createElement('span');
+    labelSpan.className = 'layer-item-label';
+    labelSpan.textContent = label;
+    li.appendChild(labelSpan);
+
+    // Hide toggle
+    const hideBtn = document.createElement('button');
+    hideBtn.className = 'layer-toggle' + (_hiddenElements.has(hcId) ? ' active' : '');
+    hideBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+    hideBtn.title = 'Toggle visibility';
+    hideBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleHide(hcId, _iframeDoc);
+      hideBtn.classList.toggle('active');
+    });
+    li.appendChild(hideBtn);
+
+    // Lock toggle
+    const lockBtn = document.createElement('button');
+    lockBtn.className = 'layer-toggle' + (_lockedElements.has(hcId) ? ' active' : '');
+    lockBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
+    lockBtn.title = 'Toggle lock';
+    lockBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleLock(hcId);
+      lockBtn.classList.toggle('active');
+    });
+    li.appendChild(lockBtn);
+
+    listEl.appendChild(li);
+
+    if (child.children.length > 0) {
+      buildChildItems(child, listEl, depth + 1);
+    }
+  }
+}
+
+// ── Public: buildLayerTree ────────────────────────────────────────────────────
+
+/**
+ * Clears the container and populates it with the layer tree from iframeDoc.
+ * For slide decks: grouped by slide with collapsible <details>.
+ * For regular HTML: flat list from body children.
+ */
+export function buildLayerTree(iframeDoc, container) {
+  _iframeDoc = iframeDoc;
+  container.innerHTML = '';
+
+  const pages = iframeDoc.querySelectorAll('.page');
+
+  if (pages.length > 0) {
+    pages.forEach((page, idx) => {
+      const details = document.createElement('details');
+      details.open = true;
+      details.className = 'layer-group';
+
+      const summary = document.createElement('summary');
+      summary.className = 'layer-group-label';
+      summary.textContent = `Slide ${idx + 1}`;
+      details.appendChild(summary);
+
+      const ul = document.createElement('ul');
+      ul.className = 'layer-list';
+      buildChildItems(page, ul, 0);
+      details.appendChild(ul);
+
+      container.appendChild(details);
+    });
+  } else {
+    const ul = document.createElement('ul');
+    ul.className = 'layer-list';
+    if (iframeDoc.body) {
+      buildChildItems(iframeDoc.body, ul, 0);
+    }
+    container.appendChild(ul);
+  }
+}
+
+// ── Public: makeZIndexCommand ─────────────────────────────────────────────────
+
+export function makeZIndexCommand(element, hcId, oldZ, newZ) {
+  return {
+    description: 'Reorder layer',
+    execute() {
+      element.style.zIndex = String(newZ);
+      recordChange(hcId, element.outerHTML);
+    },
+    undo() {
+      if (!oldZ || oldZ === '') {
+        element.style.removeProperty('z-index');
+      } else {
+        element.style.zIndex = oldZ;
+      }
+      recordChange(hcId, element.outerHTML);
+    }
+  };
+}
+
+// ── Public: initLayers ────────────────────────────────────────────────────────
+
+export function initLayers(iframe, iframeDoc, canvasArea) {
+  _rightContainer = document.querySelector('.panel-section-right-layers');
+  if (!_rightContainer) return;
+
+  // Build the initial tree
+  buildLayerTree(iframeDoc, _rightContainer);
+
+  // ── Click layer item to select element ────────────────────────────────────
+  _rightContainer.addEventListener('click', (e) => {
+    // Don't handle clicks on toggle buttons
+    if (e.target.closest('.layer-toggle')) return;
+
+    const item = e.target.closest('.layer-item');
+    if (!item) return;
+
+    const hcId = item.dataset.layerHcid;
+    if (!hcId || !_iframeDoc) return;
+
+    // Locked elements can still be selected from layers panel (for inspection)
+    const el = _iframeDoc.querySelector(`[data-hc-id="${hcId}"]`);
+    if (!el) return;
+
+    window.dispatchEvent(new CustomEvent('hc:select-request', {
+      detail: { hcId, element: el }
+    }));
+  });
+
+  // ── Selection sync: highlight active layer ────────────────────────────────
+  window.addEventListener('hc:selection-changed', (e) => {
+    const { hcId } = e.detail || {};
+
+    _rightContainer.querySelectorAll('.layer-item.active').forEach(el => {
+      el.classList.remove('active');
+    });
+
+    if (!hcId) return;
+
+    const item = _rightContainer.querySelector(`[data-layer-hcid="${hcId}"]`);
+    if (item) {
+      item.classList.add('active');
+      // Scroll only within the right panel — do NOT use scrollIntoView() as it
+      // can scroll the canvas area when the panel has no independent scroll context.
+      const itemTop    = item.offsetTop;
+      const itemBottom = itemTop + item.offsetHeight;
+      const panelTop    = _rightContainer.scrollTop;
+      const panelBottom = panelTop + _rightContainer.clientHeight;
+      if (itemTop < panelTop) {
+        _rightContainer.scrollTop = itemTop - 4;
+      } else if (itemBottom > panelBottom) {
+        _rightContainer.scrollTop = itemBottom - _rightContainer.clientHeight + 4;
+      }
+    }
+  });
+
+  window.addEventListener('hc:selection-cleared', () => {
+    _rightContainer.querySelectorAll('.layer-item.active').forEach(el => {
+      el.classList.remove('active');
+    });
+  });
+
+  // ── SortableJS on each .layer-list ────────────────────────────────────────
+  _initSortable(_rightContainer, iframeDoc);
+
+  // ── Rebuild on DOM changes ────────────────────────────────────────────────
+  window.addEventListener('hc:element-moved', () => {
+    buildLayerTree(iframeDoc, _rightContainer);
+    _initSortable(_rightContainer, iframeDoc);
+  });
+
+  window.addEventListener('hc:layers-changed', () => {
+    buildLayerTree(iframeDoc, _rightContainer);
+    _initSortable(_rightContainer, iframeDoc);
+  });
+}
+
+// ── Internal: SortableJS init ─────────────────────────────────────────────────
+
+function _initSortable(container, iframeDoc) {
+  if (typeof window.Sortable === 'undefined') {
+    console.warn('layers.js: SortableJS not loaded.');
+    return;
+  }
+
+  const lists = container.querySelectorAll('.layer-list');
+  lists.forEach((ul) => {
+    window.Sortable.create(ul, {
+      animation: 150,
+      ghostClass: 'sortable-ghost',
+      chosenClass: 'sortable-chosen',
+
+      onEnd(evt) {
+        const { oldIndex, newIndex } = evt;
+        if (oldIndex === newIndex) return;
+
+        const items = ul.querySelectorAll('.layer-item');
+        const total = items.length;
+
+        items.forEach((item, i) => {
+          const hcId = item.dataset.layerHcid;
+          if (!hcId || !_iframeDoc) return;
+
+          const el = _iframeDoc.querySelector(`[data-hc-id="${hcId}"]`);
+          if (!el) return;
+
+          const newZ = total - i;
+          const oldZ = el.style.zIndex || '';
+
+          if (i === newIndex) {
+            const cmd = makeZIndexCommand(el, hcId, oldZ, String(newZ));
+            push(cmd);
+          }
+        });
+      }
+    });
+  });
+}

package/editor/logo-final.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 92">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Podkova:wght@700&amp;display=swap');
+    </style>
+  </defs>
+
+  <!-- Icon: 48x48, centred horizontally -->
+  <svg x="76" y="0" width="48" height="48" viewBox="0 0 80 78">
+    <g transform="translate(20, 8)">
+      <g transform="translate(8, 36) rotate(12)">
+        <rect x="-8" y="-36" width="16" height="72" rx="5" fill="#000"/>
+      </g>
+      <rect x="22" y="32" width="36" height="12" rx="4" fill="#000"/>
+      <circle cx="29.5" cy="55" r="7.5" fill="#000"/>
+    </g>
+  </svg>
+
+  <!-- Typography: 8px gap after icon -->
+  <text x="100" y="82" text-anchor="middle" font-family="'Podkova', serif" font-weight="700" font-size="32" letter-spacing="-0.5" fill="#000">Ashraf<tspan fill="#E87420">.</tspan>Builds</text>
+</svg>

package/editor/logo-toolbar.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 92">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Podkova:wght@700&amp;display=swap');
+    </style>
+  </defs>
+
+  <!-- Icon: 48x48, centred horizontally -->
+  <svg x="76" y="0" width="48" height="48" viewBox="0 0 80 78">
+    <g transform="translate(20, 8)">
+      <g transform="translate(8, 36) rotate(12)">
+        <rect x="-8" y="-36" width="16" height="72" rx="5" fill="#E87420"/>
+      </g>
+      <rect x="22" y="32" width="36" height="12" rx="4" fill="#E87420"/>
+      <circle cx="29.5" cy="55" r="7.5" fill="#E87420"/>
+    </g>
+  </svg>
+
+  <!-- Typography -->
+  <text x="100" y="82" text-anchor="middle" font-family="'Podkova', serif" font-weight="700" font-size="32" letter-spacing="-0.5" fill="#fff">Ashraf<tspan fill="#E87420">.</tspan>Builds</text>
+</svg>