test: Added cypress and drag handle, drag to connect, drag to reassig…

…n tests

.github/workflows/cypress.yml

@@ -0,0 +1,33 @@
+name: Cypress Tests
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization
+    # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
+    # Also see warning here https://github.com/cypress-io/github-action#parallel
+    strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+      matrix:
+        containers: [1, 2] # Uses 2 parallel instances
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress run
+        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+        uses: cypress-io/github-action@v6
+        with:
+          # Starts web server for E2E tests - replace with your own server invocation
+          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
+          start: npm start
+          wait-on: 'http://localhost:3000' # Waits for above
+          # Records to Cypress Cloud
+          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
+          record: true
+          parallel: true # Runs test in parallel using settings above
+        env:
+          # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
+          # in GitHub repo → Settings → Secrets → Actions
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

angular.json

@@ -30,7 +30,6 @@
               }
             ],
             "styles": [
-//              "projects/f-docs/src/assets/styles/styles.scss",
               "src/styles/styles.scss"
             ],
             "scripts": [],

cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  projectId: "7b1oh6",
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/drag-handle.component.cy.ts

@@ -0,0 +1,45 @@
+describe('DragHandleComponent', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4200/examples/drag-handle');
+  });
+
+  it('should drag fNode element and update its transform translate', function() {
+
+    cy.get('.f-node.f-drag-handle').invoke('css', 'transform')
+      .should('equal', 'matrix(1, 0, 0, 1, 0, 0)');
+
+    cy.get('.f-node.f-drag-handle')
+      .trigger('mousedown', { button: 0, force: true })
+      .trigger('mousemove', { clientX: -150, clientY: 0 })
+      .trigger('mouseup', { clientX: 0, clientY: 0 });
+
+    cy.get('.f-node.f-drag-handle').invoke('css', 'transform')
+      .should('equal', 'matrix(1, 0, 0, 1, 150, 0)');
+  });
+
+  it('should click fNode element and update its selection state', function() {
+
+    cy.get('.f-node.f-drag-handle')
+      .should('not.have.class', 'f-selected');
+
+    cy.get('.f-node.f-drag-handle').click();
+
+    cy.get('.f-node.f-drag-handle').should('have.class', 'f-selected');
+  });
+
+  it('should drag fCanvas element and update its transform translate', function () {
+    cy.get('.f-canvas').invoke('css', 'transform')
+      .should('equal', 'matrix(1, 0, 0, 1, -15.1484, 103.5)');
+
+    cy.get('#f-flow-0')
+      .trigger('mousedown', { clientX: 10, clientY: 10, button: 0, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 0 })
+      .trigger('mousemove', { clientX: 20, clientY: 0 })
+      .trigger('mouseup', { clientX: 30, clientY: 0 });
+
+    cy.get('.f-canvas').invoke('css', 'transform')
+      .should('not.equal', 'matrix(1, 0, 0, 1, -15.1484, 103.5)');
+  });
+});
+
+

cypress/e2e/drag-to-connect.component.cy.ts

@@ -0,0 +1,39 @@
+describe('DragToConnectComponent', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4200/examples/drag-to-connect')
+  })
+
+  it('should start creating a connection and show connection-for-create element', function () {
+    cy.get('.f-connection-for-create').should('exist')
+      .invoke('css', 'display').should('equal', 'none');
+
+    cy.get('.f-node-output')
+      .trigger('mousedown', { button: 0, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 0 })
+      .trigger('mousemove', { clientX: 140, clientY: 10 })
+      .get('.f-connection-for-create').should('exist')
+      .invoke('css', 'display').should('equal', 'block')
+      .get('.f-node-output')
+      .trigger('mouseup');
+
+    cy.get('.f-connection-for-create').should('exist')
+      .invoke('css', 'display').should('equal', 'none');
+  });
+
+  it('should drag from output to input and create a connection', function () {
+    cy.get('#f-connection-0').should('not.exist');
+
+    cy.get('.f-node-output')
+      .trigger('mousedown', { button: 0, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 0 })
+      .trigger('mousemove', { clientX: 140, clientY: 10 })
+      .get('.f-node-input')
+      .trigger('mousemove', { clientX: 140, clientY: 10 })
+      .trigger('mouseup');
+
+    cy.get('#f-connection-0').should('exist');
+  });
+})
+
+
+

