symbiote-ui 0.3.0-alpha.4

package/canvas/GraphTabs/GraphTabs.js

@@ -0,0 +1,189 @@
+/**
+ * GraphTabs — Tab/Page management for multi-canvas workflows
+ *
+ * Each tab represents an independent graph page with its own
+ * set of nodes and connections. Provides tab bar UI and
+ * state switching for the NodeCanvas.
+ *
+ * @module symbiote-node/canvas/GraphTabs
+ */
+
+import Symbiote, { html } from '@symbiotejs/symbiote';
+import { ensureMaterialSymbols } from '../../icons/MaterialSymbols.js';
+import { template } from './GraphTabs.tpl.js';
+import { styles } from './GraphTabs.css.js';
+import { translate } from '../../locale/index.js';
+
+/**
+ * @typedef {Object} TabPage
+ * @property {string} id
+ * @property {string} name
+ * @property {Object} state - Serialized editor state
+ */
+
+class TabItem extends Symbiote {
+  init$ = {
+    id: '',
+    name: '',
+    isActive: false,
+    showClose: false,
+  };
+
+  renderCallback() {
+    ensureMaterialSymbols(['close', 'description']);
+
+    this.sub('isActive', (val) => {
+      this.toggleAttribute('data-active', val);
+    });
+  }
+}
+
+TabItem.template = html`
+  <span class="material-symbols-outlined">description</span>
+  <span ${{ textContent: 'name' }}></span>
+  <span
+    class="tab-close material-symbols-outlined"
+    ${{ onclick: '^onCloseTab', '@hidden': '!showClose' }}
+    >close</span
+  >
+`;
+
+TabItem.reg('tab-item');
+
+export class GraphTabs extends Symbiote {
+  init$ = {
+    tabItems: [],
+    newTabTitle: translate('tabs.new'),
+  };
+
+  /** @type {TabPage[]} */
+  #tabs = [];
+
+  /** @type {string} */
+  #activeTabId = '';
+
+  /** @type {function|null} */
+  #onSwitch = null;
+
+  /** @type {function|null} */
+  #onAdd = null;
+
+  /** @type {function|null} */
+  #onClose = null;
+
+  renderCallback() {
+    ensureMaterialSymbols(['add']);
+  }
+
+  /**
+   * Set callbacks for tab events
+   * @param {object} callbacks
+   * @param {function} callbacks.onSwitch - (tabId) => void
+   * @param {function} callbacks.onAdd - () => TabPage
+   * @param {function} callbacks.onClose - (tabId) => void
+   */
+  setCallbacks(callbacks) {
+    this.#onSwitch = callbacks.onSwitch;
+    this.#onAdd = callbacks.onAdd;
+    this.#onClose = callbacks.onClose;
+  }
+
+  /**
+   * Add a tab
+   * @param {string} id
+   * @param {string} name
+   * @param {Object} [state={}]
+   */
+  addTab(id, name, state = {}) {
+    this.#tabs.push({ id, name, state });
+    this.#syncItems();
+    this.switchTo(id);
+  }
+
+  /**
+   * Switch to a tab
+   * @param {string} id
+   */
+  switchTo(id) {
+    this.#activeTabId = id;
+    this.#syncItems();
+    if (this.#onSwitch) this.#onSwitch(id);
+  }
+
+  /**
+   * Remove a tab
+   * @param {string} id
+   */
+  removeTab(id) {
+    let idx = this.#tabs.findIndex((t) => t.id === id);
+    if (idx === -1) return;
+    this.#tabs.splice(idx, 1);
+    if (this.#activeTabId === id && this.#tabs.length > 0) {
+      this.switchTo(this.#tabs[Math.max(0, idx - 1)].id);
+    }
+    this.#syncItems();
+    if (this.#onClose) this.#onClose(id);
+  }
+
+  /** @returns {string} */
+  get activeTab() {
+    return this.#activeTabId;
+  }
+
+  /** @returns {TabPage[]} */
+  get tabs() {
+    return [...this.#tabs];
+  }
+
+  /**
+   * Update tab state (for saving before switch)
+   * @param {string} id
+   * @param {Object} state
+   */
+  setTabState(id, state) {
+    let tab = this.#tabs.find((t) => t.id === id);
+    if (tab) tab.state = state;
+  }
+
+  /**
+   * Get tab state
+   * @param {string} id
+   * @returns {Object|undefined}
+   */
+  getTabState(id) {
+    return this.#tabs.find((t) => t.id === id)?.state;
+  }
+
+  #syncItems() {
+    let showClose = this.#tabs.length > 1;
+    this.$.tabItems = this.#tabs.map((t) => ({
+      id: t.id,
+      name: t.name,
+      isActive: t.id === this.#activeTabId,
+      showClose,
+    }));
+  }
+
+  onTabClick(e) {
+    let item = e.target.closest('tab-item');
+    if (!item) return;
+    this.switchTo(item.$.id);
+  }
+
+  onCloseTab(e) {
+    e.stopPropagation();
+    let item = e.target.closest('tab-item');
+    if (item) this.removeTab(item.$.id);
+  }
+
+  onAddTab() {
+    if (this.#onAdd) {
+      let newTab = this.#onAdd();
+      if (newTab) this.addTab(newTab.id, newTab.name, newTab.state);
+    }
+  }
+}
+
+GraphTabs.template = template;
+GraphTabs.rootStyles = styles;
+GraphTabs.reg('graph-tabs');

