symbiote-ui 0.3.0-alpha.4

package/canvas/FrameManager.js

@@ -0,0 +1,223 @@
+/* eslint-env browser */
+/**
+ * FrameManager.js
+ *
+ * Handles DOM creation, dragging, resizing, and child node containment
+ * for GraphFrame elements on the canvas.
+ *
+ * @module symbiote-node/canvas/FrameManager
+ */
+
+import { Drag } from '../interactions/Drag.js';
+
+export class FrameManager {
+  /** @type {Map<string, HTMLElement>} */
+  #frameViews = new Map();
+
+  /** @type {Map<string, HTMLElement>} */
+  #nodeViews;
+
+  /** @type {import('../core/Editor.js').NodeEditor} */
+  #editor;
+
+  /** @type {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} */
+  #canvas;
+
+  /** @type {function} */
+  #setNodePosition;
+
+  /**
+   * @param {object} options
+   * @param {Map<string, HTMLElement>} options.nodeViews
+   * @param {import('../core/Editor.js').NodeEditor} options.editor
+   * @param {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} options.canvas
+   * @param {function(string, number, number): void} options.setNodePosition
+   */
+  constructor({ nodeViews, editor, canvas, setNodePosition }) {
+    this.#nodeViews = nodeViews;
+    this.#editor = editor;
+    this.#canvas = canvas;
+    this.#setNodePosition = setNodePosition;
+  }
+
+  /**
+   * Remove all frame views and destroy their interactions
+   */
+  clear() {
+    for (const [, el] of this.#frameViews) {
+      if (el._drag) el._drag.destroy();
+      if (el._resizeDrag) el._resizeDrag.destroy();
+      el.remove();
+    }
+    this.#frameViews.clear();
+  }
+
+  /**
+   * Set frame position
+   * @param {string} frameId
+   * @param {number} x
+   * @param {number} y
+   */
+  setPosition(frameId, x, y) {
+    let el = this.#frameViews.get(frameId);
+    if (!el) return;
+    el.style.transform = `translate(${x}px, ${y}px)`;
+    el._position = { x, y };
+    let frame = this.#editor?.getFrame(frameId);
+    if (frame) {
+      frame.x = x;
+      frame.y = y;
+    }
+  }
+
+  /**
+   * Set frame size
+   * @param {string} frameId
+   * @param {number} w
+   * @param {number} h
+   */
+  setSize(frameId, w, h) {
+    let el = this.#frameViews.get(frameId);
+    if (!el) return;
+    el.style.width = `${w}px`;
+    el.style.height = `${h}px`;
+    let frame = this.#editor?.getFrame(frameId);
+    if (frame) {
+      frame.width = w;
+      frame.height = h;
+    }
+  }
+
+  /**
+   * Get node IDs that are spatially inside a frame
+   * @param {string} frameId
+   * @returns {string[]}
+   */
+  #getNodesInFrame(frameId) {
+    let el = this.#frameViews.get(frameId);
+    if (!el) return [];
+    let fp = el._position;
+    let fw = parseFloat(el.style.width) || el._frameData?.width || 400;
+    let fh = parseFloat(el.style.height) || el._frameData?.height || 300;
+    let ids = [];
+    for (const [nodeId, nodeEl] of this.#nodeViews) {
+      let np = nodeEl._position;
+      if (np && np.x >= fp.x && np.y >= fp.y && np.x <= fp.x + fw && np.y <= fp.y + fh) {
+        ids.push(nodeId);
+      }
+    }
+    return ids;
+  }
+
+  /**
+   * Create frame DOM element with drag and resize
+   * @param {import('../core/Frame.js').Frame} frame
+   */
+  addView(frame) {
+    let el = document.createElement('graph-frame');
+    el.style.position = 'absolute';
+    el.style.width = `${frame.width}px`;
+    el.style.height = `${frame.height}px`;
+    el.style.transform = `translate(${frame.x}px, ${frame.y}px)`;
+    el._position = { x: frame.x, y: frame.y };
+    el._frameData = frame;
+    el.setAttribute('frame-id', frame.id);
+
+
+    el.style.setProperty('--frame-color', frame.color);
+
+
+    requestAnimationFrame(() => {
+      if (el.$) {
+        el.$.label = frame.label;
+        el.$.color = frame.color;
+      } else {
+
+        let labelEl = el.querySelector('.sn-frame-label');
+        if (labelEl) labelEl.textContent = frame.label;
+      }
+    });
+
+
+    let drag = new Drag();
+    let childStartPositions = null;
+    let frameStartPos = null;
+
+    drag.initialize(
+      el,
+      {
+        getPosition: () => el._position,
+        getZoom: () => this.#canvas.$.zoom,
+      },
+      {
+        onStart: () => {
+          frameStartPos = { ...el._position };
+
+          let nodeIds = this.#getNodesInFrame(frame.id);
+          childStartPositions = new Map();
+          for (const nid of nodeIds) {
+            let nel = this.#nodeViews.get(nid);
+            if (nel && nel._position) childStartPositions.set(nid, { ...nel._position });
+          }
+        },
+        onTranslate: (x, y) => {
+
+          if (childStartPositions && frameStartPos) {
+            let dx = x - frameStartPos.x;
+            let dy = y - frameStartPos.y;
+            for (const [nid, startPos] of childStartPositions) {
+              this.#setNodePosition(nid, startPos.x + dx, startPos.y + dy);
+            }
+          }
+          this.setPosition(frame.id, x, y);
+        },
+        onDrop: () => {
+          childStartPositions = null;
+          frameStartPos = null;
+        },
+      }
+    );
+    el._drag = drag;
+
+
+    requestAnimationFrame(() => {
+      let handle = el.ref?.resizeHandle;
+      if (handle) {
+        let resizeDrag = new Drag();
+        resizeDrag.initialize(
+          handle,
+          {
+            getPosition: () => ({ x: frame.width, y: frame.height }),
+            getZoom: () => this.#canvas.$.zoom,
+          },
+          {
+            onTranslate: (x, y) => {
+              let w = Math.max(120, x);
+              let h = Math.max(80, y);
+              this.setSize(frame.id, w, h);
+            },
+          }
+        );
+        el._resizeDrag = resizeDrag;
+      }
+    });
+
+    this.#canvas.ref.framesLayer.appendChild(el);
+    this.#frameViews.set(frame.id, el);
+  }
+
+  /**
+   * Remove frame DOM element
+   * @param {import('../core/Frame.js').Frame} frame
+   */
+  removeView(frame) {
+    let el = this.#frameViews.get(frame.id);
+    if (!el) return;
+    if (el._drag) el._drag.destroy();
+    if (el._resizeDrag) el._resizeDrag.destroy();
+    el.remove();
+    this.#frameViews.delete(frame.id);
+  }
+}
+
+export { FrameManager as default };

