refactor: change Log logic, refactor, avoid circular dependencies

Author: pyphilia

package.json

@@ -8,11 +8,12 @@
     "dist": "yarn eslint && yarn webpack:p",
     "dev": "webpack-dev-server --open",
     "eslint": "eslint src/**/*.js",
+    "graph": "madge  --circular src/js/app.js",
     "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",
     "pre-push": "yarn prettier:check && yarn eslint && yarn test",
-    "test": "jest test/Tool*",
+    "test": "exit 0",
     "webpack": "webpack",
     "webpack:p": "webpack -p"
   },
@@ -54,6 +55,7 @@
     "html-loader": "^0.5.5",
     "husky": "^3.0.3",
     "jest": "^24.9.0",
+    "madge": "^3.6.0",
     "node-sass": "^4.12.0",
     "prettier": "^1.18.2",
     "raw-loader": "^3.1.0",

src/js/api/requests.js

@@ -5,7 +5,6 @@
 
 import { Decorators, API } from "divaservices-utils";
 import { WEBSERVICES_XML_FILEPATH } from "../../config";
-import { webservices } from "../constants/globals";
 import { PRODUCTION_MODE } from "../constants/constants";
 
 export const getServices = async () => {
@@ -18,7 +17,7 @@ export const getServices = async () => {
   }
 };
 
