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

fix: correctly highlight possible outputs

Browse Source
This commit is contained in:
max_richter
2026-02-12 23:37:42 +01:00
parent 12ff9c1518
commit 144e8cc797
2 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,9 +45,16 @@
aspectRatio aspectRatio
}) })
); );
const socketId = $derived(`${node.id}-${0}`);
</script> </script>
<div class="wrapper" data-node-id={node.id} data-node-type={node.type}> <div
class="wrapper"
data-node-id={node.id}
data-node-type={node.type}
class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
>
<div class="content"> <div class="content">
{#if appSettings.value.debug.advancedMode} {#if appSettings.value.debug.advancedMode}
<span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span> <span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
@@ -55,7 +62,7 @@
{node.type.split('/').pop()} {node.type.split('/').pop()}
</div> </div>
<div <div
class="click-target" class="target"
role="button" role="button"
tabindex="0" tabindex="0"
onmousedown={handleMouseDown} onmousedown={handleMouseDown}
@@ -83,7 +90,20 @@
height: 50px; height: 50px;
} }
.click-target { .possible-socket .target::before {
content: "";
position: absolute;
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;
z-index: -10;
}
.target {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 50%; top: 50%;
@@ -94,7 +114,7 @@
border-radius: 50%; border-radius: 50%;
} }
.click-target:hover + svg path { .target:hover + svg path {
d: var(--hover-path); d: var(--hover-path);
} }

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

@@ -120,9 +120,16 @@
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
} }
.possible-socket .target { .possible-socket .target::before {
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); content: "";
background-color: rgba(255, 255, 255, 0.2); position: absolute;
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;
z-index: -10; z-index: -10;
} }
@@ -132,11 +139,12 @@
.content { .content {
position: relative; position: relative;
padding: 10px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-inline: 20px;
height: 100%; height: 100%;
justify-content: space-around; justify-content: center;
gap: 10px;
box-sizing: border-box; box-sizing: border-box;
} }