From b5d5d421bdc8268d67f2307976caf8c67964cc5b Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Tue, 16 Feb 2021 20:19:13 +0000
Subject: [PATCH] feat(vec3/4): adds controls for vec3 and vec4 (#547)

Implements controls for vec3 and vec4 using existing color picker components

fixes #372. fixes #373

(cherry picked from commit 1fd34f081fe8beeee1c8ccdee8fefb2c9c1679a9)
---
 src/application/renderers/isf.js        |  7 +---
 src/components/Control.vue              | 12 +++++-
 src/components/Controls/Vec3Control.vue | 53 +++++++++++++++++++++++++
 src/components/Controls/Vec4Control.vue | 53 +++++++++++++++++++++++++
 src/components/ModuleInspector.vue      |  2 +
 5 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Controls/Vec3Control.vue
 create mode 100644 src/components/Controls/Vec4Control.vue

diff --git a/src/application/renderers/isf.js b/src/application/renderers/isf.js
index 3732a7802..a7949bdb2 100644
--- a/src/application/renderers/isf.js
+++ b/src/application/renderers/isf.js
@@ -136,12 +136,7 @@ async function setupModule(module) {
 
       case "color":
         addProp(input.NAME, {
-          control: {
-            type: "colorControl",
-            options: {
-              returnFormat: "mappedRgbaArray"
-            }
-          },
+          type: "vec4",
           label: input.LABEL || input.NAME,
           default: input.DEFAULT
         });
diff --git a/src/components/Control.vue b/src/components/Control.vue
index f602b05a5..3870ef584 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -25,6 +25,12 @@
       <div class="input" v-else-if="type === 'vec2'">
         <Vec2DControl v-model="value" />
       </div>
+      <div class="input" v-else-if="type === 'vec3'">
+        <Vec3Control v-model="value" />
+      </div>
+      <div class="input" v-else-if="type === 'vec4'">
+        <Vec4Control v-model="value" />
+      </div>
       <div class="input" v-else-if="type === 'text'">
         <input type="text" v-model="value" />
       </div>
@@ -61,6 +67,8 @@ import PaletteControl from "./Controls/PaletteControl";
 import TextureControl from "./Controls/TextureControl";
 import FontControl from "./Controls/FontControl";
 import ColorControl from "./Controls/ColorControl";
+import Vec3Control from "./Controls/Vec3Control";
+import Vec4Control from "./Controls/Vec4Control";
 import hasLink from "./mixins/has-input-link";
 import inputIsFocused from "./mixins/input-is-focused";
 
@@ -76,7 +84,9 @@ export default {
     PaletteControl,
     TextureControl,
     FontControl,
-    ColorControl
+    ColorControl,
+    Vec3Control,
+    Vec4Control
   },
 
   data() {
diff --git a/src/components/Controls/Vec3Control.vue b/src/components/Controls/Vec3Control.vue
new file mode 100644
index 000000000..3e8a76779
--- /dev/null
+++ b/src/components/Controls/Vec3Control.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <Sketch :value="color" @input="updateValue" ref="picker" />
+  </div>
+</template>
+
+<script>
+import { Sketch } from "vue-color";
+
+export default {
+  props: {
+    value: {
+      default: () => [],
+      required: true
+    }
+  },
+
+  components: {
+    Sketch
+  },
+
+  data() {
+    return {
+      color: { r: 0, g: 0, b: 0, a: 1 }
+    };
+  },
+
+  created() {
+    this.color = this.vec4ToRgba(this.value);
+  },
+
+  watch: {
+    value(vec4) {
+      this.color = this.vec4ToRgba(vec4);
+    }
+  },
+
+  methods: {
+    updateValue(color) {
+      this.color = color.rgba;
+      this.$emit("input", this.rgbaToVec4(this.color).splice(3, 1));
+    },
+
+    rgbaToVec4({ r, g, b, a }) {
+      return [r / 255, g / 255, b / 255, a];
+    },
+
+    vec4ToRgba([r, g, b, a]) {
+      return { r: r * 255, g: g * 255, b: b * 255, a };
+    }
+  }
+};
+</script>
diff --git a/src/components/Controls/Vec4Control.vue b/src/components/Controls/Vec4Control.vue
new file mode 100644
index 000000000..6ee0c85f8
--- /dev/null
+++ b/src/components/Controls/Vec4Control.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <Sketch :value="color" @input="updateValue" ref="picker" />
+  </div>
+</template>
+
+<script>
+import { Sketch } from "vue-color";
+
+export default {
+  props: {
+    value: {
+      default: () => [],
+      required: true
+    }
+  },
+
+  components: {
+    Sketch
+  },
+
+  data() {
+    return {
+      color: { r: 0, g: 0, b: 0, a: 1 }
+    };
+  },
+
+  created() {
+    this.color = this.vec4ToRgba(this.value);
+  },
+
+  watch: {
+    value(vec4) {
+      this.color = this.vec4ToRgba(vec4);
+    }
+  },
+
+  methods: {
+    updateValue(color) {
+      this.color = color.rgba;
+      this.$emit("input", this.rgbaToVec4(this.color));
+    },
+
+    rgbaToVec4({ r, g, b, a }) {
+      return [r / 255, g / 255, b / 255, a];
+    },
+
+    vec4ToRgba([r, g, b, a]) {
+      return { r: r * 255, g: g * 255, b: b * 255, a };
+    }
+  }
+};
+</script>
diff --git a/src/components/ModuleInspector.vue b/src/components/ModuleInspector.vue
index b185e346c..39c7299ed 100644
--- a/src/components/ModuleInspector.vue
+++ b/src/components/ModuleInspector.vue
@@ -71,6 +71,8 @@ export default {
           moduleDefinition.props[key].type === "bool" ||
           moduleDefinition.props[key].type === "color" ||
           moduleDefinition.props[key].type === "vec2" ||
+          moduleDefinition.props[key].type === "vec3" ||
+          moduleDefinition.props[key].type === "vec4" ||
           moduleDefinition.props[key].type === "tween" ||
           moduleDefinition.props[key].type === "texture" ||
           moduleDefinition.props[key].type === "enum"