refactor(general): cleanup

src/components/ConnectionLine/index.tsx

@@ -31,8 +31,7 @@ const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, trans
 
 const getSourceHandle = (handleId: string | null, sourceNode: NodeInternalsItem, connectionHandleType: HandleType) => {
   const handleTypeInverted = connectionHandleType === 'source' ? 'target' : 'source';
-  const handleBound =
-    sourceNode.handleBounds?.[connectionHandleType] || sourceNode.handleBounds?.[handleTypeInverted];
+  const handleBound = sourceNode.handleBounds?.[connectionHandleType] || sourceNode.handleBounds?.[handleTypeInverted];
 
   return handleId ? handleBound?.find((d: HandleElement) => d.id === handleId) : handleBound?.[0];
 };
@@ -66,8 +65,8 @@ export default ({
   const sourceHandle = getSourceHandle(handleId, sourceNode.current, connectionHandleType);
   const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (sourceNode.current?.width ?? 0) / 2;
   const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.current?.height ?? 0;
-  const sourceX = sourceNode.current.positionAbsolute!.x + sourceHandleX;
-  const sourceY = sourceNode.current.positionAbsolute!.y + sourceHandleY;
+  const sourceX = sourceNode.current.positionAbsolute.x + sourceHandleX;
+  const sourceY = sourceNode.current.positionAbsolute.y + sourceHandleY;
 
   const targetX = (connectionPositionX - transform[0]) / transform[2];
   const targetY = (connectionPositionY - transform[1]) / transform[2];
@@ -96,34 +95,24 @@ export default ({
 
   let dAttr: string = '';
 
+  const pathParams = {
+    sourceX,
+    sourceY,
+    sourcePosition: sourceHandle?.position,
+    targetX,
+    targetY,
+    targetPosition,
+  };
+
   if (connectionLineType === ConnectionLineType.Bezier) {
-    dAttr = getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition: sourceHandle?.position,
-      targetX,
-      targetY,
-      targetPosition,
-    });
+    dAttr = getBezierPath(pathParams);
   } else if (connectionLineType === ConnectionLineType.Step) {
     dAttr = getSmoothStepPath({
-      sourceX,
-      sourceY,
-      sourcePosition: sourceHandle?.position,
-      targetX,
-      targetY,
-      targetPosition,
+      ...pathParams,
       borderRadius: 0,
     });
   } else if (connectionLineType === ConnectionLineType.SmoothStep) {
-    dAttr = getSmoothStepPath({
-      sourceX,
-      sourceY,
-      sourcePosition: sourceHandle?.position,
-      targetX,
-      targetY,
-      targetPosition,
-    });
+    dAttr = getSmoothStepPath(pathParams);
   } else {
     dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
   }

src/components/Handle/handler.ts

@@ -36,8 +36,6 @@ function checkElementBelowIsValid(
   isValidConnection: ValidConnectionFunc,
   doc: Document | ShadowRoot
 ) {
-  // TODO: why does this throw an error? elementFromPoint should be available for ShadowRoot too
-  // @ts-ignore
   const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target') || false;
   const elementBelowIsSource = elementBelow?.classList.contains('source') || false;
@@ -112,7 +110,6 @@ export function onMouseDown(
     return;
   }
 
-  // @ts-ignore
   const elementBelow = doc.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
   const elementBelowIsSource = elementBelow?.classList.contains('source');

src/components/Handle/index.tsx

@@ -5,7 +5,6 @@ import shallow from 'zustand/shallow';
 import { useStore } from '../../store';
 import NodeIdContext from '../../contexts/NodeIdContext';
 import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
-
 import { onMouseDown, SetSourceIdFunc, SetPosition } from './handler';
 
 const alwaysValid = () => true;

src/components/NodesSelection/index.tsx

@@ -1,11 +1,12 @@
 /**
  * The nodes selection rectangle gets displayed when a user
- * made a selectio  with on or several nodes
+ * made a selection with on or several nodes
  */
 
 import React, { memo, useMemo, useCallback, useRef, MouseEvent } from 'react';
 import { DraggableCore, DraggableData } from 'react-draggable';
 import cc from 'classcat';
+import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { Node, ReactFlowState } from '../../types';
@@ -38,8 +39,10 @@ function NodesSelection({
   onSelectionContextMenu,
   noPanClassName,
 }: NodesSelectionProps) {
-  const { transform, userSelectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } =
-    useStore(selector);
+  const { transform, userSelectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } = useStore(
+    selector,
+    shallow
+  );
   const [tX, tY, tScale] = transform;
   const nodeRef = useRef(null);
 

src/components/SelectionListener/index.tsx

@@ -9,7 +9,7 @@ interface SelectionListenerProps {
 }
 
 // @TODO: work with nodeInternals instead of converting it to an array
-const selectedElementsSelector = (s: ReactFlowState) => ({
+const selector = (s: ReactFlowState) => ({
   selectedNodes: Array.from(s.nodeInternals)
     .filter(([_, n]) => n.selected)
     .map(([_, node]) => node),
@@ -17,9 +17,9 @@ const selectedElementsSelector = (s: ReactFlowState) => ({
 });
 
 // This is just a helper component for calling the onSelectionChange listener.
-
+// @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?
 export default ({ onSelectionChange }: SelectionListenerProps) => {
-  const { selectedNodes, selectedEdges } = useStore(selectedElementsSelector, shallow);
+  const { selectedNodes, selectedEdges } = useStore(selector, shallow);
 
   useEffect(() => {
     onSelectionChange({ nodes: selectedNodes, edges: selectedEdges });