package/canvas/GraphExplorerShell/GraphExplorerShell.css.js

@@ -0,0 +1,136 @@
+export default /*css*/ `
+graph-explorer-shell {
+  display: block;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: var(--sn-bg);
+  contain: strict;
+}
+
+graph-explorer-shell .graph-explorer-canvas-layer,
+graph-explorer-shell node-canvas,
+graph-explorer-shell canvas-graph {
+  width: 100%;
+  height: 100%;
+}
+
+graph-explorer-shell > [slot="canvas"],
+graph-explorer-shell > .graph-explorer-canvas-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+graph-explorer-shell > [slot="overlay"] {
+  position: absolute;
+  inset: 0;
+  z-index: var(--sn-graph-explorer-overlay-z);
+  pointer-events: none;
+}
+
+graph-explorer-shell > dialog[slot="overlay"][open],
+graph-explorer-shell > [slot="overlay"][data-interactive] {
+  pointer-events: auto;
+}
+
+graph-explorer-shell node-canvas[hidden],
+graph-explorer-shell canvas-graph[hidden] {
+  display: none;
+}
+
+graph-explorer-shell .graph-explorer-toolbar {
+  position: absolute;
+  top: var(--sn-graph-explorer-toolbar-top);
+  right: var(--sn-graph-explorer-toolbar-right);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--sn-graph-explorer-toolbar-gap);
+  z-index: var(--sn-graph-explorer-toolbar-z);
+  max-width: calc(100% - 16px);
+}
+
+graph-explorer-shell .graph-explorer-btn {
+  min-width: 0;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid var(--sn-node-border);
+  border-radius: 3px;
+  background: var(--sn-node-bg);
+  color: var(--sn-text);
+  cursor: pointer;
+  font-family: var(--sn-font);
+  font-size: 10px;
+  white-space: nowrap;
+  transition: background 150ms, border-color 150ms;
+}
+
+graph-explorer-shell .graph-explorer-btn:focus-visible,
+graph-explorer-shell .graph-explorer-icon-btn:focus-visible {
+  outline: 2px solid var(--sn-node-selected);
+  outline-offset: 2px;
+}
+
+graph-explorer-shell .graph-explorer-btn:hover {
+  background: var(--sn-node-hover);
+}
+
+graph-explorer-shell .graph-explorer-btn[data-active] {
+  border-color: var(--sn-node-selected);
+  background: var(--sn-accent-bg-subtle);
+}
+
+graph-explorer-shell .graph-explorer-btn .material-symbols-outlined {
+  font-size: 14px;
+}
+
+graph-explorer-shell .graph-explorer-toolbar-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 0 4px;
+  background: var(--sn-node-border);
+}
+
+graph-explorer-shell .graph-explorer-layer-btn {
+  padding: 3px 6px;
+  font-size: 9px;
+  opacity: 0.7;
+}
+
+graph-explorer-shell .graph-explorer-layer-btn[data-active] {
+  opacity: 1;
+}
+
+graph-explorer-shell .graph-explorer-layer-btn[data-hidden] {
+  opacity: 0.3;
+  text-decoration: line-through;
+}
+
+graph-explorer-shell .graph-explorer-stats {
+  position: absolute;
+  bottom: var(--sn-graph-explorer-stats-bottom);
+  left: var(--sn-graph-explorer-stats-left);
+  display: flex;
+  gap: 12px;
+  z-index: var(--sn-graph-explorer-stats-z);
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px 10px;
+  border: 1px solid var(--sn-node-border);
+  border-radius: 3px;
+  background: var(--sn-bg-overlay);
+  color: var(--sn-text-dim);
+  font-family: var(--sn-font);
+  font-size: 10px;
+}
+
+graph-explorer-shell .graph-explorer-stat-val {
+  color: var(--sn-text);
+  font-weight: 600;
+}
+`;

