@metadev/daga 4.2.3 → 4.2.5

package/Changelog.md

@@ -6,6 +6,19 @@ 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)
+- Enable default values for parameters of looks [#313](https://github.com/metadevpro/daga/pull/313)
+- Use optional `label` fields in `Property` [#314](https://github.com/metadevpro/daga/pull/314)
+- Use default values for `basic` and `editable` fields of `Property` [#315](https://github.com/metadevpro/daga/pull/315)
+
 ## v. 4.2.3
 
 - Enable toggling whether individual sections can be highlighted or entire nodes [#308](https://github.com/metadevpro/daga/pull/308)

package/index.cjs.js

@@ -1224,8 +1224,9 @@ class DiagramElementSet extends DiagramEntitySet {
  * @see ValueSet
  */
 class Property {
-  constructor(name, type, defaultValue, basic, editable, rootAttribute) {
+  constructor(name, label, type, defaultValue, basic, editable, rootAttribute) {
     this.name = name;
+    this.label = label;
     this.type = type;
     this.defaultValue = defaultValue;
     this.basic = basic;
@@ -1745,7 +1746,7 @@ class ValueSet {
           this.setRootElementValue(rootAttribute, this.values[key]);
         }
       }
-      if (property.basic) {
+      if (property.basic !== false) {
         this.displayedProperties.push(property);
       } else {
         this.hiddenProperties.push(property);
@@ -4517,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) {
@@ -4564,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) {
@@ -5799,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]];
+                }
               }
             }
           }
@@ -5815,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]];
+            }
           }
         }
       }
@@ -6254,8 +6261,14 @@ const initializeLook = selection => {
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-image').attr('preserveAspectRatio', 'none');
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
 };
+const SHAPED_LOOK_DEFAULTS = {
+  fillColor: '#FFFFFF',
+  borderColor: '#000000',
+  borderThickness: 1,
+  borderStyle: exports.LineStyle.Solid
+};
 const updateLook = selection => {
-  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor).attr('stroke', d => d.look.borderColor).attr('stroke-width', d => `${d.look.borderThickness}px`);
+  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape || exports.ClosedShape.Rectangle, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor || SHAPED_LOOK_DEFAULTS.fillColor).attr('stroke', d => d.look.borderColor || SHAPED_LOOK_DEFAULTS.borderColor).attr('stroke-width', d => `${d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness));
   selection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => d.look.backgroundImage);
   selection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTopLeft);
   selection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => d.look.leftMargin).attr('y', 0).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTop);
@@ -6582,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 ? {
@@ -6616,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 ? {
@@ -7294,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);
@@ -7304,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);
@@ -7920,7 +7939,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
             const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
@@ -8068,14 +8087,14 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.look.thickness + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);

package/index.esm.js

@@ -1203,8 +1203,9 @@ class DiagramElementSet extends DiagramEntitySet {
  * @see ValueSet
  */
 class Property {
-  constructor(name, type, defaultValue, basic, editable, rootAttribute) {
+  constructor(name, label, type, defaultValue, basic, editable, rootAttribute) {
     this.name = name;
+    this.label = label;
     this.type = type;
     this.defaultValue = defaultValue;
     this.basic = basic;
@@ -1724,7 +1725,7 @@ class ValueSet {
           this.setRootElementValue(rootAttribute, this.values[key]);
         }
       }
-      if (property.basic) {
+      if (property.basic !== false) {
         this.displayedProperties.push(property);
       } else {
         this.hiddenProperties.push(property);
@@ -4496,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) {
@@ -4543,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) {
@@ -5778,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]];
+                }
               }
             }
           }
@@ -5794,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]];
+            }
           }
         }
       }
@@ -6233,8 +6240,14 @@ const initializeLook = selection => {
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-image').attr('preserveAspectRatio', 'none');
   selection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
 };
+const SHAPED_LOOK_DEFAULTS = {
+  fillColor: '#FFFFFF',
+  borderColor: '#000000',
+  borderThickness: 1,
+  borderStyle: LineStyle.Solid
+};
 const updateLook = selection => {
-  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor).attr('stroke', d => d.look.borderColor).attr('stroke-width', d => `${d.look.borderThickness}px`);
+  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape || ClosedShape.Rectangle, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor || SHAPED_LOOK_DEFAULTS.fillColor).attr('stroke', d => d.look.borderColor || SHAPED_LOOK_DEFAULTS.borderColor).attr('stroke-width', d => `${d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness));
   selection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => d.look.backgroundImage);
   selection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTopLeft);
   selection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => d.look.leftMargin).attr('y', 0).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTop);
