From 9b762992723e717b584f9e21cc9771ed690a9a11 Mon Sep 17 00:00:00 2001 From: Max Richter Date: Thu, 14 Mar 2024 16:28:38 +0100 Subject: [PATCH] feat: add theming basics --- frontend/src/app.html | 21 +-- frontend/src/lib/components/Camera.svelte | 7 +- frontend/src/lib/components/Node.svelte | 14 +- frontend/src/lib/components/NodeHeader.svelte | 12 +- .../src/lib/components/NodeParameter.svelte | 34 +++-- .../lib/components/background/Background.frag | 26 ++-- .../components/background/Background.svelte | 37 ++---- frontend/src/lib/components/edges/Edge.svelte | 14 +- .../src/lib/components/graph/Graph.svelte | 121 ++++++++++-------- .../src/lib/components/graph/GraphView.svelte | 10 +- frontend/src/lib/components/graph/stores.ts | 42 +++++- .../src/lib/elements/Checkbox.story.svelte | 17 +++ frontend/src/lib/elements/Checkbox.svelte | 58 +++++++++ frontend/src/lib/elements/Float.svelte | 0 frontend/src/lib/elements/Integer.svelte | 0 frontend/src/lib/elements/Select.svelte | 0 frontend/src/lib/graph-manager.ts | 8 +- frontend/src/lib/helpers.ts | 10 +- frontend/src/routes/+page.svelte | 2 +- frontend/src/routes/app.css | 41 +++--- 20 files changed, 307 insertions(+), 167 deletions(-) create mode 100644 frontend/src/lib/elements/Checkbox.story.svelte create mode 100644 frontend/src/lib/elements/Checkbox.svelte create mode 100644 frontend/src/lib/elements/Float.svelte create mode 100644 frontend/src/lib/elements/Integer.svelte create mode 100644 frontend/src/lib/elements/Select.svelte diff --git a/frontend/src/app.html b/frontend/src/app.html index e23bea2..e106581 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -1,12 +1,15 @@ - - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + + + %sveltekit.head% + + + +
%sveltekit.body%
+ + diff --git a/frontend/src/lib/components/Camera.svelte b/frontend/src/lib/components/Camera.svelte index a41c3b5..04793e8 100644 --- a/frontend/src/lib/components/Camera.svelte +++ b/frontend/src/lib/components/Camera.svelte @@ -3,12 +3,13 @@ import { OrbitControls } from "@threlte/extras"; import { onMount } from "svelte"; import { MOUSE, type OrthographicCamera } from "three"; + import type { OrbitControls as OrbitControlsType } from "three/examples/jsm/Addons.js"; export let camera: OrthographicCamera | undefined = undefined; export let maxZoom = 150; export let minZoom = 4; - let controls: OrbitControls | undefined = undefined; + export let controls: OrbitControlsType | undefined = undefined; export const position: [number, number, number] = [0, 1, 0]; @@ -56,8 +57,8 @@ import type { Node } from "$lib/types"; - import { getContext, onMount } from "svelte"; + import { getContext } from "svelte"; import NodeHeader from "./NodeHeader.svelte"; import NodeParameter from "./NodeParameter.svelte"; import { activeNodeId, selectedNodes } from "./graph/stores"; @@ -38,7 +38,6 @@ @@ -51,25 +50,24 @@ box-sizing: border-box; user-select: none !important; cursor: pointer; - width: 100px; + width: 200px; color: var(--text-color); transform: translate3d(var(--nx), var(--ny), 0); z-index: 1; font-weight: 300; - font-size: 0.5em; display: none; - --stroke: #777; - --stroke-width: 0.1px; + --stroke: var(--background-color-lighter); + --stroke-width: 2px; } .node.active { --stroke: white; - --stroke-width: 0.3px; + --stroke-width: 1px; } .node.selected { --stroke: #f2be90; - --stroke-width: 0.2px; + --stroke-width: 1px; } .node.in-view { diff --git a/frontend/src/lib/components/NodeHeader.svelte b/frontend/src/lib/components/NodeHeader.svelte index bf1c521..207627d 100644 --- a/frontend/src/lib/components/NodeHeader.svelte +++ b/frontend/src/lib/components/NodeHeader.svelte @@ -81,7 +81,7 @@ .wrapper { position: relative; width: 100%; - height: 25px; + height: 50px; } .click-target { @@ -89,8 +89,8 @@ right: 0px; top: 50%; transform: translateX(50%) translateY(-50%); - height: 15px; - width: 15px; + height: 30px; + width: 30px; z-index: 100; border-radius: 50%; /* background: red; */ @@ -114,7 +114,9 @@ svg path { stroke-width: 0.2px; - transition: 0.2s; + transition: + d 0.3s ease, + fill 0.3s ease; fill: var(--background-color-lighter); stroke: var(--stroke); stroke-width: var(--stroke-width); @@ -125,7 +127,7 @@ font-size: 1em; display: flex; align-items: center; - padding-left: 5px; + padding-left: 20px; height: 100%; } diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte index 918565c..09c2288 100644 --- a/frontend/src/lib/components/NodeParameter.svelte +++ b/frontend/src/lib/components/NodeParameter.svelte @@ -47,9 +47,9 @@ aspectRatio, }); const pathHover = createNodePath({ - depth: 8, - height: 24, - y: 50, + depth: 6, + height: 18, + y: 50.5, cornerBottom, leftBump, aspectRatio, @@ -102,7 +102,7 @@ .wrapper { position: relative; width: 100%; - height: 50px; + height: 100px; transform: translateY(-0.5px); } @@ -116,13 +116,13 @@ } .small.target { - width: 15px; - height: 15px; + width: 30px; + height: 30px; } .large.target { - width: 30px; - height: 30px; + width: 60px; + height: 60px; cursor: unset; pointer-events: none; } @@ -133,14 +133,13 @@ .content { position: relative; - padding: 2px 5px; + padding: 10px 20px; display: flex; flex-direction: column; height: 100%; justify-content: space-around; box-sizing: border-box; - opacity: calc((2 * var(--cz)) / 150 - 0.5); - opacity: calc((var(--cz) - 10) / 20); + opacity: var(--input-opacity); } :global(.zoom-small) .content { @@ -150,14 +149,11 @@ .input { width: 100%; box-sizing: border-box; - border-radius: 2px; + border-radius: 3px; font-size: 1em; - padding: 2px 2px; + padding: 10px; background: #111; - } - - label { - font-size: 1em; + background: var(--background-color-lighter); } svg { @@ -172,7 +168,9 @@ } svg path { - transition: 0.2s; + transition: + d 0.3s ease, + fill 0.3s ease; fill: var(--background-color); stroke: var(--stroke); stroke-width: var(--stroke-width); diff --git a/frontend/src/lib/components/background/Background.frag b/frontend/src/lib/components/background/Background.frag index d6461df..c00ed9a 100644 --- a/frontend/src/lib/components/background/Background.frag +++ b/frontend/src/lib/components/background/Background.frag @@ -4,13 +4,10 @@ varying vec2 vUv; const float PI = 3.14159265359; -uniform float width; -uniform float height; -uniform float cx; -uniform float cy; -uniform float cz; -uniform float minZ; -uniform float maxZ; +uniform vec2 dimensions; +uniform vec3 camPos; +uniform vec2 zoomLimits; +uniform vec3 backgroundColor; float grid(float x, float y, float divisions, float thickness) { x = fract(x * divisions); @@ -47,6 +44,17 @@ float lerp(float a, float b,float t) { } void main(void) { + + float cx = camPos.x; + float cy = camPos.y; + float cz = camPos.z; + + float width = dimensions.x; + float height = dimensions.y; + + float minZ = zoomLimits.x; + float maxZ = zoomLimits.y; + float divisions = 0.1/cz; float thickness = 0.05/cz; float delta = 0.1 / 2.0; @@ -84,7 +92,7 @@ void main(void) { float c = mix(large, small, min(nz*2.0+0.05, 1.0)); c = mix(c, xsmall, max(min((nz-0.3)/0.7, 1.0), 0.0)); - //c = xsmall; + vec3 color = mix(backgroundColor, vec3(1.0), c*0.5); - gl_FragColor = vec4(c, c, c, 1.0); + gl_FragColor = vec4(color, 1.0); } diff --git a/frontend/src/lib/components/background/Background.svelte b/frontend/src/lib/components/background/Background.svelte index d6ff2db..334d37d 100644 --- a/frontend/src/lib/components/background/Background.svelte +++ b/frontend/src/lib/components/background/Background.svelte @@ -1,9 +1,10 @@ - + + - + diff --git a/frontend/src/lib/components/graph/GraphView.svelte b/frontend/src/lib/components/graph/GraphView.svelte index 5261864..c8b248d 100644 --- a/frontend/src/lib/components/graph/GraphView.svelte +++ b/frontend/src/lib/components/graph/GraphView.svelte @@ -1,11 +1,11 @@ + + +
+ +
+ + + diff --git a/frontend/src/lib/elements/Checkbox.svelte b/frontend/src/lib/elements/Checkbox.svelte new file mode 100644 index 0000000..4f7e838 --- /dev/null +++ b/frontend/src/lib/elements/Checkbox.svelte @@ -0,0 +1,58 @@ + + + + + diff --git a/frontend/src/lib/elements/Float.svelte b/frontend/src/lib/elements/Float.svelte new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/lib/elements/Integer.svelte b/frontend/src/lib/elements/Integer.svelte new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/lib/elements/Select.svelte b/frontend/src/lib/elements/Select.svelte new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/lib/graph-manager.ts b/frontend/src/lib/graph-manager.ts index 6344ba2..3dc844c 100644 --- a/frontend/src/lib/graph-manager.ts +++ b/frontend/src/lib/graph-manager.ts @@ -319,8 +319,8 @@ export class GraphManager { visible: false, }, position: { - x: x * 15, - y: y * 20, + x: x * 30, + y: y * 40, }, props: i == 0 ? { value: 0 } : {}, type: i == 0 ? "input/float" : "math", @@ -335,8 +335,8 @@ export class GraphManager { visible: false, }, position: { - x: width * 15, - y: (height - 1) * 20, + x: width * 30, + y: (height - 1) * 40, }, type: "output", props: {}, diff --git a/frontend/src/lib/helpers.ts b/frontend/src/lib/helpers.ts index 9c53461..47e4d3e 100644 --- a/frontend/src/lib/helpers.ts +++ b/frontend/src/lib/helpers.ts @@ -61,4 +61,12 @@ export function createNodePath({ : ` H0` } Z`.replace(/\s+/g, " "); - } +} + +export const debounce = (fn: Function, ms = 300) => { + let timeoutId: ReturnType; + return function (this: any, ...args: any[]) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => fn.apply(this, args), ms); + }; +}; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 80a15c5..c1f4ea5 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -37,7 +37,7 @@
- + diff --git a/frontend/src/routes/app.css b/frontend/src/routes/app.css index adde2c5..d1123ae 100644 --- a/frontend/src/routes/app.css +++ b/frontend/src/routes/app.css @@ -23,28 +23,6 @@ :root { font-family: 'Fira Code', monospace; - /* Colors */ - --primary-color: #007bff; - /* Primary brand color */ - --secondary-color: #6c757d; - /* Secondary color */ - --background-color: #151515; - --background-color-lightest: #ffffff; - --background-color-lighter: #202020; - --background-color-dark: #dae0e5; - --background-color-darkest: #c8d1d7; - /* Background color */ - --text-color: #aeaeae; - /* Text color */ - --accent-color: #ffc107; - /* Accent color */ - - /* Typography */ - --font-family: Arial, sans-serif; - --font-size-base: 16px; - /* Base font size */ - --line-height-base: 1.5; - /* Base line height */ /* Spacing */ --spacing-xs: 4px; @@ -62,4 +40,23 @@ body { overflow: hidden; + + /* Secondary color */ + --secondary-color: #6c757d; + /* Background color */ + --background-color-lighter: #202020; + --background-color: #151515; + --background-color-darker: #101010; + --text-color: #aeaeae; } + +body.theme-catppuccin { + --text-color: #CDD6F4; + --background-color-lighter: #313244; + --background-color: #1E1E2E; + --background-color-darker: #11111b; +} + +/* canvas { */ +/* display: none !important; */ +/* } */