fix: add will-change and transform properties for canvas during dragging

Author: siarheihuzarevich

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "17.8.9",
+  "version": "17.9.0",
   "description": "An Angular library designed to simplify the creation and manipulation of dynamic flow. Provides components for flows, nodes, and connections, automating node manipulation and inter-node connections.",
   "main": "index.js",
   "types": "index.d.ts",

projects/f-flow/src/f-canvas/f-canvas.component.scss

@@ -7,4 +7,9 @@
   top: 0;
   transform-origin: 0 0;
   pointer-events: none;
+
+  &.canvas-dragging {
+    will-change: transform;
+    transform: translateZ(0);
+  }
 }

projects/f-flow/src/f-draggable/f-canvas/f-canvas.drag-handler.ts

@@ -4,16 +4,14 @@ import { FComponentsStore } from '../../f-storage';
 import { Injector } from '@angular/core';
 
 export class FCanvasDragHandler implements IFDragHandler {
-
   public fEventType = 'canvas-move';
 
   private readonly _store: FComponentsStore;
   private _onPointerDownPosition: IPoint = PointExtensions.initialize();
 
-  constructor(
-    _injector: Injector,
-  ) {
+  constructor(_injector: Injector) {
     this._store = _injector.get(FComponentsStore);
+    this._store.fCanvas?.hostElement.classList.add('canvas-dragging');
   }
 
   public prepareDragSequence(): void {
@@ -27,5 +25,6 @@ export class FCanvasDragHandler implements IFDragHandler {
 
   public onPointerUp(): void {
     this._store.fCanvas!.emitCanvasChangeEvent();
+    this._store.fCanvas?.hostElement.classList.remove('canvas-dragging');
   }
 }

projects/f-flow/src/f-flow/f-flow.component.scss

@@ -28,11 +28,4 @@
     left: 0 !important;
     top: 0 !important;
   }
-
-  &.f-dragging {
-    .f-canvas {
-      will-change: transform;
-      transform: translateZ(0);
-    }
-  }
 }