diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 63d06748..162e40bc 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -27,4 +27,4 @@ jobs: run: npm i - name: Continuous Release - run: npx pkg-pr-new publish './packages/lib' --compact \ No newline at end of file + run: npx pkg-pr-new publish './packages/lib' \ No newline at end of file diff --git a/packages/lib/src/utils/picker.tsx b/packages/lib/src/utils/picker.tsx index bf8fb470..14296793 100644 --- a/packages/lib/src/utils/picker.tsx +++ b/packages/lib/src/utils/picker.tsx @@ -80,10 +80,19 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null, pointerEv const pointerDetails = useRef(null); const canvasRectRef = useRef(app ? app.graphicsDevice.canvas.getBoundingClientRect() : null); + // Construct a Global Picker + const picker: Picker | null = useMemo((): Picker | null => { + if (!app || !app.graphicsDevice) return null; + return new Picker(app, app.graphicsDevice.width, app.graphicsDevice.height); + }, [app]); + // Watch for the canvas to resize. Neccesary for correct picking useEffect(() => { const resizeObserver = new ResizeObserver(() => { canvasRectRef.current = app ? app.graphicsDevice.canvas.getBoundingClientRect() : null; + if(canvasRectRef.current) { + picker?.resize(canvasRectRef.current.width, canvasRectRef.current.height); + } }); if(app) resizeObserver.observe(app.graphicsDevice.canvas); @@ -91,11 +100,6 @@ export const usePicker = (app: AppBase | null, el: HTMLElement | null, pointerEv }, [app]); - // Construct a Global Picker - const picker: Picker | null = useMemo((): Picker | null => { - if (!app || !app.graphicsDevice) return null; - return new Picker(app, app.graphicsDevice.width, app.graphicsDevice.height); - }, [app]); // Store pointer position const onPointerMove = useCallback((e: PointerEvent) => {