@metadev/daga 4.2.5 → 4.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Changelog.md +12 -0
  2. package/index.cjs.js +83 -53
  3. package/index.esm.js +70 -40
  4. package/package.json +1 -1
package/Changelog.md CHANGED
@@ -6,6 +6,18 @@ List of releases and changes.
6
6
 
7
7
  ## Next release Joyeuse
8
8
 
9
+ ## v. 4.2.7
10
+
11
+ - Adjust connection label positioning [#334](https://github.com/metadevpro/daga/pull/334)
12
+ - Prevent connections from jumping when highlighted [#335](https://github.com/metadevpro/daga/pull/335)
13
+ - Preserve `stroke-dasharray` length of lines and borders when highlighted [#335](https://github.com/metadevpro/daga/pull/335)
14
+
15
+ ## v. 4.2.6
16
+
17
+ - Fix bug where editing a property with a root attribute fails in React [#323](https://github.com/metadevpro/daga/pull/323)
18
+ - Fix bug where nodes dragged from the palette are off center in React [#324](https://github.com/metadevpro/daga/pull/324)
19
+ - Adjust connection label locations [#326](https://github.com/metadevpro/daga/pull/326)
20
+
9
21
  ## v. 4.2.5
10
22
 
11
23
  - 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)
package/index.cjs.js CHANGED
@@ -5,20 +5,20 @@ var rxjs = require('rxjs');
5
5
  var uuid = require('uuid');
6
6
 
7
7
  function _interopNamespaceDefault(e) {
8
- var n = Object.create(null);
9
- if (e) {
10
- Object.keys(e).forEach(function (k) {
11
- if (k !== 'default') {
12
- var d = Object.getOwnPropertyDescriptor(e, k);
13
- Object.defineProperty(n, k, d.get ? d : {
14
- enumerable: true,
15
- get: function () { return e[k]; }
8
+ var n = Object.create(null);
9
+ if (e) {
10
+ Object.keys(e).forEach(function (k) {
11
+ if (k !== 'default') {
12
+ var d = Object.getOwnPropertyDescriptor(e, k);
13
+ Object.defineProperty(n, k, d.get ? d : {
14
+ enumerable: true,
15
+ get: function () { return e[k]; }
16
+ });
17
+ }
16
18
  });
17
- }
18
- });
19
- }
20
- n.default = e;
21
- return Object.freeze(n);
19
+ }
20
+ n.default = e;
21
+ return Object.freeze(n);
22
22
  }
23
23
 
24
24
  var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
@@ -1479,6 +1479,9 @@ class ValueSet {
1479
1479
  * @returns The value if it could be found, `undefined` if nothing could be found.
1480
1480
  */
1481
1481
  getRootElementValue(rootAttribute) {
1482
+ if (!this.rootElement) {
1483
+ return;
1484
+ }
1482
1485
  if (typeof rootAttribute === 'string') {
1483
1486
  return this.rootElement[rootAttribute];
1484
1487
  }
@@ -1505,6 +1508,9 @@ class ValueSet {
1505
1508
  * @param value The value to set the root element's attribute to.
1506
1509
  */
1507
1510
  setRootElementValue(rootAttribute, value) {
1511
+ if (!this.rootElement) {
1512
+ return;
1513
+ }
1508
1514
  if (typeof rootAttribute === 'string') {
1509
1515
  this.rootElement[rootAttribute] = value;
1510
1516
  }
@@ -6268,7 +6274,10 @@ const SHAPED_LOOK_DEFAULTS = {
6268
6274
  borderStyle: exports.LineStyle.Solid
6269
6275
  };
6270
6276
  const updateLook = selection => {
6271
- 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));
6277
+ 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 => {
6278
+ var _a, _b, _c;
6279
+ return lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, ((_b = (_a = d.type) === null || _a === void 0 ? void 0 : _a.defaultLook) === null || _b === void 0 ? void 0 : _b.borderThickness) || ((_c = d.look) === null || _c === void 0 ? void 0 : _c.borderThickness) || SHAPED_LOOK_DEFAULTS.borderThickness);
6280
+ });
6272
6281
  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);
6273
6282
  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);
6274
6283
  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);
@@ -7939,7 +7948,7 @@ class DiagramCanvas {
7939
7948
  if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
7940
7949
  if (this.unfinishedConnection !== undefined) {
7941
7950
  const endCoords = [event.x, event.y];
7942
- (_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));
7951
+ (_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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
7943
7952
  const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
7944
7953
  if (unfinishedConnectionGhostNode) {
7945
7954
  let margin = 2;
@@ -8087,14 +8096,14 @@ class DiagramCanvas {
8087
8096
  enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
8088
8097
  mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
8089
8098
  var _a, _b;
8090
- 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);
8091
- }).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');
8099
+ return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
8100
+ }).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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
8092
8101
  mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
8093
8102
  var _a, _b;
8094
- 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);
8103
+ return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
8095
8104
  }).attr('stroke', 'transparent')
8096
8105
  // allow generating pointer events even when it is transparent
8097
- .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');
8106
+ .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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
8098
8107
  mergeSelection.data().forEach(connection => {
8099
8108
  this.updateConnectionLabelsInView(connection);
8100
8109
  this.updateConnectionMarkersInView(connection);
@@ -8383,63 +8392,52 @@ class DiagramCanvas {
8383
8392
  const deltaY = connection.endCoords[1] - connection.startCoords[1];
8384
8393
  switch (connection.startDirection) {
8385
8394
  case exports.Side.Top:
8386
- startLabelShiftX = deltaX >= 0 ? 1 : -1;
8387
- middleLabelShiftX = startLabelShiftX;
8395
+ startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8388
8396
  endLabelShiftX = startLabelShiftX;
8389
- startLabelShiftY = -1;
8390
8397
  break;
8391
8398
  case exports.Side.Bottom:
8392
- startLabelShiftX = deltaX >= 0 ? 1 : -1;
8393
- middleLabelShiftX = startLabelShiftX;
8399
+ startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8394
8400
  endLabelShiftX = startLabelShiftX;
8395
- startLabelShiftY = 1;
8396
8401
  break;
8397
8402
  case exports.Side.Left:
8398
- startLabelShiftX = -1;
8399
- startLabelShiftY = deltaY > 0 ? 1 : -1;
8400
- middleLabelShiftY = startLabelShiftY;
8403
+ startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8401
8404
  endLabelShiftY = startLabelShiftY;
8402
8405
  break;
8403
8406
  case exports.Side.Right:
8404
- startLabelShiftX = 1;
8405
- startLabelShiftY = deltaY > 0 ? 1 : -1;
8406
- middleLabelShiftY = startLabelShiftY;
8407
+ startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8407
8408
  endLabelShiftY = startLabelShiftY;
8408
8409
  break;
8409
8410
  default:
8410
- startLabelShiftX = 1;
8411
- middleLabelShiftX = startLabelShiftX;
8411
+ startLabelShiftX = 0.5;
8412
8412
  endLabelShiftX = startLabelShiftX;
8413
- startLabelShiftY = -1;
8414
- middleLabelShiftY = startLabelShiftY;
8413
+ startLabelShiftY = -0.5;
8415
8414
  endLabelShiftY = startLabelShiftY;
8416
8415
  }
8417
8416
  switch (connection.endDirection) {
8418
8417
  case exports.Side.Top:
8419
- endLabelShiftX = deltaX >= 0 ? 1 : -1;
8420
- middleLabelShiftX = endLabelShiftX;
8421
- endLabelShiftY = 1;
8418
+ endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8422
8419
  break;
8423
8420
  case exports.Side.Bottom:
8424
- endLabelShiftX = deltaX >= 0 ? 1 : -1;
8425
- middleLabelShiftX = endLabelShiftX;
8426
- endLabelShiftY = -1;
8421
+ endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8427
8422
  break;
8428
8423
  case exports.Side.Left:
8429
- endLabelShiftX = -1;
8430
- endLabelShiftY = deltaY > 0 ? 1 : -1;
8431
- middleLabelShiftY = endLabelShiftY;
8424
+ endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8432
8425
  break;
8433
8426
  case exports.Side.Right:
8434
- endLabelShiftX = 1;
8435
- endLabelShiftY = deltaY > 0 ? 1 : -1;
8436
- middleLabelShiftY = endLabelShiftY;
8427
+ endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8437
8428
  break;
8438
8429
  default:
8439
- endLabelShiftX = 1;
8440
- middleLabelShiftX = endLabelShiftX;
8441
- endLabelShiftY = -1;
8442
- middleLabelShiftY = endLabelShiftY;
8430
+ endLabelShiftX = 0.5;
8431
+ endLabelShiftY = -0.5;
8432
+ }
8433
+ if (Math.abs(deltaX) >= Math.abs(deltaY)) {
8434
+ // horizontal quadrant
8435
+ middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
8436
+ middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8437
+ } else {
8438
+ // vertical quadrant
8439
+ middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
8440
+ middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8443
8441
  }
8444
8442
  }
8445
8443
  // bind start labels
@@ -8449,7 +8447,23 @@ class DiagramCanvas {
8449
8447
  // don't create space for the label if the label is empty
8450
8448
  const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8451
8449
  const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8452
- const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8450
+ let pathStartLabelPoint;
8451
+ switch (connection.startDirection) {
8452
+ case exports.Side.Left:
8453
+ pathStartLabelPoint = pathNode.getPointAtLength(getRightMargin(labelConfiguration) + boundingWidth / 2);
8454
+ break;
8455
+ case exports.Side.Right:
8456
+ pathStartLabelPoint = pathNode.getPointAtLength(getLeftMargin(labelConfiguration) + boundingWidth / 2);
8457
+ break;
8458
+ case exports.Side.Top:
8459
+ pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingWidth / 2);
8460
+ break;
8461
+ case exports.Side.Bottom:
8462
+ pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingWidth / 2);
8463
+ break;
8464
+ default:
8465
+ pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8466
+ }
8453
8467
  connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
8454
8468
  connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
8455
8469
  }
@@ -8471,7 +8485,23 @@ class DiagramCanvas {
8471
8485
  // don't create space for the label if the label is empty
8472
8486
  const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8473
8487
  const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8474
- const pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8488
+ let pathEndLabelPoint;
8489
+ switch (connection.endDirection) {
8490
+ case exports.Side.Left:
8491
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getRightMargin(labelConfiguration) + boundingWidth / 2));
8492
+ break;
8493
+ case exports.Side.Right:
8494
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getLeftMargin(labelConfiguration) + boundingWidth / 2));
8495
+ break;
8496
+ case exports.Side.Top:
8497
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingWidth / 2));
8498
+ break;
8499
+ case exports.Side.Bottom:
8500
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingWidth / 2));
8501
+ break;
8502
+ default:
8503
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8504
+ }
8475
8505
  connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
