docs: Added drag-handle example

Author: siarheihuzarevich

projects/f-examples/_flow-common.scss

@@ -114,7 +114,6 @@
 }
 
 @mixin node {
-  width: 100px;
   padding: 4px;
   color: var(--node-color);
   text-align: center;

…examples/custom-nodes/_mdc-controls.scss projects/f-examples/_mdc-controls.scssprojects/f-examples/custom-nodes/_mdc-controls.scss renamed to projects/f-examples/_mdc-controls.scss projects/f-examples/custom-nodes/_mdc-controls.scss renamed to projects/f-examples/_mdc-controls.scss

@@ -13,7 +13,7 @@ import { BrowserService } from '@foblex/platform';
 
 @Component({
   selector: 'custom-nodes',
-  styleUrls: [ './custom-nodes.component.scss', './_mdc-controls.scss' ],
+  styleUrls: [ './custom-nodes.component.scss', '../_mdc-controls.scss' ],
   templateUrl: './custom-nodes.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,

projects/f-examples/custom-nodes/custom-nodes.component.ts

@@ -0,0 +1,30 @@
+<f-flow fDraggable (fLoaded)="onLoaded()">
+  <f-canvas fZoom>
+    <div fNode fDragHandle
+         [fNodePosition]="{ x: 24, y: 24 }">
+      Node is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 164, y: 84 }" class="drag-handle-inside">
+      <span fDragHandle class="f-icon f-drag-handle-icon"></span>
+      Only the icon is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 304, y: 24 }" class="drag-handle-outside">
+      <div fDragHandle>
+        <span class="f-icon f-drag-handle-icon"></span>
+      </div>
+      Only the icon is the drag handle
+    </div>
+
+    <div fNode
+         [fNodePosition]="{ x: 150, y: 170 }">
+      Only the image is the drag handle
+      <div fDragHandle>
+        <img src="https://material.angular.io/assets/img/examples/shiba2.jpg">
+      </div>
+    </div>
+  </f-canvas>
+</f-flow>

projects/f-examples/drag-handle/drag-handle.component.html

@@ -0,0 +1,51 @@
+@use "../flow-common";
+
+::ng-deep drag-handle {
+  @include flow-common.connection;
+}
+
+.f-node {
+  @include flow-common.node;
+  cursor: default;
+
+  img {
+    display: block;
+    pointer-events: none;
+    width: 150px;
+  }
+}
+
+.f-drag-handle {
+  width: fit-content;
+  cursor: move;
+}
+
+.drag-handle-inside {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+}
+
+.f-icon {
+  display: block;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  mask-repeat: no-repeat;
+}
+
+.drag-handle-outside {
+  .f-drag-handle {
+    background-color: var(--node-background-color);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: -50px;
+    padding: 4px;
+    border: 0.5px solid var(--node-border-color);
+    border-radius: var(--node-border-radius);
+  }
+}
+
+

projects/f-examples/drag-handle/drag-handle.component.scss

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
+import {
+  FCanvasComponent,
+  FFlowModule
+} from '@foblex/flow';
+import { PointExtensions } from '@foblex/2d';
+
+@Component({
+  selector: 'drag-handle',
+  styleUrls: [ './drag-handle.component.scss' ],
+  templateUrl: './drag-handle.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FFlowModule,
+  ]
+})
+export class DragHandleComponent {
+
+  @ViewChild(FCanvasComponent, { static: true })
+  public fCanvas!: FCanvasComponent;
+
+  public onLoaded(): void {
+    this.fCanvas.fitToScreen(PointExtensions.initialize(100, 100), false);
+  }
+}

projects/f-examples/drag-handle/drag-handle.component.ts

@@ -0,0 +1,16 @@
+# Drag Handle
+
+## Description
+
+This example showcases how to add a [DragHandle](./docs/f-drag-handle-directive) for nodes, allowing users to move them easily within Angular and Foblex Flow.
+
+## Example
+
+::: ng-component <drag-handle></drag-handle> [height]="600"
+[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.html
+[component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.ts
+[component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/drag-handle/drag-handle.component.scss
+[common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss
+:::
+
+

public/docs/en/examples/drag-handle.md

@@ -36,6 +36,7 @@ function createEnvironment(): IDocsEnvironment {
     },
     components: [
       { tag: 'custom-nodes', component: import('../../../../projects/f-examples/custom-nodes/custom-nodes.component') },
+      { tag: 'drag-handle', component: import('../../../../projects/f-examples/drag-handle/drag-handle.component') },
       { tag: 'draggable-flow', component: import('../../../../projects/f-guides-examples/draggable-flow/draggable-flow.component') },
       { tag: 'vp-flow', component: import('../../../../projects/f-pro-examples/visual-programming/components/flow/vp-flow.component') },
       { tag: 'db-management-flow', component: import('../../../../projects/f-pro-examples/db-management-example/components/flow/db-management-flow.component') },
@@ -76,8 +77,8 @@ function introductionGroup(): INavigationGroup {
       {
         link: 'drag-handle',
         text: 'Drag Handle',
-        image: './previews/examples/custom-nodes.light.png',
-        image_dark: './previews/examples/custom-nodes.dark.png',
+        image: './previews/examples/drag-handle.light.png',
+        image_dark: './previews/examples/drag-handle.dark.png',
         description: 'This example showcases how to create a draggable handle for nodes, allowing users to move them easily within Angular and Foblex Flow.',
       },
       {