cypress/e2e/drag-to-reassign.component.cy.ts

@@ -0,0 +1,23 @@
+describe('DragToReassignComponent', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4200/examples/drag-to-reassign')
+  })
+
+  it('should drag from input to anoyher input and reassign the connection', function() {
+    cy.get('#connection_f-connection-012').should('exist');
+
+    cy.get('.f-connection-drag-handle')
+      .trigger('mousedown', { button: 0, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 0 })
+      .trigger('mousemove', { clientX: 20, clientY: 10 })
+      .get('div[data-f-input-id=\'f-node-input-1\']')
+      .trigger('mousemove', { clientX: 20, clientY: 10 })
+      .trigger('mouseup');
+
+    cy.get('#connection_f-connection-012').should('not.exist');
+    cy.get('#connection_for_selection_f-connection-11f-node-input-1').should('exist');
+  });
+})
+
+
+

cypress/e2e/resize-handle.component.cy.ts

@@ -0,0 +1,28 @@
+describe('ResizeHandleComponent', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:4200/examples/resize-handle');
+  });
+
+  it('should drag fNode ResizeHandle and update node size', function() {
+
+    cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'transform')
+      .should('equal', 'matrix(1, 0, 0, 1, 0, 0)');
+
+    cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width')
+      .should('equal', '120px');
+
+    cy.get('div[data-f-node-id=\'f-node-0\'] div[data-f-resize-handle-type$=\'TOP\']')
+      .trigger('mousedown', { button: 0, force: true })
+      .trigger('mousemove', { clientX: 0, clientY: 0 })
+      .trigger('mousemove', { clientX: -50, clientY: -50 })
+      .trigger('mouseup');
+
+    cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'transform')
+      .should('equal', 'matrix(1, 0, 0, 1, -50, -50)');
+
+    cy.get('div[data-f-node-id=\'f-node-0\']').invoke('css', 'width')
+      .should('equal', '170px');
+  });
+});
+
+

cypress/support/e2e.ts

@@ -0,0 +1,18 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -64,11 +64,12 @@
     "@angular/platform-server": "^18.2.0",
     "@angular/router": "^18.2.0",
     "@angular/ssr": "^18.2.3",
+    "@cypress/angular": "^2.1.0",
     "@foblex/2d": "1.1.0",
     "@foblex/drag-toolkit": "1.1.0",
-    "@foblex/f-docs": "1.3.5",
+    "@foblex/f-docs": "1.3.7",
     "@foblex/mediator": "1.1.0",
-    "@foblex/platform": "1.0.3",
+    "@foblex/platform": "1.0.4",
     "@foblex/utils": "1.1.0",
     "dagre": "^0.8.5",
     "elkjs": "^0.9.3",
@@ -87,6 +88,7 @@
     "@types/html2canvas": "^1.0.0",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "cypress": "^13.14.2",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

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

@@ -3,7 +3,6 @@ import {
   FCanvasComponent,
   FFlowModule
 } from '@foblex/flow';
