services graph proto

HIRO-MicroDataCenters-BV · Jun 19, 2024 · c1680ce · c1680ce
1 parent d101ef6
commit c1680ce
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/src/components/AppFlowChart.vue b/src/components/AppFlowChart.vue
@@ -47,6 +47,7 @@ onBeforeUnmount(() => {
   background-size: cover;
   width: 50px;
   height: 57px;
+  z-index: 1 !important;
 }
 
 /* this contains the default theme, these are optional styles */

diff --git a/src/constants/services-page.ts b/src/constants/services-page.ts
@@ -1,5 +1,5 @@
 import { cubeParts } from '@/constants/cube-parts';
-import type { Edge, Node } from '@vue-flow/core';
+import { type Edge, type Node, Position } from '@vue-flow/core';
 
 export const servicesCards = [
   {
@@ -60,20 +60,34 @@ export const servicesGraph = {
   nodes: <Node[]>[
     {
       id: '1',
-      type: 'input',
       position: { x: 5, y: 5 },
       style: {
         backgroundImage: 'url("src/assets/cubes/ecs.svg")',
       },
     },
     {
       id: '2',
-      position: { x: 100, y: 150 },
+      position: { x: 10, y: 150 },
     },
     {
       id: '3',
-      type: 'output',
-      position: { x: 400, y: 200 },
+      position: { x: 15, y: 300 },
+      sourcePosition: Position.Right,
+    },
+    {
+      id: '4',
+      position: { x: 150, y: 75 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '5',
+      position: { x: 150, y: 200 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '6',
+      position: { x: 250, y: 150 },
+      targetPosition: Position.Left,
     },
   ],
   edges: <Edge[]>[
@@ -92,9 +106,37 @@ export const servicesGraph = {
       type: 'straight',
     },
     {
-      id: 'e2->3',
+      id: 'e2->4',
+      source: '2',
+      target: '4',
+      animated: true,
+      type: 'straight',
+    },
+    {
+      id: 'e1->4',
       source: '1',
-      target: '3',
+      target: '4',
+      animated: true,
+      type: 'straight',
+    },
+    {
+      id: 'e3->5',
+      source: '3',
+      target: '5',
+      animated: true,
+      type: 'straight',
+    },
+    {
+      id: 'e4->6',
+      source: '4',
+      target: '6',
+      animated: true,
+      type: 'straight',
+    },
+    {
+      id: 'e5->6',
+      source: '5',
+      target: '6',
       animated: true,
       type: 'straight',
     },