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 1fd34f0)

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

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() {

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>

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>

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"