project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/layout/ActionZone/ActionZone.js

@@ -0,0 +1,254 @@
+/**
+ * @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$ = {
+    // Position: 'tl' | 'tr' | 'bl' | 'br'
+    '@corner': 'tl',
+
+    // Panel ID (inherited from parent node)
+    panelId: '',
+
+    // Drag state
+    isDragging: false,
+    dragStartX: 0,
+    dragStartY: 0,
+    gestureType: null, // 'split-h' | 'split-v' | 'join'
+
+    // Panel bounds at drag start (for zone checking)
+    panelBounds: null,
+  };
+
+  renderCallback() {
+    // Bind pointer events directly to component
+    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);
+
+    // Global fallback for touchpad edge cases
+    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();
+
+    // Get panel bounds at drag start
+    const panelNode = this.closest('layout-node');
+    if (panelNode) {
+      const 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', '');
+
+    // Notify parent to prepare for potential split/join
+    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;
+
+    const dx = e.clientX - this.$.dragStartX;
+    const dy = e.clientY - this.$.dragStartY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance < DRAG_THRESHOLD) {
+      this.$.gestureType = null;
+      return;
+    }
+
+    // Detect gesture based on current mouse position relative to panel bounds
+    const gesture = this._detectGesture(e.clientX, e.clientY, dx, dy);
+
+    if (gesture !== this.$.gestureType) {
+      this.$.gestureType = gesture;
+
+      // Notify parent to show preview
+      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;
+
+    // Safe release - may fail if pointerId is invalid from global fallback
+    try {
+      if (e?.pointerId !== undefined) {
+        this.releasePointerCapture(e.pointerId);
+      }
+    } catch (err) {
+      // Ignore - pointer may already be released
+    }
+
+    this.removeAttribute('dragging');
+
+    const gesture = this.$.gestureType;
+
+    if (gesture) {
+      // Execute the gesture
+      this.dispatchEvent(new CustomEvent('action-zone-execute', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          panelId: this.$.panelId,
+          corner: this.$['@corner'],
+          gesture: gesture
+        }
+      }));
+    }
+
+    // Reset state
+    this.$.isDragging = false;
+    this.$.gestureType = null;
+    this.$.panelBounds = null;
+
+    // Hide preview
+    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) {
+    const bounds = this.$.panelBounds;
+
+    if (!bounds) {
+      return this._detectGestureByDirection(dx, dy);
+    }
+
+    const 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) {
+    const corner = this.$['@corner'];
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    const 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/vendor/symbiote-node/layout/ActionZone/ActionZone.tpl.js

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

package/vendor/symbiote-node/layout/Layout/Layout.css.js

@@ -0,0 +1,88 @@
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+panel-layout {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  font-family: var(--font-main);
+
+  &[hidden] {
+    display: none;
+  }
+
+  .layout-root {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Fullscreen tab bar */
+  .fullscreen-tab-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 28px;
+    background: var(--bg-deeper, #1a1a1a);
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    z-index: 10002;
+    padding: 0;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .tab-list {
+    display: contents;
+  }
+
+  .fullscreen-tab {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 12px;
+    height: 28px;
+    border: none;
+    border-left: none;
+    border-right: none;
+    background: var(--bg-deeper, #1a1a1a);
+    color: var(--text-muted, #666);
+    cursor: pointer;
+    font-size: 12px;
+    font-family: inherit;
+    transition: background 0.15s, color 0.15s;
+
+    .material-symbols-outlined {
+      font-size: 16px;
+    }
+
+    &:hover {
+      background: var(--bg-header, #2d2d2d);
+      color: var(--text-main, #e0e0e0);
+    }
+
+    &[active] {
+      height: 29px;
+      margin-bottom: -1px;
+      position: relative;
+      z-index: 1;
+      background: var(--bg-header, #2d2d2d);
+      color: var(--text-main, #e0e0e0);
+      border-left: 1px solid var(--layout-border, #333);
+      border-right: 1px solid var(--layout-border, #333);
+    }
+  }
+
+  .tab-filler {
+    flex: 1;
+    height: 28px;
+    background: var(--bg-deeper, #1a1a1a);
+  }
+}
+`;