update: renaming stuff from react to "revue"

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
-// but the user can add them as children of a React Flow component
+// These components are not used by revue Flow directly
+// 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">
-        <path d={dAttr.value} class="react-flow__connection-path" style={props.connectionLineStyle} />
+      <g class="revue-flow__connection">
+        <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',
-        `react-flow__edge-${props.type}`,
+        'revue-flow__edge',
+        `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('react-flow__handle-connecting');
+  hoveredHandle?.classList.remove('revue-flow__handle-valid');
+  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');
-  // when react-flow is used inside a shadow root we can't use document
+  const revueFlowNode = (event.target as Element).closest('.revue-flow');
+  // 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.toggle('react-flow__handle-valid', isValid);
+      elementBelow.classList.add('revue-flow__handle-connecting');
+      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',
-      `react-flow__handle-${props.position}`,
+      'revue-flow__handle',
+      `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',
-        `react-flow__node-${props.type}`,
+        'revue-flow__node',
+        `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');
-  if (!reactFlowNode) {
+  const revueFlowNode = (event.target as Element).closest('.revue-flow');
+  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,
-.react-flow__pane,
-.react-flow__selectionpane {
+.revue-flow__renderer,
+.revue-flow__pane,
+.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,
-.react-flow__node-input,
-.react-flow__node-output {
+.revue-flow__node-default,
+.revue-flow__node-input,
+.revue-flow__node-output {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -57,15 +57,15 @@
   border-style: solid;
 }
 
-.react-flow__node-default.selectable,
-.react-flow__node-input.selectable,
-.react-flow__node-output.selectable {
+.revue-flow__node-default.selectable,
+.revue-flow__node-input.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 {