🎉

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}})
+    }
+};