HTMLCanvasElement.<vendor>RequestPointerLock optional?

[olrehm]

Hi,

I am using BabylonJS from Typescript, and ran into the following problem:

      const canvas = $element.find('canvas')[0] as HTMLCanvasElement;
      const engine = new BABYLON.Engine(canvas, true);

Fails to compile with the message

error TS2345: Argument of type 'HTMLCanvasElement' is not assignable to parameter of type 'HTMLCanvasElement'.
  Property 'msRequestPointerLock' is missing in type 'HTMLCanvasElement'.

My interpretation of this is that HTMLCanvasElement as defined in lib.d.ts does not have this property, and that I am casting to that definition of HTMLCanvasElement, while BABYLON.Engine expects the one defined in babylon.d.ts, which does have this property. The problem is that BabylonJS does not export its own mixin version of HTMLCanvasElement, so I cannot even cast to that to pass it into BABYLON.Engine. So I am left with casting to any:

      const canvas = $element.find('canvas')[0] as any;
      const engine = new BABYLON.Engine(canvas, true);

Which works but is somewhat ugly. I wonder if it would not be possible and better for babylons mixin to be defined like this:

interface HTMLCanvasElement {
    requestPointerLock(): void;
    msRequestPointerLock?(): void;
    mozRequestPointerLock?(): void;
    webkitRequestPointerLock?(): void;
}

Anyways the calling code seems to be trying through all vendor prefixes, so marking these optional sounds like it would actually more accurately describe the situation - and it would mean that the type is compatible with libxml.d.ts' version.

Any concerns? Should I send a pull request?

Cheers

Ole

[GameMonetize]

Hi!

we already have our mixin here: https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.mixins.ts#L48

[olrehm]

I know that you do - that is exactly the problem:

You have a mixin which is not compatible with lib.d.ts and which you do not expose but still use for parameters in your API. So callers cannot cast their HTML elements to your mixin - and then their calling code fails to compile.

That is why I suggest to either make your mixin compatible to lib.d.ts by making the things you add optional - I think this would be accurate in this case since you really do not know if these properties exist, and you do have code checking that before relying on it.

The other option is to export your mixin. But that is the worse solution in my opinion.

[olrehm]

https://github.com/BabylonJS/Babylon.js/pull/1384

[GameMonetize]

Merged

[olrehm]

Thanks David! What is your current release schedule? It looks like the last release was in June... is there any way to get the nightly through NPM?

[GameMonetize]

Next one would be around december.