refactor: refactor structure, watch functions in plugins

Author: pyphilia

src/index.html

@@ -67,7 +67,9 @@
                 :undo="undo"
                 :redo="redo"
                 :can-undo="canUndo"
-                :can-redo="canRedo">
+                :can-redo="canRedo"
+                :resize-commit="resizeElementByBoxId"
+                >
                 </toolsbar>
 
                 <search-elements

src/js/api/requests.js

@@ -5,7 +5,7 @@
 
 import { Decorators, API } from "divaservices-utils";
 import { WEBSERVICES_XML_FILEPATH } from "../../config";
-import { PRODUCTION_MODE } from "../constants/constants";
+import { PRODUCTION_MODE } from "../utils/constants";
 
 export const getServices = async () => {
   if (process.env.NODE_ENV === PRODUCTION_MODE) {

src/js/app.js

@@ -1,28 +1,21 @@
 import Vue from "vue";
 import { mapActions, mapState } from "vuex";
-import plugins from "./plugins";
 
 import Graph from "./classes/Graph";
 import Paper from "./classes/Paper";
 
-import components from "./layout/components";
+import components from "./components";
 import store from "./store/store";
 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 } from "./elements/deleteElement";
-import { findDifferenceBy } from "./utils/utils";
+import { initWebservices } from "./utils/globals";
 import {
   selectedElements,
   copiedElements,
   deletedElements,
   currentElements,
   currentDataElements
 } from "./store/modules/utils";
-import { addDataBox } from "./elements/addDataElement";
-import { initSplit } from "./layout/split";
-import { initKeyboardEvents } from "./events/keyboardEvents";
+import { initSplit } from "./utils/split";
 import { initTour } from "./utils/walkthrough";
 import { openWorkflow } from "./workflows/openWorkflow";
 import UndoRedoHistory from "./store/plugins/UndoRedoHistory";
@@ -31,16 +24,15 @@ import {
   MESSAGE_SAVE_SUCCESS,
   MESSAGE_COPY_SUCCESS,
   MESSAGE_COPY_ERROR
-} from "./constants/messages";
+} from "./utils/messages";
 import { saveWorkflow } from "./workflows/saveWorkflow";
