feat(group): add draw to output toggle (#762)

* feat(group): add draw to output toggle

* fix loading old enable format from preset

src/application/constants.js

@@ -15,3 +15,7 @@ export default {
     return 512;
   }
 };
+
+export const GROUP_DISABLED = 0;
+export const GROUP_ENABLED = 1;
+export const GROUP_DRAW_TO_OUTPUT = 2;

src/application/index.js

@@ -15,6 +15,7 @@ import PromiseWorker from "promise-worker-transferable";
 import Vue from "vue";
 import { ipcRenderer } from "electron";
 import { app } from "@electron/remote";
+import { GROUP_ENABLED } from "./constants";
 
 let imageBitmap;
 const imageBitmapQueue = [];
@@ -132,7 +133,7 @@ export default class ModV {
     };
 
     // Make the default group
-    this.store.dispatch("groups/createGroup", { enabled: true });
+    this.store.dispatch("groups/createGroup", { enabled: GROUP_ENABLED });
 
     window.addEventListener("beforeunload", () => true);
   }

src/application/worker/loop.js

@@ -2,7 +2,7 @@
 import get from "lodash.get";
 import store from "./store";
 import map from "../utils/map";
-import constants from "../constants";
+import constants, { GROUP_DISABLED, GROUP_ENABLED } from "../constants";
 import { applyWindow } from "meyda/src/utilities";
 
 const meyda = { windowing: applyWindow };
@@ -142,7 +142,7 @@ function loop(delta, features, fftOutput) {
     const isGalleryGroup = group.name === constants.GALLERY_GROUP_NAME;
 
     const groupModulesLength = group.modules.length;
-    if (!group.enabled || group.alpha < 0.001) {
+    if (group.enabled === GROUP_DISABLED || group.alpha < 0.001) {
       continue;
     }
 
@@ -286,7 +286,7 @@ function loop(delta, features, fftOutput) {
       }
     }
 
-    if (!group.hidden) {
+    if (!group.hidden && group.enabled === GROUP_ENABLED) {
       lastCanvas = drawTo.canvas;
     }
   }
@@ -307,7 +307,7 @@ function loop(delta, features, fftOutput) {
       modules
     } = group;
     const groupModulesLength = modules.length;
-    if (!enabled || groupModulesLength < 1 || !(alpha > 0)) {
+    if (enabled !== GROUP_ENABLED || groupModulesLength < 1 || !(alpha > 0)) {
       continue;
     }
 

src/application/worker/store/modules/groups.js

@@ -1,6 +1,6 @@
 import SWAP from "./common/swap";
 import store from "../";
-import constants from "../../../constants";
+import constants, { GROUP_DISABLED } from "../../../constants";
 import uuidv4 from "uuid/v4";
 import { applyExpression } from "../../../utils/apply-expression";
 
@@ -15,7 +15,8 @@ import { applyExpression } from "../../../utils/apply-expression";
  *
  * @property {Array}   modules             The draw order of the Modules contained within the Group
  *
- * @property {Boolean} enabled             Indicates whether the Group should be drawn
+ * @property {Number}  enabled             Indicates whether the Group should be drawn. 0: not drawn,
+ *                                         1: drawn, 2: not drawn to output canvas
  *
  * @property {Number}  alpha               The level of opacity, between 0 and 1, the Group should
  *                                         be drawn at
@@ -34,9 +35,6 @@ import { applyExpression } from "../../../utils/apply-expression";
  *
  * @property {String}  compositeOperation  The {@link Blendmode} the Group muxes with
  *
- * @property {Boolean} drawToOutput        Indicates whether the Group should draw to the output
- *                                         canvas
- *
  * @property {String}  drawToCanvasId      The ID of the auxillary Canvas to draw the Group to,
  *                                         null indicates the Group should draw to the main output
  *
@@ -133,7 +131,7 @@ const actions = {
       name,
       id,
       clearing: args.clearing || false,
-      enabled: args.enabled || false,
+      enabled: Number(args.enabled) || GROUP_DISABLED,
       hidden: args.hidden || false,
       modules: args.modules || [],
       inherit,

src/components/GalleryItem.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { GROUP_ENABLED, GROUP_DISABLED } from "../application/constants.js";
+
 export default {
   props: ["moduleName", "groupId"],
 
@@ -95,7 +97,7 @@ export default {
         groupId: this.groupId,
         data: {
           drawToCanvasId: this.outputId,
-          enabled: true
+          enabled: GROUP_ENABLED
         }
       });
 
@@ -116,7 +118,7 @@ export default {
       this.$modV.store.commit("groups/UPDATE_GROUP", {
         groupId: this.groupId,
         data: {
-          enabled: false
+          enabled: GROUP_DISABLED
         }
       });
     },

src/components/Group.vue

@@ -164,7 +164,12 @@
       </grid>
     </div>
     <div class="group__left">
-      <Checkbox class="group__enabledCheckbox" v-model="enabled" />
+      <Checkbox
+        class="group__enabledCheckbox"
+        v-model="enabled"
+        allowPartial="true"
+        title="alt-click to skip drawing to output canvas"
+      />
       <button
         class="group__controlsButton"
         :class="{ 'group__controlsButton-hidden': !controlsShown }"

src/components/inputs/Checkbox.vue

@@ -1,17 +1,62 @@
 <template>
-  <label>
-    <input
-      type="checkbox"
-      @input="$emit('input', $event.target.checked)"
-      :checked="value"
-    />
-    <span></span>
+  <label @mousedown="mousedown">
+    <span :class="spanClassName"></span>
   </label>
 </template>
 
 <script>
 export default {
-  props: ["value"]
+  props: {
+    value: {
+      type: Number,
+      required: true
+    },
+
+    allowPartial: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      classNames: {
+        0: "off",
+        1: "on",
+        2: "partial"
+      }
+    };
+  },
+
+  computed: {
+    spanClassName() {
+      let inferredValue = this.value;
+
+      // for backwards compatibility with the old Checkbox control which used true or false only
+      if (this.value === true || this.value === false) {
+        inferredValue = Number(inferredValue);
+      }
+
+      return this.classNames[inferredValue];
+    }
+  },
+
+  methods: {
+    mousedown(e) {
+      const { altKey } = e;
+
+      let value = this.value;
+
+      if (this.allowPartial && altKey) {
+        value = 2;
+      } else if (value || !value) {
+        value = Number(!value);
+      } else if (value === 2) {
+        value = 0;
+      }
+
+      this.$emit("input", value);
+    }
+  }
 };
 </script>
 
@@ -34,7 +79,7 @@ label.light {
   background: #363636;
 }
 
-input:checked + span::before {
+span.on::before {
   content: "";
   width: 10px;
   height: 4px;
@@ -47,16 +92,15 @@ input:checked + span::before {
   transform: translateX(2px) translateY(3px) rotate(-45deg);
 }
 
-/* input:checked + span::after {
+span.partial::before {
   content: "";
-  width: 15px;
-  height: 15px;
+  width: 10px;
+  height: 4px;
   display: inline-block;
   position: absolute;
-  top: 2px;
-  right: 3px;
-  border-top: 2px solid white;
-  transform: rotate(-45deg);
-  transform-origin: right top;
-} */
+  top: 0;
+  left: 0;
+  border-bottom: 2px solid white;
+  transform: translateX(3px) translateY(3px);
+}
 </style>