From b714712c05708dd6438568cd76f64179c55cf7f9 Mon Sep 17 00:00:00 2001 From: Setsun Date: Sun, 21 Apr 2019 07:24:12 +0800 Subject: [PATCH] fix(types): fix canvas types after merging --- .size-snapshot.json | 18 +++++----- src/canvas.tsx | 82 ++++++++++++++++++++++++++++++++++++++++++--- types/canvas.d.ts | 28 +++------------- types/hooks.d.ts | 19 +---------- 4 files changed, 93 insertions(+), 54 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 8c6ffb1a3a..b64ed2c306 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,21 +1,21 @@ { "dist/index.js": { - "bundled": 25161, - "minified": 11960, - "gzipped": 4353, + "bundled": 25732, + "minified": 12281, + "gzipped": 4371, "treeshaked": { "rollup": { - "code": 9733, - "import_statements": 602 + "code": 10072, + "import_statements": 615 }, "webpack": { - "code": 11292 + "code": 11615 } } }, "dist/index.cjs.js": { - "bundled": 28174, - "minified": 13680, - "gzipped": 4567 + "bundled": 28782, + "minified": 13991, + "gzipped": 4583 } } diff --git a/src/canvas.tsx b/src/canvas.tsx index 534a1baa20..2eafd06d20 100644 --- a/src/canvas.tsx +++ b/src/canvas.tsx @@ -1,18 +1,92 @@ import * as THREE from 'three' -import React, { useRef, useEffect, useMemo, useState, useCallback, useContext } from 'react' +import * as React from 'react' +import { useRef, useEffect, useMemo, useState, useCallback } from 'react' import ResizeObserver from 'resize-observer-polyfill' import { invalidate, applyProps, render, unmountComponentAtNode } from './reconciler' -export const stateContext = React.createContext() +export type CanvasContext = { + canvas?: React.MutableRefObject, + subscribers: Array, + frames: 0, + aspect: 0, + gl?: THREE.WebGLRenderer, + camera?: THREE.Camera, + scene?: THREE.Scene, + canvasRect?: DOMRectReadOnly, + viewport?: { width: number, height: number }, + size?: { left: number, top: number, width: number, height: number }, + ready: boolean, + manual: boolean, + active: boolean, + captured: boolean, + invalidateFrameloop: boolean, + subscribe?: (callback: Function, main: any) => () => any, + setManual: (takeOverRenderloop: boolean) => any, + setDefaultCamera: (camera: THREE.Camera) => any, + invalidate: () => any, +} + +export type CanvasProps = { + children: React.ReactNode; + gl: THREE.WebGLRenderer; + orthographic: THREE.OrthographicCamera | THREE.PerspectiveCamera; + raycaster: THREE.Raycaster; + camera?: THREE.Camera; + style?: React.CSSProperties; + pixelRatio?: number; + invalidateFrameloop?: boolean; + onCreated: Function; +} + +export type Measure = [ + { ref: React.MutableRefObject }, + { left: number, top: number, width: number, height: number } +] + +export type IntersectObject = Event & THREE.Intersection & { + ray: THREE.Raycaster; + stopped: { current: boolean }; + uuid: string; + transform: { + x: Function, + y: Function + }; +} -function useMeasure() { +const defaultRef = { + ready: false, + subscribers: [], + manual: false, + active: true, + canvas: undefined, + gl: undefined, + camera: undefined, + scene: undefined, + size: undefined, + canvasRect: undefined, + frames: 0, + aspect: 0, + viewport: undefined, + captured: undefined, + invalidateFrameloop: false, + subscribe: (fn, main) => () => {}, + setManual: (takeOverRenderloop) => {}, + setDefaultCamera: (cam) => {}, + invalidate: () => {} +} + +export const stateContext = React.createContext(defaultRef) + +function useMeasure(): Measure { const ref = useRef() + const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 }) const [ro] = useState(() => new ResizeObserver(([entry]) => set(entry.contentRect))) useEffect(() => { if (ref.current) ro.observe(ref.current) return () => ro.disconnect() }, [ref.current]) + return [{ ref }, bounds] } @@ -28,7 +102,7 @@ export const Canvas = React.memo( invalidateFrameloop = false, onCreated, ...rest - }) => { + }: CanvasProps) => { // Local, reactive state const canvas = useRef() const [ready, setReady] = useState(false) diff --git a/types/canvas.d.ts b/types/canvas.d.ts index 94cdd0fcb0..19f89692a7 100644 --- a/types/canvas.d.ts +++ b/types/canvas.d.ts @@ -1,5 +1,5 @@ import * as THREE from 'three'; -import * as React from 'react'; +import React from 'react'; export declare type CanvasContext = { canvas?: React.MutableRefObject; subscribers: Array; @@ -32,6 +32,8 @@ export declare type CanvasContext = { export declare type CanvasProps = { children: React.ReactNode; gl: THREE.WebGLRenderer; + orthographic: THREE.OrthographicCamera | THREE.PerspectiveCamera; + raycaster: THREE.Raycaster; camera?: THREE.Camera; style?: React.CSSProperties; pixelRatio?: number; @@ -57,25 +59,5 @@ export declare type IntersectObject = Event & THREE.Intersection & { y: Function; }; }; -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, style, pixelRatio, invalidateFrameloop, onCreated, ...rest }: CanvasProps) => JSX.Element>; +export declare const stateContext: any; +export declare const Canvas: any; diff --git a/types/hooks.d.ts b/types/hooks.d.ts index 89339d6b4b..b86be542a2 100644 --- a/types/hooks.d.ts +++ b/types/hooks.d.ts @@ -1,24 +1,7 @@ /// export declare function useRender(fn: Function, takeOverRenderloop: boolean): any; export declare function useThree(): { - 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; + [x: string]: any; }; export declare function useUpdate(callback: Function, dependents: [], optionalRef: React.MutableRefObject): React.MutableRefObject; export declare function useResource(optionalRef: React.MutableRefObject): React.MutableRefObject;