chore(app): cleanup

packages/core/src/components/EdgeLabelRenderer/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
+
 import { useStore } from '../../hooks/useStore';
 import { ReactFlowState } from '../../types';
 

packages/core/src/components/Edges/BaseEdge.tsx

@@ -1,6 +1,6 @@
 import EdgeText from './EdgeText';
-import type { BaseEdgeProps } from '../../types';
 import { isNumeric } from '../../utils';
+import type { BaseEdgeProps } from '../../types';
 
 const BaseEdge = ({
   path,

packages/core/src/components/Edges/wrapEdge.tsx

@@ -9,7 +9,7 @@ import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
 import { elementSelectionKeys } from '../../utils';
-import type { EdgeProps, WrapEdgeProps, Connection, HandleType } from '../../types';
+import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({

packages/core/src/components/Handle/utils.ts

@@ -1,6 +1,6 @@
 import { ConnectionMode } from '../../types';
-import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 import { internalsSymbol } from '../../utils';
+import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 
 export type ConnectionHandle = {
   id: string | null;

packages/core/src/components/NodesSelection/index.tsx

@@ -21,20 +21,18 @@ export interface NodesSelectionProps {
   disableKeyboardA11y: boolean;
 }
 
-const selector = (s: ReactFlowState) => ({
+const selector = (s: ReactFlowState) => {
-  transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
-  userSelectionActive: s.userSelectionActive,
-});
-
-const bboxSelector = (s: ReactFlowState) => {
   const selectedNodes = s.getNodes().filter((n) => n.selected);
-  return getRectOfNodes(selectedNodes, s.nodeOrigin);
+  return {
+    ...getRectOfNodes(selectedNodes, s.nodeOrigin),
+    transformString: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
+    userSelectionActive: s.userSelectionActive,
+  };
 };
 
 function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) {
   const store = useStoreApi();
-  const { transformString, userSelectionActive } = useStore(selector, shallow);
+  const { width, height, x: left, y: top, transformString, userSelectionActive } = useStore(selector, shallow);
-  const { width, height, x: left, y: top } = useStore(bboxSelector, shallow);
   const updatePositions = useUpdateNodePositions();
 
   const nodeRef = useRef<HTMLDivElement>(null);

packages/core/src/components/UserSelection/index.tsx

@@ -10,9 +10,9 @@ const selector = (s: ReactFlowState) => ({
 
 function UserSelection() {
   const { userSelectionActive, userSelectionRect } = useStore(selector, shallow);
-  const showSelectionBox = userSelectionActive && userSelectionRect;
+  const isActive = userSelectionActive && userSelectionRect;
 
-  if (!showSelectionBox) {
+  if (!isActive) {
     return null;
   }
 

packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -40,6 +40,7 @@ export const MarkerSymbols = {
 
 export function useMarkerSymbol(type: MarkerType) {
   const store = useStoreApi();
+
   const symbol = useMemo(() => {
     const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
@@ -51,6 +52,7 @@ export function useMarkerSymbol(type: MarkerType) {
 
     return MarkerSymbols[type];
   }, [type]);
+
   return symbol;
 }
 

packages/core/src/container/GraphView/index.tsx

@@ -5,8 +5,8 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import ViewportWrapper from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 import ConnectionLine from '../../components/ConnectionLine';
+import type { EdgeTypesWrapped, NodeTypesWrapped, ReactFlowProps } from '../../types';
 
 export type GraphViewProps = Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> &
   Required<