🎉

ui/Components/Graph.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <Node
+            v-for="(node, index) in graph"
+            :key="index"
+            :node="node"
+        />
+    </div>
+</template>
+<script>
+import Node from './Node.vue';
+
+export default {
+    components: {
+        Node,
+    },
+    props: {
+        graph: {
+            type: Array,
+            required: true,
+        }
+    }
+}
+</script>

ui/Components/Node.vue

@@ -0,0 +1,46 @@
+<template>
+    <div
+        style="
+            border: 2px solid black;
+            margin: 5px;
+            padding: 2px;
+            display: flex;
+            flex-direction: row;
+        "
+    >
+        <div style="flex: 1">
+            <strong>Inputs:</strong>
+            <div v-for="(type, name) in node.in.variables" :key="name">
+                <div>{{ name }} <i>{{typeName(type)}}</i></div>
+                <Value :type="type" :value="node.in[name]" />
+            </div>
+        </div>
+        <div style="flex: 1">
+            <strong>Outputs:</strong>
+            <div v-for="(type, name) in node.out.variables" :key="name">
+                <div>{{ name }} <i>{{typeName(type)}}</i></div>
+                <Value :type="type" :value="node.out[name]" />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Value from './Value';
+
+export default {
+    components: {
+        Value,
+    },
+    props: {
+        node: {
+            type: Object,
+            required: true,
+        }
+    },
+    methods: {
+        typeName(type) {
+            return Array.isArray(type) ? 'Option' : type;
+        }
+    }
+}
+</script>

ui/Components/Value/Image.vue

@@ -0,0 +1,63 @@
+<template>
+    <canvas
+        style="
+            width: 150px;
+            box-shadow: 0 0 6px;
+        "
+        @click="isRunning = !isRunning"
+        />
+</template>
+<script>
+import {paintToCanvas, mediaSize} from '../../../src/nodes/canvas.js'
+
+export default {
+    props: {
+        value: {
+            type: null,
+            required: true,
+        }
+    },
+    watch: {
+        value: {
+            handler(value) {
+                this.redraw();
+            }
+        }
+    },
+    data() {
+        return {
+            isRunning: false,
+        };
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.redraw();
+            this.value.onchange(this.redraw);
+        })
+    },
+    methods: {
+        redraw() {
+            if (this.isRunning) {
+                const value = this.value.value;
+                /** @type {HTMLCanvasElement} */
+                const canvas = this.$el;
+                const ctx = canvas.getContext('2d');
+                if (!value) {
+                    canvas.width = 1;
+                    canvas.height = 1;
+                    ctx.clearRect(0, 0, 1, 1);
+                } else {
+                    const {width, height} = mediaSize(value);
+                    canvas.width = width;
+                    canvas.height = height;
+                    paintToCanvas(canvas, value, {
+                        top: 0,
+                        left: 0,
+                        width, height,
+                    });
+                }
+            }
+        }
+    }
+}
+</script>

ui/Components/Value/Select.vue

@@ -0,0 +1,23 @@
+<template>
+    <select v-model="value.value">
+        <option
+            v-for="t in type"
+            :value="t"
+            :key="t"
+        >{{ t }}</option>
+    </select>
+</template>
+<script>
+export default {
+    props: {
+        type: {
+            type: Array,
+            required: true,
+        },
+        value: {
+            type: null,
+            required: true,
+        }
+    }
+}
+</script>

ui/Components/Value/String.vue

@@ -0,0 +1,13 @@
+<template>
+    <input v-model="value.value">
+</template>
+<script>
+export default {
+    props: {
+        value: {
+            type: null,
+            required: true,
+        }
+    }
+}
+</script>

ui/Components/Value/index.js

@@ -0,0 +1,24 @@
+import StringValue from './String.vue';
+import ImageValue from './Image.vue';
+import SelectValue from './Select.vue';
+
+export default {
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: null,
+            required: true,
+        }
+    },
+    render(h) {
+        return h(
+            this.type === 'Image' ? ImageValue :
+            this.type === 'Number' ? StringValue :
+            Array.isArray(this.type) ? SelectValue :
+            null,
+        {props: {value: this.value, type: this.type}})
+    }
+};