@metadev/daga 3.1.3 → 3.1.4

package/Changelog.md

@@ -6,6 +6,10 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 3.1.4
+
+- Make dragging the palette node templates create a clone of the node appended to the diagram root instead of a child of the palette to prevent the palette from being affected by CSS transforms on the diagram [#224](https://github.com/metadevpro/daga/pull/224)
+
 ## v. 3.1.3
 
 Date: _2025-01-26_

package/index.cjs.js

@@ -5331,7 +5331,7 @@ class DiagramContextMenu {
     const coordsRelativeToRoot = this.canvas.getPointerLocationRelativeToRoot(event);
     const coordsRelativeToCanvas = this.canvas.getPointerLocationRelativeToCanvas(event);
     // append to the root (svg) element so the context menu is not affected by zoom transforms on the canvas view
-    const contextMenuContainer = this.canvas.selectRoot().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(exports.Events.ContextMenu, newEvent => {
+    const contextMenuContainer = this.canvas.selectSVGElement().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(exports.Events.ContextMenu, newEvent => {
       if (this.canvas.canUserPerformAction(exports.DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.open(newEvent);
@@ -6153,7 +6153,7 @@ class DiagramCanvas {
         this.translateBy(0, this.panRate / this.zoomTransform.k);
       }
     });
-    const canvasView = this.selectRoot().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
+    const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
     const canvasBackground = canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(exports.Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
@@ -6274,7 +6274,7 @@ class DiagramCanvas {
   }
   getCoordinatesOnScreen() {
     var _a;
-    const rootBoundingClientRect = (_a = this.selectRoot().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
     const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
@@ -6298,7 +6298,7 @@ class DiagramCanvas {
     return d3__namespace.pointer(this.getEventHoldingCoordinates(event), this.selectCanvasElements().node());
   }
   getPointerLocationRelativeToRoot(event) {
-    return d3__namespace.pointer(this.getEventHoldingCoordinates(event), this.selectRoot().node());
+    return d3__namespace.pointer(this.getEventHoldingCoordinates(event), this.selectSVGElement().node());
   }
   getPointerLocationRelativeToBody(event) {
     return d3__namespace.pointer(this.getEventHoldingCoordinates(event), d3__namespace.select('body').node());
@@ -7515,13 +7515,16 @@ class DiagramCanvas {
     }
   }
   selectRoot() {
+    return d3__namespace.select(this.diagramRoot);
+  }
+  selectSVGElement() {
     return d3__namespace.select(this.diagramRoot).select('svg');
   }
   selectCanvasView() {
-    return this.selectRoot().select(`.daga-canvas-view`);
+    return this.selectSVGElement().select(`.daga-canvas-view`);
   }
   selectCanvasElements() {
-    return this.selectRoot().select(`.daga-canvas-elements`);
+    return this.selectSVGElement().select(`.daga-canvas-elements`);
   }
   // User actions
   startConnection(port) {
@@ -8753,6 +8756,7 @@ exports.DiagramEntitySet = DiagramEntitySet;
 exports.DiagramEvent = DiagramEvent;
 exports.DiagramField = DiagramField;
 exports.DiagramFieldSet = DiagramFieldSet;
+exports.DiagramHighlightedEvent = DiagramHighlightedEvent;
 exports.DiagramModel = DiagramModel;
 exports.DiagramNode = DiagramNode;
 exports.DiagramNodeSet = DiagramNodeSet;
@@ -8764,6 +8768,7 @@ exports.DiagramPortSet = DiagramPortSet;
 exports.DiagramSecondaryClickEvent = DiagramSecondaryClickEvent;
 exports.DiagramSection = DiagramSection;
 exports.DiagramSectionSet = DiagramSectionSet;
+exports.DiagramSelectionEvent = DiagramSelectionEvent;
 exports.DiagramUserHighlight = DiagramUserHighlight;
 exports.DiagramUserSelection = DiagramUserSelection;
 exports.EditFieldAction = EditFieldAction;

package/index.esm.js

@@ -5310,7 +5310,7 @@ class DiagramContextMenu {
     const coordsRelativeToRoot = this.canvas.getPointerLocationRelativeToRoot(event);
     const coordsRelativeToCanvas = this.canvas.getPointerLocationRelativeToCanvas(event);
     // append to the root (svg) element so the context menu is not affected by zoom transforms on the canvas view
-    const contextMenuContainer = this.canvas.selectRoot().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(Events.ContextMenu, newEvent => {
+    const contextMenuContainer = this.canvas.selectSVGElement().append('foreignObject').attr('class', 'daga-context-menu').attr('x', `${coordsRelativeToRoot[0] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('y', `${coordsRelativeToRoot[1] - CONTEXT_MENU_TOTAL_RADIUS}px`).attr('width', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).attr('height', `${2 * CONTEXT_MENU_TOTAL_RADIUS}px`).style('pointer-events', 'none').on(Events.ContextMenu, newEvent => {
       if (this.canvas.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.open(newEvent);
@@ -6132,7 +6132,7 @@ class DiagramCanvas {
         this.translateBy(0, this.panRate / this.zoomTransform.k);
       }
     });
-    const canvasView = this.selectRoot().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
+    const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
     const canvasBackground = canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
@@ -6253,7 +6253,7 @@ class DiagramCanvas {
   }
   getCoordinatesOnScreen() {
     var _a;
-    const rootBoundingClientRect = (_a = this.selectRoot().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
     const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
@@ -6277,7 +6277,7 @@ class DiagramCanvas {
     return d3.pointer(this.getEventHoldingCoordinates(event), this.selectCanvasElements().node());
   }
   getPointerLocationRelativeToRoot(event) {
-    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectRoot().node());
+    return d3.pointer(this.getEventHoldingCoordinates(event), this.selectSVGElement().node());
   }
   getPointerLocationRelativeToBody(event) {
     return d3.pointer(this.getEventHoldingCoordinates(event), d3.select('body').node());
@@ -7494,13 +7494,16 @@ class DiagramCanvas {
     }
   }
   selectRoot() {
+    return d3.select(this.diagramRoot);
+  }
+  selectSVGElement() {
     return d3.select(this.diagramRoot).select('svg');
   }
   selectCanvasView() {
-    return this.selectRoot().select(`.daga-canvas-view`);
+    return this.selectSVGElement().select(`.daga-canvas-view`);
   }
   selectCanvasElements() {
-    return this.selectRoot().select(`.daga-canvas-elements`);
+    return this.selectSVGElement().select(`.daga-canvas-elements`);
   }
   // User actions
   startConnection(port) {
@@ -8706,4 +8709,4 @@ const getLocationsOfNodes = model => {
   return locations;
 };
 
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramUserHighlight, DiagramUserSelection, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -11,14 +11,14 @@ export { DagaImporter } from './lib/diagram/converters/daga-importer';
 export type { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
 export type { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
-export { ActionStack, ApplyLayoutAction, MoveAction, PasteAction, SetParentAction, AddConnectionAction, AddNodeAction, DiagramActionMethod, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram/diagram-action';
+export { ActionStack, AddConnectionAction, AddNodeAction, ApplyLayoutAction, DiagramActionMethod, DiagramActions, EditFieldAction, MoveAction, PasteAction, RemoveAction, SetGeometryAction, SetParentAction, UpdateValuesAction } from './lib/diagram/diagram-action';
 export type { DiagramAction } from './lib/diagram/diagram-action';
 export type { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/diagram-config';
-export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramSecondaryClickEvent } from './lib/diagram/diagram-event';
+export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';
 export { BreadthLayout } from './lib/diagram/layout/breadth-layout';
-export { layouts, getLocationsOfNodes } from './lib/diagram/layout/diagram-layout';
+export { getLocationsOfNodes, layouts } from './lib/diagram/layout/diagram-layout';
 export type { DiagramLayout } from './lib/diagram/layout/diagram-layout';
 export { ForceLayout } from './lib/diagram/layout/force-layout';
 export { HorizontalLayout } from './lib/diagram/layout/horizontal-layout';

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -117,7 +117,8 @@ export declare class DiagramCanvas implements Canvas {
     private updateConnectionMarkersInView;
     fitFieldRootInView(id: string): void;
     fitNodeInView(id: string): void;
-    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
+    selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
+    selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;
     selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
     selectCanvasElements(): d3.Selection<SVGGElement, unknown, null, unknown>;
     private startConnection;

package/src/lib/interfaces/canvas.d.ts

@@ -289,10 +289,15 @@ export interface Canvas {
      */
     fitNodeInView(id: string): void;
     /**
-     * Get the d3 Selection containing the svg root node of the canvas.
+     * Get the d3 Selection containing the root html div element of the canvas.
      * @private
      */
-    selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
+    selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
+    /**
+     * Get the d3 Selection containing the svg element of the canvas.
+     * @private
+     */
+    selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;
     /**
      * Get the d3 Selection containing the view of all the elements in the canvas.
      * @private