feat: added db management flow example

package.json

@@ -51,15 +51,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.1",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.1",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
     "@foblex/core": "^1.1.8",
-    "@foblex/f-docs": "^1.2.2",
+    "@foblex/f-docs": "^1.2.3",
     "dagre": "^0.8.5",
     "elkjs": "^0.9.3",
     "rxjs": "~7.8.0",

projects/f-examples/custom-connection-type/custom-connection-type.component.ts

@@ -6,7 +6,7 @@ import {
   IFConnectionBuilderRequest,
   IFConnectionBuilderResponse
 } from '@foblex/flow';
-import { IPoint } from '@foblex/core';
+import { IPoint, PointExtensions } from '@foblex/core';
 
 
 class OffsetStraightBuilder implements IFConnectionBuilder {
@@ -15,7 +15,7 @@ class OffsetStraightBuilder implements IFConnectionBuilder {
     const { source, target } = request;
     const path = `M ${ source.x } ${ source.y } L ${ source.x + 20 } ${ source.y } L ${ target.x - 20 } ${ target.y } L ${ target.x } ${ target.y }`;
 
-    return { path, connectionCenter: { x: 0, y: 0 } };
+    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: PointExtensions.initialize(target.x - 20, target.y) };
   }
 }
 
@@ -25,7 +25,7 @@ class CircleConnectionBuilder implements IFConnectionBuilder {
     const { source, target } = request;
     const d = this.getD(request);
     const path = `M ${ source.x } ${ source.y } S${ d.x } ${ d.y } ${ target.x } ${ target.y }`;
-    return { path, connectionCenter: { x: 0, y: 0 } };
+    return { path, connectionCenter: { x: 0, y: 0 }, penultimatePoint: d };
   }
 
   private getD(request: IFConnectionBuilderRequest): IPoint {

projects/f-flow/src/f-connection/common/domain/f-bezier.path-builder.ts

@@ -51,6 +51,6 @@ export class FBezierPathBuilder implements IFConnectionBuilder {
       new CalculateConnectionCenterRequest([ source, sourceAnglePoint, targetAnglePoint, target ])
     );
 
-    return { path, connectionCenter };
+    return { path, connectionCenter, penultimatePoint: targetAnglePoint };
   }
 }

projects/f-flow/src/f-connection/common/domain/f-segment.path-builder.ts

@@ -39,7 +39,9 @@ export class FSegmentPathBuilder implements IFConnectionBuilder {
 
     const path = this.buildPath(points, request.radius);
 
-    return { path, connectionCenter: center };
+    const penultimatePoint = points.length > 1 ? points[ points.length - 2 ] : source;
+
+    return { path, connectionCenter: center, penultimatePoint };
   }
 
   private getPathPoints(

projects/f-flow/src/f-connection/common/domain/f-straight.path-builder.ts

@@ -15,6 +15,6 @@ export class FStraightPathBuilder implements IFConnectionBuilder {
         new CalculateConnectionCenterRequest([source, target])
     );
 
-    return { path, connectionCenter };
+    return { path, connectionCenter, penultimatePoint: source };
   }
 }

projects/f-flow/src/f-connection/common/f-connection-base.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef } from '@angular/core';
 import {
   IHasHostElement, ILine,
-  IPoint, LineExtensions,
+  IPoint, LineExtensions, PointExtensions,
 } from '@foblex/core';
 import { Subject } from 'rxjs';
 import { EFConnectionBehavior } from './e-f-connection-behavior';
@@ -89,6 +89,8 @@ export abstract class FConnectionBase extends MIXIN_BASE
 
   public abstract fConnectionCenter: ElementRef<HTMLDivElement>;
 
+  private penultimatePoint: IPoint = PointExtensions.initialize();
+
   protected constructor(
     elementReference: ElementRef<HTMLElement>,
     private cFactory: FConnectionFactory
@@ -110,6 +112,7 @@ export abstract class FConnectionBase extends MIXIN_BASE
     this.line = LineExtensions.initialize(source, target);
     const pathResult = this.getPathResult(source, sourceSide, target, targetSide);
     this.path = pathResult.path;
+    this.penultimatePoint = pathResult.penultimatePoint || source;
     this.fConnectionCenter?.nativeElement?.setAttribute('style', this.getTransform(pathResult.connectionCenter));
   }
 
@@ -132,7 +135,7 @@ export abstract class FConnectionBase extends MIXIN_BASE
     this.fPath.setPath(this.path);
     this.fSelection.setPath(this.path);
     this.fGradient.redraw(this.line);
-    this.fDragHandle.redraw(this.line.point1, this.line.point2);
+    this.fDragHandle.redraw(this.penultimatePoint, this.line.point2);
     this.fTextComponent.redraw(this.line);
   }
 }

