[NGD-116] Fix palette drag preview clipping when ancestor has overflo… (#624)

* [NGD-116] Fix palette drag preview clipping when ancestor has overflow:hidden

* improve

* Update changelog

Author: piotrblaszczyk

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `initializeModel` can now be safely called inside reactive contexts (`computed`, `effect`, `linkedSignal`) without throwing NG0602 ([#608](https://github.com/synergycodes/ng-diagram/issues/608), [#622](https://github.com/synergycodes/ng-diagram/pull/622))
+- Fixed palette drag preview not rendering when an ancestor element has `overflow: hidden` ([#624](https://github.com/synergycodes/ng-diagram/pull/624))
 
 ## [1.1.2] - 2026-03-17
 

apps/angular-demo/src/app/palette/palette.component.scss

@@ -7,6 +7,7 @@
   background: var(--ngd-ui-bg-primary-default);
   padding: 16px;
   box-sizing: border-box;
+  overflow: hidden;
 
   & .palette {
     flex-direction: column;

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

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `initializeModel` can now be safely called inside reactive contexts (`computed`, `effect`, `linkedSignal`) without throwing NG0602 ([#608](https://github.com/synergycodes/ng-diagram/issues/608), [#622](https://github.com/synergycodes/ng-diagram/pull/622))
+- Fixed palette drag preview not rendering when an ancestor element has `overflow: hidden` ([#624](https://github.com/synergycodes/ng-diagram/pull/624))
 
 ## [1.1.2] - 2026-03-17
 

packages/ng-diagram/projects/ng-diagram/src/lib/components/palette/item-preview/ng-diagram-palette-item-preview.component.html

@@ -1,7 +1,5 @@
 <div #preview [class.dragged-node]="isSafari" [style.zoom]="isSafari ? scale() : null">
-  @if (isVisible()) {
-    <div [class.dragged-node]="!isSafari" [style.transform]="!isSafari ? scaleTransform : null">
-      <ng-content></ng-content>
-    </div>
-  }
+  <div [class.dragged-node]="!isSafari" [style.transform]="!isSafari ? scaleTransform : null">
+    <ng-content></ng-content>
+  </div>
 </div>

packages/ng-diagram/projects/ng-diagram/src/lib/components/palette/item/ng-diagram-palette-item.component.ts

@@ -41,10 +41,7 @@ export class NgDiagramPaletteItemComponent {
 
   /** @internal */
   onDragStart(event: DragEvent) {
-    const previewHtmlElement = this.paletteItemPreviewComponent()?.preview();
-    if (previewHtmlElement && previewHtmlElement.nativeElement) {
-      event.dataTransfer?.setDragImage(previewHtmlElement.nativeElement, 0, 0);
-    }
+    this.setDragPreviewImage(event);
     this.paletteService.onDragStartFromPalette(event, this.item());
   }
 
@@ -58,4 +55,27 @@ export class NgDiagramPaletteItemComponent {
     event.preventDefault();
     this.paletteService.onMouseDown(this.item(), this.paletteItemPreviewComponent()?.id || '');
   }
+
+  /**
+   * Clones the preview element and appends it to document.body so that setDragImage
+   * is immune to ancestor overflow:hidden clipping. The clone is removed on the next frame.
+   */
+  private setDragPreviewImage(event: DragEvent) {
+    const previewHtmlElement = this.paletteItemPreviewComponent()?.preview();
+    if (!previewHtmlElement?.nativeElement || !event.dataTransfer) {
+      return;
+    }
+
+    const clone = previewHtmlElement.nativeElement.cloneNode(true) as HTMLElement;
+    clone.classList.add('dragged-node');
+    clone.style.position = 'fixed';
+
+    document.body.appendChild(clone);
+
+    event.dataTransfer.setDragImage(clone, 0, 0);
+
+    // Clean up the temporary clone. This is safe because setDragImage captures the bitmap
+    // synchronously during dragstart — the browser already has the image before the next frame.
+    requestAnimationFrame(() => clone.remove());
+  }
 }