feat: add theming support
This commit is contained in:
@ -4,6 +4,7 @@
|
||||
import NodeHeader from "./NodeHeader.svelte";
|
||||
import NodeParameter from "./NodeParameter.svelte";
|
||||
import { activeNodeId, selectedNodes } from "../graph/stores.js";
|
||||
import { colors } from "../graph/stores";
|
||||
import { T } from "@threlte/core";
|
||||
import { Color, type Mesh } from "three";
|
||||
import NodeFrag from "./Node.frag";
|
||||
@ -25,7 +26,6 @@
|
||||
|
||||
const zOffset = (node.tmp?.random || 0) * 0.5;
|
||||
const zLimit = 2 - zOffset;
|
||||
$: visible = inView && z > zLimit;
|
||||
|
||||
const parameters = Object.entries(type?.inputs || {})
|
||||
.filter((p) => p[1].type !== "seed")
|
||||
@ -49,13 +49,6 @@
|
||||
node.tmp.mesh = meshRef;
|
||||
updateNodePosition(node);
|
||||
});
|
||||
|
||||
const colorDark = new Color();
|
||||
colorDark.setStyle("#151515");
|
||||
//colorDark.();
|
||||
|
||||
const colorBright = new Color("#202020");
|
||||
//colorBright.convertLinearToSRGB();
|
||||
</script>
|
||||
|
||||
<T.Mesh
|
||||
@ -72,8 +65,8 @@
|
||||
fragmentShader={NodeFrag}
|
||||
transparent
|
||||
uniforms={{
|
||||
uColorBright: { value: colorBright },
|
||||
uColorDark: { value: colorDark },
|
||||
uColorBright: { value: new Color("#171717") },
|
||||
uColorDark: { value: new Color("#151515") },
|
||||
uSelectedColor: { value: new Color("#9d5f28") },
|
||||
uActiveColor: { value: new Color("white") },
|
||||
uSelected: { value: false },
|
||||
@ -84,6 +77,8 @@
|
||||
}}
|
||||
uniforms.uSelected.value={isSelected}
|
||||
uniforms.uActive.value={isActive}
|
||||
uniforms.uColorBright.value={$colors.layer2}
|
||||
uniforms.uColorDark.value={$colors.layer1}
|
||||
uniforms.uStrokeWidth.value={(7 - z) / 3}
|
||||
/>
|
||||
</T.Mesh>
|
||||
@ -122,7 +117,7 @@
|
||||
z-index: 1;
|
||||
opacity: calc((var(--cz) - 2.5) / 3.5);
|
||||
font-weight: 300;
|
||||
--stroke: var(--background-color-lighter);
|
||||
--stroke: var(--outline);
|
||||
--stroke-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,129 +1,137 @@
|
||||
<script lang="ts">
|
||||
import { createNodePath } from '../helpers/index.js';
|
||||
import type { Node, Socket } from '@nodes/types';
|
||||
import { getContext } from 'svelte';
|
||||
import { createNodePath } from "../helpers/index.js";
|
||||
import type { Node, Socket } from "@nodes/types";
|
||||
import { getContext } from "svelte";
|
||||
|
||||
export let node: Node;
|
||||
export let node: Node;
|
||||
|
||||
const setDownSocket = getContext<(socket: Socket) => void>('setDownSocket');
|
||||
const getSocketPosition =
|
||||
getContext<(node: Node, index: number) => [number, number]>('getSocketPosition');
|
||||
const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
|
||||
const getSocketPosition =
|
||||
getContext<(node: Node, index: number) => [number, number]>(
|
||||
"getSocketPosition",
|
||||
);
|
||||
|
||||
function handleMouseDown(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
setDownSocket({
|
||||
node,
|
||||
index: 0,
|
||||
position: getSocketPosition(node, 0)
|
||||
});
|
||||
}
|
||||
function handleMouseDown(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
setDownSocket({
|
||||
node,
|
||||
index: 0,
|
||||
position: getSocketPosition(node, 0),
|
||||
});
|
||||
}
|
||||
|
||||
const cornerTop = 10;
|
||||
const rightBump = !!node?.tmp?.type?.outputs?.length;
|
||||
const aspectRatio = 0.25;
|
||||
const cornerTop = 10;
|
||||
const rightBump = !!node?.tmp?.type?.outputs?.length;
|
||||
const aspectRatio = 0.25;
|
||||
|
||||
const path = createNodePath({
|
||||
depth: 4,
|
||||
height: 24,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio
|
||||
});
|
||||
const pathDisabled = createNodePath({
|
||||
depth: 0,
|
||||
height: 15,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio
|
||||
});
|
||||
const pathHover = createNodePath({
|
||||
depth: 5,
|
||||
height: 30,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio
|
||||
});
|
||||
const path = createNodePath({
|
||||
depth: 4,
|
||||
height: 24,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio,
|
||||
});
|
||||
const pathDisabled = createNodePath({
|
||||
depth: 0,
|
||||
height: 15,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio,
|
||||
});
|
||||
const pathHover = createNodePath({
|
||||
depth: 5,
|
||||
height: 30,
|
||||
y: 50,
|
||||
cornerTop,
|
||||
rightBump,
|
||||
aspectRatio,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="wrapper" data-node-id={node.id}>
|
||||
<div class="content">
|
||||
{node.type.split('/').pop()}
|
||||
</div>
|
||||
<div class="click-target" role="button" tabindex="0" on:mousedown={handleMouseDown} />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
preserveAspectRatio="none"
|
||||
style={`
|
||||
<div class="content">
|
||||
{node.type.split("/").pop()}
|
||||
</div>
|
||||
<div
|
||||
class="click-target"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:mousedown={handleMouseDown}
|
||||
/>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 100 100"
|
||||
width="100"
|
||||
height="100"
|
||||
preserveAspectRatio="none"
|
||||
style={`
|
||||
--path: path("${path}");
|
||||
--hover-path: path("${pathHover}");
|
||||
`}
|
||||
>
|
||||
<path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"></path>
|
||||
</svg>
|
||||
>
|
||||
<path vector-effect="non-scaling-stroke" stroke="white" stroke-width="0.1"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.click-target {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
/* background: red; */
|
||||
/* opacity: 0.2; */
|
||||
}
|
||||
.click-target {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
/* background: red; */
|
||||
/* opacity: 0.2; */
|
||||
}
|
||||
|
||||
.click-target:hover + svg path {
|
||||
d: var(--hover-path);
|
||||
}
|
||||
.click-target:hover + svg path {
|
||||
d: var(--hover-path);
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
svg path {
|
||||
stroke-width: 0.2px;
|
||||
transition:
|
||||
d 0.3s ease,
|
||||
fill 0.3s ease;
|
||||
fill: var(--background-color-lighter);
|
||||
stroke: var(--stroke);
|
||||
stroke-width: var(--stroke-width);
|
||||
d: var(--path);
|
||||
}
|
||||
svg path {
|
||||
stroke-width: 0.2px;
|
||||
transition:
|
||||
d 0.3s ease,
|
||||
fill 0.3s ease;
|
||||
fill: var(--layer-2);
|
||||
stroke: var(--stroke);
|
||||
stroke-width: var(--stroke-width);
|
||||
d: var(--path);
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg:hover path {
|
||||
d: var(--hover-path) !important;
|
||||
}
|
||||
svg:hover path {
|
||||
d: var(--hover-path) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -175,7 +175,7 @@
|
||||
transition:
|
||||
d 0.3s ease,
|
||||
fill 0.3s ease;
|
||||
fill: var(--background-color);
|
||||
fill: var(--layer-1);
|
||||
stroke: var(--stroke);
|
||||
stroke-width: var(--stroke-width);
|
||||
d: var(--path);
|
||||
|
||||
Reference in New Issue
Block a user