update: change name to vue flow

* Add gif to readme

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -71,7 +71,7 @@ const dAttr = computed(() => {
 })
 </script>
 <template>
-  <g class="revue-flow__connection">
+  <g class="vue-flow__connection">
     <slot
       v-bind="{
         sourceX,
@@ -84,7 +84,7 @@ const dAttr = computed(() => {
         connectionLineStyle: props.connectionLineStyle,
       }"
     >
-      <path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+      <path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
     </slot>
   </g>
 </template>

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 {

src/components/Handle/Handle.vue

@@ -32,8 +32,8 @@ const onMouseDownHandler = (event: MouseEvent) =>
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
     :class="[
-      'revue-flow__handle',
-      `revue-flow__handle-${props.position}`,
+      'vue-flow__handle',
+      `vue-flow__handle-${props.position}`,
       'nodrag',
       {
         source: props.type !== 'target',

src/components/Nodes/Node.vue

@@ -142,8 +142,8 @@ onMounted(() => {
     <div
       ref="node-element"
       :class="[
-        'revue-flow__node',
-        `revue-flow__node-${props.node.type}`,
+        'vue-flow__node',
+        `vue-flow__node-${props.node.type}`,
         {
           selected: props.selected,
           selectable: props.selectable,

src/components/NodesSelection/NodesSelection.vue

@@ -70,7 +70,7 @@ const onContextMenu = (event: MouseEvent) => {
 </script>
 <template>
   <div
-    class="revue-flow__nodesselection"
+    class="vue-flow__nodesselection"
     :style="{
       transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`,
     }"
@@ -83,7 +83,7 @@ const onContextMenu = (event: MouseEvent) => {
       @move="onDrag"
       @stop="onStop"
     >
-      <div class="revue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
+      <div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
     </Draggable>
   </div>
 </template>

src/components/UserSelection/SelectionRect.vue

@@ -10,7 +10,7 @@ const props = defineProps<SelectionRectProps>()
 </script>
 <template>
   <div
-    class="revue-flow__selection"
+    class="vue-flow__selection"
     :style="{
       width: `${props.width}px`,
       height: `${props.height}px`,

src/components/UserSelection/UserSelection.vue

@@ -37,7 +37,7 @@ useEventListener(el, 'mouseup', onMouseUp)
 useEventListener(el, 'mouseleave', onMouseLeave)
 </script>
 <template>
-  <div ref="user-selection" class="revue-flow__selectionpane">
+  <div ref="user-selection" class="vue-flow__selectionpane">
     <SelectionRect
       v-if="store.userSelectionRect.draw"
       :width="store.userSelectionRect.width"

src/components/UserSelection/utils.ts

@@ -1,7 +1,7 @@
 import { XYPosition } from '~/types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
-  const revueFlowNode = (event.target as Element).closest('.revue-flow')
+  const revueFlowNode = (event.target as Element).closest('.vue-flow')
   if (!revueFlowNode) {
     return
   }