Merge pull request #123 from Foblex/f-draggable-refactoring

F draggable refactoring

Author: siarheihuzarevich

package-lock.json

@@ -71,7 +71,7 @@
     "@foblex/m-render": "2.5.4",
     "@foblex/mediator": "1.1.2",
     "@foblex/platform": "1.0.4",
-    "@foblex/utils": "1.1.0",
+    "@foblex/utils": "1.1.1",
     "dagre": "^0.8.5",
     "elkjs": "^0.9.3",
     "express": "^4.18.2",

package.json

@@ -216,3 +216,20 @@
     line-height: normal;
   }
 }
+
+@mixin overlay {
+  overflow: auto;
+  width: 260px;
+  height: calc(100% - 20px);
+  position: absolute;
+  padding: 10px;
+  right: 10px;
+  top: 10px;
+  font-size: 12px;
+  border-radius: 4px;
+  background-color: var(--node-background-color);
+  box-shadow: var(--node-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

projects/f-examples/_flow-common.scss

@@ -0,0 +1,53 @@
+<f-flow fDraggable
+        (fLoaded)="onLoaded()"
+        (fDragStarted)="onDragStarted($event)"
+        (fDragEnded)="onDragEnded()"
+        (fCreateConnection)="onConnectionCreated($event)"
+        (fReassignConnection)="onConnectionReassigned($event)">
+  <f-canvas fZoom>
+    <f-connection-for-create fBehavior="fixed" fType="segment">
+      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
+           [height]="7" [width]="6"
+           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
+        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
+      </svg>
+      <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
+           [height]="7" [width]="6"
+           [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
+        <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
+      </svg>
+    </f-connection-for-create>
+    @for (connection of connections; track connection.id) {
+      <f-connection [fConnectionId]="connection.id"
+                    [fOutputId]="connection.source"
+                    [fInputId]="connection.target" fBehavior="fixed" fType="segment">
+        <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.END" class="connection-marker"
+             [height]="7" [width]="6"
+             [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
+          <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
+        </svg>
+        <svg viewBox="0 0 6 7" fMarker [type]="eMarkerType.SELECTED_END" class="connection-marker"
+             [height]="7" [width]="6"
+             [refX]="5.5" [refY]="3.5" markerUnits="strokeWidth" orient="auto">
+          <path d="M0.000391006 0L6 3.5L0.000391006 7L0.000391006 0Z"/>
+        </svg>
+      </f-connection>
+    }
+    @for (node of nodes; track node.id) {
+      <div fNode [fNodePosition]="node.position"
+           fDragHandle fConnectOnNode="false">{{ node.text }}
+        <div fNodeInput fInputConnectableSide="left" class="left"></div>
+        <div fNodeOutput [isSelfConnectable]="false" fOutputConnectableSide="top" class="top"></div>
+        <div fNodeInput fInputConnectableSide="right" class="right"></div>
+        <div fNodeOutput [isSelfConnectable]="false" fOutputConnectableSide="bottom" class="bottom"></div>
+      </div>
+    }
+  </f-canvas>
+
+</f-flow>
+<div class="overlay">
+  <div>Event list:</div>
+  @for (item of events; track item) {
+    <div>{{ item }}</div>
+  }
+</div>

projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component.html renamed to projects/f-examples/advanced/dagre-layout-example/dagre-layout-example.component.html

@@ -0,0 +1,45 @@
+@use "../../flow-common";
+
+::ng-deep drag-start-end-events {
+  @include flow-common.connection;
+
+  .connection-marker {
+    circle, rect, path {
+      fill: var(--connection-color);
+    }
+  }
+
+  .f-connection {
+    &.f-selected {
+
+      .f-connection-path {
+        stroke: var(--minimap-node-selected-color);
+      }
+      .connection-marker {
+        circle, rect, path {
+          fill: var(--minimap-node-selected-color);
+        }
+      }
+    }
+  }
+}
+
+.f-node {
+  @include flow-common.node;
+}
+
+.f-node-input, .f-node-output {
+  &:not(.f-node) {
+    @include flow-common.connectors;
+  }
+}
+
+.f-node-output {
+  &:not(.f-node) {
+    border-radius: 4px;
+  }
+}
+
+.overlay {
+  @include flow-common.overlay;
+}

projects/f-examples/layouts/dagre-layout-example/dagre-layout-example.component.scss renamed to projects/f-examples/advanced/dagre-layout-example/dagre-layout-example.component.scss

@@ -0,0 +1,83 @@
+import {
+  ChangeDetectionStrategy, ChangeDetectorRef,
+  Component, inject,
+  ViewChild
+} from '@angular/core';
+import {
+  EFMarkerType,
+  FCanvasComponent, FCreateConnectionEvent, FDragStartedEvent,
+  FFlowModule, FReassignConnectionEvent,
+} from '@foblex/flow';
+import { generateGuid } from '@foblex/utils';
+
+@Component({
+  selector: 'drag-start-end-events',
+  styleUrls: [ './drag-start-end-events.component.scss' ],
+  templateUrl: './drag-start-end-events.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+  ]
+})
+export class DragStartEndEventsComponent {
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+
+  @ViewChild(FCanvasComponent, { static: true })
+  protected fCanvas!: FCanvasComponent;
+
+  protected readonly eMarkerType = EFMarkerType;
+
+  protected events: string[] = [];
+
+  protected nodes = [ {
+    id: '1',
+    position: { x: 0, y: 200 },
+    text: 'Node 1',
+  }, {
+    id: '2',
+    position: { x: 200, y: 200 },
+    text: 'Node 2',
+  } ];
+  protected connections = [ {
+    id: '1',
+    source: 'f-node-output-0',
+    target: 'f-node-input-2',
+  } ];
+
+  protected onLoaded(): void {
+    this.fCanvas.resetScaleAndCenter(false);
+  }
+
+  protected onDragStarted(event: FDragStartedEvent): void {
+    this.events.push(`EVENT: ${ event.fEventType }, DATA: ${ JSON.stringify(event.fData) }`);
+    this._changeDetectorRef.markForCheck();
+  }
+
+  protected onDragEnded(): void {
+    this.events.push(`EVENT: drag-ended`);
+  }
+
+  protected onConnectionCreated(event: FCreateConnectionEvent): void {
+    console.log('onConnectionCreated', event);
+    if (event.fInputId) {
+      this._createConnection(event.fOutputId, event.fInputId);
+    }
+  }
+
+  protected onConnectionReassigned(event: FReassignConnectionEvent): void {
+    if (event.newFInputId) {
+      this._removeConnection(event.fConnectionId);
+      this._createConnection(event.fOutputId, event.newFInputId);
+    }
+  }
+
+  private _removeConnection(connectionId: string): void {
+    const index = this.connections.findIndex((x) => x.id === connectionId);
+    this.connections.splice(index, 1);
+  }
+
+  private _createConnection(source: string, target: string): void {
+    this.connections.push({ id: generateGuid(), source, target });
+  }
+}