Merge pull request #2 from natrontech/DEV-11-f-visual-drag-drop-inter…

…face Dev 11 f visual drag drop interface
natrontech · Nov 9, 2023 · 36043b0 · 36043b0
2 parents b1ce7e2 + 516a86f
commit 36043b0
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 133 deletions.
diff --git a/backend/deployments/local/docker-compose-authentik.yaml b/backend/deployments/local/docker-compose-authentik.yaml
diff --git a/ui/frontend/src/lib/components/canvas/nodes/ComponentNode.svelte b/ui/frontend/src/lib/components/canvas/nodes/ComponentNode.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { Button } from "flowbite-svelte";
+  import { Boxes, Cable, Pencil, Trash } from "lucide-svelte";
+  import { Anchor, Node, type Connections, type NodeConfig } from "svelvet";
+
+  export let isSelected: boolean = false;
+  export let activeHover: boolean = false;
+
+  export let nodeProps: NodeConfig = {};
+  export let idx: number = 0;
+
+  export let selectNode = (idx: number) => {};
+  export let deleteNode = (idx: number) => {};
+  export let addConnection = (sourceNode: NodeConfig, targetNode: NodeConfig) => {};
+</script>
+
+<Node {...nodeProps} drop="cursor" dynamic={true} on:nodeClicked={() => selectNode(idx)}>
+
+  <div
+    class="node
+			bg-white
+			border-background
+			rounded-xl
+			p-2
+		"
+  >
+    <div class="input-anchors">
+      <Anchor multiple input nodeConnect direction="south" invisible={!isSelected} />
+    </div>
+    <div class="output-anchors">
+      <Anchor multiple output nodeConnect invisible={!activeHover} />
+    </div>
+    <div>
+      <Button
+        outline
+        class=""
+        size="xs"
+        on:click={() => {
+          selectNode(idx);
+        }}
+      >
+        <Boxes class="w-5 h-5" strokeWidth={2} />
+      </Button>
+      <Button outline class="" size="xs" on:click={() => selectNode(idx)}>
+        <Cable class="w-5 h-5" strokeWidth={2} />
+      </Button>
+
+      <Button outline class="" size="xs" on:click={() => selectNode(idx)}>
+        <Pencil class="w-5 h-5" strokeWidth={2} />
+      </Button>
+
+      <Button outline color="red" class="" size="xs" on:click={() => deleteNode(idx)}>
+        <Trash class="w-5 h-5" strokeWidth={2} />
+      </Button>
+    </div>
+    <h1 class="text-2xl font-bold pr-10">{nodeProps.label}</h1>
+  </div>
+</Node>
diff --git a/ui/frontend/src/lib/components/canvas/nodes/LayoutNode.svelte b/ui/frontend/src/lib/components/canvas/nodes/LayoutNode.svelte
diff --git a/ui/frontend/src/lib/utils/id.ts b/ui/frontend/src/lib/utils/id.ts
@@ -0,0 +1,3 @@
+export function randomId(): string {
+    return Math.random().toString(36).substr(2, 9);
+}
diff --git a/ui/frontend/src/routes/app/charts/[id]/+page.svelte b/ui/frontend/src/routes/app/charts/[id]/+page.svelte
@@ -2,11 +2,12 @@
   import { Trash } from "lucide-svelte";
   import colorTheme from "$lib/stores/theme";
   import type { XYPair, EdgeStyle, NodeConfig } from "svelvet";
-  import { Node, Svelvet } from "svelvet";
+  import { Svelvet } from "svelvet";
   import Toolbar from "$lib/components/canvas/drawer/Toolbar.svelte";
-  import { Button } from "flowbite-svelte";
   import type { ComponentType } from "svelte";
-
+  import { randomId } from "$lib/utils/id";
+  import ComponentNode from "$lib/components/canvas/nodes/ComponentNode.svelte";
+  
   // Toolbar props
   let width = 0;
   let height = 0;
@@ -53,7 +54,13 @@
     toggle
   };
 
+  interface NodeConnection {
+    source: NodeConfig
+    target: NodeConfig
+  }
+
   let nodes: NodeConfig[] = [];
+  let nodeConnections: NodeConnection[] = [];
   let dropped_in = false;
 
   // Toolbar functions
@@ -113,13 +120,12 @@
 
       // Additional logic to handle dropping into the dropzone
       if (dropped_in) {
-        nodes = [
-          ...nodes,
-          {
-            ...nodeConfig,
-            useDefaults: true
-          }
-        ];
+        nodes.push({
+          ...nodeConfig,
+          useDefaults: true,
+          id: randomId()
+        });
+        nodes = [...nodes];
         dropped_in = false;
       }
     }
@@ -136,19 +142,25 @@
   }
 
   const handleDragEnter = (): void => {
-    console.log("drag enter");
     if (!dropped_in) dropped_in = true;
   };
   const handleDragLeave = (): void => {
-    console.log("drag leave");
     if (dropped_in) dropped_in = false;
   };
-
   let selectedNodeIndex: number | null = null;
   function selectNode(index: number) {
-    console.log("select node", index);
     selectedNodeIndex = index;
   }
+  const addConnection = (sourceNode: NodeConfig, targetNode: NodeConfig) => {
+    // add connection to connections array
+    nodeConnections.push({ source: sourceNode, target: targetNode });
+    nodeConnections = [...nodeConnections];
+  };
+  const deleteNode = (index: number) => {
+    // delete node from nodes array
+    nodes.splice(index, 1);
+    nodes = [...nodes];
+  };
 </script>
 
 <div class="h-full w-full">
@@ -163,24 +175,15 @@
     on:mouseleave={handleDragLeave}
   >
     <Svelvet id="lowcode" {...svelvetProps}>
-      {#each nodes as { ...nodeProps }, idx}
-        <Node {...nodeProps} drop="cursor" dynamic={true} on:nodeClicked={() => selectNode(idx)}>
-          <div
-            class="node flex flex-col justify-center items-center cursor-auto select-none draggable z-20 p-2"
-          >
-            <h1 class="text-2xl font-bold pr-10">{nodeProps.label}</h1>
-            <Button
-              class="absolute top-1 right-1 !p-2"
-              size="xs"
-              on:click={() => (
-                // remove node from nodes array without mutating the array
-                nodes = nodes.filter((_, i) => i !== idx)
-              )}
-            >
-              <Trash class="w-5 h-5" strokeWidth={2} />
-            </Button>
-          </div>
-        </Node>
+      {#each nodes as { ...nodeProps }, idx (nodeProps.id)}
+        <ComponentNode
+          {nodeProps}
+          {idx}
+          {selectNode}
+          {addConnection}
+          {deleteNode}
+          isSelected={idx === selectedNodeIndex}
+        />
       {/each}
     </Svelvet>
   </div>