docs: Added custom connections example

Foblex · Oct 2, 2024 · fcfce91 · fcfce91
1 parent 377b610
commit fcfce91
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 7 deletions.
diff --git a/projects/f-examples/_flow-common.scss b/projects/f-examples/_flow-common.scss
@@ -8,8 +8,8 @@
 
   --connection-color: rgba(60, 60, 67, 0.78);
   --snap-connection-color: rgba(60, 60, 67, 0.38);
-  --connection-gradient-1: #915930;
-  --connection-gradient-2: #18794e;
+  --connection-gradient-1: #b8272c;
+  --connection-gradient-2: #30a46c;
 
   --outlet-color: #3451b2;
   --input-output-color: rgba(60, 60, 67, 0.78);
@@ -29,8 +29,8 @@
 
     --connection-color: rgba(235, 235, 245, 0.6);
     --snap-connection-color: rgba(235, 235, 245, 0.2);
-    --connection-gradient-1: #f9b44e;
-    --connection-gradient-2: #3dd68c;
+    --connection-gradient-1: #f66f81;
+    --connection-gradient-2: #298459;
 
     --outlet-color: #a8b1ff;
     --input-output-color: rgba(235, 235, 245, 0.6);

diff --git a/projects/f-examples/connections/custom-connections/custom-connections.component.html b/projects/f-examples/connections/custom-connections/custom-connections.component.html
@@ -0,0 +1,24 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas>
+    <f-connection [fReassignDisabled]="true"
+                  fOutputId="1" fInputId="2" fBehavior="fixed" fType="segment"
+                  class="gradient-color"
+                  fStartColor="var(--connection-gradient-1)" fEndColor="var(--connection-gradient-2)">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 0 }" fNodeOutput fOutputId="1" fOutputConnectableSide="bottom">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" fNodeInput fInputId="2" fInputConnectableSide="top">
+      I'm a node
+    </div>
+
+    <f-connection [fReassignDisabled]="true" fOutputId="3" fInputId="4" fBehavior="floating">
+    </f-connection>
+    <div fNode fDragHandle [fNodePosition]="{ x: 0, y: 150 }" fNodeOutput fOutputId="3" fOutputConnectableSide="right">
+      I'm a node
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }" fNodeInput fInputId="4" fInputConnectableSide="left">
+      I'm a node
+    </div>
+  </f-canvas>
+</f-flow>
diff --git a/projects/f-examples/connections/custom-connections/custom-connections.component.scss b/projects/f-examples/connections/custom-connections/custom-connections.component.scss
@@ -0,0 +1,35 @@
+@use "../../flow-common";
+
+::ng-deep custom-connections {
+  .f-connection {
+
+    .f-connection-drag-handle {
+      fill: none;
+      stroke: none;
+    }
+
+    .f-connection-selection {
+      fill: none;
+      stroke-width: 20;
+    }
+
+    .f-connection-path {
+      fill: none;
+      stroke-width: 6;
+    }
+
+    &:not(.gradient-color) {
+      .f-connection-path {
+        stroke: #db2777;
+        stroke-width: 4;
+      }
+    }
+    &:hover {
+      stroke: var(--minimap-view-color);
+    }
+  }
+}
+
+.f-node {
+  @include flow-common.node;
+}
diff --git a/projects/f-examples/connections/custom-connections/custom-connections.component.ts b/projects/f-examples/connections/custom-connections/custom-connections.component.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import { FCanvasComponent, FFlowModule } from '@foblex/flow';
+
+@Component({
+  selector: 'custom-connections',
+  styleUrls: [ './custom-connections.component.scss' ],
+  templateUrl: './custom-connections.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule
+  ]
+})
+export class CustomConnectionsComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+}
diff --git a/public/markdown/examples/custom-connections.md b/public/markdown/examples/custom-connections.md
@@ -0,0 +1,19 @@
+# Custom Connections
+
+## Description
+
+This guide shows how to customize connections between connectors, allowing for custom connection styles to be applied to connections between connectors.
+
+## Example
+
+::: ng-component <custom-connections></custom-connections> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/connections/custom-connections/custom-connections.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+
+
+
+
diff --git a/public/markdown/examples/environment.ts b/public/markdown/examples/environment.ts
@@ -56,6 +56,7 @@ function createEnvironment(): IDocsEnvironment {
       { tag: 'custom-connection-type', component: import('../../../projects/f-examples/connections/custom-connection-type/custom-connection-type.component') },
       { tag: 'connection-behaviours', component: import('../../../projects/f-examples/connections/connection-behaviours/connection-behaviours.component') },
       { tag: 'connection-markers', component: import('../../../projects/f-examples/connections/connection-markers/connection-markers.component') },
+      { tag: 'custom-connections', component: import('../../../projects/f-examples/connections/custom-connections/custom-connections.component') },
 
       { tag: 'dagre-layout-example', component: import('../../../projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component') },
       { tag: 'elkjs-layout-example', component: import('../../../projects/f-examples/layouts/elkjs-layout-example/elkjs-layout-example.component') },
@@ -292,6 +293,16 @@ function connectionGroup(): INavigationGroup {
         image_height: 600,
         image_type: 'image/png',
       },
+      {
+        link: 'custom-connections',
+        text: 'Custom Connections',
+        description: 'Explore how to customize connections. This example demonstrates how to create custom connections, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image: './previews/examples/custom-connections.light.png',
+        image_dark: './previews/examples/custom-connections.dark.png',
+        image_width: 791,
+        image_height: 600,
+        image_type: 'image/png',
+      },
       // {
       //   link: 'connection-text',
       //   text: 'Connection Text',

diff --git a/public/previews/examples/custom-connections.dark.png b/public/previews/examples/custom-connections.dark.png
diff --git a/public/previews/examples/custom-connections.light.png b/public/previews/examples/custom-connections.light.png
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
 <router-outlet></router-outlet>
-<button class="take-screenshot" (click)="takeScreenshot()">
-  Take Screenshot
-</button>
+<!--<button class="take-screenshot" (click)="takeScreenshot()">-->
+<!--  Take Screenshot-->
+<!--</button>-->