gemma/graphfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix GraphFX node port layout and previews

Browse Source
This commit is contained in:
Ficik
2026-06-19 10:37:28 +02:00
parent 8c58aaae2b
commit 449a7aa071
4 changed files with 122 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
graphfx-ui/src/components/GraphFxNode.vue
View File

@@ -13,7 +13,7 @@ function typeClass(port: GraphFxPort) {
}
function hasCustomLabel(port: GraphFxPort) {
return port.label && port.label !== port.name
return Boolean(port.label && port.label !== port.name)
}
function labelValue(port: GraphFxPort) {
@@ -121,11 +121,21 @@ function connectedText(port: GraphFxPort) {
<div class="graphfx-node__port-head">
<span class="graphfx-node__port-name">{{ port.name }}</span>
<span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
<span class="graphfx-node__port-type">{{ port.type }}</span>
<span class="graphfx-node__label-slot nodrag" @pointerdown.stop>
<span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
<input
class="graphfx-node__label-inline"
:value="labelValue(port)"
placeholder="label"
title="Input label"
@change="updateLabel('in', port, $event)"
@keydown.stop
/>
</span>
<span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
</div>
<img v-if="port.type === 'Image' && previewUrl('in', port)" class="graphfx-node__image-preview" :src="previewUrl('in', port)" :alt="`${port.name} preview`" />
<img v-if="previewUrl('in', port)" class="graphfx-node__image-preview" :src="previewUrl('in', port)" :alt="`${port.name} preview`" />
<div v-if="port.output" class="graphfx-node__connected-value nodrag" @pointerdown.stop>
<span :title="port.output">← {{ connectedText(port) }}</span>
@@ -175,18 +185,6 @@ function connectedText(port: GraphFxPort) {
@keydown.stop
/>
</template>
<details class="graphfx-node__label-editor nodrag" @pointerdown.stop @click.stop>
<summary title="Edit input label">label</summary>
<input
class="graphfx-node__label-input"
:value="labelValue(port)"
placeholder="optional label"
title="Input label"
@change="updateLabel('in', port, $event)"
@keydown.stop
/>
</details>
</div>
</div>
@@ -200,24 +198,22 @@ function connectedText(port: GraphFxPort) {
:title="`${port.name} · ${port.type}`"
>
<div class="graphfx-node__port-head graphfx-node__port-head--right">
<span class="graphfx-node__port-type">{{ port.type }}</span>
<span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
<span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
<span class="graphfx-node__label-slot nodrag" @pointerdown.stop>
<span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
<input
class="graphfx-node__label-inline"
:value="labelValue(port)"
placeholder="label"
title="Output label"
@change="updateLabel('out', port, $event)"
@keydown.stop
/>
</span>
<span class="graphfx-node__port-name">{{ port.name }}</span>
</div>
<img v-if="port.type === 'Image' && previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" />
<details class="graphfx-node__label-editor nodrag" @pointerdown.stop @click.stop>
<summary title="Edit output label">label</summary>
<input
class="graphfx-node__label-input"
:value="labelValue(port)"
placeholder="optional label"
title="Output label"
@change="updateLabel('out', port, $event)"
@keydown.stop
/>
</details>
<img v-if="previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" />
<Handle
type="source"