fix: crash in usePixiPointerDown due to undefined PixiPoints (#1612)

v3/src/components/data-display/components/background.tsx

@@ -14,11 +14,11 @@ import {useDataDisplayLayout} from "../hooks/use-data-display-layout"
 import {useDataDisplayModelContext} from "../hooks/use-data-display-model"
 import {usePixiPointerDownDeselect} from "../hooks/use-pixi-pointer-down-deselect"
 import {MarqueeState} from "../models/marquee-state"
-import {IPixiPointMetadata, IPixiPointsArray, PixiBackgroundPassThroughEvent, PixiPoints} from "../pixi/pixi-points"
+import {IPixiPointMetadata, PixiBackgroundPassThroughEvent, PixiPointsArray} from "../pixi/pixi-points"
 
 interface IProps {
   marqueeState: MarqueeState
-  pixiPointsArray: IPixiPointsArray
+  pixiPointsArray: PixiPointsArray
 }
 
 type RTree = ReturnType<typeof RTreeLib>
@@ -38,10 +38,10 @@ interface SelectionMap {
   [key: string]: SelectionSpec
 }
 
-const prepareTree = (pixiPointsArray: PixiPoints[]): RTree => {
+const prepareTree = (pixiPointsArray: PixiPointsArray): RTree => {
     const selectionTree = RTreeLib(10)
     pixiPointsArray.forEach(pixiPoints => {
-      pixiPoints.forEachPoint((point: PIXI.Sprite, metadata: IPixiPointMetadata) => {
+      pixiPoints?.forEachPoint((point: PIXI.Sprite, metadata: IPixiPointMetadata) => {
         const rect = {
           x: point.x,
           y: point.y,

v3/src/components/data-display/hooks/use-pixi-pointer-down-deselect.ts

@@ -1,9 +1,9 @@
 import { selectAllCases } from "../../../models/data/data-set-utils"
 import { IDataDisplayContentModel } from "../models/data-display-content-model"
-import { PixiPoints } from "../pixi/pixi-points"
+import { PixiPoints, PixiPointsArray } from "../pixi/pixi-points"
 import { usePixiPointerDown } from "./use-pixi-pointer-down"
 
-export function usePixiPointerDownDeselect(pixiPointsArray: PixiPoints[], model?: IDataDisplayContentModel) {
+export function usePixiPointerDownDeselect(pixiPointsArray: PixiPointsArray, model?: IDataDisplayContentModel) {
   usePixiPointerDown(pixiPointsArray, (event, pixiPoints: PixiPoints) => {
     if (!event.shiftKey && !event.metaKey && !event.ctrlKey) {
       pixiPoints.requestAnimationFrame("deselectAll", () => {

v3/src/components/data-display/hooks/use-pixi-pointer-down.ts

@@ -1,19 +1,19 @@
 import { useEffect } from "react"
 import { useTileModelContext } from "../../../hooks/use-tile-model-context"
-import { PixiPoints } from "../pixi/pixi-points"
+import { PixiPoints, PixiPointsArray } from "../pixi/pixi-points"
 
 type OnPointerDownCallback = (event: PointerEvent, pixiPoints: PixiPoints) => void
 
-export function usePixiPointerDown(pixiPointsArray: PixiPoints[], onPointerDown: OnPointerDownCallback) {
+export function usePixiPointerDown(pixiPointsArray: PixiPointsArray, onPointerDown: OnPointerDownCallback) {
   const { isTileSelected } = useTileModelContext()
 
   useEffect(() => {
     const handlePointerDownCapture = (event: PointerEvent) => {
       // Browser events are dispatched directly to the PIXI canvas.
       // Re-dispatched events are dispatched to elements behind the PIXI canvas.
-      const pixiPointsIndex = pixiPointsArray.findIndex(pixiPoints => event.target === pixiPoints.canvas)
+      const pixiPointsIndex = pixiPointsArray.findIndex(pixiPoints => event.target === pixiPoints?.canvas)
       // first click selects tile; deselection only occurs once the tile is already selected
-      if (pixiPointsIndex >= 0 && isTileSelected()) {
+      if (pixiPointsIndex >= 0 && pixiPointsArray[pixiPointsIndex] && isTileSelected()) {
         onPointerDown(event, pixiPointsArray[pixiPointsIndex])
       }
     }

v3/src/components/data-display/hooks/use-pixi-points-array.ts

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useState } from "react"
-import { PixiPoints } from "../pixi/pixi-points"
+import { PixiPoints, PixiPointsArray } from "../pixi/pixi-points"
 
 interface IProps {
   addInitialPixiPoints?: boolean
 }
 
 export function usePixiPointsArray(props?: IProps) {
   const { addInitialPixiPoints = false } = props || {}
-  const [ pixiPointsArray, setPixiPointsArray ] = useState<PixiPoints[]>([])
+  const [ pixiPointsArray, setPixiPointsArray ] = useState<PixiPointsArray>([])
 
   useEffect(() => {
     const initialPixiPoints = addInitialPixiPoints ? new PixiPoints() : undefined

v3/src/components/data-display/pixi/pixi-points.ts

@@ -24,7 +24,7 @@ export enum PixiBackgroundPassThroughEvent {
   PointerDown = "pointerdown",
 }
 
-export type IPixiPointsArray = PixiPoints[]
+export type PixiPointsArray = Array<Maybe<PixiPoints>>
 
 export type PixiPointEventHandler = (event: PointerEvent, point: PIXI.Sprite, metadata: IPixiPointMetadata) => void
 

v3/src/components/graph/components/graph.tsx

@@ -7,7 +7,7 @@ import {clsx} from "clsx"
 import { logStringifiedObjectMessage } from "../../../lib/log-message"
 import {mstReaction} from "../../../utilities/mst-reaction"
 import {onAnyAction} from "../../../utilities/mst-utils"
-import {IPixiPointsArray} from "../../data-display/pixi/pixi-points"
+import {PixiPointsArray} from "../../data-display/pixi/pixi-points"
 import {GraphAttrRole, graphPlaceToAttrRole, kPortalClass} from "../../data-display/data-display-types"
 import {AxisPlace, AxisPlaces} from "../../axis/axis-types"
 import {GraphAxis} from "./graph-axis"
@@ -46,7 +46,7 @@ import "./graph.scss"
 interface IProps {
   graphController: GraphController
   graphRef: MutableRefObject<HTMLDivElement | null>
-  pixiPointsArray: IPixiPointsArray
+  pixiPointsArray: PixiPointsArray
 }
 
 export const Graph = observer(function Graph({graphController, graphRef, pixiPointsArray}: IProps) {

v3/src/components/graph/hooks/use-graph-controller.ts

@@ -1,12 +1,12 @@
 import {useEffect} from "react"
 import {GraphController} from "../models/graph-controller"
 import {IGraphContentModel} from "../models/graph-content-model"
-import {IPixiPointsArray} from "../../data-display/pixi/pixi-points"
+import {PixiPointsArray} from "../../data-display/pixi/pixi-points"
 
 export interface IUseGraphControllerProps {
   graphController: GraphController,
   graphModel?: IGraphContentModel,
-  pixiPointsArray: IPixiPointsArray
+  pixiPointsArray: PixiPointsArray
 }
 
 export const useGraphController = ({graphController, graphModel, pixiPointsArray}: IUseGraphControllerProps) => {

v3/src/components/map/components/map-background.tsx

@@ -4,13 +4,13 @@ import { useMemo } from "use-memo-one"
 import { Background } from "../../data-display/components/background"
 import { Marquee } from "../../data-display/components/marquee"
 import { MarqueeState } from "../../data-display/models/marquee-state"
-import { IPixiPointsArray } from "../../data-display/pixi/pixi-points"
+import { PixiPointsArray } from "../../data-display/pixi/pixi-points"
 import { IMapContentModel } from "../models/map-content-model"
 import { mstReaction } from "../../../utilities/mst-reaction"
 
 interface IProps {
   mapModel: IMapContentModel
-  pixiPointsArray: IPixiPointsArray
+  pixiPointsArray: PixiPointsArray
 }
 
 export const MapBackground = observer(function MapBackground({ mapModel, pixiPointsArray }: IProps) {