diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js index a1ade5c43..29af1922a 100644 --- a/src/application/worker/loop.js +++ b/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; } diff --git a/src/application/worker/store/modules/common/swap.js b/src/application/worker/store/modules/common/swap.js index f4a8ed3fb..667aa3674 100644 --- a/src/application/worker/store/modules/common/swap.js +++ b/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]); diff --git a/src/application/worker/store/modules/groups.js b/src/application/worker/store/modules/groups.js index 9c62a753b..376ca5d13 100644 --- a/src/application/worker/store/modules/groups.js +++ b/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 };