next into main

package.json

@@ -40,8 +40,8 @@
     "interactive-shader-format": "github:vcync/interactive-shader-format-js#feat/ImageBitmap",
     "lfo-for-modv": "0.0.1",
     "lodash.get": "^4.4.2",
-    "mathjs": "^3.20.2",
-    "meyda": "^5.0.1",
+    "mathjs": "^7.5.1",
+    "meyda": "^5.2.0",
     "mkdirp": "^0.5.1",
     "npm": "6.14.6",
     "nwjs-menu-browser": "^1.0.0",
@@ -80,10 +80,9 @@
     "eslint-plugin-vue": "^5.2.3",
     "lint-staged": "^8.2.1",
     "node-loader": "^0.6.0",
-    "node-sass": "^4.14.0",
     "sass-loader": "^7.3.1",
     "text-loader": "0.0.1",
-    "vue-cli-plugin-electron-builder": "^1.4.2",
+    "vue-cli-plugin-electron-builder": "^2.0.0",
     "vue-template-compiler": "^2.6.10",
     "vuex-localstorage": "^1.0.0",
     "worker-loader": "^2.0.0"

src/application/plugins/context-menu/Menu.vue

@@ -120,7 +120,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 .nwjs-menu {
   font-family: "Rubik", sans-serif;
   font-size: 14px;
@@ -135,12 +135,10 @@ export default {
   min-width: 100px;
   background-color: #eee;
   position: fixed;
-  // opacity: 0;
   transition: opacity 250ms;
   margin: 0;
   padding: 4px 0;
   list-style: none;
-  // pointer-events: none;
   border-radius: 7px;
   border: 1px rgba(191, 191, 191, 0.8) solid;
   box-shadow: rgba(43, 43, 43, 0.34) 1px 1px 11px 0px;

src/application/plugins/context-menu/MenuHandler.vue

@@ -28,5 +28,3 @@ export default {
   }
 };
 </script>
-
-<style scoped lang="scss"></style>

src/application/plugins/context-menu/MenuItem.vue

@@ -131,5 +131,3 @@ export default {
   }
 };
 </script>
-
-<style scoped lang="scss"></style>

src/application/renderers/shader/index.js

@@ -139,6 +139,8 @@ async function setupModule(Module) {
 }
 
 function render({ module, props, canvas, context, pipeline }) {
+  resize({ width: canvas.width, height: canvas.height });
+
   if (!canvasTexture) {
     canvasTexture = pex.texture2D({
       data: canvas.data || canvas,

src/background.js

@@ -81,7 +81,9 @@ const windowPrefs = {
     prodPath: "colorPicker.html",
     options: {
       webPreferences: {
-        nodeIntegration: true
+        // Use pluginOptions.nodeIntegration, leave this alone
+        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
       },
       transparent: true,
       frame: false,
@@ -99,7 +101,9 @@ const windowPrefs = {
     options: {
       webPreferences: {
         enableRemoteModule: true,
-        nodeIntegration: true,
+        // Use pluginOptions.nodeIntegration, leave this alone
+        // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true,
         nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
         affinity: "main-window" // main window, and addition windows should work in one process,

src/components/ABSwap.vue

@@ -14,5 +14,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped></style>

src/components/Controls/FontControl.vue

@@ -171,20 +171,20 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 .searchable-select {
   height: 100px;
   overflow-y: scroll;
   padding: 0;
+}
 
-  li {
-    list-style: none;
-    margin: 0;
+.searchable-select li {
+  list-style: none;
+  margin: 0;
+}
 
-    &.selected,
-    &:hover {
-      background-color: var(--foreground-color-3);
-    }
-  }
+.searchable-select.selected,
+.searchable-select:hover {
+  background-color: var(--foreground-color-3);
 }
 </style>

src/components/Controls/Vec2DControl.vue

@@ -236,11 +236,10 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style>
 .pad {
   width: 170px;
   height: 170px;
-  // border: 1px solid #000;
   position: relative;
   background-color: #fff;
   cursor: crosshair;

src/components/GalleryItem.vue

@@ -122,11 +122,7 @@ export default {
     },
 
     async doubleClick() {
-      if (this.$store.state.focus.type !== "group") {
-        return;
-      }
-
-      const groupId = this.$store.state.focus.id;
+      const groupId = this.$store.state["ui-groups"].lastFocused;
       if (!groupId) {
         return;
       }
@@ -148,7 +144,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 canvas {
   max-width: 100%;
 }
@@ -170,32 +166,30 @@ canvas {
   max-width: 140px;
 
   overflow: hidden;
+}
 
-  canvas {
-    opacity: 0.3;
-    transition: 150ms opacity;
-  }
+.gallery-item:hover canvas {
+  opacity: 1;
+}
 
-  .title {
-    transition: 150ms opacity;
-    padding: 0.45em;
-    max-height: 100%;
-    box-sizing: border-box;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+.gallery-item:hover.title {
+  opacity: 0.3;
+}
 
-  &:hover {
-    canvas {
-      opacity: 1;
-    }
+.gallery-item canvas {
+  opacity: 0.3;
+  transition: 150ms opacity;
+}
 
-    .title {
-      opacity: 0.3;
-    }
-  }
+.gallery-item .title {
+  transition: 150ms opacity;
+  padding: 0.45em;
+  max-height: 100%;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .title {

src/components/Group.vue

@@ -172,6 +172,11 @@
           @keypress.enter="endTitleEditable"
         />
       </div>
+      <figure
+        class="group__focusIndicator"
+        v-show="lastFocusedGroup"
+        title="Focused Group"
+      ></figure>
       <Container
         drag-handle-selector=".handle"
         orientation="horizontal"
@@ -365,6 +370,10 @@ export default {
       );
     },
 
+    lastFocusedGroup() {
+      return this.$store.state["ui-groups"].lastFocused === this.groupId;
+    },
+
     enabled: {
       get() {
         return this.group.enabled;
@@ -494,6 +503,8 @@ export default {
           type: "group"
         });
       }
+
+      this.$store.commit("ui-groups/SET_LAST_FOCUSED", this.groupId);
     },
 
     removeModule(moduleId) {
@@ -507,6 +518,10 @@ export default {
       this.$modV.store.dispatch("modules/removeActiveModule", {
         moduleId
       });
+
+      if (this.focused) {
+        this.$store.commit("ui-groups/CLEAR_LAST_FOCUSED");
+      }
     },
 
     toggleTitleEditable() {
@@ -594,6 +609,7 @@ export default {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .group__enabledCheckbox {
@@ -671,6 +687,16 @@ export default {
   max-width: 120px;
 }
 
+.group__focusIndicator {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
 .group__controls {
   background: #363636;
   color: white;

src/components/ModuleInspector.vue

@@ -82,7 +82,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 button.pin-button {
   border: 0;
   background: 0;