Smooth sticky lines

pandora_console/include/visual-console-client/vc.main.css

@@ -9,21 +9,11 @@
 
 .visual-console-item {
   position: absolute;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: initial;
-  -webkit-box-direction: initial;
-      -ms-flex-direction: initial;
-          flex-direction: initial;
+  flex-direction: initial;
   justify-items: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
+  align-items: center;
+  user-select: text;
   z-index: 1;
 }
 
@@ -37,12 +27,8 @@
 
 .visual-console-item.is-editing {
   border: 2px dashed #b2b2b2;
-  -webkit-transform: translateX(-2px) translateY(-2px);
-          transform: translateX(-2px) translateY(-2px);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  transform: translateX(-2px) translateY(-2px);
+  user-select: none;
 }
 
 .visual-console-item.is-editing:hover {
@@ -69,25 +55,12 @@
   pointer-events: none;
 }
 
-@-webkit-keyframes spinner-loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(1turn);
-            transform: rotate(1turn);
-  }
-}
-
 @keyframes spinner-loading {
   0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(1turn);
-            transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 
@@ -99,15 +72,10 @@
   border-bottom: 5px solid rgb(82, 85, 87);
   border-left: 5px solid rgba(82, 85, 87, 0.2);
 
-  -webkit-animation-name: spinner-loading;
-
-          animation-name: spinner-loading;
-  -webkit-animation-duration: 0.8s;
-          animation-duration: 0.8s;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
+  animation-name: spinner-loading;
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
 }
 
 .visual-console-spinner,
@@ -128,12 +96,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   opacity: 0.7;
   background: rgb(212, 215, 218);
   z-index: 2;
@@ -149,18 +113,10 @@
 
 /*Forms*/
 .div-input-group label {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   font-size: 12pt;
   font-family: "lato-bolder", "Open Sans", sans-serif;
   font-weight: 600;
@@ -182,8 +138,7 @@
   font-family: "lato-bolder", "Open Sans", sans-serif;
   font-weight: lighter;
   padding: 0px 0px 2px 0px;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   margin-right: 10px;
   padding-left: 2px;
 }
@@ -201,15 +156,9 @@
 }
 
 .input-groups {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-direction: column;
+  flex-wrap: wrap;
 }
 
 .input-group {
@@ -219,18 +168,10 @@
 }
 
 .div-ranges-input-group {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .div-ranges-input-group > div {
@@ -240,18 +181,10 @@
 
 .div-input-group,
 .div-input-group div div {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
 .div-input-group h3 {
@@ -268,21 +201,11 @@
 }
 
 .div-input-group-autocomplete-agent {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
   height: 70px;
 }
 
@@ -345,34 +268,19 @@ p.error-p-validate {
 }
 
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
 }
 
 .fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8);
-}
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  animation: fa-spin 1s infinite steps(8);
 }
 
 @keyframes fa-spin {
   0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -426,19 +334,11 @@ p.error-p-validate {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: column;
+  justify-content: center;
   justify-items: center;
-  -ms-flex-line-pack: center;
-      align-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-content: center;
+  align-items: center;
 }
 
 .visual-console-item .digital-clock > span {
@@ -468,18 +368,15 @@ p.error-p-validate {
 }
 
 .visual-console-item .analogic-clock .hour-hand {
-  -webkit-animation: rotate-hour 43200s infinite linear;
-          animation: rotate-hour 43200s infinite linear;
+  animation: rotate-hour 43200s infinite linear;
 }
 
 .visual-console-item .analogic-clock .minute-hand {
-  -webkit-animation: rotate-minute 3600s infinite linear;
-          animation: rotate-minute 3600s infinite linear;
+  animation: rotate-minute 3600s infinite linear;
 }
 
 .visual-console-item .analogic-clock .second-hand {
-  -webkit-animation: rotate-second 60s infinite linear;
-          animation: rotate-second 60s infinite linear;
+  animation: rotate-second 60s infinite linear;
 }
 
 #html-tabs .ui-widget-header {
@@ -489,19 +386,10 @@ p.error-p-validate {
 
 #html-tabs .ui-tabs-anchor {
   float: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
 #html-tabs .ui-tabs-anchor img {
@@ -535,22 +423,13 @@ li#li-position-item > label:not(:first-child) {
 }
 
 li#li-image-item label {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  flex-direction: row;
+  justify-content: flex-end;
 }
 
 li#li-image-item label img {
-  -webkit-box-flex: initial;
-      -ms-flex: initial;
-          flex: initial;
+  flex: initial;
 }
 
 .discovery.modal * {
@@ -579,9 +458,7 @@ li#li-image-item label img {
 
 li#li-timeZone-item > label:not(:first-child),
 .discovery.modal li#div-textarea-label > label {
-  -webkit-box-flex: inherit;
-      -ms-flex: inherit;
-          flex: inherit;
+  flex: inherit;
 }
 
 li#li-timeZone-item > select:not(:first-child) {
@@ -594,13 +471,8 @@ li#li-timeZone-item > select:not(:first-child) {
 
 /*style item group show statistic*/
 .group-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