8476
8506
  connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
8477
8507
  }
package/index.esm.js CHANGED
@@ -1458,6 +1458,9 @@ class ValueSet {
1458
1458
  * @returns The value if it could be found, `undefined` if nothing could be found.
1459
1459
  */
1460
1460
  getRootElementValue(rootAttribute) {
1461
+ if (!this.rootElement) {
1462
+ return;
1463
+ }
1461
1464
  if (typeof rootAttribute === 'string') {
1462
1465
  return this.rootElement[rootAttribute];
1463
1466
  }
@@ -1484,6 +1487,9 @@ class ValueSet {
1484
1487
  * @param value The value to set the root element's attribute to.
1485
1488
  */
1486
1489
  setRootElementValue(rootAttribute, value) {
1490
+ if (!this.rootElement) {
1491
+ return;
1492
+ }
1487
1493
  if (typeof rootAttribute === 'string') {
1488
1494
  this.rootElement[rootAttribute] = value;
1489
1495
  }
@@ -6247,7 +6253,10 @@ const SHAPED_LOOK_DEFAULTS = {
6247
6253
  borderStyle: LineStyle.Solid
6248
6254
  };
6249
6255
  const updateLook = selection => {
6250
- 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));
6256
+ 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 => {
6257
+ var _a, _b, _c;
6258
+ return lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, ((_b = (_a = d.type) === null || _a === void 0 ? void 0 : _a.defaultLook) === null || _b === void 0 ? void 0 : _b.borderThickness) || ((_c = d.look) === null || _c === void 0 ? void 0 : _c.borderThickness) || SHAPED_LOOK_DEFAULTS.borderThickness);
6259
+ });
6251
6260
  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);