-import { PointExtensions } from '@foblex/2d';
 
 @Component({
   selector: 'drag-handle',

projects/f-flow/src/f-draggable/node-resize/node-resize.drag-handler.ts

@@ -74,7 +74,7 @@ export class NodeResizeDragHandler implements IDraggableItem {
   public complete(): void {
     this.fNode.sizeChange.emit(
       RectExtensions.initialize(
-        this.fNode.position.x, this.fNode.position.y, this.fNode.size.width, this.fNode.size.height
+        this.fNode.position.x, this.fNode.position.y, this.fNode.size?.width, this.fNode.size?.height
       )
     );
   }

public/docs/en/examples/environment.ts

@@ -67,6 +67,7 @@ function overviewGroup(): INavigationGroup {
       {
         link: 'overview',
         text: 'Overview',
+        description: 'Learn about Foblex Flow, a modern Angular library for building interactive flow-based diagrams. This article provides an overview of the library, its features, and how to get started with it.',
       },
     ],
   }
@@ -82,27 +83,39 @@ function introductionGroup(): INavigationGroup {
         image: './previews/examples/custom-nodes.light.png',
         image_dark: './previews/examples/custom-nodes.dark.png',
         description: 'Learn how to display any content inside a node. This example demonstrates how to create custom nodes with varied content, styles, and behaviors, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       {
         link: 'drag-handle',
         text: 'Drag Handle',
         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.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       {
         link: 'resize-handle',
         text: 'Resize Handle',
         image: './previews/examples/resize-handle.light.png',
         image_dark: './previews/examples/resize-handle.dark.png',
         description: 'Discover how to add a resize handle to nodes. This example demonstrates how to make nodes resizable, enabling users to adjust their size easily within Angular and Foblex Flow.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       {
         link: 'grouping',
         text: 'Grouping',
         image: './previews/examples/grouping.light.png',
         image_dark: './previews/examples/grouping.dark.png',
         description: 'Explore how to group nodes together. This example demonstrates how to create groups of nodes, allowing users to organize and manage them efficiently within Angular and Foblex Flow.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       }
     ],
   }
@@ -150,13 +163,19 @@ function connectionGroup(): INavigationGroup {
         image: './previews/examples/drag-to-connect.light.png',
         image_dark: './previews/examples/drag-to-connect.dark.png',
         description: 'Learn how to connect nodes by dragging a connection between them. This example demonstrates how to create connections between nodes, providing a comprehensive guide to building interactive flow-based diagrams.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       {
         link: 'drag-to-reassign',
         text: 'Drag to Reassign',
         image: './previews/examples/drag-to-reassign.light.png',
         image_dark: './previews/examples/drag-to-reassign.dark.png',
         description: 'Discover how to reassign connections by dragging them to a new connector. This example demonstrates how to move connections between nodes, enabling users to reassign them easily within Angular and Foblex Flow.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       // {
       //   link: 'add-node-on-connection-drop',
@@ -211,14 +230,20 @@ function layoutGroup(): INavigationGroup {
         text: 'Dagre Layout',
         image: './previews/examples/dagre-layout.light.png',
         image_dark: './previews/examples/dagre-layout.dark.png',
-        description: 'Explore a tree layout example using Dagre.js with Angular and Foblex Flow to create structured and dynamic tree diagrams. This example demonstrates how to implement and customize tree layouts efficiently within a flow-based diagram using the Dagre layout engine.'
+        description: 'Explore a tree layout example using Dagre.js with Angular and Foblex Flow to create structured and dynamic tree diagrams. This example demonstrates how to implement and customize tree layouts efficiently within a flow-based diagram using the Dagre layout engine.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       },
       {
         link: 'elkjs-layout',
         text: 'ELKJS Layout',
         image: './previews/examples/elkjs-layout.light.png',
         image_dark: './previews/examples/elkjs-layout.dark.png',
         description: 'Explore a tree layout example using ELKJS with Angular and Foblex Flow to create structured and dynamic tree diagrams. This example demonstrates how to implement and customize tree layouts efficiently within a flow-based diagram using the ELKJS layout engine.',
+        image_width: 800,
+        image_height: 600,
+        image_type: 'image/png',
       }
     ],
   }
@@ -261,12 +286,18 @@ function proExamplesGroup(): INavigationGroup {
       description: 'Learn how to create a visual programming interface using Angular and Foblex Flow. This example showcases features like adding and connecting nodes, zooming, panning, alignment, and more, providing a comprehensive guide to building interactive, flow-based diagrams.',
       image: './previews/examples/vp-flow.light.png',
       image_dark: './previews/examples/vp-flow.dark.png',
+      image_width: 800,
+      image_height: 600,
+      image_type: 'image/png',
     },{
       text: 'DB Management Flow',
       link: 'f-db-management-flow',
       description: 'Discover how to create a database management flow using Angular and Foblex Flow. This example demonstrates connecting nodes, zooming, panning, alignment, form validation, and more, offering a comprehensive solution for building interactive database management interfaces.',
       image: './previews/examples/db-management-flow.light.png',
       image_dark: './previews/examples/db-management-flow.dark.png',
+      image_width: 800,
+      image_height: 600,
+      image_type: 'image/png',
     },
     //   {
     //   text: 'Call Center Flow',