Merge pull request #172 from 2xAA/2.0-plugins

2.0 plugins

package.json

@@ -15,6 +15,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "modv-media-manager": "https://github.com/2xAA/modV-MediaManager.git",
     "nw-builder": "^3.5.1",
     "vue": "^2.5.3",

src/components/Gallery/index.vue

@@ -33,6 +33,14 @@
         <b-tab-item label="Plugins" v-bar="{ useScrollbarPseudo: true }">
           <plugin-gallery :phrase="phrase"></plugin-gallery>
         </b-tab-item>
+
+        <b-tab-item
+          v-for="(plugin, pluginName) in enabledPlugins"
+          :label="pluginName"
+          :key="pluginName"
+        >
+          <component :is="plugin.plugin.galleryTabComponent.name"></component>
+        </b-tab-item>
       </b-tabs>
     </div>
   </div>
@@ -56,10 +64,21 @@
       };
     },
     computed: {
+      ...mapGetters('plugins', {
+        plugins: 'pluginsWithGalleryTab',
+      }),
       ...mapGetters('modVModules', {
         currentDragged: 'currentDragged',
         modules: 'registry',
       }),
+      enabledPlugins() {
+        return Object.keys(this.plugins)
+          .filter(pluginName => this.plugins[pluginName].enabled)
+          .reduce((obj, pluginName) => {
+            obj[pluginName] = this.plugins[pluginName];
+            return obj;
+          }, {});
+      },
     },
     methods: {
       ...mapActions('modVModules', [

src/extra/context-menu/index.js

@@ -71,6 +71,7 @@ function buildMenu(e, id, options, vnode, store) {
 
 const ContextMenu = {
   name: 'Context Menu',
+  store: contextMenuStore,
 
   install(Vue) {
     Vue.component('contextMenuHandler', ContextMenuHandler);
@@ -82,8 +83,6 @@ const ContextMenu = {
         });
       },
     });
-
-    store.registerModule('contextMenu', contextMenuStore);
   },
   component: ContextMenuHandler,
 };

src/extra/expression/index.js

@@ -5,18 +5,16 @@ import expressionStore from './store';
 
 const Expression = {
   name: 'Value Expression',
+  store: expressionStore,
+  storeName: 'expression',
 
   install() {
-    store.registerModule('expression', expressionStore);
-
     store.subscribe((mutation) => {
       if (mutation.type === 'modVModules/removeActiveModule') {
         store.commit('expression/removeExpressions', { moduleName: mutation.payload.moduleName });
       }
     });
-  },
 
-  modvInstall() {
     modV.addContextMenuHook({ hook: 'rangeControl', buildMenuItem: this.createMenuItem.bind(this) });
   },
 

src/extra/feature-assignment/index.js

@@ -12,9 +12,7 @@ const featureAssignment = {
         store.commit('meyda/removeAssignments', { moduleName: mutation.payload.moduleName });
       }
     });
-  },
 
-  modvInstall() {
     modV.addContextMenuHook({ hook: 'rangeControl', buildMenuItem: this.createMenuItem.bind(this) });
   },
 

src/extra/grab-canvas/index.js

