fix(gallery): fixes gallery item preview

src/application/worker/loop.js

@@ -34,6 +34,8 @@ function loop(delta, features, fftOutput) {
     windows
   } = store.state;
 
+  const groupIndexRenderOrder = store.getters["groups/groupIndexRenderOrder"];
+
   if (!main) {
     return;
   }
@@ -111,9 +113,9 @@ function loop(delta, features, fftOutput) {
 
   let lastCanvas = main.canvas;
 
-  const groupsLength = groups.length;
+  const groupsLength = groupIndexRenderOrder.length;
   for (let i = 0; i < groupsLength; ++i) {
-    const group = groups[i];
+    const group = groups[groupIndexRenderOrder[i]];
     const isGalleryGroup = group.name === constants.GALLERY_GROUP_NAME;
 
     const groupModulesLength = group.modules.length;
@@ -265,9 +267,9 @@ function loop(delta, features, fftOutput) {
   const windowsLength = windowKeys.length;
 
   main.clearRect(0, 0, main.canvas.width, main.canvas.height);
-  for (let i = 0; i < groupsLength; ++i) {
-    const group = groups[i];
-    const isGalleryGroup = group.name === constants.GALLERY_GROUP_NAME;
+  // minus one here to skip over the gallery group
+  for (let i = 0; i < groupsLength - 1; ++i) {
+    const group = groups[groupIndexRenderOrder[i]];
 
     const {
       compositeOperation,
@@ -277,7 +279,7 @@ function loop(delta, features, fftOutput) {
       modules
     } = group;
     const groupModulesLength = modules.length;
-    if (!enabled || groupModulesLength < 1 || !(alpha > 0) || isGalleryGroup) {
+    if (!enabled || groupModulesLength < 1 || !(alpha > 0)) {
       continue;
     }
 

src/application/worker/store/modules/common/swap.js

@@ -22,9 +22,7 @@ export default function SWAP(swap, getDefault, sharedPropertyRestrictions) {
 
             // eslint-disable-next-line
             if (isArray) {
-              state[key] = state[key].filter(
-                sharedPropertyRestrictions[key](state[key])
-              );
+              state[key] = state[key].filter(sharedPropertyRestrictions[key]);
             } else {
               const restrictedKeys = sharedPropertyRestrictions[key](
                 state[key]
@@ -58,9 +56,7 @@ export default function SWAP(swap, getDefault, sharedPropertyRestrictions) {
             const swapChildKeys = Object.keys(swap[key]);
 
             if (isArray) {
-              state[key] = swap[key].filter(
-                sharedPropertyRestrictions[key](swap[key])
-              );
+              Vue.set(state, key, [...state[key], ...swap[key]]);
             } else {
               const restrictedKeys = sharedPropertyRestrictions[key](swap[key]);
 

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

@@ -92,7 +92,23 @@ const sharedPropertyRestrictions = {
     // Objects return an Array of keys to remove.
     // This keeps gallery group in place
     group
-  ) => () => group.name !== constants.GALLERY_GROUP_NAME
+  ) => group.name === constants.GALLERY_GROUP_NAME
+};
+
+const getters = {
+  groupIndexRenderOrder: state => {
+    const galleryGroupIndex = state.groups.findIndex(
+      group => group.name === constants.GALLERY_GROUP_NAME
+    );
+    const indexes = [...state.groups.keys()];
+
+    if (galleryGroupIndex > -1) {
+      indexes.splice(galleryGroupIndex, 1);
+      indexes.push(galleryGroupIndex);
+    }
+
+    return indexes;
+  }
 };
 
 const actions = {
@@ -316,6 +332,7 @@ const mutations = {
 export default {
   namespaced: true,
   state,
+  getters,
   actions,
   mutations
 };