update: change name to vue flow

* Add gif to readme

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -29,7 +29,7 @@ const connectionLineVisible = computed(
 )
 </script>
 <template>
-  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="revue-flow__edges">
+  <svg :width="store.dimensions.width" :height="store.dimensions.height" class="vue-flow__edges">
     <MarkerDefinitions :color="props.arrowHeadColor" />
     <g
       :transform="store.transform.length && `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`"

src/container/EdgeRenderer/Marker.vue

@@ -8,7 +8,7 @@ const props = defineProps<MarkerProps>()
 <template>
   <marker
     :id="props.id"
-    class="revue-flow__arrowhead"
+    class="vue-flow__arrowhead"
     markerWidth="12.5"
     markerHeight="12.5"
     viewBox="-10 -10 20 20"

src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
 </script>
 <template>
   <defs>
-    <Marker id="revue-flow__arrowclosed">
+    <Marker id="vue-flow__arrowclosed">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<MarkerDefinitionsProps>(), {
         points="-5,-4 0,0 -5,4 -5,-4"
       />
     </Marker>
-    <Marker id="revue-flow__arrow">
+    <Marker id="vue-flow__arrow">
       <polyline
         :stroke="props.color"
         stroke-linecap="round"

src/container/Flow/Flow.vue

@@ -132,7 +132,7 @@ const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })
 </script>
 <template>
-  <div class="revue-flow">
+  <div class="vue-flow">
     <ZoomPane
       :selection-key-code="props.selectionKeyCode"
       :zoom-activation-key-code="props.zoomActivationKeyCode"

src/container/NodeRenderer/NodeRenderer.vue

@@ -40,7 +40,7 @@ const type = (node: TNode) => {
 </script>
 <template>
   <div
-    class="revue-flow__nodes"
+    class="vue-flow__nodes"
     :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
   >
     <template v-for="node of getNodes" :key="node.id">

src/container/SelectionPane/SelectionPane.vue

@@ -52,5 +52,5 @@ useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionAc
   <slot></slot>
   <UserSelection v-if="selectionKeyPresed && (store.selectionActive || store.elementsSelectable)" id="user-selection" />
   <NodesSelection v-if="store.nodesSelectionActive" id="nodes-selection" />
-  <div class="revue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>

src/container/ZoomPane/ZoomPane.vue

@@ -58,7 +58,7 @@ hooks.load.trigger({
 })
 </script>
 <template>
-  <div ref="zoom-pane" class="revue-flow__renderer revue-flow__zoompane">
+  <div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
     <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
   </div>
 </template>