fix(swap): fixes array handling with SWAP (#474)

* fix(swap): fixes array handling with SWAP

Fixes array handling when using SWAP state. Removes temp entirely

* chore(swap): Removed debugger and added some bit of info about what is happening

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

@@ -1,12 +1,13 @@
 import Vue from "vue";
-// import cloneDeep from "lodash.clonedeep";
 
-export default function SWAP(
- swap,
- temp,
- getDefault,
- sharedPropertyRestrictions
-) {
+/*
+ * When loading a preset we want to swap the data from the preset with the current state
+ * and make sure that only the "allowed" properties are moved, see sharedPropertyRestrictions.
+ *
+ * The idea is that this makes loading presets smooth and the end user will not see any
+ * glitches in the render loop.
+ */
+export default function SWAP(swap, getDefault, sharedPropertyRestrictions) {
  return function(state) {
  const stateKeys = Object.keys(state);
 
@@ -17,38 +18,32 @@ export default function SWAP(
 
  if (sharedPropertyRestrictions) {
  if (typeof sharedPropertyRestrictions[key] === "function") {
- const restrictedKeys = sharedPropertyRestrictions[key](state[key]);
  const stateChildKeys = Object.keys(state[key]);
 
+ // eslint-disable-next-line
  if (isArray) {
- Vue.set(temp, key, []);
+ state[key] = state[key].filter(
+ sharedPropertyRestrictions[key](state[key])
+ );
  } else {
- Vue.set(temp, key, {});
- }
+ const restrictedKeys = sharedPropertyRestrictions[key](
+ state[key]
+ );
 
- // eslint-disable-next-line
- stateChildKeys.forEach(stateChildKey => {
- if (restrictedKeys.indexOf(stateChildKey) < 0) {
- if (isArray) {
- temp[key].push(state[key][stateChildKey]);
- state[key].splice(stateChildKey, 1);
- } else {
- Vue.set(temp[key], stateChildKey, state[key][stateChildKey]);
+ // eslint-disable-next-line
+ stateChildKeys.forEach(stateChildKey => {
+ if (restrictedKeys.indexOf(stateChildKey) < 0) {
  delete state[key][stateChildKey];
  }
- }
- });
+ });
+ }
  } else if (sharedPropertyRestrictions[key]) {
- Vue.set(temp, key, state[key]);
  delete state[key];
  }
  } else {
- Vue.set(temp, key, state[key]);
  delete state[key];
  }
  });
- } else {
- Object.assign(temp, getDefault());
  }
 
  const swapKeys = Object.keys(swap);
@@ -60,19 +55,22 @@ export default function SWAP(
 
  if (sharedPropertyRestrictions) {
  if (typeof sharedPropertyRestrictions[key] === "function") {
- const restrictedKeys = sharedPropertyRestrictions[key](swap[key]);
  const swapChildKeys = Object.keys(swap[key]);
 
- // eslint-disable-next-line
- swapChildKeys.forEach(swapChildKey => {
- if (restrictedKeys.indexOf(swapChildKey) < 0) {
- if (isArray) {
- state[key].push(swap[key][swapChildKey]);
- } else {
+ if (isArray) {
+ state[key] = swap[key].filter(
+ sharedPropertyRestrictions[key](swap[key])
+ );
+ } else {
+ const restrictedKeys = sharedPropertyRestrictions[key](swap[key]);
+
+ // eslint-disable-next-line
+ swapChildKeys.forEach(swapChildKey => {
+ if (restrictedKeys.indexOf(swapChildKey) < 0) {
  Vue.set(state[key], swapChildKey, swap[key][swapChildKey]);
  }
- }
- });
+ });
+ }
  } else if (sharedPropertyRestrictions[key]) {
  if (isArray) {
  Vue.set(state, key, [...swap[key]]);
@@ -92,6 +90,6 @@ export default function SWAP(
  Object.assign(swap, getDefault());
  }
 
- Object.assign(swap, temp || getDefault());
+ Object.assign(swap, getDefault());
  };
 }

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

@@ -82,21 +82,17 @@ import uuidv4 from "uuid/v4";
 
 const state = { groups: [] };
 const swap = { groups: [] };
-const temp = { groups: [] };
 
 // Any keys marked false or arrays with keys given
 // will not be moved from the base state when swapped
 const sharedPropertyRestrictions = {
  groups: (
- // keeps gallery group in place
- value
- ) => {
- const index = value.findIndex(
- group => group.name === constants.GALLERY_GROUP_NAME
- );
-
- return index > -1 ? [`${index}`] : [];
- }
+ // As state.groups is an Array, we return a function which checks the item in the Array,
+ // returns a boolean. True to remove, false to keep.
+ // Objects return an Array of keys to remove.
+ // This keeps gallery group in place
+ group
+ ) => () => group.name !== constants.GALLERY_GROUP_NAME
 };
 
 const actions = {
@@ -292,7 +288,7 @@ const mutations = {
  }
  },
 
- SWAP: SWAP(swap, temp, () => ({ groups: [] }), sharedPropertyRestrictions)
+ SWAP: SWAP(swap, () => ({ groups: [] }), sharedPropertyRestrictions)
 };
 
 export default {

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

@@ -13,7 +13,6 @@ function getDefaultState() {
 
 const state = getDefaultState();
 const swap = getDefaultState();
-const temp = getDefaultState();
 
 const getters = {};
 
@@ -146,7 +145,7 @@ const mutations = {
  Vue.delete(writeTo.inputLinks, inputId);
  },
 
- SWAP: SWAP(swap, temp, getDefaultState)
+ SWAP: SWAP(swap, getDefaultState)
 };
 
 export default {

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

@@ -35,13 +35,6 @@ const swap = {
  metaQueue: {}
 };
 
-const temp = {
- registered: {},
- active: {},
- propQueue: {},
- metaQueue: {}
-};
-
 // this function either creates module properties from an existing module
 // (e.g. loading a preset) or initialises the default value
 async function initialiseModuleProperties(
@@ -536,7 +529,7 @@ const mutations = {
  Vue.set(writeTo.active[id].meta, metaKey, data);
  },
 
- SWAP: SWAP(swap, temp, () => ({}), sharedPropertyRestrictions)
+ SWAP: SWAP(swap, () => ({}), sharedPropertyRestrictions)
 };
 
 export default {