From 29581204ef2ffe0995da39931d2e622d99f5c52d Mon Sep 17 00:00:00 2001 From: Cody Merritt Anhorn Date: Fri, 23 Jul 2021 08:39:27 -0500 Subject: [PATCH] Updated Interop Version to 0.2.3 Created an demo page showing the usage of features from 0.2.3. --- .../Pages/MeshBuilderExample.razor | 7 + .../Pages/MeshBuilderExample.razor.cs | 126 ++++++++ .../Pages/MeshExample.razor | 4 +- .../Pages/MeshExample.razor.cs | 25 +- .../Shared/NavMenu.razor | 9 +- .../wwwroot/js/interop-bridge.custom.js | 303 ++++++++++++++---- .../EventHorizon.Blazor.BabylonJS.WASM.csproj | 4 +- .../Templates/ProjectFileTemplate.txt | 2 +- 8 files changed, 391 insertions(+), 89 deletions(-) create mode 100644 Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor create mode 100644 Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor.cs diff --git a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor new file mode 100644 index 00000000..940f37a0 --- /dev/null +++ b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor @@ -0,0 +1,7 @@ +@page "/mesh/builder" + +

Mesh Builder!

+ +
+ +
\ No newline at end of file diff --git a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor.cs b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor.cs new file mode 100644 index 00000000..f7f20957 --- /dev/null +++ b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshBuilderExample.razor.cs @@ -0,0 +1,126 @@ +namespace EventHorizon.Blazor.BabylonJS.Pages +{ + using System; + using System.Collections.Generic; + using System.Threading.Tasks; + using BABYLON; + using EventHorizon.Blazor.BabylonJS.Model; + using EventHorizon.Blazor.Interop.Callbacks; + + public partial class MeshBuilderExample : IDisposable + { + private Engine _engine; + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) + { + CreateScene(); + } + } + + public void Dispose() + { + _engine?.dispose(); + } + + public void CreateScene() + { + var canvas = Canvas.GetElementById( + "game-window" + ); + var engine = new Engine( + canvas, + true + ); + var scene = new Scene( + engine + ); + var light1 = new HemisphericLight( + "HemisphericLight", + new Vector3(1, 1, 0), + scene + ); + + var columns = 6m; + var rows = 1m; + + var faceUV = new Vector4[6]; + + for (var i = 0; i < 6; i++) + { + faceUV[i] = new Vector4( + i / columns, + 0, + (i + 1) / columns, + 1m / rows + ); + } + + var mat = new StandardMaterial( + "mat", + scene + ); + var texture = new Texture( + scene, + "https://assets.babylonjs.com/environments/numbers.jpg" + ); + mat.diffuseTexture = texture; + + var alpha = 1; + var red = new Color4( + 1, + 0, + 0, + alpha + ); + var blue = new Color4( + 0, + 0, + 1, + alpha + ); + var green = new Color4( + 0, + 1, + 0, + alpha + ); + + var options = new + { + faceUV, + wrap = true, + width = 1, + height = 2, + depth = 3, + faceColors = new List { green, green, green, green, blue, red } + }; + + var box = MeshBuilder.CreateBox( + "box", + options, + scene + ); + box.material = mat; + + var camera = new ArcRotateCamera( + "ArcRotateCamera", + (decimal)(Math.PI / 2), + (decimal)(Math.PI / 4), + 10, + new Vector3(0, 1, 0), + scene + ); + scene.activeCamera = camera; + camera.attachControl( + false + ); + + engine.runRenderLoop(new ActionCallback( + () => Task.Run(() => scene.render(true, false)) + )); + + _engine = engine; + } + } +} diff --git a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor index b894034f..bd64808b 100644 --- a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor +++ b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor @@ -1,6 +1,6 @@ -@page "/mesh" +@page "/mesh/gltf" -

Mesh Loaded! Generated Code!

+

glTF Mesh Loaded!

