Merge pull request #8593 from toledoal/font-display

Font display

dist/preview release/what's new.md

@@ -9,7 +9,7 @@
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added SubSurfaceScattering on PBR materials ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 

inspector/src/components/popupComponent.tsx

@@ -1,78 +1,79 @@
 import * as React from "react";
-import * as ReactDOM from 'react-dom';
-import { Inspector } from '../inspector';
+import * as ReactDOM from "react-dom";
+import { Inspector } from "../inspector";
 
 interface IPopupComponentProps {
-    id: string,
-    title: string,
-    size: { width: number, height: number },
-    onOpen: (window: Window) => void,
-    onClose: (window: Window) => void,
+    id: string;
+    title: string;
+    size: { width: number; height: number };
+    onOpen: (window: Window) => void;
+    onClose: (window: Window) => void;
 }
 
-export class PopupComponent extends React.Component<IPopupComponentProps, { isComponentMounted: boolean, blockedByBrowser: boolean }> {
-
+export class PopupComponent extends React.Component<IPopupComponentProps, { isComponentMounted: boolean; blockedByBrowser: boolean }> {
     private _container: HTMLDivElement | null;
     private _window: Window | null;
+    private _curveEditorHost: HTMLDivElement;
 
     constructor(props: IPopupComponentProps) {
         super(props);
 
-        this._container = document.createElement('div')
+        this._container = document.createElement("div");
         this._container.id = this.props.id;
         this._window;
 
         this.state = {
             isComponentMounted: false,
             blockedByBrowser: false,
-        }
+        };
     }
 
     componentDidMount() {
-        this.openPopup()
+        this.openPopup();
         this.setState({ isComponentMounted: true });
     }
 
     openPopup() {
-
         const { title, size, onClose, onOpen } = this.props;
 
         let windowVariableName = `window_${title}`;
 
-        this._container = Inspector._CreatePopup(title, windowVariableName, size.width, size.height);
+        this._container = Inspector._CreatePopup(title, windowVariableName, size.width, size.height, true);
+
+        if (this._container) {
+            this._curveEditorHost = this._container.ownerDocument!.createElement("div");
+
+            this._curveEditorHost.id = "curve-editor-host";
+            this._curveEditorHost.style.width = "auto";
+            this._container.appendChild(this._curveEditorHost);
+        }
 
         this._window = (Inspector as any)[windowVariableName];
 
         if (this._window) {
             onOpen(this._window);
-            this._window.addEventListener('beforeunload', () => this._window && onClose(this._window));
-
+            this._window.addEventListener("beforeunload", () => this._window && onClose(this._window));
         } else {
-
             if (!this._window) {
                 this.setState({ blockedByBrowser: true }, () => {
                     if (this.state.blockedByBrowser) {
-                        alert("You might have blocked popups in your browser");
                         console.warn("Popup window couldn't be created");
                     }
                 });
             }
         }
-
     }
 
     componentWillUnmount() {
         if (this._window) {
-            this._window.close()
+            this._window.close();
         }
     }
 
     render() {
-        if (!this.state.isComponentMounted || this._container === null) return null
-        return ReactDOM.createPortal(this.props.children, this._container);
-
+        if (!this.state.isComponentMounted || this._container === null) {
+            return null;
+        }
+        return ReactDOM.createPortal(this.props.children, this._curveEditorHost);
     }
-
-   
-
-}
+}

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,24 +269,22 @@ export class Inspector {
                         this._EmbedHostWindow.close();
                     }
                 },
-                initialTab: options.initialTab
+                initialTab: options.initialTab,
             });
             ReactDOM.render(embedHostElement, this._EmbedHost);
         }
     }
-    public static _CreatePopup(title: string, windowVariableName: string, width = 300, height = 800) {
+    public static _CreatePopup(title: string, windowVariableName: string, width = 300, height = 800, lateBinding?: boolean) {
         const windowCreationOptionsList = {
             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,13 @@ export class Inspector {
 
         this._CopyStyles(window.document, parentDocument);
 
+        if (lateBinding) {
+            setTimeout(() => {
+                // need this for late bindings
+                this._CopyStyles(window.document, parentDocument);
+            }, 0);
+        }
+
         (this as any)[windowVariableName] = popupWindow;
 
         return parentControl;
@@ -331,7 +354,7 @@ export class Inspector {
             enableClose: true,
             handleResize: true,
             enablePopup: true,
-            ...userOptions
+            ...userOptions,
         };
 
         // Prepare state
@@ -358,8 +381,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 +402,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 +491,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;