Examples docs

projects/f-examples/_flow-common.scss

@@ -1,4 +1,5 @@
 ::ng-deep :root {
+  --disabled-color: #e2e2e2;
   --node-background-color: #ffffff;
   --node-border-radius: 2px;
   --node-border-color: rgba(60, 60, 67, 0.36);
@@ -19,6 +20,7 @@
   --minimap-view-color: rgba(100, 108, 255, 0.14);
 
   &.dark {
+    --disabled-color: #2c2c2e;
     --node-background-color: #000000;
     --node-border-radius: 2px;
     --node-border-color: rgba(235, 235, 245, 0.38);
@@ -129,29 +131,55 @@
 }
 
 @mixin connectors {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 0.2px solid var(--node-border-color);
+  background-color: var(--node-background-color);
 
-  .connectors-line {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    width: calc(100% - 8px);
-
-    .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);
-    }
+  &.left {
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
-    &.top {
-      top: -8px
-    }
+  &.right {
+    right: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
-    &.bottom {
-      bottom: -8px;
-    }
+  &.top {
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.top-left {
+    top: -8px;
+    left: -8px;
+  }
+
+  &.top-right {
+    top: -8px;
+    right: -8px;
+  }
+
+  &.bottom {
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.bottom-left {
+    bottom: -8px;
+    left: -8px;
+  }
+
+  &.bottom-right {
+    bottom: -8px;
+    right: -8px;
   }
 }
 

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

@@ -1,7 +1,7 @@
 <f-flow fDraggable (fLoaded)="onLoaded()" (fReassignConnection)="reassignConnection($event)">
   <f-canvas>
-    @for (connection of connections;track connection.inputId) {
-      <f-connection fBehavior="floating"
+    @for (connection of connections; track connection.inputId) {
+      <f-connection fBehavior="floating" [fReassignDisabled]="false"
                     [fOutputId]="connection.outputId" [fInputId]="connection.inputId">
       </f-connection>
     }

projects/f-examples/connectors/connectable-side/connectable-side.component.html

@@ -0,0 +1,23 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="1" fInputId="2"
+                  fBehavior="fixed" fType="segment">
+    </f-connection>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }"
+         fNodeOutput fOutputId="1" [fOutputConnectableSide]="outputSide">
+      I'm connector with {{ outputSide }} connectable side
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }"
+         fNodeInput fInputId="2" [fInputConnectableSide]="inputSide">
+      I'm connector with {{ inputSide }} connectable side
+    </div>
+
+  </f-canvas>
+</f-flow>
+<div class="toolbar">
+  <button class="f-button" (click)="onSwitchSides()">Switch Sides</button>
+</div>

projects/f-examples/connectors/connectable-side/connectable-side.component.scss

@@ -0,0 +1,15 @@
+@use "../../flow-common";
+
+::ng-deep connectable-side {
+  @include flow-common.connection;
+}
+
+.f-node {
+  position: relative;
+  @include flow-common.node;
+  width: 180px;
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}

projects/f-examples/connectors/connectable-side/connectable-side.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { EFConnectableSide, FCanvasComponent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'connectable-side',
+  styleUrls: [ './connectable-side.component.scss' ],
+  templateUrl: './connectable-side.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class ConnectableSideComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public connections: { from: string, to: string }[] = [];
+
+  public outputSide: EFConnectableSide = EFConnectableSide.RIGHT;
+  public inputSide: EFConnectableSide = EFConnectableSide.TOP;
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+
+  public onSwitchSides(): void {
+    const array = Object.values(EFConnectableSide);
+    const autoIndex = array.indexOf(EFConnectableSide.AUTO);
+    array.splice(autoIndex, 1);
+    const outputIndex = array.indexOf(this.outputSide);
+    const inputIndex = array.indexOf(this.inputSide);
+    this.outputSide = array[(outputIndex + 1) % array.length];
+    this.inputSide = array[(inputIndex + 1) % array.length];
+  }
+}

projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.html

@@ -0,0 +1,48 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="fOutput1" fInputId="fInput2"
+                  fBehavior="floating">
+    </f-connection>
+
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="fOutput2" fInputId="fInput3"
+                  fBehavior="floating">
+    </f-connection>
+
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="fOutput3" fInputId="fInput4"
+                  fBehavior="floating">
+    </f-connection>
+
+
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="fOutput4" fInputId="fInput1"
+                  fBehavior="floating">
+    </f-connection>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }">
+      I'm node
+      <div fNodeOutput fOutputId="fOutput1" class="right"></div>
+      <div fNodeInput fInputId="fInput1" class="left"></div>
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 0 }" >
+      I'm node
+      <div fNodeOutput fOutputId="fOutput2" class="right"></div>
+      <div fNodeInput fInputId="fInput2" class="left"></div>
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 400, y: 0 }">
+      I'm node
+      <div fNodeOutput fOutputId="fOutput3" class="bottom"></div>
+      <div fNodeInput fInputId="fInput3" class="top"></div>
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 200, y: 200 }" fNodeOutput fOutputId="fOutput4">
+      I'm node with host connector
+      <div fNodeInput fInputId="fInput4" class="top"></div>
+    </div>
+  </f-canvas>
+</f-flow>

projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.scss

@@ -0,0 +1,17 @@
+@use "../../flow-common";
+
+::ng-deep connector-inside-node {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.f-node-input, .f-node-output {
+  &:not(.f-node) {
+    @include flow-common.connectors;
+  }
+}
+
+

projects/f-examples/connectors/connector-inside-node/connector-inside-node.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'connector-inside-node',
+  styleUrls: [ './connector-inside-node.component.scss' ],
+  templateUrl: './connector-inside-node.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class ConnectorInsideNodeComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}

projects/f-examples/connectors/connector-outlet/connector-outlet.component.html

@@ -0,0 +1,32 @@
+<f-flow fDraggable (fLoaded)="onLoaded()" (fCreateConnection)="onCreateConnection($event)">
+  <f-canvas>
+    <f-connection-for-create fBehavior="floating"></f-connection-for-create>
+
+    @for (connection of connections; track connection.to) {
+      <f-connection [fReassignDisabled]="true"
+                    [fOutputId]="connection.from" [fInputId]="connection.to"
+                    fBehavior="floating">
+      </f-connection>
+    }
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 80 }" >
+      <div fNodeOutput fOutputId="1" class="top-right"></div>
+      <div fNodeOutput fOutputId="2" class="right"></div>
+      <div fNodeOutput fOutputId="3" class="bottom-right"></div>
+      I'm node with outlet
+      <div fNodeOutlet [isConnectionFromOutlet]="isConnectionFromOutlet">
+        <mat-icon>arrow_forward</mat-icon>
+      </div>
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="1">I'm node</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 100 }" fNodeInput fInputId="2">I'm node</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 200 }" fNodeInput fInputId="3">I'm node</div>
+
+  </f-canvas>
+</f-flow>
+<div class="toolbar">
+  <button class="f-button" (click)="onDeleteConnections()">Delete Connections</button>
+  <f-checkbox [checked]="isConnectionFromOutlet" (change)="onConnectionFromOutletChange($event)">Draw connection from outlet
+  </f-checkbox>
+</div>

projects/f-examples/connectors/connector-outlet/connector-outlet.component.scss

@@ -0,0 +1,33 @@
+@use "../../flow-common";
+
+::ng-deep connector-outlet {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.f-node-input, .f-node-output {
+  &:not(.f-node) {
+    @include flow-common.connectors;
+  }
+}
+
+.f-node-outlet {
+  position: absolute;
+  border: 0.2px solid var(--node-border-color);
+  background-color: var(--node-background-color);
+  top: 50%;
+  right: -90px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+
+  .mat-icon {
+    display: block;
+  }
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}