Inspector

inspector/src/components/popup.ts

@@ -1,79 +0,0 @@
-export class Popup {
-    public static CreatePopup(title: string, windowVariableName: string, width = 300, height = 800) {
-        const windowCreationOptionsList = {
-            width: width,
-            height: height,
-            top: (window.innerHeight - width) / 2 + window.screenY,
-            left: (window.innerWidth - height) / 2 + window.screenX,
-        };
-
-        var windowCreationOptions = Object.keys(windowCreationOptionsList)
-            .map((key) => key + "=" + (windowCreationOptionsList as any)[key])
-            .join(",");
-
-        const popupWindow = window.open("", title, windowCreationOptions);
-        if (!popupWindow) {
-            return null;
-        }
-
-        const parentDocument = popupWindow.document;
-
-        // Font
-        const newLinkEl = parentDocument.createElement("link");
-
-        newLinkEl.rel = "stylesheet";
-        newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
-        parentDocument.head!.appendChild(newLinkEl);
-
-        parentDocument.title = title;
-        parentDocument.body.style.width = "100%";
-        parentDocument.body.style.height = "100%";
-        parentDocument.body.style.margin = "0";
-        parentDocument.body.style.padding = "0";
-
-        let parentControl = parentDocument.createElement("div");
-        parentControl.style.width = "100%";
-        parentControl.style.height = "100%";
-        parentControl.style.margin = "0";
-        parentControl.style.padding = "0";
-
-        popupWindow.document.body.appendChild(parentControl);
-        this._CopyStyles(window.document, parentDocument);
-        setTimeout(() => {
-            // need this for late bindings
-            this._CopyStyles(window.document, parentDocument);
-        }, 0);
-
-        (this as any)[windowVariableName] = popupWindow;
-
-        return parentControl;
-    }
-
-    private static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument) {
-        for (var index = 0; index < sourceDoc.styleSheets.length; index++) {
-            var styleSheet: any = sourceDoc.styleSheets[index];
-            try {
-                if (styleSheet.cssRules) {
-                    // for <style> elements
-                    const newStyleEl = sourceDoc.createElement("style");
-
-                    for (var cssRule of styleSheet.cssRules) {
-                        // write the text of each rule into the body of the style element
-                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
-                    }
-
-                    targetDoc.head!.appendChild(newStyleEl);
-                } else if (styleSheet.href) {
-                    // for <link> elements loading CSS from a URL
-                    const newLinkEl = sourceDoc.createElement("link");
-
-                    newLinkEl.rel = "stylesheet";
-                    newLinkEl.href = styleSheet.href;
-                    targetDoc.head!.appendChild(newLinkEl);
-                }
-            } catch (e) {
-                console.log(e);
-            }
-        }
-    }
-}

