Skip to content

Commit

Permalink
Enhance Pointer Events Handling with New Provider Component
Browse files Browse the repository at this point in the history
- Added `PointerEventsProvider` to manage registered pointer events and provide context to child components.
- Updated `picker.tsx` to include the new provider, improving interaction handling by enabling dynamic event registration.
- Refactored existing logic to utilize the `PointerEventsContext`, enhancing the flexibility of pointer event management.

These changes improve the overall interaction capabilities within the application.
  • Loading branch information
marklundin committed Dec 30, 2024
1 parent 88535e7 commit e0b5af9
Showing 1 changed file with 24 additions and 3 deletions.
27 changes: 24 additions & 3 deletions packages/lib/src/utils/picker.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { AppBase, CameraComponent, Entity, GraphNode, Picker } from "playcanvas"
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react"
import { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
import { SyntheticMouseEvent, SyntheticPointerEvent } from "./synthetic-event";
import { usePointerEventsContext } from "../contexts/pointer-events-context";
import { PointerEventsContext, usePointerEventsContext } from "../contexts/pointer-events-context";

// Utility to propagate events up the entity hierarchy
const propagateEvent = (entity: Entity, event: SyntheticPointerEvent | SyntheticMouseEvent, stopAt: Entity | null = null): boolean => {
Expand Down Expand Up @@ -179,4 +179,25 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null) => {
app.off('update', onFrameUpdate);
};
}, [app, el, onInteractionEvent, enabled]);
}
}

export const PointerEventsProvider: FC<PointerEventsProviderProps> = ({ children, app, el }) => {
// Track registered pointer events
const [pointerEvents] = useState<Set<string>>(() => new Set<string>());

// Only create picker if there are registered events
const enabled = pointerEvents.size > 0;

const activeEntity = useRef<Entity | null>(null);
const pointerDetails = useRef<PointerEvent | null>(null);
const canvasRectRef = useRef<DOMRect | null>(app ? app.graphicsDevice.canvas.getBoundingClientRect() : null);

// Rest of the picker logic from current implementation...
// Including useLayoutEffect for event listeners, etc.

return (
<PointerEventsContext.Provider value={pointerEvents}>
{children}
</PointerEventsContext.Provider>
);
};

0 comments on commit e0b5af9

Please sign in to comment.