Merge pull request #497 from synergycodes/main

Release v0.9.0

Author: piotrblaszczyk

.github/workflows/pr-check.yml

@@ -35,3 +35,13 @@ jobs:
 
       - name: Run unit tests
         run: pnpm run test
+
+      - name: Check API report
+        run: pnpm run api:check
+
+      - name: Upload API report if check failed
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: api-report
+          path: packages/ng-diagram/api-report/ng-diagram.api.md

.github/workflows/publish-npm.yml

@@ -20,6 +20,9 @@ jobs:
           node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
+      - name: Upgrade npm for trusted publishing
+        run: npm install -g npm@latest
+
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -41,8 +44,5 @@ jobs:
         run: cd packages/ng-diagram && pnpm build:prod
 
       - name: Publish to npm
-        run: |
-          cd packages/ng-diagram/dist/ng-diagram
-          npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm publish
+        working-directory: packages/ng-diagram/dist/ng-diagram

.prettierignore

@@ -16,3 +16,4 @@ pnpm-lock.yaml
 **/dist
 
 **/src/content/docs/api/**/*.md
+**/api-report/*.md

CHANGELOG.md

@@ -5,6 +5,45 @@ 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]
+
+## [0.9.0] - 2025-12-12
+
+### Added
+
+- API stability and deprecation policy documentation with defined stability levels and Angular version support matrix ([#462](https://github.com/synergycodes/ng-diagram/pull/462))
+- API Extractor integration for automated breaking change detection with CI validation ([#462](https://github.com/synergycodes/ng-diagram/pull/462))
+- Landing page diagram example in documentation ([#464](https://github.com/synergycodes/ng-diagram/pull/464))
+- [Floating edges](/docs/guides/edges/floating-edges/) for edges with no ports specified ([#465](https://github.com/synergycodes/ng-diagram/pull/465))
+- [Ports with custom content](/docs/guides/nodes/ports/#custom-content) - ports can now render custom Angular components instead of simple circles ([#468](https://github.com/synergycodes/ng-diagram/pull/468))
+- [`hideWatermark`](/docs/api/types/configuration/flowconfig/#hidewatermark) config option to hide the ngDiagram watermark via diagram configuration ([#469](https://github.com/synergycodes/ng-diagram/pull/469))
+- Expose [`computePartsBounds`](/docs/api/services/ngdiagrammodelservice/#computepartsbounds) method in API ([#477](https://github.com/synergycodes/ng-diagram/pull/477))
+- Added overload to [`getOverlappingNodes`](/docs/api/services/ngdiagrammodelservice/#getoverlappingnodes) to accept `Node` object in addition to node ID, supporting cases when the node object has newer data than the node in state (e.g., within middlewares) ([#486](https://github.com/synergycodes/ng-diagram/pull/486))
+- [`modelActionTypes`](/docs/api/types/middleware/middlewarecontext/#modelactiontypes) property on `MiddlewareContext` - an array containing all action types that triggered the middleware execution. For transactions, this includes the transaction name followed by all action types from commands executed within the transaction. For single commands, this is a single-element array ([#489](https://github.com/synergycodes/ng-diagram/pull/489))
+- Add grab cursor on background when panning ([#479](https://github.com/synergycodes/ng-diagram/pull/479))
+- Disable diagram panning by config [`viewportPanningEnabled`](/docs/api/types/configuration/flowconfig/#viewportpanningenabled) ([#480](https://github.com/synergycodes/ng-diagram/pull/480))
+- [Async transaction](/docs/guides/transactions/#async-transactions) support - transactions now accept async callbacks, allowing asynchronous operations like data fetching before adding or modifying the diagram ([#493](https://github.com/synergycodes/ng-diagram/pull/493))
+- [`waitForMeasurements`](/docs/guides/transactions/#waitformeasurements) transaction option - ensures the transaction promise resolves only after all DOM measurements (node sizes, port positions, edge labels) are complete. Useful when performing viewport operations like `zoomToFit()` after adding or modifying elements ([#493](https://github.com/synergycodes/ng-diagram/pull/493))
+
+### Changed
+
+- Standardized error messages across the ng-diagram library ([#463](https://github.com/synergycodes/ng-diagram/pull/463))
+
+### Fixed
+
+- Fixed misleading error when destroying `NgDiagramModelService` after engine is already destroyed. The error incorrectly reported "Library engine not initialized yet". Now the service checks if engine is available and skips listener cleanup if already destroyed. ([#466](https://github.com/synergycodes/ng-diagram/issues/466) - thanks for finding this [@Filipstrozik](https://github.com/Filipstrozik) 💪)
+- Fixed keyboard movement of nodes with arrow keys when using large snap step values ([#461](https://github.com/synergycodes/ng-diagram/pull/461))
+- Fixed drag-snapping issues with different snapping configurations. The issue still occurred when dragging multiple nodes at the same hierarchy level (i.e., nodes without groups) ([#470](https://github.com/synergycodes/ng-diagram/pull/470))
+- Fixed incorrectly computed measuredBounds for nodes ([#486](https://github.com/synergycodes/ng-diagram/pull/486))
+- Fixed missing edge arrowheads in Safari. Safari doesn't support `context-stroke` in SVG markers, so a fallback using inline markers with `currentColor` substitution is now used for Safari compatibility ([#487](https://github.com/synergycodes/ng-diagram/pull/487))
+- Fixed copy-paste retaining `groupId` when pasting nodes outside their group. Now `groupId` is only preserved when the group is also copied, with the reference updated to the new group's ID ([#491](https://github.com/synergycodes/ng-diagram/pull/491))
+- Fixed zoom to fit not working correctly on diagram initialization ([#492](https://github.com/synergycodes/ng-diagram/pull/492))
+- Fixed bullet points styles in the documentation ([#494](https://github.com/synergycodes/ng-diagram/pull/494))
+
+### Deprecated
+
+- `modelActionType` property on `MiddlewareContext` is now deprecated. Use `modelActionTypes` instead, which supports multiple actions from transactions. ([#489](https://github.com/synergycodes/ng-diagram/pull/489))
+
 ## [0.8.1] - 2025-11-20
 
 ### Added
@@ -71,7 +110,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/v0.8.1...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v0.9.0...HEAD
+[0.9.0]: https://github.com/synergycodes/ng-diagram/releases/tag/v0.9.0
 [0.8.1]: https://github.com/synergycodes/ng-diagram/releases/tag/v0.8.1
 [0.8.0]: https://github.com/synergycodes/ng-diagram/releases/tag/v0.8.0
 [0.4.0-beta.5]: https://github.com/synergycodes/ng-diagram/releases/tag/v0.4.0-beta.5

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

@@ -266,6 +266,22 @@ export class AppComponent {
         resizable: true,
         rotatable: true,
       },
+      {
+        id: '13',
+        position: { x: 1200, y: 250 },
+        data: { text: 'SN 777888' },
+        type: 'chip',
+        autoSize: false,
+        size: { width: 200, height: 200 },
+      },
+      {
+        id: '14',
+        position: { x: 1200, y: 550 },
+        data: { text: 'SN 877889' },
+        type: 'chip',
+        autoSize: false,
+        size: { width: 200, height: 300 },
+      },
     ],
     edges: [
       {
@@ -321,8 +337,6 @@ export class AppComponent {
         source: '9',
         target: '10',
         data: { labelPosition: 0.7 },
-        sourcePort: 'port-right',
-        targetPort: 'port-left',
         type: 'labelled-edge',
         routing: 'bezier',
       },
@@ -336,6 +350,87 @@ export class AppComponent {
         type: 'dashed-edge',
         routing: 'orthogonal',
       },
+      {
+        id: '11',
+        data: {},
+        source: '13',
+        sourcePort: 'port-left-4',
+        target: '14',
+        targetPort: 'port-left-1',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '12',
+        data: {},
+        source: '13',
+        sourcePort: 'port-left-4',
+        target: '14',
+        targetPort: 'port-left-2',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '13',
+        data: {},
+        source: '13',
+        sourcePort: 'port-left-4',
+        target: '14',
+        targetPort: 'port-left-3',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '14',
+        data: {},
+        source: '14',
+        sourcePort: 'port-right-3',
+        target: '13',
+        targetPort: 'port-right-4',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '15',
+        data: {},
+        source: '13',
+        sourcePort: 'port-right-3',
+        target: '14',
+        targetPort: 'port-right-4',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '16',
+        data: {},
+        source: '13',
+        sourcePort: 'port-right-2',
+        target: '14',
+        targetPort: 'port-right-1',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '17',
+        data: {},
+        source: '14',
+        sourcePort: 'port-right-2',
+        target: '13',
+        targetPort: 'port-right-2',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '18',
+        data: {},
+        source: '13',
+        sourcePort: 'port-right-1',
+        target: '14',
+        targetPort: 'port-left-4',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
+      {
+        id: '19',
+        data: {},
+        source: '13',
+        sourcePort: 'port-left-2',
+        target: '14',
+        targetPort: 'port-right-1',
+        targetArrowhead: 'ng-diagram-arrow',
+      },
     ],
   });
 }

apps/angular-demo/src/app/data/node-template.ts

@@ -1,4 +1,5 @@
 import { NgDiagramNodeTemplateMap } from 'ng-diagram';
+import { ChipNodeComponent } from '../node-template/chip-node/chip-node.component';
 import { CustomizedDefaultNodeComponent } from '../node-template/customized-default-node/customized-default-node.component';
 import { GroupNodeComponent } from '../node-template/group-node/group-node.component';
 import { ImageNodeComponent } from '../node-template/image-node/image-node.component';
@@ -11,6 +12,7 @@ export enum NodeTemplateType {
   Resizable = 'resizable',
   CustomizedDefault = 'customized-default',
   Group = 'group',
+  Chip = 'chip',
 }
 
 export const nodeTemplateMap = new NgDiagramNodeTemplateMap([
@@ -19,4 +21,5 @@ export const nodeTemplateMap = new NgDiagramNodeTemplateMap([
   [NodeTemplateType.Resizable, ResizableNodeComponent],
   [NodeTemplateType.Group, GroupNodeComponent],
   [NodeTemplateType.CustomizedDefault, CustomizedDefaultNodeComponent],
+  [NodeTemplateType.Chip, ChipNodeComponent],
 ]);

apps/angular-demo/src/app/node-template/chip-node/chip-node.component.html

@@ -0,0 +1,42 @@
+<ng-diagram-node-resize-adornment>
+  <div class="chip-node">{{ text() }}</div>
+  <ng-diagram-port id="port-left-1" type="both" style="top: 15%" side="left" originPoint="centerRight">
+    <div>🔤</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-left-2" type="both" style="top: 35%" side="left" originPoint="centerRight">
+    <div>A2</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-left-3" type="both" style="top: 55%" side="left" originPoint="centerRight">
+    <div>A3</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-left-4" type="both" style="top: 75%" side="left" originPoint="centerLeft">
+    <div>A4</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-right-1" type="both" style="top: 15%" side="right" originPoint="centerRight">
+    <div>🔢</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-right-2" type="both" style="top: 35%" side="right">
+    <div>🆎</div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-right-3" type="both" style="top: 55%" side="right">
+    <div style="display: flex; flex-direction: row; gap: 0.25rem; background: #fff; pointer-events: none">
+      <span>D7</span>
+      <img
+        width="25"
+        height="25"
+        alt=""
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABNklEQVR4AeyWgRGCMAxF1Ul0EzdRJ1En0U10E91E86A97BH0SKJ4HFxDy5H+voa0dDEb+JoA/jYCS0mNk9gjwG6igRaa0iyLFgEc6bQtXc1P6KF1EQXaUjVFA9in11epV2Jzp6GBFoMTCZFrigawTq+PUt/FvAWNXRIBIjXrSgPITlDXXv47EKhkbdqVaQDVi1/dJgBLBFhSLNNDxGeyALCUSKbNUAB5eVK7GSwRIPRsLmf36CJgAZBucSUKwJyYUQDmxIwCICHZbql7fZ8oAHNiRgH0mvWr8wSgRYBkIkr5YELba51a7wA4mnV27EHEfwMturR2Tw0gH58YnIOk92TMnxMtIttaphoAjuz1LWemYDD0mDmatAsJDQAHHFnb3hMx/Rk4RxXtwroACqdvPowf4FP0ngAAAP//V5oXqQAAAAZJREFUAwC6a0hBuVRVWgAAAABJRU5ErkJggg=="
+      />
+    </div>
+  </ng-diagram-port>
+  <ng-diagram-port id="port-right-4" type="both" style="top: 75%" side="right">
+    <div style="display: flex; flex-direction: row; gap: 0.25rem; padding: 0 0.25rem">
+      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="#000000" viewBox="0 0 256 256">
+        <path
+          d="M235.33,116.72,139.28,20.66a16,16,0,0,0-22.56,0l-96,96.06a16,16,0,0,0,0,22.56l96.05,96.06h0a16,16,0,0,0,22.56,0l96.05-96.06a16,16,0,0,0,0-22.56ZM128,224h0L32,128,128,32,224,128Z"
+        ></path>
+      </svg>
+      <span>D8</span>
+    </div>
+  </ng-diagram-port>
+</ng-diagram-node-resize-adornment>

apps/angular-demo/src/app/node-template/chip-node/chip-node.component.scss

@@ -0,0 +1,28 @@
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+
+  /* Non-applicable port CSS variables for custom styling */
+  // --ngd-port-size - is not needed for custom styled ports - size is determined by content
+
+  /* Applicable port CSS variables for custom styling */
+  --ngd-port-border-size: 0px;
+  // --ngd-port-border-radius: 0%; //disable border radius for square ports
+  // --ngd-port-background-color: yellow;
+  // --ngd-port-border-color: red;
+  // --ngd-port-background-color-hover: #1565c0;
+  // --ngd-port-border-color-hover: #0c373b;
+  // --ngd-port-border-size-hover: 0.25rem;
+
+  .chip-node {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    align-items: center;
+  }
+}

apps/angular-demo/src/app/node-template/chip-node/chip-node.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {
+  NgDiagramNodeResizeAdornmentComponent,
+  NgDiagramNodeSelectedDirective,
+  NgDiagramNodeTemplate,
+  NgDiagramPortComponent,
+  Node,
+} from 'ng-diagram';
+
+@Component({
+  selector: 'app-chip-node',
+  imports: [NgDiagramPortComponent, NgDiagramNodeResizeAdornmentComponent],
+  templateUrl: './chip-node.component.html',
+  styleUrls: ['./chip-node.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  hostDirectives: [{ directive: NgDiagramNodeSelectedDirective, inputs: ['node'] }],
+  host: {
+    '[class.ng-diagram-port-hoverable]': 'true',
+  },
+})
+export class ChipNodeComponent implements NgDiagramNodeTemplate<{ text: string }> {
+  text = computed(() => this.node()?.data?.text || '');
+  node = input.required<Node<{ text: string }>>();
+}

apps/angular-demo/src/app/node-template/image-node/image-node.component.scss

@@ -7,11 +7,11 @@
   background-color: white;
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
 
-img {
-  width: 150px;
-  height: 150px;
-  object-fit: cover;
-  border-radius: 4px;
+  & > img {
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
 }