@ghchinoy/litflow 0.1.0

package/src/lit-handle.ts

@@ -0,0 +1,71 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Position } from '@xyflow/system';
+
+@customElement('lit-handle')
+export class LitHandle extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property({ type: String, reflect: true })
+  type: 'source' | 'target' = 'source';
+
+  @property({ type: String, reflect: true, attribute: 'data-handlepos' })
+  position: Position = Position.Top;
+
+  @property({ type: String, reflect: true, attribute: 'data-handleid' })
+  handleId?: string;
+
+  @property({ type: String, reflect: true, attribute: 'data-nodeid' })
+  nodeId?: string;
+
+  constructor() {
+    super();
+    this.addEventListener('mousedown', (e) => this._onPointerDown(e));
+    this.addEventListener('touchstart', (e) => this._onPointerDown(e));
+  }
+
+  private _onPointerDown(e: MouseEvent | TouchEvent) {
+    e.stopPropagation();
+    const nodeId = this.getAttribute('data-nodeid');
+    
+    this.dispatchEvent(new CustomEvent('handle-pointer-down', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        event: e,
+        handleId: this.handleId,
+        nodeId,
+        type: this.type,
+        handleDomNode: this,
+      }
+    }));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.classList.add('lit-flow__handle');
+    this.classList.add(this.type);
+    this.classList.add('connectable');
+    this.classList.add('connectableend');
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('nodeId') || changedProperties.has('handleId') || changedProperties.has('type')) {
+      this.setAttribute('data-id', `lit-flow-${this.nodeId || ''}-${this.handleId || ''}-${this.type}`);
+    }
+  }
+
+  render() {
+    return html`
+      <div style="
+        width: 100%;
+        height: 100%;
+        background: inherit;
+        border-radius: inherit;
+        pointer-events: none;
+      "></div>
+    `;
+  }
+}

package/src/lit-minimap.ts

