Fix some type issues, remove strict:false

Author: Don McCurdy

examples/website/plot/plot-layer/axes-layer.ts

@@ -49,9 +49,9 @@ export type AxesLayerProps<DataT = unknown> = _AxesLayerProps<DataT> & LayerProp
 type _AxesLayerProps<DataT> = {
   data: LayerDataSource<DataT>;
   fontSize: number;
-  xScale?: ScaleLinear<number, number>;
-  yScale?: ScaleLinear<number, number>;
-  zScale?: ScaleLinear<number, number>;
+  xScale: ScaleLinear<number, number>;
+  yScale: ScaleLinear<number, number>;
+  zScale: ScaleLinear<number, number>;
   xTicks: number;
   yTicks: number;
   zTicks: number;
@@ -99,7 +99,7 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   declare state: Layer['state'] & {
     models: [Model, Model];
     modelsByName: {grids: Model; labels: Model};
-    instanceCount: number;
+    numInstances: number;
     ticks: [Tick[], Tick[], Tick[]];
     gridDims: Vec3;
     gridCenter: Vec3;
@@ -108,19 +108,19 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
 
   initializeState() {
     const {gl} = this.context;
-    const attributeManager = this.getAttributeManager();
+    const attributeManager = this.getAttributeManager()!;
 
     attributeManager.addInstanced({
       instancePositions: {size: 2, update: this.calculateInstancePositions, noAlloc: true},
       instanceNormals: {size: 3, update: this.calculateInstanceNormals, noAlloc: true},
       instanceIsTitle: {size: 1, update: this.calculateInstanceIsTitle, noAlloc: true}
     });
 
-    this.setState(Object.assign({instanceCount: 0}, this._getModels(gl)));
+    this.setState(Object.assign({numInstances: 0}, this._getModels(gl)));
   }
 
   updateState({oldProps, props, changeFlags}) {
-    const attributeManager = this.getAttributeManager();
+    const attributeManager = this.getAttributeManager()!;
 
     if (
       oldProps.xScale !== props.xScale ||
@@ -161,13 +161,8 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   }
 
   draw({uniforms}) {
-    const {
-      gridDims,
-      gridCenter,
-      modelsByName,
-      labelTexture: {labelTexture, ...labelTextureUniforms},
-      instanceCount
-    } = this.state;
+    const {gridDims, gridCenter, modelsByName, numInstances} = this.state;
+    const {labelTexture, ...labelTextureUniforms} = this.state.labelTexture!;
     const {fontSize, color, padding} = this.props;
 
     if (labelTexture) {
@@ -179,8 +174,8 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
         strokeColor: color
       };
 
-      modelsByName.grids.setInstanceCount(instanceCount);
-      modelsByName.labels.setInstanceCount(instanceCount);
+      modelsByName.grids.setInstanceCount(numInstances);
+      modelsByName.labels.setInstanceCount(numInstances);
 
       modelsByName.grids.setUniforms(Object.assign({}, uniforms, baseUniforms));
       modelsByName.labels.setBindings({labelTexture});
@@ -240,7 +235,7 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       id: `${this.props.id}-grids`,
       vs: gridVertex,
       fs: fragmentShader,
-      bufferLayout: this.getAttributeManager().getBufferLayouts(),
+      bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
       geometry: new Geometry({
         topology: 'line-list',
         attributes: {
@@ -289,7 +284,7 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
       id: `${this.props.id}-labels`,
       vs: labelVertex,
       fs: labelFragment,
-      bufferLayout: this.getAttributeManager().getBufferLayouts(),
+      bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
       geometry: new Geometry({
         topology: 'triangle-list',
         attributes: {
@@ -315,7 +310,7 @@ export default class AxesLayer<DataT = any, ExtraPropsT extends {} = {}> extends
     const value = new Float32Array(flatten(positions));
     attribute.value = value;
 
-    this.setState({instanceCount: value.length / attribute.size});
+    this.setState({numInstances: value.length / attribute.size});
   }
 
   calculateInstanceNormals(attribute) {
@@ -381,7 +376,7 @@ function getTicks(props: AxesLayerProps<number> & {axis: Axis}): Tick[] {
   const tickFormat = props[`${axis}TickFormat`];
 
   if (!Array.isArray(ticks)) {
-    ticks = scale.ticks(ticks);
+    ticks = scale.ticks(ticks) as number[];
   }
 
   const titleTick = {

examples/website/plot/plot-layer/surface-layer.ts

@@ -105,7 +105,7 @@ export default class SurfaceLayer<DataT = any, ExtraPropsT extends {} = {}> exte
       fs: fragmentShader,
       modules: [picking],
       topology: 'triangle-list',
-      bufferLayout: this.getAttributeManager().getBufferLayouts(),
+      bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
       vertexCount: 0
     });
   }
@@ -126,29 +126,29 @@ export default class SurfaceLayer<DataT = any, ExtraPropsT extends {} = {}> exte
    *   0--------> 1
    *              x
    */
-  encodePickingColor(i: number) {
+  encodePickingColor(i: number, target: number[] = []) {
     const {uCount, vCount} = this.props;
 
     const xIndex = i % uCount;
     const yIndex = (i - xIndex) / uCount;
 
-    return [(xIndex / (uCount - 1)) * 255, (yIndex / (vCount - 1)) * 255, 1] as $TODO;
+    return [(xIndex / (uCount - 1)) * 255, (yIndex / (vCount - 1)) * 255, 1];
   }
 
   decodePickingColor([r, g, b]: Color): number {
     if (b === 0) {
       return -1;
     }
-    return [r / 255, g / 255] as $TODO;
+    return r | g << 8;
   }
 
   getPickingInfo(opts) {
     const {info} = opts;
 
     if (info && info.index !== -1) {
-      const [u, v] = info.index;
       const {getPosition} = this.props;
-
+      const u = (info.index & 255) / 255;
+      const v = (info.index >> 8) / 255;
       info.sample = getPosition(u, v);
     }
 
@@ -227,7 +227,7 @@ export default class SurfaceLayer<DataT = any, ExtraPropsT extends {} = {}> exte
     const {vertexCount} = this.state;
 
     // reuse the calculated [x, y, z] in positions
-    const positions = this.getAttributeManager()!.attributes.positions.value;
+    const positions = this.getAttributeManager()!.attributes.positions.value!;
     const value = new Uint8ClampedArray(vertexCount! * attribute.size);
 
     // Support constant colors

examples/website/plot/tsconfig.json

@@ -1,5 +1,4 @@
 {
     "extends": "../../../tsconfig.json",
-    "include": ["./**/*.ts"],
-    "compilerOptions": { "strict": false }
+    "include": ["./**/*.ts"]
 }