feat: add plugin support to ngu-flow

Author: sheikalthaf

package.json

@@ -6,6 +6,7 @@
     "start": "ng serve --port 52666",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
+    "gh": "ng deploy --dir=dist/angular-flow/browser --base-href=/ngu-flow/",
     "test": "jest"
   },
   "private": true,

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

@@ -95,9 +95,9 @@ export class FlowChildComponent implements OnInit, OnChanges, OnDestroy {
     });
 
     this.positionChange.subscribe((x) => {
-      const { left, top } = this.flow.zRect;
+      // const { left, top } = this.flow.zRect;
       // if (!this.position) console.log(this.position);
-      this.updatePosition(this.position.x + left, this.position.y + top);
+      this.updatePosition(this.position.x, this.position.y);
     });
   }
 

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

@@ -1,3 +1,5 @@
+import { FlowComponent } from './flow.component';
+
 export interface ChildInfo {
   position: FlowOptions;
   dots?: DOMRect[];
@@ -26,6 +28,7 @@ export interface DotOptions extends FlowOptions {
 export class FlowConfig {
   Arrows = true;
   ArrowSize = 20;
+  Plugins: { [x: string]: FlowPlugin } = {};
 }
 
 export type FlowDirection = 'horizontal' | 'vertical';
@@ -36,3 +39,8 @@ export type ArrowPathFn = (
   arrowSize: number,
   strokeWidth: number
 ) => string;
+
+export interface FlowPlugin {
+  onInit?(data: FlowComponent): void;
+  afterInit?(data: FlowComponent): void;
+}

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

@@ -10,9 +10,11 @@ import {
   ElementRef,
   NgZone,
   ChangeDetectionStrategy,
+  Input,
+  OnInit,
 } from '@angular/core';
 import { startWith } from 'rxjs';
-import { Arrangements2 as Arrangements } from './arrangements';
+import { Arrangements2 as Arrangements } from './plugins/arrangements';
 import { Connections } from './connections';
 import { FlowChildComponent } from './flow-child.component';
 import { FlowService } from './flow.service';
@@ -22,9 +24,9 @@ import {
   FlowDirection,
   DotOptions,
   ArrowPathFn,
+  FlowConfig,
 } from './flow-interface';
 import { blendCorners, flowPath, bezierPath, blendCorners1 } from './svg';
-import { FitToWindow } from './fit-to-window';
 
 const BASE_SCALE_AMOUNT = 0.05;
 
@@ -125,10 +127,11 @@ const BASE_SCALE_AMOUNT = 0.05;
   ],
 })
 export class FlowComponent
