store fonts on refresh/rerender

packages/dev/sharedUiComponents/src/lines/optionsLineComponent.tsx

@@ -15,7 +15,7 @@ export interface IOptionsLineComponentProps {
     addInput?: boolean;
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
-    onKeyDown?: (value: number | string) => void
+    onKeyDown?: (value: string) => void
     extractValue?: (target: any) => number | string;
     addVal?: (newVal: {label: string, value: number}) => void;
 
@@ -82,9 +82,9 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
     }
 
     setValue(value: string | number) {
-        console.log(this.state.value)
-        this.setState({ value: value });
         console.log(value)
+        this.setState({ value: value });
+        console.log(this.state.value)
     }
 
 
@@ -137,11 +137,27 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
      updateCustomValue(){
         //console.log("called", valueString)
         //console.log("the value", val)
-       // this.setValue(val)
-        if (this.props.onSelect) {
-            console.log("we selectttttt?" + this.state.value)
-            this.props.onSelect(this.props.options.length - 1);
+
+       this.setValue(this.props.options.length - 1)
+       console.log("I set value", this.state.value)
+       setTimeout(() => {
+        this.setState({addCustom : false})
+        if(this.props.onSelect){
+            console.log("onselect", JSON.parse(String(window.sessionStorage.getItem("fonts"))), JSON.parse(String(window.sessionStorage.getItem("fonts"))).length - 1)
+            this.props.onSelect(JSON.parse(String(window.sessionStorage.getItem("fonts"))).length - 1)
+            this.forceUpdate()
+
         }
+
+      }, 100)
+
+        // if (this.props.onSelect) {
+        //     console.log("selected?" + this.state.value)
+        //     console.log("options", this.props.options)
+
+
+
+        // }
 
      }
 
@@ -170,7 +186,7 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
 
 
                         </datalist> */}
-                        <input type = "text" placeholder = "Enter a custom font here" id = "customFont" onKeyDown = {(event) => { event.keyCode === 13 && this.props.addVal != undefined ? (this.props.addVal({label: (document.getElementById("customFont") as HTMLInputElement).value, value: this.props.options.length}), this.setState({addCustom : false}), this.updateCustomValue()) : null }} />
+                        <input type = "text" placeholder = "Enter a custom font here" id = "customFont" onKeyDown = {(event) => { event.keyCode === 13 && this.props.addVal != undefined ? (this.props.addVal({label: (document.getElementById("customFont") as HTMLInputElement).value, value: this.props.options.length}), this.updateCustomValue()) : null }} />
 
                     </div>
 
@@ -179,18 +195,22 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
 
        }
          else{
+            console.log("hereee")
             return (
                 <div className={"listLine" + (this.props.className ? " " + this.props.className : "")}>
                     {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color="black" className="icon" />}
                     <div className="label" title={this.props.label}>
                         {this.props.label}
                     </div>
                     <div className="options">
-                        <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? ""}>
+                        {console.log("value of select", this.state.value)}
+                        <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value === -1 || null || undefined ? 1 : this.state.value}>
                             {this.props.options.map((option, i) => {
+                                //const select = option.label === "Custom Font" ?  option.selected = false : option.selected = true
                                 return (
+
                                     <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>
-                                        {console.log("here", this.props.options)}
+                                        {/* {console.log("here", this.props.options)} */}
                                         {option.label}
                                     </option>
                                 );

packages/tools/guiEditor/src/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx

@@ -66,12 +66,12 @@ type ControlProperty = keyof Control | "_paddingLeft" | "_paddingRight" | "_padd
 
 export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps, ICommonControlPropertyGridComponentState> {
     private _onPropertyChangedObserver: Nullable<Observer<PropertyChangedEvent>> | undefined;
-
 
     constructor(props: ICommonControlPropertyGridComponentProps) {
         super(props);
-        this.state = {
-            fontFamilyOptions : [
+        this.state = { 
+            fontFamilyOptions: JSON.parse(String(window.sessionStorage.getItem("fonts"))) ? JSON.parse(String(window.sessionStorage.getItem("fonts"))) : 
+            [
                 { label: "Custom Font", value: 0},
                 { label: "Arial", value: 1 },
                 { label: "Verdana", value: 2 },
@@ -83,7 +83,8 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
                 { label: "Courier New", value: 8 },
                 { label: "Brush Script MT", value: 9 },
             ],
-        }
+        };
+
         this.addVal = this.addVal.bind(this);
         const controls = this.props.controls;
         for (const control of controls) {
@@ -115,36 +116,35 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
                 }
             }
         });
-
     }
 
-    componentWillMount(){
+    componentWillMount() {
         let reassignVals = false;
         //await document.fonts.ready;
-        const correctFonts: IInspectableOptions[] = []
-        correctFonts.push({label: "Custom Font", value: 0})
+        const correctFonts: IInspectableOptions[] = [];
+        correctFonts.push({ label: "Custom Font", value: 0 });
         for (const font of this.state.fontFamilyOptions.values()) {
             if (document.fonts.check(`12px "${font.label}"`) && font.label != "Custom Font") {
-                console.log(font)
+                console.log(font);
                 //this.state.fontFamilyOptions.splice(Number(font.value), 1);
-                correctFonts.push(font)
-                reassignVals = true
+                correctFonts.push(font);
+                reassignVals = true;
             }
         }
-        console.log("cf", correctFonts)
-        if(reassignVals){
-            let val = 0
+        console.log("cf", correctFonts);
+        if (reassignVals) {
+            let val = 0;
             for (const font of correctFonts) {
-                font.value = val 
-                val++
+                font.value = val;
+                val++;
             }
-
         }
-        this.setState({    
-            fontFamilyOptions: correctFonts
-         });
-        //need to reassign values if removing an element 
-
+        this.setState({
+            fontFamilyOptions: correctFonts,
+        });
+        //need to reassign values if removing an element
+        window.sessionStorage.setItem("fonts", JSON.stringify(correctFonts))
+
         console.log("in render Available Fonts:", this.state.fontFamilyOptions);
     }
 
@@ -163,7 +163,6 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
                 (control as any)[alignment] = value;
             }
         }
-
     }
 
     private _checkAndUpdateValues(propertyName: string, value: string) {
@@ -211,40 +210,55 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
         }
     }
 
