Add a context menu with a quick option to remove node selections

src/components/ContextMenu.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import store from '@/store';
+import { computed } from '@vue/composition-api';
+
+export default {
+  setup() {
+    const rightClickMenu = computed(() => store.getters.rightClickMenu);
+
+    function clearSelection() {
+      store.commit.setSelected(new Set());
+    }
+
+    return {
+      rightClickMenu,
+      clearSelection,
+    };
+  },
+};
+</script>
+
+<template>
+  <div
+    id="right-click-menu"
+  >
+    <v-menu
+      v-model="rightClickMenu.show"
+      :position-x="rightClickMenu.left"
+      :position-y="rightClickMenu.top"
+    >
+      <v-list>
+        <v-list-item
+          dense
+          @click="clearSelection"
+        >
+          <v-list-item-content>
+            <v-list-item-title>Clear Selection</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<style>
+#right-click-menu {
+  position: absolute;
+}
+</style>

src/components/MultiLink.vue

@@ -10,7 +10,13 @@ import {
   Node, Link, SimulationLink, Dimensions,
 } from '@/types';
 
+import ContextMenu from '@/components/ContextMenu.vue';
+
 export default Vue.extend({
+  components: {
+    ContextMenu,
+  },
+
   data() {
     return {
       straightEdges: false,
@@ -408,6 +414,11 @@ export default Vue.extend({
     },
 
     rectSelectDrag(event: MouseEvent) {
+      // Only drag on left clicks
+      if (event.button !== 0) {
+        return;
+      }
+
       // Set initial location for box (pins one corner)
       this.rectSelect = {
         x: event.x - this.controlsWidth,
@@ -488,6 +499,16 @@ export default Vue.extend({
       this.$refs.svg.addEventListener('mousemove', moveFn);
       this.$refs.svg.addEventListener('mouseup', stopFn);
     },
+
+    showContextMenu(event: MouseEvent) {
+      store.commit.updateRightClickMenu({
+        show: true,
+        top: event.y,
+        left: event.x,
+      });
+
+      event.preventDefault();
+    },
   },
 });
 </script>
@@ -499,6 +520,7 @@ export default Vue.extend({
       :width="svgDimensions.width"
       :height="svgDimensions.height"
       @mousedown="rectSelectDrag"
+      @contextmenu="showContextMenu"
     >
       <rect
         id="rect-select"
@@ -637,6 +659,8 @@ export default Vue.extend({
     >
       ID: {{ tooltipMessage }}
     </div>
+
+    <context-menu />
   </div>
 </template>
 

src/store/index.ts

@@ -64,6 +64,11 @@ const {
     controlsWidth: 256,
     simulationRunning: false,
     showProvenanceVis: false,
+    rightClickMenu: {
+      show: false,
+      top: 0,
+      left: 0,
+    },
   } as State,
 
   getters: {
@@ -166,6 +171,10 @@ const {
     showProvenanceVis(state: State) {
       return state.showProvenanceVis;
     },
+
+    rightClickMenu(state: State) {
+      return state.rightClickMenu;
+    },
   },
   mutations: {
     setWorkspaceName(state, workspaceName: string) {
@@ -342,6 +351,10 @@ const {
     toggleShowProvenanceVis(state: State) {
       state.showProvenanceVis = !state.showProvenanceVis;
     },
+
+    updateRightClickMenu(state: State, payload: { show: boolean; top: number; left: number }) {
+      state.rightClickMenu = payload;
+    },
   },
   actions: {
     async fetchNetwork(context, { workspaceName, networkName }) {

src/types.ts

@@ -88,6 +88,11 @@ export interface State {
   controlsWidth: number;
   simulationRunning: boolean;
   showProvenanceVis: boolean;
+  rightClickMenu: {
+    show: boolean;
+    top: number;
+    left: number;
+  };
 }
 
 export type ProvenanceEventTypes =