Skip to content

Commit 57d9633

Browse files
siarheihuzarevichsiarheihuzarevich
committed
feat(connection): add buildConnectionAnchors utility and refactor related code
- Introduced buildConnectionAnchors function to streamline anchor point creation - Replaced calculateUserAnchorPoints with buildConnectionAnchors in multiple files - Added joinSegmentPaths utility for concatenating segment paths - Updated index exports to include new utilities Signed-off-by: Siarhei Huzarevich <shuzarevich@gmail.com>
1 parent a60cce8 commit 57d9633

File tree

12 files changed

+126
-115
lines changed

12 files changed

+126
-115
lines changed

‎projects/f-examples/connections/connection-types/connection-types.html‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -48,52 +48,52 @@
4848
Node
4949
</div>
5050

51-
<f-connection [fReassignDisabled]="true" fType="bezier" fOutputId="5" fInputId="6">
52-
<f-connection-control-points />
53-
</f-connection>
54-
<div
55-
fNode
56-
fDragHandle
57-
[fNodePosition]="{ x: 0, y: 300 }"
58-
fNodeOutput
59-
fOutputId="5"
60-
fOutputConnectableSide="right"
61-
>
62-
Node
63-
</div>
64-
<div
65-
fNode
66-
fDragHandle
67-
[fNodePosition]="{ x: 200, y: 350 }"
68-
fNodeInput
69-
fInputId="6"
70-
fInputConnectableSide="left"
71-
>
72-
Node
73-
</div>
51+
<!-- <f-connection [fReassignDisabled]="true" fType="bezier" fOutputId="5" fInputId="6">-->
52+
<!-- <f-connection-control-points />-->
53+
<!-- </f-connection>-->
54+
<!-- <div-->
55+
<!-- fNode-->
56+
<!-- fDragHandle-->
57+
<!-- [fNodePosition]="{ x: 0, y: 300 }"-->
58+
<!-- fNodeOutput-->
59+
<!-- fOutputId="5"-->
60+
<!-- fOutputConnectableSide="right"-->
61+
<!-- >-->
62+
<!-- Node-->
63+
<!-- </div>-->
64+
<!-- <div-->
65+
<!-- fNode-->
66+
<!-- fDragHandle-->
67+
<!-- [fNodePosition]="{ x: 200, y: 350 }"-->
68+
<!-- fNodeInput-->
69+
<!-- fInputId="6"-->
70+
<!-- fInputConnectableSide="left"-->
71+
<!-- >-->
72+
<!-- Node-->
73+
<!-- </div>-->
7474

