feat(groups): adds inputlink methods to group controls (#441)

* feat(groups): adds inputlink methods to group controls * adds galleryitem changes
vcync · Oct 9, 2020 · c467b87 · c467b87
1 parent da11320
commit c467b87
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 5 deletions.
diff --git a/src/application/worker/store/modules/groups.js b/src/application/worker/store/modules/groups.js
@@ -39,6 +39,18 @@ import uuidv4 from "uuid/v4";
  * @property {String}  drawToCanvasId      The ID of the auxillary Canvas to draw the Group to,
  *                                         null indicates the Group should draw to the main output
  *
+ * @property {String}  alphaInputId        The Input ID for the Alpha control
+ *
+ * @property {String}  enabledInputId      The Input ID for the Enabled control
+ *
+ * @property {String}  clearingInputId     The Input ID for the Clearing control
+ *
+ * @property {String}  inheritInputId      The Input ID for the Inherit control
+ *
+ * @property {String}  compositeOperationInputId  The Input ID for the Composite Operation control
+ *
+ * @property {String}  pipelineInputId     The Input ID for the Pipeline control
+ *
  * @example
  * const Group = {
  *   name: 'Group',
@@ -117,6 +129,48 @@ const actions = {
       id: args.id || uuidv4()
     };
 
+    const alphaInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "alpha" }
+    });
+    group.alphaInputId = alphaInputBind.id;
+
+    const enabledInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "enabled" }
+    });
+    group.enabledInputId = enabledInputBind.id;
+
+    const clearingInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "clearing" }
+    });
+    group.clearingInputId = clearingInputBind.id;
+
+    const inheritInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "inherit" }
+    });
+    group.inheritInputId = inheritInputBind.id;
+
+    const coInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "compositeOperation" }
+    });
+    group.compositeOperationInputId = coInputBind.id;
+
+    const pipelineInputBind = await store.dispatch("inputs/addInput", {
+      type: "commit",
+      location: "groups/UPDATE_GROUP_BY_KEY",
+      data: { groupId: group.id, key: "pipeline" }
+    });
+    group.pipelineInputId = pipelineInputBind.id;
+
     commit("ADD_GROUP", { group, writeToSwap: args.writeToSwap });
 
     return group;
@@ -228,6 +282,15 @@ const mutations = {
     }
   },
 
+  UPDATE_GROUP_BY_KEY(state, { groupId, key, data, writeToSwap }) {
+    const writeTo = writeToSwap ? swap : state;
+    const index = writeTo.groups.findIndex(group => group.id === groupId);
+
+    if (index > -1) {
+      writeTo.groups[index][key] = data;
+    }
+  },
+
   SWAP: SWAP(swap, temp, () => ({ groups: [] }), sharedPropertyRestrictions)
 };
 

diff --git a/src/components/GalleryItem.vue b/src/components/GalleryItem.vue
@@ -162,6 +162,11 @@ canvas {
   justify-content: center;
   align-items: center;
 
+  max-width: 140px;
+
+  border-radius: 8px;
+  overflow: hidden;
+
   canvas {
     opacity: 0.3;
     transition: 150ms opacity;

diff --git a/src/components/Group.vue b/src/components/Group.vue
@@ -12,19 +12,70 @@
     class="group"
   >
     <section class="group-controls">
-      <input type="checkbox" v-model="enabled" title="Enabled" />
-      <input type="checkbox" v-model="inherit" title="Inherit" />
-      <input type="checkbox" v-model="clearing" title="Clearing" />
-      <input type="checkbox" v-model="pipeline" title="Pipeline" />
+      <input
+        type="checkbox"
+        v-model="enabled"
+        title="Enabled"
+        @mousedown="focusInput(group.enabledInputId, 'Enabled')"
+        :class="{
+          'has-link': hasLink(group.enabledInputId),
+          focused: isFocused(group.enabledInputId)
+        }"
+      />
+      <input
+        type="checkbox"
+        v-model="inherit"
+        title="Inherit"
+        @mousedown="focusInput(group.inheritInputId, 'Inherit')"
+        :class="{
+          'has-link': hasLink(group.inheritInputId),
+          focused: isFocused(group.inheritInputId)
+        }"
+      />
+      <input
+        type="checkbox"
+        v-model="clearing"
+        title="Clearing"
+        @mousedown="focusInput(group.clearingInputId, 'Clearing')"
+        :class="{
+          'has-link': hasLink(group.clearingInputId),
+          focused: isFocused(group.clearingInputId)
+        }"
+      />
+      <input
+        type="checkbox"
+        v-model="pipeline"
+        title="Pipeline"
+        @mousedown="focusInput(group.pipelineInputId, 'Pipeline')"
+        :class="{
+          'has-link': hasLink(group.pipelineInputId),
+          focused: isFocused(group.pipelineInputId)
+        }"
+      />
       <input
         type="range"
         v-model.number="alpha"
         max="1"
         min="0"
         step="0.001"
         class="group-alpha"
+        @mousedown="focusInput(group.alphaInputId, 'Alpha')"
+        :class="{
+          'has-link': hasLink(group.alphaInputId),
+          focused: isFocused(group.alphaInputId)
+        }"
       />
-      <select v-model="compositeOperation" class="group-composite-operation">
+      <select
+        v-model="compositeOperation"
+        class="group-composite-operation"
+        @mousedown="
+          focusInput(group.compositeOperationInputId, 'Composite Operation')
+        "
+        :class="{
+          'has-link': hasLink(group.compositeOperationInputId),
+          focused: isFocused(group.compositeOperationInputId)
+        }"
+      >
         <optgroup
           v-for="group in compositeOperations"
           :label="group.label"
@@ -323,6 +374,20 @@ export default {
       }
 
       this.titleEditable = false;
+    },
+
+    focusInput(id, title) {
+      this.$modV.store.dispatch("inputs/setFocusedInput", {
+        id,
+        title: `${this.name}: ${title}`
+      });
+    },
+    hasLink(id) {
+      return this.$modV.store.state.inputs.inputLinks[id];
+    },
+
+    isFocused(id) {
+      return this.$modV.store.state.inputs.focusedInput.id === id;
     }
   },
 
@@ -344,6 +409,8 @@ div.group {
 section.group-body {
   flex: 1;
   overflow: hidden;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 section.group-controls {