Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: asTRBL supported for flow elements #940

Closed
wants to merge 1 commit into from
Closed

fix: asTRBL supported for flow elements #940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions lib/layout/LayoutUtil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
* @typedef {import('../util/Types').Point} Point
* @typedef {import('../util/Types').Rect} Rect
* @typedef {import('../util/Types').RectTRBL} RectTRBL
* @typedef {import('../util/Types').ConnectionTRBL} ConnectionTRBL

Check failure on line 24 in lib/layout/LayoutUtil.js

View workflow job for this annotation

GitHub Actions / Build (macos-latest) 

Trailing spaces not allowed

Check failure on line 24 in lib/layout/LayoutUtil.js

View workflow job for this annotation

GitHub Actions / Build (ubuntu-20.04) 

Trailing spaces not allowed

Check failure on line 24 in lib/layout/LayoutUtil.js

View workflow job for this annotation

GitHub Actions / Build (macos-latest) 

Trailing spaces not allowed

Check failure on line 24 in lib/layout/LayoutUtil.js

View workflow job for this annotation

GitHub Actions / Build (ubuntu-20.04) 

Trailing spaces not allowed
*/

/**
Expand Down Expand Up @@ -51,6 +52,36 @@
}


/**
* Convert the given connection bounds to a { top, left, bottom, right } descriptor.
*
* @param {Point|Connection} bounds
*
* @return {ConnectionTRBL}
*/
export function asConnectionTRBL(bounds) {
const waypoints = bounds.waypoints;
const points = waypoints.reduce((acc, point, index, array) => {
acc.x += point.x;
acc.y += point.y;

// Check if it's the last element
if (index === array.length - 1) {
acc.x /= array.length;
acc.y /= array.length;
}

return acc;
}, { x: 0, y: 0 });

return {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TRBL stands for "top, right, bottom, left. I don't think that this is what we want to accomplish here, right?

What do you want to accomplish? I assume you want to compute the bounding box (bounds, Rect) of a connection, and once you have it, you can feed that into asTRBL?

Copy link
Member

@nikku nikku Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or would you like to compute the "mid" of an element? This is available, too, so you just need a utility to compute the connection bounds, and chain things together.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's what we want to accomplish. I wasn't aware that you can calculate bounding box for a connection, I thought it's just for element.

Copy link
Contributor Author

@abdul99ahad abdul99ahad Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is when you move the annotation from the flow that has label to it, and put on top of the label. The label should move downwards to the flow.
Oct-14-2024 19-12-12

Currently, it's giving error cuz when annotation is moved some events emit to move label as well. A connection is passed in asTRBL and returns NaN since it's not designed to handle connections. What my approach was to handle asTRBL to support connections as well. If it's handled, then it can appropriately align the label to optimal position. The function of TRBL is just to return the current coordinates if it does, we are handling rest in bpmn-js.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Who exactly passes the connection into the asTRBL function (which is unsupported)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AdaptiveLabelPositioningBehavior in bpmn-js passes the flow element to get TRBL to facilitate positioning of label.

top: points.y,
right: points.x + (bounds.width || 0),
bottom: points.y,
left: points.x
};
}

/**
* Convert the given bounds to a { top, left, bottom, right } descriptor.
*
Expand Down
6 changes: 5 additions & 1 deletion lib/util/Types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,17 @@ export type Dimensions = {

export type Rect = Dimensions & Point;

export type RectTRBL = {
export type TRBL = {
top: number;
right: number;
bottom: number;
left: number;
};

export type RectTRBL = TRBL

export type ConnectionTRBL = TRBL;

export type Axis = 'x' | 'y';

export type Direction = 'n' | 'w' | 's' | 'e' | 'nw' | 'ne' | 'sw' | 'se';
Expand Down
52 changes: 51 additions & 1 deletion test/spec/layout/LayoutUtilSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import {
filterRedundantWaypoints,
getOrientation,
getMid
getMid,
asTRBL,
asConnectionTRBL
} from 'lib/layout/LayoutUtil';

import {
create,
} from 'lib/model';

function rect(x, y, width, height) {
return { x: x, y: y, width: width, height: height };
Expand Down Expand Up @@ -173,4 +178,49 @@ describe('layout/LayoutUtil', function() {
});
});

describe('#asTRBL', function() {

it('should return top, right, bottom and left when shape', function() {

// given
var shape = create('shape', {
x: 10,
y: 20,
width: 100,
height: 100
});

// then
expect(asTRBL(shape)).to.deep.equal({
top: 20,
right: 110,
bottom: 120,
left: 10
});
});

it('should return top, right, bottom and left when flow element', function() {

// given
var waypoints = [ { x: 10, y: 10 }, { x: 100, y: 100 } ];

// when
var connection = create('connection', {
waypoints: waypoints,
width: 20,
height: 5
});

// then
expect(asConnectionTRBL(connection)).to.deep.equal({
top: 55,
right: 75,
bottom: 55,
left: 55
});

});

});

});
Loading