refactor(handle): use weaker selectors so its easier to overwrite

README.md

@@ -345,12 +345,12 @@ The React Flow wrapper has the className `react-flow`. If you want to change the
 * `.react-flow__nodesselection` - Nodes selection
 * `.react-flow__nodesselection-rect ` - Nodes selection rect
 * `.react-flow__handle` - Handle component
-  * `.bottom` is added when position = 'bottom'
-  * `.top` is added when position = 'top'
-  * `.left` is added when position = 'left'
-  * `.right` is added when position = 'right'
-  * `.connecting` is added when connection line is above a handle
-  * `.valid` is added when connection line is above a handle and the connection is valid
+  * `.react-flow__handle-bottom` is added when position = 'bottom'
+  * `.react-flow__handle-top` is added when position = 'top'
+  * `.react-flow__handle-left` is added when position = 'left'
+  * `.react-flow__handle-right` is added when position = 'right'
+  * `.react-flow__handle-connecting` is added when connection line is above a handle
+  * `.react-flow__handle-valid` is added when connection line is above a handle and the connection is valid
 * `.react-flow__background` - Background component
 * `.react-flow__minimap` - Mini map component
 * `.react-flow__controls` - Controls component

example/src/Validation/validation.css

@@ -22,10 +22,10 @@
 
 }
 
-.validationflow .connecting {
+.validationflow .react-flow__handle-connecting {
   background: #ff6060;
 }
 
-.validationflow .connecting.valid {
+.validationflow .react-flow__handle-valid {
   background: #55dd99;
 }

src/components/Handle/BaseHandle.tsx

@@ -55,8 +55,8 @@ function onMouseDown(
       return;
     }
 
-    recentHoveredHandle.classList.remove('valid');
-    recentHoveredHandle.classList.remove('connecting');
+    recentHoveredHandle.classList.remove('react-flow__handle-valid');
+    recentHoveredHandle.classList.remove('react-flow__handle-connecting');
   }
 
   // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
@@ -107,8 +107,8 @@ function onMouseDown(
 
     if (!isOwnHandle && elementBelow) {
       recentHoveredHandle = elementBelow;
-      elementBelow.classList.add('connecting');
-      elementBelow.classList.toggle('valid', isValid);
+      elementBelow.classList.add('react-flow__handle-connecting');
+      elementBelow.classList.toggle('react-flow__handle-valid', isValid);
     }
   }
 
@@ -144,7 +144,7 @@ const BaseHandle = memo(
     ...rest
   }: BaseHandleProps) => {
     const isTarget = type === 'target';
-    const handleClasses = cx('react-flow__handle', 'nodrag', className, position, {
+    const handleClasses = cx('react-flow__handle', `react-flow__handle-${position}`, 'nodrag', className, {
       source: !isTarget,
       target: isTarget,
     });

src/style.css

@@ -5,27 +5,21 @@
   overflow: hidden;
 }
 
-.react-flow__renderer {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-.react-flow__zoompane {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
-
+.react-flow__renderer,
+.react-flow__zoompane,
 .react-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
+}
+
+.react-flow__zoompane {
+  z-index: 1;
+}
+
+.react-flow__selectionpane {
   z-index: 2;
 }
 
@@ -92,12 +86,12 @@
 }
 
 .react-flow__nodes {
+  position: absolute;
   width: 100%;
   height: 100%;
-  position: absolute;
-  z-index: 3;
   pointer-events: none;
   transform-origin: 0 0;
+  z-index: 3;
 }
 
 .react-flow__node {
@@ -106,19 +100,6 @@
   pointer-events: all;
   transform-origin: 0 0;
   cursor: grab;
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 2px #555;
-  }
-
-  &:hover {
-    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
-  }
-
-  .react-flow__handle {
-    cursor: crosshair;
-  }
 }
 
 .react-flow__node-default,
@@ -130,6 +111,15 @@
   font-size: 12px;
   color: #222;
   text-align: center;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 2px #555;
+  }
+
+  &:hover {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
 }
 
 .react-flow__node-default {
@@ -168,29 +158,30 @@
   width: 10px;
   height: 8px;
   background: rgba(255, 255, 255, 0.4);
+  cursor: crosshair;
+}
 
-  &.bottom {
-    top: auto;
-    left: 50%;
-    bottom: 0;
-    transform: translate(-50%, 0);
-  }
+.react-flow__handle-bottom {
+  top: auto;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0);
+}
 
-  &.top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, 0);
-  }
+.react-flow__handle-top {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
 
-  &.left {
-    top: 50%;
-    left: 0;
-    transform: translate(0, -50%);
-  }
+.react-flow__handle-left {
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+}
 
-  &.right {
-    right: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
+.react-flow__handle-right {
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
 }