-    public addVal(newVal: { label: string; value: number }) {
-        console.log("newval", newVal);
-
+    public addVal(newVal: { label: string; value: number }){
+        // console.log("newval", newVal);
+        //let ret = true;
+
         (async () => {
             await document.fonts.ready;
-            if (!(this.state.fontFamilyOptions.find((element) => element.label.toLowerCase() === newVal.label.toLowerCase()) === undefined)) {
+            const fonts = JSON.parse(String(window.sessionStorage.getItem("fonts")))
+            if (!(fonts.find((element : IInspectableOptions) => element.label.toLowerCase() === newVal.label.toLowerCase()) === undefined)) {
                 alert("that font is already available");
+                //ret = false;
+                //return false;
             } else {
                 if (!document.fonts.check(`12px "${newVal.label}"`)) {
                     alert("this font is not supported in the browser");
-                }
-                else{
-                    this.state.fontFamilyOptions.push(newVal)
-                    this.setState({    
-                        fontFamilyOptions: [...this.state.fontFamilyOptions]
+                    //ret = false;
+                   // return false;
+                } else {
+                    fonts.push(newVal);
+                    this.setState({
+                        fontFamilyOptions: [...fonts],
                     });
                 }
-
             }
 
+            //this.state.fontFamilyOptions.push(newVal);
+            window.sessionStorage.setItem("fonts", JSON.stringify(this.state.fontFamilyOptions))
 
-                //this.state.fontFamilyOptions.push(newVal);
             console.log("Available Fonts:", [...this.state.fontFamilyOptions.values()]);
+            //return true;
 
         })();
-
+       // return ret;
+       //return false;
     }
-  
+
     componentWillUnmount() {
         if (this._onPropertyChangedObserver) {
             this.props.onPropertyChangedObservable?.remove(this._onPropertyChangedObserver);
         }
     }
 
+    // makeProxyList(){
+    //         //await this.addVal()
+    //         (const result = await this.addVal()
+
+    //         return proxyFontFamily;)
+
+    // }
+
     render() {
         const controls = this.props.controls;
         const firstControl = controls[0];
@@ -330,17 +344,22 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
             { label: "oblique", value: 2 },
         ];
 
-        const proxyFontFamily: (string | undefined)[] = [];
-        for (let i = 0; i < this.state.fontFamilyOptions.length; i++) {
-            proxyFontFamily.push(this.state.fontFamilyOptions.at(i)?.label);
-        }
-
         let horizontalDisabled = false,
             verticalDisabled = false,
             widthUnitsLocked = false,
             heightUnitsLocked = false;
 
         const parent = controls[0].parent;
+
+        // const makeProxyList = async() => {
+        //   await this.addVal()
+
+        // }
+        const proxyFontFamily: (string | undefined)[] = [];
+        const fonts = JSON.parse(String(window.sessionStorage.getItem("fonts")))
+            for (let i = 0; i < fonts.length; i++) {
+                proxyFontFamily.push(fonts.at(i)?.label);
+            }
 
         if (parent?.getClassName() === "StackPanel" || parent?.getClassName() === "VirtualKeyboard") {
             if ((parent as StackPanel).isVertical) {
@@ -652,13 +671,14 @@ export class CommonControlPropertyGridComponent extends React.Component<ICommonC
                                 label=""
                                 target={proxy}
                                 propertyName="fontFamily"
-                                options={this.state.fontFamilyOptions}
+                                options={fonts}
                                 addVal={this.addVal}
                                 onSelect={(newValue) => {
+                                    console.log("proxylist", proxyFontFamily);
                                     proxy.fontFamily = proxyFontFamily[newValue as number];
-                                    console.log(proxyFontFamily)
                                     console.log("proxy", proxy.fontFamily);
                                 }}
+
                                 //why do we need extract value?
                                 extractValue={() => {
                                     switch (proxy.fontFamily) {