Merge pull request #117 from Foblex/f-zoom-triggers

F zoom triggers

projects/f-examples/connectors/connectability-check/connectability-check.component.html

@@ -0,0 +1,36 @@
+<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: 75 }" >
+      <div fNodeOutput fOutputId="1" [fOutputMultiple]="true" class="right"
+           [fCanBeConnectedInputs]="['input1', 'input3']">
+      </div>
+      I can only be connected to node 1 or 3
+    </div>
+
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 0 }" >
+      <div fNodeInput fInputId="input1" class="left"></div>
+      I'm node 1
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 150 }">
+      <div fNodeInput fInputId="input2" class="left"></div>
+      I'm node 2
+    </div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 300 }">
+      <div fNodeInput fInputId="input3" class="left"></div>
+      I'm node 3
+    </div>
+
+  </f-canvas>
+</f-flow>
+<div class="toolbar">
+  <button class="f-button" (click)="onDeleteConnections()">Delete Connections</button>
+</div>

projects/f-examples/connectors/connectability-check/connectability-check.component.scss

@@ -0,0 +1,28 @@
+@use "../../flow-common";
+
+::ng-deep connectability-check {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+  width: 180px;
+}
+
+.f-node-input, .f-node-output {
+  &:not(.f-node) {
+    @include flow-common.connectors;
+  }
+}
+
+.f-connections-dragging {
+  .f-node-input {
+    &:not(.f-node-input-can-be-connected-to) {
+      background-color: var(--disabled-color);
+    }
+  }
+}
+
+.toolbar {
+  @include flow-common.toolbar;
+}

projects/f-examples/connectors/connectability-check/connectability-check.component.ts

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

projects/f-examples/connectors/limiting-connections/limiting-connections.component.ts

@@ -1,7 +1,5 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { FCanvasComponent, FCreateConnectionEvent, FFlowModule } from '@foblex/flow';
-import { FCheckboxComponent } from '@foblex/m-render';
-import { MatIcon } from '@angular/material/icon';
 
 @Component({
   selector: 'limiting-connections',
@@ -11,8 +9,6 @@ import { MatIcon } from '@angular/material/icon';
   standalone: true,
   imports: [
     FFlowModule,
-    FCheckboxComponent,
-    MatIcon
   ]
 })
 export class LimitingConnectionsComponent {

projects/f-flow/src/domain/css-cls.ts

@@ -0,0 +1,22 @@
+export const F_CSS_CLASS = {
+
+  DRAG_AND_DROP: {
+
+    DRAGGING: 'f-dragging',
+
+    CONNECTIONS_DRAGGING: 'f-connections-dragging',
+  },
+
+  CONNECTOR: {
+
+    OUTPUT_CONNECTED: 'f-node-output-connected',
+
+    OUTPUT_NOT_CONNECTABLE: 'f-node-output-not-connectable',
+
+    INPUT_CONNECTED: 'f-node-input-connected',
+
+    INPUT_NOT_CONNECTABLE: 'f-node-input-not-connectable',
+
+    INPUT_CAN_BE_CONNECTED_TO: 'f-node-input-can-be-connected-to',
+  }
+}

projects/f-flow/src/domain/f-connection/index.ts

@@ -8,14 +8,8 @@ export * from './add-snap-connection-to-store';
 
 export * from './create-connection-markers';
 
-export * from './find-closest-input';
-
-export * from './get-all-can-be-connected-input-positions';
-
 export * from './calculate-connection-line-by-behavior';
 
-export * from './get-connector-with-rect';
-
 export * from './redraw-connections';
 
 export * from './remove-connection-for-create-from-store';

projects/f-flow/src/domain/f-connection/providers.ts

@@ -1,6 +1,3 @@
-import { FindClosestInputExecution } from './find-closest-input';
-import { GetAllCanBeConnectedInputPositionsExecution } from './get-all-can-be-connected-input-positions';
-import { GetConnectorWithRectExecution } from './get-connector-with-rect';
 import { CreateConnectionMarkersExecution } from './create-connection-markers';
 import { AddConnectionForCreateToStoreExecution } from './add-connection-for-create-to-store';
 import { AddConnectionToStoreExecution } from './add-connection-to-store';
@@ -25,14 +22,8 @@ export const F_CONNECTION_FEATURES = [
 
   CreateConnectionMarkersExecution,
 
-  FindClosestInputExecution,
-
-  GetAllCanBeConnectedInputPositionsExecution,
-
   CalculateConnectionLineByBehaviorExecution,
 
-  GetConnectorWithRectExecution,
-
   RedrawConnectionsExecution,
 
   RemoveConnectionForCreateFromStoreExecution,

projects/f-flow/src/domain/f-connection/redraw-connections/redraw-connections.execution.ts

@@ -20,7 +20,7 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
   }
 
   public handle(request: RedrawConnectionsRequest): void {
-    this.resetConnectors();
+    this._resetConnectors();
 
     if (this.fComponentsStore.fTempConnection) {
       this.setMarkers(this.fComponentsStore.fTempConnection);
@@ -34,19 +34,19 @@ export class RedrawConnectionsExecution implements IExecution<RedrawConnectionsR
       const output = this.fComponentsStore.fOutputs.find((x) => x.fId === connection.fOutputId);
       const input = this.fComponentsStore.fInputs.find((x) => x.fId === connection.fInputId);
       if (output && input) {
-        this.setupConnection(output, input, connection);
+        this._setupConnection(output, input, connection);
       }
     });
   }
 
-  private resetConnectors(): void {
-    this.fComponentsStore.fOutputs.forEach((output) => output.setConnected(false, undefined));
-    this.fComponentsStore.fInputs.forEach((input) => input.setConnected(false, undefined));
+  private _resetConnectors(): void {
+    this.fComponentsStore.fOutputs.forEach((x) => x.resetConnected());
+    this.fComponentsStore.fInputs.forEach((x) => x.resetConnected());
   }
 
-  private setupConnection(output: FConnectorBase, input: FConnectorBase, connection: FConnectionBase): void {
-    output.setConnected(true, input);
-    input.setConnected(true, output);
+  private _setupConnection(output: FConnectorBase, input: FConnectorBase, connection: FConnectionBase): void {
+    output.setConnected(input);
+    input.setConnected(output);
 
     const line = this.getLine(output, input, connection);