Add image IO inspector and measured layout

graphfx-ui/src/components/GraphFxNode.vue

@@ -8,6 +8,17 @@ const props = defineProps<{
   data: GraphFxNodeData
 }>()
 
+const emit = defineEmits<{
+  'inspect-image': [inspection: {
+    nodeId: string
+    nodeName: string
+    direction: 'in' | 'out'
+    ioName: string
+    label: string
+    url: string
+  }]
+}>()
+
 function typeClass(port: GraphFxPort) {
   return `io-type-${port.type.toLowerCase()}`
 }
@@ -75,6 +86,19 @@ function inputType(port: GraphFxPort) {
 function connectedText(port: GraphFxPort) {
   return port.connectedDisplay || port.output || 'connected'
 }
+
+function inspectImage(direction: 'in' | 'out', port: GraphFxPort) {
+  const url = previewUrl(direction, port)
+  if (!url) return
+  emit('inspect-image', {
+    nodeId: props.data.id,
+    nodeName: props.data.name,
+    direction,
+    ioName: port.name,
+    label: port.label || port.name,
+    url,
+  })
+}
 </script>
 
 <template>
@@ -135,7 +159,10 @@ function connectedText(port: GraphFxPort) {
             <span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
           </div>
 
-          <img v-if="previewUrl('in', port)" class="graphfx-node__image-preview" :src="previewUrl('in', port)" :alt="`${port.name} preview`" />
+          <button v-if="previewUrl('in', port)" type="button" class="graphfx-node__image-preview nodrag" :title="`Inspect ${port.name}`" @click.stop="inspectImage('in', port)" @pointerdown.stop>
+            <img :src="previewUrl('in', port)" :alt="`${port.name} preview`" />
+            <span>inspect</span>
+          </button>
 
           <div v-if="port.output" class="graphfx-node__connected-value nodrag" @pointerdown.stop>
             <span :title="port.output">← {{ connectedText(port) }}</span>
@@ -213,7 +240,11 @@ function connectedText(port: GraphFxPort) {
             <span class="graphfx-node__port-name">{{ port.name }}</span>
           </div>
 
-          <img v-if="previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" />
+          <button v-if="previewUrl('out', port)" type="button" class="graphfx-node__image-preview nodrag" :title="`Inspect ${port.name}`" @click.stop="inspectImage('out', port)" @pointerdown.stop>
+            <img :src="previewUrl('out', port)" :alt="`${port.name} preview`" />
+            <span>inspect</span>
+          </button>
+          <div v-else-if="port.type === 'Image'" class="graphfx-node__image-empty">no image yet</div>
 
           <Handle
             type="source"