works if also in header

Signed-off-by: hanbollar <github@hannahbollar.com>
Volumetrics-io · May 13, 2024 · 9c5211e · 9c5211e
1 parent 2f14192
commit 9c5211e
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 49 deletions.
diff --git a/samples/index.html b/samples/index.html
@@ -33,35 +33,63 @@
     <link rel="stylesheet" type="text/css" href="index-style.css"/>
 
     <!-- MRjs -->
-    <script>
+        <script src="./mr.js"></script>
+    <!-- <script>
     function defineMRFoo() {
-        //     class MRFoo extends MREntity {
-        //         constructor() {
-        //             super();
-        //         }
-
-        //         connected() {
-        //             super.connected();
-        //             this.boxMesh = new THREE.Mesh(
-        //                 new THREE.BoxGeometry(0.2, 0.2, 0.2),
-        //                 new THREE.MeshPhongMaterial({
-        //                     color: "#ff9900",
-        //                     transparent: true,
-        //                     opacity: 0.4,
-        //                 }));
-        //             this.object3D.add(this.boxMesh);
-        //         }
-        //     }
+        console.log('in defineMRFoo');
+                console.log('MREntity defined:', typeof MREntity !== 'undefined');
+
+            class MRFoo extends MREntity {
+                constructor() {
+                    super();
+                }
+
+                connected() {
+                    super.connected();
+                    this.boxMesh = new THREE.Mesh(
+                        new THREE.BoxGeometry(0.2, 0.2, 0.2),
+                        new THREE.MeshPhongMaterial({
+                            color: "#ff9900",
+                            transparent: true,
+                            opacity: 0.4,
+                        }));
+                    this.object3D.add(this.boxMesh);
+                }
+            }
             
-        //     // Define custom element
-        //     customElements.get('mr-foo') || customElements.define('mr-foo', MRFoo);
-        }
-    </script>
+            // Define custom element
+            customElements.get('mr-foo') || customElements.define('mr-foo', MRFoo);
+    }
+
+    </script> -->
     <!-- <script src="./mr.js" onload="defineMRFoo()"></script> -->
     <!-- <link rel="preload" as="script" href="mr.js"> -->
     <!-- <script src="mr.js" defer onload="defineMRFoo()"></script> -->
-    <script src="mr.js" defer></script>
 
+    <script>
+    // Check if MREntity is defined
+        console.log('MREntity defined:', typeof MREntity !== 'undefined');
+
+        class MRFoo extends MREntity {
+            constructor() {
+                super();
+            }
+
+            async connected() {
+                await super.connected();
+                this.boxMesh = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.2, 0.2, 0.2),
+                    new THREE.MeshPhongMaterial({
+                        color: "#ff9900",
+                        transparent: true,
+                        opacity: 0.4,
+                    }));
+                this.object3D.add(this.boxMesh);
+            }
+        }
+        // Define custom element
+        customElements.get('mr-foo') || customElements.define('mr-foo', MRFoo);
+    </script>
 
 </head>
 
@@ -220,35 +248,13 @@
     </mr-app>
 
     <!-- <script src="./index-assets/mr-foo.js"></script> -->
-    <script defer>
-
-        class MRFoo extends MREntity {
-            constructor() {
-                super();
-            }
-
-            async connected() {
-                await super.connected();
-                this.boxMesh = new THREE.Mesh(
-                    new THREE.BoxGeometry(0.2, 0.2, 0.2),
-                    new THREE.MeshPhongMaterial({
-                        color: "#ff9900",
-                        transparent: true,
-                        opacity: 0.4,
-                    }));
-                this.object3D.add(this.boxMesh);
-            }
-        }
-        // Define custom element
-        customElements.get('mr-foo') || customElements.define('mr-foo', MRFoo);
+    <script>
 
-        // Check if MREntity is defined
-        console.log('MREntity defined:', typeof MREntity !== 'undefined');
+
 
         // Log the loading state of the script
-        document.querySelector('script[src="./mr.js"]').onload = () => console.log('mr.js loaded');
-        document.querySelector('script[src="./mr.js"]').onerror = () => console.error('Failed to load mr.js');
-
+        // document.querySelector('script[src="./mr.js"]').onload = () => console.log('mr.js loaded');
+        // document.querySelector('script[src="./mr.js"]').onerror = () => console.error('Failed to load mr.js');
 
         function redirectToDocumentation() {
           window.location.href = "https://docs.mrjs.io";

diff --git a/src/core/MREntity.js b/src/core/MREntity.js
@@ -331,6 +331,7 @@ export class MREntity extends MRElement {
         console.log('this :', this, ' parentElement: ', this.parentElement);
         console.log('this.parentElement instanceof MRElement:', this.parentElement instanceof MRElement);
         if (!(this.parentElement instanceof MRElement)) {
+            console.log('SKIPPING: ', mrjsUtils.js.getSuperclassNameFromInstance(this.parentElement));
             console.log('SKIPPING');
             return;
         }

diff --git a/src/index.js b/src/index.js
@@ -93,3 +93,6 @@ export * from './extras/index.js';
 
 // UTILS - exporting as a named group since it's a submodule of this js module
 export { mrjsUtils } from './utils/index.js';
+
+console.log('MRJS fully loaded');
+document.dispatchEvent(new Event('mrjsReady'));
diff --git a/src/utils/JS.js b/src/utils/JS.js
@@ -20,6 +20,20 @@ js.isInstanceOfBaseClassOnly = function (instance, BaseClass) {
     return instance.constructor === BaseClass;
 };
 
+js.getSuperclassNameFromInstance = function (instance) {
+    console.log('inside getSuperclassNameFromInstance');
+    // Get the prototype of the instance's constructor (i.e., Dog.prototype)
+    const instanceProto = Object.getPrototypeOf(instance);
+    // Get the prototype of the instanceProto (i.e., Animal.prototype)
+    const superProto = Object.getPrototypeOf(instanceProto);
+    console.log('instanceProto:', instanceProto, 'superProto:', superProto);
+    // Check if there's a superclass and return its name
+    if (superProto && superProto.constructor) {
+        return superProto.constructor.name;
+    }
+    return null;  // If no superclass, return null
+}
+
 js.applyAttributes = function (object, attribMap) {
     Object.entries(attributeMap).forEach(([key, value]) => {
         if (key in object) {