package/canvas/GraphExplorerShell/GraphExplorerShell.js

@@ -0,0 +1,129 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './GraphExplorerShell.tpl.js';
+import css from './GraphExplorerShell.css.js';
+import {
+  getNextGraphPathStyle,
+  renderGraphPathStyleButton,
+} from '../graph-explorer.js';
+
+export class GraphExplorerShell extends Symbiote {
+  init$ = {
+    mode: 'structured',
+    pathStyle: 'pcb',
+  };
+
+  constructor() {
+    super();
+    this._mode = 'structured';
+    this._pathStyle = 'pcb';
+    this.templateProcessors.add(slotProcessor);
+  }
+
+  renderCallback() {
+    if (this._shellReady) return;
+    this._shellReady = true;
+    this.addEventListener('click', this._onShellClick);
+  }
+
+  _onShellClick = (event) => {
+    const button = event.target?.closest?.('[data-action], [data-mode], [data-layer]');
+    if (!button || !this.contains(button)) return;
+
+    const mode = button.getAttribute('data-mode');
+    if (mode) {
+      this.emitShellEvent('graph-shell-label-mode-change', { mode });
+      return;
+    }
+
+    const layer = button.getAttribute('data-layer');
+    if (layer) {
+      const visible = !button.hasAttribute('data-hidden');
+      this.emitShellEvent('graph-shell-layer-toggle', { layer, visible });
+      return;
+    }
+
+    const action = button.getAttribute('data-action');
+    if (action === 'view-mode') {
+      const mode = this._mode === 'flat' ? 'structured' : 'flat';
+      this.setMode(mode);
+      this.emitShellEvent('graph-shell-mode-change', { mode });
+      return;
+    }
+
+    if (action === 'path-style') {
+      const style = getNextGraphPathStyle(this._pathStyle);
+      this.setPathStyle(style);
+      this.emitShellEvent('graph-shell-path-style-change', { style });
+      return;
+    }
+
+    if (action) {
+      this.emitShellEvent('graph-shell-action', { action });
+    }
+  };
+
+  emitShellEvent(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+
+  setMode(mode) {
+    const normalized = mode === 'flat' ? 'flat' : 'structured';
+    this._mode = normalized;
+    this.$.mode = normalized;
+    this.setAttribute('data-mode', normalized);
+
+    const hideStructuredOnly = normalized === 'flat';
+    this.querySelectorAll('.graph-explorer-structured-only').forEach((element) => {
+      element.hidden = hideStructuredOnly;
+    });
+    const hideFlatOnly = normalized !== 'flat';
+    this.querySelectorAll('.graph-explorer-flat-only').forEach((element) => {
+      element.hidden = hideFlatOnly;
+    });
+  }
+
+  setPathStyle(style) {
+    this._pathStyle = style || 'pcb';
+    this.$.pathStyle = this._pathStyle;
+    renderGraphPathStyleButton(this.querySelector('[data-action="path-style"]'), this._pathStyle);
+  }
+
+  setLoading({ visible, pct = 0, phase = '', sub = '' } = {}) {
+    const loader = this.querySelector('sn-loading-overlay, loading-overlay');
+    if (!loader) return;
+    loader.setProgress?.(pct, phase, sub);
+    if (visible === false) {
+      loader.hide?.();
+    } else if (visible === true) {
+      loader.show?.();
+    }
+  }
+
+  setStats(items = []) {
+    const stats = this.querySelector('.graph-explorer-stats');
+    if (!stats) return;
+    stats.textContent = items
+      .map((item) => `${item.value ?? ''} ${item.label ?? ''}`.trim())
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  setToolbarConfig(config = {}) {
+    this._toolbarConfig = config;
+  }
+
+  getNodeCanvas() {
+    return this.querySelector('node-canvas');
+  }
+
+  getCanvasGraph() {
+    return this.querySelector('canvas-graph');
+  }
+}
+
+GraphExplorerShell.template = template;
+GraphExplorerShell.rootStyles = css;
+GraphExplorerShell.reg('graph-explorer-shell');
+
+export default GraphExplorerShell;

package/canvas/GraphExplorerShell/GraphExplorerShell.tpl.js

@@ -0,0 +1,12 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+  <slot name="toolbar"></slot>
+  <slot name="legend"></slot>
+  <slot name="overlay"></slot>
+  <div class="graph-explorer-canvas-layer">
+    <slot name="canvas"></slot>
+    <slot></slot>
+  </div>
+  <slot name="stats"></slot>
+`;

package/canvas/GraphTabs/GraphTabs.css.js

@@ -0,0 +1,101 @@
+/**
+ * GraphTabs styles
+ * @module symbiote-node/canvas/GraphTabs.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  graph-tabs {
+    display: flex;
+    align-items: stretch;
+    height: 32px;
+    background: var(--sn-ctx-bg);
+    border-bottom: 1px solid var(--sn-node-border);
+    font-family: var(--sn-font);
+    font-size: 12px;
+    color: var(--sn-text-dim);
+    overflow-x: auto;
+    overflow-y: hidden;
+    user-select: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  tab-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    border-right: 1px solid var(--sn-node-border);
+    transition:
+      background 0.15s ease-out,
+      color 0.15s ease-out;
+    position: relative;
+
+    &:hover {
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      color: var(--sn-text);
+    }
+
+    &[data-active] {
+      background: var(--sn-node-bg);
+      color: var(--sn-text);
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--sn-node-selected);
+      }
+    }
+
+    & .material-symbols-outlined {
+      font-size: 14px;
+    }
+
+    & .tab-close {
+      font-size: 14px;
+      opacity: 0;
+      transition: opacity 0.15s;
+      padding: 2px;
+      border-radius: 3px;
+
+      &:hover {
+        background: color-mix(in srgb, currentColor 10%, transparent);
+      }
+    }
+
+    &:hover .tab-close {
+      opacity: 0.7;
+    }
+  }
+
+  .tab-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    cursor: pointer;
+    color: var(--sn-text-dim);
+    transition:
+      background 0.15s ease-out,
+      color 0.15s ease-out;
+
+    &:hover {
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      color: var(--sn-text);
+    }
+
+    & .material-symbols-outlined {
+      font-size: 16px;
+    }
+  }
+`;