From 25a63ca18229434847c3a10e0d9ce6affcdb67ec Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Thu, 30 Nov 2023 16:05:53 -0600
Subject: [PATCH] Updated function, renamed main vr app.

---
 index.html                                   |  90 ++-
 package-lock.json                            | 739 +++++++++++++++++++
 package.json                                 |   3 +-
 src/controllers/base.ts                      |   1 +
 src/diagram/functions/diagramEventHandler.ts |   3 +-
 src/integration/pouchdbPersistenceManager.ts |  29 +-
 src/menus/diagramListingMenu.ts              |   2 +
 src/menus/inputFile.ts                       |  16 +
 src/menus/mainMenu.ts                        |  20 +
 src/objects/handle.ts                        |   8 +-
 src/{app.ts => vrApp.ts}                     |  45 +-
 11 files changed, 926 insertions(+), 30 deletions(-)
 create mode 100644 src/menus/inputFile.ts
 create mode 100644 src/menus/mainMenu.ts
 rename src/{app.ts => vrApp.ts} (83%)

diff --git a/index.html b/index.html
index d0b0e19..0c1129d 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <style>
       body {
           width: 100vw;
-          heigth: 100vh;
+          height: 100vh;
           margin: 0px;
           padding: 0px;
           aspect-ratio: auto;
@@ -17,6 +17,54 @@
           width: 100vw;
           height: 100vh;
           overflow: hidden;
+
+      }
+
+      .webButton {
+          position: fixed;
+          bottom: 50px;
+          left: 20px;
+          background: rgba(51, 51, 51, .7);
+          display: none;
+          width: 80px;
+          height: 50px;
+          z-index: 10;
+      }
+
+      .webMenu {
+          display: none;
+          position: fixed;
+          bottom: 50px;
+          left: 20px;
+          width: 50%;
+          height: 50%;
+          background: rgba(51, 51, 51, .9);
+          color: #fff;
+          z-index: 9;
+      }
+
+      .webMenu input {
+          background: rgba(51, 51, 51, .9);
+      }
+
+      .webMenu label, .webMenu input {
+
+          color: #fff;
+      }
+
+      .webMenu ul {
+          list-style-type: none;
+          padding: 0px;
+          margin: 0px;
+      }
+
+      .webMenu li label {
+          display: inline-block;
+          width: 200px;
+      }
+
+      .webMenu li {
+          margin: 5px;
       }
 
       #gameCanvas {
@@ -89,9 +137,47 @@
    */
 
 </script>
-<script type="module" src="./src/app.ts"></script>
+<script src="/src/vrApp.ts" type="module"></script>
+
 <div class="scene">
     <canvas id="gameCanvas"></canvas>
 </div>
+<div class="webButton">
+    <button id="menuButton">Open Menu</button>
+</div>
+<div class="webMenu">
+    <ul>
+        <li>
+            <label for="newRelicAccount">New Relic Account</label>
+            <input id="newRelicAccount" type="text" value="">
+        </li>
+        <li>
+
+            <label for="newRelicClient">New Relic Client</label>
+            <input id="newRelicClient" type="text" value="">
+        </li>
+    </ul>
+
+</div>
+<script>
+    const button = document.querySelector('#menuButton');
+    if (button) {
+        button.addEventListener('click', (e) => {
+            const menu = document.querySelector('.webMenu');
+            //const button = document.querySelector('#webButton');
+
+            if (menu.style.display === 'block') {
+                menu.style.display = 'none';
+                button.innerText = "Open Menu";
+
+            } else {
+                menu.style.display = 'block';
+                button.innerText = "Close Menu";
+            }
+        });
+    }
+
+</script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2dd55de..c074702 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "file-saver": "^2.0.5",
         "hls.js": "^1.1.4",
         "loglevel": "^1.8.1",
+        "material-components-web": "^11.0.0",
         "mxgraph": "^4.2.2",
         "niceware": "^4.0.0",
         "p2p-data-channel": "^1.10.7",
@@ -595,6 +596,690 @@
         "systeminformation": "^5.12.1"
       }
     },
