update: renaming stuff from react to "revue"

README.md

@@ -1,4 +1,5 @@
 # React Flow in Vue3 = Revue Flow
+[![contentful](./assets/Revueflow.png)](https://md-cf-docs.vercel.app/)
 ![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)
@@ -7,16 +8,16 @@
 ![GitHub last commit](https://img.shields.io/github/last-commit/bcakmakoglu/revue-flow)
 
 This repo is still a big construction site with nothing really finished.
-Please check out [React Flow](https://reactflow.dev/) if you like the idea.
+Please check out [revue Flow](https://reactflow.dev/) if you like the idea.
 
 ### Motivation
-Seeing as many libraries exist in the React ecosystem and Vue sadly does not get the same
+Seeing as many libraries exist in the revue ecosystem and Vue sadly does not get the same
-love and attention, I decided to port the React Flow library to Vue.js.
+love and attention, I decided to port the revue Flow library to Vue.js.
 
-### Usage
+## Usage
-
+Check the React Flow docs for usage. It's really the same.
-## Vue3
 
+### Vue3
 ```bash
 # install revue flow
 $ yarn add @braks/revue-flow
@@ -25,7 +26,7 @@ $ yarn add @braks/revue-flow
 $ npm i --save @braks/revue-flow
 ```
 
-## Vue2
+### Vue2
 This doesn't work with Vue2, sorry.
 
 ## Development

rollup.config.js

@@ -82,7 +82,7 @@ function createConfig(format, output, plugins = []) {
   output.sourcemap = !!process.env.SOURCE_MAP;
   output.banner = banner;
   output.externalLiveBindings = false;
-  output.globals = { 'vue': 'Vue' };
+  output.globals = { vue: 'Vue' };
 
   const isProductionBuild = /\.prod\.js$/.test(output.file);
   const isGlobalBuild = format.startsWith('global');

src/Basic.tsx

@@ -23,7 +23,7 @@ const BasicFlow = defineComponent({
     const rfInstance = ref<OnLoadParams | null>(null);
     const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
     const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value));
-    const onLoad = (reactFlowInstance: OnLoadParams) => (rfInstance.value = reactFlowInstance);
+    const onLoad = (revueFlowInstance: OnLoadParams) => (rfInstance.value = revueFlowInstance);
 
     const updatePos = () => {
       elements.value = elements.value.map((el) => {
@@ -59,7 +59,7 @@ const BasicFlow = defineComponent({
         onElementsRemove={onElementsRemove}
         onConnect={onConnect}
         onNodeDragStop={onNodeDragStop}
-        class="react-flow-basic-example"
+        class="revue-flow-basic-example"
         defaultZoom={1.5}
         minZoom={0.2}
         maxZoom={4}

src/additional-components/Background/index.tsx

@@ -45,7 +45,7 @@ const Background = defineComponent({
     // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
     const patternId = `pattern-${Math.floor(Math.random() * 100000)}`;
 
-    const bgClasses = ['react-flow__background'];
+    const bgClasses = ['revue-flow__background'];
     const scaledGap = computed(() => props.gap && props.gap * transform.value[2]);
     const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value);
     const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value);

src/additional-components/Controls/index.tsx

@@ -31,7 +31,7 @@ export const ControlButton = defineComponent({
   },
   setup(props, { slots }) {
     return () => (
-      <button class={['react-flow__controls-button']} {...props}>
+      <button class={['revue-flow__controls-button']} {...props}>
         {slots.default ? slots.default() : ''}
       </button>
     );
@@ -92,7 +92,7 @@ const Controls = defineComponent({
     });
 
     const isInteractive = pinia.nodesDraggable && pinia.nodesConnectable && pinia.elementsSelectable;
-    const mapClasses = ['react-flow__controls'];
+    const mapClasses = ['revue-flow__controls'];
 
     const onZoomInHandler = () => {
       zoomHelper.value.zoomIn?.();
@@ -122,21 +122,21 @@ const Controls = defineComponent({
       <div class={mapClasses}>
         {props.showZoom && (
           <>
-            <ControlButton onClick={onZoomInHandler} class="react-flow__controls-zoomin">
+            <ControlButton onClick={onZoomInHandler} class="revue-flow__controls-zoomin">
               <img src={'../../../assets/icons/plus.svg'} alt="Plus" />
             </ControlButton>
-            <ControlButton onClick={onZoomOutHandler} class="react-flow__controls-zoomout">
+            <ControlButton onClick={onZoomOutHandler} class="revue-flow__controls-zoomout">
               <img src={'../../../assets/icons/minus.svg'} alt="Minus" />
             </ControlButton>
           </>
         )}
         {props.showFitView && (
-          <ControlButton class="react-flow__controls-fitview" onClick={onFitViewHandler}>
+          <ControlButton class="revue-flow__controls-fitview" onClick={onFitViewHandler}>
             <img src={'../../../assets/icons/fitview.svg'} alt="FitView" />
           </ControlButton>
         )}
         {props.showInteractive && (
-          <ControlButton class="react-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
+          <ControlButton class="revue-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
             {isInteractive ? (
               <img src={'../../../assets/icons/unlock.svg'} alt="Unlock" />
             ) : (

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -67,7 +67,7 @@ const MiniMapNode = defineComponent({
 
     return () => (
       <rect
-        class={['react-flow__minimap-node']}
+        class={['revue-flow__minimap-node']}
         x={props.x}
         y={props.y}
         rx={props.borderRadius}

src/additional-components/MiniMap/index.tsx

@@ -58,7 +58,7 @@ const MiniMap = defineComponent({
     const pinia = store();
     const transform = computed(() => pinia.transform);
 
-    const mapClasses = ['react-flow__minimap'];
+    const mapClasses = ['revue-flow__minimap'];
     const elementWidth = computed(() => (attrs.style?.width || defaultWidth)! as number);
     const elementHeight = computed(() => (attrs.style?.height || defaultHeight)! as number);
     const nodeColorFunc = (props.nodeColor instanceof Function ? props.nodeColor : () => props.nodeColor) as StringFunc;
@@ -115,7 +115,7 @@ const MiniMap = defineComponent({
             />
           ))}
         <path
-          class="react-flow__minimap-mask"
+          class="revue-flow__minimap-mask"
           d={`M${x.value - offset.value},${y.value - offset.value}h${width.value + offset.value * 2}v${
             height.value + offset.value * 2
           }h${-width.value - offset.value * 2}z

src/additional-components/index.ts

@@ -1,5 +1,5 @@
-// These components are not used by React Flow directly
+// These components are not used by revue Flow directly
-// but the user can add them as children of a React Flow component
+// but the user can add them as children of a revue Flow component
 
 export { default as MiniMap } from './MiniMap';
 export { default as Controls, ControlButton } from './Controls';

src/components/ConnectionLine/index.tsx

@@ -117,7 +117,7 @@ const ConnectionLine = defineComponent({
       // eslint-disable-next-line vue/no-setup-props-destructure
       const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
       return () => (
-        <g class="react-flow__connection">
+        <g class="revue-flow__connection">
           <ConnectionLineComponent
             sourceX={sourceX.value}
             sourceY={sourceY.value}
@@ -171,8 +171,8 @@ const ConnectionLine = defineComponent({
     }
 
     return () => (
-      <g class="react-flow__connection">
+      <g class="revue-flow__connection">
-        <path d={dAttr.value} class="react-flow__connection-path" style={props.connectionLineStyle} />
+        <path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
       </g>
     );
   }

src/components/Edges/BezierEdge.tsx

@@ -157,7 +157,7 @@ const BezierEdge = defineComponent({
 
     return () => (
       <>
-        <path style={props.style} d={path.value} class="react-flow__edge-path" marker-end={markerEnd} />
+        <path style={props.style} d={path.value} class="revue-flow__edge-path" marker-end={markerEnd} />
         {text}
       </>
     );

src/components/Edges/EdgeAnchor.tsx

@@ -44,7 +44,7 @@ export const EdgeAnchor = defineComponent({
     const radius = props.radius || 10;
     return () => (
       <circle
-        class="react-flow__edgeupdater"
+        class="revue-flow__edgeupdater"
         cx={shiftX(props.centerX, radius, props.position)}
         cy={shiftY(props.centerY, radius, props.position)}
         r={radius}

src/components/Edges/EdgeText.tsx

@@ -62,7 +62,7 @@ const EdgeText = defineComponent({
     return (
       <g
         transform={`translate(${props.x - edgeTextBox.value.width / 2} ${props.y - edgeTextBox.value.height / 2})`}
-        class="react-flow__edge-textwrapper"
+        class="revue-flow__edge-textwrapper"
       >
         {props.labelShowBg && (
           <rect
@@ -70,13 +70,13 @@ const EdgeText = defineComponent({
             x={-props.labelBgPadding[0]}
             y={-props.labelBgPadding[1]}
             height={edgeTextBox.value.height + 2 * props.labelBgPadding[1]}
-            class="react-flow__edge-textbg"
+            class="revue-flow__edge-textbg"
             style={props.labelBgStyle}
             rx={props.labelBgBorderRadius}
             ry={props.labelBgBorderRadius}
           />
         )}
-        <text class="react-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
+        <text class="revue-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
           {label}
         </text>
         {slots.default ? slots.default() : ''}

src/components/Edges/SmoothStepEdge.tsx

@@ -131,7 +131,7 @@ const SmoothStepEdge = defineComponent({
 
     return (
       <>
-        <path style={props.style} class="react-flow__edge-path" d={path} marker-end={markerEnd} />
+        <path style={props.style} class="revue-flow__edge-path" d={path} marker-end={markerEnd} />
         {text}
       </>
     );

src/components/Edges/StraightEdge.tsx

@@ -31,7 +31,7 @@ const StraightEdge = defineComponent({
       <>
         <path
           style={props.style}
-          class="react-flow__edge-path"
+          class="revue-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(#react-flow__${arrowHeadType})` : 'none';
+  return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none';
 };
 
 export interface GetCenterParams {

src/components/Edges/wrapEdge.tsx

@@ -14,8 +14,8 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
       const updating = ref<boolean>(false);
       const inactive = !props.elementsSelectable && !props.onClick;
       const edgeClasses = computed(() => [
-        'react-flow__edge',
+        'revue-flow__edge',
-        `react-flow__edge-${props.type}`,
+        `revue-flow__edge-${props.type}`,
         { selected: props.selected, animated: props.animated, inactive, updating: updating.value }
       ]);
 

src/components/Handle/handler.ts

@@ -79,8 +79,8 @@ function checkElementBelowIsValid(
 }
 
 function resetRecentHandle(hoveredHandle: Element): void {
-  hoveredHandle?.classList.remove('react-flow__handle-valid');
+  hoveredHandle?.classList.remove('revue-flow__handle-valid');
-  hoveredHandle?.classList.remove('react-flow__handle-connecting');
+  hoveredHandle?.classList.remove('revue-flow__handle-connecting');
 }
 
 export function onMouseDown(
@@ -99,8 +99,8 @@ export function onMouseDown(
   onConnectStop?: OnConnectStopFunc,
   onConnectEnd?: OnConnectEndFunc
 ): void {
-  const reactFlowNode = (event.target as Element).closest('.react-flow');
+  const revueFlowNode = (event.target as Element).closest('.revue-flow');
-  // when react-flow is used inside a shadow root we can't use document
+  // when revue-flow is used inside a shadow root we can't use document
   const doc = getHostForElement(event.target as HTMLElement);
 
   if (!doc) {
@@ -111,12 +111,12 @@ export function onMouseDown(
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
   const elementBelowIsSource = elementBelow?.classList.contains('source');
 
-  if (!reactFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
+  if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
     return;
   }
 
   const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
-  const containerBounds = reactFlowNode.getBoundingClientRect();
+  const containerBounds = revueFlowNode.getBoundingClientRect();
   let recentHoveredHandle: Element;
 
   setPosition({
@@ -151,8 +151,8 @@ export function onMouseDown(
 
     if (!isOwnHandle && elementBelow) {
       recentHoveredHandle = elementBelow;
-      elementBelow.classList.add('react-flow__handle-connecting');
+      elementBelow.classList.add('revue-flow__handle-connecting');
-      elementBelow.classList.toggle('react-flow__handle-valid', isValid);
+      elementBelow.classList.toggle('revue-flow__handle-valid', isValid);
     }
   }
 

src/components/Handle/index.tsx

@@ -68,8 +68,8 @@ const Handle = defineComponent({
     };
 
     const handleClasses = [
-      'react-flow__handle',
+      'revue-flow__handle',
-      `react-flow__handle-${props.position}`,
+      `revue-flow__handle-${props.position}`,
       'nodrag',
       {
         source: !isTarget,

src/components/Nodes/wrapNode.tsx

@@ -162,8 +162,8 @@ export default (NodeComponent: any) => {
       }
 
       const nodeClasses = [
-        'react-flow__node',
+        'revue-flow__node',
-        `react-flow__node-${props.type}`,
+        `revue-flow__node-${props.type}`,
         {
           selected: props.selected,
           selectable: props.isSelectable

src/components/UserSelection/index.tsx

@@ -10,12 +10,12 @@ type UserSelectionProps = {
 };
 
 function getMousePosition(event: MouseEvent): XYPosition | void {
-  const reactFlowNode = (event.target as Element).closest('.react-flow');
+  const revueFlowNode = (event.target as Element).closest('.revue-flow');
-  if (!reactFlowNode) {
+  if (!revueFlowNode) {
     return;
   }
 
-  const containerBounds = reactFlowNode.getBoundingClientRect();
+  const containerBounds = revueFlowNode.getBoundingClientRect();
 
   return {
     x: event.clientX - containerBounds.left,
@@ -33,7 +33,7 @@ const SelectionRect = defineComponent({
 
     return () => (
       <div
-        class="react-flow__selection"
+        class="revue-flow__selection"
         style={{
           width: pinia.userSelectionRect.width,
           height: pinia.userSelectionRect.height,
@@ -91,7 +91,7 @@ export default defineComponent({
 
     return () => (
       <div
-        class="react-flow__selectionpane"
+        class="revue-flow__selectionpane"
         onMousedown={onMouseDown}
         onMousemove={onMouseMove}
         onMouseup={onMouseUp}

src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -14,7 +14,7 @@ const Marker = defineComponent({
   setup(props, { slots }) {
     return () => (
       <marker
-        class="react-flow__arrowhead"
+        class="revue-flow__arrowhead"
         id={props.id}
         markerWidth="12.5"
         markerHeight="12.5"
@@ -44,7 +44,7 @@ const MarkerDefinitions = defineComponent({
   setup(props) {
     return () => (
       <defs>
-        <Marker id="react-flow__arrowclosed">
+        <Marker id="revue-flow__arrowclosed">
           <polyline
             stroke={props.color}
             stroke-linecap="round"
@@ -54,7 +54,7 @@ const MarkerDefinitions = defineComponent({
             points="-5,-4 0,0 -5,4 -5,-4"
           />
         </Marker>
-        <Marker id="react-flow__arrow">
+        <Marker id="revue-flow__arrow">
           <polyline
             stroke={props.color}
             stroke-linecap="round"

src/container/EdgeRenderer/index.tsx

@@ -318,7 +318,7 @@ const EdgeRenderer = defineComponent({
     const renderConnectionLine = computed(() => pinia.connectionNodeId && pinia.connectionHandleType);
 
     return () => (
-      <svg width={pinia.width} height={pinia.height} class="react-flow__edges">
+      <svg width={pinia.width} height={pinia.height} class="revue-flow__edges">
         <g transform={transformStyle.value}>
           {pinia.edges.map((edge: Edge) => (
             <EdgeCmp

src/container/FlowRenderer/index.tsx

@@ -189,7 +189,7 @@ const FlowRenderer = defineComponent({
         zoomActivationKeyCode={props.zoomActivationKeyCode}
       >
         {slots.default ? slots.default() : ''}
-        <div class="react-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
+        <div class="revue-flow__pane" onClick={onClick} onContextmenu={onContextMenu} onWheel={onWheel} />
       </ZoomPane>
     );
   }

src/container/NodeRenderer/index.tsx

@@ -133,7 +133,7 @@ const NodeRenderer = defineComponent({
     });
 
     return () => (
-      <div class="react-flow__nodes" style={transformStyle.value}>
+      <div class="revue-flow__nodes" style={transformStyle.value}>
         {visibleNodes.value.map((node) => {
           const nodeType = node.type || 'default';
           if (props.nodeTypes) {

src/container/RevueFlow/index.tsx

@@ -461,7 +461,7 @@ const RevueFlow = defineComponent({
 
     const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes));
     const edgeTypesParsed = computed(() => props.edgeTypes && createEdgeTypes(props.edgeTypes));
-    const reactFlowClasses = ['react-flow'];
+    const reactFlowClasses = ['revue-flow'];
 
     return () => (
       <div class={reactFlowClasses}>

src/container/ZoomPane/index.tsx

@@ -271,14 +271,14 @@ const ZoomPane = defineComponent({
 
           // when the target element is a node, we still allow zooming
           if (
-            (event.target.closest('.react-flow__node') || event.target.closest('.react-flow__edge')) &&
+            (event.target.closest('.revue-flow__node') || event.target.closest('.revue-flow__edge')) &&
             event.type !== 'wheel'
           ) {
             return false;
           }
 
           // when the target element is a node selection, we still allow zooming
-          if (event.target.closest('.react-flow__nodesselection') && event.type !== 'wheel') {
+          if (event.target.closest('.revue-flow__nodesselection') && event.type !== 'wheel') {
             return false;
           }
 
@@ -303,7 +303,7 @@ const ZoomPane = defineComponent({
     });
 
     return () => (
-      <div class="react-flow__renderer react-flow__zoompane" ref={zoomPane}>
+      <div class="revue-flow__renderer revue-flow__zoompane" ref={zoomPane}>
         {slots.default ? slots.default() : ''}
       </div>
     );

src/hooks/useResizeHandler.ts

@@ -14,7 +14,7 @@ export default (rendererNode: HTMLDivElement) => {
     const size = getDimensions(rendererNode);
 
     if (size.height === 0 || size.width === 0) {
-      console.log('The React Flow parent container needs a width and a height to render the graph.');
+      console.log('The revue Flow parent container needs a width and a height to render the graph.');
     }
 
     pinia.updateSize(size);

src/hooks/useUpdateNodeInternals.ts

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

src/store/utils.ts

@@ -1,5 +0,0 @@
-export function createAction<T extends string>(type: T): { type: T };
-export function createAction<T extends string, P extends any>(type: T, payload: P): { type: T; payload: P };
-export function createAction(type: string, payload?: unknown): Record<string, any> {
-  return { type, payload };
-}

src/style.css

@@ -1,13 +1,13 @@
-.react-flow {
+.revue-flow {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.react-flow__renderer,
+.revue-flow__renderer,
-.react-flow__pane,
+.revue-flow__pane,
-.react-flow__selectionpane {
+.revue-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -15,25 +15,25 @@
   left: 0;
 }
 
-.react-flow__pane {
+.revue-flow__pane {
   z-index: 1;
 }
 
-.react-flow__renderer {
+.revue-flow__renderer {
   z-index: 4;
 }
 
-.react-flow__selectionpane {
+.revue-flow__selectionpane {
   z-index: 5;
 }
 
-.react-flow__selection {
+.revue-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-.react-flow__edges {
+.revue-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
@@ -41,7 +41,7 @@
   z-index: 2;
 }
 
-.react-flow__edge {
+.revue-flow__edge {
   pointer-events: visibleStroke;
 
   &.inactive {
@@ -55,20 +55,20 @@
   }
 }
 
-.react-flow__edge-path {
+.revue-flow__edge-path {
   fill: none;
 }
 
-.react-flow__edge-textwrapper {
+.revue-flow__edge-textwrapper {
   pointer-events: all;
 }
 
-.react-flow__edge-text {
+.revue-flow__edge-text {
   pointer-events: none;
   user-select: none;
 }
 
-.react-flow__connection {
+.revue-flow__connection {
   pointer-events: none;
 
   .animated {
@@ -77,11 +77,11 @@
   }
 }
 
-.react-flow__connection-path {
+.revue-flow__connection-path {
   fill: none;
 }
 
-.react-flow__nodes {
+.revue-flow__nodes {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -90,14 +90,14 @@
   z-index: 3;
 }
 
-.react-flow__node {
+.revue-flow__node {
   position: absolute;
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
 }
 
-.react-flow__nodesselection {
+.revue-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;
@@ -114,7 +114,7 @@
   }
 }
 
-.react-flow__handle {
+.revue-flow__handle {
   pointer-events: none;
 
   &.connectable {
@@ -122,39 +122,39 @@
   }
 }
 
-.react-flow__handle-bottom {
+.revue-flow__handle-bottom {
   top: auto;
   left: 50%;
   bottom: -4px;
   transform: translate(-50%, 0);
 }
 
-.react-flow__handle-top {
+.revue-flow__handle-top {
   left: 50%;
   top: -4px;
   transform: translate(-50%, 0);
 }
 
-.react-flow__handle-left {
+.revue-flow__handle-left {
   top: 50%;
   left: -4px;
   transform: translate(0, -50%);
 }
 
-.react-flow__handle-right {
+.revue-flow__handle-right {
   right: -4px;
   top: 50%;
   transform: translate(0, -50%);
 }
 
-.react-flow__edgeupdater {
+.revue-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
 
 /* additional components */
 
-.react-flow__background {
+.revue-flow__background {
   position: absolute;
   top: 0;
   left: 0;
@@ -162,7 +162,7 @@
   height: 100%;
 }
 
-.react-flow__controls {
+.revue-flow__controls {
   position: absolute;
   z-index: 5;
   bottom: 10px;
@@ -179,7 +179,7 @@
   }
 }
 
-.react-flow__minimap {
+.revue-flow__minimap {
   position: absolute;
   z-index: 5;
   bottom: 10px;

src/theme-default.css

@@ -1,11 +1,11 @@
-.react-flow__selection {
+.revue-flow__selection {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-flow__edge {
+.revue-flow__edge {
   &.selected {
-    .react-flow__edge-path {
+    .revue-flow__edge-path {
       stroke: #555;
     }
   }
@@ -16,37 +16,37 @@
   }
 
   &.updating {
-    .react-flow__edge-path {
+    .revue-flow__edge-path {
       stroke: #777;
     }
   }
 }
 
-.react-flow__edge-path {
+.revue-flow__edge-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
 
-.react-flow__edge-text {
+.revue-flow__edge-text {
   font-size: 10px;
 }
 
-.react-flow__edge-textbg {
+.revue-flow__edge-textbg {
   fill: white;
 }
 
-.react-flow__connection-path {
+.revue-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
 }
 
-.react-flow__node {
+.revue-flow__node {
   cursor: grab;
 }
 
-.react-flow__node-default,
+.revue-flow__node-default,
-.react-flow__node-input,
+.revue-flow__node-input,
-.react-flow__node-output {
+.revue-flow__node-output {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -57,15 +57,15 @@
   border-style: solid;
 }
 
-.react-flow__node-default.selectable,
+.revue-flow__node-default.selectable,
-.react-flow__node-input.selectable,
+.revue-flow__node-input.selectable,
-.react-flow__node-output.selectable {
+.revue-flow__node-output.selectable {
   &:hover {
     box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
 }
 
-.react-flow__node-input {
+.revue-flow__node-input {
   background: #fff;
   border-color: #0041d0;
 
@@ -74,12 +74,12 @@
     box-shadow: 0 0 0 0.5px #0041d0;
   }
 
-  .react-flow__handle {
+  .revue-flow__handle {
     background: #0041d0;
   }
 }
 
-.react-flow__node-default {
+.revue-flow__node-default {
   background: #fff;
   border-color: #1a192b;
 
@@ -88,12 +88,12 @@
     box-shadow: 0 0 0 0.5px #1a192b;
   }
 
-  .react-flow__handle {
+  .revue-flow__handle {
     background: #1a192b;
   }
 }
 
-.react-flow__node-output {
+.revue-flow__node-output {
   background: #fff;
   border-color: #ff0072;
 
@@ -102,17 +102,17 @@
     box-shadow: 0 0 0 0.5px #ff0072;
   }
 
-  .react-flow__handle {
+  .revue-flow__handle {
     background: #ff0072;
   }
 }
 
-.react-flow__nodesselection-rect {
+.revue-flow__nodesselection-rect {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-flow__handle {
+.revue-flow__handle {
   position: absolute;
   width: 6px;
   height: 6px;
@@ -125,11 +125,11 @@
   }
 }
 
-.react-flow__minimap {
+.revue-flow__minimap {
   background-color: #fff;
 }
 
-.react-flow__controls {
+.revue-flow__controls {
   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
 
   &-button {

yarn.lock

@@ -702,30 +702,30 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-react-constant-elements@^7.12.1":
+"@babel/plugin-transform-revue-constant-elements@^7.12.1":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.14.5.tgz#41790d856f7c5cec82d2bcf5d0e5064d682522ed"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-constant-elements/-/plugin-transform-revue-constant-elements-7.14.5.tgz#41790d856f7c5cec82d2bcf5d0e5064d682522ed"
   integrity sha512-NBqLEx1GxllIOXJInJAQbrnwwYJsV3WaMHIcOwD8rhYS0AabTWn7kHdHgPgu5RmHLU0q4DMxhAMu8ue/KampgQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-react-display-name@^7.14.5":
+"@babel/plugin-transform-revue-display-name@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-display-name/-/plugin-transform-revue-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
   integrity sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-react-jsx-development@^7.14.5":
+"@babel/plugin-transform-revue-jsx-development@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-jsx-development/-/plugin-transform-revue-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
   integrity sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==
   dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.14.5"
+    "@babel/plugin-transform-revue-jsx" "^7.14.5"
 
-"@babel/plugin-transform-react-jsx@^7.14.5":
+"@babel/plugin-transform-revue-jsx@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-jsx/-/plugin-transform-revue-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
   integrity sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.14.5"
@@ -734,9 +734,9 @@
     "@babel/plugin-syntax-jsx" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/plugin-transform-react-pure-annotations@^7.14.5":
+"@babel/plugin-transform-revue-pure-annotations@^7.14.5":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-revue-pure-annotations/-/plugin-transform-revue-pure-annotations-7.14.5.tgz#18de612b84021e3a9802cbc212c9d9f46d0d11fc"
   integrity sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.14.5"
@@ -906,17 +906,17 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.12.5":
+"@babel/preset-revue@^7.12.5":
   version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.14.5.tgz#0fbb769513f899c2c56f3a882fa79673c2d4ab3c"
+  resolved "https://registry.yarnpkg.com/@babel/preset-revue/-/preset-revue-7.14.5.tgz#0fbb769513f899c2c56f3a882fa79673c2d4ab3c"
   integrity sha512-XFxBkjyObLvBaAvkx1Ie95Iaq4S/GUEIrejyrntQ/VCMKUYvKLoyKxOBzJ2kjA3b6rC9/KL6KXfDC2GqvLiNqQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-validator-option" "^7.14.5"
-    "@babel/plugin-transform-react-display-name" "^7.14.5"
+    "@babel/plugin-transform-revue-display-name" "^7.14.5"
-    "@babel/plugin-transform-react-jsx" "^7.14.5"
+    "@babel/plugin-transform-revue-jsx" "^7.14.5"
-    "@babel/plugin-transform-react-jsx-development" "^7.14.5"
+    "@babel/plugin-transform-revue-jsx-development" "^7.14.5"
-    "@babel/plugin-transform-react-pure-annotations" "^7.14.5"
+    "@babel/plugin-transform-revue-pure-annotations" "^7.14.5"
 
 "@babel/runtime@^7.8.4":
   version "7.14.6"
@@ -1103,9 +1103,9 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
   integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
 
-"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+"@svgr/babel-plugin-transform-revue-native-svg@^5.4.0":
   version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-revue-native-svg/-/babel-plugin-transform-revue-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
   integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
 
 "@svgr/babel-plugin-transform-svg-component@^5.5.0":
@@ -1124,7 +1124,7 @@
     "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
     "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
     "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-revue-native-svg" "^5.4.0"
     "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
 
 "@svgr/core@^5.5.0":
@@ -1168,9 +1168,9 @@
   integrity sha512-EiZmH2VTr+Xzyb6Ga8XtGa9MEbiU3WQnB5vHmqhwAUqibU3uwuwr7MN+QwIh/gtBk1ucMim8BCfcRTlLVREM8A==
   dependencies:
     "@babel/core" "^7.12.3"
-    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
+    "@babel/plugin-transform-revue-constant-elements" "^7.12.1"
     "@babel/preset-env" "^7.12.1"
-    "@babel/preset-react" "^7.12.5"
+    "@babel/preset-revue" "^7.12.5"
     "@svgr/core" "^5.5.0"
     "@svgr/plugin-jsx" "^5.5.0"
     "@svgr/plugin-svgo" "^5.5.0"