max/nodarium
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 5 Wiki Activity

feat: add color to sockets
Some checks failed
🚀 Lint & Test & Deploy / release (push) Failing after 3m5s
Details

Browse Source 
Closes #34
This commit is contained in:
max_richter
2026-02-13 00:52:07 +01:00
parent 4c7b03dfb8
commit c1ae70282c
8 changed files with 135 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/lib/graph-interface/node/NodeHeader.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { appSettings } from '$lib/settings/app-settings.svelte';
import type { NodeInstance } from '@nodarium/types';
import type { NodeInstance, Socket } from '@nodarium/types';
import { getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers/index.js';
import { getSocketPosition } from '../helpers/nodeHelpers';
@@ -47,12 +47,23 @@
);
const socketId = $derived(`${node.id}-${0}`);
function getSocketType(s: Socket | null) {
if (!s) return 'unknown';
if (typeof s.index === 'string') {
return s.node.state.type?.inputs?.[s.index].type || 'unknown';
}
return s.node.state.type?.outputs?.[s.index] || 'unknown';
}
const socketType = $derived(getSocketType(graphState.activeSocket));
const hoverColor = $derived(graphState.colors.getColor(socketType));
</script>
<div
class="wrapper"
data-node-id={node.id}
data-node-type={node.type}
style:--socket-color={hoverColor}
class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
>
<div class="content">
@@ -96,10 +107,10 @@
width: 30px;
height: 30px;
border-radius: 100%;
box-shadow: 0px 0px 10px var(--color-layer-3);
background-color: var(--color-layer-3);
outline: solid thin white;
opacity: 0.2;
box-shadow: 0px 0px 10px var(--socket-color);
background-color: var(--socket-color);
outline: solid thin var(--socket-color);
opacity: 0.7;
z-index: -10;
}

28
app/src/lib/graph-interface/node/NodeParameter.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { NodeInput, NodeInstance } from '@nodarium/types';
import type { NodeInput, NodeInstance, Socket } from '@nodarium/types';
import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers';
import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
@@ -60,6 +60,17 @@
aspectRatio
})
);
function getSocketType(s: Socket | null) {
if (!s) return 'unknown';
if (typeof s.index === 'string') {
return s.node.state.type?.inputs?.[s.index].type || 'unknown';
}
return s.node.state.type?.outputs?.[s.index] || 'unknown';
}
const socketType = $derived(getSocketType(graphState.activeSocket));
const hoverColor = $derived(graphState.colors.getColor(socketType));
</script>
<div
@@ -67,6 +78,7 @@
data-node-type={node.type}
data-node-input={id}
style:height="{height}px"
style:--socket-color={hoverColor}
class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
>
{#key id && graphId}
@@ -95,10 +107,8 @@
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
preserveAspectRatio="none"
style={`
--path: path("${path}");
--hover-path: path("${pathHover}");
`}
style:--path={`path("${path}")`}
style:--hover-path={`path("${pathHover}")`}
>
<path vector-effect="non-scaling-stroke"></path>
</svg>
@@ -126,10 +136,10 @@
width: 30px;
height: 30px;
border-radius: 100%;
box-shadow: 0px 0px 10px var(--color-layer-3);
background-color: var(--color-layer-3);
outline: solid thin white;
opacity: 0.2;
box-shadow: 0px 0px 10px var(--socket-color);
background-color: var(--socket-color);
outline: solid thin var(--socket-color);
opacity: 0.5;
z-index: -10;
}