-  implements AfterContentInit, AfterViewInit, OnDestroy
+  implements OnInit, AfterContentInit, AfterViewInit, OnDestroy
 {
-  @ContentChildren(FlowChildComponent) children: QueryList<FlowChildComponent> =
-    new QueryList();
+  @Input() config: FlowConfig = new FlowConfig();
+  @ContentChildren(FlowChildComponent) children =
+    new QueryList<FlowChildComponent>();
 
   // @ViewChildren('arrowPaths') arrowPaths: QueryList<ElementRef<SVGPathElement>>;
   @ViewChild('zoomContainer') zoomContainer: ElementRef<HTMLDivElement>;
@@ -143,7 +146,9 @@ export class FlowComponent
     public el: ElementRef<HTMLElement>,
     public flow: FlowService,
     private ngZone: NgZone
-  ) {
+  ) {}
+
+  ngOnInit(): void {
     this.flow.zoomContainer = this.el.nativeElement;
     this.flow.arrowsChange.subscribe((e) => this.updateArrows(e));
     this.ngZone.runOutsideAngular(() => {
@@ -166,6 +171,12 @@ export class FlowComponent
 
   ngAfterViewInit(): void {
     this.createArrows();
+    for (const key in this.config.Plugins) {
+      if (Object.prototype.hasOwnProperty.call(this.config.Plugins, key)) {
+        const element = this.config.Plugins[key];
+        element.afterInit?.(this);
+      }
+    }
   }
 
   ngAfterContentInit() {
@@ -281,22 +292,7 @@ export class FlowComponent
     return { scale: newScale, panX: newPanX, panY: newPanY };
   }
 
-  fitToWindow() {
-    const ftw = new FitToWindow(
-      this.list,
-      this.zoomContainer.nativeElement.getBoundingClientRect(),
-      this.flow.scale,
-      this.flow.panX,
-      this.flow.panY
-    );
-    const { scale, panX, panY } = ftw.fitToWindow();
-    this.flow.scale = scale;
-    this.flow.panX = panX;
-    this.flow.panY = panY;
-    this.updateZoomContainer();
-  }
-
-  private updateZoomContainer() {
+  updateZoomContainer() {
     this.zoomContainer.nativeElement.style.transform = `translate3d(${this.flow.panX}px, ${this.flow.panY}px, 0) scale(${this.flow.scale})`;
   }
 

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

@@ -47,7 +47,6 @@ export class FlowService {
   };
 
   update(children: FlowOptions[]) {
-    // console.log('update', children);
     this.items.clear();
     children.forEach((child) => {
       this.items.set(child.id, child);
@@ -62,21 +61,6 @@ export class FlowService {
     });
   }
 
-  // delete(option: FlowOptions) {
-  //   this.items.delete(option.id);
-  //   this.deps.delete(option.id);
-  //   this.deps.forEach((v, k) => {
-  //     const index = v.indexOf(option.id);
-  //     if (index > -1) {
-  //       v.splice(index, 1);
-  //     }
-  //   });
-  // }
-
-  get list() {
-    return Array.from(this.items.values());
-  }
-
   get zRect() {
     return this.zoomContainer.getBoundingClientRect();
   }

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

@@ -1,5 +1,5 @@
 import { Arrangements, Arrangements2 } from './arrangements';
-import { ChildInfo } from './flow-interface';
+import { ChildInfo } from '../flow-interface';
 
 export const FLOW_LIST = [
   { x: 40, y: 40, id: '1', deps: [] },

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

@@ -1,4 +1,10 @@
-import { FlowOptions, ChildInfo, FlowDirection } from './flow-interface';
+import {
+  FlowOptions,
+  ChildInfo,
+  FlowDirection,
+  FlowPlugin,
+} from '../flow-interface';
+import { FlowComponent } from '../flow.component';
 
 export class Arrangements {
   constructor(
@@ -122,7 +128,7 @@ const ROOT_DEPS = new Map<string, string[]>();
 const HORIZONTAL_PADDING = 100;
 const VERTICAL_PADDING = 20;
 
-export class Arrangements2 {
+export class Arrangements2 implements FlowPlugin {
   root: string[] = [];
 
   constructor(
@@ -151,6 +157,10 @@ export class Arrangements2 {
     });
   }
 
+  onInit(data: FlowComponent): void {
+    this.autoArrange();
+  }
+
   public autoArrange(): Map<string, FlowOptions> {
     this.root.forEach((id) => {
       const node = ROOT_DATA.get(id)!;
@@ -162,6 +172,7 @@ export class Arrangements2 {
     for (const item of this.list) {
       newItems.set(item.position.id, item.position);
     }
+    console.log([...newItems.values()]);
     return newItems;
   }
 }

projects/flow/src/lib/fit-to-window.spec.ts projects/flow/src/lib/plugins/fit-to-window.spec.ts

@@ -80,11 +80,25 @@ describe('FitToWindow', () => {
     scale = 1;
     panX = 0;
     panY = 0;
-    fitToWindow = new FitToWindow(list, containerRect, scale, panX, panY);
+    fitToWindow = new FitToWindow();
+    fitToWindow.onInit({
+      list,
+      zoomContainer: {
+        nativeElement: { getBoundingClientRect: () => containerRect },
+      },
+      flow: {
+        scale,
+        panX,
+        panY,
+        zRect: containerRect,
+      },
+      updateZoomContainer: () => {},
+    } as any);
+    fitToWindow.run(list, containerRect, scale, panX, panY);
   });
 
   it('should return positions', () => {
-    const positions = fitToWindow.getPositions();
+    const positions = fitToWindow._getPositions();
     expect(positions).toEqual([
       { x: 121, y: 342.5, width: 400, height: 395 },
       { x: 621, y: 342.5, width: 400, height: 395 },
@@ -98,20 +112,20 @@ describe('FitToWindow', () => {
       { x: 0, y: 0, width: 100, height: 100 },
       { x: 100, y: 100, width: 100, height: 100 },
     ];
-    const { minX, maxX, minY, maxY } = fitToWindow.getBoundaries(positions);
+    const { minX, maxX, minY, maxY } = fitToWindow._getBoundaries(positions);
     expect(minX).toBe(0);
     expect(maxX).toBe(200);
     expect(minY).toBe(0);
     expect(maxY).toBe(200);
   });
 
   it('should return new scale', () => {
-    const newScale = fitToWindow.getNewScale(100, 100);
+    const newScale = fitToWindow._getNewScale(100, 100);
     expect(newScale).toBe(6.28);
   });
 
   it('should return pan values', () => {
-    const { panX, panY } = fitToWindow.getPanValues(
+    const { panX, panY } = fitToWindow._getPanValues(
       1430,
       840,
       0.7476,
@@ -123,7 +137,7 @@ describe('FitToWindow', () => {
   });
 
   it('should return pan and scale values', () => {
-    const { scale, panX, panY } = fitToWindow.fitToWindow();
+    const { scale, panX, panY } = fitToWindow._updateValue();
     expect(scale).toBe(0.7476190476190476);
     expect(panX).toBe(-29.19047619047616);
     expect(panY).toBe(-38.876190476190494);