work in progress [might break]

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 = '<h2>' + 'Component Type: MyComponent' + '</h2>';
+            this.resizeWithContainerAutomatically = true;
+        }
+    }
+
+    const myLayout = {
+        content: [
+          {
+            title: 'Terminal 1',
+            type: 'component',
+            componentType: 'MyComponent',
+            width: 50,
+          },
+          {
+            title: 'My Component 2',
+            type: 'component',
+            componentType: 'MyComponent',
+            // componentState: { text: 'Component 2' }
+          }
+        ]
+    };
+
+
+    const goldenLayout = new GoldenLayout(this.el.layout);
+    goldenLayout.registerComponent( 'MyComponent', MyComponent);
+    goldenLayout.loadLayout(myLayout);
+    goldenLayout.addComponent('MyComponent', undefined, 'Added Component');
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "windowmanager",
+    "name": "Window Manager",
+    "icons": [
+      {
+        "src": "/images/icons-vector.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [],
+    "description": "2D/3D management of windows",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Window Manager 
+
+The window manager manages all the windows in 2D/XR.
+This is a core XRSH system application
+    `
+  }
+
+});
+