symbiote-ui 0.3.0-alpha.4

package/interactions/Zoom.js

@@ -0,0 +1,139 @@
+/**
+ * Zoom handler — wheel, touch pinch, and double-click zoom
+ *
+ * Adapted from Rete.js area-plugin/zoom.ts (123 LOC).
+ * Handles zoom relative to cursor/pinch center.
+ *
+ * @module symbiote-node/interactions/Zoom
+ */
+
+export class Zoom {
+  /** @type {PointerEvent[]} */
+  #pointers = [];
+
+  /** @type {{ cx: number, cy: number, distance: number }|null} */
+  #previous = null;
+
+  /** @type {HTMLElement|null} */
+  #container = null;
+
+  /** @type {HTMLElement|null} */
+  #content = null;
+
+  /** @type {function|null} */
+  #onZoom = null;
+
+  /** @type {function|null} */
+  #shouldHandleWheel = null;
+
+  /**
+   * @param {number} [intensity=0.1] - Zoom sensitivity
+   */
+  constructor(intensity = 0.1) {
+    /** @type {number} */
+    this.intensity = intensity;
+  }
+
+  /**
+   * Initialize zoom handler
+   * @param {HTMLElement} container - Outer container
+   * @param {HTMLElement} content - Inner content element (for getBoundingClientRect)
+   * @param {function} onZoom - Callback: (delta, ox, oy, source)
+   * @param {function} [getTransform] - Optional callback returning {x, y} to avoid getBoundingClientRect layout thrashing
+   * @param {{shouldHandleWheel?: function(WheelEvent): boolean}} [options]
+   */
+  initialize(container, content, onZoom, getTransform = null, options = {}) {
+    this.#container = container;
+    this.#content = content;
+    this.#onZoom = onZoom;
+    this.getTransform = getTransform;
+    this.#shouldHandleWheel = options.shouldHandleWheel || null;
+
+    container.addEventListener('wheel', this.#wheel, { passive: false });
+    container.addEventListener('pointerdown', this.#down);
+    container.addEventListener('dblclick', this.#dblclick);
+    window.addEventListener('pointermove', this.#move);
+    window.addEventListener('pointerup', this.#up);
+    window.addEventListener('pointercancel', this.#up);
+  }
+
+  #getRect() {
+    if (this.getTransform) {
+      let c = this.#container.getBoundingClientRect();
+      let t = this.getTransform();
+      return { left: c.left + t.x, top: c.top + t.y };
+    }
+    return this.#content.getBoundingClientRect();
+  }
+
+  #wheel = (e) => {
+    if (this.#shouldHandleWheel && !this.#shouldHandleWheel(e)) return;
+    e.preventDefault();
+    let rect = this.#getRect();
+
+    let absDelta = Math.min(Math.abs(e.deltaY), 10) / 10;
+    let sign = e.deltaY < 0 ? 1 : -1;
+    let delta = sign * this.intensity * absDelta;
+    let ox = (rect.left - e.clientX) * delta;
+    let oy = (rect.top - e.clientY) * delta;
+    this.#onZoom(delta, ox, oy, 'wheel');
+  };
+
+  #dblclick = (e) => {
+    e.preventDefault();
+    let rect = this.#getRect();
+    let delta = 4 * this.intensity;
+    let ox = (rect.left - e.clientX) * delta;
+    let oy = (rect.top - e.clientY) * delta;
+    this.#onZoom(delta, ox, oy, 'dblclick');
+  };
+
+  #down = (e) => {
+    this.#pointers.push(e);
+  };
+
+  #move = (e) => {
+    this.#pointers = this.#pointers.map((p) => (p.pointerId === e.pointerId ? e : p));
+    if (this.#pointers.length < 2) return;
+
+    let [p1, p2] = this.#pointers;
+    let distance = Math.sqrt((p1.clientX - p2.clientX) ** 2 + (p1.clientY - p2.clientY) ** 2);
+    let cx = (p1.clientX + p2.clientX) / 2;
+    let cy = (p1.clientY + p2.clientY) / 2;
+
+    if (this.#previous && this.#previous.distance > 0) {
+      let rect = this.#getRect();
+      let delta = distance / this.#previous.distance - 1;
+      let ox = (rect.left - cx) * delta;
+      let oy = (rect.top - cy) * delta;
+      this.#onZoom(delta, ox - (this.#previous.cx - cx), oy - (this.#previous.cy - cy), 'touch');
+    }
+    this.#previous = { cx, cy, distance };
+  };
+
+  #up = (e) => {
+    this.#previous = null;
+    this.#pointers = this.#pointers.filter((p) => p.pointerId !== e.pointerId);
+  };
+
+  /**
+   * Whether a multi-touch zoom is in progress
+   * @returns {boolean}
+   */
+  isTranslating() {
+    return this.#pointers.length >= 2;
+  }
+
+  /** Cleanup event listeners */
+  destroy() {
+    if (!this.#container) return;
+    this.#container.removeEventListener('wheel', this.#wheel);
+    this.#container.removeEventListener('pointerdown', this.#down);
+    this.#container.removeEventListener('dblclick', this.#dblclick);
+    window.removeEventListener('pointermove', this.#move);
+    window.removeEventListener('pointerup', this.#up);
+    window.removeEventListener('pointercancel', this.#up);
+  }
+}
+
+export { Zoom as default };

package/layout/ActionZone/ActionZone.css.js

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview ActionZone styles
+ */
+
+import { css } from '@symbiotejs/symbiote';
+
+/**
+ * Size of the triangular zone (px)
+ */
+export let ZONE_SIZE = 16;
+
+export let styles = css`
+  action-zone {
+    position: absolute;
+    width: ${ZONE_SIZE}px;
+    height: ${ZONE_SIZE}px;
+    z-index: 100;
+    cursor: crosshair;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      opacity: 1 !important;
+    }
+
+    &[dragging] {
+      opacity: 1 !important;
+    }
+
+    /* Corner positioning */
+    &[corner='tl'] {
+      top: 0;
+      left: 0;
+    }
+
+    &[corner='tr'] {
+      top: 0;
+      right: 0;
+    }
+
+    &[corner='bl'] {
+      bottom: 0;
+      left: 0;
+    }
+
+    &[corner='br'] {
+      bottom: 0;
+      right: 0;
+    }
+
+    .zone-icon {
+      width: 100%;
+      height: 100%;
+      color: var(--sn-node-selected);
+      opacity: 0.6;
+    }
+
+    /* Rotate triangle based on corner */
+    &[corner='tl'] .zone-icon {
+      transform: rotate(0deg);
+    }
+
+    &[corner='tr'] .zone-icon {
+      transform: rotate(90deg);
+    }
+
+    &[corner='br'] .zone-icon {
+      transform: rotate(180deg);
+    }
+
+    &[corner='bl'] .zone-icon {
+      transform: rotate(270deg);
+    }
+
+    &[dragging] .zone-icon {
+      color: var(--sn-text);
+      opacity: 1;
+    }
+  }
+
+  /* Parent hover rule */
+  layout-node[node-type='panel']:hover action-zone {
+    opacity: 0.5;
+  }
+`;

package/layout/ActionZone/ActionZone.js

@@ -0,0 +1,261 @@
+/**
+ * @fileoverview ActionZone - Corner widget for split/join gestures
+ * Inspired by Blender's AZONE_AREA implementation.
+ *
+ * Triangular hit area at panel corners:
+ * - Drag inward (mouse stays inside panel) → split panel
+ * - Drag outward (mouse exits panel) → join panels
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './ActionZone.tpl.js';
+import { styles } from './ActionZone.css.js';
+
+/**
+ * Minimum drag distance before gesture is recognized
+ */
+const DRAG_THRESHOLD = 15;
+
+export class ActionZone extends Symbiote {
+  static isoMode = true;
+
+  init$ = {
+
+    '@corner': 'tl',
+
+
+    panelId: '',
+
+
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0,
+    gestureType: null,
+
+
+    panelBounds: null,
+  };
+
+  renderCallback() {
+
+    this.onpointerdown = (e) => this._onPointerDown(e);
+    this.onpointermove = (e) => this._onPointerMove(e);
+    this.onpointerup = (e) => this._onPointerUp(e);
+    this.onpointercancel = (e) => this._onPointerUp(e);
+    this.onlostpointercapture = (e) => this._onPointerUp(e);
+
+
+    this._globalPointerUp = (e) => {
+      if (this.$.isDragging) {
+        this._onPointerUp(e);
+      }
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('pointerup', this._globalPointerUp);
+      document.addEventListener('pointercancel', this._globalPointerUp);
+    }
+  }
+
+  disconnectedCallback() {
+    if (this._globalPointerUp && typeof document !== 'undefined') {
+      document.removeEventListener('pointerup', this._globalPointerUp);
+      document.removeEventListener('pointercancel', this._globalPointerUp);
+    }
+  }
+
+  /**
+   * Start drag operation
+   * @param {PointerEvent} e
+   */
+  _onPointerDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+
+    let panelNode = this.closest('layout-node');
+    if (panelNode) {
+      let rect = panelNode.getBoundingClientRect();
+      this.$.panelBounds = {
+        left: rect.left,
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+      };
+    }
+
+    this.$.isDragging = true;
+    this.$.dragStartX = e.clientX;
+    this.$.dragStartY = e.clientY;
+    this.$.gestureType = null;
+
+    this.setPointerCapture(e.pointerId);
+    this.setAttribute('dragging', '');
+
+
+    this.dispatchEvent(
+      new CustomEvent('action-zone-start', {
+        bubbles: true,
+        composed: true,
+        detail: { panelId: this.$.panelId, corner: this.$['@corner'] },
+      })
+    );
+  }
+
+  /**
+   * Track drag and detect gesture
+   * @param {PointerEvent} e
+   */
+  _onPointerMove(e) {
+    if (!this.$.isDragging) return;
+
+    let dx = e.clientX - this.$.dragStartX;
+    let dy = e.clientY - this.$.dragStartY;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance < DRAG_THRESHOLD) {
+      this.$.gestureType = null;
+      return;
+    }
+
+
+    let gesture = this._detectGesture(e.clientX, e.clientY, dx, dy);
+
+    if (gesture !== this.$.gestureType) {
+      this.$.gestureType = gesture;
+
+
+      this.dispatchEvent(
+        new CustomEvent('action-zone-gesture', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            panelId: this.$.panelId,
+            corner: this.$['@corner'],
+            gesture: gesture,
+            dx,
+            dy,
+          },
+        })
+      );
+    }
+  }
+
+  /**
+   * Complete or cancel gesture
+   * @param {PointerEvent} e
+   */
+  _onPointerUp(e) {
+    if (!this.$.isDragging) return;
+
+
+    try {
+      if (e?.pointerId !== undefined) {
+        this.releasePointerCapture(e.pointerId);
+      }
+    } catch {
+
+    }
+
+    this.removeAttribute('dragging');
+
+    let gesture = this.$.gestureType;
+
+    if (gesture) {
+
+      this.dispatchEvent(
+        new CustomEvent('action-zone-execute', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            panelId: this.$.panelId,
+            corner: this.$['@corner'],
+            gesture: gesture,
+          },
+        })
+      );
+    }
+
+
+    this.$.isDragging = false;
+    this.$.gestureType = null;
+    this.$.panelBounds = null;
+
+
+    this.dispatchEvent(
+      new CustomEvent('action-zone-end', {
+        bubbles: true,
+        composed: true,
+        detail: { panelId: this.$.panelId },
+      })
+    );
+  }
+
+  /**
+   * Detect gesture type based on mouse position relative to panel bounds
+   * @param {number} mouseX
+   * @param {number} mouseY
+   * @param {number} dx
+   * @param {number} dy
+   * @returns {'split-h' | 'split-v' | 'join' | null}
+   */
+  _detectGesture(mouseX, mouseY, dx, dy) {
+    let bounds = this.$.panelBounds;
+
+    if (!bounds) {
+      return this._detectGestureByDirection(dx, dy);
+    }
+
+    let isOutside =
+      mouseX < bounds.left ||
+      mouseX > bounds.right ||
+      mouseY < bounds.top ||
+      mouseY > bounds.bottom;
+
+    if (isOutside) {
+      return 'join';
+    }
+
+    return this._detectGestureByDirection(dx, dy);
+  }
+
+  /**
+   * Detect gesture purely by drag direction
+   * @param {number} dx
+   * @param {number} dy
+   * @returns {'split-h' | 'split-v' | 'join' | null}
+   */
+  _detectGestureByDirection(dx, dy) {
+    let corner = this.$['@corner'];
+    let absDx = Math.abs(dx);
+    let absDy = Math.abs(dy);
+    let isHorizontal = absDx > absDy;
+
+    let isInward = false;
+
+    switch (corner) {
+      case 'tl':
+        isInward = (isHorizontal && dx > 0) || (!isHorizontal && dy > 0);
+        break;
+      case 'tr':
+        isInward = (isHorizontal && dx < 0) || (!isHorizontal && dy > 0);
+        break;
+      case 'bl':
+        isInward = (isHorizontal && dx > 0) || (!isHorizontal && dy < 0);
+        break;
+      case 'br':
+        isInward = (isHorizontal && dx < 0) || (!isHorizontal && dy < 0);
+        break;
+    }
+
+    if (isInward) {
+      return isHorizontal ? 'split-h' : 'split-v';
+    } else {
+      return 'join';
+    }
+  }
+}
+
+ActionZone.template = template;
+ActionZone.rootStyles = styles;
+
+ActionZone.reg('action-zone');

package/layout/ActionZone/ActionZone.tpl.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview ActionZone template
+ */
+
+import { html } from '@symbiotejs/symbiote';
+
+export let template = html`
+  <svg viewBox="0 0 16 16" class="zone-icon">
+    <path d="M0,0 L16,0 L0,16 Z" fill="currentColor" />
+  </svg>
+`;