@@ -0,0 +1,161 @@
+import { LitElement, html, css, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/signals';
+import {
+  getInternalNodesBounds,
+  getBoundsOfRects,
+  XYMinimap,
+  type Rect,
+  type XYMinimapInstance,
+  type PanZoomInstance,
+  type InternalNodeBase,
+  type Transform,
+} from '@xyflow/system';
+
+type Constructor<T> = new (...args: any[]) => T;
+
+@customElement('lit-minimap')
+export class LitMinimap extends (SignalWatcher as <T extends Constructor<LitElement>>(base: T) => T)(LitElement) {
+  static styles = css`
+    :host {
+      display: block;
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      z-index: 5;
+      background: var(--md-sys-color-surface);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      box-shadow: var(--md-sys-elevation-1);
+      overflow: hidden;
+    }
+
+    svg {
+      display: block;
+    }
+
+    .minimap-node {
+      fill: var(--md-sys-color-surface-variant);
+      stroke: var(--md-sys-color-outline-variant);
+      stroke-width: 1;
+    }
+
+    .minimap-mask {
+      fill: var(--lit-flow-minimap-mask);
+      fill-rule: evenodd;
+    }
+  `;
+
+  @property({ type: Object })
+  panZoom?: PanZoomInstance;
+
+  @property({ type: Object })
+  nodeLookup = new Map<string, InternalNodeBase>();
+
+  @property({ type: Array })
+  transform: Transform = [0, 0, 1];
+
+  @property({ type: Array })
+  translateExtent: [[number, number], [number, number]] = [[-Infinity, -Infinity], [Infinity, Infinity]];
+
+  @property({ type: Number })
+  width = 0;
+
+  @property({ type: Number })
+  height = 0;
+
+  @state()
+  private _minimapInstance?: XYMinimapInstance;
+
+  updated(changedProperties: Map<string, any>) {
+    if (!this._minimapInstance && this.panZoom) {
+      const svgEl = this.shadowRoot?.querySelector('svg');
+      if (svgEl) {
+        this._minimapInstance = XYMinimap({
+          domNode: svgEl,
+          panZoom: this.panZoom,
+          getTransform: () => this.transform,
+          getViewScale: () => {
+            const boundingRect = this._getBoundingRect();
+            return Math.max(boundingRect.width / 200, boundingRect.height / 150);
+          },
+        });
+      }
+    }
+
+    if (this._minimapInstance && (changedProperties.has('width') || changedProperties.has('height') || changedProperties.has('translateExtent'))) {
+      this._minimapInstance.update({
+        width: this.width,
+        height: this.height,
+        translateExtent: this.translateExtent,
+      });
+    }
+  }
+
+  private _getBoundingRect(): Rect {
+    const viewBB: Rect = {
+      x: -this.transform[0] / this.transform[2],
+      y: -this.transform[1] / this.transform[2],
+      width: this.width / this.transform[2],
+      height: this.height / this.transform[2],
+    };
+
+    return this.nodeLookup.size > 0
+      ? getBoundsOfRects(getInternalNodesBounds(this.nodeLookup), viewBB)
+      : viewBB;
+  }
+
+  render() {
+    const boundingRect = this._getBoundingRect();
+    const viewBB: Rect = {
+      x: -this.transform[0] / this.transform[2],
+      y: -this.transform[1] / this.transform[2],
+      width: this.width / this.transform[2],
+      height: this.height / this.transform[2],
+    };
+
+    const elementWidth = 200;
+    const elementHeight = 150;
+    const scaledWidth = boundingRect.width / elementWidth;
+    const scaledHeight = boundingRect.height / elementHeight;
+    const viewScale = Math.max(scaledWidth, scaledHeight);
+    const viewWidth = viewScale * elementWidth;
+    const viewHeight = viewScale * elementHeight;
+    const offset = 5 * viewScale;
+
+    const x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    const y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    const width = viewWidth + offset * 2;
+    const height = viewHeight + offset * 2;
+
+    return html`
+      <svg
+        width="${elementWidth}"
+        height="${elementHeight}"
+        viewBox="${x} ${y} ${width} ${height}"
+      >
+        ${Array.from(this.nodeLookup.values()).map((node) => {
+          const { x, y } = node.internals.positionAbsolute;
+          const w = node.measured.width || 0;
+          const h = node.measured.height || 0;
+          return svg`
+            <rect
+              class="minimap-node"
+              x="${x}"
+              y="${y}"
+              width="${w}"
+              height="${h}"
+              rx="2"
+              ry="2"
+            />
+          `;
+        })}
+        <path
+          class="minimap-mask"
+          d="M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
+             M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z"
+        />
+      </svg>
+    `;
+  }
+}

package/src/lit-node.ts

@@ -0,0 +1,40 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/signals';
+
+type Constructor<T> = new (...args: any[]) => T;
+
+@customElement('lit-node')
+export class LitNode extends (SignalWatcher as <T extends Constructor<LitElement>>(base: T) => T)(LitElement) {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property({ type: String })
+  label = '';
+
+  @property({ type: String, reflect: true })
+  type = 'default';
+
+  @property({ type: Object })
+  data: any = {};
+
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
+  @property({ type: String, attribute: 'data-id', reflect: true })
+  nodeId = '';
+
+  render() {
+    return html`
+      <div class="label" style="font-size: 12px; color: #222; pointer-events: none;">${this.label}</div>
+      <slot></slot>
+      ${this.type === 'input' || this.type === 'default'
+        ? html`<lit-handle type="source" data-handlepos="bottom" data-nodeid="${this.nodeId}"></lit-handle>`
+        : ''}
+      ${this.type === 'output' || this.type === 'default'
+        ? html`<lit-handle type="target" data-handlepos="top" data-nodeid="${this.nodeId}"></lit-handle>`
+        : ''}
+    `;
+  }
+}

package/src/store.ts

@@ -0,0 +1,55 @@
+import { signal } from '@lit-labs/signals';
+import {
+  type NodeBase,
+  type EdgeBase,
+  type InternalNodeBase,
+  type CoordinateExtent,
+  type NodeOrigin,
+  type SnapGrid,
+  type Transform,
+  type PanZoomInstance,
+  type ConnectionInProgress,
+  infiniteExtent,
+} from '@xyflow/system';
+
+export interface FlowState {
+  nodes: ReturnType<typeof signal<NodeBase[]>>;
+  edges: ReturnType<typeof signal<EdgeBase[]>>;
+  nodeLookup: Map<string, InternalNodeBase>;
+  parentLookup: Map<string, Map<string, InternalNodeBase>>;
+  nodeExtent: CoordinateExtent;
+  snapGrid: SnapGrid;
+  snapToGrid: boolean;
+  nodeOrigin: NodeOrigin;
+  multiSelectionActive: boolean;
+  transform: ReturnType<typeof signal<Transform>>;
+  autoPanOnNodeDrag: boolean;
+  nodesDraggable: boolean;
+  selectNodesOnDrag: boolean;
+  nodeDragThreshold: number;
+  panZoom: PanZoomInstance | null;
+  domNode: Element | null;
+  connectionInProgress: ReturnType<typeof signal<ConnectionInProgress | null>>;
+}
+
+export function createInitialState(): FlowState {
+  return {
+    nodes: signal([]),
+    edges: signal([]),
+    nodeLookup: new Map(),
+    parentLookup: new Map(),
+    nodeExtent: infiniteExtent,
+    snapGrid: [15, 15],
+    snapToGrid: false,
+    nodeOrigin: [0, 0],
+    multiSelectionActive: false,
+    transform: signal([0, 0, 1]),
+    autoPanOnNodeDrag: true,
+    nodesDraggable: true,
+    selectNodesOnDrag: true,
+    nodeDragThreshold: 0,
+    panZoom: null,
+    domNode: null,
+    connectionInProgress: signal(null),
+  };
+}

package/src/theme.ts

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+
+export const m3Tokens = css`
+  :host {
+    /* Colors - Light Theme Defaults */
+    --md-sys-color-primary: #005ac1;
+    --md-sys-color-on-primary: #ffffff;
+    --md-sys-color-primary-container: #d8e2ff;
+    --md-sys-color-on-primary-container: #001a41;
+    
+    --md-sys-color-secondary: #575e71;
+    --md-sys-color-on-secondary: #ffffff;
+    --md-sys-color-secondary-container: #dbe2f9;
+    --md-sys-color-on-secondary-container: #141b2c;
+    
+    --md-sys-color-surface: #fefbff;
+    --md-sys-color-on-surface: #1b1b1f;
+    --md-sys-color-surface-variant: #e1e2ec;
+    --md-sys-color-on-surface-variant: #44474f;
+    
+    --md-sys-color-outline: #74777f;
+    --md-sys-color-outline-variant: #c4c6d0;
+    
+    --md-sys-color-background: #fefbff;
+    --md-sys-color-on-background: #1b1b1f;
+
+    --md-sys-color-error: #ba1a1a;
+    --md-sys-color-on-error: #ffffff;
+
+    /* Typography */
+    --md-sys-typescale-body-medium-font: Roboto, sans-serif;
+    --md-sys-typescale-body-medium-size: 14px;
+    --md-sys-typescale-label-small-size: 11px;
+    --md-sys-typescale-label-medium-size: 12px;
+
+    /* Elevation */
+    --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+    --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+    
+    /* Shape */
+    --md-sys-shape-corner-small: 8px;
+    --md-sys-shape-corner-medium: 12px;
+    --md-sys-shape-corner-extra-small: 4px;
+
+    /* LitFlow Specific Tokens (mapped to M3) */
+    --lit-flow-node-bg: var(--md-sys-color-surface);
+    --lit-flow-node-border: var(--md-sys-color-outline-variant);
+    --lit-flow-node-selected-border: var(--md-sys-color-primary);
+    --lit-flow-node-text: var(--md-sys-color-on-surface);
+    
+    --lit-flow-handle-source: var(--md-sys-color-secondary);
+    --lit-flow-handle-target: var(--md-sys-color-primary);
+    --lit-flow-handle-outline: var(--md-sys-color-surface);
+
+    --lit-flow-controls-bg: var(--md-sys-color-surface);
+    --lit-flow-controls-button-text: var(--md-sys-color-on-surface);
+    
+    --lit-flow-minimap-bg: var(--md-sys-color-surface);
+    --lit-flow-minimap-mask: rgba(0, 0, 0, 0.08);
+  }
+`;