Releases: synergycodes/ng-diagram
Releases · synergycodes/ng-diagram
v1.2.3 - Z-Ordering Rework & Measurement API
✨ Added
invalidateMeasurements(options?)method onNgDiagramService- forces re-measurement of nodes, ports, and edge labels viaResizeObserver. Call with no arguments to re-measure the entire diagram, or pass{ nodes: [...], edges: [...] }to target specific elements. Invalidating a node also re-measures all its ports. Use this when CSS-only repositioning (class toggles, style bindings) changes port positions without changing sizes, whichResizeObservercannot detect (#698)initialConnectedEdgesMaponMiddlewareContext- aMap<string, string[]>from node ID to connected edge IDs (source or target) captured before any modifications. Allows middleware to find edges connected to specific nodes without scanning all edges (#697)- MCP server: inline code snippets -
search_docsandget_docnow resolve<CodeSnippet>and<CodeViewer>tags in documentation pages, inlining the referenced source files directly into tool results. AI assistants see complete, runnable examples without needing access to the source repository (#699)
🧩 Changed
- Updated z-index defaults -
selectedZIndexchanged from1000to10000to provide more headroom for explicitzOrdervalues;temporaryEdgeZIndexchanged from1000to2147483647(max 32-bit int) so the edge being drawn always renders on top (#697)
🐛 Fixed
- Z-ordering reworked - rewrote the z-index assignment middleware and
bringToFront/sendToBackcommands, fixing multiple issues: children are now always rendered above their parent group regardless ofzOrdervalues, and siblings within a group are correctly re-sorted whenzOrder, selection, or group membership changes.(#697) - Fixed ports and edge labels not being measured when a node or edge is removed and re-added with the same ID in the same tick (#701)
v1.2.2 - Measurement Performance & Touch Fixes
✨ Added
getChangedNodeIds()andgetChangedEdgeIds()helpers onMiddlewareHelpers- return IDs of all nodes/edges with property changes in the current update (#671)
🧩 Changed
- Reworked port and label measurement pipeline to batch DOM reads and writes, reducing layout thrashing during bulk operations (#671)
🐛 Fixed
- Fixed
waitForMeasurementstransaction not tracking port measurements, causing the transaction to resolve before ports were measured (#685) - Fixed race condition when applying multiple port changes in a single transaction (#671)
- Fixed touch input (text fields, dropdowns) inside custom nodes not responding on iOS/iPadOS due to
preventDefaultin the box selection touch handler (#686)
v1.2.1 - Introducing Templates
✨ Added
- New Templates section - we're excited to introduce a dedicated space for production-grade starter kits curated and built by the ngDiagram team. Kicking it off with an interactive Org Chart starter kit featuring drag-and-drop reordering, expand/collapse subtrees, sidebar node editing, dynamic layouts, dark/light theme, minimap, and automatic tree layout powered by ELK.js. Clone it, explore the code, and use it as a launchpad for your own app! 🚀 (#667)
🐛 Fixed
- Fixed linking state not being cleared when edge drawing fails before creating a temporary edge (e.g., starting from a target port), which permanently blocked all subsequent edge drawing (#666)
v1.2.0 - Community Feedback & API Improvements
✨ Added
deferNodeUpdatesinput onNgDiagramMinimapComponent— freezes minimap node positions during drag, resize, and rotation operations, updating only when the interaction ends. Use this to eliminate minimap overhead in large diagrams (#638)watermarkPositionproperty onFlowConfig— allows configuring the watermark corner position viaNgDiagramPanelPosition, with automatic collision avoidance when a panel occupies the same corner (#621, #652) — thanks @jimmeryn for the issue submission! 🙏setViewport(x, y, scale)method onNgDiagramViewportService— sets absolute viewport position and scale in a single call, enabling custom-anchorzoomToFitimplementations (#591, #653) — thanks @MeMeMax for the discussion that led to this! 🙏- Generic type parameters on
NgDiagramModelServicegetter methods (getNodeById,getEdgeById,getConnectedNodes,getConnectedEdges,getChildren,getChildrenNested,getParentHierarchy,getOverlappingNodes,getNodesInRange,getNearestNodeInRange,getNodeEnds) — eliminates the need forascasts when accessing typednode.dataoredge.data(#654) - Exported
DataObjecttype from public API (#654) edgeDrawEndedevent — fires on every linking gesture completion (success and cancel), with source, drop position, and cancel reason (noTarget,invalidConnection,invalidTarget) (#637, #655) — thanks @ninjapiratica for the inspiration! 🙏selectNodeOnPortPressoption onLinkingConfig— whenfalse, port press only initiates linking without selecting the parent node. Defaulttruepreserves existing behavior (#637, #655) — thanks @ninjapiratica for the issue submission! 🙏
🧩 Changed
- Minimap now caches
MinimapNodeDatabyNodeobject reference, reusing cached data for unchanged nodes and reducing per-frame computation during interactions (#638)
🐛 Fixed
initializeModelcan now be safely called inside reactive contexts (computed,effect,linkedSignal) without throwing NG0602 (#608, #622)- Fixed palette drag preview not rendering when an ancestor element has
overflow: hidden(#624) - Fixed port position not updating when
sideororiginPointinput changes at runtime (#647) — thanks @ninjapiratica for the issue submission! 🙏 - Fixed
waitForMeasurementsincurring a 2-second timeout when a transaction includes no-op updates (#648) - Fixed node position not being snapped when node snapping is enabled and node is dropped from palette or pasted onto the canvas (#649)
- Fixed port hitbox (
::beforepseudo-element) not being centered on the port (#650) updateNodeDataandupdateEdgeDatanow accept interfaces and union types — relaxed generic constraint fromRecord<string, unknown> | undefinedtoDataObject(#654)
⚠️ Deprecated
edgeDrawnevent — useedgeDrawEndedinstead, which fires for both successful and cancelled draws.edgeDrawncontinues to fire for backward compatibility (#655)
v1.1.2 - MCP Improvements & Docs Fixes
v1.1.1 - MCP & Docs Fixes
✨ Added
- New MCP server for enhanced AI-assisted development with MiniSearch indexing and API symbol search (#590)
🐛 Fixed
- Fixed documentation pages being difficult to read on mobile devices due to excessive margins (#605 - thanks @martinboue for reporting this 💪)
v1.1.0 - Lifecycle Events & Stabilization
✨ Added
- Zoom support in Shortcut Manager - configurable keyboard shortcuts (
keyboardZoomIn,keyboardZoomOut) and wheel-based zoom with modifier keys (zoom) via newWheelOnlyShortcutDefinition(#571) - Start and end lifecycle events for node interactions:
nodeDragStarted/nodeDragEnded,nodeResizeStarted/nodeResizeEnded,nodeRotateStarted/nodeRotateEnded(#572) selectionGestureEndedevent - 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)- Absolute edge label positioning -
positionOnEdgenow accepts pixel-based strings ('30px','-20px') in addition to relative numbers (0–1). Negative pixel values measure from the target end (#580) - Default edge now supports
positionOnEdgedata property to control label positioning (defaults to0.5) (#581) nodeIdsproperty onDraggingActionStatecontaining IDs of all nodes participating in the drag operation (#572)movementStartedproperty onDraggingActionStatethat indicates whether pointer movement exceeded the drag threshold before entering the dragging state (#569)initializeModelAdapterfunction for initializing customModelAdapterimplementations. 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.initializeModelcontinues to create the defaultSignalModelAdapterfromPartial<Model>data. (#586)
🧩 Changed
- Custom Model example now uses
initializeModelAdapterand improvedLocalStorageModelAdapterwithPartial<Model>andModelChangestypes (#586)
🐛 Fixed
- Added explicit
ModelAdapterreturn type toinitializeModel()to prevent TypeScript errors when building withdeclaration: true(#573) (thanks @MeMeMax for reporting this 💪) - Edge labels vanishing permanently after model reinitialization (#585)
- Edge labels not being measured when loading a model with pre-existing edge points (e.g., from localStorage) (#586)
selectionChangedevent now fires after paste action, ensuring selection state stays in sync (#584)- Fixed compatibility issue with Angular 18 in default edge and minimap components (#587)
v1.0.0 - Stable, Feature-Complete Version
🎉 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 or join us on Discord!
✨ Added
- Virtualization for performance optimization on large diagrams - renders only visible elements within the viewport (#513)
- Minimap component for bird's-eye view navigation of diagrams (#537)
- Touch Gestures documentation article explaining touch device support (#530)
nodeDraggingEnabledconfig option and per-nodedraggableproperty to disable node dragging via mouse and keyboard (#539 - thanks for raising this @advayumare 💪)stopLinkingmethod to cancel programmatic linking action on touch devices (#524)
🧩 Changed
- Improved diagram panning on Mac with Figma-like trackpad experience (#498)
🐛 Fixed
- Fixed keyboard shortcuts not working when CapsLock is enabled. Letter key shortcuts (e.g., Ctrl+C, Ctrl+V, Ctrl+A) now match case-insensitively (#546)
- Fixed model reinitialization issues: viewport dimensions being undefined (causing
zoomToFitand linking failures) and missing_internalIdfor nodes (causing Angular tracking issues) (#523) toJSON()now strips readonly computed fields (measuredPorts,measuredBounds,computedZIndex) from serialized nodes and (measuredLabels,computedZIndex) from serialized edges. These are system-computed values that should be re-derived from the DOM on load, not persisted (#545)
v0.9.1 - Minor fixes for D&D and Groups
v0.9.0 - Floating Edges, Custom Port Content & Other Improvements
✨ Added
- API stability and deprecation policy documentation with defined stability levels and Angular version support matrix (#462)
- API Extractor integration for automated breaking change detection with CI validation (#462)
- Landing page diagram example in documentation (#464)
- Floating edges for edges with no ports specified (#465)
- Ports with custom content - ports can now render custom Angular components instead of simple circles (#468)
hideWatermarkconfig option to hide the ngDiagram watermark via diagram configuration (#469)- Expose
computePartsBoundsmethod in API (#477) - Added overload to
getOverlappingNodesto acceptNodeobject in addition to node ID, supporting cases when the node object has newer data than the node in state (e.g., within middlewares) (#486) modelActionTypesproperty onMiddlewareContext- 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)- Add grab cursor on background when panning (#479)
- Disable diagram panning by config
viewportPanningEnabled(#480) - Async transaction support - transactions now accept async callbacks, allowing asynchronous operations like data fetching before adding or modifying the diagram (#493)
waitForMeasurementstransaction option - ensures the transaction promise resolves only after all DOM measurements (node sizes, port positions, edge labels) are complete. Useful when performing viewport operations likezoomToFit()after adding or modifying elements (#493)
🧩 Changed
- Standardized error messages across the ng-diagram library (#463)
🐛 Fixed
- Fixed misleading error when destroying
NgDiagramModelServiceafter 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 - thanks for finding this @Filipstrozik 💪) - Fixed keyboard movement of nodes with arrow keys when using large snap step values (#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)
- Fixed incorrectly computed measuredBounds for nodes (#486)
- Fixed missing edge arrowheads in Safari. Safari doesn't support
context-strokein SVG markers, so a fallback using inline markers withcurrentColorsubstitution is now used for Safari compatibility (#487) - Fixed copy-paste retaining
groupIdwhen pasting nodes outside their group. NowgroupIdis only preserved when the group is also copied, with the reference updated to the new group's ID (#491) - Fixed zoom to fit not working correctly on diagram initialization (#492)
- Fixed bullet points styles in the documentation (#494)
modelActionTypeproperty onMiddlewareContextis now deprecated. UsemodelActionTypesinstead, which supports multiple actions from transactions. (#489)