update: change name to vue flow

* Add gif to readme

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

README.md

@@ -1,17 +1,17 @@
-# React Flow in Vue3 = Revue Flow
-[![contentful](./assets/Revueflow.png)](https://reactflow.dev/)
-![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/revue-flow)
-[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg)](https://david-dm.org/bcakmakoglu/revue-flow)
-[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/revue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/revue-flow?type=dev)
-![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/revue-flow)
-![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/revue-flow)
-![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-flow)
+# Vue Flow
+[![vue flow](./assets/vue-flow.gif)](https://reactflow.dev/)
+![top-language](https://img.shields.io/github/languages/top/bcakmakoglu/vue-flow)
+[![dependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg)](https://david-dm.org/bcakmakoglu/vue-flow)
+[![devDependencies Status](https://status.david-dm.org/gh/bcakmakoglu/vue-flow.svg?type=dev)](https://david-dm.org/bcakmakoglu/vue-flow?type=dev)
+![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/bcakmakoglu/vue-flow)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/bcakmakoglu/vue-flow)
+![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/vue-flow)
 
 This repo is still a big construction site with nothing really finished.
 You can check the examples to see what's working and what's not.
 Please visit [React Flow](https://reactflow.dev/) and support them if you like the idea. 
 They did most of the heavy lifting by writing the library in the first place.
-All I did is bring it to Vue3.
+All I did is bring it to Vue.
 
 ### Motivation
 Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
@@ -20,31 +20,29 @@ love and attention, I decided to port the React Flow library to Vue.js.
 ## Usage
 Check the React Flow docs for usage. It's really the same.
 
-### Vue3
+### Vue 3
 ```bash
-# install revue flow
-$ yarn add @braks/revue-flow
+# install vue flow
+$ pnpm add @braks/vue-flow
 
 # or
-$ npm i --save @braks/revue-flow
+$ npm i --save @braks/vue-flow
 ```
 
-### Vue2
-This doesn't work with Vue2, sorry.
-
-## Development
-This project uses Vite for development and Rollup to create a distribution.
+### Vue 2
+Vue Flow doesn't work with Vue 2, sorry.
 
+## 🧪 Development
 ```bash
 # start (dev)
-$ yarn dev
+$ pnpm dev
 
 # build app
-$ yarn build
+$ pnpm build
 
 # serve app from build
-$ yarn serve
+$ pnpm serve
 
 # build dist
-$ yarn build:dist
+$ pnpm build:dist
 ```

examples/Basic/Basic.vue

@@ -54,7 +54,7 @@ const toggleClassnames = () => {
 </script>
 <template>
   <Flow
-    class="revue-flow-basic-example"
+    class="vue-flow-basic-example"
     :elements="elements"
     :default-zoom="1.5"
     :min-zoom="0.2"

examples/CustomNode/ColorSelectorNode.vue

@@ -25,7 +25,7 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
 <template>
-  <div class="revue-flow__node-color-selector">
+  <div class="vue-flow__node-color-selector">
     <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
     <div>
       Custom Color Picker Node: <strong>{{ data.color }}</strong>

examples/DragNDrop/Sidebar.vue

@@ -9,13 +9,13 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>
-    <div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
       Input Node
     </div>
-    <div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
       Default Node
     </div>
-    <div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
       Output Node
     </div>
   </aside>

examples/EdgeWithButton/ButtonEdge.vue

@@ -59,7 +59,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <foreignObject
     :width="foreignObjectSize"
     :height="foreignObjectSize"

examples/Edges/CustomEdge.vue

@@ -32,7 +32,7 @@ const edgePath = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>
     <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
       {{ props.data.text }}

examples/Edges/CustomEdge2.vue

@@ -42,7 +42,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText
     :x="center[0]"
     :y="center[1]"

examples/Header.vue

@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/revue-flow"> Revue Flow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">

examples/Hidden/HiddenExample.vue

@@ -31,7 +31,7 @@ watchEffect(() => {
       <div>
         <label for="ishidden">
           isHidden
-          <input id="ishidden" v-model="isHidden" type="checkbox" class="revue-flow__ishidden" />
+          <input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
         </label>
       </div>
     </div>

examples/Interaction/InteractionExample.vue

@@ -73,43 +73,43 @@ const captureElementClick = ref(false)
       <div>
         <label for="draggable">
           nodesDraggable
-          <input id="draggable" v-model="isDraggable" type="checkbox" class="revue-flow__draggable" />
+          <input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
         </label>
       </div>
       <div>
         <label for="connectable">
           nodesConnectable
-          <input id="connectable" v-model="isConnectable" type="checkbox" class="revue-flow__connectable" />
+          <input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
         </label>
       </div>
       <div>
         <label for="selectable">
           elementsSelectable
-          <input id="selectable" v-model="isSelectable" type="checkbox" class="revue-flow__selectable" />
+          <input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
         </label>
       </div>
       <div>
         <label for="zoomonscroll">
           zoomOnScroll
-          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="revue-flow__zoomonscroll" />
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
         </label>
       </div>
       <div>
         <label for="zoomonpinch">
           zoomOnPinch
-          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="revue-flow__zoomonpinch" />
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
         </label>
       </div>
       <div>
         <label for="panonscroll">
           panOnScroll
-          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="revue-flow__panonscroll" />
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
         </label>
       </div>
       <div>
         <label>
           panOnScrollMode
-          <select id="panonscrollmode" v-model="panOnScrollMode" class="revue-flow__panonscrollmode">
+          <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
             <option value="free">free</option>
             <option value="horizontal">horizontal</option>
             <option value="vertical">vertical</option>
@@ -119,36 +119,31 @@ const captureElementClick = ref(false)
       <div>
         <label for="zoomondbl">
           zoomOnDoubleClick
-          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="revue-flow__zoomondbl" />
+          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
         </label>
       </div>
       <div>
         <label for="panemoveable">
           paneMoveable
-          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="revue-flow__panemoveable" />
+          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="vue-flow__panemoveable" />
         </label>
       </div>
       <div>
         <label for="capturezoompaneclick">
           capture onPaneClick
-          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="revue-flow__capturezoompaneclick" />
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
         </label>
       </div>
       <div>
         <label for="capturezoompanescroll">
           capture onPaneScroll
-          <input
-            id="capturezoompanescroll"
-            v-model="captureZoomScroll"
-            type="checkbox"
-            class="revue-flow__capturezoompanescroll"
-          />
+          <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
       <div>
         <label for="captureelementclick">
           capture onElementClick
-          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="revue-flow__captureelementclick" />
+          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
         </label>
       </div>
     </div>

examples/index.css

@@ -58,30 +58,30 @@ header select {
   display: none;
 }
 
-.revue-flow__node a {
+.vue-flow__node a {
   font-weight: 700;
   color: #111;
 }
 
-.revue-flow__node.dark-node {
+.vue-flow__node.dark-node {
   background: #0041d0;
   color: #f8f8f8;
 }
 
-.revue-flow__node.dark {
+.vue-flow__node.dark {
   background: #557;
   color: #f8f8f8;
 }
 
-.revue-flow__node-selectorNode {
+.vue-flow__node-selectorNode {
   font-size: 14px;
   background: #f0f2f3;
   border: 1px solid #555;
   border-radius: 5px;
   text-align: center;
 }
 
-.revue-flow__node-selectorNode .revue-flow__handle {
+.vue-flow__node-selectorNode .vue-flow__handle {
   border-color: #f0f2f3;
 }
 

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Revue Flow Examples</title>
+    <title>Vue Flow Examples</title>
   </head>
   <body>
     <div id="root"></div>

package.json

@@ -1,25 +1,25 @@
 {
-  "name": "@braks/revue-flow",
+  "name": "@braks/vue-flow",
   "version": "0.1.2",
   "private": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/bcakmakoglu/revue-flow"
+    "url": "https://github.com/bcakmakoglu/vue-flow"
   },
   "license": "MIT",
   "author": "Burak Cakmakoglu",
   "exports": {
     ".": {
-      "import": "./dist/revue-flow.esm.js",
-      "require": "./dist/revue-flow.cjs.js"
+      "import": "./dist/vue-flow.esm.js",
+      "require": "./dist/vue-flow.cjs.js"
     },
     "./*": "./*"
   },
-  "main": "./dist/revue-flow.cjs.js",
-  "types": "./dist/revue-flow.d.ts",
-  "module": "./dist/revue-flow.esm.js",
-  "unpkg": "./dist/revue-flow.iife.min.js",
-  "jsdelivr": "./dist/revue-flow.iife.min.js",
+  "main": "./dist/vue-flow.cjs.js",
+  "types": "./dist/vue-flow.d.ts",
+  "module": "./dist/vue-flow.esm.js",
+  "unpkg": "./dist/vue-flow.iife.min.js",
+  "jsdelivr": "./dist/vue-flow.iife.min.js",
   "sideEffects": false,
   "files": [
     "dist"