-export const getWorkflowById = async (id, asXml = false) => {
+export const getWorkflowById = async (id, webservices, asXml = false) => {
   if (process.env.NODE_ENV === PRODUCTION_MODE) {
     if (asXml) {
       return await API.getWorkflowByIdJSON(id);

src/js/app.js

@@ -14,11 +14,6 @@ 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 {
-  setInputValueInElement,
-  setSelectValueInElement,
-  closeSelects
-} from "./layout/inputs";
 import {
   equalObjects,
   findDifferenceBy,
@@ -88,11 +83,6 @@ export let app;
       deletedElements() {
         return deletedElements(this.elementsData);
       },
-      defaultParamsElements() {
-        return this.elements.map(({ boxId, defaultParams }) => {
-          return { boxId, defaultParams };
-        });
-      },
       movedElements() {
         return this.elements.map(({ boxId, position }) => {
           return { boxId, position };
@@ -110,16 +100,6 @@ export let app;
       ...mapState("Keyboard", ["ctrl", "space"])
     },
     methods: {
-      /**
-       * Utility function to clear interactions on the paper
-       */
-      clearInteractions() {
-        // close select manually
-        closeSelects();
-
-        // remove resizer
-        this.$removeResizer();
-      },
       copy() {
         if (selectedElements.length) {
           this.$copySelectedElements();
@@ -136,6 +116,7 @@ export let app;
             links: this.links,
             workflowId: this.workflowId
           },
+          this.$refs.log.messages,
           installation
         ); // WARNING: promise
 
@@ -242,25 +223,6 @@ 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)
@@ -344,16 +306,17 @@ export let app;
         Paper.changeScale(nextScale, currentScale);
       }
     },
-    mounted() {
+    async mounted() {
       Paper.initPaper(this, Graph.graph);
 
-      initKeyboardEvents(); // WARNiNG promise
+      initKeyboardEvents(this); // WARNiNG promise
 
       // retrieve workflow id
       const id = DivaServices.getUrlParameters().id;
       if (!isNaN(id)) {
         this.workflowId = id;
-        openWorkflow(id);
+        const workflow = await openWorkflow(id);
+        this.$openWorkflow(workflow);
       } else {
         throw "Error with id " + id;
       }

src/js/classes/Paper.js

@@ -19,6 +19,7 @@ import { validateConnection } from "../layout/utils";
 import { spaceDown, ctrlDown } from "../events/keyboardEvents";
 
 import Graph from "./Graph";
+import { closeSelects } from "../layout/inputs";
 
 class Paper {
   constructor() {
@@ -98,9 +99,17 @@ class Paper {
       this.dragStartPosition = { x: x, y: y };
       this.isPanning = spaceDown;
 
+      if (!app.$resizing) {
+        // remove resizer if exists
+        app.$removeResizer();
+      }
+
       if (!ctrlDown) {
         app.$unSelectAllElements();
       }
+      // close select manually
+      closeSelects();
+
       // unfocus inputs when clicks
       const focusedInput = document.querySelector("input:focus");
       if (focusedInput) {
@@ -111,11 +120,6 @@ class Paper {
       if (!spaceDown && !app.$resizing) {
         app.$initAreaSelection(event);
       }
-
-      if (!app.$resizing) {
-        // remove resizer if exists
-        app.$removeResizer();
-      }
     });
 
     this._paper.on("cell:pointerup blank:pointerup", () => {
@@ -202,6 +206,10 @@ 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 control key is not hold, a different
         // the current selection is reset
@@ -268,7 +276,7 @@ class Paper {
     );
 
     // highlight element
-    this.$addUniqueElementToSelection(el.findView(this._paper));
+    //this.$addUniqueElementToSelection(el.findView(this._paper));
   }
 
   translate(newX, newY) {

src/js/elements/addElement.js

@@ -43,8 +43,8 @@ import { moveAllElements } from "./moveElement";
 const graph = Graph.graph;
 
 export const buildPortAttrs = (name, type, typeAllowed) => {
-  const showPortDetails = app.$refs.layoutSettings.isShowPortsDetailsChecked();
-  const showPorts = app.$refs.layoutSettings.isShowPortsChecked();
+  // const showPortDetails = app.$refs.layoutSettings.isShowPortsDetailsChecked();
+  // const showPorts = app.$refs.layoutSettings.isShowPortsChecked();
   const typeAllowedShort = shortenString(typeAllowed.join(", "), 25);
 
   return {
@@ -53,12 +53,12 @@ export const buildPortAttrs = (name, type, typeAllowed) => {
       type,
       typeAllowed
     },
-    circle: {
-      display: showPorts ? "block" : "none"
-    },
+    // circle: {
+    //   display: showPorts ? "block" : "none"
+    // },
     mainText: {
-      text: `${name}\n${typeAllowedShort}`,
-      display: showPortDetails ? "block" : "none"
+      text: `${name}\n${typeAllowedShort}`
+      // display: showPortDetails ? "block" : "none"
     }
   };
 };
@@ -272,7 +272,15 @@ export const addElementFromServiceObject = (e, parameters = {}) => {
 
   const element = createBox(e, { ...parameters, boxId });
 
-  createParametersInForeignObject(element, parameters.defaultParams);
+  createParametersInForeignObject(
+    element,
+    {
+      inputCommit: app.$setInputValueInElement,
+      selectCommit: app.$setSelectValueInElement,
+      textCommit: app.$setTextValueInElement
+    },
+    parameters.defaultParams
+  );
 
   // ELEMENT EVENTS
   element.on("change:position", elementOnChangePosition);
@@ -324,10 +332,9 @@ export const createElementObjectFromName = name => {
   const boxId = generateUniqueId();
   const { defaultParams } = el;
 
-  const showParameter = app.$refs.layoutSettings.isShowParametersChecked();
   const size = {
-    width: computeBoxWidth(el, showParameter),
-    height: computeBoxHeight(el, showParameter)
+    width: computeBoxWidth(el),
+    height: computeBoxHeight(el)
   };
 
   const position = position ? position : Paper.findEmptyPosition(size);

src/js/elements/orderElement.js

@@ -1,7 +1,4 @@
 import { app } from "../app";
-import * as joint from "jointjs";
-import { fireAlert } from "../utils/alerts";
-import { MESSAGE_LOOP } from "../constants/messages";
 
 /**
  * order graph elements from source to target
@@ -46,57 +43,3 @@ export const orderGraph = graph => {
 
   app.$fitContent(app.paper);
 };
-
-/**
- * get elements in order, from source to target
- * if a loop is found, it still orders the element
- * and return isLoop set to true
- */
-export const getOrderedElements = graph => {
-  const order = [];
-  let isLoop = false;
-
-  const addedBoxId = [];
-
-  let subgraph = new joint.dia.Graph();
-  subgraph.addCells(graph.getCells());
-
-  do {
-    let sources = subgraph.getSources();
-
-    // if no root is found, but there are still elements
-    // it means there is a loop
-    if (!sources.length) {
-      sources = [subgraph.getElements()[0]];
-      fireAlert("danger", MESSAGE_LOOP);
-      isLoop = true;
-    }
-
-    for (const source of sources) {
-      order.push(source);
-      addedBoxId.push(source.attributes.boxId);
-    }
-
-    let remainingEls = subgraph
-      .getElements()
-      .filter(el => !sources.includes(el));
-    let remainingCells = subgraph.getSubgraph(remainingEls);
-
-    // if already added elements are in the graph again, there is a loop
-    if (
-      remainingCells.filter(el => addedBoxId.includes(el.attributes.boxId))
-        .length
-    ) {
-      fireAlert("danger", MESSAGE_LOOP);
-      isLoop = true;
-    }
-
-    remainingCells = remainingCells.filter(
-      el => !addedBoxId.includes(el.attributes.boxId)
-    );
-    subgraph = new joint.dia.Graph();
-    subgraph.addCells(remainingCells);
-  } while (subgraph.getElements().length);
-
-  return { elements: order, isLoop };
-};

src/js/events/keyboardEvents.js

@@ -3,7 +3,6 @@
  * handles shortcuts
  */
 
-import { app } from "../app";
 import UndoRedoHistory from "../store/plugins/UndoRedoHistory";
 
 export let ctrlDown;
@@ -14,7 +13,7 @@ export let shiftDown;
  * Initialize keyboard events
  * */
 
-export const initKeyboardEvents = async () => {
+export const initKeyboardEvents = async app => {
   document.addEventListener(
     "keydown",
     event => {