@@ -610,120 +482,63 @@ li#li-timeZone-item > select:not(:first-child) {
   background-color: #9d9ea0;
   color: black;
   font-weight: bold;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 .group-container .group-item-info {
   width: 100%;
   height: 70%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-direction: row;
+  flex-wrap: wrap;
   padding: 2%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 .group-container .group-item-info .group-item-info-container {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 20%;
-          flex: 1 1 20%;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 1 1 20%;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   border-radius: 2px;
   max-height: 50px;
   margin: 1%;
 }
 
 .group-container .group-item-info .group-item-info-container .value-style {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   color: #fff;
   font-size: 100%;
   padding: 5%;
   width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .group-container .group-item-info .group-item-info-container .name-style {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   background-color: white;
   color: black;
   font-size: 100%;
   padding: 5%;
   width: 100%;
   height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 div.label,
 div.simple-value {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
   min-width: fit-content;
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
   min-height: fit-content;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: column;
+  justify-content: center;
 }
 
 div.simple-value > div {
@@ -737,27 +552,15 @@ div.module-graph .parent_graph p table tr {
 div.module-graph {
   width: 100%;
   height: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
 div.module-graph .gauge_d3_class {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 100px;
-          flex: 1 1 100px;
+  flex: 1 1 100px;
   float: none !important;
   overflow: inherit !important;
   text-align: center;
@@ -803,34 +606,19 @@ div.module-graph .gauge_d3_class {
 }
 
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
 }
 
 .fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8);
-}
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-  }
+  animation: fa-spin 1s infinite steps(8);
 }
 
 @keyframes fa-spin {
   0% {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
@@ -879,22 +667,12 @@ div.module-graph .gauge_d3_class {
 /* Digital clock */
 
 .visual-console-item .digital-clock {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: column;
+  justify-content: center;
   justify-items: center;
-  -ms-flex-line-pack: center;
-      align-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-content: center;
+  align-items: center;
 }
 
 .visual-console-item .digital-clock > span {
@@ -925,18 +703,15 @@ div.module-graph .gauge_d3_class {
 }
 
 .visual-console-item .analogic-clock .hour-hand {
-  -webkit-animation: rotate-hour 43200s infinite linear;
-          animation: rotate-hour 43200s infinite linear;
+  animation: rotate-hour 43200s infinite linear;
 }
 
 .visual-console-item .analogic-clock .minute-hand {
-  -webkit-animation: rotate-minute 3600s infinite linear;
-          animation: rotate-minute 3600s infinite linear;
+  animation: rotate-minute 3600s infinite linear;
 }
 
 .visual-console-item .analogic-clock .second-hand {
-  -webkit-animation: rotate-second 60s infinite linear;
-          animation: rotate-second 60s infinite linear;
+  animation: rotate-second 60s infinite linear;
 }
 
 

visual_console_client/package.json

@@ -47,5 +47,9 @@
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.3.1"
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }

visual_console_client/src/VisualConsole.ts

@@ -282,7 +282,7 @@ export default class VisualConsole {
     });
 
     // Move lines conneted with this item.
-    this.updateLinesConnected(e.item.props, e.newPosition);
+    this.updateLinesConnected(e.item.props, e.newPosition, false);
 
     // console.log(`Moved element #${e.item.props.id}`, e);
   };
@@ -293,6 +293,8 @@ export default class VisualConsole {
    */
   private handleElementMovementFinished: (e: ItemMovedEvent) => void = e => {
     this.movedEventManager.emit(e);
+    // Move lines conneted with this item.
+    this.updateLinesConnected(e.item.props, e.newPosition, true);
     // console.log(`Movement finished for element #${e.item.props.id}`, e);
   };
 
@@ -551,8 +553,9 @@ export default class VisualConsole {
    * @param item Item moved.
    * @param newPosition New location for item.
    * @param oldPosition Old location for item.
+   * @param save Save to ajax or not.
    */
-  protected updateLinesConnected(item: ItemProps, to: Position) {
+  protected updateLinesConnected(item: ItemProps, to: Position, save: boolean) {
     if (this.lineLinks[item.id] == null) {
       return;
     }
@@ -585,28 +588,33 @@ export default class VisualConsole {
           endY: endY
         });
 
-        let debouncedLinePositionSave = debounce(500, (options: AnyObject) => {
-          this.lineMovedEventManager.emit({
-            item: options.line,
-            startPosition: {
-              x: options.startX,
-              y: options.startY
-            },
-            endPosition: {
-              x: options.endX,
-              y: options.endY
+        if (save) {
+          let debouncedLinePositionSave = debounce(
+            500,
+            (options: AnyObject) => {
+              this.lineMovedEventManager.emit({
+                item: options.line,
+                startPosition: {
+                  x: options.startX,
+                  y: options.startY
+                },
+                endPosition: {
+                  x: options.endX,
+                  y: options.endY
+                }
+              });
             }
-          });
-        });
+          );
 
-        // Save line positon.
-        debouncedLinePositionSave({
-          line: line,
-          startX: startX,
-          startY: startY,
-          endX: endX,
-          endY: endY
-        });
+          // Save line positon.
+          debouncedLinePositionSave({
+            line: line,
+            startX: startX,
+            startY: startY,
+            endX: endX,
+            endY: endY
+          });
+        }
       }
     });
   }

visual_console_client/webpack.config.js

@@ -59,10 +59,11 @@ module.exports = {
             loader: "postcss-loader",
             options: {
               plugins: () => [
-                // To improve the support for old browsers.
-                require("autoprefixer")({
-                  browsers: ["> 1%", "last 2 versions"]
-                })
+                // Moved to package.json (?)
+                // // To improve the support for old browsers.
+                // require("autoprefixer")({
+                //   browsers: ["> 1%", "last 2 versions"]
+                // })
               ]
             }
           }