@metadev/daga 4.2.4 → 4.2.6

package/Changelog.md

@@ -6,6 +6,18 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.6
+
+- Fix bug where editing a property with a root attribute fails in React [#323](https://github.com/metadevpro/daga/pull/323)
+- Fix bug where nodes dragged from the palette are off center in React [#324](https://github.com/metadevpro/daga/pull/324)
+- Adjust connection label locations [#326](https://github.com/metadevpro/daga/pull/326)
+
+## 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

@@ -5,20 +5,20 @@ var rxjs = require('rxjs');
 var uuid = require('uuid');
 
 function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
 var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
@@ -1479,6 +1479,9 @@ class ValueSet {
    * @returns The value if it could be found, `undefined` if nothing could be found.
    */
   getRootElementValue(rootAttribute) {
+    if (!this.rootElement) {
+      return;
+    }
     if (typeof rootAttribute === 'string') {
       return this.rootElement[rootAttribute];
     }
@@ -1505,6 +1508,9 @@ class ValueSet {
    * @param value The value to set the root element's attribute to.
    */
   setRootElementValue(rootAttribute, value) {
+    if (!this.rootElement) {
+      return;
+    }
     if (typeof rootAttribute === 'string') {
       this.rootElement[rootAttribute] = value;
     }
@@ -4518,7 +4524,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 +4571,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 +5806,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 +5825,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 +6601,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 +6635,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 +7313,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 +7326,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);
@@ -8371,63 +8389,60 @@ class DiagramCanvas {
         const deltaY = connection.endCoords[1] - connection.startCoords[1];
         switch (connection.startDirection) {
           case exports.Side.Top:
-            startLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = -1;
+            startLabelShiftY = -0.5;
             break;
           case exports.Side.Bottom:
-            startLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = 1;
+            startLabelShiftY = 0.5;
             break;
           case exports.Side.Left:
-            startLabelShiftX = -1;
-            startLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftX = -0.5;
+            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
             endLabelShiftY = startLabelShiftY;
             break;
           case exports.Side.Right:
-            startLabelShiftX = 1;
-            startLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftX = 0.5;
+            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
             endLabelShiftY = startLabelShiftY;
             break;
           default:
-            startLabelShiftX = 1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftY = -0.5;
             endLabelShiftY = startLabelShiftY;
         }
         switch (connection.endDirection) {
           case exports.Side.Top:
-            endLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = 1;
+            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+            endLabelShiftY = 0.5;
             break;
           case exports.Side.Bottom:
-            endLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = -1;
+            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+            endLabelShiftY = -0.5;
             break;
           case exports.Side.Left:
-            endLabelShiftX = -1;
-            endLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = -0.5;
+            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
             break;
           case exports.Side.Right:
-            endLabelShiftX = 1;
-            endLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = 0.5;
+            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
             break;
           default:
-            endLabelShiftX = 1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = 0.5;
+            endLabelShiftY = -0.5;
+        }
+        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+          // horizontal quadrant
+          middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
+          middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
+        } else {
+          // vertical quadrant
+          middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
+          middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
         }
       }
       // bind start labels

package/index.esm.js

@@ -1458,6 +1458,9 @@ class ValueSet {
    * @returns The value if it could be found, `undefined` if nothing could be found.
    */
   getRootElementValue(rootAttribute) {
+    if (!this.rootElement) {
+      return;
+    }
     if (typeof rootAttribute === 'string') {
       return this.rootElement[rootAttribute];
     }
@@ -1484,6 +1487,9 @@ class ValueSet {
    * @param value The value to set the root element's attribute to.
    */
   setRootElementValue(rootAttribute, value) {
+    if (!this.rootElement) {
+      return;
+    }
     if (typeof rootAttribute === 'string') {
       this.rootElement[rootAttribute] = value;
     }
@@ -4497,7 +4503,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 +4550,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 +5785,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 +5804,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 +6580,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 +6614,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 +7292,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 +7305,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);
@@ -8350,63 +8368,60 @@ class DiagramCanvas {
         const deltaY = connection.endCoords[1] - connection.startCoords[1];
         switch (connection.startDirection) {
           case Side.Top:
-            startLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = -1;
+            startLabelShiftY = -0.5;
             break;
           case Side.Bottom:
-            startLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = 1;
+            startLabelShiftY = 0.5;
             break;
           case Side.Left:
-            startLabelShiftX = -1;
-            startLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftX = -0.5;
+            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
             endLabelShiftY = startLabelShiftY;
             break;
           case Side.Right:
-            startLabelShiftX = 1;
-            startLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftX = 0.5;
+            startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
             endLabelShiftY = startLabelShiftY;
             break;
           default:
-            startLabelShiftX = 1;
-            middleLabelShiftX = startLabelShiftX;
+            startLabelShiftX = 0.5;
             endLabelShiftX = startLabelShiftX;
-            startLabelShiftY = -1;
-            middleLabelShiftY = startLabelShiftY;
+            startLabelShiftY = -0.5;
             endLabelShiftY = startLabelShiftY;
         }
         switch (connection.endDirection) {
           case Side.Top:
-            endLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = 1;
+            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+            endLabelShiftY = 0.5;
             break;
           case Side.Bottom:
-            endLabelShiftX = deltaX >= 0 ? 1 : -1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = -1;
+            endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
+            endLabelShiftY = -0.5;
             break;
           case Side.Left:
-            endLabelShiftX = -1;
-            endLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = -0.5;
+            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
             break;
           case Side.Right:
-            endLabelShiftX = 1;
-            endLabelShiftY = deltaY > 0 ? 1 : -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = 0.5;
+            endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
             break;
           default:
-            endLabelShiftX = 1;
-            middleLabelShiftX = endLabelShiftX;
-            endLabelShiftY = -1;
-            middleLabelShiftY = endLabelShiftY;
+            endLabelShiftX = 0.5;
+            endLabelShiftY = -0.5;
+        }
+        if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+          // horizontal quadrant
+          middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
+          middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
+        } else {
+          // vertical quadrant
+          middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
+          middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
         }
       }
       // bind start labels

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.4",
+  "version": "4.2.6",
   "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