From b80efb7dd399bdac3af0918380a50bb1055f2d8c Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 26 Jan 2023 10:42:50 +0100 Subject: [PATCH] chore(app): cleanup --- .../src/components/EdgeLabelRenderer/index.tsx | 1 + packages/core/src/components/Edges/BaseEdge.tsx | 2 +- packages/core/src/components/Edges/wrapEdge.tsx | 2 +- packages/core/src/components/Handle/utils.ts | 2 +- .../core/src/components/NodesSelection/index.tsx | 16 +++++++--------- .../core/src/components/UserSelection/index.tsx | 4 ++-- .../src/container/EdgeRenderer/MarkerSymbols.tsx | 2 ++ packages/core/src/container/GraphView/index.tsx | 2 +- 8 files changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/EdgeLabelRenderer/index.tsx b/packages/core/src/components/EdgeLabelRenderer/index.tsx index 07477493..46311f26 100644 --- a/packages/core/src/components/EdgeLabelRenderer/index.tsx +++ b/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'; diff --git a/packages/core/src/components/Edges/BaseEdge.tsx b/packages/core/src/components/Edges/BaseEdge.tsx index ad7adcd8..dc60493c 100644 --- a/packages/core/src/components/Edges/BaseEdge.tsx +++ b/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, diff --git a/packages/core/src/components/Edges/wrapEdge.tsx b/packages/core/src/components/Edges/wrapEdge.tsx index 9d10f944..d53044f7 100644 --- a/packages/core/src/components/Edges/wrapEdge.tsx +++ b/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) => { const EdgeWrapper = ({ diff --git a/packages/core/src/components/Handle/utils.ts b/packages/core/src/components/Handle/utils.ts index a049a2cc..439ccc7a 100644 --- a/packages/core/src/components/Handle/utils.ts +++ b/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; diff --git a/packages/core/src/components/NodesSelection/index.tsx b/packages/core/src/components/NodesSelection/index.tsx index 08968afe..be4ecf59 100644 --- a/packages/core/src/components/NodesSelection/index.tsx +++ b/packages/core/src/components/NodesSelection/index.tsx @@ -21,20 +21,18 @@ export interface NodesSelectionProps { disableKeyboardA11y: boolean; } -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 selector = (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 } = useStore(bboxSelector, shallow); + const { width, height, x: left, y: top, transformString, userSelectionActive } = useStore(selector, shallow); const updatePositions = useUpdateNodePositions(); const nodeRef = useRef(null); diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx index cb570fac..00bbcd63 100644 --- a/packages/core/src/components/UserSelection/index.tsx +++ b/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; } diff --git a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx index 7429f635..aa561242 100644 --- a/packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/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; } diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 3de2550c..e489b1e9 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/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 & Required<