From b2ac19252694119d41deb78f3dfa888a30b0835a Mon Sep 17 00:00:00 2001 From: Meowyam Date: Tue, 1 Apr 2025 14:53:02 +0800 Subject: [PATCH 1/6] add photoshop-style toolbar --- package-lock.json | 77 ++++++++++++++- .../decision-logic-visualizer/package.json | 5 + .../src/lib/displayers/flow/toolbar.svelte | 97 +++++++++++++++++++ .../src/routes/+page.svelte | 29 ++++++ 4 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte diff --git a/package-lock.json b/package-lock.json index 8e6472ba..0d2b817f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3785,6 +3785,39 @@ "dev": true, "license": "MIT" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz", + "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -3944,6 +3977,15 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@neodrag/svelte": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@neodrag/svelte/-/svelte-2.3.2.tgz", + "integrity": "sha512-1aPgnv2LqikkPEoTVgCPCqtXUXOD7OjCHLAIssTv0hkmyHLG9i697Cu+Tzco4/Q4KgOQXCDnLsa4Fvya5wXP9g==", + "license": "MIT", + "peerDependencies": { + "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -8104,7 +8146,6 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", - "dev": true, "license": "MIT", "dependencies": { "@types/estree": "^1.0.0" @@ -11085,6 +11126,25 @@ "dev": true, "license": "MIT" }, + "node_modules/phosphor-svelte": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/phosphor-svelte/-/phosphor-svelte-3.0.1.tgz", + "integrity": "sha512-QuxdzWCBjNZXglk4XpmaKb+JRA6XgKOYWpBY8k82NZwxO5ec7u2iFuueAijKYgj/7hLWHtreAPc2Q5uZFNTRSQ==", + "license": "MIT", + "dependencies": { + "estree-walker": "^3.0.3", + "magic-string": "^0.30.13" + }, + "peerDependencies": { + "svelte": "^5.0.0 || ^5.0.0-next.96", + "vite": ">=5" + }, + "peerDependenciesMeta": { + "vite": { + "optional": true + } + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -12553,6 +12613,16 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/svelte-fa": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-4.0.3.tgz", + "integrity": "sha512-saZ8yACM0k9Aexey+2NXU1W0MBosU5lBsRgqFCJKM+Taw7d0HyimPaPAjmvY/Xkyi3UwEYL/Sdu1IZJv/p0Flw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "svelte": "^4.0.0 || ^5.0.0" + } + }, "node_modules/svelte-preprocess": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz", @@ -14199,6 +14269,9 @@ "version": "0.0.1", "dependencies": { "@dagrejs/dagre": "^1.1.4", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@neodrag/svelte": "^2.3.2", "@repo/viz-expr": "*", "@tailwindcss/cli": "^4.0.9", "@tailwindcss/vite": "^4.0.6", @@ -14211,6 +14284,7 @@ "graphology-dag": "^0.4.1", "lodash": "^4.17.21", "lucide-svelte": "^0.477.0", + "phosphor-svelte": "^3.0.1", "runed": "^0.23.3", "tailwind-variants": "^1.0.0", "ts-pattern": "^5.6.1" @@ -14235,6 +14309,7 @@ "publint": "^0.3.2", "svelte": "^5.19.0", "svelte-check": "^4.1.4", + "svelte-fa": "^4.0.3", "svelte-preprocess": "^6.0.3", "tailwindcss": "^4.0.6", "typescript": "^5.7.2", diff --git a/ts-apps/decision-logic-visualizer/package.json b/ts-apps/decision-logic-visualizer/package.json index e79a1203..a808ec03 100644 --- a/ts-apps/decision-logic-visualizer/package.json +++ b/ts-apps/decision-logic-visualizer/package.json @@ -62,6 +62,7 @@ "publint": "^0.3.2", "svelte": "^5.19.0", "svelte-check": "^4.1.4", + "svelte-fa": "^4.0.3", "svelte-preprocess": "^6.0.3", "tailwindcss": "^4.0.6", "typescript": "^5.7.2", @@ -71,6 +72,9 @@ }, "dependencies": { "@dagrejs/dagre": "^1.1.4", + "@fortawesome/free-brands-svg-icons": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@neodrag/svelte": "^2.3.2", "@repo/viz-expr": "*", "@tailwindcss/cli": "^4.0.9", "@tailwindcss/vite": "^4.0.6", @@ -83,6 +87,7 @@ "graphology-dag": "^0.4.1", "lodash": "^4.17.21", "lucide-svelte": "^0.477.0", + "phosphor-svelte": "^3.0.1", "runed": "^0.23.3", "tailwind-variants": "^1.0.0", "ts-pattern": "^5.6.1" diff --git a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte new file mode 100644 index 00000000..38a8cf34 --- /dev/null +++ b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte @@ -0,0 +1,97 @@ + + + + + + + + + + + +
+ Select paths +
+ + + + + + + + + + + +
+ #WhatIf +
+ + + + + + + + + + + + + + + + +
+ Zen mode +
+ + + + + + \ No newline at end of file diff --git a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte index 787d77f9..e620bfc8 100644 --- a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte +++ b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte @@ -9,6 +9,25 @@ } from '$lib/layout-ir/core.js' import Flow from '$lib/displayers/flow/flow.svelte' + import Toolbar from '$lib/displayers/flow/toolbar.svelte' + import { draggable } from "@neodrag/svelte" + import type { DragOptions } from '@neodrag/svelte' + import { divide } from 'lodash' + + let options: DragOptions = { + bounds: 'parent', + handle: '.handle', + onDragStart: ({currentNode}) => { + const handle = currentNode.querySelector('.handle') + handle?.classList.remove('cursor-grab') + handle?.classList.add('cursor-grabbing') + }, + onDragEnd: ({ currentNode }) => { + const handle = currentNode.querySelector('.handle') + handle?.classList.remove('cursor-grabbing') + handle?.classList.add('cursor-grab') + }, + } // TODO: This stuff should just be replaced with the tailwind on hovered classes let isHovered = $state(false) @@ -175,6 +194,16 @@