@@ -31,6 +31,7 @@ document.body.appendChild(smallCanvas);
 const grabCanvas = {
   name: 'Grab Canvas',
   controlPanelComponent,
+  store: grabCanvasStore,
 
   /**
    * When the canvas is resized: Update the worker.
@@ -52,23 +53,17 @@ const grabCanvas = {
   },
 
   /**
-   * Only called when added as a Vue plugin,
-   * this must be registered with vue before modV
-   * to use vuex or vue
+   * Only called when added to modV.
    */
-  install(Vue, args = {}) {
-    Vue.component(controlPanelComponent.name, controlPanelComponent);
-
-    store.registerModule('grabCanvas', grabCanvasStore);
-
+  install() {
     // Set the size of the smallCanvas
-    smallCanvas.width = args.width || 112;
-    smallCanvas.height = args.height || 112;
+    smallCanvas.width = 112;
+    smallCanvas.height = 112;
 
     // Set the amount of the selected areas per axis
     store.commit('grabCanvas/setSelection', {
-      selectionX: args.selectionX || 28, // magic numbers for tim
-      selectionY: args.selectionY || 4,
+      selectionX: 28, // magic numbers for tim
+      selectionY: 4,
     });
 
     store.subscribe((mutation) => {
@@ -91,12 +86,7 @@ const grabCanvas = {
         smallCanvas.classList.toggle('is-hidden');
       }
     });
-  },
 
-  /**
-   * Only called when added to modV.
-   */
-  modvInstall() {
     this.resize(modV.outputCanvas);
   },
 

src/extra/lfo/index.js

@@ -17,12 +17,10 @@ function hzFromBpm(bpm = 120) {
 const lfoplugin = {
   name: 'LFO',
   waveforms: lfoTypes,
+  store: lfoStore,
+  storeName: 'lfo',
 
-  install() { //eslint-disable-line
-    store.registerModule('lfo', lfoStore);
-
-    // Vue.component('expression', ExpressionComponent);
-
+  install() {
     store.subscribe((mutation) => {
       if (mutation.type === 'modVModules/removeActiveModule') {
         store.commit('lfo/removeAssignments', { moduleName: mutation.payload.moduleName });
@@ -32,10 +30,11 @@ const lfoplugin = {
         store.dispatch('lfo/updateBpmFrequency', { frequency: hzFromBpm(mutation.payload.bpm) });
       }
     });
-  },
 
-  modvInstall() {
-    modV.addContextMenuHook({ hook: 'rangeControl', buildMenuItem: this.createMenuItem.bind(this) });
+    modV.addContextMenuHook({
+      hook: 'rangeControl',
+      buildMenuItem: this.createMenuItem.bind(this),
+    });
   },
 
   createMenuItem(moduleName, controlVariable) {

src/extra/midi-assignment/index.js

@@ -125,9 +125,7 @@ const midiAssignment = {
     });
 
     assigner.start();
-  },
 
-  modvInstall() {
     modV.addContextMenuHook({
       hook: 'rangeControl',
       buildMenuItem: this.createMenuItem.bind(this),

src/extra/shadertoy/Gallery.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <input type="text" @keypress.enter="search" class="input">
+    <ul>
+      <li
+        class="is-light"
+        v-for="result in results"
+        @click="makeModule(result)"
+      >{{ result.info.name }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import ModuleShader from '@/modv/Modules/ModuleShader';
+  import { modV } from '@/modv';
+  import axios from 'axios';
+
+  const appKey = 'rt8KwW';
+  const url = 'https://www.shadertoy.com/api/v1';
+
+  function getShaders(shaderIds) {
+    const promises = [];
+
+    shaderIds.forEach((id) => {
+      promises.push(
+        axios.get(`${url}/shaders/${id}`, {
+          params: {
+            key: appKey,
+          },
+        }),
+      );
+    });
+
+    return Promise.all(promises);
+  }
+
+  export default {
+    name: 'ShadertoyGallery',
+    data() {
+      return {
+        results: [],
+      };
+    },
+    methods: {
+      async search(e) {
+        axios.get(`${url}/shaders/query/${e.target.value}`, {
+          params: {
+            key: appKey,
+          },
+        })
+          .then(response => getShaders(response.data.Results))
+          .then((shaders) => {
+            this.results = shaders
+              .map(response => response.data.Shader)
+              .filter(shader => shader.renderpass.length < 2);
+          });
+      },
+      makeModule(result) {
+        const code = result.renderpass[0].code;
+
+        class newModule extends ModuleShader {
+          constructor() {
+            super({
+              info: {
+                name: result.info.name,
+                author: result.info.username,
+                version: 0.1,
+                uniforms: {},
+              },
+              fragmentShader: code,
+            });
+          }
+        }
+
+        modV.register(newModule);
+      },
+    },
+  };
+</script>

src/extra/shadertoy/index.js

@@ -0,0 +1,21 @@
+import store from '@/../store';
+import shadertoyStore from './store';
+import galleryTabComponent from './Gallery';
+
+const shaderToy = {
+  name: 'Shadertoy',
+  galleryTabComponent,
+
+  /**
+   * Only called when added as a Vue plugin,
+   * this must be registered with vue before modV
+   * to use vuex or vue
+   */
+  install(Vue) {
+    Vue.component(galleryTabComponent.name, galleryTabComponent);
+
+    store.registerModule('shaderToy', shadertoyStore);
+  },
+};
+
+export default shaderToy;

src/main.js

@@ -18,8 +18,8 @@ import expression from './extra/expression';
 import midiAssignment from './extra/midi-assignment';
 import featureAssignment from './extra/feature-assignment';
 import lfo from './extra/lfo';
-import frameGrab from './extra/frame-grab';
 import grabCanvas from './extra/grab-canvas';
+import shadertoy from './extra/shadertoy';
 import './assets/styles/index.scss';
 
 import attachResizeHandles from './extra/ui-resize/attach';
@@ -46,20 +46,14 @@ Vue.use(Buefy, {
 Vue.use(VueThrottleEvent);
 Vue.use(Dropdown);
 Vue.use(Shortkey);
-Vue.use(contextMenu);
-Vue.use(featureAssignment);
-Vue.use(expression);
-Vue.use(midiAssignment);
-Vue.use(lfo);
-Vue.use(grabCanvas);
 
 modV.use(contextMenu);
 modV.use(featureAssignment);
 modV.use(expression);
 modV.use(midiAssignment);
 modV.use(lfo);
-modV.use(frameGrab);
 modV.use(grabCanvas);
+modV.use(shadertoy);
 
 /* eslint-disable no-new */
 export default window.modVVue = new Vue({

src/modv/index.js

@@ -11,6 +11,7 @@ import draw from './draw';
 import setupWebGl from './webgl';
 import PaletteWorker from './palette-worker/palette-worker';
 import MediaManagerClient from './MediaManagerClient';
+import installPlugin from './install-plugin';
 
 class ModV extends EventEmitter2 {
   /**
@@ -179,11 +180,7 @@ class ModV extends EventEmitter2 {
   }
 
   use(plugin) { //eslint-disable-line
-    store.commit('plugins/addPlugin', {
-      plugin,
-    });
-
-    if ('modvInstall' in plugin) plugin.modvInstall();
+    installPlugin(plugin);
   }
 
   addContextMenuHook(hook) { //eslint-disable-line