@metadev/daga 4.2.6 → 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 +6 -0
  2. package/index.cjs.js +43 -16
  3. package/index.esm.js +43 -16
  4. package/package.json +1 -1
package/Changelog.md CHANGED
@@ -6,6 +6,12 @@ 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
+
9
15
  ## v. 4.2.6
10
16
 
11
17
  - Fix bug where editing a property with a root attribute fails in React [#323](https://github.com/metadevpro/daga/pull/323)
package/index.cjs.js CHANGED
@@ -6274,7 +6274,10 @@ const SHAPED_LOOK_DEFAULTS = {
6274
6274
  borderStyle: exports.LineStyle.Solid
6275
6275
  };
6276
6276
  const updateLook = selection => {
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 => 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
+ });
6278
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);
6279
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);
6280
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);
@@ -7945,7 +7948,7 @@ class DiagramCanvas {
7945
7948
  if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && !d.removed) {
7946
7949
  if (this.unfinishedConnection !== undefined) {
7947
7950
  const endCoords = [event.x, event.y];
7948
- (_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));
7949
7952
  const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
7950
7953
  if (unfinishedConnectionGhostNode) {
7951
7954
  let margin = 2;
@@ -8093,14 +8096,14 @@ class DiagramCanvas {
8093
8096
  enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
8094
8097
  mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
8095
8098
  var _a, _b;
8096
- 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);
8097
- }).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');
8098
8101
  mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
8099
8102
  var _a, _b;
8100
- 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);
8101
8104
  }).attr('stroke', 'transparent')
8102
8105
  // allow generating pointer events even when it is transparent
8103
- .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');
8104
8107
  mergeSelection.data().forEach(connection => {
8105
8108
  this.updateConnectionLabelsInView(connection);
8106
8109
  this.updateConnectionMarkersInView(connection);
@@ -8391,20 +8394,16 @@ class DiagramCanvas {
8391
8394
  case exports.Side.Top:
8392
8395
  startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8393
8396
  endLabelShiftX = startLabelShiftX;
8394
- startLabelShiftY = -0.5;
8395
8397
  break;
8396
8398
  case exports.Side.Bottom:
8397
8399
  startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8398
8400
  endLabelShiftX = startLabelShiftX;
8399
- startLabelShiftY = 0.5;
8400
8401
  break;
8401
8402
  case exports.Side.Left:
8402
- startLabelShiftX = -0.5;
8403
8403
  startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8404
8404
  endLabelShiftY = startLabelShiftY;
8405
8405
  break;
8406
8406
  case exports.Side.Right:
8407
- startLabelShiftX = 0.5;
8408
8407
  startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8409
8408
  endLabelShiftY = startLabelShiftY;
8410
8409
  break;
@@ -8417,18 +8416,14 @@ class DiagramCanvas {
8417
8416
  switch (connection.endDirection) {
8418
8417
  case exports.Side.Top:
8419
8418
  endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8420
- endLabelShiftY = 0.5;
8421
8419
  break;
8422
8420
  case exports.Side.Bottom:
8423
8421
  endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8424
- endLabelShiftY = -0.5;
8425
8422
  break;
8426
8423
  case exports.Side.Left:
8427
- endLabelShiftX = -0.5;
8428
8424
  endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8429
8425
  break;
8430
8426
  case exports.Side.Right:
8431
- endLabelShiftX = 0.5;
8432
8427
  endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8433
8428
  break;
8434
8429
  default:
@@ -8452,7 +8447,23 @@ class DiagramCanvas {
8452
8447
  // don't create space for the label if the label is empty
8453
8448
  const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8454
8449
  const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8455
- 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
+ }
8456
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');
8457
8468
  connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
8458
8469
  }
@@ -8474,7 +8485,23 @@ class DiagramCanvas {
8474
8485
  // don't create space for the label if the label is empty
8475
8486
  const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8476
8487
  const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8477
- 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
+ }
8478
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');
8479
8506
  connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
8480
8507
  }
package/index.esm.js CHANGED
@@ -6253,7 +6253,10 @@ const SHAPED_LOOK_DEFAULTS = {
6253
6253
  borderStyle: LineStyle.Solid
6254
6254
  };
6255
6255
  const updateLook = selection => {
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 => 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
+ });
6257
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);
6258
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);
6259
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);
@@ -7924,7 +7927,7 @@ class DiagramCanvas {
7924
7927
  if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
7925
7928
  if (this.unfinishedConnection !== undefined) {
7926
7929
  const endCoords = [event.x, event.y];
7927
- (_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));
7928
7931
  const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
7929
7932
  if (unfinishedConnectionGhostNode) {
7930
7933
  let margin = 2;
@@ -8072,14 +8075,14 @@ class DiagramCanvas {
8072
8075
  enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
8073
8076
  mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
8074
8077
  var _a, _b;
8075
- 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);
8076
- }).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');
8077
8080
  mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
