Handles fix

src/components/nodes/StudioNode.vue

@@ -8,7 +8,6 @@ import { NODE_TYPES } from '../../nodeTypes'
 const props = defineProps<NodeProps<StudioNodeData>>()
 
 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') ?? [])
 
@@ -21,22 +20,37 @@ const stateBadge = computed(() => {
   }
 })
 
-// Update a param value; Vue Flow tracks node data reactively
+// Fixed layout constants (keep in sync with CSS)
+const HEADER_H  = 36  // px — node-header height
+const PORT_H    = 26  // px — port-row height
+
+// Handle is centered on its port row
+function handleTopPx(index: number): string {
+  return `${HEADER_H + PORT_H * index + PORT_H / 2}px`
+}
+
 function setParam(key: string, value: string | number) {
   props.data.params[key] = value
 }
 </script>
 
 <template>
-  <div class="studio-node" :class="{ 'node-running': data.serverState === 'running', 'node-crashed': data.serverState === 'crashed' }">
+  <div
-    <!-- Input handles (left) -->
+    class="studio-node"
+    :class="{
+      'node-running': data.serverState === 'running',
+      'node-crashed': data.serverState === 'crashed',
+    }"
+  >
+    <!-- Input handles (left) — positioned to match port rows -->
     <Handle
-      v-for="port in inputs"
+      v-for="(port, i) in inputs"
       :key="port.id"
       :id="port.id"
       type="target"
       :position="Position.Left"
       :class="`handle-${port.kind}`"
+      :style="{ top: handleTopPx(i) }"
     />
 
     <!-- Header -->
@@ -45,6 +59,22 @@ function setParam(key: string, value: string | number) {
       <span v-if="stateBadge" :class="['badge', stateBadge.cls]">{{ stateBadge.text }}</span>
     </div>
 
+    <!-- Port rows -->
+    <div 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>
+        </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}`" />
+        </div>
+      </div>
+    </div>
+
     <!-- Params -->
     <div v-if="typeDef && typeDef.params.length" class="node-body">
       <div v-for="param in typeDef.params" :key="param.key" class="param-row">
@@ -71,31 +101,34 @@ function setParam(key: string, value: string | number) {
       </div>
     </div>
 
-    <!-- Node id -->
+    <!-- Footer: node id -->
     <div class="node-id">{{ id }}</div>
 
-    <!-- Output handles (right) -->
+    <!-- Output handles (right) — positioned to match port rows -->
     <Handle
-      v-for="port in outputs"
+      v-for="(port, i) in outputs"
       :key="port.id"
       :id="port.id"
       type="source"
       :position="Position.Right"
       :class="`handle-${port.kind}`"
+      :style="{ top: handleTopPx(i) }"
     />
   </div>
 </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: 180px;
+  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;
+  position: relative;
 }
 
 .studio-node.node-running {
@@ -108,11 +141,13 @@ function setParam(key: string, value: string | number) {
   box-shadow: 0 0 0 1px #f38ba8, 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
+/* HEADER_H = 36px */
 .node-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 10px 6px;
+  padding: 0 10px;
+  height: 36px;
   border-bottom: 1px solid #383a4e;
   gap: 6px;
 }
@@ -130,16 +165,59 @@ function setParam(key: string, value: string | number) {
   border-radius: 3px;
   letter-spacing: 0.5px;
 }
-
 .badge-running { background: #a6e3a1; color: #1e2030; }
 .badge-stopped { background: #6c7086; color: #cdd6f4; }
 .badge-crashed { background: #f38ba8; color: #1e2030; }
 
+/* PORT_H = 26px per row */
+.node-ports {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #2a2b3d;
+}
+
+.ports-side {
+  display: flex;
+  flex-direction: column;
+}
+
+.port-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 8px;
+}
+
+.port-row-right {
+  flex-direction: row-reverse;
+}
+
+.port-name {
+  font-size: 10px;
+  color: #6c7086;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.port-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dot-video { background: #89b4fa; }
+.dot-audio { background: #fab387; }
+
+/* Params */
 .node-body {
   padding: 8px 10px;
   display: flex;
   flex-direction: column;
   gap: 6px;
+  border-bottom: 1px solid #2a2b3d;
 }
 
 .param-row {
@@ -170,25 +248,25 @@ function setParam(key: string, value: string | number) {
   border-color: #89b4fa;
 }
 
+/* Footer */
 .node-id {
   padding: 4px 10px;
   font-size: 10px;
   color: #45475a;
-  border-top: 1px solid #2a2b3d;
 }
 
-/* Handle styles */
+/* Handles — use :deep() to pierce Vue Flow's DOM */
 :deep(.handle-video) {
   background: #89b4fa !important;
   border-color: #89b4fa !important;
-  width: 10px !important;
+  width: 11px !important;
-  height: 10px !important;
+  height: 11px !important;
 }
 
 :deep(.handle-audio) {
   background: #fab387 !important;
   border-color: #fab387 !important;
-  width: 10px !important;
+  width: 11px !important;
-  height: 10px !important;
+  height: 11px !important;
 }
 </style>