diff --git a/app/windowmanager.js b/app/windowmanager.js new file mode 100644 index 0000000..ee615a5 --- /dev/null +++ b/app/windowmanager.js @@ -0,0 +1,102 @@ +// +// this is just an AFRAME wrapper for https://golden-layout.com +// +// + +AFRAME.registerComponent('windowmanager', { + schema: { + }, + + dependencies:{ + "cash": "https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js", // tiny jquery replacement + "goldenlayout": "https://golden-layout.com/files/latest/js/goldenlayout.min.js", + "goldenlayout_css1": "https://golden-layout.com/files/latest/css/goldenlayout-base.css", + "goldenlayout_css2": "https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" + }, + + events:{ + ready: function(){ + //this.initLayout() + } + }, + + init: function () { + this.require( this.dependencies ) + }, + + initLayout: async function(){ + // const goldenlayout_module = "https://cdn.skypack.dev/pin/golden-layout@v2.5.0-dAz3xMzxIRpbnbfEAik0/mode=imports/optimized/golden-layout.js"; + // const { ComponentContainer, ComponentItemConfig, GoldenLayout, ItemType } = await import(goldenlayout_module) + + this.el.layout = document.createElement('div') + document.querySelector("#overlay").appendChild(this.el.layout) + + class MyComponent { + constructor(container) { + this.container = container; + this.rootElement = container.element; + this.rootElement.innerHTML = '