projects/f-flow/src/f-connection/common/f-drag-handle/f-connection-drag-handle.component.ts

@@ -27,8 +27,8 @@ export class FConnectionDragHandleComponent implements IHasHostElement {
   ) {
   }
 
-  public redraw(start: IPoint, end: IPoint): void {
-    const point = this.calculateCircleCenter(start, end, 8);
+  public redraw(penultimatePoint: IPoint, endPoint: IPoint): void {
+    const point = this.calculateCircleCenter(penultimatePoint, endPoint, 8);
     this.hostElement.setAttribute('cx', point.x.toString());
     this.hostElement.setAttribute('cy', point.y.toString());
   }

projects/f-flow/src/f-connection/f-connection-builder/i-f-connection-builder-response.ts

@@ -5,4 +5,6 @@ export interface IFConnectionBuilderResponse {
   path: string;
 
   connectionCenter: IPoint;
+
+  penultimatePoint: IPoint;
 }

projects/f-flow/src/f-line-alignment/domain/line-service.ts

@@ -9,6 +9,8 @@ export class LineService {
   constructor(private hostElement: HTMLElement) {
     this.fHorizontalLine = new LineElement(this.hostElement);
     this.fVerticalLine = new LineElement(this.hostElement);
+    this.fHorizontalLine.hide();
+    this.fVerticalLine.hide();
   }
 
   public drawVerticalLine(x: number, size: ISize, transform: ITransformModel): void {

projects/f-pro-examples/db-management-example/components/_flow-common.scss

@@ -1,125 +1,98 @@
 ::ng-deep :root {
-  --node-background-color: #ffffff;
-  --node-border-radius: 2px;
-  --node-border-color: rgba(60, 60, 67, 0.36);
-  --node-color: rgba(60, 60, 67, 0.78);
-  --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --db-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-  --connection-color: rgba(60, 60, 67, 0.78);
-  --connection-gradient-1: #915930;
-  --connection-gradient-2: #18794e;
+  --db-line-alignment-color: rgba(60, 60, 67, 0.56);
 
-  --outlet-color: #3451b2;
-  --input-output-color: rgba(60, 60, 67, 0.78);
+  --db-node-background-color: #ffffff;
+  --db-node-normal-state-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --db-node-selected-state-shadow: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 
-  --minimap-background-color: #ffffff;
-  --minimap-node-color: rgba(60, 60, 67);
-  --minimap-node-selected-color: #3451b2;
-  --minimap-view-color: rgba(100, 108, 255, 0.14);
+  --db-node-header-normal-state-background-color: #e4e4e9;
+  --db-node-header-selected-state-background-color: rgba(100, 108, 255, 0.24);
+  --db-node-header-error-state-background-color: rgba(244, 63, 94, 0.14);
 
-  &.dark {
-    --node-background-color: #000000;
-    --node-border-radius: 2px;
-    --node-border-color: rgba(235, 235, 245, 0.38);
-    --node-color: rgba(235, 235, 245, 0.6);
-    --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
-
-    --connection-color: rgba(235, 235, 245, 0.6);
-    --connection-gradient-1: #f9b44e;
-    --connection-gradient-2: #3dd68c;
-
-    --outlet-color: #a8b1ff;
-    --input-output-color: rgba(235, 235, 245, 0.6);
-
-    --minimap-background-color: #1b1b1f;
-    --minimap-node-color: rgba(255, 255, 245, 0.86);
-    --minimap-node-selected-color: #a8b1ff;
-    --minimap-view-color: rgba(100, 108, 255, 0.16);
-  }
-}
+  --db-node-text-color: rgba(60, 60, 67);
 
+  --db-node-column-primary-key-color: #915930;
+  --db-node-column-selected-state-color: var(--db-node-header-selected-state-background-color);
 
-@mixin minimap {
-  .f-minimap {
-    background-color: var(--minimap-background-color);
-    bottom: 16px;
-    right: 16px;
-    width: 120px;
-    height: 120px;
+  --db-connection-normal-state-color: rgba(60, 60, 67);
+  --db-connection-selected-state-color: #5672cd;
 
-    .f-minimap-node {
-      fill: var(--minimap-node-color);
+  --db-connection-center-value-background-color: #ffffff;
+  --db-connection-center-normal-state-text-color: rgba(60, 60, 67);
+  --db-connection-center-selected-state-text-color: #5672cd;
 
-      &.f-selected {
-        fill: var(--minimap-node-selected-color);
-      }
-    }
+  --db-background-component-color: rgba(0, 0, 0, 0.1);
 
-    .f-minimap-view {
-      fill: var(--minimap-view-color)
-    }
-  }
-}
+  --db-selection-area-background-color: var(--db-node-header-selected-state-background-color);
 
-@mixin node {
-  width: 100px;
-  padding: 4px;
-  color: var(--node-color);
-  text-align: center;
-  background: var(--node-background-color);
-  border-radius: var(--node-border-radius);
-  border: 0.2px solid var(--node-border-color);
-  cursor: move;
-
-  &:active {
-    box-shadow: var(--node-shadow);
-  }
-}
+  --db-minimap-background-color: var(--db-node-background-color);
+  --db-minimap-node-background-color: var(--db-node-text-color);
+  --db-minimap-selected-node-background-color: #3451b2;
+  --db-minimap-view-background-color: var(--db-node-header-selected-state-background-color);
+
+  --db-filled-text-field-focused-container-color: var(--db-node-header-selected-state-background-color);
+  --db-filled-text-field-error-container-color: var(--db-node-header-error-state-background-color);
+  --db-text-field-input-text-color: var(--db-node-text-color);
+  --db-select-field-text-color: rgba(60, 60, 67, 0.56);
+  --db-select-panel-background-color: var(--db-node-background-color);
+  --db-select-panel-shadow: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --db-select-option-selected-state-layer-color: var(--db-node-header-selected-state-background-color);
+  --db-select-option-hover-state-layer-color: rgba(142, 150, 170, 0.14);
+  --db-select-option-focus-state-layer-color: rgba(142, 150, 170, 0.14);
 
-@mixin connectors {
+  --db-button-default-text: var(--db-node-text-color);
+  --db-button-default-bg: #ebebef;
+  --db-button-default-hover-bg: #e4e4e9;
+  --db-button-default-active-bg: #dddde3;
 
+  &.dark {
+    --db-line-alignment-color: rgba(235, 235, 245, 0.38);
 
-  .connectors-line {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    width: calc(100% - 8px);
+    --db-node-background-color: #000000;
+    --db-node-normal-state-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --db-node-selected-state-shadow: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
 
-    .f-node-output, .f-node-input {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      border: 0.2px solid var(--node-border-color);
-      background-color: var(--node-background-color);
-    }
+    --db-node-header-normal-state-background-color: #414853;
+    --db-node-header-selected-state-background-color: rgba(100, 108, 255, 0.26);
+    --db-node-header-error-state-background-color: rgba(244, 63, 94, 0.16);
 
-    &.top {
-      top: -8px
-    }
+    --db-node-text-color: rgba(255, 255, 245, 0.86);
 
-    &.bottom {
-      bottom: -8px;
-    }
-  }
-}
+    --db-node-column-primary-key-color: #f9b44e;
+    --db-node-column-selected-state-color: var(--db-node-header-selected-state-background-color);
+
+    --db-connection-normal-state-color: rgba(255, 255, 245, 0.86);
+    --db-connection-selected-state-color: #3e63dd;
+
+    --db-connection-center-value-background-color: #000000;
+    --db-connection-center-normal-state-text-color: rgba(255, 255, 245, 0.86);
+    --db-connection-center-selected-state-text-color: #3e63dd;
+
+    --db-background-component-color: rgba(255, 255, 255, 0.1);
+
+    --db-selection-area-background-color: var(--db-node-header-selected-state-background-color);
+
+    --db-minimap-background-color: var(--db-node-background-color);
+    --db-minimap-node-background-color: var(--db-node-text-color);
+    --db-minimap-selected-node-background-color: #a8b1ff;
+    --db-minimap-view-background-color: var(--db-node-header-selected-state-background-color);
 
+    --db-filled-text-field-focused-container-color: var(--db-node-header-selected-state-background-color);
+    --db-filled-text-field-error-container-color: var(--db-node-header-error-state-background-color);
+    --db-text-field-input-text-color: var(--db-node-text-color);
+    --db-select-field-text-color: rgba(235, 235, 245, 0.38);
+    --db-select-panel-background-color: var(--db-node-background-color);
+    --db-select-panel-shadow: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+    --db-select-option-selected-state-layer-color: var(--db-node-header-selected-state-background-color);
+    --db-select-option-hover-state-layer-color: rgba(101, 117, 133, 0.16);
+    --db-select-option-focus-state-layer-color: rgba(101, 117, 133, 0.16);
 
-@mixin toolbar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  position: absolute;
-  right: 16px;
-  top: 16px;
-
-  button {
-    font-weight: 500;
-    border: none;
-    border-radius: 2px;
-    padding: 4px 8px;
-    line-height: normal;
+    --db-button-default-text: var(--db-node-text-color);
+    --db-button-default-bg: #32363f;
+    --db-button-default-hover-bg: #414853;
+    --db-button-default-active-bg: #515c67;
   }
 }