updated animation - wip (#1)

Author: p000ic

src/components/DiagramLink.vue

@@ -93,9 +93,9 @@ export default {
     linkClass() {
       if (this.link.animated) {
         if (this.link.inverted_flow){
-          return "diagram-editor-rl__animated";
+          return "diagram-editor__animated1";
         }
-        return "diagram-editor-lr__animated";
+        return "diagram-editor__animated0";
       }
       return "";
     },

src/components/DiagramNode.vue

@@ -197,6 +197,7 @@ export default {
       return this.node.size.width - 4;
     },
     slotHeight() {
+      // отступ - заготовок - отступ
       return this.node.size.height - 22;
     },
     nodeDeletable() {
@@ -286,7 +287,7 @@ export default {
       if (hex.length !== 6) {
         throw new Error("Invalid HEX color.");
       }
-      var r = parseInt(hex.slice(0, 2), 16),
+      let r = parseInt(hex.slice(0, 2), 16),
         g = parseInt(hex.slice(2, 4), 16),
         b = parseInt(hex.slice(4, 6), 16);
       if (bw) {
@@ -295,7 +296,7 @@ export default {
       r = (255 - r).toString(16);
       g = (255 - g).toString(16);
       b = (255 - b).toString(16);
-      return "#" + padZero(r) + padZero(g) + padZero(b);
+      return "#" + r + g + b;
     },
   },
 };

src/components/DiagramNodeTitle.vue

@@ -33,10 +33,9 @@
       class="diagram-editor__delete"
       @click="$emit('delete')"
     >
-      <rect x="0" y="0" width="12" height="12" rx="2" ry="2" />
-      <!-- <circle cx="2" cy="2" r="12" /> -->
-      <line :x1="2" :y1="2" :x2="10" :y2="10" />
-      <line :x1="10" :y1="2" :x2="2" :y2="10" />
+      <rect x="0" y="0" width="12" height="12" rx="2" ry="2"/>
+      <line :x1="2" :y1="2" :x2="10" :y2="10"/>
+      <line :x1="10" :y1="2" :x2="2" :y2="10"/>
     </svg>
   </svg>
 </template>

src/helpers.js

@@ -1,38 +1,14 @@
 export const getAbsoluteXY = element => {
-    var viewportElement = document.documentElement;
-    var box = element.getBoundingClientRect();
-    var scrollLeft = viewportElement.scrollLeft;
-    var scrollTop = viewportElement.scrollTop;
-    return {
-        x: box.left + scrollLeft,
-        y: box.top + scrollTop
-    };
+  const viewportElement = document.documentElement;
+  const box = element.getBoundingClientRect();
+  const scrollLeft = viewportElement.scrollLeft;
+  const scrollTop = viewportElement.scrollTop;
+  return {
+    x: box.left + scrollLeft,
+    y: box.top + scrollTop
+  };
 };
 
 export const snapToGrip = (val, gridSize) => {
-    return gridSize * Math.round(val / gridSize);
-};
-
-export const invertColor = (hex, bw) => {
-  if (hex.indexOf('#') === 0) {
-      hex = hex.slice(1);
-  }
-  if (hex.length === 3) {
-      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-  }
-  if (hex.length !== 6) {
-      throw new Error('Invalid HEX color.');
-  }
-  var r = parseInt(hex.slice(0, 2), 16),
-      g = parseInt(hex.slice(2, 4), 16),
-      b = parseInt(hex.slice(4, 6), 16);
-  if (bw) {
-      return (r * 0.299 + g * 0.587 + b * 0.114) > 186
-          ? '#000000'
-          : '#FFFFFF';
-  }
-  r = (255 - r).toString(16);
-  g = (255 - g).toString(16);
-  b = (255 - b).toString(16);
-  return "#" + padZero(r) + padZero(g) + padZero(b);
+  return gridSize * Math.round(val / gridSize);
 };

src/mixins/DiagramEditorMixin.js

@@ -136,7 +136,6 @@ export default () => ({
         this.selectedLink = null;
       }
       this.$emit("clear-selection", data);
-
     },
 
     toggleMoveEventListener(enable) {

src/style.scss

@@ -16,12 +16,12 @@
   margin: 1px;
 
   rect {
-    fill: rgba($color: #be3232);
-    fill-opacity: 0.7;
+    fill: rgba($color: #fff, $alpha: 0.3);
+    fill-opacity: 0.25;
   }
 
   line {
-    stroke: #fff;
+    stroke: rgb(0, 0, 0);
     stroke-width: 2;
   }
 }
@@ -47,26 +47,38 @@
   }
 }
 
-.diagram-editor-lr__animated {
+.diagram-editor__animated {
   stroke-dasharray: 10;
   stroke-dashoffset: 1000;
-  animation: diagram-editor--link-pulse-LR 50s linear infinite;
+  animation: diagram-editor--link-pulse 50s linear infinite;
 }
 
-.diagram-editor-rl__animated {
+@keyframes diagram-editor--link-pulse {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.diagram-editor__animated0 {
+  stroke-dasharray: 10;
+  stroke-dashoffset: 1000;
+  animation: diagram-editor-lr--link-pulse 50s linear infinite;
+}
+
+.diagram-editor__animated1 {
   stroke-dasharray: 10;
   stroke-dashoffset: 1000;
-  animation: diagram-editor--link-pulse-RL 50s linear infinite;
+  animation: diagram-editor-rl--link-pulse 50s linear infinite;
 }
 
 
-@keyframes diagram-editor--link-pulse-LR {
+@keyframes diagram-editor-lr--link-pulse {
   to {
     stroke-dashoffset: 0;
   }
 }
 
-@keyframes diagram-editor--link-pulse-RL {
+@keyframes diagram-editor-rl--link-pulse {
   from {
     stroke-dashoffset: 0;
   }