fix(core): set interaction edge styles so animation does not break pointer

bcakmakoglu · bcakmakoglu · commit d2c1c5185fe4 · 2023-06-15T22:35:25.000+02:00
diff --git a/packages/core/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts
@@ -41,6 +41,7 @@ const BaseEdge: FunctionalComponent<BaseEdgeProps> = function (
           'fill': 'none',
           'stroke-opacity': 0,
           'stroke-width': interactionWidth,
+          'class': 'vue-flow__edge-interaction',
         })
       : null,
     label && isNumber(labelX) && isNumber(labelY)
diff --git a/packages/core/src/style.css b/packages/core/src/style.css
@@ -78,6 +78,11 @@
      animation: dashdraw 0.5s linear infinite;
    }
 
+  &.animated path.vue-flow__edge-interaction {
+     stroke-dasharray: none;
+     animation: none;
+   }
+
   &.inactive {
      pointer-events: none;
    }

Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,11 @@`
`78`	`78`	`animation: dashdraw 0.5s linear infinite;`
`79`	`79`	`}`
`80`	`80`
	`81`	`+ &.animated path.vue-flow__edge-interaction {`
	`82`	`+ stroke-dasharray: none;`
	`83`	`+ animation: none;`
	`84`	`+ }`
	`85`	`+`
`81`	`86`	`&.inactive {`
`82`	`87`	`pointer-events: none;`
`83`	`88`	`}`