Merge pull request #516 from synergycodes/main

Release v0.9.1

Author: piotrblaszczyk

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.1] - 2026-01-08
+
+### Fixed
+
+- Fixed resizing group with rotated child nodes ([#504](https://github.com/synergycodes/ng-diagram/pull/504))
+- Fixed error on drag&drop HTML object (not palette node) to the diagram ([#510](https://github.com/synergycodes/ng-diagram/pull/510))
+
 ## [0.9.0] - 2025-12-12
 
 ### Added
@@ -110,7 +117,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.9.0...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v0.9.1...HEAD
+[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
 [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

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

@@ -60,6 +60,9 @@ export class AppComponent {
         padding: [50, 50, 100, 350],
       },
     },
+    resize: {
+      allowResizeBelowChildrenBounds: false,
+    },
     background: {
       cellSize: { width: 10, height: 10 },
     },
@@ -282,6 +285,16 @@ export class AppComponent {
         autoSize: false,
         size: { width: 200, height: 300 },
       },
+      {
+        id: '15',
+        position: { x: -200, y: 500 },
+        data: {},
+        size: { width: 300, height: 200 },
+        autoSize: false,
+        type: 'custom-group',
+        isGroup: true,
+        rotatable: true,
+      },
     ],
     edges: [
       {

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

@@ -11,7 +11,7 @@ export enum NodeTemplateType {
   Image = 'image',
   Resizable = 'resizable',
   CustomizedDefault = 'customized-default',
-  Group = 'group',
+  Group = 'custom-group',
   Chip = 'chip',
 }
 

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

@@ -1,3 +1,4 @@
+<ng-diagram-node-rotate-adornment />
 <ng-diagram-node-resize-adornment>
   <div class="group-node" ngDiagramNodeSelected [node]="node()" ngDiagramGroupHighlighted>
     <div class="group-node-header">

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

@@ -12,7 +12,7 @@
   flex-direction: column;
 
   gap: 16px;
-  background: rgba(255, 255, 255, 0.85);
+  background-color: white;
   border-radius: 16px;
   overflow: hidden;
 }

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

@@ -4,12 +4,18 @@ import {
   NgDiagramGroupHighlightedDirective,
   NgDiagramGroupNodeTemplate,
   NgDiagramNodeResizeAdornmentComponent,
+  NgDiagramNodeRotateAdornmentComponent,
   NgDiagramNodeSelectedDirective,
 } from 'ng-diagram';
 
 @Component({
   selector: 'app-group-node',
-  imports: [NgDiagramNodeResizeAdornmentComponent, NgDiagramNodeSelectedDirective, NgDiagramGroupHighlightedDirective],
+  imports: [
+    NgDiagramNodeResizeAdornmentComponent,
+    NgDiagramNodeSelectedDirective,
+    NgDiagramGroupHighlightedDirective,
+    NgDiagramNodeRotateAdornmentComponent,
+  ],
   templateUrl: './group-node.component.html',
   styleUrls: ['./group-node.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

apps/docs/src/content/docs/changelog.mdx

@@ -12,6 +12,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.1] - 2026-01-08
+
+### Fixed
+
+- Fixed resizing group with rotated child nodes ([#504](https://github.com/synergycodes/ng-diagram/pull/504))
+- Fixed error on drag&drop HTML object (not palette node) to the diagram ([#510](https://github.com/synergycodes/ng-diagram/pull/510))
+
 ## [0.9.0] - 2025-12-12
 
 ### Added
@@ -115,7 +122,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.9.0...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v0.9.1...HEAD
+[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
 [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

packages/ng-diagram/projects/ng-diagram/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-diagram",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "A robust Angular library for building interactive diagrams, node-based editors, and visual programming interfaces",
   "keywords": [
     "angular",

packages/ng-diagram/projects/ng-diagram/src/core/src/utils/group-size.ts

@@ -1,4 +1,5 @@
 import { Bounds, GroupNode, Node, Rect } from '../types';
+import { getNodeMeasuredBounds } from './dimensions';
 import { getBoundsFromRect, getRect, getRectFromBounds } from './rects-points-sizes';
 
 interface CalculateGroupRectOptions {
@@ -32,7 +33,9 @@ export const calculateGroupBounds = (
         throw new Error(`calculateGroupBounds: child node ${node.id} does not have both width and height defined`);
       }
 
-      const nodeBounds = getBoundsFromRect(getRect(node));
+      const nodeBounds = node.measuredBounds
+        ? getBoundsFromRect(node.measuredBounds)
+        : getBoundsFromRect(getNodeMeasuredBounds(node));
 
       acc.left = Math.min(acc.left, nodeBounds.left);
       acc.top = Math.min(acc.top, nodeBounds.top);

packages/ng-diagram/projects/ng-diagram/src/lib/directives/input-events/palette-drop/palette-drop.directive.ts

@@ -21,6 +21,19 @@ The palette drop event will continue with empty data object.
 Documentation: https://www.ngdiagram.dev/docs/guides/palette/
 `;
 
+const PALETTE_DROP_NOT_NODE_ERROR = () =>
+  `[ngDiagram] Invalid drop data: expected type "NgDiagramPaletteItem".
+
+Received data: "UNKNOWN"
+
+To fix this error:
+  • Ensure the dragged data is of type "NgDiagramPaletteItem" and is dragged from a valid palette item.
+
+The palette drop event will continue with empty data object.
+
+Documentation: https://www.ngdiagram.dev/docs/guides/palette/
+`;
+
 @Directive({
   selector: '[ngDiagramPaletteDrop]',
   standalone: true,
@@ -37,13 +50,16 @@ export class PaletteDropDirective {
     event.preventDefault();
     const dataString = event.dataTransfer?.getData('text/plain');
     const baseEvent = this.inputEventsRouterService.getBaseEvent(event);
-
     let parsedData = {};
+
     if (dataString) {
       try {
         parsedData = JSON.parse(dataString);
       } catch (error) {
-        console.error(PALETTE_DROP_JSON_PARSE_ERROR(dataString, error));
+        if (!this.paletteService.draggedNode()) {
+          return console.warn(PALETTE_DROP_NOT_NODE_ERROR());
+        }
+        return console.error(PALETTE_DROP_JSON_PARSE_ERROR(dataString, error));
       }
     }