6252
6261
  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);
6253
6262
  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);
@@ -7918,7 +7927,7 @@ class DiagramCanvas {
7918
7927
  if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
7919
7928
  if (this.unfinishedConnection !== undefined) {
7920
7929
  const endCoords = [event.x, event.y];
7921
- (_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));
7930
+ (_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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_b = this.unfinishedConnection.type.defaultStartMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.type.defaultEndMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
7922
7931
  const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
7923
7932
  if (unfinishedConnectionGhostNode) {
7924
7933
  let margin = 2;
@@ -8066,14 +8075,14 @@ class DiagramCanvas {
8066
8075
  enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
8067
8076
  mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
8068
8077
  var _a, _b;
8069
- 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);
8070
- }).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');
8078
+ return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
8079
+ }).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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
8071
8080
  mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
8072
8081
  var _a, _b;
8073
- 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);
8082
+ return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
8074
8083
  }).attr('stroke', 'transparent')
8075
8084
  // allow generating pointer events even when it is transparent
8076
- .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');
8085
+ .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.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
8077
8086
  mergeSelection.data().forEach(connection => {
8078
8087
  this.updateConnectionLabelsInView(connection);
8079
8088
  this.updateConnectionMarkersInView(connection);
@@ -8362,63 +8371,52 @@ class DiagramCanvas {
8362
8371
  const deltaY = connection.endCoords[1] - connection.startCoords[1];
8363
8372
  switch (connection.startDirection) {
8364
8373
  case Side.Top:
8365
- startLabelShiftX = deltaX >= 0 ? 1 : -1;
8366
- middleLabelShiftX = startLabelShiftX;
8374
+ startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8367
8375
  endLabelShiftX = startLabelShiftX;
8368
- startLabelShiftY = -1;
8369
8376
  break;
8370
8377
  case Side.Bottom:
8371
- startLabelShiftX = deltaX >= 0 ? 1 : -1;
8372
- middleLabelShiftX = startLabelShiftX;
8378
+ startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8373
8379
  endLabelShiftX = startLabelShiftX;
8374
- startLabelShiftY = 1;
8375
8380
  break;
8376
8381
  case Side.Left:
8377
- startLabelShiftX = -1;
8378
- startLabelShiftY = deltaY > 0 ? 1 : -1;
8379
- middleLabelShiftY = startLabelShiftY;
8382
+ startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8380
8383
  endLabelShiftY = startLabelShiftY;
8381
8384
  break;
8382
8385
  case Side.Right:
8383
- startLabelShiftX = 1;
8384
- startLabelShiftY = deltaY > 0 ? 1 : -1;
8385
- middleLabelShiftY = startLabelShiftY;
8386
+ startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8386
8387
  endLabelShiftY = startLabelShiftY;
8387
8388
  break;
8388
8389
  default:
8389
- startLabelShiftX = 1;
8390
- middleLabelShiftX = startLabelShiftX;
8390
+ startLabelShiftX = 0.5;
8391
8391
  endLabelShiftX = startLabelShiftX;
8392
- startLabelShiftY = -1;
8393
- middleLabelShiftY = startLabelShiftY;
8392
+ startLabelShiftY = -0.5;
8394
8393
  endLabelShiftY = startLabelShiftY;
8395
8394
  }
8396
8395
  switch (connection.endDirection) {
8397
8396
  case Side.Top:
8398
- endLabelShiftX = deltaX >= 0 ? 1 : -1;
8399
- middleLabelShiftX = endLabelShiftX;
8400
- endLabelShiftY = 1;
8397
+ endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8401
8398
  break;
8402
8399
  case Side.Bottom:
8403
- endLabelShiftX = deltaX >= 0 ? 1 : -1;
8404
- middleLabelShiftX = endLabelShiftX;
8405
- endLabelShiftY = -1;
8400
+ endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8406
8401
  break;
8407
8402
  case Side.Left:
8408
- endLabelShiftX = -1;
8409
- endLabelShiftY = deltaY > 0 ? 1 : -1;
8410
- middleLabelShiftY = endLabelShiftY;
8403
+ endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8411
8404
  break;
8412
8405
  case Side.Right:
8413
- endLabelShiftX = 1;
8414
- endLabelShiftY = deltaY > 0 ? 1 : -1;
8415
- middleLabelShiftY = endLabelShiftY;
8406
+ endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8416
8407
  break;
8417
8408
  default:
8418
- endLabelShiftX = 1;
8419
- middleLabelShiftX = endLabelShiftX;
8420
- endLabelShiftY = -1;
8421
- middleLabelShiftY = endLabelShiftY;
8409
+ endLabelShiftX = 0.5;
8410
+ endLabelShiftY = -0.5;
8411
+ }
8412
+ if (Math.abs(deltaX) >= Math.abs(deltaY)) {
8413
+ // horizontal quadrant
8414
+ middleLabelShiftX = deltaX > 0 ? -0.5 : 0.5;
8415
+ middleLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8416
+ } else {
8417
+ // vertical quadrant
8418
+ middleLabelShiftX = deltaX > 0 ? 0.5 : -0.5;
8419
+ middleLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8422
8420
  }
8423
8421
  }
8424
8422
  // bind start labels
@@ -8428,7 +8426,23 @@ class DiagramCanvas {
8428
8426
  // don't create space for the label if the label is empty
8429
8427
  const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8430
8428
  const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8431
- const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8429
+ let pathStartLabelPoint;
8430
+ switch (connection.startDirection) {
8431
+ case Side.Left:
8432
+ pathStartLabelPoint = pathNode.getPointAtLength(getRightMargin(labelConfiguration) + boundingWidth / 2);
8433
+ break;
8434
+ case Side.Right:
8435
+ pathStartLabelPoint = pathNode.getPointAtLength(getLeftMargin(labelConfiguration) + boundingWidth / 2);
8436
+ break;
8437
+ case Side.Top:
8438
+ pathStartLabelPoint = pathNode.getPointAtLength(getBottomMargin(labelConfiguration) + boundingWidth / 2);
8439
+ break;
8440
+ case Side.Bottom:
8441
+ pathStartLabelPoint = pathNode.getPointAtLength(getTopMargin(labelConfiguration) + boundingWidth / 2);
8442
+ break;
8443
+ default:
8444
+ pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8445
+ }
8432
8446
  connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
8433
8447
  connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
8434
8448
  }
@@ -8450,7 +8464,23 @@ class DiagramCanvas {
8450
8464
  // don't create space for the label if the label is empty
8451
8465
  const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8452
8466
  const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8453
- const pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8467
+ let pathEndLabelPoint;
8468
+ switch (connection.endDirection) {
8469
+ case Side.Left:
8470
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getRightMargin(labelConfiguration) + boundingWidth / 2));
8471
+ break;
8472
+ case Side.Right:
8473
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getLeftMargin(labelConfiguration) + boundingWidth / 2));
8474
+ break;
8475
+ case Side.Top:
8476
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getBottomMargin(labelConfiguration) + boundingWidth / 2));
8477
+ break;
8478
+ case Side.Bottom:
8479
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - (getTopMargin(labelConfiguration) + boundingWidth / 2));
8480
+ break;
8481
+ default:
8482
+ pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
8483
+ }
8454
8484
  connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
8455
8485
  connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
8456
8486
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metadev/daga",
3
- "version": "4.2.5",
3
+ "version": "4.2.7",
4
4
  "dependencies": {},
5
5
  "peerDependencies": {
6
6
  "d3": "^7.9.0",