ui i like most
This commit is contained in:
itten
@@ -1,30 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { Handle, Position } from '@vue-flow/core'
|
||||
import { Handle, Position, useVueFlow } from '@vue-flow/core'
|
||||
import type { NodeProps } from '@vue-flow/core'
|
||||
import type { StudioNodeData } from '../../types'
|
||||
import { NODE_TYPES } from '../../nodeTypes'
|
||||
|
||||
const props = defineProps<NodeProps<StudioNodeData>>()
|
||||
const { removeNodes } = useVueFlow()
|
||||
|
||||
const typeDef = computed(() => NODE_TYPES[props.data.nodeType] ?? null)
|
||||
const inputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'in') ?? [])
|
||||
const outputs = computed(() => typeDef.value?.ports.filter(p => p.direction === 'out') ?? [])
|
||||
|
||||
const stateBadge = computed(() => {
|
||||
const isSource = computed(() => outputs.value.length > 0)
|
||||
|
||||
const iconMap: Record<string, string> = {
|
||||
testpattern: '▦',
|
||||
ndiin: '◬',
|
||||
decklinkin: '◧',
|
||||
videoin: '▣',
|
||||
ndiout: '◬',
|
||||
decklinkout: '◧',
|
||||
fakesink: '◯',
|
||||
}
|
||||
|
||||
const nodeIcon = computed(() => iconMap[props.data.nodeType] ?? '◯')
|
||||
|
||||
const stateText = computed(() => {
|
||||
switch (props.data.serverState) {
|
||||
case 'running': return { text: 'RUN', cls: 'badge-running' }
|
||||
case 'stopped': return { text: 'STOP', cls: 'badge-stopped' }
|
||||
case 'crashed': return { text: 'ERR', cls: 'badge-crashed' }
|
||||
default: return null
|
||||
case 'running': return 'RUN'
|
||||
case 'stopped': return 'STOP'
|
||||
case 'crashed': return 'ERR'
|
||||
default: return ''
|
||||
}
|
||||
})
|
||||
|
||||
// Fixed layout constants (keep in sync with CSS)
|
||||
const HEADER_H = 36 // px — node-header height
|
||||
const PORT_H = 26 // px — port-row height
|
||||
const HEADER_H = 38
|
||||
const PORT_H = 28
|
||||
|
||||
// Handle is centered on its port row
|
||||
function handleTopPx(index: number): string {
|
||||
return `${HEADER_H + PORT_H * index + PORT_H / 2}px`
|
||||
}
|
||||
@@ -32,6 +45,19 @@ function handleTopPx(index: number): string {
|
||||
function setParam(key: string, value: string | number) {
|
||||
props.data.params[key] = value
|
||||
}
|
||||
|
||||
const handleFileChange = (key: string, event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (target.files && target.files.length > 0) {
|
||||
const file = target.files[0].name
|
||||
const basePath = '/home/itten/test-vid/'
|
||||
setParam(key, basePath + file)
|
||||
}
|
||||
}
|
||||
|
||||
function onDeleteNode() {
|
||||
removeNodes([props.id])
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -42,7 +68,7 @@ function setParam(key: string, value: string | number) {
|
||||
'node-crashed': data.serverState === 'crashed',
|
||||
}"
|
||||
>
|
||||
<!-- Input handles (left) — positioned to match port rows -->
|
||||
<!-- Input handles -->
|
||||
<Handle
|
||||
v-for="(port, i) in inputs"
|
||||
:key="port.id"
|
||||
@@ -55,22 +81,22 @@ function setParam(key: string, value: string | number) {
|
||||
|
||||
<!-- Header -->
|
||||
<div class="node-header">
|
||||
<span class="node-icon">{{ nodeIcon }}</span>
|
||||
<span class="node-label">{{ typeDef?.label ?? data.nodeType }}</span>
|
||||
<span v-if="stateBadge" :class="['badge', stateBadge.cls]">{{ stateBadge.text }}</span>
|
||||
<span v-if="stateText" :class="['state', `state-${data.serverState}`]">{{ stateText }}</span>
|
||||
<button class="node-close" @click.stop="onDeleteNode">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Port rows -->
|
||||
<div class="node-ports">
|
||||
<!-- Ports -->
|
||||
<div v-if="inputs.length || outputs.length" class="node-ports">
|
||||
<div class="ports-side ports-left">
|
||||
<div v-for="port in inputs" :key="port.id" class="port-row">
|
||||
<span :class="`port-dot dot-${port.kind}`" />
|
||||
<span class="port-name">{{ port.kind }}</span>
|
||||
<span :class="['port-name', `port-${port.kind}`]">{{ port.kind }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ports-side ports-right">
|
||||
<div v-for="port in outputs" :key="port.id" class="port-row port-row-right">
|
||||
<span class="port-name">{{ port.kind }}</span>
|
||||
<span :class="`port-dot dot-${port.kind}`" />
|
||||
<span :class="['port-name', `port-${port.kind}`]">{{ port.kind }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,7 +104,7 @@ function setParam(key: string, value: string | number) {
|
||||
<!-- Params -->
|
||||
<div v-if="typeDef && typeDef.params.length" class="node-body">
|
||||
<div v-for="param in typeDef.params" :key="param.key" class="param-row">
|
||||
<label class="param-label">{{ param.label }}</label>
|
||||
<label class="param-label">{{ param.label.toUpperCase() }}</label>
|
||||
<select
|
||||
v-if="param.type === 'select'"
|
||||
class="param-input"
|
||||
@@ -98,13 +124,19 @@ function setParam(key: string, value: string | number) {
|
||||
:max="param.max"
|
||||
@change="setParam(param.key, Number(($event.target as HTMLInputElement).value))"
|
||||
/>
|
||||
<input
|
||||
v-else-if="param.type === 'input'"
|
||||
type="file"
|
||||
class="param-input-file"
|
||||
@change="handleFileChange(param.key, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer: node id -->
|
||||
<!-- Footer -->
|
||||
<div class="node-id">{{ id }}</div>
|
||||
|
||||
<!-- Output handles (right) — positioned to match port rows -->
|
||||
<!-- Output handles -->
|
||||
<Handle
|
||||
v-for="(port, i) in outputs"
|
||||
:key="port.id"
|
||||
@@ -118,62 +150,90 @@ function setParam(key: string, value: string | number) {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Keep HEADER_H and PORT_H in sync with the JS constants above */
|
||||
.studio-node {
|
||||
background: #1e2030;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 8px;
|
||||
min-width: 190px;
|
||||
font-size: 12px;
|
||||
color: #cdd6f4;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
background: var(--bg-panel-1);
|
||||
border: 1px solid var(--border-thin);
|
||||
border-radius: 0;
|
||||
min-width: var(--node-min-width);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-primary);
|
||||
box-shadow: none;
|
||||
transition: border-color var(--dur-base) var(--ease);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.studio-node.node-running {
|
||||
border-color: #a6e3a1;
|
||||
box-shadow: 0 0 0 1px #a6e3a1, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
.node-running {
|
||||
border-color: var(--text-primary);
|
||||
}
|
||||
|
||||
.studio-node.node-crashed {
|
||||
border-color: #f38ba8;
|
||||
box-shadow: 0 0 0 1px #f38ba8, 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
.node-crashed {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* HEADER_H = 36px */
|
||||
/* ── Header ── */
|
||||
.node-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
height: var(--node-header-h);
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
border-bottom: 1px solid #383a4e;
|
||||
gap: 6px;
|
||||
border-bottom: 1px solid var(--border-thin);
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #89b4fa;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
color: var(--text-primary);
|
||||
text-transform: uppercase;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
.state {
|
||||
font-size: 8px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.badge-running { background: #a6e3a1; color: #1e2030; }
|
||||
.badge-stopped { background: #6c7086; color: #cdd6f4; }
|
||||
.badge-crashed { background: #f38ba8; color: #1e2030; }
|
||||
|
||||
/* PORT_H = 26px per row */
|
||||
.state-running { color: var(--text-primary); }
|
||||
.state-stopped { color: var(--text-muted); }
|
||||
.state-crashed { color: var(--accent); }
|
||||
|
||||
.node-close {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-thin);
|
||||
color: var(--text-muted);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
transition: border-color var(--dur-fast), color var(--dur-fast);
|
||||
}
|
||||
|
||||
.node-close:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── Port rows ── */
|
||||
.node-ports {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #2a2b3d;
|
||||
border-bottom: 1px solid var(--border-thin);
|
||||
}
|
||||
|
||||
.ports-side {
|
||||
@@ -184,9 +244,8 @@ function setParam(key: string, value: string | number) {
|
||||
.port-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 26px;
|
||||
padding: 0 8px;
|
||||
height: var(--node-port-h);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.port-row-right {
|
||||
@@ -194,30 +253,26 @@ function setParam(key: string, value: string | number) {
|
||||
}
|
||||
|
||||
.port-name {
|
||||
font-size: 10px;
|
||||
color: #6c7086;
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.port-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
.port-video { color: var(--text-primary); }
|
||||
.port-audio {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dot-video { background: #89b4fa; }
|
||||
.dot-audio { background: #fab387; }
|
||||
|
||||
/* Params */
|
||||
/* ── Params ── */
|
||||
.node-body {
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-bottom: 1px solid #2a2b3d;
|
||||
border-bottom: 1px solid var(--border-thin);
|
||||
background: var(--bg-base);
|
||||
}
|
||||
|
||||
.param-row {
|
||||
@@ -227,46 +282,70 @@ function setParam(key: string, value: string | number) {
|
||||
}
|
||||
|
||||
.param-label {
|
||||
color: #9399b2;
|
||||
min-width: 70px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
min-width: 68px;
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
flex: 1;
|
||||
background: #11111b;
|
||||
border: 1px solid #383a4e;
|
||||
border-radius: 4px;
|
||||
color: #cdd6f4;
|
||||
font-size: 11px;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border-thin);
|
||||
border-radius: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 10px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 3px 6px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.param-input:focus {
|
||||
border-color: #89b4fa;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.param-input option {
|
||||
background: var(--bg-panel-1);
|
||||
}
|
||||
|
||||
.param-input-file {
|
||||
flex: 1;
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--border-thin);
|
||||
border-radius: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 9px;
|
||||
font-family: var(--font-mono);
|
||||
padding: 2px 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.node-id {
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
color: #45475a;
|
||||
font-size: 8px;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Handles — use :deep() to pierce Vue Flow's DOM */
|
||||
/* ── Handles — circular sockets ── */
|
||||
:deep(.handle-video) {
|
||||
background: #89b4fa !important;
|
||||
border-color: #89b4fa !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
background: var(--text-primary) !important;
|
||||
border-color: var(--bg-base) !important;
|
||||
width: var(--handle-size) !important;
|
||||
height: var(--handle-size) !important;
|
||||
}
|
||||
|
||||
:deep(.handle-audio) {
|
||||
background: #fab387 !important;
|
||||
border-color: #fab387 !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--text-secondary) !important;
|
||||
width: var(--handle-size) !important;
|
||||
height: var(--handle-size) !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user