From d29fff359d208a1e28a97e035d33df0f098f6dbc Mon Sep 17 00:00:00 2001 From: Drew Hess Date: Wed, 24 Apr 2024 17:24:09 +0100 Subject: [PATCH] chore: remove onNodesChange and fitView Signed-off-by: Drew Hess --- src/components/EvalBoundedInterp/index.tsx | 8 +-- src/components/EvalFull/index.tsx | 8 +-- src/components/SelectionInfo/index.tsx | 8 +-- src/components/TreeReactFlow/index.tsx | 77 +--------------------- 4 files changed, 6 insertions(+), 95 deletions(-) diff --git a/src/components/EvalBoundedInterp/index.tsx b/src/components/EvalBoundedInterp/index.tsx index 97b5561d..be2da0cc 100644 --- a/src/components/EvalBoundedInterp/index.tsx +++ b/src/components/EvalBoundedInterp/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow"; +import { ReactFlowProvider } from "reactflow"; import { EvalBoundedInterpResp, GlobalName, Level } from "@/primer-api"; import { SelectMenu, TreeReactFlowOne } from "@/components"; import { @@ -26,10 +26,6 @@ const Evaluated = (p: { extraTreeProps: Partial; }) => { const padding = 1.0; - const { fitView } = useReactFlow(); - const onNodesChange = (_: NodeChange[]) => { - fitView({ padding }); - }; const resultTree = () => { switch (p?.evaluated?.tag) { case "EvalBoundedInterpRespNormal": @@ -47,8 +43,6 @@ const Evaluated = (p: { {...resultTree()} level={p.level} zoomBarProps={{ padding }} - onNodesChange={onNodesChange} - fitViewOptions={{ padding }} {...p.extraTreeProps} /> ); diff --git a/src/components/EvalFull/index.tsx b/src/components/EvalFull/index.tsx index a8431a7c..c323d1a1 100644 --- a/src/components/EvalFull/index.tsx +++ b/src/components/EvalFull/index.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow"; +import { ReactFlowProvider } from "reactflow"; import { EvalFullResp, GlobalName, Level } from "@/primer-api"; import { SelectMenu, TreeReactFlowOne } from "@/components"; import { @@ -26,10 +26,6 @@ const Evaluated = (p: { extraTreeProps: Partial; }) => { const padding = 1.0; - const { fitView } = useReactFlow(); - const onNodesChange = (_: NodeChange[]) => { - fitView({ padding }); - }; return ( ); diff --git a/src/components/SelectionInfo/index.tsx b/src/components/SelectionInfo/index.tsx index d88f3527..f38d5954 100644 --- a/src/components/SelectionInfo/index.tsx +++ b/src/components/SelectionInfo/index.tsx @@ -1,4 +1,4 @@ -import { NodeChange, ReactFlowProvider, useReactFlow } from "reactflow"; +import { ReactFlowProvider } from "reactflow"; import { Tree, Level, TypeOrKind } from "@/primer-api"; import { TreeReactFlowOne } from "@/components"; import { @@ -18,10 +18,6 @@ const TypeOrKindTree = (p: { extraTreeProps: Partial; }) => { const padding = 1.0; - const { fitView } = useReactFlow(); - const onNodesChange = (_: NodeChange[]) => { - fitView({ padding }); - }; return ( ); diff --git a/src/components/TreeReactFlow/index.tsx b/src/components/TreeReactFlow/index.tsx index 7ca982b9..a808ac76 100644 --- a/src/components/TreeReactFlow/index.tsx +++ b/src/components/TreeReactFlow/index.tsx @@ -8,7 +8,6 @@ import { Level, TypeDef, } from "@/primer-api"; -import type { NodeChange } from "reactflow"; import { ReactFlow, Node as RFNode, @@ -22,7 +21,6 @@ import { EdgeProps, getBezierPath, EdgeTypes, - useReactFlow, } from "reactflow"; import "./reactflow.css"; import { MutableRefObject, PropsWithChildren, useId } from "react"; @@ -74,27 +72,6 @@ import { mapSnd } from "fp-ts/lib/Tuple"; export type ScrollToDef = (defName: string) => void; -/** - * Only the `FitViewOptions` from `ReactFlow` that we want to expose. - */ -export type FitViewOptions = { - padding?: number; -}; - -/** - * A subset of the properties that `ReactFlow` supports and that we want to - * expose to users of `TreeReactFlow` and `TreeReactFlowOne`. - */ -export type OnNodesChange = (nodesChanges: NodeChange[]) => void; -type ReactFlowParams = { - onNodesChange?: OnNodesChange; - - /** - * Options that are passed to the initial `fitView` call. - */ - fitViewOptions?: FitViewOptions; -}; - /** These properties are needed to construct nodes, but are invariant across all nodes. */ export type NodeStyle = "corner" | "inline"; type NodeParams = { @@ -126,8 +103,7 @@ export type TreeReactFlowProps = { scrollToDefRef: MutableRefObject; scrollToTypeDefRef: MutableRefObject; zoomBarProps: ZoomBarProps; -} & NodeParams & - ReactFlowParams; +} & NodeParams; export const defaultTreeReactFlowProps: Pick< TreeReactFlowProps, "treePadding" | "forestLayout" | "defParams" | "layout" | keyof NodeParams @@ -1246,10 +1222,6 @@ export const TreeReactFlow = (p: PropsWithChildren) => { } zoomBarProps={p.zoomBarProps} > - {p.children} ); @@ -1261,8 +1233,7 @@ export type TreeReactFlowOneProps = { onNodeClick?: (event: React.MouseEvent, node: Positioned) => void; layout: LayoutParams; zoomBarProps: ZoomBarProps; -} & NodeParams & - ReactFlowParams; +} & NodeParams; /** Renders one `APITree` (e.g. one type or one term) on its own individual canvas. * This is essentially a much simpler version of `TreeReactFlow`. @@ -1301,8 +1272,7 @@ const Trees = ( node: Positioned> ) => void; zoomBarProps: ZoomBarProps; - }> & - ReactFlowParams + }> ): JSX.Element => { const trees = usePromise([], p.makeTrees); const { nodes, edges } = combineGraphs([ @@ -1324,8 +1294,6 @@ const Trees = ( nodeTypes={nodeTypes} edgeTypes={edgeTypes} proOptions={{ hideAttribution: true, account: "paid-pro" }} - onNodesChange={p.onNodesChange} - fitViewOptions={p.fitViewOptions} > @@ -1334,45 +1302,6 @@ const Trees = ( ); }; -// This component is rendered purely for side effects. We do this -// rather than wrap our `ReactFlow` components with -// `ReactFlowProvider`s. -const SetTreeReactFlowCallbacks = ({ - scrollToDefRef, - scrollToTypeDefRef, -}: { - scrollToDefRef: MutableRefObject; - scrollToTypeDefRef: MutableRefObject; -}) => { - const { fitView, getZoom } = useReactFlow(); - - const scrollToDef: ScrollToDef = (defName: string) => { - // Don't change the current zoom level when scrolling to a - // definition. - const zoomLevel: number = getZoom(); - fitView({ - nodes: [{ id: defNameToNodeId(defName) }], - minZoom: zoomLevel, - maxZoom: zoomLevel, - }); - }; - scrollToDefRef.current = scrollToDef; - - const scrollToTypeDef: ScrollToDef = (defName: string) => { - // Don't change the current zoom level when scrolling to a - // definition. - const zoomLevel: number = getZoom(); - fitView({ - nodes: [{ id: typeDefNameToNodeId(defName) }], - minZoom: zoomLevel, - maxZoom: zoomLevel, - }); - }; - scrollToTypeDefRef.current = scrollToTypeDef; - - return <>; -}; - /** A more strongly-typed version of the `ReactFlow` component. * This allows us to use a more refined node type, * check that we register its subtypes correctly with ReactFlow,