feat(group-inheritance): adds group inheritance option (#607)

restores modV 2 functionality. replaces the inheritance checkbox on groups with a select input fixes #603 Co-authored-by: Tim Pietrusky <[email protected]>
vcync · Jul 1, 2021 · 1894eda · 1894eda
1 parent 48f0075
commit 1894eda
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 15 deletions.
diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
@@ -100,7 +100,7 @@ function loop(delta, features) {
       continue;
     }
 
-    const { clearing, inherit, pipeline } = group;
+    const { clearing, inherit, inheritFrom, pipeline } = group;
 
     const aux = group.drawToCanvasId && auxillary[group.drawToCanvasId].context;
     const groupContext = group.context.context;
@@ -124,8 +124,14 @@ function loop(delta, features) {
     }
 
     if (inherit) {
+      const canvasToInherit =
+        inheritFrom === -1
+          ? lastCanvas
+          : groups.find(group => group.id === inheritFrom).context.context
+              .canvas;
+
       drawTo.drawImage(
-        lastCanvas,
+        canvasToInherit,
         0,
         0,
         drawTo.canvas.width,
@@ -134,7 +140,7 @@ function loop(delta, features) {
 
       if (pipeline && !isGalleryGroup) {
         bufferContext.drawImage(
-          lastCanvas,
+          canvasToInherit,
           0,
           0,
           drawTo.canvas.width,

diff --git a/src/application/worker/store/modules/groups.js b/src/application/worker/store/modules/groups.js
@@ -22,9 +22,9 @@ import uuidv4 from "uuid/v4";
  * @property {Boolean} inherit             Indicates whether the Group should inherit from another
  *                                         Group at redraw
  *
- * @property {Number}  inheritFrom         The target Group to inherit from, -1 being the previous
- *                                         Group in modV#Groups, 0-n being the index of
- *                                         another Group within modV#Groups
+ * @property {String|Number}  inheritFrom  The target Group to inherit from, -1 being the previous
+ *                                         Group in modV#Groups, UUID4 string being the ID of
+ *                                         another Group within modV.store.state.groups.groups
  *
  * @property {Boolean} pipeline            Indicates whether the Group should render using pipeline
  *                                         at redraw
@@ -120,6 +120,7 @@ const actions = {
       hidden: args.hidden || false,
       modules: args.modules || [],
       inherit,
+      inheritFrom: -1,
       alpha: args.alpha || 1,
       compositeOperation: args.compositeOperation || "normal",
       context: await store.dispatch("outputs/getAuxillaryOutput", {

diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -41,11 +41,21 @@
             }"
           >
             <c span="2">Inherit</c>
-            <c span="4"
-              ><Checkbox
-                v-model="inherit"
+            <c span="4">
+              <Select
+                v-model="inheritanceSelection"
                 :class="{ light: isFocused(group.inheritInputId) }"
-            /></c>
+              >
+                <option :value="-2">Don't Inherit</option>
+                <option :value="-1">Previous Group</option>
+                <option
+                  v-for="group in groups"
+                  :key="group.id"
+                  :value="group.id"
+                  >{{ group.name }}</option
+                >
+              </Select>
+            </c>
           </grid>
         </c>
 
@@ -203,7 +213,7 @@
 
 <script>
 import { Container, Draggable } from "vue-smooth-dnd";
-
+import constants from "../application/constants";
 import ActiveModule from "./ActiveModule";
 import compositeOperations from "../util/composite-operations";
 import Arrow from "../assets/graphics/Arrow.svg";
@@ -248,23 +258,28 @@ export default {
       titleEditable: false,
       localName: "",
       controlsShown: false,
-      Arrow
+      Arrow,
+      inheritanceSelection: -1
     };
   },
 
   created() {
     this.localName = this.name;
+    this.inheritanceSelection = !this.inherit ? -2 : this.inheritFrom;
 
     if (!this.focusedGroup) {
       this.focus();
     }
   },
 
   computed: {
-    group() {
+    groups() {
       return this.$modV.store.state.groups.groups.filter(
-        group => group.id === this.groupId
-      )[0];
+        group => group.name !== constants.GALLERY_GROUP_NAME
+      );
+    },
+    group() {
+      return this.groups.filter(group => group.id === this.groupId)[0];
     },
 
     name() {
@@ -328,6 +343,10 @@ export default {
       }
     },
 
+    inheritFrom() {
+      return this.group.inheritFrom;
+    },
+
     pipeline: {
       get() {
         return this.group.pipeline;
@@ -493,6 +512,23 @@ export default {
   watch: {
     name(value) {
       this.localName = value;
+    },
+
+    inheritanceSelection(value) {
+      const inheritFrom = value.length === 2 ? parseInt(value) : value;
+
+      if (inheritFrom === -2) {
+        this.inherit = false;
+      } else {
+        this.inherit = true;
+
+        this.$modV.store.commit("groups/UPDATE_GROUP", {
+          groupId: this.groupId,
+          data: {
+            inheritFrom
+          }
+        });
+      }
     }
   }
 };