Merge pull request #55 from Foblex/examples-docs

Examples docs

Author: siarheihuzarevich

angular.json

@@ -30,6 +30,7 @@
               }
             ],
             "styles": [
+//              "projects/f-docs/src/assets/styles/styles.scss",
               "src/styles/styles.scss"
             ],
             "scripts": [],

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start-shared": "ng serve --host 0.0.0.0",
     "build": "ng build && cp dist/f-flow-portal/browser/index.html dist/f-flow-portal/browser/404.html",
     "watch": "ng build --watch --configuration development",
     "test": "ng test f-flow",
@@ -65,13 +66,14 @@
     "@angular/ssr": "^18.2.3",
     "@foblex/2d": "1.1.0",
     "@foblex/drag-toolkit": "1.1.0",
-    "@foblex/f-docs": "1.3.3",
+    "@foblex/f-docs": "1.3.5",
     "@foblex/mediator": "1.1.0",
     "@foblex/platform": "1.0.3",
     "@foblex/utils": "1.1.0",
     "dagre": "^0.8.5",
     "elkjs": "^0.9.3",
     "express": "^4.18.2",
+    "html2canvas": "^1.4.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -82,6 +84,7 @@
     "@angular/compiler-cli": "^18.2.0",
     "@types/dagre": "^0.7.52",
     "@types/express": "^4.17.17",
+    "@types/html2canvas": "^1.0.0",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
     "jasmine-core": "~5.1.0",

projects/f-examples/_flow-common.scss

@@ -38,6 +38,12 @@
     --minimap-node-selected-color: #a8b1ff;
     --minimap-view-color: rgba(100, 108, 255, 0.16);
   }
