Fix font loading

inspector/src/components/popup.ts

@@ -0,0 +1,79 @@
+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,78 +1,80 @@
 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";
+import { Popup } from "../components/popup";
 
 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 = Popup.CreatePopup(title, windowVariableName, size.width, size.height);
+
+        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);
     }
-
-   
-
-}
+}