saving state, panels working, vh/vw font broken.

samples/examples/embed-style.css

@@ -95,7 +95,6 @@
     mr-app {
         grid-column: 2;
         height: 100vh;
-        width: 100%;
         overflow: scroll;
     }
 
@@ -114,7 +113,6 @@
       background-color: var(--color-paper);
       padding-top: 6vw;
       display: grid;
-      width: 100%;
       grid-template-columns: 1fr 2fr 1fr;
       gap: 1vw;
       grid-auto-rows: auto;

samples/examples/iframe-style.css

@@ -0,0 +1,255 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('/assets/fonts/Roboto-Regular.ttf') format('truetype');
+    font-weight: 100 900;
+  }
+
+  @font-face {
+      font-family: 'Bricolage';
+      src: url('/assets/fonts/BricolageGrotesque.ttf') format('truetype');
+      font-weight: 100 900;
+    }
+
+    mr-app {
+      background-image: url('/assets/textures/skybox_starmap_4k.jpg');
+    }
+
+
+    :root {
+      --font-title: "Bricolage";
+      /* --font-body: "Onest", system-ui, sans-serif; */
+      /* PADDINGS & MARGINS */
+      --space: 4rem;
+      --outer: 1.5rem;
+      --inter: 1rem;
+      --inner: 0.5rem;
+      --inlet: 0.25rem;
+      /* CONSTRAINTS */
+      --hwdth: 56rem;
+      --mwdth: 68rem;
+      /* RADIUS */
+      --border-radius-large: 2rem;
+      /* SCROLL */
+      --scroll: 0;
+      --position: 0;
+      /* NEUTRAL COLORS */
+      --neutral-hue: 40;
+      --color-title: hsl(var(--neutral-hue), 20%, 20%);
+      --color-text: hsl(var(--neutral-hue), 15%, 10%);
+      --color-text-light: hsl(var(--neutral-hue), 20%, 42%);
+      --color-paper: hsl(var(--neutral-hue), 80%, 94%);
+      --color-paper-light: hsl(var(--neutral-hue), 75%, 92%);
+      --color-paper-card: white;
+      /* BUTTONS */
+      /* --rythm-hue: 310; */
+      --rythm-hue: 300;
+      /* --rythm-hue: 40; */
+      --color-button: hsl(var(--rythm-hue), 15%, 96%);
+      --color-button-hover: hsl(var(--rythm-hue), 100%, 90%);
+      --color-button-active: hsl(var(--rythm-hue), 100%, 85%);
+      --color-button-text: hsl(var(--rythm-hue), 15%, 15%);
+      --color-button-ring: hsl(var(--rythm-hue), 100%, 70%);
+      /* CTA */
+      /* --hue: 210; */
+      --hue: 210;
+      --color-cta: hsl(var(--hue), 70%, 40%);
+      --color-cta-hover: hsl(var(--hue), 70%, 55%);
+      --color-cta-active: hsl(var(--hue), 70%, 60%);
+      --color-cta-text: hsl(var(--hue), 10%, 100%);
+      --color-cta-focus-ring: hsl(var(--hue), 100%, 100%);
+      /* OPTIONS */
+      --option-hue: 40;
+      --color-option: hsl(var(--option-hue), 50%, 83%);
+      --color-option-hover: hsl(var(--option-hue), 50%, 86%);
+      --color-option-active: hsl(var(--option-hue), 50%, 88%);
+      --color-option-text: var(--color-text);
+      --color-option-focus-ring: hsl(var(--option-hue), 50%, 50%);
+      /* OPTIONS SELECTED */
+      --color-option-selected: hsl(var(--option-hue), 100%, 100%);
+      --color-option-selected-text: hsl(var(--hue), 80%, 30%);
+      /* FOCUS */
+      --color-focus-outline: hsl(var(--hue), 100%, 50%);
+      /* BORDERS */
+      --color-border-light: hsl(var(--rythm-hue), 15%, 92%);
+      --color-border-static: hsla(var(--rythm-hue), 100%, 15%, 15%);
+      --color-border-field-hover: hsl(var(--rythm-hue), 80%, 80%);
+      --color-border-field-active: hsl(var(--rythm-hue), 100%, 70%);
+      /* SHADOWS */
+      --button-shadow: 0 0.25rem 1rem -0.5rem hsla(30, 15%, 15%, 20%);
+      --main-shadow: 0 0 1rem -0.5rem hsla(30, 50%, 25%, 50%);
+    }
+
+    body {
+      background-color: var(--c-plate);
+      font-family: var(--font-body);
+      color: var(--c-text);
+      font-size: 1px;
+    }
+
+    main {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      gap: 6rem;
+      background: var(--c-plate);
+      padding: 4vw;
+      overflow-y: auto;
+      max-width: var(--content-max-width);
+      margin: 0 auto;
+    }
+
+    #mark {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      pointer-events: none;
+      z-index: 999;
+      padding-top: 1rem;
+    }
+
+    .layout {
+      background-color: var(--color-paper);
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      height: 100vh;
+    }
+
+    #iframe {
+        width: 100%;
+        height: 100%;
+    }
+
+    #navbar {
+      background-color: rgb(51, 50, 50);
+      border-radius: 1%;
+      position:fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 4;
+      display: grid;
+      grid-template-columns: 1fr 2fr 0.5fr 0.5fr;
+      padding: 10px;
+    }
+
+    .title {
+      margin: 0 auto;
+      font-family: var(--font-title);
+      font-weight: 500;
+      font-size: 8vw;
+      line-height: 100%;
+      color: rgba(24, 24, 24, 0.75);
+      font-variation-settings: 'opsz' 80, 'wght' 550;
+      font-weight: bold;
+      align-self: center;
+      grid-column: 2;
+
+
+    }
+
+    .company {
+      font-family: var(--font-title);
+      font-size: 4vw;
+      line-height: 100%;
+      color: rgb(55, 55, 55);
+      align-self: center;
+      grid-column: 1;
+    }
+
+    .spin-button {
+      margin: auto;
+      grid-column: 4;
+      align-self: end;
+      font-family: var(--font-title);
+      font-size: 4vw;
+      line-height: 100%;
+    }
+
+    .logo {
+      grid-column: 3;
+      z-index: 25;
+    }
+
+    #logo-model{
+      scale: 0.0005;
+    }
+
+    #table-model{
+      scale: 0.002;
+    }
+
+    .sub-title {
+      font-family: var(--font-title);
+      font-size: 6vw;
+      margin-bottom: 1vh;
+      line-height: 100%;
+      text-align: center;
+      color: rgba(24, 24, 24, 0.75);
+      position: absolute;
+      bottom: 10px;
+      left: 0;
+
+    }
+
+    .example-link {
+      font-family: var(--font-title);
+      font-size: 2.5vw;
+      line-height: 100%;
+      color: rgba(24, 24, 24, 0.75);
+      margin: 0 auto;
+    }
+
+    .example-header {
+      font-family: var(--font-title);
+      font-size: 3.5vw;
+      line-height: 100%;
+      text-align: center;
+      margin: 0 auto;
+      color: rgba(24, 24, 24, 0.75);
+      z-index: 2;
+    }
+
+    .links {
+      display:grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1vw;
+      margin-bottom: 10px;
+      z-index: 2;
+    }
+
+    .col-1{
+      grid-column: 1;
+    }
+
+    .col-2{
+      grid-column: 2;
+    }
+
+    .col-3{
+      grid-column: 3;
+    }
+
+    .headset {
+      grid-row: 2 / 5;
+      grid-column: 1 / -1;
+      object-fit: cover;
+      z-index: 1;
+    }
+
+    /* .headset > mr-img {
+      width: 100%;
+      object-fit: cover;
+    } */
+
+    .paragraph {
+      font-family: 'Roboto';
+      line-height: 100%;
+      font-size: 16px;
+
+      grid-column: 2;
+      z-index: 2;
+    }
+

