Skip to content

Toolbar #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Toolbar #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b2ac192
add photoshop-style toolbar
Meowyam Apr 1, 2025
b6e8a7c
Merge branch 'main' into toolbar
Meowyam Apr 1, 2025
40bd4eb
add hover background for other two icons
Meowyam Apr 1, 2025
be5c50e
fix names of icons
Meowyam Apr 1, 2025
994cad5
add transition colours for toolbar
Meowyam Apr 1, 2025
c0fca9f
lint and format
johsi-k Apr 1, 2025
a0fb521
remove z-index on toolbar
johsi-k Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 76 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions ts-apps/decision-logic-visualizer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -82,6 +86,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"
Expand Down
105 changes: 105 additions & 0 deletions ts-apps/decision-logic-visualizer/src/lib/displayers/flow/toolbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<script lang="ts">
import { Separator, Toolbar, Tooltip } from 'bits-ui'
import Fa from 'svelte-fa'
import { faDiagramProject } from '@fortawesome/free-solid-svg-icons'
import { faVolumeXmark } from '@fortawesome/free-solid-svg-icons'
import { faPersonCircleQuestion } from '@fortawesome/free-solid-svg-icons'

let text = $state(['bold'])
let align = $state('')
</script>

<Toolbar.Root
class="rounded-10px border-gray-700 shadow-mini flex h-12 max-w-max items-center justify-center border px-[4px] py-1"
>
<Toolbar.Group
bind:value={text}
type="multiple"
class="flex items-center gap-x-0.5"
>
<Toolbar.GroupItem
aria-label="select paths"
value="selectPaths"
class="rounded-9px text-foreground/60 hover:bg-yellow-100 active:bg-yellow-300 data-[state=on]:bg-yellow-100 data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10 inline-flex size-10 items-center justify-center transition-all active:scale-[0.98]"
>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger
class="shadow-btn hover:bg-yellow-100 background focus-visible:outline-hidden inline-flex size-10 items-center justify-center group"
>
<Fa
icon={faDiagramProject}
class="size-6 text-current transition-colors duration-300 group-hover:text-sky-700"
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<div
class="rounded-input border-dark-10 bg-gray-500 text-white shadow-popover outline-hidden flex items-center justify-center border p-1 text-sm font-medium"
>
Select paths
</div>
</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</Toolbar.GroupItem>
<Toolbar.GroupItem
aria-label="what if"
value="whatIf"
class="rounded-9px text-foreground/60 hover:bg-yellow-100 active:bg-yellow-300 data-[state=on]:bg-yellow-100 data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10 inline-flex size-10 items-center justify-center transition-all active:scale-[0.98]"
>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger
class="shadow-btn hover:bg-yellow-100 background focus-visible:outline-hidden inline-flex size-10 items-center justify-center group"
>
<Fa
icon={faPersonCircleQuestion}
class="size-6 text-current transition-colors duration-300 group-hover:text-violet-600"
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<div
class="rounded-input border-gray-700 bg-gray-500 text-white shadow-popover outline-hidden flex items-center justify-center border p-1 text-sm font-medium"
>
#WhatIf
</div>
</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</Toolbar.GroupItem>
</Toolbar.Group>

<Separator.Root class="bg-gray-700 -my-1 mx-1 w-[1px] self-stretch" />

<Toolbar.Group
bind:value={align}
type="single"
class="flex items-center gap-x-0.5"
>
<Toolbar.GroupItem
aria-label="zen mode"
value="zenMode"
class="rounded-9px text-foreground/60 hover:bg-yellow-100 active:bg-yellow-300 data-[state=on]:bg-yellow-100 data-[state=on]:text-foreground/80 active:data-[state=on]:bg-dark-10 inline-flex size-10 items-center justify-center transition-all active:scale-[0.98]"
>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger
class="shadow-btn hover:bg-yellow-100 background focus-visible:outline-hidden inline-flex size-10 items-center justify-center group"
>
<Fa
icon={faVolumeXmark}
class="size-6 text-current transition-colors duration-300 group-hover:text-slate-400"
/>
</Tooltip.Trigger>
<Tooltip.Content side="bottom">
<div
class="rounded-input border-dark-10 bg-gray-500 text-white shadow-popover outline-hidden flex items-center justify-center border p-1 text-sm font-medium"
>
Zen mode
</div>
</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</Toolbar.GroupItem>
</Toolbar.Group>
</Toolbar.Root>
30 changes: 30 additions & 0 deletions ts-apps/decision-logic-visualizer/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,24 @@
} 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'

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)
Expand Down Expand Up @@ -175,6 +193,7 @@
</script>

<h1 class="text-4xl font-bold text-center">Decision Logic Visualizer Draft</h1>

<section class="flex items-center justify-center my-8">
<h2 class="text-2xl italic text-center text-gray-700 w-3/4">
Examples of decision logic visualizations, starting from a 'json' of the
Expand Down Expand Up @@ -215,6 +234,17 @@
</section>
</section>

<div use:draggable={options} class="absolute top-5 left-5">
<div
class="handle w-full h-8 bg-gray-700 text-gray-100 cursor-grab text-center text-sm"
>
Toolbar
</div>
<div class="bg-white">
<Toolbar />
</div>
</div>

<style>
.viz-container-with-height {
/* Seems best to set some kind of viewport-based height in the 'outermost' containing div */
Expand Down