From 2197994317d310f72b544a92be2bc36f63c59ec5 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 2 Jun 2023 13:07:59 -0500
Subject: [PATCH] Add graph bits

---
 src/lib/components/graph/Graph.svelte     | 57 +++++++++++++++++++++++
 src/lib/components/graph/GraphEdge.svelte | 15 ++++++
 src/lib/components/graph/GraphNode.svelte | 15 ++++++
 src/lib/components/graph/GraphStyles.ts   | 57 +++++++++++++++++++++++
 4 files changed, 144 insertions(+)
 create mode 100644 src/lib/components/graph/Graph.svelte
 create mode 100644 src/lib/components/graph/GraphEdge.svelte
 create mode 100644 src/lib/components/graph/GraphNode.svelte
 create mode 100644 src/lib/components/graph/GraphStyles.ts

diff --git a/src/lib/components/graph/Graph.svelte b/src/lib/components/graph/Graph.svelte
new file mode 100644
index 0000000..df5d5bc
--- /dev/null
+++ b/src/lib/components/graph/Graph.svelte
@@ -0,0 +1,57 @@
+<script context="module" lang="ts">
+ export const GRAPH_STATE = {};
+
+ export type GraphContext = {
+     getCyInstance: () => cytoscape.Core
+ }
+</script>
+
+<script lang="ts">
+  import { onMount, setContext } from "svelte"
+  import cytoscape from "cytoscape"
+  import dagre from "cytoscape-dagre"
+  import GraphStyles from "./GraphStyles"
+
+ const graphContext: GraphContext = {
+     getCyInstance: () => cyInstance
+ }
+ setContext(GRAPH_STATE, graphContext)
+
+  let refElement = null
+  let cyInstance: cytoscape.Core = null
+
+  onMount(() => {
+    cytoscape.use(dagre)
+
+    cyInstance = cytoscape({
+      container: refElement,
+      style: GraphStyles,
+
+    })
+
+    cyInstance.on("add", () => {
+      cyInstance
+        .makeLayout({
+          name: "dagre",
+          rankDir: "TB",
+          nodeSep: 150
+        })
+        .run()
+    })
+  })
+
+</script>
+
+<div class="graph" bind:this={refElement}>
+  {#if cyInstance}
+    <slot></slot>
+  {/if}
+</div>
+
+<style lang="scss">
+ .graph {
+     background: white;
+     width: 100%;
+     height: 100%;
+ }
+</style>
diff --git a/src/lib/components/graph/GraphEdge.svelte b/src/lib/components/graph/GraphEdge.svelte
new file mode 100644
index 0000000..2150c33
--- /dev/null
+++ b/src/lib/components/graph/GraphEdge.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ import { onMount, getContext } from 'svelte'
+ import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
+
+ export let edge
+
+ const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext;
+ const cyInstance = getCyInstance()
+
+ cyInstance.add({
+     group: 'edges',
+     id: edge.id,
+     data: { ...edge }
+ })
+</script>
diff --git a/src/lib/components/graph/GraphNode.svelte b/src/lib/components/graph/GraphNode.svelte
new file mode 100644
index 0000000..a9ce900
--- /dev/null
+++ b/src/lib/components/graph/GraphNode.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { onMount, getContext } from 'svelte'
+	import { GRAPH_STATE, type GraphContext } from './Graph.svelte';
+
+  export let node
+
+  const { getCyInstance } = getContext(GRAPH_STATE) as GraphContext
+  const cyInstance = getCyInstance()
+
+  cyInstance.add({
+    group: 'nodes',
+    id: node.id,
+    data: { ...node }
+  })
+</script>
diff --git a/src/lib/components/graph/GraphStyles.ts b/src/lib/components/graph/GraphStyles.ts
new file mode 100644
index 0000000..ed3528a
--- /dev/null
+++ b/src/lib/components/graph/GraphStyles.ts
@@ -0,0 +1,57 @@
+export default [
+    {
+        selector: 'node',
+        style: {
+            'width': '50',
+            'height': '50',
+            'font-size': '18',
+            'font-weight': 'bold',
+            'content': `data(label)`,
+            'text-valign': 'center',
+            'text-wrap': 'wrap',
+            'text-max-width': '140',
+            'background-color': 'gold',
+            'border-color': 'orange',
+            'border-width': '3',
+            'color': 'darkred'
+        }
+    },
+    {
+        selector: 'node:selected',
+        style: {
+            'background-color': 'darkred',
+            color: 'white',
+            'border-color': 'darkred',
+            'line-color': '#0e76ba',
+            'target-arrow-color': '#0e76ba'
+        }
+    },
+    {
+        selector: 'edge',
+        style: {
+            'curve-style': 'bezier',
+            'color': 'darkred',
+            'text-background-color': '#ffffff',
+            'text-background-opacity': '1',
+            'text-background-padding': '3',
+            'width': '3',
+            'target-arrow-shape': 'triangle',
+            'line-color': 'darkred',
+            'target-arrow-color': 'darkred',
+            'font-weight': 'bold'
+        }
+    },
+    {
+        selector: 'edge[label]',
+        style: {
+            'content': `data(label)`,
+        }
+    },
+    {
+        selector: 'edge.label',
+        style: {
+            'line-color': 'orange',
+            'target-arrow-color': 'orange'
+        }
+    }
+]