@metadev/daga 4.2.4 → 4.2.5

package/Changelog.md

@@ -6,6 +6,12 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.5
+
+- Add methods `getZoomLevel()` and `getViewCoordinates()` in `canvas` to obtain the current zoom and pan level of the view [#317](https://github.com/metadevpro/daga/pull/317)
+- Enable configuring the height of the palette and property editor [#319](https://github.com/metadevpro/daga/pull/319)
+- Correctly update the connection point of ports when pasting [#321](https://github.com/metadevpro/daga/pull/321)
+
 ## v. 4.2.4
 
 - Enable configuring line style in shaped looks [#313](https://github.com/metadevpro/daga/pull/313)

package/index.cjs.js

@@ -4518,7 +4518,7 @@ class DagaImporter {
         let portCounter = 0;
         for (const port of section.ports || []) {
           const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
-          const newPort = new DiagramPort(model, newPortType, newSection, port.coords, port.connectionPoint, port.direction, port.id);
+          const newPort = new DiagramPort(model, newPortType, newSection, port.coords, port.connectionPoint || port.coords, port.direction, port.id);
           newSection.ports.push(newPort);
           model.ports.add(newPort);
           if (port.label) {
@@ -4565,7 +4565,7 @@ class DagaImporter {
       let portCounter = 0;
       for (const port of node.ports || []) {
         const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
-        const newPort = new DiagramPort(model, newPortType, newNode, port.coords, port.connectionPoint, port.direction, port.id);
+        const newPort = new DiagramPort(model, newPortType, newNode, port.coords, port.connectionPoint || port.coords, port.direction, port.id);
         newNode.ports.push(newPort);
         model.ports.add(newPort);
         if (port.label) {
@@ -5800,6 +5800,9 @@ class PasteAction {
               idRefresh[oldPortId] = port.id;
               if (coordsDiff) {
                 port.coords = [port.coords[0] + coordsDiff[0], port.coords[1] + coordsDiff[1]];
+                if (port.connectionPoint) {
+                  port.connectionPoint = [port.connectionPoint[0] + coordsDiff[0], port.connectionPoint[1] + coordsDiff[1]];
+                }
               }
             }
           }
@@ -5816,6 +5819,9 @@ class PasteAction {
           idRefresh[oldPortId] = port.id;
           if (coordsDiff) {
             port.coords = [port.coords[0] + coordsDiff[0], port.coords[1] + coordsDiff[1]];
+            if (port.connectionPoint) {
+              port.connectionPoint = [port.connectionPoint[0] + coordsDiff[0], port.connectionPoint[1] + coordsDiff[1]];
+            }
           }
         }
       }
@@ -6589,7 +6595,7 @@ class DagaExporter {
           id: port.id,
           type: (_a = port.type) === null || _a === void 0 ? void 0 : _a.id,
           coords: roundPoint(port.coords),
-          connectionPoint: roundPoint(port.connectionPoint),
+          connectionPoint: roundPoint(port.connectionPoint || port.coords),
           direction: port.direction,
           label: ((_b = port.label) === null || _b === void 0 ? void 0 : _b.text) || ''
         }, includeCollabMeta ? {
@@ -6623,7 +6629,7 @@ class DagaExporter {
         id: port.id,
         type: (_d = port.type) === null || _d === void 0 ? void 0 : _d.id,
         coords: roundPoint(port.coords),
-        connectionPoint: roundPoint(port.connectionPoint),
+        connectionPoint: roundPoint(port.connectionPoint || port.coords),
         direction: port.direction,
         label: ((_e = port.label) === null || _e === void 0 ? void 0 : _e.text) || ''
       }, includeCollabMeta ? {
@@ -7301,6 +7307,9 @@ class DiagramCanvas {
     initializeGrid(this, canvasView, this.backgroundPatternId);
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
+  getZoomLevel() {
+    return this.zoomTransform.k;
+  }
   zoomBy(factor) {
     if (!isNaN(factor)) {
       this.zoomBehavior.scaleBy(this.selectCanvasView(), factor);
@@ -7311,6 +7320,9 @@ class DiagramCanvas {
       this.zoomBehavior.scaleTo(this.selectCanvasView(), level);
     }
   }
+  getViewCoordinates() {
+    return [this.zoomTransform.x, this.zoomTransform.y];
+  }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
       this.zoomBehavior.translateBy(this.selectCanvasView(), x, y);

package/index.esm.js

@@ -4497,7 +4497,7 @@ class DagaImporter {
         let portCounter = 0;
         for (const port of section.ports || []) {
           const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
-          const newPort = new DiagramPort(model, newPortType, newSection, port.coords, port.connectionPoint, port.direction, port.id);
+          const newPort = new DiagramPort(model, newPortType, newSection, port.coords, port.connectionPoint || port.coords, port.direction, port.id);
           newSection.ports.push(newPort);
           model.ports.add(newPort);
           if (port.label) {
@@ -4544,7 +4544,7 @@ class DagaImporter {
       let portCounter = 0;
       for (const port of node.ports || []) {
         const newPortType = port.type !== undefined ? model.ports.types.get(port.type) : undefined;
-        const newPort = new DiagramPort(model, newPortType, newNode, port.coords, port.connectionPoint, port.direction, port.id);
+        const newPort = new DiagramPort(model, newPortType, newNode, port.coords, port.connectionPoint || port.coords, port.direction, port.id);
         newNode.ports.push(newPort);
         model.ports.add(newPort);
         if (port.label) {
@@ -5779,6 +5779,9 @@ class PasteAction {
               idRefresh[oldPortId] = port.id;
               if (coordsDiff) {
                 port.coords = [port.coords[0] + coordsDiff[0], port.coords[1] + coordsDiff[1]];
+                if (port.connectionPoint) {
+                  port.connectionPoint = [port.connectionPoint[0] + coordsDiff[0], port.connectionPoint[1] + coordsDiff[1]];
+                }
               }
             }
           }
@@ -5795,6 +5798,9 @@ class PasteAction {
           idRefresh[oldPortId] = port.id;
           if (coordsDiff) {
             port.coords = [port.coords[0] + coordsDiff[0], port.coords[1] + coordsDiff[1]];
+            if (port.connectionPoint) {
+              port.connectionPoint = [port.connectionPoint[0] + coordsDiff[0], port.connectionPoint[1] + coordsDiff[1]];
+            }
           }
         }
       }
@@ -6568,7 +6574,7 @@ class DagaExporter {
           id: port.id,
           type: (_a = port.type) === null || _a === void 0 ? void 0 : _a.id,
           coords: roundPoint(port.coords),
-          connectionPoint: roundPoint(port.connectionPoint),
+          connectionPoint: roundPoint(port.connectionPoint || port.coords),
           direction: port.direction,
           label: ((_b = port.label) === null || _b === void 0 ? void 0 : _b.text) || ''
         }, includeCollabMeta ? {
@@ -6602,7 +6608,7 @@ class DagaExporter {
         id: port.id,
         type: (_d = port.type) === null || _d === void 0 ? void 0 : _d.id,
         coords: roundPoint(port.coords),
-        connectionPoint: roundPoint(port.connectionPoint),
+        connectionPoint: roundPoint(port.connectionPoint || port.coords),
         direction: port.direction,
         label: ((_e = port.label) === null || _e === void 0 ? void 0 : _e.text) || ''
       }, includeCollabMeta ? {
@@ -7280,6 +7286,9 @@ class DiagramCanvas {
     initializeGrid(this, canvasView, this.backgroundPatternId);
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
+  getZoomLevel() {
+    return this.zoomTransform.k;
+  }
   zoomBy(factor) {
     if (!isNaN(factor)) {
       this.zoomBehavior.scaleBy(this.selectCanvasView(), factor);
@@ -7290,6 +7299,9 @@ class DiagramCanvas {
       this.zoomBehavior.scaleTo(this.selectCanvasView(), level);
     }
   }
+  getViewCoordinates() {
+    return [this.zoomTransform.x, this.zoomTransform.y];
+  }
   translateBy(x, y) {
     if (!isNaN(x) && !isNaN(y)) {
       this.zoomBehavior.translateBy(this.selectCanvasView(), x, y);

package/package.json

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

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

@@ -99,8 +99,10 @@ export declare class DiagramCanvas implements Canvas {
     getPriorityThreshold(): number | undefined;
     setPriorityThreshold(priority: number): void;
     initView(appendTo: HTMLElement): void;
+    getZoomLevel(): number;
     zoomBy(factor: number): void;
     zoomTo(level: number): void;
+    getViewCoordinates(): Point;
     translateBy(x: number, y: number): void;
     translateTo(x: number, y: number): void;
     center(): void;

package/src/lib/diagram/config/diagram-components-config.d.ts

@@ -111,6 +111,11 @@ export interface PaletteComponentConfig {
      * @default 'bottom'
      */
     direction?: Side;
+    /**
+     * Dimension of this component in the direction that it extends towards. If undefined, it stretches as needed.
+     * @default undefined
+     */
+    height?: string;
     /**
      * Dimension of this component in the direction perpendicular to the direction that it extends towards.
      * @default '12rem'
@@ -153,6 +158,11 @@ export interface PropertyEditorComponentConfig {
      * @default '24rem'
      */
     width?: string;
+    /**
+     * Dimension of this component in the direction that it extends towards. If undefined, it stretches as needed.
+     * @default undefined
+     */
+    height?: string;
 }
 /**
  * Configuration for a palette.

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

@@ -177,6 +177,11 @@ export interface Canvas {
      * @private
      */
     initView(appendTo: HTMLElement): void;
+    /**
+     * Gets the current zoom level.
+     * @public
+     */
+    getZoomLevel(): number;
     /**
      * Increases the zoom level by the given factor.
      * @public
@@ -189,6 +194,11 @@ export interface Canvas {
      * @param level A level of zoom.
      */
     zoomTo(level: number): void;
+    /**
+     * Gets the current coordinates of the view.
+     * @public
+     */
+    getViewCoordinates(): Point;
     /**
      * Translates the view by the given amount.
      * @public