diff --git a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor.cs b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor.cs index a4183d59..ded806a1 100644 --- a/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor.cs +++ b/Sample/EventHorizon.Blazor.BabylonJS/Pages/MeshExample.razor.cs @@ -1,13 +1,11 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Threading.Tasks; -using BABYLON; -using EventHorizon.Blazor.BabylonJS.Model; -using EventHorizon.Blazor.Interop.Callbacks; - namespace EventHorizon.Blazor.BabylonJS.Pages { + using System; + using System.Threading.Tasks; + using BABYLON; + using EventHorizon.Blazor.BabylonJS.Model; + using EventHorizon.Blazor.Interop.Callbacks; + public partial class MeshExample : IDisposable { private Engine _engine; @@ -54,12 +52,13 @@ public void CreateScene() ), scene ); + var house = SceneLoader.ImportMesh( - null, - "assets/", - "House.gltf", - scene - ); + null, + "assets/", + "House.gltf", + scene + ); var freeCamera = new FreeCamera( "FreeCamera", new Vector3( diff --git a/Sample/EventHorizon.Blazor.BabylonJS/Shared/NavMenu.razor b/Sample/EventHorizon.Blazor.BabylonJS/Shared/NavMenu.razor index d24ce5f1..1b852cb7 100644 --- a/Sample/EventHorizon.Blazor.BabylonJS/Shared/NavMenu.razor +++ b/Sample/EventHorizon.Blazor.BabylonJS/Shared/NavMenu.razor @@ -13,8 +13,13 @@
  • - - Mesh + + Mesh glTF + +
    • +
  • + + Mesh Builder
  • diff --git a/Sample/EventHorizon.Blazor.BabylonJS/wwwroot/js/interop-bridge.custom.js b/Sample/EventHorizon.Blazor.BabylonJS/wwwroot/js/interop-bridge.custom.js index ac06b118..9a9be2e0 100644 --- a/Sample/EventHorizon.Blazor.BabylonJS/wwwroot/js/interop-bridge.custom.js +++ b/Sample/EventHorizon.Blazor.BabylonJS/wwwroot/js/interop-bridge.custom.js @@ -47,22 +47,28 @@ return { [cacheKey]: newCacheKey }; }; /** - * Check argument for existing in argumentCache and if actionCallbackType. + * Check argument for existing in argumentCache and if actionResultCallbackType and if actionCallbackType. * Returns argValue if not part argumentCache or actionCallbackType. * * @param {any} argValue */ const convertArg = (argValue) => { - if (!argValue) { - return null; + if (argValue == null || argValue == undefined) { + return undefined; } if (argValue[cacheKey] && argumentCache.has(argValue[cacheKey])) { return argumentCache.get(argValue[cacheKey]); + } else if (argValue[typeKey] && argValue[typeKey] === actionResultCallbackType) { + const invokableReference = argValue["invokableReference"]; + const method = argValue["method"]; + return function () { + return invokableReference.invokeMethod(method, ...convertCallbackArguments(arguments)); + }; } else if (argValue[typeKey] && argValue[typeKey] === actionCallbackType) { const invokableReference = argValue["invokableReference"]; const method = argValue["method"]; return async function () { - await invokableReference.invokeMethodAsync(method, ...convertCallbackArguments(arguments)); + return await invokableReference.invokeMethodAsync(method, ...convertCallbackArguments(arguments)); }; } return argValue; @@ -77,22 +83,61 @@ for (var i = 1; i < argumentArray.length; i++) { const arg = convertArg(argumentArray[i]); - if (arg && typeof (arg) === "object" && !arg[cacheKey] && !Array.isArray(arg)) { - // Object literal: { prop: "hi", prop2: { ___type: "action_callback" } } - const newArg = {}; - for (const key in arg) { - if (Object.prototype.hasOwnProperty.call(arg, key)) { - const element = arg[key]; + constructArgument(args, arg); + + //if (arg && typeof (arg) === "object" && !arg[cacheKey] && !Array.isArray(arg)) { + // // Object literal: { prop: "hi", prop2: { ___type: "action_callback" } } + // const newArg = {}; + // for (const key in arg) { + // if (Object.prototype.hasOwnProperty.call(arg, key)) { + // const element = arg[key]; + // newArg[key] = convertArg(element); + // } + // } + // args.push(newArg); + //} else if (arg && typeof (arg) === "object" && Array.isArray(arg)) { + // // Array: [ { ___type: "action_callback" } ] + // const newArg = []; + // for (const item of arg) { + // newArg.push(convertArg(item)); + // } + // args.push(newArg); + //} else { + // args.push(arg); + //} + } + return args; + }; + + const constructArgument = (args, arg) => { + if (arg && typeof (arg) === "object" && !arg[cacheKey] && !Array.isArray(arg)) { + // Object literal: { prop: "hi", prop2: { ___type: "action_callback" } } + const newArg = {}; + for (const key in arg) { + if (Object.prototype.hasOwnProperty.call(arg, key)) { + const element = arg[key]; + if (Array.isArray(element)) { + var arrayArgs = []; + constructArgument(arrayArgs, element); + newArg[key] = arrayArgs[0]; + } else { newArg[key] = convertArg(element); } } - args.push(newArg); - } else { - args.push(arg); } + args.push(newArg); + } else if (arg && typeof (arg) === "object" && Array.isArray(arg)) { + // Array: [ { ___type: "action_callback" } ] + const newArg = []; + for (const item of arg) { + newArg.push(convertArg(item)); + } + args.push(newArg); + } else { + args.push(arg); } - return args; - }; + } + /** * Create a serialization safe set of arguments. * Taking into account arrays and objects @@ -145,6 +190,7 @@ const cacheKey = "___guid"; const typeKey = "___type"; const actionCallbackType = "action_callback"; + const actionResultCallbackType = "action_result_callback"; window["blazorInterop"] = { /** * This will call a function on a cached object. @@ -173,7 +219,7 @@ } return BINDING.js_to_mono_obj(value); } catch (ex) { - console.log("error", ex); + console.log("error", { ex, args }); } }, /** @@ -206,7 +252,7 @@ return BINDING.js_to_mono_obj(value[cacheKey]); } catch (ex) { - console.log("error", ex); + console.log("error", { ex, args }); } }, /** @@ -240,7 +286,7 @@ return BINDING.js_to_mono_obj(result); } catch (ex) { - console.log("error", ex); + console.log("error", { ex, args }); return BINDING.js_to_mono_obj([]); } }, @@ -273,7 +319,7 @@ return result; } catch (ex) { - console.log("error", ex); + console.log("error", { ex, root, identifier }); } }, /** @@ -293,7 +339,7 @@ } return values; } catch (ex) { - console.log("error", ex); + console.log("error", { ex, root, identifier }); } }, /** @@ -314,13 +360,13 @@ obj = obj[identifier[i]]; } - if (argumentCache.has(value[cacheKey])) { + if (!!value && argumentCache.has(value[cacheKey])) { value = argumentCache.get(value[cacheKey]); } obj[identifier[identifier.length - 1]] = value; } catch (ex) { - console.log("error", ex); + console.log("error", { ex, root, identifier, value }); } }, /** @@ -350,7 +396,7 @@ } } } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); throw { message: "invalid_call", code: "invalid_call" }; } }, @@ -370,11 +416,9 @@ var newObject = new createNew(...args); newObject[cacheKey] = guid(); argumentCache.set(newObject[cacheKey], newObject); - return { - [cacheKey]: newObject[cacheKey] - }; + return newObject[cacheKey]; } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); } throw { code: "invalid_call" }; }, @@ -398,7 +442,7 @@ } return createNew.call(context, ...args); } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); } return undefined; }, @@ -424,13 +468,16 @@ if (typeof (newObject) === "object" && !Array.isArray(newObject) ) { - const newCacheKey = guid(); - newObject[cacheKey] = newCacheKey; - argumentCache.set(newCacheKey, newObject); - return newCacheKey; + if (!argumentCache.has(newObject[cacheKey])) { + // Add to cache + const newCacheKey = guid(); + newObject[cacheKey] = newCacheKey; + argumentCache.set(newCacheKey, newObject); + } + return newObject[cacheKey]; } } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); } return undefined; }, @@ -457,12 +504,15 @@ return result; } } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); } return []; }, /** - * This will call a through an identifier's a function from window as the root. + * This will call a function based on the identifier, with the arguments passed. + * + * - 'window' is root + * * arguments[0] = Identifier * arguments[1...n] = Function Arguments **/ @@ -494,7 +544,150 @@ return results; } catch (ex) { - console.log("error", ex); + console.log("error", { ex, arguments }); + } + return []; + }, + /** + * This will call a Promise based on the identifier, with the arguments passed. + * + * - 'window' is root + * + * arguments[0] = Identifier + * arguments[1...n] = Function Arguments + * + * @returns primitive + * */ + task: async function () { + try { + var identifier = arguments[0]; + var obj = window[identifier[0]]; + if (argumentCache.has(identifier[0])) { + obj = argumentCache.get(identifier[0]); + } + var args = convertArgs(arguments); + var context = window; + for (var i = 1; i < identifier.length; i++) { + context = obj; + obj = obj[identifier[i]]; + } + return await obj.call(context, ...args); + } catch (ex) { + console.log("error", { ex, arguments }); + } + return undefined; + }, + /** + * This will call a Promise based on the identifier, with the arguments passed. + * + * - 'window' is root + * + * arguments[0] = Identifier + * arguments[1...n] = Function Arguments + * + * @returns Class Entity Identifier + * */ + taskClass: async function () { + try { + var identifier = arguments[0]; + var obj = window[identifier[0]]; + if (argumentCache.has(identifier[0])) { + obj = argumentCache.get(identifier[0]); + } + var args = convertArgs(arguments); + var context = window; + for (var i = 1; i < identifier.length; i++) { + context = obj; + obj = obj[identifier[i]]; + } + var newObject = await obj.call(context, ...args); + if (typeof (newObject) === "object" + && !Array.isArray(newObject) + ) { + if (!argumentCache.has(newObject[cacheKey])) { + // Add to cache + const newCacheKey = guid(); + newObject[cacheKey] = newCacheKey; + argumentCache.set(newCacheKey, newObject); + } + return newObject[cacheKey]; + } + } catch (ex) { + console.log("error", { ex, arguments }); + } + return undefined; + }, + /** + * This will call a Promise based on the identifier, with the arguments passed. + * + * - 'window' is root + * + * arguments[0] = Identifier + * arguments[1...n] = Function Arguments + * + * @returns Array of primitives + * */ + taskArray: async function () { + try { + var identifier = arguments[0]; + var createNew = window[identifier[0]]; + if (argumentCache.has(identifier[0])) { + createNew = argumentCache.get(identifier[0]); + } + var args = convertArgs(arguments); + var context = window; + for (var i = 1; i < identifier.length; i++) { + context = createNew; + createNew = createNew[identifier[i]]; + } + var result = await createNew.call(context, ...args); + if (Array.isArray(result)) { + return result; + } + } catch (ex) { + console.log("error", { ex, arguments }); + } + return []; + }, + /** + * This will call a Promise based on the identifier, with the arguments passed. + * + * - 'window' is root + * + * arguments[0] = Identifier + * arguments[1...n] = Function Arguments + * + * @returns Array of Class Entities + * */ + taskArrayClass: async function () { + try { + var identifier = arguments[0]; + var createNew = window[identifier[0]]; + if (argumentCache.has(identifier[0])) { + createNew = argumentCache.get(identifier[0]); + } + var args = convertArgs(arguments); + var context = window; + for (var i = 1; i < identifier.length; i++) { + context = createNew; + createNew = createNew[identifier[i]]; + } + + var funcResults = await createNew.call(context, ...args); + const results = []; + for (var value of funcResults) { + if (!argumentCache.has(value[cacheKey])) { + // Add to cache + const newCacheKey = guid(); + value[cacheKey] = newCacheKey; + argumentCache.set(newCacheKey, value); + } + results.push(value[cacheKey]); + } + + return results; + } catch (ex) { + console.log("error", { ex, arguments }); } return []; }, @@ -563,38 +756,10 @@ var newObject = cachedEntity[prop]; newObject[cacheKey] = guid(); argumentCache.set(newObject[cacheKey], newObject); - return { - [cacheKey]: newObject[cacheKey] - }; + return newObject[cacheKey]; + }, + removeEntity: (identifier) => { + argumentCache.delete(identifier); }, }; - - // Custom Code HERE - window.taskClass = async function () { - try { - var identifier = arguments[0]; - var obj = window[identifier[0]]; - if (argumentCache.has(identifier[0])) { - obj = argumentCache.get(identifier[0]); - } - var args = convertArgs(arguments); - var context = window; - for (var i = 1; i < identifier.length; i++) { - context = obj; - obj = obj[identifier[i]]; - } - var newObject = await obj.call(context, ...args); - if (typeof (newObject) === "object" - && !Array.isArray(newObject) - ) { - const newCacheKey = guid(); - newObject[cacheKey] = newCacheKey; - argumentCache.set(newCacheKey, newObject); - return newCacheKey; - } - } catch (ex) { - console.log("error", ex); - } - return undefined; - }; -})(); \ No newline at end of file +})(); diff --git a/Sample/_generated/EventHorizon.Blazor.BabylonJS.WASM/EventHorizon.Blazor.BabylonJS.WASM.csproj b/Sample/_generated/EventHorizon.Blazor.BabylonJS.WASM/EventHorizon.Blazor.BabylonJS.WASM.csproj index 6fd71077..2c117d01 100644 --- a/Sample/_generated/EventHorizon.Blazor.BabylonJS.WASM/EventHorizon.Blazor.BabylonJS.WASM.csproj +++ b/Sample/_generated/EventHorizon.Blazor.BabylonJS.WASM/EventHorizon.Blazor.BabylonJS.WASM.csproj @@ -2,11 +2,11 @@ net5.0 - 8601,8618,8625,0108,CA2012,IDE1006 + 8601,8618,8625,0108,CA2012,IDE1006 - + diff --git a/Source/EventHorizon.Blazor.TypeScript.Interop.Generator.Writers.Project/Templates/ProjectFileTemplate.txt b/Source/EventHorizon.Blazor.TypeScript.Interop.Generator.Writers.Project/Templates/ProjectFileTemplate.txt index ea4edce7..2c117d01 100644 --- a/Source/EventHorizon.Blazor.TypeScript.Interop.Generator.Writers.Project/Templates/ProjectFileTemplate.txt +++ b/Source/EventHorizon.Blazor.TypeScript.Interop.Generator.Writers.Project/Templates/ProjectFileTemplate.txt @@ -6,7 +6,7 @@ - +