Fix flow type errors of all viewers #2039

Merged
btzr-io merged 4 commits from fix-flow into master 2018-10-15 19:19:41 +02:00
Showing only changes of commit 46dc577d10 - Show all commits

View file

@ -12,6 +12,13 @@ import ThreeScene from './internal/scene';
import ThreeLoader from './internal/loader';
import ThreeRenderer from './internal/renderer';
type viewerTheme = {
gridColor: string,
groundColor: string,
backgroundColor: string,
centerLineColor: string,
};
type Props = {
theme: string,
source: {
@ -32,7 +39,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
else reject();
});
static createOrbitControls(camera, canvas) {
static createOrbitControls(camera: any, canvas: any) {
const controls = new THREE.OrbitControls(camera, canvas);
// Controls configuration
controls.enableDamping = true;
@ -46,7 +53,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
return controls;
}
static fitMeshToCamera(group) {
static fitMeshToCamera(group: any) {
const max = { x: 0, y: 0, z: 0 };
const min = { x: 0, y: 0, z: 0 };
@ -82,18 +89,6 @@ class ThreeViewer extends React.PureComponent<Props, State> {
See: https://github.com/mrdoob/three.js/blob/dev/docs/scenes/js/material.js#L195
*/
static updateMaterial(material, geometry) {
material.vertexColors = +material.vertexColors; // Ensure number
material.side = +material.side; // Ensure number
material.needsUpdate = true;
// If Geometry needs update
if (geometry) {
geometry.verticesNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
}
}
constructor(props: Props) {
super(props);
const { theme } = this.props;
@ -124,6 +119,17 @@ class ThreeViewer extends React.PureComponent<Props, State> {
isReady: false,
isLoading: false,
};
// Internal objects
this.gui = null;
this.grid = null;
this.mesh = null;
this.camera = null;
this.frameID = null;
this.renderer = null;
this.material = null;
this.geometry = null;
this.targetCenter = null;
this.bufferGeometry = null;
}
componentDidMount() {
@ -187,7 +193,37 @@ class ThreeViewer extends React.PureComponent<Props, State> {
}
}
transformGroup(group) {
// Define component types
theme: viewerTheme;
themes: { dark: viewerTheme, light: viewerTheme };
materialColor: string;
// Too complex to add a custom type
// Posible solution: https://www.npmjs.com/package/@types/three
gui: any;
grid: any;
mesh: any;
scene: any;
camera: any;
frameID: any;
controls: any;
material: any;
geometry: any;
targetCenter: any;
bufferGeometry: any;
updateMaterial(material: any, geometry: any) {
this.material.vertexColors = +material.vertexColors; // Ensure number
this.material.side = +material.side; // Ensure number
this.material.needsUpdate = true;
// If Geometry needs update
if (geometry) {
this.geometry.verticesNeedUpdate = true;
this.geometry.normalsNeedUpdate = true;
this.geometry.colorsNeedUpdate = true;
}
}
transformGroup(group: any) {
ThreeViewer.fitMeshToCamera(group);
if (!this.targetCenter) {
@ -203,20 +239,19 @@ class ThreeViewer extends React.PureComponent<Props, State> {
const config = {
color: this.materialColor,
};
config.reset = () => {
// Reset material color
config.color = this.materialColor;
// Reset material
this.material.color.set(config.color);
this.material.flatShading = true;
this.material.shininess = 30;
this.material.wireframe = false;
// Reset autoRotate
this.controls.autoRotate = false;
// Reset camera
this.restoreCamera();
reset: () => {
// Reset material color
config.color = this.materialColor;
// Reset material
this.material.color.set(config.color);
this.material.flatShading = true;
this.material.shininess = 30;
this.material.wireframe = false;
// Reset autoRotate
this.controls.autoRotate = false;
// Reset camera
this.restoreCamera();
},
};
const materialFolder = this.gui.addFolder('Material');
@ -240,7 +275,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
.add(this.material, 'flatShading')
.name('FlatShading')
.onChange(() => {
ThreeViewer.updateMaterial(this.material);
this.updateMaterial(this.material);
})
.listen();
@ -262,7 +297,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
}
}
createGeometry(data) {
createGeometry(data: any) {
this.bufferGeometry = data;
this.bufferGeometry.computeBoundingBox();
this.bufferGeometry.center();
@ -308,7 +343,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.renderer.setSize(width, height);
};
updateControlsTarget(point) {
updateControlsTarget(point: { x: number, y: number, z: number }) {
this.controls.target.fromArray([point.x, point.y, point.z]);
this.controls.update();
}
@ -319,7 +354,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.updateControlsTarget(this.targetCenter);
}
renderStl(data) {
// Flow requested to add it here
renderer: any;
renderStl(data: any) {
this.createGeometry(data);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.mesh.name = 'model';
@ -327,7 +365,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.transformGroup(this.mesh);
}
renderObj(event) {
renderObj(event: any) {
const mesh = event.detail.loaderRootNode;
this.mesh = new THREE.Group();
this.mesh.name = 'model';
@ -352,7 +390,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
this.transformGroup(this.mesh);
}
renderModel(fileType, parsedData) {
renderModel(fileType: string, parsedData: any) {
const renderTypes = {
stl: data => this.renderStl(data),
obj: data => this.renderObj(data),