refactor: move to undo plugin

Author: pyphilia

package.json

@@ -8,7 +8,7 @@
     "dist": "yarn eslint && yarn webpack:p",
     "dev": "webpack-dev-server --open",
     "eslint": "eslint src/**/*.js",
-    "graph": "madge  --circular src/js/app.js",
+    "graph": "madge  --circular --extensions js src/js/layout/components",
     "prettier:check": "prettier --check \"src/**/*.js\" \"src/**/*.scss\" \"test/*.js\"",
     "prettier:write": "prettier --write \"src/**/*.js\" \"src/**/*.scss\" \"test/*.js\"",
     "pre-commit": "yarn prettier:check && yarn eslint && yarn test",

src/js/app.js

@@ -11,21 +11,15 @@ import { DivaServices } from "divaservices-utils";
 import { initWebservices } from "./constants/globals";
 import { CATEGORY_SERVICE, CATEGORY_DATATEST } from "./constants/constants";
 import { addElementFromName, addLinkFromLink } from "./elements/addElement";
-import { deleteElementByBoxId, deleteLink } from "./elements/deleteElement";
-import { resizeElements } from "./elements/resizeElement";
-import {
-  equalObjects,
-  findDifferenceBy,
-  getDeletedElements
-} from "./utils/utils";
+import { deleteElementByBoxId } from "./elements/deleteElement";
+import { findDifferenceBy } from "./utils/utils";
 import {
   selectedElements,
   copiedElements,
   deletedElements,
   currentElements,
   currentDataElements
 } from "./store/modules/utils";
-import { moveElements } from "./elements/moveElement";
 import { addDataBox } from "./elements/addDataElement";
 import { initSplit } from "./layout/split";
 import { initKeyboardEvents } from "./events/keyboardEvents";
@@ -39,7 +33,6 @@ import {
   MESSAGE_COPY_ERROR
 } from "./constants/messages";
 import { saveWorkflow } from "./workflows/saveWorkflow";
-import {setInputValueInElement, setSelectValueInElement} from "./layout/inputs"
 
 export let app;
 
@@ -88,16 +81,6 @@ export let app;
           return { boxId, position };
         });
       },
-      resizedElements() {
-        return this.elements.map(({ boxId, size }) => {
-          return { boxId, size };
-        });
-      },
-      defaultParamsElements() {
-        return this.elements.map(({ boxId, defaultParams }) => {
-          return { boxId, defaultParams };
-        });
-      },
       dataElements() {
         return this.dataTest;
       },
@@ -146,14 +129,10 @@ export let app;
       undo() {
         UndoRedoHistory.undo();
       },
-
-      addElementToSelection(cellView) {
-        this.$addElementToSelection(cellView);
-      },
-      addLinkFromApp(payload) {
+      addLink(payload) {
         this.$addLink({ ...payload });
       },
-      deleteLinkFromApp(payload) {
+      deleteLink(payload) {
         this.$deleteLink({ ...payload });
       },
       deleteElementByCellView(cellView) {
@@ -162,7 +141,6 @@ export let app;
           elements: [this.elements.find(el => el.boxId === boxId)]
         });
       },
-
       resizeElementByBoxId(boxId, size) {
         const element = this.elements.find(el => el.boxId === boxId);
         this.$resizeElement({ element, size });
@@ -194,7 +172,7 @@ export let app;
        * add new elements, remove deleted elements
        */
       currentElements: {
-        handler(newValue, oldValue) {
+        handler(newValue) {
           // if boxId element does not exist in the graph, we add it
           for (const el of Graph.getNewElements(newValue)) {
             const { type, category } = el;
@@ -209,12 +187,6 @@ export let app;
                 console.log("ERROR ADDING EL");
             }
           }
-
-          // remove element removed from arr
-          // cannot use arr.includes because states are deep cloned
-          for (const el of getDeletedElements(oldValue, newValue)) {
-            deleteElementByBoxId(el.boxId);
-          }
         }
       },
 
@@ -235,70 +207,17 @@ export let app;
           }
         }
       },
-      
-      /**
-       * watch parameters of elements
-       * on direct changes, nothing changes (mechanic operation)
-       * only apply changes on undo-redo
-       */
-      defaultParamsElements: {
-        deep: true,
-        handler(newValue, oldValue) {
-          const difference = findDifferenceBy(
-            newValue,
-            oldValue,
-            "defaultParams"
-          );
-          for (const box of difference) {
-            setSelectValueInElement(box);
-            setInputValueInElement(box);
-          }
-        }
-      },
 
-      /**
-       * watch moved elements
-       * on direct move operation, nothing changes (mechanic operation)
-       * only apply changes on undo-redo
-       */
-      movedElements: {
-        deep: true,
-        handler(newValue, oldValue) {
-          const difference = findDifferenceBy(newValue, oldValue, "position");
-          moveElements(difference);
-        }
-      },
-      /**
-       * watch moved elements
-       * on direct resize operation, nothing changes (mechanic operation)
-       * only apply changes on undo-redo
-       */
-      resizedElements: {
-        deep: true,
-        handler(newValue, oldValue) {
-          const difference = findDifferenceBy(newValue, oldValue, "size");
-          resizeElements(difference);
-        }
-      },
       /**
        * watch links
        * on direct operation, nothing changes (mechanic operation)
        * on start, add parsed links
        * apply changes on undo-redo
        */
