ngDiagram v1.3.0 - Awaitable API, Cancelable Gestures & 15+ Stability Fixes

[lukasz-jazwa]

We're excited to announce ngDiagram v1.3.0, one of our biggest releases so far, focused on stability and control! 🚀

Awaitable API ⏳

Every mutating method on the public services (NgDiagramModelService, NgDiagramNodeService, NgDiagramSelectionService, NgDiagramClipboardService, NgDiagramGroupsService, NgDiagramViewportService) now returns a Promise<void> that resolves once the change has been applied to the model. The next line of code reads the updated state:

await model.updateNode(nodeId, { position: { x: 100, y: 100 } });
const node = model.getNodeById(nodeId); // already updated

Need real dimensions, for example before zoomToFit() or centerOnNode()? Pass { waitForMeasurements: true } directly to the method:

await model.addNodes(nodes, { waitForMeasurements: true });
viewport.zoomToFit();

transaction() and invalidateMeasurements() are awaitable too: every transaction() overload now returns the commit promise, and invalidateMeasurements() resolves once the triggered re-measurements have settled.

No breaking changes: the return types changed from void to Promise<void>, so existing call sites keep working and ignoring the promise is fine. One caveat: do not await these promises from inside a middleware, the update pipeline is not re-entrant. Fire-and-forget calls are safe there.

Cancel gestures ⌨️

The new NgDiagramService.cancelActiveInteraction() aborts the active drag, resize, rotate, linking or pan gesture and restores the pre-gesture state: dragged nodes snap back, resized and rotated nodes regain their original geometry, and the temporary edge is discarded. It's bound to Escape by default via the new cancelInteraction shortcut action.

To let you react to cancellations, edgeDrawEnded gains a cancelled reason, and nodeDragEnded, nodeResizeEnded and nodeRotateEnded gain an optional cancelReason field.

Resize control 📐

Two new ways to fine-tune resizing:

• activeSides input on ng-diagram-node-resize-adornment limits which sides of a node can be grabbed, for example [activeSides]="['right', 'bottom']" for a node anchored at its top-left corner. Omitting the input keeps all four sides active, so existing templates are unaffected.
• Resize snap offsets: with the new computeSnapOffsetForNodeSize and defaultResizeSnapOffset options on SnappingConfig, snapped node sizes follow the sequence offset + n * snap per axis. A node with a 60px header and a 50px vertical snap can now snap to 60, 110, 160 instead of 50, 100, 150.

Public default edge label 🧩

NgDiagramDefaultEdgeLabelComponent is now exported from the package, so custom edge templates can compose it inside ng-diagram-base-edge-label and reuse the default label look: theme-aware chip, hover and selection highlights included. The new --edge-label-border-color-hover and --edge-label-border-color-selected CSS variables let you override the highlight colors.

Stability: 15+ fixes 🛡️

This release puts a lot of work into making the update pipeline and gestures predictable:

• a throwing middleware or user callback no longer freezes the diagram
• drag, resize, rotate and linking stay consistent with slow async middlewares, and start/end events always come in pairs
• overlapping transactions no longer lose updates
• releasing the pointer mid-movement keeps the full gesture, so the final geometry always matches where the pointer stopped
• port and edge-label measurements no longer get lost during rapid re-rendering, for example with virtualization while panning
• plus fixes around touch gestures, resize snapping with groups, and dangling edge persistence

The full list is in the changelog.

Growing with the Community

Big thanks to @logan-brd for the reports, reproductions and suggestions that shaped parts of this release! 🙏

If you're building with ngDiagram, we'd love to hear about it. Share your project, ask questions, or just say hi in Discord or right here in Discussions.

Links:

• Full Changelog
• Documentation
• npm package
• Discord