+
+  --form-field-text-color: var(--node-color);
+  --form-field-background: var(--minimap-view-color);
+  --form-field-panel-shadow: var(--shadow-4);
+  --form-field-panel-background: var(--node-background-color);
+  --form-field-active-color: var(--minimap-node-selected-color);
 }
 
 @mixin connection {
@@ -108,8 +114,8 @@
 }
 
 @mixin node {
-  width: 100px;
-  padding: 4px;
+  width: 120px;
+  padding: 24px;
   color: var(--node-color);
   text-align: center;
   background: var(--node-background-color);
@@ -124,7 +130,6 @@
 
 @mixin connectors {
 
-
   .connectors-line {
     position: absolute;
     display: flex;

projects/f-examples/_mdc-controls.scss

@@ -0,0 +1,63 @@
+::ng-deep {
+
+  .f-form-field {
+    --mdc-filled-text-field-container-color: var(--form-field-background); //container-background
+    --mdc-filled-text-field-label-text-color: var(--form-field-text-color); //label color
+    --mdc-filled-text-field-hover-label-text-color: var(--form-field-text-color); //label color
+    --mdc-filled-text-field-focus-label-text-color: var(--form-field-active-color); //label color
+    --mdc-filled-text-field-active-indicator-color: var(--form-field-text-color); //active color
+    --mdc-filled-text-field-focus-active-indicator-color: var(--form-field-active-color); //focus color
+    --mdc-filled-text-field-hover-active-indicator-color: var(--form-field-active-color); //focus color
+
+    .mdc-text-field {
+      .mat-mdc-form-field-flex {
+        .mat-mdc-select {
+          --mat-select-enabled-trigger-text-color: var(--form-field-text-color);
+          --mat-select-placeholder-text-color: var(--form-field-text-color);
+          --mat-select-enabled-arrow-color: var(--form-field-text-color);
+          --mat-select-focused-arrow-color: var(--form-field-active-color);
+        }
+      }
+    }
+  }
+}
+
+::ng-deep {
+
+  .f-select-panel {
+    --mat-select-panel-background-color: var(--form-field-panel-background);
+    --mat-select-container-elevation-shadow: var(--form-field-panel-shadow);
+
+    --mat-option-selected-state-label-text-color: var(--form-field-active-color);
+    --mat-option-label-text-color: var(--form-field-text-color);
+    --mat-option-selected-state-layer-color: var(--form-field-background);
+    --mat-option-hover-state-layer-color: var(--form-field-background);
+    --mat-option-focus-state-layer-color: var(--form-field-background);
+
+    --mat-option-min-height: calc(48px * var(--flow-scale, 1));
+    --mat-option-label-text-size: calc(14px * var(--flow-scale, 1));
+    --mat-option-label-text-line-height: calc(16px * var(--flow-scale, 1));
+    --mat-option-padding: 0 calc(16px * var(--flow-scale, 1));
+    --mat-panel-padding: calc(8px * var(--flow-scale, 1)) 0;
+
+    &.mat-mdc-select-panel {
+      padding: var(--mat-panel-padding);
+
+      .mat-mdc-option {
+        min-height: var(--mat-option-min-height);
+        padding: var(--mat-option-padding);
+
+        .mat-pseudo-checkbox {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+::ng-deep {
+  .mat-mdc-button {
+    --mat-text-button-state-layer-color: var(--form-field-active-color);
+    --mdc-text-button-label-text-color: var(--form-field-text-color);
+  }
+}

projects/f-examples/connections/drag-to-connect/drag-to-connect.component.html

@@ -0,0 +1,15 @@
+<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="addConnection($event)">
+  <f-canvas>
+    <f-connection-for-create></f-connection-for-create>
+
+    @for (connection of connections; track connection.inputId)  {
+      <f-connection [fReassignDisabled]="true"
+                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
+      </f-connection>
+    }
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputConnectableSide="right">drag me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 244, y: 24 }" fNodeInput fInputConnectableSide="left">to me</div>
+
+  </f-canvas>
+</f-flow>

projects/f-examples/group/groups-simple-example/groups-simple-example.component.scss renamed to projects/f-examples/connections/drag-to-connect/drag-to-connect.component.scss

@@ -1,15 +1,10 @@
 @use "../../flow-common";
 
-::ng-deep groups-simple-example {
+::ng-deep drag-to-connect {
   @include flow-common.connection;
 }
 
 .f-node {
   @include flow-common.node;
-  cursor: default;
 }
 
-.f-group {
-  background-color: red;
-  opacity: 0.3;
-}

projects/f-examples/connections/drag-to-connect/drag-to-connect.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'drag-to-connect',
+  styleUrls: [ './drag-to-connect.component.scss' ],
+  templateUrl: './drag-to-connect.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class DragToConnectComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public connections: { outputId: string, inputId: string }[] = [];
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public addConnection(event: FCreateConnectionEvent): void {
+    if(!event.fInputId) {
+      return;
+    }
+    this.connections.push({ outputId: event.fOutputId, inputId: event.fInputId });
+    this.changeDetectorRef.detectChanges();
+  }
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.html

@@ -0,0 +1,13 @@
+<f-flow fDraggable (fLoaded)="onLoaded()" (fReassignConnection)="reassignConnection($event)">
+  <f-canvas>
+    @for (connection of connections;track connection.inputId) {
+      <f-connection fBehavior="floating"
+                    [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
+      </f-connection>
+    }
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="1">Output</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 24 }" fNodeInput fInputId="2">Input</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 224, y: 124 }" fNodeInput>Input</div>
+  </f-canvas>
+</f-flow>

projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.scss

@@ -0,0 +1,15 @@
+@use "../../flow-common";
+
+::ng-deep drag-to-reassign {
+  @include flow-common.connection;
+  .f-connection {
+    .f-connection-drag-handle {
+      fill: var(--connection-color);
+    }
+  }
+}
+
+.f-node {
+  @include flow-common.node;
+}
+

projects/f-examples/connections/drag-to-reassign/drag-to-reassign.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule, FReassignConnectionEvent } from '@foblex/flow';
+
+@Component({
+  selector: 'drag-to-reassign',
+  styleUrls: [ './drag-to-reassign.component.scss' ],
+  templateUrl: './drag-to-reassign.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class DragToReassignComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public connections: { outputId: string, inputId: string }[] = [
+    { outputId: '1', inputId: '2' },
+  ];
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
+  }
+
+  public reassignConnection(event: FReassignConnectionEvent): void {
+    if(!event.newFInputId) {
+      return;
+    }
+    this.connections = [ { outputId: event.fOutputId, inputId: event.newFInputId } ];
+    this.changeDetectorRef.detectChanges();
+  }
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}