Merge pull request #589 from synergycodes/main

Release v.1.1.0

Author: piotrblaszczyk

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 *.pem
 
 __tmp__*
+
+# Kiro
+.kiro

CHANGELOG.md

@@ -5,6 +5,33 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+## [1.1.0] - 2026-02-27
+
+### Added
+
+- Zoom support in [Shortcut Manager](/docs/guides/shortcut-manager/) - configurable keyboard shortcuts (`keyboardZoomIn`, `keyboardZoomOut`) and wheel-based zoom with modifier keys (`zoom`) via new `WheelOnlyShortcutDefinition` ([#571](https://github.com/synergycodes/ng-diagram/pull/571))
+- Start and end lifecycle events for node interactions: [`nodeDragStarted`](/docs/api/components/ngdiagramcomponent/#nodedragstarted)/[`nodeDragEnded`](/docs/api/components/ngdiagramcomponent/#nodedragended), [`nodeResizeStarted`](/docs/api/components/ngdiagramcomponent/#noderesizestarted)/[`nodeResizeEnded`](/docs/api/components/ngdiagramcomponent/#noderesizeended), [`nodeRotateStarted`](/docs/api/components/ngdiagramcomponent/#noderotatestarted)/[`nodeRotateEnded`](/docs/api/components/ngdiagramcomponent/#noderotateended) ([#572](https://github.com/synergycodes/ng-diagram/pull/572))
+- [`selectionGestureEnded`](/docs/api/types/events/selectiongestureendedevent) event - fires on pointerup after a selection gesture completes (object click, box selection, or select-all), providing the currently selected nodes and edges. Use this for actions that should run after selection is done, such as showing toolbars or updating panels ([#582](https://github.com/synergycodes/ng-diagram/pull/582))
+- [Absolute edge label positioning](/docs/guides/edges/labels/#absolute-positioning) - `positionOnEdge` now accepts pixel-based strings (`'30px'`, `'-20px'`) in addition to relative numbers (0–1). Negative pixel values measure from the target end ([#580](https://github.com/synergycodes/ng-diagram/pull/580))
+- Default edge now supports `positionOnEdge` data property to control [label positioning](/docs/guides/edges/labels/#using-labels-in-default-edges) (defaults to `0.5`) ([#581](https://github.com/synergycodes/ng-diagram/pull/581))
+- [`nodeIds`](/docs/api/types/action-state/draggingactionstate/#nodeids) property on `DraggingActionState` containing IDs of all nodes participating in the drag operation ([#572](https://github.com/synergycodes/ng-diagram/pull/572))
+- [`movementStarted`](/docs/api/types/action-state/draggingactionstate/#movementstarted) property on `DraggingActionState` that indicates whether pointer movement exceeded the drag threshold before entering the dragging state ([#569](https://github.com/synergycodes/ng-diagram/pull/569))
+- [`initializeModelAdapter`](/docs/api/utilities/initializemodeladapter) function for initializing custom [`ModelAdapter`](/docs/api/types/model/modeladapter/) implementations. Use this when providing a custom adapter (e.g., backed by localStorage, NgRx, or an external store). The function prepares the adapter for use with ng-diagram. `initializeModel` continues to create the default `SignalModelAdapter` from `Partial<Model>` data. ([#586](https://github.com/synergycodes/ng-diagram/pull/586))
+
+### Changed
+
+- [Custom Model example](/docs/examples/custom-model) now uses `initializeModelAdapter` and improved `LocalStorageModelAdapter` with `Partial<Model>` and `ModelChanges` types ([#586](https://github.com/synergycodes/ng-diagram/pull/586))
+
+### Fixed
+
+- Added explicit `ModelAdapter` return type to `initializeModel()` to prevent TypeScript errors when building with `declaration: true` ([#573](https://github.com/synergycodes/ng-diagram/pull/573)) (thanks [@MeMeMax](https://github.com/MeMeMax) for reporting this 💪)
+- Edge labels vanishing permanently after model reinitialization ([#585](https://github.com/synergycodes/ng-diagram/pull/585))
+- Edge labels not being measured when loading a model with pre-existing edge points (e.g., from localStorage) ([#586](https://github.com/synergycodes/ng-diagram/pull/586))
+- `selectionChanged` event now fires after paste action, ensuring selection state stays in sync ([#584](https://github.com/synergycodes/ng-diagram/pull/584))
+- Fixed compatibility issue with Angular 18 in default edge and minimap components ([#587](https://github.com/synergycodes/ng-diagram/pull/587))
+
 ## [1.0.0] - 2026-02-06
 
 🎉 **We've reached v1.0!** This milestone marks a stable, feature-complete library for building interactive diagrams in Angular. We'd love to hear your feedback — share your thoughts in our [GitHub Discussions](https://github.com/synergycodes/ng-diagram/discussions) or join us on [Discord](https://discord.gg/FDMjRuarFb)!
@@ -137,7 +164,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Initial tagged release.
 
-[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.0.0...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/synergycodes/ng-diagram/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/synergycodes/ng-diagram/compare/v0.9.1...v1.0.0
 [0.9.1]: https://github.com/synergycodes/ng-diagram/compare/v0.9.0...v0.9.1
 [0.9.0]: https://github.com/synergycodes/ng-diagram/releases/tag/v0.9.0

README.md

@@ -30,6 +30,10 @@ With ng-diagram, you can create:
 - **Circuit Diagrams**: Electronic schematics and technical drawings
 - **Custom Visualizations**: Any diagram type with custom node and edge templates
 
+## 🎮 Try the Demo
+
+See ng-diagram in action: **[Live Demo](https://synergycodes.github.io/ng-diagram-demo/)** | **[Source Code](https://github.com/synergycodes/ng-diagram-demo)**
+
 ## 🚀 Quick Start
 
 ### Installation
@@ -205,11 +209,13 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE](https:
 - **Documentation**: [https://www.ngdiagram.dev/docs](https://www.ngdiagram.dev/docs)
 - **GitHub**: [https://github.com/synergycodes/ng-diagram](https://github.com/synergycodes/ng-diagram)
 - **NPM**: [https://www.npmjs.com/package/ng-diagram](https://www.npmjs.com/package/ng-diagram)
+- **Website**: [https://www.ngdiagram.dev](https://www.ngdiagram.dev)
 
 ## 🆘 Support
 
 - **Issues**: [GitHub Issues](https://github.com/synergycodes/ng-diagram/issues)
-- **Discussions**: [GitHub Discussions](https://github.com/synergycodes/ng-diagram/discussions)
+- **Discussions**: [GitHub Discussions](https://github.com/synergycodes/ng-diagram/discussions), [Discord](https://discord.gg/FDMjRuarFb)
+- **Project consulting**: [Contact](https://www.ngdiagram.dev/contact)
 - **Documentation**: [https://www.ngdiagram.dev/docs](https://www.ngdiagram.dev/docs)
 
 ---

apps/angular-demo/src/app/app.component.html

@@ -6,20 +6,29 @@
     [config]="config"
     (diagramInit)="onDiagramInit($event)"
     (selectionChanged)="onSelectionChanged($event)"
+    (selectionGestureEnded)="onSelectionGestureEnded($event)"
     (groupMembershipChanged)="onGroupMembershipChanged($event)"
     (selectionRotated)="onSelectionRotated($event)"
+    (nodeRotateStarted)="onNodeRotateStarted($event)"
+    (nodeRotateEnded)="onNodeRotateEnded($event)"
     (edgeDrawn)="onEdgeDrawn($event)"
     (clipboardPasted)="onClipboardPasted($event)"
     (nodeResized)="onNodeResized($event)"
+    (nodeResizeStarted)="onNodeResizeStarted($event)"
+    (nodeResizeEnded)="onNodeResizeEnded($event)"
     (paletteItemDropped)="onPaletteItemDropped($event)"
     (selectionRemoved)="onSelectionRemoved($event)"
+    (nodeDragStarted)="onNodeDragStarted($event)"
+    (nodeDragEnded)="onNodeDragEnded($event)"
   >
     <ng-diagram-background type="grid"></ng-diagram-background>
   </ng-diagram>
   <ng-diagram-minimap [nodeStyle]="nodeStyle" [minimapNodeTemplateMap]="minimapNodeTemplateMap" />
   <app-toolbar
     (testVirtualizationClick)="enableVirtualizationTest()"
     (reinitializeModelClick)="onReinitializeModel()"
+    (saveModelClick)="onSaveModel()"
+    (loadModelClick)="onLoadModel()"
   />
   <app-palette [model]="paletteModel" />
 </div>

apps/angular-demo/src/app/app.component.ts

@@ -13,12 +13,20 @@ import {
   NgDiagramEdgeTemplateMap,
   NgDiagramMinimapComponent,
   NgDiagramMinimapNodeTemplateMap,
+  NgDiagramModelService,
   NgDiagramNodeTemplateMap,
   NgDiagramPaletteItem,
+  NodeDragEndedEvent,
+  NodeDragStartedEvent,
   NodeResizedEvent,
+  NodeResizeEndedEvent,
+  NodeResizeStartedEvent,
+  NodeRotateEndedEvent,
+  NodeRotateStartedEvent,
   PaletteItemDroppedEvent,
   provideNgDiagram,
   SelectionChangedEvent,
+  SelectionGestureEndedEvent,
   SelectionRemovedEvent,
   SelectionRotatedEvent,
   type Edge,
@@ -39,6 +47,8 @@ import { ImageMinimapNodeComponent } from './minimap-node-template/image-minimap
 import { PaletteComponent } from './palette/palette.component';
 import { ToolbarComponent } from './toolbar/toolbar.component';
 
+const LOCAL_STORAGE_KEY = 'ng-diagram-demo';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -55,6 +65,7 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 })
 export class AppComponent {
   private readonly injector = inject(Injector);
+  private readonly modelService = inject(NgDiagramModelService);
 
   paletteModel: NgDiagramPaletteItem[] = paletteModel;
   nodeTemplateMap: NgDiagramNodeTemplateMap = nodeTemplateMap;
@@ -143,6 +154,13 @@ export class AppComponent {
     });
   }
 
+  onSelectionGestureEnded(event: SelectionGestureEndedEvent): void {
+    console.log('Selection Gesture Ended:', {
+      nodes: event.nodes.map((n: Node) => n.id),
+      edges: event.edges.map((e: Edge) => e.id),
+    });
+  }
+
   onEdgeDrawn(event: EdgeDrawnEvent): void {
     console.log('Edge Drawn:', {
       edge: event.edge.id,
@@ -170,6 +188,18 @@ export class AppComponent {
     });
   }
 
+  onNodeResizeStarted(event: NodeResizeStartedEvent): void {
+    console.log('Node Resize Started:', {
+      node: event.node.id,
+    });
+  }
+
+  onNodeResizeEnded(event: NodeResizeEndedEvent): void {
+    console.log('Node Resize Ended:', {
+      node: { id: event.node.id, size: event.node.size },
+    });
+  }
+
   onPaletteItemDropped(event: PaletteItemDroppedEvent): void {
     console.log('Palette Item Dropped:', {
       node: event.node.id,
@@ -209,6 +239,42 @@ export class AppComponent {
     });
   }
 
+  onNodeRotateStarted(event: NodeRotateStartedEvent): void {
+    console.log('Node Rotate Started:', {
+      node: event.node.id,
+    });
+  }
+
+  onNodeRotateEnded(event: NodeRotateEndedEvent): void {
+    console.log('Node Rotate Ended:', {
+      node: { id: event.node.id, angle: event.node.angle },
+    });
+  }
+
+  onNodeDragStarted(event: NodeDragStartedEvent): void {
+    console.log('Node Drag Started:', {
+      nodes: event.nodes.map((n: Node) => n.id),
+    });
+  }
+
+  onNodeDragEnded(event: NodeDragEndedEvent): void {
+    console.log('Node Drag Ended:', {
+      nodes: event.nodes.map((n: Node) => ({ id: n.id, position: n.position })),
+    });
+  }
+
+  onSaveModel(): void {
+    localStorage.setItem(LOCAL_STORAGE_KEY, this.modelService.toJSON());
+  }
+
+  onLoadModel(): void {
+    const json = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (!json) return;
+
+    const data = JSON.parse(json);
+    this.model = initializeModel(data, this.injector);
+  }
+
   onReinitializeModel(): void {
     this.config = {
       ...this.config,

apps/angular-demo/src/app/data/default-model.ts

@@ -139,7 +139,7 @@ export const defaultModel: DiagramModel = {
       id: '3',
       source: '5',
       target: '6',
-      data: { labelPosition: '0.45' },
+      data: { labelPosition: 0.45 },
       sourcePort: 'port-right',
       targetPort: 'port-left',
       type: 'labelled-edge',

apps/angular-demo/src/app/edge-template/labelled-edge/labelled-edge.component.ts

@@ -1,5 +1,11 @@
 import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
-import { Edge, NgDiagramBaseEdgeComponent, NgDiagramBaseEdgeLabelComponent, NgDiagramEdgeTemplate } from 'ng-diagram';
+import {
+  Edge,
+  EdgeLabelPosition,
+  NgDiagramBaseEdgeComponent,
+  NgDiagramBaseEdgeLabelComponent,
+  NgDiagramEdgeTemplate,
+} from 'ng-diagram';
 
 /**
  * Simple edge with a single label at the center.
@@ -21,5 +27,5 @@ export class LabelledEdgeComponent implements NgDiagramEdgeTemplate {
 }
 
 interface Data {
-  labelPosition?: number;
+  labelPosition?: EdgeLabelPosition;
 }

apps/angular-demo/src/app/toolbar/toolbar.component.html

@@ -3,8 +3,13 @@
   <button (click)="onLinkCreationClick()">Start Link Creation</button>
   <button [disabled]="!isNodeSelected()" (click)="onCenterOnClick()">Center on selected node</button>
   <button [disabled]="!isNodeSelected()" (click)="onChangeNodeTypeClick()">Change Node Type</button>
+  <button [disabled]="!selectedLabelledEdge()" (click)="onToggleLabelPositionClick()">
+    {{ isLabelAbsolute() ? 'Label: Absolute → Relative' : 'Label: Relative → Absolute' }}
+  </button>
   <button (click)="onZoomToFitClick()">Zoom to fit</button>
   <button (click)="onAsyncTransactionWithMeasurementsDemo()">Async + Measurements + Zoom</button>
+  <button (click)="saveModelClick.emit()">Save to localStorage</button>
+  <button (click)="loadModelClick.emit()">Load from localStorage</button>
   <button (click)="testVirtualizationClick.emit()">Test Virtualization</button>
   <button (click)="reinitializeModelClick.emit()">Reinitialize Model</button>
 </div>

apps/angular-demo/src/app/toolbar/toolbar.component.ts

@@ -1,6 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, computed, inject, output } from '@angular/core';
 import {
+  Edge,
+  EdgeLabelPosition,
   NgDiagramModelService,
   NgDiagramSelectionService,
   NgDiagramService,
@@ -25,11 +27,35 @@ export class ToolbarComponent {
 
   reinitializeModelClick = output<void>();
   testVirtualizationClick = output<void>();
+  saveModelClick = output<void>();
+  loadModelClick = output<void>();
 
   isNodeSelected = computed(() => this.ngDiagramSelectionService.selection().nodes.length > 0);
 
+  selectedLabelledEdge = computed(() => {
+    const edges = this.ngDiagramSelectionService.selection().edges;
+    return edges.find((edge: Edge) => edge.type === 'labelled-edge') ?? null;
+  });
+
+  isLabelAbsolute = computed(() => {
+    const edge = this.selectedLabelledEdge();
+    if (!edge) return false;
+    const pos = (edge.data as { labelPosition?: EdgeLabelPosition }).labelPosition;
+    return typeof pos === 'string';
+  });
+
   isDebugModeEnabled = computed(() => this.ngDiagramService.config().debugMode || false);
 
+  onToggleLabelPositionClick(): void {
+    const edge = this.selectedLabelledEdge();
+    if (!edge) return;
+
+    const currentPos = (edge.data as { labelPosition?: EdgeLabelPosition }).labelPosition ?? 0.5;
+    const newPos: EdgeLabelPosition = typeof currentPos === 'string' ? 0.5 : '50px';
+
+    this.ngDiagramModelService.updateEdgeData(edge.id, { ...edge.data, labelPosition: newPos });
+  }
+
   onToggleDebugModeClick(): void {
     this.ngDiagramService.updateConfig({ debugMode: !this.isDebugModeEnabled() });
   }

apps/docs/astro.config.mjs

@@ -145,6 +145,7 @@ export default defineConfig({
         }),
       ],
       components: {
+        SiteTitle: './src/components/site-title/site-title.astro',
         SocialIcons: './src/components/social-icons/social-icons.astro',
         PageTitle: './src/components/page-title/page-title.astro',
         ThemeProvider: './src/components/ForceDarkTheme.astro',