+import { initKeyboardEvents } from "./events/keyboardEvents";
 
 export let app;
 
 (async () => {
   await initWebservices();
 
-  plugins.forEach(x => Vue.use(x));
-
   app = new Vue({
     el: "#app",
     store,
@@ -77,15 +69,15 @@ export let app;
         return deletedElements(this.elementsData);
       },
       movedElements() {
-        return this.elements.map(({ boxId, position }) => {
+        return this.currentElements.map(({ boxId, position }) => {
           return { boxId, position };
         });
       },
       dataElements() {
         return this.dataTest;
       },
       logElements() {
-        return this.elements.map(({ boxId, type, defaultParams }) => ({
+        return this.currentElements.map(({ boxId, type, defaultParams }) => ({
           boxId,
           type,
           defaultParams
@@ -167,68 +159,6 @@ export let app;
       ])
     },
     watch: {
-      /**
-       * watches current elements
-       * add new elements, remove deleted elements
-       */
-      currentElements: {
-        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;
-            switch (category) {
-              case CATEGORY_SERVICE:
-                addElementFromName(type, el);
-                break;
-              case CATEGORY_DATATEST:
-                addDataBox(el);
-                break;
-              default:
-                console.log("ERROR ADDING EL");
-            }
-          }
-        }
-      },
-
-      /**
-       * watches current data elements
-       * current state: debug
-       */
-      currentDataElements: {
-        deep: true,
-        handler(newValue, oldValue) {
-          const difference = findDifferenceBy(newValue, oldValue, "boxId");
-          console.log("TCL: handler -> difference", difference);
-          for (const el of difference) {
-            console.log(el);
-            // const { boxId, defaultParams } = el;
-            // @TODO: suppose one image
-            // updateImgPreview(this.id, data);
-          }
-        }
-      },
-
-      /**
-       * watch links
-       * on direct operation, nothing changes (mechanic operation)
-       * on start, add parsed links
-       * apply changes on undo-redo
-       */
-      links(newValue) {
-        for (const l of Graph.getNewLinks(newValue)) {
-          addLinkFromLink(l);
-        }
-      },
-      /**
-       * watches deleted elements
-       */
-      deletedElements(newValue) {
-        // if element is not in elements but exist in graph, delete it
-        // @TODO: optimize ?
-        for (const element of Graph.getElementsInGraph(newValue)) {
-          deleteElementByBoxId(element.boxId);
-        }
-      },
       /**
        * watches paper scale
        */

src/js/classes/AreaSelection.js

@@ -0,0 +1,123 @@
+/**
+ * Area Selection plugin
+ * allows selecting multiple elements from a rectangle selection
+ */
+
+import { AREA_SELECTION_ELEMENT } from "../utils/selectors";
+
+class AreaSelection {
+  constructor(commit) {
+    this.areaSelectionElement = document.getElementById(AREA_SELECTION_ELEMENT);
+    this.active = false;
+
+    this.x1 = 0;
+    this.y1 = 0;
+    this.x2 = 0;
+    this.y2 = 0;
+
+    this.commit = commit;
+  }
+
+  get isActive() {
+    return this.active;
+  }
+
+  /**
+   * draw rectangle selection
+   *
+   * @param {number} x1
+   * @param {number} x2
+   * @param {number} y1
+   * @param {number} y2
+   */
+  reCalc(x1, x2, y1, y2) {
+    const x3 = Math.min(x1, x2);
+    const x4 = Math.max(x1, x2);
+    const y3 = Math.min(y1, y2);
+    const y4 = Math.max(y1, y2);
+    this.areaSelectionElement.style.left = x3 + "px";
+    this.areaSelectionElement.style.top = y3 + "px";
+    this.areaSelectionElement.style.width = x4 - x3 + "px";
+    this.areaSelectionElement.style.height = y4 - y3 + "px";
+  }
+
+  /**
+   * find elements in given area, defined with x, y, width and height
+   *
+   * @param {number} x
+   * @param {number} y
+   * @param {number} width
+   * @param {number} height
+   */
+  findViewsInAreaCustom(elements, { x, y, width, height }) {
+    return elements.filter(el => {
+      return !(
+        x > el.position.x + el.size.width ||
+        x + width < el.position.x ||
+        y > el.position.y + el.size.height ||
+        y + height < el.position.y
+      );
+    });
+  }
+
+  /**
+   * begin selection operation
+   */
+  init(event) {
+    this.active = true;
+    this.x1 = event.clientX;
+    this.y1 = event.clientY;
+    this.x2 = event.clientX;
+    this.y2 = event.clientY;
+    this.reCalc(this.x1, this.x2, this.y1, this.y2);
+    this.areaSelectionElement.hidden = 0;
+  }
+
+  /**
+   * end selection operation
+   */
+  end(
+    { x: paperOffsetX, y: paperOffsetY },
+    { tx: paperTranslateX, ty: paperTranslateY },
+    scale,
+    elements
+  ) {
+    this.active = false;
+
+    const {
+      x,
+      y,
+      width,
+      height
+    } = this.areaSelectionElement.getBoundingClientRect();
+
+    const pointX = (x - paperOffsetX - paperTranslateX) / scale;
+    const pointY = (y - paperOffsetY - paperTranslateY) / scale;
+
+    const selectedElements = this.findViewsInAreaCustom(elements, {
+      x: pointX,
+      y: pointY,
+      width: width / scale,
+      height: height / scale
+    });
+
+    this.areaSelectionElement.hidden = 1;
+
+    if (selectedElements.length) {
+      this.commit({ elements: selectedElements });
+    }
+  }
+
+  /**
+   * translate mouse coordinate to paper coordinate to draw selection
+   */
+  compute() {
+    if (this.active) {
+      this.x2 = event.clientX;
+      this.y2 = event.clientY;
+      this.reCalc(this.x1, this.x2, this.y1, this.y2);
+    }
+  }
+}
+
+export default AreaSelection;