update: change name to vue flow

* Add gif to readme

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

src/composables/useHandle.ts

@@ -64,8 +64,8 @@ export const checkElementBelowIsValid = (
 }
 
 const resetRecentHandle = (hoveredHandle: Element): void => {
-  hoveredHandle?.classList.remove('revue-flow__handle-valid')
-  hoveredHandle?.classList.remove('revue-flow__handle-connecting')
+  hoveredHandle?.classList.remove('vue-flow__handle-valid')
+  hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
 export default () => {
@@ -82,8 +82,8 @@ export default () => {
     },
     elementEdgeUpdaterType?: HandleType,
   ) => {
-    const revueFlowNode = (event.target as Element).closest('.revue-flow')
-    // when revue-flow is used inside a shadow root we can't use document
+    const revueFlowNode = (event.target as Element).closest('.vue-flow')
+    // when vue-flow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target as HTMLElement)
 
     if (!doc) return
@@ -130,8 +130,8 @@ export default () => {
 
       if (!isOwnHandle && elementBelow) {
         recentHoveredHandle = elementBelow
-        elementBelow.classList.add('revue-flow__handle-connecting')
-        elementBelow.classList.toggle('revue-flow__handle-valid', isValid)
+        elementBelow.classList.add('vue-flow__handle-connecting')
+        elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
       }
     }
 

src/composables/useUpdateNodeInternals.ts

@@ -5,7 +5,7 @@ export default (): UpdateNodeInternals => {
   const store = useStore()
 
   return (id: ElementId) => {
-    const nodeElement: HTMLDivElement | null = document.querySelector(`.revue-flow__node[data-id="${id}"]`)
+    const nodeElement: HTMLDivElement | null = document.querySelector(`.vue-flow__node[data-id="${id}"]`)
 
     if (nodeElement) {
       store.updateNodeDimensions([{ id, nodeElement, forceUpdate: true }])

src/composables/useZoom.ts

@@ -149,13 +149,13 @@ export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
 
           // when the target element is a node, we still allow zooming
           if (
-            ((event.target as Element).closest('.revue-flow__node') || (event.target as Element).closest('.revue-flow__edge')) &&
+            ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
             event.type !== 'wheel'
           )
             return false
 
           // when the target element is a node selection, we still allow zooming
-          if ((event.target as Element).closest('.revue-flow__nodesselection') && event.type !== 'wheel') return false
+          if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
 
           if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false