Wasm problems in .2533

Hi
After the update I found problems :

  1. Creating new wasm project, wrong HTML code is generated and I get error:
    TypeError: program.Main is not a function
    This happens because Program class has now HelloWorld method instead of Main.

  2. Old code using canvas doesn’t compile anymore :

     method Program.TestCanvas;
     begin
     var hdiv := Browser.GetElementById('helloWorld');
     var canvas := Browser.CreateElement('canvas');
     canvas.id := "CursorLayer";
     canvas.width := 512;
     canvas.height := 512;
     var stl := canvas.style;
     stl.border := "1px solid";
     hdiv.appendChild(canvas);
    
     var ctx := canvas.getContext("2d" );
    
     ctx.fillStyle :=  "rgba(255, 0, 0, 0.5)";
     ctx.fillRect( 100, 100, 200, 200 );
     ctx.fillStyle :=  "rgba(0, 255, 0, 0.5)";
     ctx.fillRect( 150, 150, 200, 200);
     ctx.fillStyle :=  "rgba(0, 0, 255, 0.5)";
     ctx.fillRect( 200, 50, 200, 200);
     end;
    

So I tried to change it as I found a lot of new classes and interfaces in DOM namespace :frowning:
But using HTMLCanvasElement or CanvasRenderingContext2D interface casting throws TypeError when using any property. How to change this code to work again (canvas 2d)? A lot of these DOM interfaces as empty ( CanvasRenderingContext2D.vb)!?

  1. I tried samples e.g. RemObjects Oxygene for Island\GUI\Basic WebAssembly GUI Controls App but they also fail to compile (Delphi classes not public?).

Oops, my apologies. that’s what I get form trusting someone to submit an “improved” HTML for the template :). will fix.

What’s the error? Note that a lot of DOM code now has string types, where before it was all Dynamic and everything would compile, right or wrong. See https://docs.elementscompiler.com/Platforms/WebAssembly/Browser/ and https://docs.elementscompiler.com/Platforms/WebAssembly/Interop/.

The error is e.g. "No member "width" on type "Element".
So I tried strong types


But then I get runtime errors when using a property of strong type

Here is test project ModuleW.zip (382.6 KB)
Please try to fix the code, uncomment “fill drawing” code and run.

My error - apologies

No, my bad for not retesting ;). Fixed now.

1 Like

You can solve this at this moment by casting the type to Dynamic:

change:

var canvas := Browser.CreateElement('canvas');

to

var canvas := Browser.CreateElement('canvas') As Dynamic;
1 Like

Thanks. That worked :slight_smile: I hope you can fix strong types version as it’s more helpful for learning new api.

1 Like

The strong typed API has some problems at this moment as you discovered :slight_smile:

Point will remain that you have to cast it to the correct type; CreateElement returns an Element (https://developer.mozilla.org/en-US/docs/Web/API/Element).

In your case you will have to cast it to a HTMLCanvasElement (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) to get all the properties and functions for it.

1 Like

to be clear — is the DOM API actually missing With (and others here), or is casting the right/final solution here, Theo?

Artur: the thing is GetElements returns the loosest common base type. Think of it in Delphi for WinForms terms as FindControl(). you might bet back a button or a list view, but the type is Control — you gotta cast it to the more concrete real type you know it to be, to create art as a Button or a ListView. same applies here, for more specialized HTML element types

The casting to Dynamic is a work around for now.
The casting of an element is the right / final solution.

The following can be used in the strong typed API:

var canvas := Browser.CreateElement('canvas') as HTMLCanvasElement;

This is because Browser.CreateElement returns an Element (the ancestor of each element you can create with it)

The width and other properties are available in the HTMLCanvasElement. Not in Element. So when the result of Browser.CreateElement has been casted to HTMLCanvasElement, the properties are available.

image

ahh right. thats coz properties on dynamic interfaces are broken.

Hmm, surely that second one would (and should) fail, without the cast? you cant assign a base type to a var of a more concrete type, without casting.

You are right …
Edited …

1 Like

I would be happy to code using strong typed API in wasm, not dynamic like JavaScript. Working dynamic interfaces would be great for me.

1 Like

That’s the plan. its merely a bug that the properties on the dynamic interfaces fail to call (this is new and beta, after all :wink:

1 Like

And it’s fixed now, too.

1 Like