inspector/src/components/popupComponent.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Inspector } from "../inspector";
-import { Popup } from "../components/popup";
 
 interface IPopupComponentProps {
     id: string;
@@ -39,7 +38,7 @@ export class PopupComponent extends React.Component<IPopupComponentProps, { isCo
 
         let windowVariableName = `window_${title}`;
 
-        this._container = Popup.CreatePopup(title, windowVariableName, size.width, size.height);
+        this._container = Inspector._CreatePopup(title, windowVariableName, size.width, size.height);
 
         if (this._container) {
             this._curveEditorHost = this._container.ownerDocument!.createElement("div");

inspector/src/inspector.ts

@@ -55,8 +55,9 @@ export class Inspector {
         for (var index = 0; index < sourceDoc.styleSheets.length; index++) {
             var styleSheet: any = sourceDoc.styleSheets[index];
             try {
-                if (styleSheet.cssRules) { // for <style> elements
-                    const newStyleEl = sourceDoc.createElement('style');
+                if (styleSheet.cssRules) {
+                    // for <style> elements
+                    const newStyleEl = sourceDoc.createElement("style");
 
                     for (var cssRule of styleSheet.cssRules) {
                         // write the text of each rule into the body of the style element
@@ -64,17 +65,17 @@ export class Inspector {
                     }
 
                     targetDoc.head!.appendChild(newStyleEl);
-                } else if (styleSheet.href) { // for <link> elements loading CSS from a URL
-                    const newLinkEl = sourceDoc.createElement('link');
+                } else if (styleSheet.href) {
+                    // for <link> elements loading CSS from a URL
+                    const newLinkEl = sourceDoc.createElement("link");
 
-                    newLinkEl.rel = 'stylesheet';
+                    newLinkEl.rel = "stylesheet";
                     newLinkEl.href = styleSheet.href;
                     targetDoc.head!.appendChild(newLinkEl);
                 }
             } catch (e) {
                 console.log(e);
             }
-
         }
     }
 
@@ -91,7 +92,7 @@ export class Inspector {
                 handleResize: options.handleResize,
                 enablePopup: options.enablePopup,
                 enableClose: options.enableClose,
-                explorerExtensibility: options.explorerExtensibility
+                explorerExtensibility: options.explorerExtensibility,
             };
         }
 
@@ -117,10 +118,13 @@ export class Inspector {
         if (this._SceneExplorerHost) {
             this._OpenedPane++;
             const sceneExplorerElement = React.createElement(SceneExplorerComponent, {
-                scene, globalState: this._GlobalState,
+                scene,
+                globalState: this._GlobalState,
                 extensibilityGroups: options.explorerExtensibility,
                 noClose: !options.enableClose,
-                noExpand: !options.enablePopup, popupMode: options.popup, onPopup: () => {
+                noExpand: !options.enablePopup,
+                popupMode: options.popup,
+                onPopup: () => {
                     ReactDOM.unmountComponentAtNode(this._SceneExplorerHost!);
 
                     this._RemoveElementFromDOM(this._SceneExplorerHost);
@@ -134,7 +138,8 @@ export class Inspector {
                     options.showInspector = false;
                     options.explorerWidth = options.popup ? "100%" : "300px";
                     Inspector.Show(scene, options);
-                }, onClose: () => {
+                },
+                onClose: () => {
                     ReactDOM.unmountComponentAtNode(this._SceneExplorerHost!);
                     Inspector._OpenedPane--;
 
@@ -145,7 +150,7 @@ export class Inspector {
                     if (options.popup) {
                         this._SceneExplorerWindow.close();
                     }
-                }
+                },
             });
             ReactDOM.render(sceneExplorerElement, this._SceneExplorerHost);
         }
@@ -173,9 +178,12 @@ export class Inspector {
         if (this._ActionTabsHost) {
             this._OpenedPane++;
             const actionTabsElement = React.createElement(ActionTabsComponent, {
-                globalState: this._GlobalState, scene: scene,
+                globalState: this._GlobalState,
+                scene: scene,
                 noClose: !options.enableClose,
-                noExpand: !options.enablePopup, popupMode: options.popup, onPopup: () => {
+                noExpand: !options.enablePopup,
+                popupMode: options.popup,
+                onPopup: () => {
                     ReactDOM.unmountComponentAtNode(this._ActionTabsHost!);
 
                     this._RemoveElementFromDOM(this._ActionTabsHost);
@@ -189,7 +197,8 @@ export class Inspector {
                     options.showInspector = true;
                     options.inspectorWidth = options.popup ? "100%" : "300px";
                     Inspector.Show(scene, options);
-                }, onClose: () => {
+                },
+                onClose: () => {
                     ReactDOM.unmountComponentAtNode(this._ActionTabsHost!);
                     Inspector._OpenedPane--;
                     this._Cleanup();
@@ -200,14 +209,13 @@ export class Inspector {
                         this._ActionTabsWindow.close();
                     }
                 },
-                initialTab: options.initialTab
+                initialTab: options.initialTab,
             });
             ReactDOM.render(actionTabsElement, this._ActionTabsHost);
         }
     }
 
     private static _CreateEmbedHost(scene: Scene, options: IInternalInspectorOptions, parentControl: Nullable<HTMLElement>, onSelectionChangedObservable: Observable<string>) {
-
         // Prepare the inspector host
         if (parentControl) {
             const host = parentControl.ownerDocument!.createElement("div");
@@ -227,11 +235,13 @@ export class Inspector {
         if (this._EmbedHost) {
             this._OpenedPane++;
             const embedHostElement = React.createElement(EmbedHostComponent, {
-                globalState: this._GlobalState, scene: scene,
+                globalState: this._GlobalState,
+                scene: scene,
                 extensibilityGroups: options.explorerExtensibility,
                 noExpand: !options.enablePopup,
                 noClose: !options.enableClose,
-                popupMode: options.popup, onPopup: () => {
+                popupMode: options.popup,
+                onPopup: () => {
                     ReactDOM.unmountComponentAtNode(this._EmbedHost!);
 
                     if (options.popup) {
@@ -246,7 +256,8 @@ export class Inspector {
                     options.showInspector = true;
                     options.embedHostWidth = options.popup ? "100%" : "auto";
                     Inspector.Show(scene, options);
-                }, onClose: () => {
+                },
+                onClose: () => {
                     ReactDOM.unmountComponentAtNode(this._EmbedHost!);
 
                     this._OpenedPane = 0;
@@ -258,7 +269,7 @@ export class Inspector {
                         this._EmbedHostWindow.close();
                     }
                 },
-                initialTab: options.initialTab
+                initialTab: options.initialTab,
             });
             ReactDOM.render(embedHostElement, this._EmbedHost);
         }
@@ -268,14 +279,12 @@ export class Inspector {
             width: width,
             height: height,
             top: (window.innerHeight - width) / 2 + window.screenY,
-            left: (window.innerWidth - height) / 2 + window.screenX
+            left: (window.innerWidth - height) / 2 + window.screenX,
         };
 
         var windowCreationOptions = Object.keys(windowCreationOptionsList)
-            .map(
-                (key) => key + '=' + (windowCreationOptionsList as any)[key]
-            )
-            .join(',');
+            .map((key) => key + "=" + (windowCreationOptionsList as any)[key])
+            .join(",");
 
         const popupWindow = window.open("", title, windowCreationOptions);
         if (!popupWindow) {
@@ -284,6 +293,13 @@ export class Inspector {
 
         const parentDocument = popupWindow.document;
 
+        // Font
+        const newLinkEl = parentDocument.createElement("link");
+
+        newLinkEl.rel = "stylesheet";
+        newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
+        parentDocument.head!.appendChild(newLinkEl);
+
         parentDocument.title = title;
         parentDocument.body.style.width = "100%";
         parentDocument.body.style.height = "100%";
@@ -300,6 +316,11 @@ export class Inspector {
 
         this._CopyStyles(window.document, parentDocument);
 
+        setTimeout(() => {
+            // need this for late bindings
+            this._CopyStyles(window.document, parentDocument);
+        }, 0);
+
         (this as any)[windowVariableName] = popupWindow;
 
         return parentControl;
@@ -331,7 +352,7 @@ export class Inspector {
             enableClose: true,
             handleResize: true,
             enablePopup: true,
-            ...userOptions
+            ...userOptions,
         };
 
         // Prepare state
@@ -358,8 +379,7 @@ export class Inspector {
         if (options.embedMode && options.showExplorer && options.showInspector) {
             if (options.popup) {
                 this._CreateEmbedHost(scene, options, this._CreatePopup("INSPECTOR", "_EmbedHostWindow"), Inspector.OnSelectionChangeObservable);
-            }
-            else {
+            } else {
                 let parentControl = (options.globalRoot ? options.globalRoot : rootElement!.parentElement) as HTMLElement;
 
                 if (!options.overlay && !this._NewCanvasContainer) {
@@ -380,8 +400,7 @@ export class Inspector {
 
                 this._CreateEmbedHost(scene, options, parentControl, Inspector.OnSelectionChangeObservable);
             }
-        }
-        else if (options.popup) {
+        } else if (options.popup) {
             if (options.showExplorer) {
                 if (this._SceneExplorerHost) {
                     this._SceneExplorerHost.style.width = "0";
@@ -470,7 +489,7 @@ export class Inspector {
             if (g.light) {
                 this._GlobalState.enableLightGizmo(g.light, false);
             }
-        })
+        });
         if (this._Scene && this._Scene.reservedDataStore && this._Scene.reservedDataStore.gizmoManager) {
             this._Scene.reservedDataStore.gizmoManager.dispose();
             this._Scene.reservedDataStore.gizmoManager = null;