Stateful Canvas Events Factory?

[arcasoy]

Relates to #2948. The question there regarded getting canvas events within a useState, which was successfully implemented after @CodyJasonBennett's help. That being said, I was pulled to other features and didn't test this thoroughly.

Now testing, I'm noticing that any updates to this state, whether putting a getter within the enabled flag (1 below) or rebuilding the whole events callback (2 below) doesn't actually trigger a change.

1. Getter on enabled attribute -> events not disabled on click & drag

  type canvasEventsParameters = Parameters<typeof Canvas>[0]['events']
  type canvasEventsParametersWithoutUndefined = Exclude<canvasEventsParameters, undefined>
  const [canvasEvents, setCanvasEvents] = useState<canvasEventsParametersWithoutUndefined>((state: any) => ({
    // Default configuration
    ...events(state),

    // Determines if the event layer is active
    enabled: cameraContext.getState().controlsIsDragging,
  }))

  return(
    <Canvas events={canvasEvents}>
       <Rest of Scene />
    </Canvas>
  )

2. Provide complete new events callback with enabled either true or false -> events not disabled on click & drag

  type canvasEventsParameters = Parameters<typeof Canvas>[0]['events']
  type canvasEventsParametersWithoutUndefined = Exclude<canvasEventsParameters, undefined>
  const [canvasEvents, setCanvasEvents] = useState<canvasEventsParametersWithoutUndefined>((state: any) => ({
    // Default configuration
    ...events(state),

    // Determines if the event layer is active
    enabled: true,
  }))

  useEffect(() => {
       let eventManagerFactory: () => canvasEventsParametersWithoutUndefined = controlsAreDragging
      ? () => (state: any) => ({
          // Default configuration
          ...events(state),

          // Determines if the event layer is active
          enabled: false,
        })
      : () => (state: any) => ({
          // Default configuration
          ...events(state),

          // Determines if the event layer is active
          enabled: true,
        });
    setCanvasEvents(eventManagerFactory);
  }, [controlsIsDragging])

  return(
    <Canvas events={canvasEvents}>
       <Rest of Scene />
    </Canvas>
  )

My testing methodology is as follows: we have a canvas with a large model loaded. Each mesh on model has onPointerOver, onClick, etc. events attached to it. When click & dragging in our scene (orthographic camera, orbit controls), and ensuring not to hover over the model, the camera pans at a silky 55 FPS. When I instead drag the camera and allow the mouse to hover over the model, typically moving between meshes quickly, the events begin firing and framerate drops to 20-30 FPS.

If I set the enabled parameter to false ,the canvas is always smooth even onPointerOver of a mesh, but our pointer events don't work when the camera is static, as expected. When I add this changing event logic which initializes as true, I see no performance improvement over our nominal state: smooth camera panning with mouse elsewhere in the scene, framerate drop when mouse hovers over.

Looking into the source code for <Canvas />, I don't see any updating logic when a parameter is changed through state like this, just an onCreated callback. Is changing the events configuration on a canvas even possible in the current code? If not, could a useEffect() be added to the Canvas logic on events change so passed new events trigger an update? Any input appreciated!

[CodyJasonBennett]

What happens if you update events with the Zustand setter? This is what I'd do internally if all goes well, and diff via strict reference.

const set = useThree((state) => state.set)
set({ events })

[arcasoy]

Trying this now a few ways:



The last one is close, just needs to be wrapped with UseBoundStore though not sure how I'd get that. Here's the full code for the above:

  const set = useThree((state) => state.set);

  type canvasEventsParameters = Parameters<typeof Canvas>[0]['events'];
  type canvasEventsParametersWithoutUndefined = Exclude<canvasEventsParameters, undefined>;
  const [canvasEvents, setCanvasEvents] = useState<canvasEventsParametersWithoutUndefined>((state: any) => ({
    // Default configuration
    ...events(state),

    // Determines if the event layer is active
    enabled: !cameraContext.getState().isDragging,
  }));

useEffect(() => {
    console.log('in the useEffect', contextCameraIsDragging);
    let eventManagerFactory: canvasEventsParametersWithoutUndefined = contextCameraIsDragging
      ? (state: any) => ({
          // Default configuration
          ...events(state),

          // Determines if the event layer is active
          enabled: false,
        })
      : (state: any) => ({
          // Default configuration
          ...events(state),

          // Determines if the event layer is active
          enabled: true,
        });

    setCanvasEvents(eventManagerFactory);
  }, [contextCameraIsDragging]);

  useEffect(() => {
    set({ events: canvasEvents });
  }, [canvasEvents]);

  useEffect(() => {
    set({ events: canvasEvents() });
  }, [canvasEvents]);

  useEffect(() => {
    set((state) => ({
      events: canvasEvents(state),
    }));
  }, [canvasEvents]);

Seems super close. Side note, in a different file within the canvas to have access to useThree so controlsIsDragging is now contextCameraIsDragging, same state though, just named differently.

[CodyJasonBennett]

This is what R3F does internally, store coming from useStore:

react-three-fiber/packages/fiber/src/core/index.tsx

Lines 332 to 333 in ffd953e

	// Store events internally
	if (events && !state.events.handlers) state.set({ events: events(store) })

You can also do partial updates with the setEvents method. Perhaps that's the best way for this case.

[arcasoy]

Great this seems to have done it!, Thank you! I implemented the setEvents method when mouseIsDown is triggered, which is toggled from the OrbitControls onStart & onEnd functions. This is also much simpler than the factory I was implementing above.

  useEffect(() => {
    if (mouseIsDown) {
      setEvents({ enabled: !mouseIsDown });
    } else {
      setTimeout(() => {
        setEvents({ enabled: !mouseIsDown });
      }, 1000);
    }
  }, [mouseIsDown]);

The setTimeout is added to accommodate damping where the camera doesn't settle until a bit later. I'll be looking into ways of optimizing this going forward.