From 1894edabfb44ff7cf700c5166c1719b0c0eec606 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Thu, 1 Jul 2021 21:44:59 +0100
Subject: [PATCH] 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 <timpietrusky@gmail.com>
---
 src/application/worker/loop.js                | 12 +++--
 .../worker/store/modules/groups.js            |  7 +--
 src/components/Group.vue                      | 54 +++++++++++++++----
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
index d3310f1a1..e52c902be 100644
--- 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
index 7ec5bf8e7..9c62a753b 100644
--- 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
index 5e5ff2fcd..7e00b8045 100644
--- 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,12 +258,14 @@ 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();
@@ -261,10 +273,13 @@ export default {
   },
 
   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
+          }
+        });
+      }
     }
   }
 };