From d1edf4e5c74e3dc28f4da9a07a474a4a139dbee6 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 15 Dec 2022 01:53:35 +0100
Subject: [PATCH] replace svelvet with fork to remove zoom and node moving

---
 frontend/package-lock.json                    | 38 +++++++++----------
 frontend/package.json                         |  2 +-
 frontend/src/lib/components/FlowViewer.svelte |  4 +-
 frontend/src/lib/components/RunForm.svelte    |  2 +-
 .../lib/components/common/popup/Popup.svelte  |  2 -
 .../src/lib/components/graph/FlowGraph.svelte |  6 ++-
 frontend/src/lib/components/graph/model.ts    | 33 +++++++++++++++-
 .../src/routes/flows/get/[...path].svelte     |  2 +-
 .../src/routes/scripts/get/[...hash].svelte   |  2 +-
 9 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 60096f7b47..0fb0b7a92a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -39,6 +39,7 @@
 				"@types/vscode": "~1.73.1",
 				"@typescript-eslint/eslint-plugin": "^5.46.1",
 				"@typescript-eslint/parser": "^5.46.1",
+				"@windmill-labs/svelvet": "^4.0.6",
 				"@zerodevx/svelte-toast": "^0.8.1",
 				"autoprefixer": "^10.4.13",
 				"cssnano": "^5.1.14",
@@ -68,7 +69,6 @@
 				"svelte-preprocess": "^4.9.8",
 				"svelte-splitpanes": "^0.7.3",
 				"svelte2tsx": "^0.5.22",
-				"svelvet": "^4.0.3",
 				"tailwindcss": "^3.2.2",
 				"tslib": "^2.4.1",
 				"typescript": "^4.9.3"
@@ -803,6 +803,15 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/@windmill-labs/svelvet": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/@windmill-labs/svelvet/-/svelvet-4.0.6.tgz",
+			"integrity": "sha512-EGD0LH/0BGMy9bkGOlVywHMhniG74RKn1w/ue4ybCj5c+exsg0sTdgxDvuVcAHXuCbn7Iv+KrLQzeZVZecKHvw==",
+			"dev": true,
+			"dependencies": {
+				"d3-zoom": "^3.0.0"
+			}
+		},
 		"node_modules/@zeit/schemas": {
 			"version": "2.21.0",
 			"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -6227,15 +6236,6 @@
 				"typescript": "^4.1.2"
 			}
 		},
-		"node_modules/svelvet": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/svelvet/-/svelvet-4.0.3.tgz",
-			"integrity": "sha512-eNE0l50G+p26gHdAiWlqopqBBTgIWv3LYYvRB/EHbieQmNRqObu6VIxnIcjp8MRWRrl82p6qyer54gxH4fY3qA==",
-			"dev": true,
-			"dependencies": {
-				"d3-zoom": "^3.0.0"
-			}
-		},
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -7483,6 +7483,15 @@
 				"eslint-visitor-keys": "^3.3.0"
 			}
 		},
+		"@windmill-labs/svelvet": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/@windmill-labs/svelvet/-/svelvet-4.0.6.tgz",
+			"integrity": "sha512-EGD0LH/0BGMy9bkGOlVywHMhniG74RKn1w/ue4ybCj5c+exsg0sTdgxDvuVcAHXuCbn7Iv+KrLQzeZVZecKHvw==",
+			"dev": true,
+			"requires": {
+				"d3-zoom": "^3.0.0"
+			}
+		},
 		"@zeit/schemas": {
 			"version": "2.21.0",
 			"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -11345,15 +11354,6 @@
 				"pascal-case": "^3.1.1"
 			}
 		},
-		"svelvet": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/svelvet/-/svelvet-4.0.3.tgz",
-			"integrity": "sha512-eNE0l50G+p26gHdAiWlqopqBBTgIWv3LYYvRB/EHbieQmNRqObu6VIxnIcjp8MRWRrl82p6qyer54gxH4fY3qA==",
-			"dev": true,
-			"requires": {
-				"d3-zoom": "^3.0.0"
-			}
-		},
 		"svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d178a0a38d..6b7b4becf4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
 		"@types/vscode": "~1.73.1",
 		"@typescript-eslint/eslint-plugin": "^5.46.1",
 		"@typescript-eslint/parser": "^5.46.1",
+		"@windmill-labs/svelvet": "^4.0.6",
 		"@zerodevx/svelte-toast": "^0.8.1",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^5.1.14",
