canhorn / EventHorizon.Blazor.TypeScript.Interop.Generator

This project is a Blazor Interop C# Generator, has a sample against the BabylonJS library.
https://wonderful-pond-05f7b3b10.azurestaticapps.net/
MIT License
132 stars 19 forks source link

Are functions that take object parameters represented/callable? #53

Closed CaiusJard closed 3 years ago

CaiusJard commented 3 years ago

No idea if this is a "typescript thing" or a "eventhorizon thing" or a "me thing" but I'm using the pirate fort sample (basically because most of what I want to use seems built already) and looking at eg BabylonJS's Mesh.CreateBox:

const size = 1;
BABYLON.Mesh.CreateBox("box", size, scene);

This call is represented in the C# no problems, and I can use it to create cubes. I'm fiddling with how to create cubiods using this "overload" cribbed from https://playground.babylonjs.com/#6XIT28#5:

const options = {
    width: 1,
    height: 2,
    depth: 3
};
const box = BABYLON.MeshBuilder.CreateBox("box", options);

I achieved what I want in TypeScript at https://playground.babylonjs.com/#6XIT28#781

Wondered if I could get it working in C# just by duplicating and altering the existing CreateBox:

        public static Mesh CreateBox(string name, decimal size, Scene scene = null, System.Nullable<bool> updatable = null, System.Nullable<decimal> sideOrientation = null)
        {
            return EventHorizonBlazorInterop.FuncClass<Mesh>(
                entity => new Mesh() { ___guid = entity.___guid },
                new object[]
                {
                    new string[] { "BABYLON", "Mesh", "CreateBox" }, name, size, scene, updatable, sideOrientation
                }
            );
        }

Additional overload:

        public static Mesh CreateBox(string name, object options, Scene scene = null)
        {
            return EventHorizonBlazorInterop.FuncClass<Mesh>(
                entity => new Mesh() { ___guid = entity.___guid },
                new object[]
                {
                    new string[] { "BABYLON", "Mesh", "CreateBox" }, name, options, scene
                }
            );
        }

No dice (hah) though; no box adds to the scene when I use this C#:

var box = Mesh.CreateBox("box", new { width = 1, height = 2, depth = 3, faceColors = new[] { green, green, green, green, blue, red } }, scene);

.. which I believe is the equivalent to the working TS:

        let options = {
            width: 1,
            height: 2,
            depth: 3,
            faceColors: [ green, green, green, green, blue, red ]
        };

        var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

Where did the chain break down? Bug in my c#? Misunderstanding of what EventHorizon can call/the process needed to get an alternative overload working?

canhorn commented 3 years ago

Thanks for Taking an interest in this project! And finding a deficiency in the sister project this library depends on!

The sister project does not have logic to handle the arrays in the options, it has to loop the arguments and replace them with the cached version. For performance the whole object is not passed between the layers, just a unique id.

I have a fix for this, but will require me to pass it down the layers. As for your code, you can use the MeshBuilder.

The below code should work after I get the Update through. I will update this ticket when I get the update through to here.

var columns = 6m;
var rows = 1m;
var faceUV = new Vector4[6];

for (var i = 0; i < 6; i++)
{
    faceUV[i] = new BABYLON.Vector4(i / columns, 0, (i + 1) / columns, 1 / rows);
}

var mat = new BABYLON.StandardMaterial("mat", scene);
var texture = new BABYLON.Texture(scene, "https://assets.babylonjs.com/environments/numbers.jpg");
mat.diffuseTexture = texture;

var alpha = 1;
var red = new BABYLON.Color4(1, 0, 0, alpha);
var blue = new BABYLON.Color4(0, 0, 1, alpha);
var green = new BABYLON.Color4(0, 1, 0, alpha);

var options = new
{
     faceUV = faceUV,
     wrap = true,
     width = 1,
     height = 2,
     depth = 3,
     faceColors = new List<Color4> { green, green, green, green, blue, red }
};

var box = BABYLON.MeshBuilder.CreateBox("box", options, scene);
box.material = mat;
canhorn commented 3 years ago

@CaiusJard The new version is published, I also created a sample page with the gist of your playground. https://wonderful-pond-05f7b3b10.azurestaticapps.net/mesh/builder

You can see the source here: https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator/blob/05dedfdd7469b2ada3fc210df7d8496f53fe82ef/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor.cs

CaiusJard commented 3 years ago

@canhorn amazing; thanks for this