Decision Logic Visualizer Draft

+ +
+
+ Toolbar +
+
+ +
+
+

Examples of decision logic visualizations, starting from a 'json' of the From 40bd4eb74931686c704c7f4d22184d01014d80bb Mon Sep 17 00:00:00 2001 From: Meowyam Date: Tue, 1 Apr 2025 14:55:35 +0800 Subject: [PATCH 2/6] add hover background for other two icons --- .../src/lib/displayers/flow/toolbar.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte index 38a8cf34..549d9105 100644 --- a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte +++ b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte @@ -48,7 +48,7 @@ @@ -74,12 +74,12 @@ From be5c50edf9313cf8c9309c969c36fcd269eff866 Mon Sep 17 00:00:00 2001 From: Meowyam Date: Tue, 1 Apr 2025 15:00:26 +0800 Subject: [PATCH 3/6] fix names of icons --- .../src/lib/displayers/flow/toolbar.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte index 549d9105..b2b7df33 100644 --- a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte +++ b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte @@ -19,8 +19,8 @@ class="flex items-center gap-x-0.5" > @@ -41,8 +41,8 @@ @@ -72,8 +72,8 @@ class="flex items-center gap-x-0.5" > From 994cad502ce793e20759d61ddf6eb324935f4516 Mon Sep 17 00:00:00 2001 From: Meowyam Date: Tue, 1 Apr 2025 15:17:52 +0800 Subject: [PATCH 4/6] add transition colours for toolbar --- .../src/lib/displayers/flow/toolbar.svelte | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte index b2b7df33..0df8afb9 100644 --- a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte +++ b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte @@ -21,14 +21,14 @@ - +
- +
- +
Date: Tue, 1 Apr 2025 20:06:47 +0800 Subject: [PATCH 5/6] lint and format --- .../src/lib/displayers/flow/toolbar.svelte | 42 +++++++++++-------- .../src/routes/+page.svelte | 9 ++-- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte index 0df8afb9..5c664ae0 100644 --- a/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte +++ b/ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte @@ -1,15 +1,14 @@ - + @@ -28,7 +27,10 @@ - +
- +
- + - + - - - - + + + +
- \ No newline at end of file + diff --git a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte index 7cff4973..6ad99b30 100644 --- a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte +++ b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte @@ -10,14 +10,13 @@ import Flow from '$lib/displayers/flow/flow.svelte' import Toolbar from '$lib/displayers/flow/toolbar.svelte' - import { draggable } from "@neodrag/svelte" + import { draggable } from '@neodrag/svelte' import type { DragOptions } from '@neodrag/svelte' - import { divide } from 'lodash' let options: DragOptions = { bounds: 'parent', handle: '.handle', - onDragStart: ({currentNode}) => { + onDragStart: ({ currentNode }) => { const handle = currentNode.querySelector('.handle') handle?.classList.remove('cursor-grab') handle?.classList.add('cursor-grabbing') @@ -196,7 +195,9 @@

Decision Logic Visualizer Draft

-
+
Toolbar
From a0fb521ef15000ce232e0381763b1a9f55cf2642 Mon Sep 17 00:00:00 2001 From: johsi-k Date: Thu, 3 Apr 2025 16:41:20 +0800 Subject: [PATCH 6/6] remove z-index on toolbar --- .../src/routes/+page.svelte | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte index 6ad99b30..64bba819 100644 --- a/ts-apps/decision-logic-visualizer/src/routes/+page.svelte +++ b/ts-apps/decision-logic-visualizer/src/routes/+page.svelte @@ -194,17 +194,6 @@

Decision Logic Visualizer Draft

-
-
- Toolbar -
-
- -
-
-

Examples of decision logic visualizations, starting from a 'json' of the @@ -245,6 +234,17 @@

+
+
+ Toolbar +
+
+ +
+
+