package/canvas/GraphTabs/GraphTabs.tpl.js

@@ -0,0 +1,12 @@
+/**
+ * GraphTabs template
+ * @module symbiote-node/canvas/GraphTabs.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <div ${{ itemize: 'tabItems', 'item-tag': 'tab-item', onclick: 'onTabClick' }}></div>
+  <div class="tab-add" ${{ title: 'newTabTitle', onclick: 'onAddTab' }}>
+    <span class="material-symbols-outlined">add</span>
+  </div>
+`;

package/canvas/LODManager.js

@@ -0,0 +1,88 @@
+export class LODManager {
+  /** @type {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} */
+  #canvas;
+
+  /** @type {number} */
+  #threshold;
+
+  /** @type {string} */
+  #currentLod = 'collapsed';
+
+  /** @type {boolean} */
+  #attached = false;
+
+  #listeners = [];
+
+  /**
+   * @param {import('./NodeCanvas/NodeCanvas.js').NodeCanvas} canvas
+   * @param {object} config
+   * @param {number} [config.threshold=0.7] - Zoom level at which LOD expands
+   */
+  constructor(canvas, { threshold = 0.7 } = {}) {
+    this.#canvas = canvas;
+    this.#threshold = threshold;
+  }
+
+  get currentLod() {
+    return this.#currentLod;
+  }
+
+  /**
+   * Attach LOD tracking to the canvas.
+   * Note: Symbiote's sub() does not return an unsubscribe handle —
+   * subscriptions are auto-cleaned when the canvas component is destroyed.
+   */
+  attach() {
+    if (this.#attached || !this.#canvas) return;
+    this.#attached = true;
+
+    let initialZoom = this.#canvas.$.zoom || 1;
+    this.#currentLod = initialZoom >= this.#threshold ? 'expanded' : 'collapsed';
+
+    this.#canvas.sub('zoom', (zoom) => {
+      if (!this.#attached) return;
+      let newLod = zoom >= this.#threshold ? 'expanded' : 'collapsed';
+      if (newLod === this.#currentLod) return;
+
+      this.#currentLod = newLod;
+      this.#emit(newLod);
+    });
+  }
+
+  /**
+   * Perform immediate LOD update evaluation (e.g. after manual navigation or fitView)
+   */
+  update() {
+    if (!this.#canvas || !this.#attached) return;
+    let zoom = this.#canvas.$.zoom || 1;
+    let newLod = zoom >= this.#threshold ? 'expanded' : 'collapsed';
+    if (newLod !== this.#currentLod) {
+      this.#currentLod = newLod;
+      this.#emit(newLod);
+    }
+  }
+
+  /**
+   * @param {Function} callback
+   */
+  onLodChange(callback) {
+    this.#listeners.push(callback);
+
+    if (this.#attached) {
+      callback(this.#currentLod);
+    }
+  }
+
+  #emit(lod) {
+    for (const fn of this.#listeners) {
+      fn(lod);
+    }
+  }
+
+  destroy() {
+
+
+    this.#listeners = [];
+    this.#attached = false;
+  }
+}

package/canvas/Minimap/Minimap.css.js

@@ -0,0 +1,73 @@
+/**
+ * Minimap styles
+ * @module symbiote-node/canvas/Minimap.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export let styles = css`
+  node-minimap {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 200px;
+    height: 140px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--sn-node-border);
+    box-shadow: 0 4px 16px var(--sn-shadow-color);
+    z-index: 90;
+    cursor: crosshair;
+    opacity: 1;
+    transition: opacity 0.4s ease;
+
+    &[hidden] {
+      display: none;
+    }
+
+    &[data-fading] {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    & canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .sn-minimap-toggle {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--sn-node-border);
+    background: var(--sn-node-bg);
+    color: var(--sn-text-dim);
+    cursor: pointer;
+    z-index: 89;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition:
+      color 0.15s,
+      border-color 0.15s;
+
+    & .material-symbols-outlined {
+      font-size: 18px;
+    }
+
+    &:hover {
+      color: var(--sn-text);
+      border-color: var(--sn-node-selected);
+    }
+
+    &[data-active] {
+      color: var(--sn-node-selected);
+      border-color: var(--sn-node-selected);
+    }
+  }
+`;

package/canvas/Minimap/Minimap.js

@@ -0,0 +1,210 @@
+/* eslint-env browser */
+/**
+ * Minimap — small overview of the entire node graph
+ *
+ * Shows a scaled-down view of all nodes and connections.
+ * The viewport rectangle shows current visible area and can be dragged to pan.
+ * Positioned bottom-right of the canvas.
+ *
+ * @module symbiote-node/canvas/Minimap
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './Minimap.tpl.js';
+import { styles } from './Minimap.css.js';
+
+export class Minimap extends Symbiote {
+  init$ = {
+    visible: true,
+  };
+
+  /** @type {HTMLCanvasElement|null} */
+  #canvas2d = null;
+
+  /** @type {CanvasRenderingContext2D|null} */
+  #ctx = null;
+
+  /** @type {function|null} */
+  #getState = null;
+
+  /** @type {boolean} */
+  #isDragging = false;
+
+  /** @type {number} */
+  #rafId = 0;
+
+  renderCallback() {
+    this.#canvas2d = this.querySelector('canvas');
+    this.#ctx = this.#canvas2d?.getContext('2d');
+
+
+    this.#canvas2d?.addEventListener('pointerdown', (e) => this.#onPointerDown(e));
+    window.addEventListener('pointermove', (e) => this.#onPointerMove(e));
+    window.addEventListener('pointerup', () => this.#onPointerUp());
+  }
+
+  /**
+   * Set state getter for reading canvas state
+   * @param {function} fn - returns { nodes, transform, containerSize }
+   */
+  setStateGetter(fn) {
+    this.#getState = fn;
+    this.#startLoop();
+  }
+
+  #startLoop() {
+    let draw = () => {
+      this.#draw();
+      this.#rafId = requestAnimationFrame(draw);
+    };
+    this.#rafId = requestAnimationFrame(draw);
+  }
+
+  #draw() {
+    let ctx = this.#ctx;
+    let canvas = this.#canvas2d;
+    if (!ctx || !canvas || !this.#getState) return;
+
+    let state = this.#getState();
+    if (!state) return;
+
+    let { nodes, transform, containerSize } = state;
+    let w = canvas.width;
+    let h = canvas.height;
+
+
+    let cs = getComputedStyle(this);
+    let bgColor = cs.getPropertyValue('--sn-minimap-bg').trim();
+    let nodeColor = cs.getPropertyValue('--sn-minimap-node').trim();
+    let nodeStroke =
+      cs.getPropertyValue('--sn-minimap-node-stroke').trim() ||
+      cs.getPropertyValue('--sn-node-border').trim();
+    let bypassedNodeColor = cs.getPropertyValue('--sn-minimap-bypassed-node').trim();
+    let vpStroke = cs.getPropertyValue('--sn-minimap-viewport').trim();
+    let vpFill = cs.getPropertyValue('--sn-minimap-viewport-fill').trim();
+
+
+    ctx.clearRect(0, 0, w, h);
+
+
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, w, h);
+
+    if (nodes.length === 0) return;
+
+
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity;
+    for (const n of nodes) {
+      minX = Math.min(minX, n.x);
+      minY = Math.min(minY, n.y);
+      maxX = Math.max(maxX, n.x + (n.width || 200));
+      maxY = Math.max(maxY, n.y + (n.height || 100));
+    }
+
+
+    let pad = 100;
+    minX -= pad;
+    minY -= pad;
+    maxX += pad;
+    maxY += pad;
+
+    let graphW = maxX - minX;
+    let graphH = maxY - minY;
+
+
+    let scaleX = w / graphW;
+    let scaleY = h / graphH;
+    let scale = Math.min(scaleX, scaleY);
+
+    let offsetX = (w - graphW * scale) / 2;
+    let offsetY = (h - graphH * scale) / 2;
+
+
+    this._mapMinX = minX;
+    this._mapMinY = minY;
+    this._mapScale = scale;
+    this._mapOffsetX = offsetX;
+    this._mapOffsetY = offsetY;
+
+
+    for (const n of nodes) {
+      let x = (n.x - minX) * scale + offsetX;
+      let y = (n.y - minY) * scale + offsetY;
+      let nw = (n.width || 200) * scale;
+      let nh = (n.height || 80) * scale;
+
+      ctx.fillStyle = n.bypassed ? bypassedNodeColor : nodeColor;
+      ctx.fillRect(x, y, nw, nh);
+      ctx.strokeStyle = nodeStroke;
+      ctx.lineWidth = 0.5;
+      ctx.strokeRect(x, y, nw, nh);
+    }
+
+
+    if (containerSize && transform) {
+      let vx = (-transform.x / transform.zoom - minX) * scale + offsetX;
+      let vy = (-transform.y / transform.zoom - minY) * scale + offsetY;
+      let vw = (containerSize.width / transform.zoom) * scale;
+      let vh = (containerSize.height / transform.zoom) * scale;
+
+      ctx.strokeStyle = vpStroke;
+      ctx.lineWidth = 1.5;
+      ctx.strokeRect(vx, vy, vw, vh);
+      ctx.fillStyle = vpFill;
+      ctx.fillRect(vx, vy, vw, vh);
+    }
+  }
+
+  #onPointerDown(e) {
+    this.#isDragging = true;
+    this.#navigateTo(e);
+    e.preventDefault();
+  }
+
+  #onPointerMove(e) {
+    if (!this.#isDragging) return;
+    this.#navigateTo(e);
+  }
+
+  #onPointerUp() {
+    this.#isDragging = false;
+  }
+
+  #navigateTo(e) {
+    if (!this.#getState || !this.#canvas2d) return;
+    let rect = this.#canvas2d.getBoundingClientRect();
+    let mx = e.clientX - rect.left;
+    let my = e.clientY - rect.top;
+
+    let state = this.#getState();
+    if (!state?.containerSize || !state?.transform) return;
+
+
+    let graphX = (mx - this._mapOffsetX) / this._mapScale + this._mapMinX;
+    let graphY = (my - this._mapOffsetY) / this._mapScale + this._mapMinY;
+
+
+    let zoom = state.transform.zoom;
+    let newX = -(graphX * zoom - state.containerSize.width / 2);
+    let newY = -(graphY * zoom - state.containerSize.height / 2);
+
+
+    this.dispatchEvent(
+      new CustomEvent('minimap-navigate', {
+        detail: { x: newX, y: newY },
+        bubbles: true,
+      })
+    );
+  }
+
+  destroyCallback() {
+    cancelAnimationFrame(this.#rafId);
+  }
+}
+
+Minimap.template = template;
+Minimap.rootStyles = styles;
+Minimap.reg('node-minimap');

package/canvas/Minimap/Minimap.tpl.js

@@ -0,0 +1,7 @@
+/**
+ * Minimap template
+ * @module symbiote-node/canvas/Minimap.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html` <canvas width="200" height="140"></canvas> `;