From b834e47f2c854666f163df575fd92f54b2c9b3ec Mon Sep 17 00:00:00 2001 From: Setsun Date: Wed, 24 Apr 2019 09:32:35 -0400 Subject: [PATCH] fix(canvas): more typescript fixes --- .size-snapshot.json | 14 +++++++------- package.json | 2 +- src/canvas.tsx | 24 +++++++----------------- types/canvas.d.ts | 26 +++++++++++++++++++++++--- types/hooks.d.ts | 19 ++++++++++++++++++- 5 files changed, 56 insertions(+), 29 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 1e97864081..a1557639a1 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,21 +1,21 @@ { "dist/index.js": { - "bundled": 25725, - "minified": 12271, - "gzipped": 4374, + "bundled": 25479, + "minified": 12132, + "gzipped": 4371, "treeshaked": { "rollup": { - "code": 10038, + "code": 9895, "import_statements": 660 }, "webpack": { - "code": 11642 + "code": 11489 } } }, "dist/index.cjs.js": { - "bundled": 28683, - "minified": 13899, + "bundled": 28437, + "minified": 13760, "gzipped": 4571 } } diff --git a/package.json b/package.json index 2e918655ea..7aaa19afc8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "sideEffects": false, "scripts": { "prebuild": "rimraf dist", - "build": "rollup -c", + "build": "rollup -c && npm run typegen", "prepare": "npm run build", "eslint": "eslint ./src", "test": "echo \"Error: no test specified\" && exit 1", diff --git a/src/canvas.tsx b/src/canvas.tsx index 2eafd06d20..6550488efd 100644 --- a/src/canvas.tsx +++ b/src/canvas.tsx @@ -124,19 +124,7 @@ export const Canvas = React.memo( // Public state const state = useRef({ - ready: false, - subscribers: [], - manual: false, - active: true, - canvas: undefined, - gl: undefined, - camera: undefined, - scene: undefined, - size: undefined, - canvasRect: undefined, - frames: 0, - viewport: undefined, - captured: undefined, + ...defaultRef, subscribe: (fn, main) => { state.current.subscribers.push(fn) return () => (state.current.subscribers = state.current.subscribers.filter(s => s !== fn)) @@ -260,10 +248,10 @@ export const Canvas = React.memo( const intersect = useCallback((event, prepare = true) => { if (prepare) prepareRay(event) return defaultRaycaster.intersectObjects(state.current.scene.__interaction, true).filter(h => h.object.__handlers) - }) + }, []) /** Handles intersections by forwarding them to handlers */ - const handleIntersects = useCallback((event, fn) => { + const handleIntersects = useCallback((event: React.PointerEvent, fn) => { prepareRay(event) // If the interaction is captured, take the last known hit instead of raycasting again const hits = @@ -280,6 +268,7 @@ export const Canvas = React.memo( for (let hit of hits) { let stopped = { current: false } + fn({ ...Object.assign({}, event), ...hit, @@ -289,6 +278,7 @@ export const Canvas = React.memo( // Hijack stopPropagation, which just sets a flag stopPropagation: () => (stopped.current = true), }) + if (stopped.current === true) break } } @@ -308,7 +298,7 @@ export const Canvas = React.memo( ) const hovered = useRef({}) - const handlePointerMove = useCallback(event => { + const handlePointerMove = useCallback((event: React.PointerEvent) => { if (!state.current.ready) return const hits = handleIntersects(event, data => { const object = data.object @@ -340,7 +330,7 @@ export const Canvas = React.memo( handlePointerCancel(event, hits) }, []) - const handlePointerCancel = useCallback((event, hits) => { + const handlePointerCancel = useCallback((event: React.PointerEvent, hits?: []) => { if (!hits) hits = handleIntersects(event, () => null) Object.values(hovered.current).forEach(data => { if (!hits.length || !hits.find(i => i.object === data.object)) { diff --git a/types/canvas.d.ts b/types/canvas.d.ts index 19f89692a7..5852953e18 100644 --- a/types/canvas.d.ts +++ b/types/canvas.d.ts @@ -1,5 +1,5 @@ import * as THREE from 'three'; -import React from 'react'; +import * as React from 'react'; export declare type CanvasContext = { canvas?: React.MutableRefObject; subscribers: Array; @@ -59,5 +59,25 @@ export declare type IntersectObject = Event & THREE.Intersection & { y: Function; }; }; -export declare const stateContext: any; -export declare const Canvas: any; +export declare const stateContext: React.Context<{ + ready: boolean; + subscribers: any[]; + manual: boolean; + active: boolean; + canvas: any; + gl: any; + camera: any; + scene: any; + size: any; + canvasRect: any; + frames: number; + aspect: number; + viewport: any; + captured: any; + invalidateFrameloop: boolean; + subscribe: (fn: any, main: any) => () => void; + setManual: (takeOverRenderloop: any) => void; + setDefaultCamera: (cam: any) => void; + invalidate: () => void; +}>; +export declare const Canvas: React.MemoExoticComponent<({ children, gl, camera, orthographic, raycaster, style, pixelRatio, invalidateFrameloop, onCreated, ...rest }: CanvasProps) => JSX.Element>; diff --git a/types/hooks.d.ts b/types/hooks.d.ts index b86be542a2..89339d6b4b 100644 --- a/types/hooks.d.ts +++ b/types/hooks.d.ts @@ -1,7 +1,24 @@ /// export declare function useRender(fn: Function, takeOverRenderloop: boolean): any; export declare function useThree(): { - [x: string]: any; + ready: boolean; + subscribers: any[]; + manual: boolean; + active: boolean; + canvas: any; + gl: any; + camera: any; + scene: any; + size: any; + canvasRect: any; + frames: number; + aspect: number; + viewport: any; + captured: any; + invalidateFrameloop: boolean; + setManual: (takeOverRenderloop: any) => void; + setDefaultCamera: (cam: any) => void; + invalidate: () => void; }; export declare function useUpdate(callback: Function, dependents: [], optionalRef: React.MutableRefObject): React.MutableRefObject; export declare function useResource(optionalRef: React.MutableRefObject): React.MutableRefObject;