From 65d3a4fa217f3329c692a35e85d184d05e46d9f4 Mon Sep 17 00:00:00 2001 From: Andrew Imm Date: Wed, 9 Oct 2019 14:26:08 -0700 Subject: [PATCH] Start fixing new flow errors (#753) Start fixing new flow errors --- .circleci/config.yml | 19 +++++++++++++++---- .flowconfig | 15 +++------------ package.json | 2 ++ packages/react-360/src/Container.js | 4 ++++ packages/react-webgl/src/CanvasRoot.js | 14 +++++++++++--- packages/react-webgl/src/Elements.js | 8 +++++--- packages/react-webgl/src/GLRoot.js | 9 +++++++-- packages/react-webgl/src/HostConfig.js | 2 -- packages/react-webgl/src/Pressable.react.js | 4 +++- packages/react-webgl/src/ReactWGL.js | 3 ++- packages/react-webgl/src/RenderTargetRoot.js | 2 ++ packages/react-webgl/src/applyProps.js | 2 +- .../webgl-ui-system-font/src/FontMeasure.js | 6 +++++- 13 files changed, 60 insertions(+), 30 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ebab07ef8..251fb7516 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -8,12 +8,22 @@ jobs: - checkout - run: yarn - run: yarn build + flow: + working_directory: ~/react-360 + docker: + - image: circleci/node:10 + steps: + - checkout + - run: yarn + - run: yarn flow test-unit: working_directory: ~/react-360 docker: - image: circleci/node:10 steps: - checkout + - run: yarn + - run: yarn build - run: yarn test render-tests: working_directory: ~/react-360/render-tests @@ -30,8 +40,9 @@ workflows: jobs: - build - test-unit: - requires: - - build + requires: + - build - render-tests: - requires: - - build + requires: + - build + - flow diff --git a/.flowconfig b/.flowconfig index c5855afe6..95c74890c 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,16 +1,11 @@ [ignore] -.*/Libraries/.* .*/docs/.* -.*/EndToEnd/.* -.*/jest/.* .*/website/.* .*/__tests__/.* +/addons/.* /node_modules/.* -/packages/react-webgl/.* -/packages/react-webgl-video-manager/.* -/packages/webgl-lite/.* -/packages/webgl-ui/.* -/packages/react-360-common-ui/.* +/Libraries/.* +/React360/.* [include] @@ -21,7 +16,3 @@ defs/ emoji=true module.ignore_non_literal_requires=true -module.name_mapper='^ovrui$' -> '/OVRUI/src/OVRUI.js' - -[version] -0.63.1 diff --git a/package.json b/package.json index f3c6ba8b5..a637cf89d 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,13 @@ "@babel/plugin-transform-flow-strip-types": "7.2.3", "@babel/plugin-transform-modules-commonjs": "7.2.0", "@babel/preset-react": "7.0.0", + "flow-bin": "^0.109.0", "jest": "^24.9.0", "lerna": "3.16.4" }, "scripts": { "build": "lerna run build", + "flow": "flow", "test": "jest" } } diff --git a/packages/react-360/src/Container.js b/packages/react-360/src/Container.js index ff0904112..06888cbe1 100755 --- a/packages/react-360/src/Container.js +++ b/packages/react-360/src/Container.js @@ -94,6 +94,10 @@ export default class Container { this._canvas = document.createElement('canvas'); this._canvas.style.backgroundColor = '#000000'; const gl = this._canvas.getContext('webgl', {xrCompatible: true, alpha: false}); + if (gl == null) { + throw new Error('Unable to construct WebGL context'); + } + // $FlowFixMe: Flow thinks gl might be a canvas 2d context? this._gl = gl; this._sharedTextureManager = new GLUI.TextureManager(gl); this.group = new WebGL.RenderGroup(gl); diff --git a/packages/react-webgl/src/CanvasRoot.js b/packages/react-webgl/src/CanvasRoot.js index 2280aeddd..af258f8c7 100755 --- a/packages/react-webgl/src/CanvasRoot.js +++ b/packages/react-webgl/src/CanvasRoot.js @@ -20,10 +20,15 @@ export type CanvasRootOptions = { }; export default class CanvasRoot extends GLRoot { + _canvas: HTMLCanvasElement; + constructor(options: CanvasRootOptions = {}) { const canvas = options.canvas || document.createElement('canvas'); canvas.style.backgroundColor = 'transparent'; const gl = canvas.getContext('webgl', {alpha: true, premultipliedAlpha: false}); + if (gl == null) { + throw new Error('Unable to construct WebGL context'); + } super(gl, options.text); this._canvas = canvas; @@ -71,8 +76,11 @@ export default class CanvasRoot extends GLRoot { let offsetLeft = 0; let offsetTarget = e.target; while (offsetTarget != null) { + // $FlowFixMe offsetTop += offsetTarget.offsetTop; + // $FlowFixMe offsetLeft += offsetTarget.offsetLeft; + // $FlowFixMe offsetTarget = offsetTarget.offsetTarget; } this.getSurface().setCursor( @@ -100,17 +108,17 @@ export default class CanvasRoot extends GLRoot { }); }; - _onTouchStart = e => { + _onTouchStart = (e: TouchEvent) => { this._setCursorFromTouch(e, true); this._onPressIn(); e.preventDefault(); }; - _onTouchMove = e => { + _onTouchMove = (e: TouchEvent) => { this._setCursorFromTouch(e, false); }; - _onMouseMove = e => { + _onMouseMove = (e: MouseEvent) => { this.getSurface().setCursor(e.offsetX, e.offsetY); }; diff --git a/packages/react-webgl/src/Elements.js b/packages/react-webgl/src/Elements.js index 08f9ef618..e3e50eac9 100755 --- a/packages/react-webgl/src/Elements.js +++ b/packages/react-webgl/src/Elements.js @@ -9,10 +9,12 @@ * @flow */ +import type GLRoot from './GLRoot'; + import {Image, Text, View} from 'webgl-ui'; export const quad = { - create: root => root.getSurface().createView(), + create: (root: GLRoot) => root.getSurface().createView(), dispatchers: (() => { const d = {}; View.registerBindings(d); @@ -21,7 +23,7 @@ export const quad = { }; export const text = { - create: root => root.getSurface().createText(), + create: (root: GLRoot) => root.getSurface().createText(), dispatchers: (() => { const d = {}; Text.registerBindings(d); @@ -30,7 +32,7 @@ export const text = { }; export const image = { - create: root => root.getSurface().createImage(), + create: (root: GLRoot) => root.getSurface().createImage(), dispatchers: (() => { const d = {}; Image.registerBindings(d); diff --git a/packages/react-webgl/src/GLRoot.js b/packages/react-webgl/src/GLRoot.js index 432793834..dea6e0b68 100755 --- a/packages/react-webgl/src/GLRoot.js +++ b/packages/react-webgl/src/GLRoot.js @@ -9,10 +9,15 @@ * @flow */ -import {Surface, TextureManager, type TextImplementation} from 'webgl-ui'; +import {Surface, TextureManager, type ShadowViewWebGL, type TextImplementation} from 'webgl-ui'; import {FontImplementation} from 'webgl-ui-system-font'; export default class GLRoot { + _gl: WebGLRenderingContext; + _surface: Surface; + _textImplementation: TextImplementation; + _textureManager: TextureManager; + constructor(gl: WebGLRenderingContext, text?: TextImplementation) { this._gl = gl; this._surface = new Surface(gl); @@ -22,7 +27,7 @@ export default class GLRoot { this._surface.useTextureManager(this._textureManager); } - setRoot(child) { + setRoot(child: ShadowViewWebGL<*>) { this._surface.setRootNode(child); } diff --git a/packages/react-webgl/src/HostConfig.js b/packages/react-webgl/src/HostConfig.js index 334fea562..42296e01b 100755 --- a/packages/react-webgl/src/HostConfig.js +++ b/packages/react-webgl/src/HostConfig.js @@ -5,8 +5,6 @@ * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. - * - * @flow */ import * as Elements from './Elements'; diff --git a/packages/react-webgl/src/Pressable.react.js b/packages/react-webgl/src/Pressable.react.js index 36b2724fb..f153071cf 100755 --- a/packages/react-webgl/src/Pressable.react.js +++ b/packages/react-webgl/src/Pressable.react.js @@ -34,10 +34,12 @@ type State = {| pressed: boolean, |}; +type Event = {buttonClass?: string, action?: 'up' | 'down'}; + export default class Pressable extends React.PureComponent { state = {hovered: false, pressed: false}; - _onInput = event => { + _onInput = (event: Event) => { if (event.buttonClass !== 'confirm') { return; } diff --git a/packages/react-webgl/src/ReactWGL.js b/packages/react-webgl/src/ReactWGL.js index 1dcc88ad0..f4d4e5be8 100755 --- a/packages/react-webgl/src/ReactWGL.js +++ b/packages/react-webgl/src/ReactWGL.js @@ -9,6 +9,7 @@ * @flow */ +// $FlowFixMe import Reconciler from 'react-reconciler'; import * as HostConfig from './HostConfig'; import GLRoot from './GLRoot'; @@ -21,7 +22,7 @@ import Video from './Video.react'; const Renderer = Reconciler(HostConfig); -export function render(element, container, callback) { +export function render(element: Element, container: any, callback: any) { if (!container.__rootContainer) { container.__rootContainer = Renderer.createContainer(container, false); } diff --git a/packages/react-webgl/src/RenderTargetRoot.js b/packages/react-webgl/src/RenderTargetRoot.js index 1d5c5c619..e9d4dc0c0 100755 --- a/packages/react-webgl/src/RenderTargetRoot.js +++ b/packages/react-webgl/src/RenderTargetRoot.js @@ -24,6 +24,8 @@ export type RenderTargetRootOptions = { * which can then be used in a larger WebGL scene. */ export default class RenderTargetRoot extends GLRoot { + _fb: WebGL.FrameBuffer; + constructor(gl: WebGLRenderingContext, options: RenderTargetRootOptions = {}) { super(gl, options.text); const width = options.width || 0; diff --git a/packages/react-webgl/src/applyProps.js b/packages/react-webgl/src/applyProps.js index 08c642362..8c34a691c 100755 --- a/packages/react-webgl/src/applyProps.js +++ b/packages/react-webgl/src/applyProps.js @@ -19,7 +19,7 @@ const EVENTS = { onInput: 'input', }; -export default function applyProps(view, oldProps, newProps, dispatchers) { +export default function applyProps(view: any, oldProps: Object, newProps: Object, dispatchers: {[string]: (any, any) => void}) { for (const p in newProps) { if (p === 'children') { continue; diff --git a/packages/webgl-ui-system-font/src/FontMeasure.js b/packages/webgl-ui-system-font/src/FontMeasure.js index f162dc968..bce1c83ea 100755 --- a/packages/webgl-ui-system-font/src/FontMeasure.js +++ b/packages/webgl-ui-system-font/src/FontMeasure.js @@ -59,7 +59,11 @@ export default class FontMeasure { this._lineMetrics.appendChild(this._lineOne); this._lineMetrics.appendChild(document.createElement('br')); this._lineMetrics.appendChild(this._lineTwo); - document.body.appendChild(this._lineMetrics); + const body = document.body; + if (body == null) { + throw new Error('Cannot measure font metrics without a valid document body'); + } + body.appendChild(this._lineMetrics); } measureGlyph(glyph: string) {