refactor: highlight as plugin

Author: pyphilia

src/js/app.js

@@ -9,7 +9,6 @@ import components from "./layout/components";
 import store from "./store/store";
 import { DivaServices } from "divaservices-utils";
 import { initWebservices } from "./constants/globals";
-import { highlightSelection, unHighlight } from "./store/modules/highlight";
 import { CATEGORY_SERVICE, CATEGORY_DATATEST } from "./constants/constants";
 import { addElementFromName, addLinkFromLink } from "./elements/addElement";
 import { deleteElementByBoxId, deleteLink } from "./elements/deleteElement";
@@ -277,28 +276,6 @@ export let app;
           deleteElementByBoxId(element.boxId);
         }
       },
-      /**
-       * watches selected elements
-       */
-      selectedElements(newValue, oldValue) {
-        // highlight current selection
-        for (const { boxId } of newValue) {
-          const cellView = Paper.findViewInPaper(
-            Graph.getElementByBoxId(boxId)
-          );
-          highlightSelection(cellView);
-        }
-        // remove unselected element if not deleted
-        for (const { boxId } of oldValue.filter(el => !newValue.includes(el))) {
-          const el = Graph.getElementByBoxId(boxId);
-
-          // on delete, these might be still be selected
-          if (el) {
-            const cellView = Paper.findViewInPaper(el);
-            unHighlight(cellView);
-          }
-        }
-      },
       /**
        * watches paper scale
        */

src/js/classes/Paper.js

@@ -133,7 +133,7 @@ class Paper {
           app.elements
         );
 
-        if (selectedElements) {
+        if (selectedElements.length) {
           app.$selectElements({ elements: selectedElements });
         }
       }
@@ -215,10 +215,10 @@ class Paper {
         // the current selection is reset
 
         if (!ctrlDown) {
-          app.$unSelectAllElements();
+          app.$addUniqueElementToSelection(cellView);
+        } else {
+          app.addElementToSelection(cellView);
         }
-
-        app.addElementToSelection(cellView);
       } else {
         app.$initResize(e);
       }
@@ -274,9 +274,6 @@ class Paper {
       -bbox.x + canvasDimensions.width / 2 - bbox.width / 2,
       -bbox.y + canvasDimensions.height / 2 - bbox.height / 2
     );
-
-    // highlight element
-    //this.$addUniqueElementToSelection(el.findView(this._paper));
   }
 
   translate(newX, newY) {
@@ -288,6 +285,10 @@ class Paper {
     return el.findView(this._paper);
   }
 
+  getViewFromBoxId(boxId) {
+    return this.findViewInPaper(Graph.getElementByBoxId(boxId));
+  }
+
   // helper function to find an empty position to add
   // an element without overlapping other ones
   // it tries to fill the canvas view first horizontally

src/js/layout/components/toolsbar.js

@@ -23,7 +23,6 @@ import {
 import { mapState, mapActions } from "vuex";
 import { TOOLSBAR } from "../../constants/selectors";
 import { shortcutToString } from "../../utils/utils";
-import Graph from "../../classes/Graph";
 import Paper from "../../classes/Paper";
 
 const Toolsbar = Vue.component("Toolsbar", {
@@ -131,8 +130,8 @@ const Toolsbar = Vue.component("Toolsbar", {
         {
           resize: {
             action: () => {
-              const cellView = Paper.findViewInPaper(
-                Graph.getElementByBoxId(this.selectedElements[0].boxId)
+              const cellView = Paper.getViewFromBoxId(
+                this.selectedElements[0].boxId
               );
               this.$createResizer(this.elements, cellView);
             },

src/js/store/modules/highlight.js

@@ -0,0 +1,93 @@
+/**
+ * This file contains highlight-related functions
+ * Highlights appear when a box is selected
+ */
+
+import { BOX_HIGHLIGHTERS } from "../../constants/constants";
+import Paper from "../../classes/Paper";
+
+const HighlightPlugin = store => {
+  store.subscribe(({ type }, { Interface }) => {
+    // @TODO optimize with only changed values
+    switch (type) {
+      case "Interface/ADD_ELEMENT_TO_SELECTION":
+      case "Interface/UNSELECT_ALL_ELEMENTS":
+      case "Interface/ADD_UNIQUE_ELEMENT_TO_SELECTION":
+      case "Interface/ADD_ELEMENTS_TO_SELECTION": {
+        console.log(type, Interface);
+        for (const element of Interface.elements) {
+          const cellView = Paper.getViewFromBoxId(element.boxId);
+          if (element.selected) {
+            highlightSelection(cellView);
+          } else {
+            unHighlight(cellView);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  });
+};
+
+export default HighlightPlugin;
+
+function highlightSelection(cellView) {
+  if (cellView) {
+    for (const highlight of BOX_HIGHLIGHTERS) {
+      cellView.highlight(null, highlight);
+    }
+
+    // if(!cellView.el.querySelector(`.${HIGHLIGHT_TOOLSBAR}`)) {
+
+    //   appendHighlightToolsbar(cellView)
+
+    // }
+  }
+}
+
+/**
+ * remove highlight on given cellView
+ *
+ * @param {cellView} cellView
+ */
+function unHighlight(cellView) {
+  for (const highlight of BOX_HIGHLIGHTERS) {
+    cellView.unhighlight(null, highlight);
+  }
+
+  // removeHighlightToolsbar(cellView)
+}
+
+/**
+ * remove highlight for all given elements
+ *
+ * @param {array} elements
+ */
+// function unHighlightAllElements(elements) {
+//   for (const el of elements) {
+//     unHighlight(el);
+//   }
+// }
+
+/**
+ * reset highlight on element
+ *
+ * @param {element} element
+ */
+// const resetHighlight = element => {
+//   unHighlight(element);
+//   highlightSelection(element);
+// };
+
+/**
+ * reset highlight on all elements
+ *
+ * @param {araay} elements
+ */
+// function resetHighlightAllElements(elements) {
+//   for (const el of elements) {
+//     resetHighlight(el);
+//   }
+// }

src/js/store/plugins/HighlightPlugin.js

@@ -6,6 +6,7 @@ import { cloneDeep } from "lodash";
 import UndoRedoHistory from "./UndoRedoHistory";
 
 // operations which can be undo/redo
+// @TODO messages constants
 const savedOperations = [
   "Interface/INIT_GRAPH",
   "Interface/INIT_PAPER",

src/js/store/plugins/UndoRedoPlugin.js

@@ -2,6 +2,10 @@ import { app } from "../../app";
 const HIGHLIGHT_TOOLSBAR = "highlight-toolsbar";
 const MARGIN = 15;
 
+// const removeHighlightToolsbar = (cellView) => {
+//   cellView.el.querySelector(`.${HIGHLIGHT_TOOLSBAR}`).remove();
+// }
+
 /**
  * Append a highlight toolbar
  * state: on development

src/js/store/modules/highlightToolsbar.js src/js/store/plugins/highlightToolsbar.js

@@ -1,3 +1,4 @@
-import undoRedoPlugin from "./UndoRedoPlugin";
+import UndoRedoPlugin from "./UndoRedoPlugin";
+import HighlightPlugin from "./HighlightPlugin";
 
-export default [undoRedoPlugin];
+export default [UndoRedoPlugin, HighlightPlugin];