Skip to content

Commit bf5100d

Browse files
sheikalthafsheikalthaf
committed
fix: sonar issue fixes and address comments
1 parent eb71297 commit bf5100d

13 files changed

+59
-246
lines changed

‎projects/flow/src/lib/flow-child.component.ts

-2
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,6 @@ export class FlowChildComponent implements OnInit, OnChanges, OnDestroy {
9595
});
9696

9797
this.positionChange.subscribe((x) => {
98-
// const { left, top } = this.flow.zRect;
99-
// if (!this.position) console.log(this.position);
10098
this.updatePosition(this.position.x, this.position.y);
10199
});
102100
}

‎projects/flow/src/lib/flow-interface.ts

-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { FlowComponent } from './flow.component';
2-
31
export interface ChildInfo {
42
position: FlowOptions;
53
dots?: DOMRect[];
@@ -25,12 +23,6 @@ export interface DotOptions extends FlowOptions {
2523
dotIndex: number;
2624
}
2725

28-
export class FlowConfig {
29-
Arrows = true;
30-
ArrowSize = 20;
31-
Plugins: { [x: string]: FlowPlugin } = {};
32-
}
33-
3426
export type FlowDirection = 'horizontal' | 'vertical';
3527

3628
export type ArrowPathFn = (
@@ -39,10 +31,3 @@ export type ArrowPathFn = (
3931
arrowSize: number,
4032
strokeWidth: number
4133
) => string;
42-
43-
export interface FlowPlugin {
44-
onInit?(data: FlowComponent): void;
45-
afterInit?(data: FlowComponent): void;
46-
beforeUpdate?(data: FlowComponent): void;
47-
afterUpdate?(data: FlowComponent): void;
48-
}

‎projects/flow/src/lib/flow.component.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,9 @@ import {
2020
FlowOptions,
2121
ChildInfo,
2222
FlowDirection,
23-
DotOptions,
2423
ArrowPathFn,
25-
FlowConfig,
26-
FlowPlugin,
2724
} from './flow-interface';
28-
import { blendCorners, flowPath, bezierPath, blendCorners1 } from './svg';
25+
import { FlowConfig, FlowPlugin } from './plugins/plugin';
2926

3027
const BASE_SCALE_AMOUNT = 0.05;
3128

‎projects/flow/src/lib/flow.service.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import { Injectable, NgZone } from '@angular/core';
22
import { BehaviorSubject, Subject } from 'rxjs';
3-
import {
4-
ArrowPathFn,
5-
FlowConfig,
6-
FlowDirection,
7-
FlowOptions,
8-
} from './flow-interface';
3+
import { ArrowPathFn, FlowDirection, FlowOptions } from './flow-interface';
94
import { blendCorners } from './svg';
5+
import { FlowConfig } from './plugins/plugin';
106

117
@Injectable()
128
export class FlowService {

‎projects/flow/src/lib/plugins/arrangements.spec.ts

+1-28
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ArrangementsOld, Arrangements } from './arrangements';
1+
import { Arrangements } from './arrangements';
22
import { ChildInfo } from '../flow-interface';
33
import { FlowComponent } from '../flow.component';
44

@@ -14,33 +14,6 @@ export const FLOW_LIST = [
1414
];
1515

1616
describe('Arrangements', () => {
17-
let arrangements: ArrangementsOld;
18-
19-
it('should be created', () => {
20-
const childObj: ChildInfo[] = FLOW_LIST.map((x) => ({
21-
position: x,
22-
elRect: { width: 200, height: 200 } as any,
23-
}));
24-
25-
arrangements = new ArrangementsOld(childObj);
26-
arrangements.verticalPadding = 20;
27-
arrangements.groupPadding = 100;
28-
const expected = {
29-
'1': { x: 0, y: 370, id: '1', deps: [] },
30-
'2': { x: 300, y: 110, id: '2', deps: ['1'] },
31-
'3': { x: 600, y: 0, id: '3', deps: ['2'] },
32-
'4': { x: 600, y: 220, id: '4', deps: ['2'] },
33-
'5': { x: 300, y: 630, id: '5', deps: ['1'] },
34-
'6': { x: 600, y: 520, id: '6', deps: ['5'] },
35-
'7': { x: 600, y: 740, id: '7', deps: ['5'] },
36-
'8': { x: 900, y: 550, id: '8', deps: ['6', '7'] },
37-
};
38-
const actual = Object.fromEntries(arrangements.autoArrange());
39-
expect(actual).toEqual(expected);
40-
});
41-
});
42-
43-
describe('Arrangements2', () => {
4417
let arrangements: Arrangements;
4518

4619
it('should be created', () => {

‎projects/flow/src/lib/plugins/arrangements.ts

+7-130
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,6 @@
1-
import {
2-
FlowOptions,
3-
ChildInfo,
4-
FlowDirection,
5-
FlowPlugin,
6-
} from '../flow-interface';
1+
import { FlowOptions, ChildInfo, FlowDirection } from '../flow-interface';
72
import { FlowComponent } from '../flow.component';
8-
9-
export class ArrangementsOld {
10-
constructor(
11-
private list: ChildInfo[],
12-
private direction: 'horizontal' | 'vertical' = 'horizontal',
13-
public horizontalPadding = 100,
14-
public verticalPadding = 20,
15-
public groupPadding = 20
16-
) {}
17-
18-
public autoArrange(): Map<string, FlowOptions> {
19-
const newItems = new Map<string, FlowOptions>();
20-
let currentX = 0;
21-
let currentY = 0;
22-
23-
// Handle both horizontal and vertical directions
24-
const baseNodes = this.list.filter(
25-
(node) => node.position.deps.length === 0
26-
);
27-
28-
for (const baseNode of baseNodes) {
29-
if (this.direction === 'horizontal') {
30-
this.positionDependents(baseNode, 0, currentY, newItems);
31-
currentY += baseNode.elRect.height + this.verticalPadding;
32-
} else {
33-
// Vertical arrangement
34-
this.positionDependents(baseNode, 0, currentX, newItems);
35-
currentX += baseNode.elRect.width + this.verticalPadding;
36-
}
37-
}
38-
39-
return newItems;
40-
}
41-
42-
private positionDependents(
43-
baseNode: ChildInfo,
44-
baseX: number,
45-
baseY: number,
46-
newItems: Map<string, FlowOptions>,
47-
config: { first: boolean; gp: number; maxDepLength: number } = {
48-
first: true,
49-
gp: -this.groupPadding * 2,
50-
maxDepLength: 0,
51-
}
52-
): { consumedSpace: number; dep: boolean } {
53-
const dependents = this.list.filter((child) =>
54-
child.position.deps.includes(baseNode.position.id)
55-
);
56-
57-
const isV = this.direction === 'vertical';
58-
59-
let startY = baseY;
60-
const { width: w, height: h } = baseNode.elRect;
61-
let newX = baseX + (isV ? h : w) + this.horizontalPadding;
62-
const height = isV ? w : h;
63-
64-
const childC: { first: boolean; gp: number; maxDepLength: number } = {
65-
first: true,
66-
gp: 0,
67-
maxDepLength: 0,
68-
};
69-
for (let i = 0; i < dependents.length; i++) {
70-
const depLast = i === dependents.length - 1;
71-
childC.first = i === 0;
72-
const dependent = dependents[i];
73-
const { consumedSpace, dep } = this.positionDependents(
74-
dependent,
75-
newX,
76-
startY,
77-
newItems,
78-
childC
79-
);
80-
81-
startY = 0;
82-
83-
if (childC.maxDepLength > 1 && dep && !depLast) {
84-
startY += this.groupPadding;
85-
config.gp += this.groupPadding;
86-
}
87-
startY += consumedSpace + (!depLast ? this.verticalPadding : 0);
88-
}
89-
90-
// baseY += childC.gp;
91-
config.maxDepLength = Math.max(config.maxDepLength, childC.maxDepLength);
92-
93-
let y = 0;
94-
if (dependents.length > 1) {
95-
// find the first and last dependent and there y position
96-
const firstDepId = dependents[0].position.id;
97-
const lastDepId = dependents[dependents.length - 1].position.id;
98-
const firstDep = newItems.get(firstDepId)!;
99-
const lastDep = newItems.get(lastDepId)!;
100-
// find the center of the first and last dependent
101-
y = (isV ? firstDep.x + lastDep.x : firstDep.y + lastDep.y) / 2;
102-
} else {
103-
y = baseY + (dependents.length ? (startY - baseY) / 2 - height / 2 : 0);
104-
105-
// TODO: This is not working as expected
106-
// If there are more than one dependency, We need to center the node based on the parents
107-
if (baseNode.position.deps.length > 1) {
108-
const len = baseNode.position.deps.length / 2;
109-
const halfVerticalPadding = (this.verticalPadding * len) / 2;
110-
y -= baseNode.elRect.height * len - halfVerticalPadding;
111-
}
112-
}
113-
newItems.set(baseNode.position.id, {
114-
...baseNode.position,
115-
x: isV ? y : baseX,
116-
y: isV ? baseX : y,
117-
});
118-
// add groupPadding if there are more than one dependency
119-
const groupPad =
120-
dependents.length > 1 ? this.groupPadding - this.verticalPadding : 0;
121-
const consumedSpace = startY + (dependents.length ? 0 : height) + groupPad;
122-
return { consumedSpace, dep: dependents.length > 0 };
123-
}
124-
}
3+
import { FlowPlugin } from './plugin';
1254

1265
const ROOT_DATA = new Map<string, ArrangeNode>();
1276
const ROOT_DEPS = new Map<string, string[]>();
@@ -137,8 +16,6 @@ export class Arrangements implements FlowPlugin {
13716
public verticalPadding = 20;
13817
public groupPadding = 20;
13918

140-
constructor() {}
141-
14219
onInit(data: FlowComponent): void {
14320
this.data = data;
14421
}
@@ -194,7 +71,6 @@ export class Arrangements implements FlowPlugin {
19471
for (const item of this.list) {
19572
newItems.set(item.position.id, item.position);
19673
}
197-
console.log([...newItems.values()]);
19874
return newItems;
19975
}
20076
}
@@ -213,7 +89,7 @@ export class ArrangeNode {
21389

21490
// we need to recursively call this method to get all the dependents of the node
21591
// and then we need to position them
216-
arrange(x = 0, y = 0, direction: FlowDirection): Coordinates {
92+
arrange(x: number, y: number, direction: FlowDirection): Coordinates {
21793
const dependents = ROOT_DEPS.get(this.position.id) || [];
21894
let startX = x;
21995
let startY = y;
@@ -225,7 +101,8 @@ export class ArrangeNode {
225101
} else {
226102
startY += this.elRect.height + HORIZONTAL_PADDING;
227103
}
228-
let first, last: Coordinates;
104+
let first: Coordinates = { x: 0, y: 0 };
105+
let last: Coordinates = { x: 0, y: 0 };
229106
for (let i = 0; i < len; i++) {
230107
const dep = dependents[i];
231108
const dependent = ROOT_DATA.get(dep)!;
@@ -242,10 +119,10 @@ export class ArrangeNode {
242119
}
243120
if (direction === 'horizontal') {
244121
startY -= VERTICAL_PADDING + this.elRect.height;
245-
y = first!.y + (last!.y - first!.y) / 2;
122+
y = first.y + (last.y - first.y) / 2;
246123
} else {
247124
startX -= VERTICAL_PADDING + this.elRect.width;
248-
x = first!.x + (last!.x - first!.x) / 2;
125+
x = first.x + (last.x - first.x) / 2;
249126
}
250127
}
251128
this.position.x = x;

‎projects/flow/src/lib/plugins/connections.spec.ts

+2-12
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ describe('Connections', () => {
1515
];
1616

1717
check(list, [1, 3]);
18-
check(list.reverse(), [3, 1]);
18+
list.reverse();
19+
check(list, [3, 1]);
1920

2021
list = [
2122
t({ x: 300, y: -150, id: '2', deps: ['1'] }),
@@ -50,31 +51,20 @@ describe('Connections', () => {
5051
];
5152

5253
check(list, 0, '2', [1, 3]);
53-
// connections = new Connections(list);
54-
// let actual = connections.getClosestDotsSimplified(list[0], '2');
55-
// expect(actual).toEqual([1, 3]);
5654
check(list, 1, '1', [3, 1]);
57-
// actual = connections.getClosestDotsSimplified(list[1], '1');
58-
// expect(actual).toEqual([3, 1]);
5955

6056
list = [
6157
t({ x: 40, y: 40, id: '1', deps: [] }),
6258
t({ x: 173.203125, y: -33, id: '2', deps: ['1'] }),
6359
];
6460
check(list, 0, '2', [1, 3]);
65-
// connections = new Connections(list);
66-
// actual = connections.getClosestDotsSimplified(list[0], '2');
67-
// expect(actual).toEqual([1, 3]);
6861

6962
list = [
7063
t({ x: 40, y: 40, id: '1', deps: [] }),
7164
t({ x: 142.203125, y: -33, id: '2', deps: ['1'] }),
7265
];
7366
check(list, 0, '2', [1, 3]);
7467

75-
// actual = connections.getClosestDotsSimplified(list[0], '2');
76-
// expect(actual).toEqual([1, 3]);
77-
7868
function check(
7969
list: ChildInfo[],
8070
index: number,

0 commit comments

Comments
 (0)