refactor: refactor

Author: pyphilia

src/js/app.js

@@ -11,7 +11,6 @@ import { initWebservices } from "./utils/globals";
 import {
   selectedElements,
   copiedElements,
-  deletedElements,
   currentElements,
   currentDataElements
 } from "./store/modules/utils";
@@ -65,9 +64,6 @@ export let app;
       copiedElements() {
         return copiedElements(this.elementsData);
       },
-      deletedElements() {
-        return deletedElements(this.elementsData);
-      },
       movedElements() {
         return this.currentElements.map(({ boxId, position }) => {
           return { boxId, position };

src/js/store/plugins/ElementPlugin.js

@@ -1,5 +1,8 @@
 import { addLinkFromLink, addElement } from "../../elements/addElement";
-import { deleteLinkById } from "../../elements/deleteElement";
+import {
+  deleteLinkById,
+  deleteElementByBoxId
+} from "../../elements/deleteElement";
 
 const ElementPlugin = store => {
   store.subscribe(({ type, payload }) => {
@@ -15,6 +18,12 @@ const ElementPlugin = store => {
         }
         break;
       }
+      case "Interface/DELETE_ELEMENTS": {
+        for (const el of payload.elements) {
+          deleteElementByBoxId(el.boxId);
+        }
+        break;
+      }
       case "Interface/ADD_LINK": {
         addLinkFromLink(payload.link);
         break;

src/js/store/plugins/UndoRedoHistory.js

@@ -79,10 +79,12 @@ class UndoRedoHistory {
     }
   }
 
+  // @TODO keep track of actual transaction and optimize update loops
   reportChanges(prevState, nextState) {
     const { elements: prevElements, links: prevLinks } = prevState.Interface;
     const { elements: nextElements, links: nextLinks } = nextState.Interface;
 
+    // watch elements and add them if they dont exist in the graph
     for (const el of Graph.getNewElements(nextElements)) {
       addElement(el);
     }
@@ -95,9 +97,6 @@ class UndoRedoHistory {
 
     /**
      * watch links
-     * on direct operation, nothing changes (mechanic operation)
-     * on start, add parsed links
-     * apply changes on undo-redo
      */
     for (const l of Graph.getNewLinks(nextLinks)) {
       addLinkFromLink(l);
@@ -114,25 +113,18 @@ class UndoRedoHistory {
 
     /**
      * watch parameters of elements
-     * on direct changes, nothing changes (mechanic operation)
-     * only apply changes on undo-redo
      */
-    // check params diff
-    const paramsDifference = findDifferenceBy(
+    for (const box of findDifferenceBy(
       nextElements,
       prevElements,
       "defaultParams"
-    );
-
-    for (const box of paramsDifference) {
+    )) {
       setSelectValueInElement(box);
       setInputValueInElement(box);
     }
 
     /**
      * watch moved elements
-     * on direct move operation, nothing changes (mechanic operation)
-     * only apply changes on undo-redo
      */
     const moveDifference = findDifferenceBy(
       nextElements,
@@ -142,9 +134,7 @@ class UndoRedoHistory {
     moveElements(moveDifference);
 
     /**
-     * watch moved elements
-     * on direct resize operation, nothing changes (mechanic operation)
-     * only apply changes on undo-redo
+     * watch resized elements
      */
     const resizeDifference = findDifferenceBy(
       nextElements,

src/js/utils/utils.js

@@ -253,11 +253,15 @@ export const findDifferenceBy = (a, b, param) => {
 
 /**
  * compare arr and newArr and return deleted elements (which do not exist in newArr)
+ * or the ones newly marked as deleted
  * @param {array} arr
  * @param {array} newArr
  */
 export const getDeletedElements = (arr, newArr) => {
-  return arr.filter(el => !newArr.find(v => v.boxId == el.boxId));
+  return arr.filter(el => {
+    const newEl = newArr.find(v => v.boxId == el.boxId);
+    return !newEl || newEl.deleted;
+  });
 };
 
 /**