+    "node_modules/@material/animation": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/animation/-/animation-11.0.0.tgz",
+      "integrity": "sha512-pAJRl0ySvfOzqyGUme27tPf1LbqrjSTK4g5kngpXOPAIQdYYx89QLAfcqHONSpvXO7/WP+Kc9zJ3WWxbUaG8Wg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/auto-init": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-11.0.0.tgz",
+      "integrity": "sha512-SaJqOHQgK4Eehq95eUUZCu+UvP7h76MWOlQVbDEEkdVhugEOVxa59BzybczbPnTLrSkka7b69X/BQ+ODKq6+PA==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/banner": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/banner/-/banner-11.0.0.tgz",
+      "integrity": "sha512-KEhPRqhshA3rAj5e78zddpsbG9ysWo9SHkdRKGcWqqRsoUsDwVmSp3qo+LqdpE2FGATf5ps0ROtEOrudfq6Ukg==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/button": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/base": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/base/-/base-11.0.0.tgz",
+      "integrity": "sha512-GTybYdiWBoEyYQ3he8cEeuXe5mPq2peFX41rBsMrs516TGDxrVJrEAKNedydhtpfRBsZRreTXMLZtbGrZzfIFQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/button": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/button/-/button-11.0.0.tgz",
+      "integrity": "sha512-KqqxEcsj8jBkV1yNEiPoHiB1AJBa/1OGm7H+hF+C3RUTIrRLew8IuRL1ZY38ukdHvhno1/qmVMKOs6ui0mxjlg==",
+      "dependencies": {
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/card": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/card/-/card-11.0.0.tgz",
+      "integrity": "sha512-dIDaOR1QPglmONalBvaHn3CXNRK7v8No8i4XNktN783uuPmFnAM3Sd/hVHnxLm1pCtoiXYbFCq2yNu1ve+TVRw==",
+      "dependencies": {
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/checkbox": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-11.0.0.tgz",
+      "integrity": "sha512-vHBG9hK+I6SAn2H1/5u5PUscsHMGc2525QLWeWoZ5VRj6TKtxJ8WKZaPZKea7iwJwKYoe4sI9hOFjE1QQAL/tg==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/chips": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/chips/-/chips-11.0.0.tgz",
+      "integrity": "sha512-9gzm0G0e0VQ0SJnfrRws5SOiK+Qi7Crg/FSTsw0Lk5frsHsZt1mKB72d2rOpeXDYb8gox2GUhuO0U/IIc4EIrw==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/checkbox": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/circular-progress": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-11.0.0.tgz",
+      "integrity": "sha512-fiiHjFtzKBTOInuN0Fd6JPMc8D8vSXnRNd+FJIE6hZquGQW4DvPGPZ6pyDsG4ZUWITFWNStqJrOEYovFN4WYrw==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/progress-indicator": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/data-table": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-11.0.0.tgz",
+      "integrity": "sha512-xPpfBrnV8+Hqa/H68+wKTeg0yAFRqf9MNX3sdtp3SHLlzY66It78cUwjKMAyl+J365ayLQMRoca+Ahf1bUvAfg==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/checkbox": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/icon-button": "^11.0.0",
+        "@material/linear-progress": "^11.0.0",
+        "@material/list": "^11.0.0",
+        "@material/menu": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/select": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/density": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/density/-/density-11.0.0.tgz",
+      "integrity": "sha512-FuSx0UukH7p9cIAxEg78zwL5iYuoa/YovyHuuEEudyhWsRH+u0KBSQlYWr+ykg//qZF6urlDrVmu7WAKi1SiCw==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/dialog": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-11.0.0.tgz",
+      "integrity": "sha512-d49zJJmUGTcdWVdBNbXSdDk55mbIIvYpg3ENY9fg6ZlesGsDTgdykGgUkXEaqQeT+Qe/8+4vdaPpz8WNd2Qzyw==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/button": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/icon-button": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/dom": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/dom/-/dom-11.0.0.tgz",
+      "integrity": "sha512-LZdg6VmYnMXc/Ct/GdQ22o4m3UgjhZYQIrwu9Iebqchx0Vd2OTmcFN5nArHSCSgUEhpjpPlkbZmjOpeOAwiKZg==",
+      "dependencies": {
+        "@material/feature-targeting": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/drawer": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-11.0.0.tgz",
+      "integrity": "sha512-pXRGlY+/3kiXGNZx2fOdLbOO2Fb3IXVsSm3FZalMO+EfVFXVJVFrWqkkJnuelJ46R4wCvldXEeaj9E925qMg7A==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/list": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/elevation": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-11.0.0.tgz",
+      "integrity": "sha512-mgrUSBAdXJ1+VS/SWnu/gr9/nq7P1q5X3aDmoom2EPKauEeKhuAHjABI5duxHOrliZM3mK9VLO56D/tszb7spw==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/fab": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/fab/-/fab-11.0.0.tgz",
+      "integrity": "sha512-GLSATlioJtV1h3kvlIwNzvvWqFHD12eoO1mRXJsw6gVL5BOsPur80FYaHb5P7C5X+m4HhlF2Ebc5XgCWiXJajg==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/feature-targeting": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-11.0.0.tgz",
+      "integrity": "sha512-7/jdaHm7C16Eq02tDQ1iI+giWKgk+QRNWFrmGKzHfXbU604XwY/eSLSiVS8QI01vx9QZ0aO9K84m0yhQQNQQtg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/floating-label": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-11.0.0.tgz",
+      "integrity": "sha512-sY/ijV06cU0y9+1OB122d6z2AuxLzjQgQGVq9dFLoVRL6jhV2HgOxGF/3cvZsgGGsv2liXagkmQ02jBV1ypvgA==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/form-field": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0.tgz",
+      "integrity": "sha512-w42PHsq8A+7cgrgBGT5j0h3FTgjs7qvLJFYlwp5QYayC2qTZQa3VsF3OTxuXcn3FVlFnBCwILp0+FfWfRmaH4w==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/icon-button": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-11.0.0.tgz",
+      "integrity": "sha512-rlX/RWOD9ZJznva2MDNRnau9/PnqepxKcHTG4YirkgQwe0m6dqdabzXfeTrorRsJNMSicaYlRV1SwGPShZk3CQ==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/image-list": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-11.0.0.tgz",
+      "integrity": "sha512-Klo+tU6zLFGwG6eiAb5UhcD9Bz846n+jNq3S0rPi5Opzzy0sVqHWb6fl1pNXXttmOtWtAw+h7MuzLfuDqRQ4kw==",
+      "dependencies": {
+        "@material/feature-targeting": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/layout-grid": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-11.0.0.tgz",
+      "integrity": "sha512-MgG7vePDvzbtV/pHbBZ4DbPjs1qPxgnP36PjsBloWTrDh3yJ3L9NKNgs4EdlxEHD6LUUoCIlxVyV4oojSGUIHg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/line-ripple": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0.tgz",
+      "integrity": "sha512-ws0p28hfG5P7RuCJZhHBDhPd/pYusszwRWMa1xkATxCjdCDc9hC9RIsUb6eIG9/iwpYnLNRvIoR5iF+01rVhow==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/linear-progress": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-11.0.0.tgz",
+      "integrity": "sha512-lYXZ58FGF16nhkoLEIs8W52zj8/Ti5d+0mL7L8FGG9m66wtizD9FWO/r2dngKYl4t1tpqGMRfqTgOkdGWaRfwQ==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/progress-indicator": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/list": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/list/-/list-11.0.0.tgz",
+      "integrity": "sha512-WLOXa9acB4FxPn6rQzo+pNAljhKNwv8MvP/w+bQ6TARtXaO8/SbvPJZOoxgTLkekGHEoBW+aCH+kVlgTWDYf2w==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/menu": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/menu/-/menu-11.0.0.tgz",
+      "integrity": "sha512-PnGNVLgvkvBaXBNi+QkSos6Y64DIpf7IW9Ep2tUxL42uQ6aaip2emND3kXNeDzXxhIGI2mm+PnbYXdDpQCdsfw==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/list": "^11.0.0",
+        "@material/menu-surface": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/menu-surface": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-11.0.0.tgz",
+      "integrity": "sha512-/dFaaxUR3PSlv+0aqMGx+8Dp8+D3ToEmtAhHWbCHXHf1wl5rvOIp1A8ByOtZ0mvOwUXB8B8yN+TVFlj6Ey0B3A==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/notched-outline": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-11.0.0.tgz",
+      "integrity": "sha512-GwYFIRA6raFljNARmEpIcIjHztjKD8wcDf+6xl1WezsprGd/Qdzq59/VX76y1et8ZkkL0+fE+4dEaVpCHq/e8A==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/floating-label": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/progress-indicator": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-11.0.0.tgz",
+      "integrity": "sha512-XvLfilg2Ew6gfb0BCWEVuTn6VqBQ7LhZngEakiwoEe2ImoOSFHSBQ8sg177cSvsbUf4c2MnYN0UepfivKGaagg==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/radio": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/radio/-/radio-11.0.0.tgz",
+      "integrity": "sha512-smbW+ccgoGr6CW0Jjk+DZgIwZjVmeNONAJX9lTxSvmxZVgJ/3BVizY8Mwl4r1j4Y9jZj2ZPoAg8D1G6wVxO6ig==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/ripple": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-11.0.0.tgz",
+      "integrity": "sha512-672zAsYaL8aS861VgfEPL4sFMkFe0psiSc+4DfUTq7Nanl4e1gcarzzHZAn5IExUNk3/5QybDiXV+dbaL/0NjQ==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/rtl": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-11.0.0.tgz",
+      "integrity": "sha512-FcS8+N9MhnC0Wdd34O2yCC/5ylIwkfHjV5pbmHyEtb4YXoWngnPIxgpOr5PsUv95WSQBmeqWCRJDwS+sGZHoKQ==",
+      "dependencies": {
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/segmented-button": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/segmented-button/-/segmented-button-11.0.0.tgz",
+      "integrity": "sha512-JUQQLEg8wujbl3vZ4rezPVdgmGKDy+pYHpL/hti2rw3SyGG9RzliZKh9vHGVWrQISObiSphoURSutGU+6HG/jA==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/select": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/select/-/select-11.0.0.tgz",
+      "integrity": "sha512-xAEFYfvm0uOHsM4jZ7LkpxXSwKehIXHabIEe30K3uESZWIoX6G9TT6LPMEgvDC832uQGw6PtTfH/9zgVEYXh6w==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/floating-label": "^11.0.0",
+        "@material/line-ripple": "^11.0.0",
+        "@material/list": "^11.0.0",
+        "@material/menu": "^11.0.0",
+        "@material/menu-surface": "^11.0.0",
+        "@material/notched-outline": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/shape": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-11.0.0.tgz",
+      "integrity": "sha512-O9/Dt/9Nbum1IvxRd4u8gCF4ghk9E55UNp2TGe+RN43zpTUbChh2raOFr3sQeRwLIzlb4wstUG9AxmdktrkDUQ==",
+      "dependencies": {
+        "@material/feature-targeting": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/slider": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/slider/-/slider-11.0.0.tgz",
+      "integrity": "sha512-EJqYV4hP6nUHEO/KyhlRZo7ZN+O5kVNdN6TRU8yTQiAVk9nwvviPhVDdHGj3FvnF1y86fnGvt1zS/MFCP923cg==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/snackbar": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-11.0.0.tgz",
+      "integrity": "sha512-VRvtPyazknpMgoCG2FanSsThm0YOiuiJGPgpSYDRYQrQDyOb1Z8pft3ae9I85U7qYE1YXB4peDKjarBmlA9+ow==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/button": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/icon-button": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/switch": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/switch/-/switch-11.0.0.tgz",
+      "integrity": "sha512-xrEMHtVhDJBXSAKnYubWSFJ0Yo+W6Yi1C9xcS5jqSU2G1FoxKiOWIcM8actlcHqspMC7AWh7fDz8LJVpugGctw==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tab": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tab/-/tab-11.0.0.tgz",
+      "integrity": "sha512-M2tbopIv44S/Lz1dEt1dqkS8hfh0qiOXZpT6PRuDXwxYqdc+uIYpR7VbRreRU91MgWhf49HeixRuTeOQ8jI90A==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/tab-indicator": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tab-bar": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tab-bar/-/tab-bar-11.0.0.tgz",
+      "integrity": "sha512-/U6YLN3QLi/KorMX4dZldOmUIZTgDt6+OcM0aDv/qQUfIxKwZFhkPkOWZeUfwhL91KkzFL12yibiH5dFrany1w==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/tab": "^11.0.0",
+        "@material/tab-scroller": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tab-indicator": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-11.0.0.tgz",
+      "integrity": "sha512-xNieCoP8PhTh9yn9ZfLNz7dvIzhk6F1g4yIkBP2SJHt/QJOHJ/cGZPiT87ZrEqAdCQLfdjovVtR0vxaDVqb86w==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tab-scroller": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0.tgz",
+      "integrity": "sha512-LzN/ADLjd2HoCQF3z0HEQOBlVKzkB9bpD5AdDDG8l358ujA+QiLdIb7XW5ohw80dOikApukNumKZWQJziHm+3Q==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/tab": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/textfield": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-11.0.0.tgz",
+      "integrity": "sha512-7GwZCJplxQpdExNO8K3IOPH/SniCd4bcvOuKGYWjW1irOLYVX2Om0e7X2q70XWvD/B85Rb8ZaPXqx3EJiwNrvQ==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/floating-label": "^11.0.0",
+        "@material/line-ripple": "^11.0.0",
+        "@material/notched-outline": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/theme": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/theme/-/theme-11.0.0.tgz",
+      "integrity": "sha512-GnQI8sd2wHFD3AvmhpyRaH5o9D5Shobs1xDH4FdRU9+c+FNNqouZMDzyM6UpCX4700DzqvE7l0/1LjzB7ve7Lg==",
+      "dependencies": {
+        "@material/feature-targeting": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/tooltip": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-11.0.0.tgz",
+      "integrity": "sha512-i9PvUDB2fQ6Q+1uOU8gFfe9WmVpD3M0ilN9LgGSbY/tCIwH6kxCS2jwa3/z1yJNWXBikLkpNLlOs1JmYYqteVA==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/top-app-bar": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-11.0.0.tgz",
+      "integrity": "sha512-ZP8HTNibABYPYJGTx1IBQFeh2JwtLNamdG/T4D3POC3tDWWXwWYgOTCHdkYF82rBmKEXPacA12l3qjKCEvHyJg==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/typography": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/touch-target": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-11.0.0.tgz",
+      "integrity": "sha512-S1XPYj3Bnkw26nFdYRZ0BHcNLfizF8HBeX9+OR7KuJUKaFB6CN01CtyEmDU3XNI0n140KjMtJnsZykWZommolQ==",
+      "dependencies": {
+        "@material/base": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@material/typography": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-11.0.0.tgz",
+      "integrity": "sha512-i9IGO/ZsF+YnqC2+PpJapt/8hSXOKFXaqv6B9uUr+iQ8GD4bEFpxm5kChzH918wJpCHvxbTYbnR6buaF9nkjCQ==",
+      "dependencies": {
+        "@material/feature-targeting": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/@minhducsun2002/leb128": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@minhducsun2002/leb128/-/leb128-1.0.0.tgz",
@@ -3036,6 +3721,60 @@
       "resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
       "integrity": "sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA=="
     },
+    "node_modules/material-components-web": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/material-components-web/-/material-components-web-11.0.0.tgz",
+      "integrity": "sha512-O20kNOnqEHhqWDrPgBRloNRHLh2yPn1kW0ZmTrgxJI9oDqmKtC65MWCB6LbKblmsofKC3m283JSprTwQDpKvzA==",
+      "dependencies": {
+        "@material/animation": "^11.0.0",
+        "@material/auto-init": "^11.0.0",
+        "@material/banner": "^11.0.0",
+        "@material/base": "^11.0.0",
+        "@material/button": "^11.0.0",
+        "@material/card": "^11.0.0",
+        "@material/checkbox": "^11.0.0",
+        "@material/chips": "^11.0.0",
+        "@material/circular-progress": "^11.0.0",
+        "@material/data-table": "^11.0.0",
+        "@material/density": "^11.0.0",
+        "@material/dialog": "^11.0.0",
+        "@material/dom": "^11.0.0",
+        "@material/drawer": "^11.0.0",
+        "@material/elevation": "^11.0.0",
+        "@material/fab": "^11.0.0",
+        "@material/feature-targeting": "^11.0.0",
+        "@material/floating-label": "^11.0.0",
+        "@material/form-field": "^11.0.0",
+        "@material/icon-button": "^11.0.0",
+        "@material/image-list": "^11.0.0",
+        "@material/layout-grid": "^11.0.0",
+        "@material/line-ripple": "^11.0.0",
+        "@material/linear-progress": "^11.0.0",
+        "@material/list": "^11.0.0",
+        "@material/menu": "^11.0.0",
+        "@material/menu-surface": "^11.0.0",
+        "@material/notched-outline": "^11.0.0",
+        "@material/radio": "^11.0.0",
+        "@material/ripple": "^11.0.0",
+        "@material/rtl": "^11.0.0",
+        "@material/segmented-button": "^11.0.0",
+        "@material/select": "^11.0.0",
+        "@material/shape": "^11.0.0",
+        "@material/slider": "^11.0.0",
+        "@material/snackbar": "^11.0.0",
+        "@material/switch": "^11.0.0",
+        "@material/tab": "^11.0.0",
+        "@material/tab-bar": "^11.0.0",
+        "@material/tab-indicator": "^11.0.0",
+        "@material/tab-scroller": "^11.0.0",
+        "@material/textfield": "^11.0.0",
+        "@material/theme": "^11.0.0",
+        "@material/tooltip": "^11.0.0",
+        "@material/top-app-bar": "^11.0.0",
+        "@material/touch-target": "^11.0.0",
+        "@material/typography": "^11.0.0"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index 73b140e..b64b1de 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,8 @@
     "recordrtc": "^5.6.2",
     "ring-client-api": "11.7.7",
     "round": "^2.0.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "material-components-web": "^11.0.0"
   },
   "devDependencies": {
     "typescript": "^4.9.5",
diff --git a/src/controllers/base.ts b/src/controllers/base.ts
index 02dd93e..7cebda7 100644
--- a/src/controllers/base.ts
+++ b/src/controllers/base.ts
@@ -183,6 +183,7 @@ export class Base {
             return;
         }
         if (this.toolboxHandleWasGrabbed(mesh)) {
+            mesh.setParent(this.scene.getMeshByName("platform"))
             return;
         }
 
diff --git a/src/diagram/functions/diagramEventHandler.ts b/src/diagram/functions/diagramEventHandler.ts
index 02ce094..390338d 100644
--- a/src/diagram/functions/diagramEventHandler.ts
+++ b/src/diagram/functions/diagramEventHandler.ts
@@ -39,7 +39,8 @@ export function diagramEventHandler(event: DiagramEvent,
 
     switch (event.type) {
         case DiagramEventType.RESET:
-            this.scene.getAllMeshes().forEach((m) => {
+
+            scene.getNodes().forEach((m) => {
                 if (m?.metadata?.template && !m?.metadata?.tool) {
                     m.dispose();
                 }
diff --git a/src/integration/pouchdbPersistenceManager.ts b/src/integration/pouchdbPersistenceManager.ts
index 34e4d17..c3f6d0a 100644
--- a/src/integration/pouchdbPersistenceManager.ts
+++ b/src/integration/pouchdbPersistenceManager.ts
@@ -175,12 +175,18 @@ export class PouchdbPersistenceManager {
 
     public async initialize() {
         try {
+            let current = this.getPath();
             const config = await this.config.get('1');
-            if (config.currentDiagramId) {
+
+            if (!current && config.currentDiagramId) {
                 this.db = new PouchDB(config.currentDiagramId);
                 await this.beginSync(config.currentDiagramId);
             } else {
-                config.currentDiagramId = uuidv4();
+                if (current) {
+                    config.currentDiagramId = current;
+                } else {
+                    config.currentDiagramId = uuidv4();
+                }
                 this.db = new PouchDB(config.currentDiagramId);
                 await this.beginSync(config.currentDiagramId);
                 await this.config.put(config);
@@ -218,6 +224,15 @@ export class PouchdbPersistenceManager {
         }
 
     }
+
+    private getPath(): string {
+        const path = window.location.pathname.split('/');
+        if (path.length == 3 && path[1]) {
+            return path[2];
+        } else {
+            return null;
+        }
+    }
     syncDoc = function (info) {
         this.logger.info(info);
         if (info.direction == 'pull') {
@@ -263,7 +278,10 @@ export class PouchdbPersistenceManager {
             const dbs = await axios.get(import.meta.env.VITE_SYNCDB_ENDPOINT + '_all_dbs');
             if (dbs.data.indexOf(remoteDbName) == -1) {
                 this.logger.warn('sync target missing');
-                const buildTarget = await axios.post(import.meta.env.VITE_USER_ENDPOINT,
+                const userEndpoint: string = import.meta.env.VITE_USER_ENDPOINT
+                console.log(userEndpoint);
+                console.log(remoteDbName);
+                const buildTarget = await axios.post(userEndpoint,
                     {username: remoteUserName, password: password, db: remoteDbName});
                 if (buildTarget.status != 200) {
                     this.logger.info(buildTarget.statusText);
@@ -271,8 +289,9 @@ export class PouchdbPersistenceManager {
                 }
             }
             this.logger.debug(dbs);
-
-            this.remote = new PouchDB(import.meta.env.VITE_SYNCDB_ENDPOINT + remoteDbName,
+            const remoteEndpoint: string = import.meta.env.VITE_SYNCDB_ENDPOINT;
+            console.log(remoteEndpoint);
+            this.remote = new PouchDB(remoteEndpoint + remoteDbName,
                 {auth: {username: remoteUserName, password: password}});
 
             this.syncDoc = this.syncDoc.bind(this);
diff --git a/src/menus/diagramListingMenu.ts b/src/menus/diagramListingMenu.ts
index d5af3d3..534e269 100644
--- a/src/menus/diagramListingMenu.ts
+++ b/src/menus/diagramListingMenu.ts
@@ -5,6 +5,7 @@ import {AdvancedDynamicTexture, Button, Control, ScrollViewer, StackPanel, TextB
 import {setMenuPosition} from "../util/functions/setMenuPosition";
 import {DiagramManager} from "../diagram/diagramManager";
 import {DiagramListingEvent, DiagramListingEventType} from "../diagram/types/diagramListing";
+import {DiagramEventType} from "../diagram/types/diagramEntity";
 
 
 export class DiagramListingMenu extends AbstractMenu {
@@ -81,6 +82,7 @@ export class DiagramListingMenu extends AbstractMenu {
         selectButton.fontSize = "48px";
         selectButton.background = "#333333";
         selectButton.onPointerClickObservable.add(() => {
+            this.diagramManager.onDiagramEventObservable.notifyObservers({type: DiagramEventType.RESET});
             console.log(id);
         }, -1, false, this);
         const textBlock = new TextBlock('diagramListingText ' + name, 'Diagram ' + name);
diff --git a/src/menus/inputFile.ts b/src/menus/inputFile.ts
new file mode 100644
index 0000000..9120b10
--- /dev/null
+++ b/src/menus/inputFile.ts
@@ -0,0 +1,16 @@
+export class InputFile {
+    file: File | null;
+    fileInput: HTMLInputElement;
+
+    constructor() {
+        this.file = null;
+        this.fileInput = document.createElement('input');
+        this.fileInput.type = 'file';
+        this.fileInput.accept = 'application/json';
+        this.fileInput.onchange = (event) => {
+            this.file = event.target.files[0];
+        };
+        //document.body.appendChild(this.fileInput);
+        this.fileInput.click();
+    }
+}
\ No newline at end of file
diff --git a/src/menus/mainMenu.ts b/src/menus/mainMenu.ts
new file mode 100644
index 0000000..5fdb849
--- /dev/null
+++ b/src/menus/mainMenu.ts
@@ -0,0 +1,20 @@
+import {Scene} from "@babylonjs/core";
+
+
+export class MainMenu {
+    private readonly scene: Scene;
+    private parent: HTMLElement;
+
+    constructor(scene) {
+        this.scene = scene;
+        this.buildMenu();
+    }
+
+    private buildMenu() {
+        //const button = document.createElement("button");
+        //this.parent.appendChild(button);
+        //this.file = new InputFile();
+    }
+
+
+}
\ No newline at end of file
diff --git a/src/objects/handle.ts b/src/objects/handle.ts
index 90860c3..6d1fcff 100644
--- a/src/objects/handle.ts
+++ b/src/objects/handle.ts
@@ -25,7 +25,9 @@ export class Handle {
 function getHandleMesh(name: string, scene: Scene): InstancedMesh {
     const existingBase = scene.getMeshById("base-handle-mesh");
     if (existingBase) {
-        return new InstancedMesh(name, (existingBase as Mesh));
+        const instance = new InstancedMesh(name, (existingBase as Mesh));
+        instance.setParent(scene.getMeshByName("platform"));
+        return instance;
     }
     const handle = MeshBuilder.CreateCapsule("base-handle-mesh", {
         radius: .05,
@@ -35,5 +37,7 @@ function getHandleMesh(name: string, scene: Scene): InstancedMesh {
     handle.setEnabled(false);
     handle.material = buildStandardMaterial('base-handle-material', scene, "#CCCCDD");
     handle.id = "base-handle-mesh";
-    return new InstancedMesh(name, (handle as Mesh));
+    const instance = new InstancedMesh(name, (handle as Mesh));
+    instance.setParent(scene.getMeshByName("platform"));
+    return instance;
 }
\ No newline at end of file
diff --git a/src/app.ts b/src/vrApp.ts
similarity index 83%
rename from src/app.ts
rename to src/vrApp.ts
index faec1d8..fbc14e4 100644
--- a/src/app.ts
+++ b/src/vrApp.ts
@@ -11,8 +11,11 @@ import {Spinner} from "./util/spinner";
 import {PouchdbPersistenceManager} from "./integration/pouchdbPersistenceManager";
 import {addSceneInspector} from "./util/functions/sceneInspctor";
 import {groundMeshObserver} from "./util/functions/groundMeshObserver";
+import {MainMenu} from "./menus/mainMenu";
 
-export class App {
+export class VrApp {
+    private scene: Scene;
+    private engine: Engine;
     //preTasks = [havokModule];
     private logger: Logger = log.getLogger('App');
 
@@ -26,23 +29,17 @@ export class App {
         const canvas = document.querySelector('#gameCanvas');
 
         this.logger.debug('App', 'gameCanvas created');
-        this.initialize(canvas).then(() => {
-            this.logger.debug('App', 'Scene Initialized');
-            const loader = document.querySelector('#loader');
-            if (loader) {
-                loader.remove();
-            }
-        });
+
     }
 
-    async initialize(canvas) {
-        const engine = new Engine(canvas, true);
-        engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
+    public async initialize(canvas: HTMLCanvasElement) {
+        this.engine = new Engine(canvas, true);
+        this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
         window.onresize = () => {
-            engine.resize();
+            this.engine.resize();
         }
-
-        const scene = new Scene(engine);
+        const scene = new Scene(this.engine);
+        this.scene = scene;
         const spinner = new Spinner(scene);
         spinner.show();
         const config = new AppConfig();
@@ -101,17 +98,27 @@ export class App {
 
          */
         addSceneInspector(scene);
-
+        const mainMenu = new MainMenu(scene);
         this.logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer');
-
-        engine.runRenderLoop(() => {
-            scene.render();
+        this.engine.runRenderLoop(() => {
+            this.scene.render();
         });
         this.logger.info('Render loop started');
+
+    }
+
+    public async start() {
+
     }
 }
 
-const app = new App();
+const vrApp = new VrApp();
+const canvas = (document.querySelector('#gameCanvas') as HTMLCanvasElement);
+vrApp.initialize(canvas).then(() => {
+
+});
+
+