8078
8081
  var _a, _b;
8079
- 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);
8080
8083
  }).attr('stroke', 'transparent')
8081
8084
  // allow generating pointer events even when it is transparent
8082
- .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');
8083
8086
  mergeSelection.data().forEach(connection => {
8084
8087
  this.updateConnectionLabelsInView(connection);
8085
8088
  this.updateConnectionMarkersInView(connection);
@@ -8370,20 +8373,16 @@ class DiagramCanvas {
8370
8373
  case Side.Top:
8371
8374
  startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8372
8375
  endLabelShiftX = startLabelShiftX;
8373
- startLabelShiftY = -0.5;
8374
8376
  break;
8375
8377
  case Side.Bottom:
8376
8378
  startLabelShiftX = deltaX >= 0 ? -0.5 : 0.5;
8377
8379
  endLabelShiftX = startLabelShiftX;
8378
- startLabelShiftY = 0.5;
8379
8380
  break;
8380
8381
  case Side.Left:
8381
- startLabelShiftX = -0.5;
8382
8382
  startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8383
8383
  endLabelShiftY = startLabelShiftY;
8384
8384
  break;
8385
8385
  case Side.Right:
8386
- startLabelShiftX = 0.5;
8387
8386
  startLabelShiftY = deltaY > 0 ? -0.5 : 0.5;
8388
8387
  endLabelShiftY = startLabelShiftY;
8389
8388
  break;
@@ -8396,18 +8395,14 @@ class DiagramCanvas {
8396
8395
  switch (connection.endDirection) {
8397
8396
  case Side.Top:
8398
8397
  endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8399
- endLabelShiftY = 0.5;
8400
8398
  break;
8401
8399
  case Side.Bottom:
8402
8400
  endLabelShiftX = deltaX >= 0 ? 0.5 : -0.5;
8403
- endLabelShiftY = -0.5;
8404
8401
  break;
8405
8402
  case Side.Left:
8406
- endLabelShiftX = -0.5;
8407
8403
  endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8408
8404
  break;
8409
8405
  case Side.Right:
8410
- endLabelShiftX = 0.5;
8411
8406
  endLabelShiftY = deltaY > 0 ? 0.5 : -0.5;
8412
8407
  break;
8413
8408
  default:
@@ -8431,7 +8426,23 @@ class DiagramCanvas {
8431
8426
  // don't create space for the label if the label is empty
8432
8427
  const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8433
8428
  const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8434
- 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
+ }
8435
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');
8436
8447
  connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
8437
8448
  }
@@ -8453,7 +8464,23 @@ class DiagramCanvas {
8453
8464
  // don't create space for the label if the label is empty
8454
8465
  const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
8455
8466
  const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
8456
- 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
+ }
8457
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');
8458
8485
  connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
8459
8486
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metadev/daga",
3
- "version": "4.2.6",
3
+ "version": "4.2.7",
4
4
  "dependencies": {},
5
5
  "peerDependencies": {
6
6
  "d3": "^7.9.0",