@@ -52,7 +53,6 @@
 		"svelte-preprocess": "^4.9.8",
 		"svelte-splitpanes": "^0.7.3",
 		"svelte2tsx": "^0.5.22",
-		"svelvet": "^4.0.3",
 		"tailwindcss": "^3.2.2",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3"
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 5d9abd3d6c..1feceb2efb 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -39,9 +39,9 @@
 </script>
 
 <Tabs bind:selected={tab}>
-	<Tab value="ui">Flow rendered</Tab>
+	<Tab value="ui">Graph</Tab>
 	<Tab value="json">Json</Tab>
-	<Tab value="schema">Input schema of the flow</Tab>
+	<Tab value="schema">Input Schema</Tab>
 
 	<svelte:fragment slot="content">
 		<TabContent value="ui">
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 22b6d8856e..6cfa6566b8 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -111,7 +111,7 @@
 			<SchemaForm {autofocus} schema={runnable.schema} bind:isValid bind:args />
 		{/if}
 	{:else}
-		<div class="text-sm">No schema</div>
+		<div class="text-xs text-gray-600">No schema</div>
 	{/if}
 	{#if viewOptions}
 		<div transition:slide class="mt-6">
diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte
index b412be4490..9972f7e560 100644
--- a/frontend/src/lib/components/common/popup/Popup.svelte
+++ b/frontend/src/lib/components/common/popup/Popup.svelte
@@ -5,7 +5,6 @@
 	import { slide } from 'svelte/transition'
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import { clickOutside } from '../../../utils'
-	import { Kbd } from '..'
 	import { createStateMachine } from '../../../stateMachine'
 
 	export let ref: HTMLElement
@@ -14,7 +13,6 @@
 	export let openOn: (keyof HTMLElementEventMap)[] = ['focus']
 	/** Events on the reference element */
 	export let closeOn: (keyof HTMLElementEventMap)[] = ['blur']
-	export let disableInstruction = false
 	export let innerClasses = ''
 	export let outerClasses = ''
 
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index d740bcef82..82b2a46ee5 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import Svelvet, { type Edge } from 'svelvet'
+	import Svelvet from '@windmill-labs/svelvet'
+
 	import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag'
 	import { type FlowModule, FlowStatusModule, type ForloopFlow, RawScript } from '../../gen'
 	import {
@@ -14,7 +15,8 @@
 		type Branch,
 		type NestedNodes,
 		type ModuleHost,
-		type GraphModuleState
+		type GraphModuleState,
+		type Edge
 	} from '.'
 	import { defaultIfEmptyString, truncateRev } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
diff --git a/frontend/src/lib/components/graph/model.ts b/frontend/src/lib/components/graph/model.ts
index b50a512137..16da026152 100644
--- a/frontend/src/lib/components/graph/model.ts
+++ b/frontend/src/lib/components/graph/model.ts
@@ -1,6 +1,37 @@
 import type { FlowStatusModule } from "$lib/gen"
-import type { Node as SvelvetNode } from "svelvet"
 
+export interface SvelvetNode<T = any> {
+	id: number;
+	position: { x: number, y: number };
+	data: T;
+	width: number;
+	height: number;
+	bgColor?: string;
+	fontSize?: number;
+	borderColor?: string;
+	parentNode?: number;
+	childNodes?: number[];
+	borderRadius?: number;
+	textColor?: string;
+	clickCallback?: Function;
+	image?: boolean;
+	src?: string;
+	sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+	targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
+export interface Edge {
+	id: string;
+	source: number;
+	target: number;
+	label?: string;
+	labelBgColor?: string;
+	labelTextColor?: string;
+	edgeColor?: string;
+	type?: string;
+	animate?: boolean;
+	noHandle?: boolean;
+	arrow?: boolean;
+}
 export type ModuleHost = 'workspace' | 'inline' | 'hub'
 
 export type Node = SvelvetNode & { parentIds: string[], edgeLabel?: string, host?: ModuleHost }
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index 29526b89a5..5ab391cbed 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/frontend/src/routes/flows/get/[...path].svelte
@@ -243,7 +243,7 @@
 						runAction={runFlow}
 					/>
 				</div>
-				<div class="mt-6">
+				<div class="mt-6 box">
 					{defaultIfEmptyString(flow.description, 'No description')}
 				</div>
 			</div>
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index d8c72a0bb4..3ad57775a3 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -340,7 +340,7 @@
 						runAction={runScript}
 					/>
 				</div>
-				<div class="mt-6">
+				<div class="mt-6 box">
 					{defaultIfEmptyString(script.description, 'No description')}
 				</div>
 			</div>