Merge pull request #115 from 2xAA/2.0-layer-menu

Adds context menu to Layers
vcync · Nov 13, 2017 · ecc424e · ecc424e
2 parents 929c6df + eef4906
commit ecc424e
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Layer/index.vue b/src/components/Layer/index.vue
@@ -7,6 +7,7 @@
         collapsed: collapsed
       }"
       @click="focusLayer"
+      v-context-menu="menuOptions"
     >
     <div class="columns is-gapless is-multiline">
       <div class="column is-12">
@@ -61,13 +62,36 @@
   import { mapActions, mapGetters, mapMutations } from 'vuex';
   import ActiveModule from '@/components/ActiveModule';
   import draggable from 'vuedraggable';
+  import { Menu, MenuItem } from 'nwjs-menu-browser';
+
+  if (!window.nw) {
+    window.nw = {
+      Menu,
+      MenuItem,
+    };
+  }
+
+  const nw = window.nw;
 
   export default {
     name: 'layer',
     props: [
       'Layer',
       'LayerIndex',
     ],
+    data() {
+      return {
+        menuOptions: {
+          match: ['layerItem'],
+          menuItems: [],
+          createMenus: this.createMenus,
+        },
+        clearingChecked: false,
+        inheritChecked: false,
+        pipelineChecked: false,
+        drawToOutputChecked: false,
+      };
+    },
     computed: {
       modules: {
         get() {
@@ -93,6 +117,26 @@
       ]),
     },
     methods: {
+      ...mapActions('layers', [
+        'addLayer',
+        'toggleLocked',
+        'toggleCollapsed',
+        'addModuleToLayer',
+        'updateModuleOrder',
+        'moveModuleInstance',
+      ]),
+      ...mapActions('modVModules', [
+        'createActiveModule',
+      ]),
+      ...mapMutations('layers', [
+        'setLayerName',
+        'setLayerFocus',
+        'setClearing',
+        'setInherit',
+        'setInheritFrom',
+        'setPipeline',
+        'setDrawToOutput',
+      ]),
       drop(e) {
         e.preventDefault();
         const moduleName = e.item.dataset.moduleName;
@@ -122,21 +166,6 @@
           e.item.classList.remove('deletable');
         }
       },
-      ...mapActions('layers', [
-        'addLayer',
-        'toggleLocked',
-        'toggleCollapsed',
-        'addModuleToLayer',
-        'updateModuleOrder',
-        'moveModuleInstance',
-      ]),
-      ...mapActions('modVModules', [
-        'createActiveModule',
-      ]),
-      ...mapMutations('layers', [
-        'setLayerName',
-        'setLayerFocus',
-      ]),
       startNameEdit() {
         const node = this.$el.querySelector('.layer-title');
         if (node.classList.contains('editable')) return;
@@ -187,6 +216,85 @@
       clickToggleCollapse() {
         this.toggleCollapsed({ layerIndex: this.LayerIndex });
       },
+      updateChecked() {
+        const Layer = this.Layer;
+
+        this.clearingChecked = Layer.clearing;
+        this.inheritChecked = Layer.inherit;
+        this.inheritanceIndex = Layer.inheritFrom;
+        this.pipelineChecked = Layer.pipeline;
+        this.drawToOutputChecked = Layer.drawToOutput;
+      },
+      createMenus() {
+        const that = this;
+
+        this.menuOptions.menuItems.splice(0, this.menuOptions.menuItems.length);
+
+        this.menuOptions.menuItems.push(
+          new nw.MenuItem({
+            label: this.name,
+            enabled: false,
+          }),
+          new nw.MenuItem({
+            type: 'separator',
+          }),
+          new nw.MenuItem({
+            type: 'checkbox',
+            label: 'Clearing',
+            checked: this.clearingChecked,
+            click: function click() {
+              that.setClearing({
+                layerIndex: that.LayerIndex,
+                clearing: this.checked,
+              });
+            },
+          }),
+          new nw.MenuItem({
+            type: 'checkbox',
+            label: 'Inherit',
+            checked: this.inheritChecked,
+            click: function click() {
+              that.setInherit({
+                layerIndex: that.LayerIndex,
+                inherit: this.checked,
+              });
+            },
+          }),
+          new nw.MenuItem({
+            type: 'checkbox',
+            label: 'Pipeline',
+            checked: this.pipelineChecked,
+            click: function click() {
+              that.setPipeline({
+                layerIndex: that.LayerIndex,
+                pipeline: this.checked,
+              });
+            },
+          }),
+          new nw.MenuItem({
+            type: 'checkbox',
+            label: 'Draw To Output',
+            checked: this.drawToOutputChecked,
+            click: function click() {
+              that.setDrawToOutput({
+                layerIndex: that.LayerIndex,
+                drawToOutput: this.checked,
+              });
+            },
+          }),
+        );
+      },
+    },
+    beforeMount() {
+      this.updateChecked();
+    },
+    watch: {
+      Layer: {
+        handler() {
+          this.updateChecked();
+        },
+        deep: true,
+      },
     },
     components: {
       ActiveModule,

diff --git a/src/components/LayerControls.vue b/src/components/LayerControls.vue
@@ -83,10 +83,7 @@
         'setPipeline',
         'setDrawToOutput',
       ]),
-    },
-    watch: {
-      name() {
-        if (!this.Layer) return;
+      updateChecked() {
         const Layer = this.Layer;
 
         this.clearingChecked = Layer.clearing;
@@ -95,6 +92,15 @@
         this.pipelineChecked = Layer.pipeline;
         this.drawToOutputChecked = Layer.drawToOutput;
       },
+    },
+    watch: {
+      Layer: {
+        handler() {
+          if (!this.Layer) return;
+          this.updateChecked();
+        },
+        deep: true,
+      },
       clearingChecked() {
         this.setClearing({
           layerIndex: this.layerIndex,
@@ -116,12 +122,8 @@
     },
     mounted() {
       if (!this.Layer) return;
-      const Layer = this.Layer;
-      this.clearingChecked = Layer.clearing;
-      this.inheritChecked = Layer.inherit;
-      this.inheritanceIndex = Layer.inheritFrom;
-      this.pipelineChecked = Layer.pipeline;
-      this.drawToOutputChecked = Layer.drawToOutput;
+
+      this.updateChecked();
     },
   };
 </script>

diff --git a/src/extra/context-menu/Menu.vue b/src/extra/context-menu/Menu.vue
@@ -5,7 +5,7 @@
         <component
           is="contextMenuItem"
           v-for="item, idx in items"
-          :key="item"
+          :key="idx"
           :options="item"
           :parentOptions="options"
           :parentOffsetWidth="offsetWidth"

diff --git a/src/extra/context-menu/MenuHandler.vue b/src/extra/context-menu/MenuHandler.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <context-menu
-      v-for="menu in activeMenus"
+      v-for="menu, idx in activeMenus"
       :options="menu"
-      :key="menu"
+      :key="idx"
     ></context-menu>
   </div>
 </template>

diff --git a/src/extra/context-menu/index.js b/src/extra/context-menu/index.js
@@ -25,6 +25,12 @@ function buildMenu(e, id, options, vnode, store) {
   menu.$id = id;
   menu.isSubmenu = false;
 
+  if ('createMenus' in options) {
+    if (typeof options.createMenus === 'function') {
+      options.createMenus();
+    }
+  }
+
   options.menuItems.forEach((item, idx) => menu.insert(item, idx));
 
   const moduleName = vnode.context.moduleName;