⚡ reusing canvas, passing imageBitmap instead

ui/Components/App.vue

@@ -68,6 +68,8 @@ export default {
     bottom: 0;
     top: 0;
     right: 0;
+    font-family: sans-serif;
+    font-size: 12px;
 }
 
 .app__toolbar {

ui/Components/Node.vue

@@ -2,7 +2,10 @@
     <div
         class="node"
     >
-        <div style="flex: 1" class="node__vars node__vars--input">
+        <div
+            class="node__title"
+        >{{node.name}}</div>
+        <div class="node__vars node__vars--input">
             <div
                 v-for="(type, name) in node.in.variables"
                 :key="name"
@@ -28,10 +31,7 @@
                 />
             </div>
         </div>
-        <div style="flex: 1">
-            <div>
-                {{node.name}}
-            </div>
+        <div  class="node__vars node__vars--output">
             <div
                 v-for="(type, name) in node.out.variables"
                 :key="name"
@@ -144,17 +144,34 @@ export default {
 .node {
     margin: 5px;
     padding: 5px 0;
-    display: inline-flex;
+    display: grid;
     flex-direction: row;
     background-color: #EEE;
     border-radius: 5px;
     box-shadow: 1px 1px 5px rgba(0,0,0,0.35);
+    grid-gap: 5px;
+    grid-template-areas:
+        "title title"
+        "in  out";
+}
+.node__title {
+    grid-area: title;
+    text-align: center;
+    border-bottom: 1px solid black;
 }
 
 .node__var {
     margin-bottom: 2px
 }
 
+.node__vars--input {
+    grid-area: in;
+}
+
+.node__vars--output {
+    grid-area: out;
+}
+
 .node__remove {
     position: absolute;
     top: -20px;

ui/Components/Value/Image.vue

@@ -2,15 +2,16 @@
     <div
         class="image-value"
         @click="onClick"
+        @mouseenter="isPreviewVisible = true"
+        @mouseleave="isPreviewVisible = false"
     >
         <canvas class="image-value__thumb" ref="thumb" />
         <canvas class="image-value__preview" ref="preview" />
     </div>
-
-
 </template>
 <script>
 import {paintToCanvas, mediaSize} from '../../../src/nodes/canvas.js'
+import _ from 'lodash';
 
 export default {
     props: {
@@ -27,25 +28,28 @@ export default {
             required: true,
         }
     },
-    watch: {
-        value: {
-            handler(value) {
-                this.redraw();
-            }
-        }
-    },
     data() {
         return {
             isRunning: true,
+            isPreviewVisible: false,
+            /*redrawThumb: _.throttle(() => {
+                console.log('redrawThum')
+            }, 500, {leading: true, trailing: true}),*/
+            redrawThumb: _.throttle(() => this.redrawCanvas(this.$refs.thumb), 500, {leading: true, trailing: true}),
         };
     },
     mounted() {
         this.$nextTick(() => {
             this.redraw();
-            this.io.onchange(this.redraw);
+            this.io.onchange(this.onChange);
         })
     },
     watch: {
+        isPreviewVisible(isVisible) {
+            if (isVisible) {
+                this.redraw();
+            }
+        },
         isRunning: {
             handler() {
                 this.redraw();
@@ -54,10 +58,16 @@ export default {
     },
     beforeDestroy() {
         this.isRunning = false;
+        if (this.io) {
+            this.io.offchange(this.onChange)
+        }
     },
     methods: {
+        onChange() {
+            this.redraw();
+        },
         redrawCanvas(canvas) {
-            const value = this.value;
+            const value = this.io.value;
             /** @type {HTMLCanvasElement} */
             const ctx = canvas.getContext('2d');
             if (!value) {
@@ -77,8 +87,11 @@ export default {
         },
         redraw() {
             if (this.isRunning) {
-                this.redrawCanvas(this.$refs.thumb);
-                this.redrawCanvas(this.$refs.preview)
+                this.redrawThumb();
+                // this.redrawCanvas(this.$refs.thumb);
+                if (this.isPreviewVisible) {
+                    this.redrawCanvas(this.$refs.preview)
+                }
             }
         },
         onClick() {
@@ -95,13 +108,13 @@ export default {
             input.accept = 'image/*';
             input.onchange = (event) => {
                 const files = event.target.files;
-                console.log(event);
                 if (files.length) {
                     const fr = new FileReader()
                     fr.onload = (event) => {
                         const image = new Image();
                         image.onload = () => {
                             this.$emit('change', image);
+                            this.onChange();
                         }
                         image.src = event.target.result;
                     }
@@ -124,11 +137,16 @@ export default {
 .image-value {
     position: relative;
 }
+.image-value__thumb, .image-value__preview {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVQoU2NsaGj4z4AG6uvr0YUYGIeCwv///2N4prGxEdMzQ0AhAChTL3KV95+lAAAAAElFTkSuQmCC);
+    background-repeat: repeat;
+}
+
 .image-value__thumb {
     width: 50px;
     height: 50px;
     object-fit: contain;
-    background-color: black;
+
     box-shadow: 0 0 6px;
 }
 

ui/Components/Value/index.js

@@ -15,10 +15,11 @@ export default {
     },
     render(h) {
         return h(
+            this.io.definition.enum ? SelectValue :
             this.io.type === 'Image' ? ImageValue :
+            this.io.type === 'String' ? StringValue :
             this.io.type === 'Number' ? StringValue :
             this.io.type === 'Color' ? StringValue :
-            this.io.definition.enum ? SelectValue :
             null,
         {
             props: {