-      links(newValue, oldValue) {
+      links(newValue) {
         for (const l of Graph.getNewLinks(newValue)) {
           addLinkFromLink(l);
         }
-
-        // remove links removed from arr
-        // cannot use arr.includes because states are deep cloned
-        for (const el of oldValue.filter(
-          el => newValue.filter(v => equalObjects(v, el)).length === 0
-        )) {
-          const link = Graph.getLinkBySourceTarget(el.source, el.target);
-          deleteLink(link);
-        }
       },
       /**
        * watches deleted elements

src/js/classes/Graph.js

@@ -31,6 +31,10 @@ class Graph {
     return arr.filter(({ boxId }) => !this.getElementByBoxId(boxId));
   }
 
+  getLinkById(id) {
+    return this._graph.getCell(id);
+  }
+
   /**
    * return links which exist in links, but not in the graph
    *

src/js/classes/Paper.js

@@ -174,7 +174,7 @@ class Paper {
             distance: -30,
             action: function() {
               this.model.remove({ ui: true, tool: this.cid });
-              app.deleteLinkFromApp({ link: this.model });
+              app.deleteLink({ link: this.model });
             }
           })
         ]
@@ -187,7 +187,7 @@ class Paper {
     });
 
     this._paper.on("link:connect", linkView => {
-      app.addLinkFromApp({ link: linkView.model.attributes });
+      app.addLink({ link: linkView.model.attributes });
     });
 
     this._paper.on(
@@ -206,18 +206,18 @@ class Paper {
     /**SELECTION*/
 
     this._paper.on("element:pointerdown", (cellView, e) => {
-      if (!app.$resizing) {
-        // remove resizer if exists
-        app.$removeResizer();
-      }
       if (cellView.model.attributes.class != "resizer") {
+        if (!app.$resizing) {
+          // remove resizer if exists
+          app.$removeResizer();
+        }
+
         // if control key is not hold, a different
         // the current selection is reset
-
         if (!ctrlDown) {
           app.$addUniqueElementToSelection(cellView);
         } else {
-          app.addElementToSelection(cellView);
+          app.$addElementToSelection(cellView);
         }
       } else {
         app.$initResize(e);
@@ -242,7 +242,7 @@ class Paper {
         app.$unSelectAllElements();
       }
 
-      app.addElementToSelection(cellView);
+      app.$addElementToSelection(cellView);
       contextMenu.setPositionToContextMenu(CONTEXT_MENU_ELEMENT, { x, y });
       return false;
     });

src/js/elements/deleteElement.js

@@ -28,3 +28,8 @@ export const deleteLink = link => {
     link.remove();
   }
 };
+
+export const deleteLinkById = id => {
+  const link = Graph.getLinkById(id);
+  deleteLink(link);
+};

src/js/store/modules/Interface.js

@@ -18,7 +18,8 @@ import {
   addLinktoLinks,
   removeLinksWithDeletedElements,
   unSelectAllElements,
-  findElementByBoxId
+  findElementByBoxId,
+  buildLinkForStore
 } from "./utils";
 import {
   ADD_ELEMENT,
@@ -187,8 +188,9 @@ const Interface = {
     $setTextValueInElement({ commit }, payload) {
       commit(SET_INPUT_VALUE, { type: Types.TEXT.type, ...payload });
     },
-    $addLink({ commit }, payload) {
-      commit(ADD_LINK, payload);
+    $addLink({ commit }, { link }) {
+      const l = buildLinkForStore(link);
+      commit(ADD_LINK, { link: l });
     },
     $deleteLink({ commit }, payload) {
       commit(DELETE_LINK, payload);

src/js/store/modules/utils.js

@@ -82,8 +82,7 @@ export const deleteLink = (links, link) => {
  * @param {graph} graph
  */
 export const addLinktoLinks = (links, link) => {
-  const l = buildLinkForStore(link);
-  links.push(l);
+  links.push(link);
 };
 
 /**

src/js/store/plugins/ElementPlugin.js

@@ -0,0 +1,59 @@
+import { addElementFromName, addLinkFromLink } from "../../elements/addElement";
+import { addDataBox } from "../../elements/addDataElement";
+import { CATEGORY_SERVICE, CATEGORY_DATATEST } from "../../constants/constants";
+import { deleteLinkById } from "../../elements/deleteElement";
+
+const ElementPlugin = store => {
+  store.subscribe(({ type, payload }) => {
+    // @TODO optimize with only changed values
+    switch (type) {
+      case "Interface/ADD_ELEMENT": {
+        addElement(payload);
+        break;
+      }
+      case "Interface/ADD_ELEMENTS": {
+        for (const el of payload.elements) {
+          addElement(el);
+        }
+        break;
+      }
+      case "Interface/ADD_LINK": {
+        addLinkFromLink(payload.link);
+        break;
+      }
+      case "Interface/DELETE_LINK": {
+        deleteLinkById(payload.link);
+        break;
+      }
+      case "Interface/OPEN_WORKFLOW": {
+        console.log(payload);
+        const { elements, links } = payload;
+        for (const el of elements) {
+          addElement(el);
+        }
+        for (const link of links) {
+          addLinkFromLink(link);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  });
+};
+
+const addElement = el => {
+  const { type, category } = el;
+  switch (category) {
+    case CATEGORY_SERVICE:
+      addElementFromName(type, el);
+      break;
+    case CATEGORY_DATATEST:
+      addDataBox(el);
+      break;
+    default:
+      console.log("ERROR ADDING EL");
+  }
+};
+
+export default ElementPlugin;

src/js/store/plugins/HighlightPlugin.js

@@ -14,7 +14,9 @@ const HighlightPlugin = store => {
       case "Interface/UNSELECT_ALL_ELEMENTS":
       case "Interface/ADD_UNIQUE_ELEMENT_TO_SELECTION":
       case "Interface/ADD_ELEMENTS_TO_SELECTION": {
-        for (const element of Interface.elements) {
+        for (const element of Interface.elements.filter(
+          ({ deleted }) => !deleted
+        )) {
           const cellView = Paper.getViewFromBoxId(element.boxId);
           if (element.selected) {
             highlightSelection(cellView);