@angflow/angular 0.0.8 → 0.0.9

package/README.md

@@ -1,203 +1,205 @@
-# @angflow/angular
-
-An Angular library for building node-based UIs, interactive flow charts, and diagrams. Built on top of `@angflow/system` — a republish of `@xyflow/system`, the same framework-agnostic core that powers [React Flow](https://reactflow.dev/) and [Svelte Flow](https://svelteflow.dev/).
-
-## Features
-
-- **Drag & drop nodes** with snap-to-grid support
-- **Multiple edge types** — bezier, straight, step, smooth-step, simple-bezier
-- **Custom nodes** — render any Angular component as a node (forms, charts, etc.)
-- **Custom edges** — build your own edge components
-- **Connections** — drag between handles or click-to-connect
-- **Selection** — click, shift-drag box select (partial mode), Ctrl/Cmd multi-select
-- **Keyboard shortcuts** — Delete/Backspace, Ctrl+A, Escape, arrow keys
-- **Pan & zoom** — scroll, pinch, double-click, or use the controls panel
-- **Minimap** — interactive viewport preview with customizable node styling
-- **Background** — dots, lines, or cross patterns with configurable gap/size
-- **Controls** — zoom in/out, fit view, lock interactivity
-- **Node toolbar** — context toolbars positioned relative to nodes
-- **Edge toolbar** — context toolbars positioned on edges
-- **Node resizer** — drag handles to resize nodes
-- **Accessibility** — ARIA labels, keyboard navigation, screen reader announcements
-- **Dark mode** — light/dark/system color mode support
-
-## Requirements
-
-- Angular 17+
-- Standalone components (no NgModule needed)
-
-## Installation
-
-```bash
-npm install @angflow/angular @angflow/system
-```
-
-## Quick Start
-
-```typescript
-import { Component } from '@angular/core';
-import {
-  NgFlowComponent,
-  HandleComponent,
-  BackgroundComponent,
-  ControlsComponent,
-  MiniMapComponent,
-  applyNodeChanges,
-  applyEdgeChanges,
-  Position,
-} from '@angflow/angular';
-import type { Node, Edge, Connection } from '@angflow/angular';
-import { addEdge } from '@angflow/system';
-
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [NgFlowComponent, BackgroundComponent, ControlsComponent, MiniMapComponent],
-  template: `
-    <div style="width: 100vw; height: 100vh;">
-      <ng-flow
-        [nodes]="nodes"
-        [edges]="edges"
-        [fitView]="true"
-        (nodesChange)="onNodesChange($event)"
-        (edgesChange)="onEdgesChange($event)"
-        (connect)="onConnect($event)"
-      >
-        <ng-flow-background variant="dots" />
-        <ng-flow-controls />
-        <ng-flow-minimap />
-      </ng-flow>
-    </div>
-  `,
-})
-export class App {
-  nodes: Node[] = [
-    { id: '1', type: 'input', position: { x: 250, y: 0 }, data: { label: 'Start' } },
-    { id: '2', position: { x: 250, y: 150 }, data: { label: 'Process' } },
-    { id: '3', type: 'output', position: { x: 250, y: 300 }, data: { label: 'End' } },
-  ];
-
-  edges: Edge[] = [
-    { id: 'e1-2', source: '1', target: '2' },
-    { id: 'e2-3', source: '2', target: '3' },
-  ];
-
-  onNodesChange(changes: any[]) {
-    this.nodes = applyNodeChanges(changes, this.nodes);
-  }
-
-  onEdgesChange(changes: any[]) {
-    this.edges = applyEdgeChanges(changes, this.edges);
-  }
-
-  onConnect(connection: Connection) {
-    this.edges = addEdge(connection, this.edges) as Edge[];
-  }
-}
-```
-
-## Example App
-
-A full example app lives at [`example-app/`](../../../example-app) in this repo. It's the best place to see working code for every feature — custom nodes and edges, sub-flows, node/edge toolbars, drag-from-sidebar, save/restore, connection validation, and more.
-
-```bash
-cd example-app
-npm install
-npm start          # opens http://localhost:4200
-```
-
-The app ships three sections:
-
-- **Gallery** ([`src/app/examples/`](../../../example-app/src/app/examples)) — focused, one-feature-per-page demos (overview, custom node/edge, edge types, floating edges, node resizer, connection validation, drag-from-sidebar, sub-flows, node/edge toolbars, custom minimap, background variants, save/restore)
-- **Showcase** ([`src/app/showcase/`](../../../example-app/src/app/showcase)) — an end-to-end demo with a node palette, inspector panel, and simulation service; a good template for a real app
-- **Kitchen Sink** ([`src/app/kitchen-sink/`](../../../example-app/src/app/kitchen-sink)) — exercises nearly every feature together with a live event log
-
-## Custom Nodes
-
-Create any Angular component and register it as a node type. Use the `nodrag` CSS class on interactive elements (inputs, dropdowns) to prevent drag interference.
-
-```typescript
-@Component({
-  selector: 'app-form-node',
-  standalone: true,
-  imports: [HandleComponent],
-  template: `
-    <ng-flow-handle type="target" [position]="Position.Top" />
-    <div class="my-node">
-      <h3>{{ data()?.title }}</h3>
-      <div class="nodrag">
-        <input [value]="data()?.name" (input)="onNameChange($event)" />
-        <select [value]="data()?.type" (change)="onTypeChange($event)">
-          <option value="string">String</option>
-          <option value="number">Number</option>
-        </select>
-      </div>
-    </div>
-    <ng-flow-handle type="source" [position]="Position.Bottom" />
-  `,
-})
-export class FormNodeComponent {
-  readonly Position = Position;
-  readonly id = input.required<string>();
-  readonly data = input<any>();
-  // ... other standard inputs: type, selected, dragging, zIndex, etc.
-
-  private flowService = inject(NgFlowService);
-
-  onNameChange(event: Event) {
-    this.flowService.updateNodeData(this.id(), { name: (event.target as HTMLInputElement).value });
-  }
-}
-```
-
-Register it:
-
-```typescript
-nodeTypes = { formNode: FormNodeComponent };
-```
-
-```html
-<ng-flow [nodes]="nodes" [edges]="edges" [nodeTypes]="nodeTypes" ...>
-```
-
-## Programmatic API
-
-Inject `NgFlowService` for viewport control, node/edge manipulation, and spatial queries:
-
-```typescript
-const flowService = inject(NgFlowService);
-
-flowService.fitView();
-flowService.zoomIn();
-flowService.addNodes({ id: '4', position: { x: 0, y: 0 }, data: { label: 'New' } });
-flowService.updateNodeData('2', { label: 'Updated' });
-flowService.deleteElements({ nodes: [{ id: '1' }] });
-flowService.screenToFlowPosition({ x: event.clientX, y: event.clientY });
-flowService.toObject(); // { nodes, edges, viewport }
-```
-
-## Architecture
-
-- **Signal-based state** — Angular 17+ signals for fine-grained reactivity (no RxJS in the store)
-- **OnPush everywhere** — all components use `ChangeDetectionStrategy.OnPush`
-- **@angflow/system core** — shares the same drag, pan/zoom, handle, and resize logic as React Flow and Svelte Flow (republished from `@xyflow/system`)
-- **Standalone components** — no NgModule, tree-shakeable
-
-## Keyboard Shortcuts
-
-| Shortcut | Action |
-|----------|--------|
-| Delete / Backspace | Remove selected elements |
-| Ctrl+A / Cmd+A | Select all |
-| Escape | Deselect all |
-| Arrow keys | Move selected nodes |
-| Shift + drag | Box select |
-| Ctrl/Cmd + click | Multi-select |
-
-## Credits
-
-Built on top of [xyflow](https://github.com/xyflow/xyflow) by [webkid GmbH](https://webkid.io/). The Angular port uses `@angflow/system` (a republish of `@xyflow/system`) for framework-agnostic core logic.
-
-## License
-
-MIT
+# @angflow/angular
+
+An Angular library for building node-based UIs, interactive flow charts, and diagrams. Built on top of `@angflow/system` — a republish of `@xyflow/system`, the same framework-agnostic core that powers [React Flow](https://reactflow.dev/) and [Svelte Flow](https://svelteflow.dev/).
+
+## Features
+
+- **Drag & drop nodes** with snap-to-grid support
+- **Multiple edge types** — bezier, straight, step, smooth-step, simple-bezier
+- **Custom nodes** — render any Angular component as a node (forms, charts, etc.)
+- **Custom edges** — build your own edge components
+- **Connections** — drag between handles or click-to-connect
+- **Selection** — click, shift-drag box select (partial mode), Ctrl/Cmd multi-select
+- **Keyboard shortcuts** — Delete/Backspace, Ctrl+A, Escape, arrow keys
+- **Pan & zoom** — scroll, pinch, double-click, or use the controls panel
+- **Minimap** — interactive viewport preview with customizable node styling
+- **Background** — dots, lines, or cross patterns with configurable gap/size
+- **Controls** — zoom in/out, fit view, lock interactivity
+- **Node toolbar** — context toolbars positioned relative to nodes
+- **Edge toolbar** — context toolbars positioned on edges
+- **Node resizer** — drag handles to resize nodes
+- **Accessibility** — ARIA labels, keyboard navigation, screen reader announcements
+- **Dark mode** — light/dark/system color mode support
+
+## Requirements
+
+- Angular 17+
+- Standalone components (no NgModule needed)
+
+## Installation
+
+```bash
+npm install @angflow/angular @angflow/system
+```
+
+## Quick Start
+
+```typescript
+import { Component } from '@angular/core';
+import {
+  NgFlowComponent,
+  HandleComponent,
+  BackgroundComponent,
+  ControlsComponent,
+  MiniMapComponent,
+  applyNodeChanges,
+  applyEdgeChanges,
+  Position,
+} from '@angflow/angular';
+import type { Node, Edge, Connection } from '@angflow/angular';
+import { addEdge } from '@angflow/system';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [NgFlowComponent, BackgroundComponent, ControlsComponent, MiniMapComponent],
+  template: `
+    <div style="width: 100vw; height: 100vh;">
+      <ng-flow
+        [nodes]="nodes"
+        [edges]="edges"
+        [fitView]="true"
+        (nodesChange)="onNodesChange($event)"
+        (edgesChange)="onEdgesChange($event)"
+        (connect)="onConnect($event)"
+      >
+        <ng-flow-background variant="dots" />
+        <ng-flow-controls />
+        <ng-flow-minimap />
+      </ng-flow>
+    </div>
+  `,
+})
+export class App {
+  nodes: Node[] = [
+    { id: '1', type: 'input', position: { x: 250, y: 0 }, data: { label: 'Start' } },
+    { id: '2', position: { x: 250, y: 150 }, data: { label: 'Process' } },
+    { id: '3', type: 'output', position: { x: 250, y: 300 }, data: { label: 'End' } },
+  ];
+
+  edges: Edge[] = [
+    { id: 'e1-2', source: '1', target: '2' },
+    { id: 'e2-3', source: '2', target: '3' },
+  ];
+
+  onNodesChange(changes: any[]) {
+    this.nodes = applyNodeChanges(changes, this.nodes);
+  }
+
+  onEdgesChange(changes: any[]) {
+    this.edges = applyEdgeChanges(changes, this.edges);
+  }
+
+  onConnect(connection: Connection) {
+    this.edges = addEdge(connection, this.edges) as Edge[];
+  }
+}
+```
+
+## Example App
+
+A full example app lives at [`examples/angular/`](../../examples/angular) in this repo. It's the best place to see working code for every feature — custom nodes and edges, sub-flows, node/edge toolbars, drag-from-sidebar, save/restore, connection validation, and more.
+
+```bash
+pnpm install          # from the repo root (first time only)
+cd examples/angular
+npm run dev           # opens http://localhost:4200
+```
+
+The example consumes `@angflow/angular` and `@angflow/system` via pnpm `workspace:*`, so local edits in `packages/angular/` are picked up immediately — no rebuild or reinstall step needed.
+
+The app ships three sections:
+
+- **Gallery** ([`src/app/examples/`](../../examples/angular/src/app/examples)) — focused, one-feature-per-page demos (overview, custom node/edge, edge types, floating edges, node resizer, connection validation, drag-from-sidebar, sub-flows, node/edge toolbars, custom minimap, background variants, save/restore)
+- **Showcase** ([`src/app/showcase/`](../../examples/angular/src/app/showcase)) — an end-to-end demo with a node palette, inspector panel, and simulation service; a good template for a real app
+- **Kitchen Sink** ([`src/app/kitchen-sink/`](../../examples/angular/src/app/kitchen-sink)) — exercises nearly every feature together with a live event log
+
+## Custom Nodes
+
+Create any Angular component and register it as a node type. Use the `nodrag` CSS class on interactive elements (inputs, dropdowns) to prevent drag interference.
+
+```typescript
+@Component({
+  selector: 'app-form-node',
+  standalone: true,
+  imports: [HandleComponent],
+  template: `
+    <ng-flow-handle type="target" [position]="Position.Top" />
+    <div class="my-node">
+      <h3>{{ data()?.title }}</h3>
+      <div class="nodrag">
+        <input [value]="data()?.name" (input)="onNameChange($event)" />
+        <select [value]="data()?.type" (change)="onTypeChange($event)">
+          <option value="string">String</option>
+          <option value="number">Number</option>
+        </select>
+      </div>
+    </div>
+    <ng-flow-handle type="source" [position]="Position.Bottom" />
+  `,
+})
+export class FormNodeComponent {
+  readonly Position = Position;
+  readonly id = input.required<string>();
+  readonly data = input<any>();
+  // ... other standard inputs: type, selected, dragging, zIndex, etc.
+
+  private flowService = inject(NgFlowService);
+
+  onNameChange(event: Event) {
+    this.flowService.updateNodeData(this.id(), { name: (event.target as HTMLInputElement).value });
+  }
+}
+```
+
+Register it:
+
+```typescript
+nodeTypes = { formNode: FormNodeComponent };
+```
+
+```html
+<ng-flow [nodes]="nodes" [edges]="edges" [nodeTypes]="nodeTypes" ...>
+```
+
+## Programmatic API
+
+Inject `NgFlowService` for viewport control, node/edge manipulation, and spatial queries:
+
+```typescript
+const flowService = inject(NgFlowService);
+
+flowService.fitView();
+flowService.zoomIn();
+flowService.addNodes({ id: '4', position: { x: 0, y: 0 }, data: { label: 'New' } });
+flowService.updateNodeData('2', { label: 'Updated' });
+flowService.deleteElements({ nodes: [{ id: '1' }] });
+flowService.screenToFlowPosition({ x: event.clientX, y: event.clientY });
+flowService.toObject(); // { nodes, edges, viewport }
+```
+
+## Architecture
+
+- **Signal-based state** — Angular 17+ signals for fine-grained reactivity (no RxJS in the store)
+- **OnPush everywhere** — all components use `ChangeDetectionStrategy.OnPush`
+- **@angflow/system core** — shares the same drag, pan/zoom, handle, and resize logic as React Flow and Svelte Flow (republished from `@xyflow/system`)
+- **Standalone components** — no NgModule, tree-shakeable
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| Delete / Backspace | Remove selected elements |
+| Ctrl+A / Cmd+A | Select all |
+| Escape | Deselect all |
+| Arrow keys | Move selected nodes |
+| Shift + drag | Box select |
+| Ctrl/Cmd + click | Multi-select |
+
+## Credits
+
+Built on top of [xyflow](https://github.com/xyflow/xyflow) by [webkid GmbH](https://webkid.io/). The Angular port uses `@angflow/system` (a republish of `@xyflow/system`) for framework-agnostic core logic.
+
+## License
+
+MIT

package/dist/esm/lib/components/controls/controls.component.d.ts

@@ -14,7 +14,10 @@ export declare class ControlsComponent {
     readonly zoomOutClick: import("@angular/core").OutputEmitterRef<void>;
     readonly fitViewClick: import("@angular/core").OutputEmitterRef<void>;
     readonly interactiveChange: import("@angular/core").OutputEmitterRef<boolean>;
-    readonly isLocked: import("@angular/core").WritableSignal<boolean>;
+    readonly isInteractive: import("@angular/core").Signal<boolean>;
+    readonly isLocked: import("@angular/core").Signal<boolean>;
+    readonly maxZoomReached: import("@angular/core").Signal<boolean>;
+    readonly minZoomReached: import("@angular/core").Signal<boolean>;
     onZoomIn(): void;
     onZoomOut(): void;
     onFitView(): void;

package/dist/esm/lib/components/controls/controls.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAKzE,qBAgEa,iBAAiB;IAC5B,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,aAAa,CAAyB;IAE9C,QAAQ,CAAC,QAAQ,qDAAuC;IACxD,QAAQ,CAAC,QAAQ,+CAAe;IAChC,QAAQ,CAAC,WAAW,+CAAe;IACnC,QAAQ,CAAC,eAAe,+CAAe;IACvC,QAAQ,CAAC,cAAc,2EAAoC;IAC3D,QAAQ,CAAC,WAAW,iEAAgD;IACpE,QAAQ,CAAC,SAAS,8CAA0C;IAG5D,QAAQ,CAAC,WAAW,iDAAkB;IACtC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,iBAAiB,oDAAqB;IAE/C,QAAQ,CAAC,QAAQ,kDAAiB;IAElC,QAAQ;IAKR,SAAS;IAKT,SAAS;IAKT,YAAY;yCAnCD,iBAAiB;2CAAjB,iBAAiB;CA2C7B"}
+{"version":3,"file":"controls.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/controls/controls.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;AAKzE,qBAkEa,iBAAiB;IAC5B,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,aAAa,CAAyB;IAE9C,QAAQ,CAAC,QAAQ,qDAAuC;IACxD,QAAQ,CAAC,QAAQ,+CAAe;IAChC,QAAQ,CAAC,WAAW,+CAAe;IACnC,QAAQ,CAAC,eAAe,+CAAe;IACvC,QAAQ,CAAC,cAAc,2EAAoC;IAC3D,QAAQ,CAAC,WAAW,iEAAgD;IACpE,QAAQ,CAAC,SAAS,8CAA0C;IAG5D,QAAQ,CAAC,WAAW,iDAAkB;IACtC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,YAAY,iDAAkB;IACvC,QAAQ,CAAC,iBAAiB,oDAAqB;IAK/C,QAAQ,CAAC,aAAa,0CAKpB;IACF,QAAQ,CAAC,QAAQ,0CAAyC;IAG1D,QAAQ,CAAC,cAAc,0CAAqE;IAC5F,QAAQ,CAAC,cAAc,0CAAqE;IAE5F,QAAQ;IAKR,SAAS;IAKT,SAAS;IAKT,YAAY;yCAhDD,iBAAiB;2CAAjB,iBAAiB;CAuD7B"}