samples/examples/iframe.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mrjs - iframe</title>
+    <meta name="description" content="mr.js example - iframe">
+    <script src="/mr.js"></script>
+    <link rel="stylesheet" type="text/css" href="iframe-style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body >
+    <div class="layout">
+
+      <div class="col-1"><div>Some plane old html</div></div>
+
+      <iframe src="./panels.html" class="col-2" width="100%" id="iframe"></iframe>
+</div>
+
+  </body>
+
+  <footer>
+  </footer>
+</html>

samples/examples/panels-style.css

@@ -81,6 +81,11 @@
     font-size: 16px;
   }
 
+  /* mr-app.inXR {
+    width: 1080px;
+      height: 1080px;
+  } */
+
   .mrjs {
     font-family: var(--font-title);
     font-size: 4vw;

samples/examples/panels.html

@@ -157,7 +157,7 @@
                     index += 1
                 }
 
-                panel.object3D.lookAt(forwardVec)
+                // panel.object3D.lookAt(forwardVec)
 
 
             }
@@ -178,7 +178,13 @@
 
         }
 
+        document.addEventListener('enterXR', () => {
+            document.querySelector('mr-app').classList.add('inXR')
+            spread()
+        })
+
         document.addEventListener('exitXR', () => {
+            document.querySelector('mr-app').classList.remove('inXR')
             unfolded = false 
             spread()
         })

src/core/MRApp.js

@@ -41,14 +41,22 @@ export class MRApp extends MRElement {
      *
      */
     get appWidth() {
-        return parseFloat(this.compStyle.width.split('px')[0]);
+        let result = parseFloat(this.compStyle.width.split('px')[0]);
+        if (mrjsUtils.xr.isPresenting) {
+            result = (result / window.innerWidth) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+        }
+        return result
     }
 
     /**
      *
      */
     get appHeight() {
-        return parseFloat(this.compStyle.height.split('px')[0]);
+        let result = parseFloat(this.compStyle.height.split('px')[0]);
+        if (mrjsUtils.xr.isPresenting) {
+            result = (result / window.innerHeight) * mrjsUtils.display.VIRTUAL_DISPLAY_RESOLUTION
+        }
+        return result
     }
 
     /**
@@ -323,6 +331,8 @@ export class MRApp extends MRElement {
         this.anchor.position.setX(0.015);
         this.anchor.position.setZ(-0.5);
 
+        this.user.updateProjectionMatrix();
+
         // Audio listner needed for spatial audio
     };