@@ -6561,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 ? {
@@ -6595,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 ? {
@@ -7273,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);
@@ -7283,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);
@@ -7899,7 +7918,7 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
             const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
@@ -8047,14 +8066,14 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
+      return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.look.thickness + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);

package/package.json

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

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

@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { Point } from '../../util/canvas-util';
-import { LineFunction, LineShape } from '../../util/line';
+import { LineFunction, LineShape, LineStyle } from '../../util/line';
 import { CursorStyle } from '../../util/style';
 import { Side } from '../../util/svg-util';
 import { DiagramField } from '../model/diagram-field';
@@ -24,6 +24,12 @@ export declare const getConnectionPath: (shape: LineShape | LineFunction, startC
 export declare const setCursorStyle: (style?: CursorStyle) => void;
 export declare const getRelatedNodeOrItself: (element: DiagramNode | DiagramSection | DiagramPort | DiagramField) => DiagramNode | DiagramSection | DiagramPort | DiagramField;
 export declare const initializeLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
+export declare const SHAPED_LOOK_DEFAULTS: {
+    fillColor: string;
+    borderColor: string;
+    borderThickness: number;
+    borderStyle: LineStyle;
+};
 export declare const updateLook: (selection: d3.Selection<SVGGElement, DiagramNode | DiagramSection | DiagramPort, d3.BaseType, unknown>) => void;
 export declare const GRID_DEFAULTS: {
     enabled: boolean;

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/diagram/config/diagram-look-config.d.ts

@@ -71,20 +71,29 @@ export interface ShapedLook extends Look {
     lookType: 'shaped-look';
     /**
      * Shape of nodes using this look.
+     * @default 'rectangle'
      */
-    shape: ClosedShape | ShapeFunction;
+    shape?: ClosedShape | ShapeFunction;
     /**
      * Background color of this look.
+     * @default '#FFFFFF'
      */
-    fillColor: string;
+    fillColor?: string;
     /**
      * Border color of this look.
+     * @default '#000000'
      */
-    borderColor: string;
+    borderColor?: string;
     /**
      * Border thickness of this look in diagram units.
+     * @default 1
+     */
+    borderThickness?: number;
+    /**
+     * Border style of this look.
+     * @default 'solid'
      */
-    borderThickness: number;
+    borderStyle?: LineStyle;
 }
 /**
  * Configuration for a look given by an image.
@@ -201,20 +210,20 @@ export interface ConnectionLook extends Look {
      * Color of the line of connections of this type.
      * @default '#000000'
      */
-    color: string;
+    color?: string;
     /**
      * Thickness of the line of connections of this type in diagram units.
      * @default 1
      */
-    thickness: number;
+    thickness?: number;
     /**
      * Shape of the line of connections of this type.
      * @default 'straight'
      */
-    shape: LineShape | LineFunction;
+    shape?: LineShape | LineFunction;
     /**
      * Style of the line of connections of this type.
      * @default 'solid'
      */
-    style: LineStyle;
+    style?: LineStyle;
 }

package/src/lib/diagram/property/property.d.ts

@@ -6,9 +6,13 @@
  */
 export declare class Property {
     /**
-     * The name of this property. Used to distinguish this property from others.
+     * The name of this property. Used to distinguish this property from others. Must be unique.
      */
     name: string;
+    /**
+     * The label of this property. Used when displaying this property to the user.
+     */
+    label?: string;
     /**
      * The type of this property, which indicates the possible values that this property can have.
      */
@@ -20,13 +24,15 @@ export declare class Property {
     defaultValue?: unknown;
     /**
      * Whether this property should always appear in the property editor component.
+     * @default true
      * @see PropertyEditorComponent
      */
-    basic: boolean;
+    basic?: boolean;
     /**
      * Whether the value of this property can be edited.
+     * @default true
      */
-    editable: boolean;
+    editable?: boolean;
     /**
      * Which attribute of the parent component the value of this property is linked to. By default, it is not linked to any.
      * @default undefined
@@ -44,7 +50,7 @@ export declare class Property {
      * @default undefined
      */
     properties?: Property[];
-    constructor(name: string, type: Type, defaultValue: unknown, basic: boolean, editable: boolean, rootAttribute?: string[] | string);
+    constructor(name: string, label: string | undefined, type: Type, defaultValue: unknown, basic: boolean | undefined, editable: boolean | undefined, rootAttribute?: string[] | string);
 }
 /**
  * Each of the possible values that a property of type option can have.

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