update: change name to vue flow

* Add gif to readme

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/BezierEdge.vue

@@ -52,7 +52,7 @@ const path = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText
     v-if="props.label"
     :x="centered[0]"

src/components/Edges/Edge.vue

@@ -122,8 +122,8 @@ const edgePos = computed(() =>
   <g
     v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
-      'revue-flow__edge',
-      `revue-flow__edge-${props.edge.type || 'default'}`,
+      'vue-flow__edge',
+      `vue-flow__edge-${props.edge.type || 'default'}`,
       {
         selected: isSelected,
         animated: props.edge.animated,

src/components/Edges/EdgeAnchor.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<EdgeAnchorProps>(), {
 </script>
 <template>
   <circle
-    class="revue-flow__edgeupdater"
+    class="vue-flow__edgeupdater"
     :cx="shiftX(props.centerX, props.radius, props.position)"
     :cy="shiftY(props.centerY, props.radius, props.position)"
     :r="props.radius"

src/components/Edges/EdgeText.vue

@@ -30,19 +30,19 @@ const edgeRef = templateRef<SVGTextElement>('edge-text', null)
 const { width = 0, height = 0, x = 0, y = 0 } = useElementBounding(edgeRef)
 </script>
 <template>
-  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="revue-flow__edge-textwrapper">
+  <g :transform="`translate(${props.x - width / 2} ${props.y - height / 2})`" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
       :width="width + 2 * props.labelBgPadding[0] + 'px'"
       :height="height + 2 * props.labelBgPadding[1] + 'px'"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
-      class="revue-flow__edge-textbg"
+      class="vue-flow__edge-textbg"
       :style="props.labelBgStyle"
       :rx="props.labelBgBorderRadius"
       :ry="props.labelBgBorderRadius"
     />
-    <text ref="edge-text" class="revue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
+    <text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
       <component
         :is="props.label.component"
         v-if="typeof props.label.component !== 'undefined'"

src/components/Edges/SmoothStepEdge.vue

@@ -55,7 +55,7 @@ const path = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path class="revue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
+  <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
   <EdgeText
     v-if="props.label"
     :x="centered[0]"

src/components/Edges/StraightEdge.vue

@@ -59,7 +59,7 @@ const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerE
 <template>
   <path
     :style="props.style"
-    class="revue-flow__edge-path"
+    class="vue-flow__edge-path"
     :d="`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`"
     :marker-end="markerEnd"
   />

src/components/Edges/utils.ts

@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
     return `url(#${markerEndId})`
   }
 
-  return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none'
+  return typeof arrowHeadType !== 'undefined' ? `url(#vue-flow__${arrowHeadType})` : 'none'
 }
 
 export interface GetCenterParams {