Merge pull request #786 from vcync/next

fix: module hot reload (#755)
vcync · Nov 8, 2022 · fa582e4 · fa582e4
2 parents 2abcd2e + b67cd91
commit fa582e4
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 46 deletions.
diff --git a/src/application/utils/get-prop-default.js b/src/application/utils/get-prop-default.js
@@ -10,13 +10,21 @@ export default async function getPropDefault(
   const { random, type } = prop;
   let defaultValue = prop.default;
 
-  if (store.state.dataTypes[type] && store.state.dataTypes[type].create) {
-    const propData = useExistingData ? module.props[propName] : prop.default;
-
-    return await store.state.dataTypes[type].create(
-      propData,
-      module.meta.isGallery
-    );
+  if (store.state.dataTypes[type]) {
+    if (!defaultValue && store.state.dataTypes[type].inputs) {
+      defaultValue = store.state.dataTypes[type].inputs();
+    }
+
+    const propData = useExistingData
+      ? module.props[propName] ?? defaultValue
+      : defaultValue;
+
+    if (store.state.dataTypes[type].create) {
+      return await store.state.dataTypes[type].create(
+        propData,
+        module.meta.isGallery
+      );
+    }
   }
 
   if (useExistingData && typeof module.props?.[propName] !== "undefined") {

diff --git a/src/application/worker/index.worker.js b/src/application/worker/index.worker.js
@@ -342,12 +342,12 @@ async function start() {
       }
 
       store.commit("groups/SWAP", {});
-      store.commit("modules/SWAP", {});
       store.commit("inputs/SWAP", {});
+      store.commit("modules/SWAP", {});
 
       store.commit("groups/CLEAR_SWAP", {});
-      store.commit("modules/CLEAR_SWAP", {});
       store.commit("inputs/CLEAR_SWAP", {});
+      store.commit("modules/CLEAR_SWAP", {});
 
       return;
     }

diff --git a/src/application/worker/store/modules/media.js b/src/application/worker/store/modules/media.js
@@ -45,7 +45,6 @@ const actions = {
         await store.dispatch("modules/registerModule", { module, hot: true });
       } catch (e) {
         console.error(`Could not load module`, item.name);
-        console.log(module);
         console.error(e);
         return;
       }

diff --git a/src/application/worker/store/modules/modules.js b/src/application/worker/store/modules/modules.js
@@ -44,9 +44,25 @@ async function initialiseModuleProperties(
   props,
   module,
   isGallery = false,
-  useExistingData = false
+  useExistingData = false,
+  existingData = {},
+  writeToSwap = false
 ) {
   const propKeys = Object.keys(props);
+  const propsWithoutId = [];
+
+  if (useExistingData) {
+    for (let i = 0, len = propKeys.length; i < len; i += 1) {
+      const prop = propKeys[i];
+      const propDidExist = !!existingData.$props[prop];
+
+      if (propDidExist) {
+        module.$props[prop].id = existingData.$props[prop].id;
+      } else {
+        propsWithoutId.push(prop);
+      }
+    }
+  }
 
   for (let i = 0, len = propKeys.length; i < len; i++) {
     const propKey = propKeys[i];
@@ -60,17 +76,22 @@ async function initialiseModuleProperties(
       useExistingData
     );
 
-    if (!isGallery && !useExistingData) {
+    if (
+      (!isGallery && !useExistingData) ||
+      (propsWithoutId.length && propsWithoutId.indexOf(propKey) > -1)
+    ) {
       const inputBind = await store.dispatch("inputs/addInput", {
         type: "action",
         location: "modules/updateProp",
-        data: { moduleId: module.$id, prop: propKey }
+        data: { moduleId: module.$id, prop: propKey },
+        writeToSwap
       });
 
       if (
         prop.type in store.state.dataTypes &&
         store.state.dataTypes[prop.type].inputs
       ) {
+        console.log(propKey);
         const dataTypeInputs = store.state.dataTypes[prop.type].inputs();
         const dataTypeInputsKeys = Object.keys(dataTypeInputs);
 
@@ -84,7 +105,8 @@ async function initialiseModuleProperties(
               prop: propKey,
               path: `[${key}]`
             },
-            id: `${inputBind.id}-${key}`
+            id: `${inputBind.id}-${key}`,
+            writeToSwap
           });
         }
       }
@@ -139,32 +161,47 @@ const actions = {
     commit("ADD_REGISTERED_MODULE", { module: moduleDefinition });
 
     if (hot) {
-      const activeModuleValues = Object.values(state.active);
+      const activeModuleValues = Object.values(state.active).filter(
+        activeModule => activeModule.meta.name === name
+      );
 
-      for (let i = 0; i < activeModuleValues.length; i += 1) {
-        const activeModule = activeModuleValues[i];
+      for (let i = 0, len = activeModuleValues.length; i < len; i += 1) {
+        const existingActiveModule = activeModuleValues[i];
+        const activeModule = { ...existingActiveModule };
 
-        if (activeModule.meta.name === name) {
-          const { canvas } = rootState.outputs.main || {
-            canvas: { width: 0, height: 0 }
-          };
+        const { canvas } = rootState.outputs.main || {
+          canvas: { width: 0, height: 0 }
+        };
 
-          if ("init" in moduleDefinition) {
-            const { data } = activeModule;
-            const returnedData = moduleDefinition.init({
-              canvas,
-              data: { ...data },
-              props: activeModule.props
-            });
+        const { props } = moduleDefinition;
+
+        activeModule.$props = JSON.parse(JSON.stringify(props));
+
+        const initialisedModule = await initialiseModuleProperties(
+          props,
+          { ...activeModule },
+          false,
+          true,
+          existingActiveModule
+        );
+
+        commit("ADD_ACTIVE_MODULE", { module: initialisedModule });
+
+        if ("init" in moduleDefinition) {
+          const { data } = activeModule;
+          const returnedData = moduleDefinition.init({
+            canvas,
+            data: { ...data },
+            props: activeModule.props
+          });
 
-            if (returnedData) {
-              commit("UPDATE_ACTIVE_MODULE", {
-                id: activeModule.$id,
-                key: "data",
-                value: returnedData,
-                writeToSwap: false
-              });
-            }
+          if (returnedData) {
+            commit("UPDATE_ACTIVE_MODULE", {
+              id: activeModule.$id,
+              key: "data",
+              value: returnedData,
+              writeToSwap: false
+            });
           }
         }
       }
@@ -224,19 +261,14 @@ const actions = {
       }
     }
 
+    module.$props = JSON.parse(JSON.stringify(props));
+
     if (!existingModule) {
       module.$id = uuidv4();
       module.$moduleName = moduleName;
-      module.$props = JSON.parse(JSON.stringify(props));
-
       module.props = {};
 
-      await initialiseModuleProperties(
-        props,
-        module,
-        moduleMeta.isGallery,
-        existingModule
-      );
+      await initialiseModuleProperties(props, module, moduleMeta.isGallery);
 
       const dataKeys = Object.keys(data);
       module.data = {};
@@ -311,7 +343,9 @@ const actions = {
         props,
         module,
         moduleMeta.isGallery,
-        true
+        true,
+        existingModule,
+        writeToSwap
       );
     }
 

diff --git a/src/components/Controls/RangeControl.vue b/src/components/Controls/RangeControl.vue
@@ -370,6 +370,14 @@ export default {
       requestAnimationFrame(this.draw);
     },
 
+    min() {
+      requestAnimationFrame(this.draw);
+    },
+
+    max() {
+      requestAnimationFrame(this.draw);
+    },
+
     inputValue(value) {
       this.position = -value * this.spacingCalc;
     }

diff --git a/src/components/ModuleControl.vue b/src/components/ModuleControl.vue
@@ -46,7 +46,7 @@ export default {
     },
 
     title() {
-      return this.activeProp.label || this.prop;
+      return this.activeProp?.label || this.prop;
     },
 
     value() {