Refactor InteractiveGraphics filter hooks to named params (#96)

Author: Abse2001

site/components/InteractiveGraphics/InteractiveGraphics.tsx

@@ -1,40 +1,40 @@
+import useResizeObserver from "@react-hook/resize-observer"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { SuperGrid } from "react-supergrid"
+import { getGraphicsBounds } from "site/utils/getGraphicsBounds"
+import { getMaxStep } from "site/utils/getMaxStep"
+import { sortRectsByArea } from "site/utils/sortRectsByArea"
 import {
+  applyToPoint,
   compose,
+  inverse,
   scale,
   translate,
-  inverse,
-  applyToPoint,
 } from "transformation-matrix"
-import { GraphicsObject } from "../../../lib"
-import { useMemo, useState, useEffect, useCallback } from "react"
 import useMouseMatrixTransform from "use-mouse-matrix-transform"
+import { GraphicsObject } from "../../../lib"
+import { DimensionOverlay } from "../DimensionOverlay"
+import { Arrow } from "./Arrow"
+import { Circle } from "./Circle"
+import { ContextMenu } from "./ContextMenu"
 import { InteractiveState } from "./InteractiveState"
-import { SuperGrid } from "react-supergrid"
-import useResizeObserver from "@react-hook/resize-observer"
 import { Line } from "./Line"
+import { Marker, MarkerPoint } from "./Marker"
 import { Point } from "./Point"
+import { Polygon } from "./Polygon"
 import { Rect } from "./Rect"
-import { Circle } from "./Circle"
 import { Text } from "./Text"
-import { Arrow } from "./Arrow"
-import { getGraphicsBounds } from "site/utils/getGraphicsBounds"
-import { sortRectsByArea } from "site/utils/sortRectsByArea"
 import {
-  useIsPointOnScreen,
   useDoesLineIntersectViewport,
+  useFilterArrows,
+  useFilterCircles,
   useFilterLines,
   useFilterPoints,
+  useFilterPolygons,
   useFilterRects,
-  useFilterCircles,
   useFilterTexts,
-  useFilterArrows,
-  useFilterPolygons,
+  useIsPointOnScreen,
 } from "./hooks"
-import { DimensionOverlay } from "../DimensionOverlay"
-import { getMaxStep } from "site/utils/getMaxStep"
-import { ContextMenu } from "./ContextMenu"
-import { Marker, MarkerPoint } from "./Marker"
-import { Polygon } from "./Polygon"
 
 export type GraphicsObjectClickEvent = {
   type: "point" | "line" | "rect" | "circle" | "text" | "arrow" | "polygon"
@@ -315,31 +315,37 @@ export const InteractiveGraphics = ({
     return true
   }
 
-  const filterLines = useFilterLines(
+  const filterLines = useFilterLines({
     isPointOnScreen,
     doesLineIntersectViewport,
     filterLayerAndStep,
-  )
+  })
 
-  const filterPoints = useFilterPoints(isPointOnScreen, filterLayerAndStep)
+  const filterPoints = useFilterPoints({
+    isPointOnScreen,
+    filterLayerAndStep,
+  })
 
-  const filterRects = useFilterRects(
+  const filterRects = useFilterRects({
     isPointOnScreen,
     doesLineIntersectViewport,
     filterLayerAndStep,
-  )
+  })
 
-  const filterCircles = useFilterCircles(
+  const filterCircles = useFilterCircles({
     isPointOnScreen,
     filterLayerAndStep,
     realToScreen,
     size,
-  )
-  const filterTexts = useFilterTexts(isPointOnScreen, filterLayerAndStep)
-  const filterArrows = useFilterArrows(
+  })
+  const filterTexts = useFilterTexts({
+    isPointOnScreen,
+    filterLayerAndStep,
+  })
+  const filterArrows = useFilterArrows({
     isPointOnScreen,
     doesLineIntersectViewport,
-  )
+  })
   const filterPolygons = useFilterPolygons({
     isPointOnScreen,
     doesLineIntersectViewport,

site/components/InteractiveGraphics/hooks/useFilterArrows.ts

@@ -1,17 +1,22 @@
-import { useMemo } from "react"
-import type { Arrow } from "lib/types"
 import { getArrowGeometry } from "lib/arrowHelpers"
+import type { Arrow } from "lib/types"
+import { useMemo } from "react"
 
 type Point = { x: number; y: number }
 
 type LineCheck = (p1: Point, p2: Point) => boolean
 
 type PointCheck = (point: Point) => boolean
 
-export const useFilterArrows = (
-  isPointOnScreen: PointCheck,
-  doesLineIntersectViewport: LineCheck,
-) => {
+type UseFilterArrowsParams = {
+  isPointOnScreen: PointCheck
+  doesLineIntersectViewport: LineCheck
+}
+
+export const useFilterArrows = ({
+  isPointOnScreen,
+  doesLineIntersectViewport,
+}: UseFilterArrowsParams) => {
   return useMemo(() => {
     return (arrow: Arrow) => {
       const geometry = getArrowGeometry(arrow)

site/components/InteractiveGraphics/hooks/useFilterCircles.ts

@@ -1,5 +1,5 @@
-import { applyToPoint, type Matrix } from "transformation-matrix"
 import { useMemo } from "react"
+import { type Matrix, applyToPoint } from "transformation-matrix"
 import { OFFSCREEN_MARGIN } from "./useDoesLineIntersectViewport"
 
 type Circle = {
@@ -9,12 +9,19 @@ type Circle = {
   step?: number
 }
 
-export const useFilterCircles = (
-  isPointOnScreen: (point: { x: number; y: number }) => boolean,
-  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean,
-  realToScreen: Matrix,
-  size: { width: number; height: number },
-) => {
+type UseFilterCirclesParams = {
+  isPointOnScreen: (point: { x: number; y: number }) => boolean
+  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean
+  realToScreen: Matrix
+  size: { width: number; height: number }
+}
+
+export const useFilterCircles = ({
+  isPointOnScreen,
+  filterLayerAndStep,
+  realToScreen,
+  size,
+}: UseFilterCirclesParams) => {
   return useMemo(() => {
     return (circle: Circle) => {
       // First apply layer and step filters

site/components/InteractiveGraphics/hooks/useFilterLines.ts

@@ -7,14 +7,20 @@ type Line = {
   closed?: boolean
 }
 
-export const useFilterLines = (
-  isPointOnScreen: (point: { x: number; y: number }) => boolean,
+type UseFilterLinesParams = {
+  isPointOnScreen: (point: { x: number; y: number }) => boolean
   doesLineIntersectViewport: (
     p1: { x: number; y: number },
     p2: { x: number; y: number },
-  ) => boolean,
-  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean,
-) => {
+  ) => boolean
+  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean
+}
+
+export const useFilterLines = ({
+  isPointOnScreen,
+  doesLineIntersectViewport,
+  filterLayerAndStep,
+}: UseFilterLinesParams) => {
   return useMemo(() => {
     return (line: Line) => {
       // First apply layer and step filters

site/components/InteractiveGraphics/hooks/useFilterPoints.ts

@@ -7,10 +7,15 @@ type Point = {
   step?: number
 }
 
-export const useFilterPoints = (
-  isPointOnScreen: (point: { x: number; y: number }) => boolean,
-  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean,
-) => {
+type UseFilterPointsParams = {
+  isPointOnScreen: (point: { x: number; y: number }) => boolean
+  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean
+}
+
+export const useFilterPoints = ({
+  isPointOnScreen,
+  filterLayerAndStep,
+}: UseFilterPointsParams) => {
   return useMemo(() => {
     return (point: Point) => {
       // First apply layer and step filters

site/components/InteractiveGraphics/hooks/useFilterRects.ts

@@ -8,14 +8,20 @@ type Rect = {
   step?: number
 }
 
-export const useFilterRects = (
-  isPointOnScreen: (point: { x: number; y: number }) => boolean,
+type UseFilterRectsParams = {
+  isPointOnScreen: (point: { x: number; y: number }) => boolean
   doesLineIntersectViewport: (
     p1: { x: number; y: number },
     p2: { x: number; y: number },
-  ) => boolean,
-  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean,
-) => {
+  ) => boolean
+  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean
+}
+
+export const useFilterRects = ({
+  isPointOnScreen,
+  doesLineIntersectViewport,
+  filterLayerAndStep,
+}: UseFilterRectsParams) => {
   return useMemo(() => {
     return (rect: Rect) => {
       // First apply layer and step filters

site/components/InteractiveGraphics/hooks/useFilterTexts.ts

@@ -7,10 +7,15 @@ interface Text {
   step?: number
 }
 
-export const useFilterTexts = (
-  isPointOnScreen: (point: { x: number; y: number }) => boolean,
-  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean,
-) => {
+type UseFilterTextsParams = {
+  isPointOnScreen: (point: { x: number; y: number }) => boolean
+  filterLayerAndStep: (obj: { layer?: string; step?: number }) => boolean
+}
+
+export const useFilterTexts = ({
+  isPointOnScreen,
+  filterLayerAndStep,
+}: UseFilterTextsParams) => {
   return useMemo(() => {
     return (text: Text) => {
       if (!filterLayerAndStep(text)) return false