75-
<f-connection [fReassignDisabled]="true" fType="adaptive-curve" fOutputId="7" fInputId="8">
76-
<f-connection-control-points />
77-
</f-connection>
78-
<div
79-
fNode
80-
fDragHandle
81-
[fNodePosition]="{ x: 0, y: 450 }"
82-
fNodeOutput
83-
fOutputId="7"
84-
fOutputConnectableSide="right"
85-
>
86-
Node
87-
</div>
88-
<div
89-
fNode
90-
fDragHandle
91-
[fNodePosition]="{ x: 200, y: 500 }"
92-
fNodeInput
93-
fInputId="8"
94-
fInputConnectableSide="left"
95-
>
96-
Node
97-
</div>
75+
<!-- <f-connection [fReassignDisabled]="true" fType="adaptive-curve" fOutputId="7" fInputId="8">-->
76+
<!-- <f-connection-control-points />-->
77+
<!-- </f-connection>-->
78+
<!-- <div-->
79+
<!-- fNode-->
80+
<!-- fDragHandle-->
81+
<!-- [fNodePosition]="{ x: 0, y: 450 }"-->
82+
<!-- fNodeOutput-->
83+
<!-- fOutputId="7"-->
84+
<!-- fOutputConnectableSide="right"-->
85+
<!-- >-->
86+
<!-- Node-->
87+
<!-- </div>-->
88+
<!-- <div-->
89+
<!-- fNode-->
90+
<!-- fDragHandle-->
91+
<!-- [fNodePosition]="{ x: 200, y: 500 }"-->
92+
<!-- fNodeInput-->
93+
<!-- fInputId="8"-->
94+
<!-- fInputConnectableSide="left"-->
95+
<!-- >-->
96+
<!-- Node-->
97+
<!-- </div>-->
9898
</f-canvas>
9999
</f-flow>

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/adaptive-curve/calculate-adaptive-curve-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { IPoint } from '@foblex/2d';
22
import {
3+
buildConnectionAnchors,
34
buildCurveCandidates,
4-
calculateUserAnchorPoints,
55
createMultiCubicPath,
66
ICubicSegment,
77
sampleMultiCubicUniform,
@@ -92,7 +92,7 @@ export class CalculateAdaptiveCurveData implements IFConnectionBuilder {
9292
const { source, sourceSide, target, targetSide, offset, pivots } = req;
9393
const clampedOffset = Math.max(0, offset ?? 0);
9494

95-
const anchors = [source, ...calculateUserAnchorPoints(pivots), target];
95+
const anchors = buildConnectionAnchors(source, target, pivots);
9696

9797
const segments: ICubicSegment[] = [];
9898

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/bezier-curve/calculate-bezier-curve-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { IPoint } from '@foblex/2d';
22
import {
3+
buildConnectionAnchors,
34
buildCurveCandidates,
4-
calculateUserAnchorPoints,
55
createMultiCubicPath,
66
ICubicSegment,
77
sampleMultiCubicUniform,
@@ -22,7 +22,7 @@ export class CalculateBezierCurveData implements IFConnectionBuilder {
2222
offset,
2323
pivots,
2424
}: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
25-
const anchors = [source, ...calculateUserAnchorPoints(pivots), target];
25+
const anchors = buildConnectionAnchors(source, target, pivots);
2626

2727
const segments: ICubicSegment[] = [];
2828

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/segment-line/calculate-segment-line-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { IPoint, PointExtensions } from '@foblex/2d';
22
import { IMap } from '../../../../../domain';
33
import {
4+
buildConnectionAnchors,
45
buildPolylineCandidatesForChain,
56
calculateCenterBetweenPoints,
6-
calculateUserAnchorPoints,
77
mergePointChains,
88
} from '../utils';
99
import { createSegmentLinePath } from './create-segment-line-path';
@@ -50,7 +50,7 @@ export class CalculateSegmentLineData implements IFConnectionBuilder {
5050
public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
5151
const { source, sourceSide, target, targetSide, pivots, offset, radius } = request;
5252

53-
const anchors = [source, ...calculateUserAnchorPoints(pivots), target];
53+
const anchors = buildConnectionAnchors(source, target, pivots);
5454

5555
const chains: IPoint[][] = [];
5656
const candidates: IControlPointCandidate[] = [];

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/straight-line/calculate-straight-line-data.ts‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,66 @@
1-
import { createStraightLinePath } from './create-straight-line-path';
21
import {
32
IFConnectionBuilderResponse,
43
IFConnectionBuilder,
54
IFConnectionBuilderRequest,
65
} from '../../models';
6+
import { buildConnectionAnchors } from '../utils';
7+
import { IPoint } from '@foblex/2d';
78
import { IControlPointCandidate } from '../../../../components';
8-
import { calculateUserAnchorPoints } from '../utils';
99

1010
export class CalculateStraightLineData implements IFConnectionBuilder {
11-
public handle({
12-
source,
13-
pivots,
14-
target,
15-
}: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
16-
const anchors = [source, ...calculateUserAnchorPoints(pivots), target];
17-
18-
const candidates: IControlPointCandidate[] = [];
11+
public handle(request: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
12+
const anchors = buildConnectionAnchors(request.source, request.target, request.pivots);
13+
14+
const segmentPaths: string[] = [];
15+
1916
for (let i = 0; i < anchors.length - 1; i++) {
2017
const a = anchors[i];
2118
const b = anchors[i + 1];
22-
candidates.push({
23-
point: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
24-
chainIndex: i,
25-
kind: 'mid-segment',
26-
});
19+
20+
const path = createStraightSegmentPath(a, b, i === anchors.length - 2);
21+
segmentPaths.push(path);
2722
}
2823

24+
const d = joinSegmentPaths(segmentPaths);
25+
2926
return {
30-
path: createStraightLinePath(anchors),
31-
secondPoint: anchors[1] ?? target,
32-
penultimatePoint: anchors[anchors.length - 2] ?? source,
27+
path: d,
28+
candidates: buildSegmentCandidates(anchors),
3329
points: anchors,
34-
candidates,
30+
secondPoint: anchors[1] ?? request.target,
31+
penultimatePoint: anchors[anchors.length - 2] ?? request.source,
3532
};
3633
}
3734
}
3835

39-
// export class CalculateStraightLineData implements IFConnectionBuilder {
40-
// public handle({
41-
// source,
42-
// pivots,
43-
// target,
44-
// }: IFConnectionBuilderRequest): IFConnectionBuilderResponse {
45-
// const polyline = [source, ...calculateUserAnchors(pivots), target];
46-
//
47-
// return {
48-
// path: createStraightLinePath(polyline),
49-
// penultimatePoint: polyline[points.length - 2],
50-
// secondPoint: polyline[1] ?? target,
51-
// points,
52-
// };
53-
// }
54-
// }
36+
function createStraightSegmentPath(a: IPoint, b: IPoint, isLast: boolean): string {
37+
const x = isLast ? b.x + 0.0002 : b.x;
38+
const y = isLast ? b.y + 0.0002 : b.y;
39+
40+
return `M ${a.x} ${a.y} L ${x} ${y}`;
41+
}
42+
43+
function buildSegmentCandidates(anchors: IPoint[]): IControlPointCandidate[] {
44+
const out: IControlPointCandidate[] = [];
45+
for (let i = 0; i < anchors.length - 1; i++) {
46+
const a = anchors[i];
47+
const b = anchors[i + 1];
48+
out.push({
49+
point: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
50+
chainIndex: i,
51+
kind: 'mid-segment',
52+
});
53+
}
54+
55+
return out;
56+
}
57+
58+
function joinSegmentPaths(segments: string[]): string {
59+
let d = segments[0];
60+
61+
for (let i = 1; i < segments.length; i++) {
62+
d += ' ' + segments[i];
63+
}
64+
65+
return d;
66+
}

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/straight-line/create-straight-line-path.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/straight-line/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from './calculate-straight-line-data';
2-
export * from './create-straight-line-path';

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/utils/build-connection-anchors.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { IControlPoint } from '@foblex/flow';
2+
import { IPoint } from '@foblex/2d';
3+
4+
export function buildConnectionAnchors(
5+
source: IPoint,
6+
target: IPoint,
7+
pivots?: IControlPoint[],
8+
): IPoint[] {
9+
return [source, ..._calculatePivots(pivots).map((p) => p.point), target];
10+
}
11+
12+
function _calculatePivots(pivots?: IControlPoint[]): IControlPoint[] {
13+
return (pivots ?? []).filter((p) => p.userDefined);
14+
}

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/utils/calculate-user-anchor-points.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎projects/f-flow/src/f-connection-v2/utils/connection-line-builder/builders/utils/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
export * from './build-connection-anchors';
12
export * from './calculate-center-between-points';
2-
export * from './calculate-user-anchor-points';
3+
export * from './join-segment-path';
34
export * from './merge-point-chains';
45
export * from './multi-cubic';
56
export * from './polyline-candidates';

0 commit comments

Comments
 (0)