refactor: on areaselection, intersect with actual rect elements

Previously it could select elements if the port intersects with the area selection

Author: pyphilia

src/js/app.js

@@ -152,7 +152,8 @@ export let app;
         "moveSelectedElements",
         "resizeElement",
         "openWorkflow",
-        "updateDataInDataElement"
+        "updateDataInDataElement",
+        "selectElements"
       ])
     },
     watch: {

src/js/plugins/AreaSelectionPlugin.js

@@ -14,11 +14,21 @@ const reCalc = (x1, x2, y1, y2) => {
   div.style.height = y4 - y3 + "px";
 };
 
+const findViewsInAreaCustom = ({ x, y, width, height }) => {
+  return app.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
+    );
+  });
+};
+
 const plugin = {
   install(Vue) {
     Vue.prototype.$areaSelection = Vue.observable({
-      active: false,
-      selectedElements: []
+      active: false
     });
     let x1 = 0;
     let y1 = 0;
@@ -46,15 +56,15 @@ const plugin = {
       const pointX = (x - paperOffsetX - paperTranslateX) / currentScale;
       const pointY = (y - paperOffsetY - paperTranslateY) / currentScale;
 
-      Vue.prototype.$areaSelection.selectedElements = paper.findViewsInArea({
+      const selectedElements = findViewsInAreaCustom({
         x: pointX,
         y: pointY,
         width: width / currentScale,
         height: height / currentScale
       });
 
-      for (const views of Vue.prototype.$areaSelection.selectedElements) {
-        app.addElementToSelection(views);
+      if (selectedElements) {
+        app.selectElements({ elements: selectedElements });
       }
 
       div.hidden = 1;

src/js/store/modules/Interface.js

@@ -170,6 +170,9 @@ const Interface = {
     unSelectAllElements({ commit }) {
       commit(UNSELECT_ALL_ELEMENTS);
     },
+    selectElements({ commit }, payload) {
+      commit(ADD_ELEMENTS_TO_SELECTION, payload);
+    },
     selectAllElements({ commit, state }) {
       commit(ADD_ELEMENTS_TO_SELECTION, { elements: state.elements });
     },