visgl / visgl/deck.gl

[Bug] SimpleMeshLayer Typescript types are incorrect for "mesh" property

Open
#9,136 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Description

I'm following the API Reference docs for SimpleMeshLayer - specifically [here]https://deck.gl/docs/api-reference/mesh-layers/simple-mesh-layer#mesh). I'm trying to pass an object as the docs suggest I should be able to however I get a typescript error that there is a type mismatch:

Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is not assignable to type '({ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; } & (string | Mesh | Promise<Mesh> | null)) | undefined'.
  Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is not assignable to type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; } & Promise<Mesh>'.
    Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is missing the following properties from type 'Promise<Mesh>': then, catch, finally, [Symbol.toStringTag]ts(2322)
Flavors
  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CartoLayer
  • ArcGIS
Expected Behavior

If I create a SimpleMeshLayer and provide a correctly formatted object for the mesh property, I would expect no type errors and the typescript compiler to build it without any issues.

Steps to Reproduce

The data and layer I use are below, the issue I have is with typing the mesh property of the layer. As you can see from the description, it seems as though it expects the object to have the fields it does, but also be a promise.

export const getShape= () => {
    const positions = [
        // left side
        0, 0, 0,
        -0.4, 1, -0.2,
        -0.4, 1, 0.2,

        // right side
        0, 0, 0,
        0.4, 1, -0.2,
        0.4, 1, 0.2,

        // bottom
        0, 0, 0,
        -0.4, 1, -0.2,
        0.4, 1, -0.2,

        // top
        0, 0, 0,
        -0.4, 1, 0.2,
        0.4, 1, 0.2,
    ];
    const normals = positions.map((_, i) => i);
    const texCoords = positions.map((_, i) => i);

    const meshObj = {
        positions: new Float32Array(positions.length),
        normals: new Float32Array(normals.length),
        texCoords: new Float32Array(texCoords.length)
    };

    for (const pos in positions) {
        meshObj.positions.set([positions[pos]], +pos);
    }

    for (const nor in normals) {
        meshObj.normals.set([normals[nor]], +nor);
    }

    for (const tex in texCoords) {
        meshObj.texCoords.set([texCoords[tex]], +tex);
    }

    return meshObj;
};

const meshLayer = new SimpleMeshLayer({
        id: 'SimpleMeshLayer',
        data: [
            { coordinates: [0, 0, 10000] },
            { coordinates: [0, 1, 10000] },
            { coordinates: [1, 0, 10000] },
        ],
        opacity: 0.1,
        wireframe: true,
        getColor: () => [255, 0, 0],
        getOrientation: () => [0, 0, 0],
        getPosition: (d) => d.coordinates,
        mesh: getShape(),
        sizeScale: 30000,
        pickable: true,
    });
Environment
  • Framework version: 9.0.28
  • Browser: Firefox / Brave (N/A as issue as at build stage)
  • OS: Windows
Logs
Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is not assignable to type '({ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; } & (string | Mesh | Promise<Mesh> | null)) | undefined'.
  Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is not assignable to type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; } & Promise<Mesh>'.
    Type '{ positions: Float32Array; normals: Float32Array; texCoords: Float32Array; }' is missing the following properties from type 'Promise<Mesh>': then, catch, finally, [Symbol.toStringTag]ts(2322)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the TypeScript definition and props for SimpleMeshLayer, then compare the mesh property's declared type with the object shown in the issue. Reproduce the error with the provided mesh object and confirm done when the TypeScript compiler accepts it without requiring Promise members.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.