fix(modules): handle non registered modules (#661)

* feat(tooltip): extends v-tooltip to allow for mouseover tooltip messages * feat(modules): adds $status array to modules allows user feedback in the case of an error or unexpected behaviour re #660 * feat(modules): adds status display on active modules fixes #660 * fix(fs): handle fs errors when files aren't found This adds fixes for missing files as part of presets
vcync · Jan 5, 2022 · 4748d34 · 4748d34
1 parent 910f731
commit 4748d34
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 27 deletions.
diff --git a/src/application/worker/loop.js b/src/application/worker/loop.js
@@ -86,10 +86,11 @@ function loop(delta, features, fftOutput) {
     // mutation linkTypes are also skipped as they're handled in index.worker.js in
     // the store commit subscription
     if (
-      linkType === "mutation" ||
-      (source === "meyda" &&
-        moduleId &&
-        !store.state.modules.active[moduleId].meta.enabled)
+      moduleId &&
+      (linkType === "mutation" ||
+        (source === "meyda" &&
+          moduleId &&
+          !store.state.modules.active[moduleId].meta.enabled))
     ) {
       continue;
     }
@@ -199,7 +200,11 @@ function loop(delta, features, fftOutput) {
 
       const module = active[group.modules[j]];
 
-      if (!module.meta.enabled || module.meta.alpha < 0.001) {
+      if (
+        !module.meta.enabled ||
+        module.meta.alpha < 0.001 ||
+        module.$status.length
+      ) {
         continue;
       }
 

diff --git a/src/application/worker/store/modules/dataTypes.js b/src/application/worker/store/modules/dataTypes.js
@@ -35,9 +35,15 @@ const state = {
 
       if (type === "image") {
         const { path } = options;
-        const { id } = await store.dispatch("images/createImageFromPath", {
-          path
-        });
+        let id;
+        try {
+          id = await store.dispatch("images/createImageFromPath", {
+            path
+          }).id;
+        } catch (e) {
+          console.error(e);
+        }
+
         textureDefinition.location = "images/image";
         textureDefinition.id = id;
       }

diff --git a/src/application/worker/store/modules/images.js b/src/application/worker/store/modules/images.js
@@ -15,9 +15,25 @@ const getters = {
 
 const actions = {
   async createImageFromPath({ commit }, { path: filePath }) {
-    const stream = fs.createReadStream(
-      path.join(store.state.media.path, filePath)
-    );
+    let stream;
+    let joinedFilePath;
+
+    try {
+      joinedFilePath = path.join(store.state.media.path, filePath);
+    } catch (e) {
+      console.log(e);
+    }
+
+    try {
+      stream = fs.createReadStream(joinedFilePath);
+    } catch (error) {
+      throw error;
+    }
+
+    if (!stream) {
+      return {};
+    }
+
     const blob = await streamToBlob(stream);
     const imageBitmap = await createImageBitmap(blob);
 

diff --git a/src/application/worker/store/modules/modules.js b/src/application/worker/store/modules/modules.js
@@ -172,16 +172,37 @@ const actions = {
     { moduleName, moduleMeta = {}, existingModule, writeToSwap }
   ) {
     const writeTo = writeToSwap ? swap : state;
-    const moduleDefinition =
-      state.registered[
-        existingModule ? existingModule.$moduleName : moduleName
-      ];
-    const { props = {}, data = {} } = moduleDefinition;
-
-    const module = {
-      meta: { ...moduleDefinition.meta, ...moduleMeta },
-      ...existingModule
-    };
+    const expectedModuleName = existingModule
+      ? existingModule.$moduleName
+      : moduleName;
+    const moduleDefinition = state.registered[expectedModuleName];
+
+    const { props = {}, data = {} } = moduleDefinition || {};
+
+    let module = {};
+
+    if (moduleDefinition) {
+      module = {
+        meta: { ...moduleDefinition.meta, ...moduleMeta },
+        ...existingModule,
+        $status: []
+      };
+    } else {
+      module = {
+        meta: { ...moduleMeta },
+        ...existingModule,
+        $status: []
+      };
+
+      console.error(
+        `Could not find registered module with name ${expectedModuleName}.`
+      );
+
+      module.$status.push({
+        type: "error",
+        message: `Module "${expectedModuleName}" is not registered. modV will skip this while rendering`
+      });
+    }
 
     if (moduleMeta.isGallery) {
       const existingModuleWithDuplicateNameInGallery = Object.values(
@@ -307,7 +328,7 @@ const actions = {
       canvas: { width: 0, height: 0 }
     };
 
-    if ("init" in moduleDefinition) {
+    if (moduleDefinition && "init" in moduleDefinition) {
       const { data } = writeTo.active[module.$id];
       const returnedData = moduleDefinition.init({
         canvas,
@@ -325,7 +346,7 @@ const actions = {
       }
     }
 
-    if ("resize" in moduleDefinition) {
+    if (moduleDefinition && "resize" in moduleDefinition) {
       const { data } = writeTo.active[module.$id];
       const returnedData = moduleDefinition.resize({
         canvas,
@@ -491,6 +512,8 @@ const actions = {
       .filter(module => !module.meta.isGallery)
       .reduce((obj, module) => {
         obj[module.$id] = module;
+        delete obj[module.$id].$status;
+
         return obj;
       }, {});
   },
@@ -626,7 +649,10 @@ const mutations = {
 
   UPDATE_ACTIVE_MODULE_META(state, { id, metaKey, data, writeToSwap }) {
     const writeTo = writeToSwap ? swap : state;
-    Vue.set(writeTo.active[id].meta, metaKey, data);
+
+    if (id) {
+      Vue.set(writeTo.active[id].meta, metaKey, data);
+    }
   },
 
   SWAP: SWAP(swap, () => ({}), sharedPropertyRestrictions)

diff --git a/src/components/ActiveModule.vue b/src/components/ActiveModule.vue
@@ -9,6 +9,13 @@
   >
     <div class="active-module__title handle">
       {{ name }}
+
+      <TooltipDisplay
+        class="active-module__status"
+        v-if="statusMessages.length"
+        :message="statusMessages"
+        >⚠️</TooltipDisplay
+      >
     </div>
     <grid class="active-module__controls" columns="6">
       <c span="1..">
@@ -90,10 +97,15 @@
 
 <script>
 import blendModes from "../util/composite-operations";
+import TooltipDisplay from "./TooltipDisplay.vue";
 
 export default {
   props: ["id"],
 
+  components: {
+    TooltipDisplay
+  },
+
   data() {
     return {
       blendModes,
@@ -171,6 +183,15 @@ export default {
 
     focused() {
       return this.focusedModule && this.id === this.$store.state["focus"].id;
+    },
+
+    statusMessages() {
+      const messages = (this.module.$status || []).reduce(
+        (prev, status) => `${prev} ${status.message}`.trim(),
+        ""
+      );
+
+      return messages;
     }
   },
 
@@ -247,6 +268,7 @@ export default {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  position: relative;
 }
 
 .active-module__controls,
@@ -271,6 +293,14 @@ export default {
   background: #363636;
   color: #ffffff;
 }
+
+.active-module__status {
+  background-color: #9a9a9a;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 4px;
+}
 </style>
 
 <style>

diff --git a/src/components/TooltipDisplay.vue b/src/components/TooltipDisplay.vue
@@ -0,0 +1,16 @@
+<template>
+  <div v-tooltip="{ mouseover: true, message }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+      default: () => ""
+    }
+  }
+};
+</script>
diff --git a/src/components/directives/ValueTooltip.js b/src/components/directives/ValueTooltip.js
@@ -4,6 +4,7 @@ const TOOLTIP_ID = "modv-tooltip";
 let tooltip = null;
 let pre = null;
 let vnode = null;
+let setTooltipFromValue = true;
 
 function createTooltip() {
   const existingTooltip = document.getElementById(TOOLTIP_ID);
@@ -84,7 +85,10 @@ function mouseUp() {
 
 function mouseMove(e) {
   setTooltipPosition(e);
-  setPreValue();
+
+  if (setTooltipFromValue) {
+    setPreValue();
+  }
 }
 
 function mouseDown(e) {
@@ -108,12 +112,37 @@ function mouseDown(e) {
   createTooltip();
   setTooltipPosition(e);
 
+  setTooltipFromValue = true;
   setPreValue();
 }
 
+function mouseOver(e, message) {
+  vnode = e.target;
+  while (vnode && !vnode.__vue__) {
+    vnode = vnode.parentNode;
+  }
+
+  if (!vnode) {
+    return;
+  }
+
+  window.addEventListener("mousemove", mouseMove);
+
+  createTooltip();
+  setTooltipPosition(e);
+
+  setTooltipFromValue = false;
+  pre.innerHTML = message;
+}
+
 Vue.directive("tooltip", {
-  inserted(el) {
-    el.addEventListener("mousedown", mouseDown);
+  inserted(el, { value: { mouseover, message } = {} }) {
+    if (!mouseover) {
+      el.addEventListener("mousedown", mouseDown);
+    } else {
+      el.addEventListener("mouseover", e => mouseOver(e, message));
+      el.addEventListener("mouseout", mouseUp);
+    }
   },
 
   unbind() {