fix(types): fix canvas types after merging

pmndrs · Apr 20, 2019 · 4cb8852 · 4cb8852
1 parent eba50d5
commit 4cb8852
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 52 deletions.
diff --git 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
@@ -3,7 +3,78 @@ import React, { useRef, useEffect, useMemo, useState, useCallback, useContext }
 import ResizeObserver from 'resize-observer-polyfill'
 import { invalidate, applyProps, render, unmountComponentAtNode } from './reconciler'
 
-export const stateContext = React.createContext()
+export type CanvasContext = {
+  canvas?: React.MutableRefObject<any>,
+  subscribers: Array<Function>,
+  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<any> },
+  { 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
+  };
+}
+
+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() {
   const ref = useRef()
@@ -28,7 +99,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
@@ -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<any>;
     subscribers: Array<Function>;
@@ -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
@@ -1,24 +1,7 @@
 /// <reference types="react" />
 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<any>): React.MutableRefObject<any>;
 export declare function useResource(optionalRef: React.MutableRefObject<any>): React.MutableRefObject<any>;