Skip to content

Releases: synergycodes/ng-diagram

v1.2.3 - Z-Ordering Rework & Measurement API

07 May 13:59
835c0f5

Choose a tag to compare

✨ Added

  • invalidateMeasurements(options?) method on NgDiagramService - forces re-measurement of nodes, ports, and edge labels via ResizeObserver. 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, which ResizeObserver cannot detect (#698)
  • initialConnectedEdgesMap on MiddlewareContext - a Map<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_docs and get_doc now 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 - selectedZIndex changed from 1000 to 10000 to provide more headroom for explicit zOrder values; temporaryEdgeZIndex changed from 1000 to 2147483647 (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/sendToBack commands, fixing multiple issues: children are now always rendered above their parent group regardless of zOrder values, and siblings within a group are correctly re-sorted when zOrder, 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

30 Apr 13:05
f1dd029

Choose a tag to compare

✨ Added

  • getChangedNodeIds() and getChangedEdgeIds() helpers on MiddlewareHelpers - 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 waitForMeasurements transaction 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 preventDefault in the box selection touch handler (#686)

v1.2.1 - Introducing Templates

21 Apr 12:06
693cbb6

Choose a tag to compare

✨ 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

20 Apr 14:06
65a2ca1

Choose a tag to compare

✨ Added

  • deferNodeUpdates input on NgDiagramMinimapComponent — 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)
  • watermarkPosition property on FlowConfig — allows configuring the watermark corner position via NgDiagramPanelPosition, with automatic collision avoidance when a panel occupies the same corner (#621, #652) — thanks @jimmeryn for the issue submission! 🙏
  • setViewport(x, y, scale) method on NgDiagramViewportService — sets absolute viewport position and scale in a single call, enabling custom-anchor zoomToFit implementations (#591, #653) — thanks @MeMeMax for the discussion that led to this! 🙏
  • Generic type parameters on NgDiagramModelService getter methods (getNodeById, getEdgeById, getConnectedNodes, getConnectedEdges, getChildren, getChildrenNested, getParentHierarchy, getOverlappingNodes, getNodesInRange, getNearestNodeInRange, getNodeEnds) — eliminates the need for as casts when accessing typed node.data or edge.data (#654)
  • Exported DataObject type from public API (#654)
  • edgeDrawEnded event — 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! 🙏
  • selectNodeOnPortPress option on LinkingConfig — when false, port press only initiates linking without selecting the parent node. Default true preserves existing behavior (#637, #655) — thanks @ninjapiratica for the issue submission! 🙏

🧩 Changed

  • Minimap now caches MinimapNodeData by Node object reference, reusing cached data for unchanged nodes and reducing per-frame computation during interactions (#638)

🐛 Fixed

  • initializeModel can 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 side or originPoint input changes at runtime (#647) — thanks @ninjapiratica for the issue submission! 🙏
  • Fixed waitForMeasurements incurring 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 (::before pseudo-element) not being centered on the port (#650)
  • updateNodeData and updateEdgeData now accept interfaces and union types — relaxed generic constraint from Record<string, unknown> | undefined to DataObject (#654)

⚠️ Deprecated

  • edgeDrawn event — use edgeDrawEnded instead, which fires for both successful and cancelled draws. edgeDrawn continues to fire for backward compatibility (#655)

v1.1.2 - MCP Improvements & Docs Fixes

17 Mar 15:21
fd4d85b

Choose a tag to compare

🧩 Changed

  • Updated MCP server README with ASCII diagrams, Windows setup instructions, and streamlined documentation (#610)
  • Added MCP Server documentation page and updated roadmap status (#610)

🐛 Fixed

  • Fixed broken internal documentation URLs in Configuration, Edges, Changelog, and Policies pages (#610)
  • Exported missing PanningActionState and SelectionActionState types from public API (#610)

v1.1.1 - MCP & Docs Fixes

12 Mar 15:08
0206e8b

Choose a tag to compare

✨ 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

27 Feb 13:41
5f36a2f

Choose a tag to compare

✨ Added

  • Zoom support in Shortcut Manager - configurable keyboard shortcuts (keyboardZoomIn, keyboardZoomOut) and wheel-based zoom with modifier keys (zoom) via new WheelOnlyShortcutDefinition (#571)
  • Start and end lifecycle events for node interactions: nodeDragStarted/nodeDragEnded, nodeResizeStarted/nodeResizeEnded, nodeRotateStarted/nodeRotateEnded (#572)
  • selectionGestureEnded 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)
  • Absolute edge label 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)
  • Default edge now supports positionOnEdge data property to control label positioning (defaults to 0.5) (#581)
  • nodeIds property on DraggingActionState containing IDs of all nodes participating in the drag operation (#572)
  • movementStarted property on DraggingActionState that indicates whether pointer movement exceeded the drag threshold before entering the dragging state (#569)
  • initializeModelAdapter function for initializing custom 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)

🧩 Changed

  • Custom Model example now uses initializeModelAdapter and improved LocalStorageModelAdapter with Partial<Model> and ModelChanges types (#586)

🐛 Fixed

  • Added explicit ModelAdapter return type to initializeModel() to prevent TypeScript errors when building with declaration: 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)
  • selectionChanged event 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

06 Feb 13:50
22febac

Choose a tag to compare

🎉 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

🧩 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 zoomToFit and linking failures) and missing _internalId for 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

08 Jan 11:47
2c847ad

Choose a tag to compare

🐛 Fixed

  • Fixed resizing group with rotated child nodes (#504)
  • Fixed error on drag&drop HTML object (not palette node) to the diagram (#510)

v0.9.0 - Floating Edges, Custom Port Content & Other Improvements

12 Dec 12:52
b5ccb9e

Choose a tag to compare

✨ 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)
  • hideWatermark config option to hide the ngDiagram watermark via diagram configuration (#469)
  • Expose computePartsBounds method in API (#477)
  • Added overload to 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)
  • 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)
  • 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)
  • 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)

🧩 Changed

  • Standardized error messages across the ng-diagram library (#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 - 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-stroke in SVG markers, so a fallback using inline markers with currentColor substitution is now used for Safari compatibility (#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)
  • Fixed zoom to fit not working correctly on diagram initialization (#492)
  • Fixed bullet points styles in the documentation (#494)

⚠️ Deprecated

  • modelActionType property on MiddlewareContext is now deprecated. Use modelActionTypes instead, which supports multiple actions from transactions. (#489)