Fix issue with localStorage when hosted in node.js

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { GlobalState } from '../../components/globalState';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 
 interface ILineContainerComponentProps {
     globalState?: GlobalState;
@@ -11,46 +12,16 @@ interface ILineContainerComponentProps {
 }
 
 export class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean, isHighlighted: boolean }> {
-    private static _InMemoryStorage: { [key: string]: boolean };
-
     constructor(props: ILineContainerComponentProps) {
         super(props);
 
-        let initialState: boolean;
-
-        try {
-            if (LineContainerComponent._InMemoryStorage && LineContainerComponent._InMemoryStorage[this.props.title] !== undefined) {
-                initialState = LineContainerComponent._InMemoryStorage[this.props.title];
-            } else if (typeof (Storage) !== "undefined" && localStorage.getItem(this.props.title) !== null) {
-                initialState = localStorage.getItem(this.props.title) === "true";
-            } else {
-                initialState = !this.props.closed;
-            }
-        }
-        catch (e) {
-            LineContainerComponent._InMemoryStorage = {};
-            LineContainerComponent._InMemoryStorage[this.props.title] = !this.props.closed
-            initialState = !this.props.closed;
-        }
-
+        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);
         this.state = { isExpanded: initialState, isHighlighted: false };
     }
 
     switchExpandedState(): void {
         const newState = !this.state.isExpanded;
-
-        try {
-            if (LineContainerComponent._InMemoryStorage) {
-                LineContainerComponent._InMemoryStorage[this.props.title] = newState;
-            } else if (typeof (Storage) !== "undefined") {
-                localStorage.setItem(this.props.title, newState ? "true" : "false");
-            }
-        }
-        catch (e) {
-            LineContainerComponent._InMemoryStorage = {};
-            LineContainerComponent._InMemoryStorage[this.props.title] = newState;
-        }
-
+        DataStorage.WriteBoolean(this.props.title, newState);
         this.setState({ isExpanded: newState });
     }
 
@@ -71,7 +42,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
             }, 5000);
         } else {
             this.setState({isExpanded: false});
-        }        
+        }
     }
 
     renderHeader() {

inspector/src/components/globalState.ts

@@ -9,7 +9,7 @@ import { Light } from "babylonjs/Lights/light";
 import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { ReplayRecorder } from './replayRecorder';
-import { Tools } from '../tools';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 
 export class GlobalState {
     public onSelectionChangedObservable: Observable<any>;
@@ -36,7 +36,7 @@ export class GlobalState {
 
     public get onlyUseEulers(): boolean {
         if (this._onlyUseEulers === null) {
-            this._onlyUseEulers = Tools.ReadLocalBooleanSettings("settings_onlyUseEulers", true);
+            this._onlyUseEulers = DataStorage.ReadBoolean("settings_onlyUseEulers", true);
         }
 
         return this._onlyUseEulers!;
@@ -45,14 +45,14 @@ export class GlobalState {
     public set onlyUseEulers(value: boolean) {
         this._onlyUseEulers = value;
 
-        Tools.StoreLocalBooleanSettings("settings_onlyUseEulers", value);
+        DataStorage.WriteBoolean("settings_onlyUseEulers", value);
     }
 
     private _ignoreBackfacesForPicking: Nullable<boolean> = null;
 
     public get ignoreBackfacesForPicking(): boolean {
         if (this._ignoreBackfacesForPicking === null) {
-            this._ignoreBackfacesForPicking = Tools.ReadLocalBooleanSettings("settings_ignoreBackfacesForPicking", false);
+            this._ignoreBackfacesForPicking = DataStorage.ReadBoolean("settings_ignoreBackfacesForPicking", false);
         }
 
         return this._ignoreBackfacesForPicking!;
@@ -61,7 +61,7 @@ export class GlobalState {
     public set ignoreBackfacesForPicking(value: boolean) {
         this._ignoreBackfacesForPicking = value;
 
-        Tools.StoreLocalBooleanSettings("settings_ignoreBackfacesForPicking", value);
+        DataStorage.WriteBoolean("settings_ignoreBackfacesForPicking", value);
     }
 
     public init(propertyChangedObservable: Observable<PropertyChangedEvent>) {

inspector/src/tools.ts

@@ -1,18 +1,4 @@
 export class Tools {
-    public static StoreLocalBooleanSettings(key: string, value: boolean) {
-        if (typeof (Storage) !== "undefined") {
-            localStorage.setItem(key, value ? "true" : "false");
-        }
-    }
-
-    public static ReadLocalBooleanSettings(key: string, defaultValue: boolean): boolean {
-        if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
-            return localStorage.getItem(key) === "true";
-        } else {
-            return defaultValue;
-        }
-    }
-
     public static LookForItem(item: any, selectedEntity: any): boolean {
         if (item === selectedEntity) {
             return true;

nodeEditor/src/components/preview/previewAreaComponent.tsx

@@ -1,7 +1,7 @@
 
 import * as React from "react";
 import { GlobalState } from '../../globalState';
-import { DataStorage } from '../../dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Observer } from 'babylonjs/Misc/observable';
 import { Nullable } from 'babylonjs/types';
 
@@ -32,14 +32,14 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
 
     changeBackFaceCulling(value: boolean) {        
         this.props.globalState.backFaceCulling = value;
-        DataStorage.StoreBoolean("BackFaceCulling", value);
+        DataStorage.WriteBoolean("BackFaceCulling", value);
         this.props.globalState.onBackFaceCullingChanged.notifyObservers();
         this.forceUpdate();
     }
 
     changeDepthPrePass(value: boolean) {        
         this.props.globalState.depthPrePass = value;
-        DataStorage.StoreBoolean("DepthPrePass", value);
+        DataStorage.WriteBoolean("DepthPrePass", value);
         this.props.globalState.onDepthPrePassChanged.notifyObservers();
         this.forceUpdate();
     }    
@@ -70,7 +70,7 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                         title="Turn on/off hemispheric light"  
                         onClick={() => {
                             this.props.globalState.hemisphericLight = !this.props.globalState.hemisphericLight;                            
-                            DataStorage.StoreBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
+                            DataStorage.WriteBoolean("HemisphericLight", this.props.globalState.hemisphericLight);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();
                         }} className={"button hemispheric-light" + (this.props.globalState.hemisphericLight ? " selected" : "")}>
@@ -80,7 +80,7 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                         title="Turn on/off direction light #1"  
                         onClick={() => {
                             this.props.globalState.directionalLight1 = !this.props.globalState.directionalLight1;                       
-                            DataStorage.StoreBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
+                            DataStorage.WriteBoolean("DirectionalLight1", this.props.globalState.directionalLight1);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();
                         }} className={"button direction-light-1" + (this.props.globalState.directionalLight1 ? " selected" : "")}>
@@ -91,7 +91,7 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
                         title="Turn on/off direction light #0"  
                         onClick={() => {
                             this.props.globalState.directionalLight0 = !this.props.globalState.directionalLight0;                       
-                            DataStorage.StoreBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
+                            DataStorage.WriteBoolean("DirectionalLight0", this.props.globalState.directionalLight0);
                             this.props.globalState.onLightUpdated.notifyObservers();
                             this.forceUpdate();
                         }} className={"button direction-light-0" + (this.props.globalState.directionalLight0 ? " selected" : "")}>

nodeEditor/src/components/preview/previewMeshControlComponent.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { GlobalState } from '../../globalState';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { PreviewMeshType } from './previewMeshType';
-import { DataStorage } from '../../dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { OptionsLineComponent } from '../../sharedComponents/optionsLineComponent';
 import * as ReactDOM from 'react-dom';
 
@@ -33,7 +33,7 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
         this.props.globalState.previewMeshType = newOne;
         this.props.globalState.onPreviewCommandActivated.notifyObservers();
 
-        DataStorage.StoreNumber("PreviewMeshType", newOne);
+        DataStorage.WriteNumber("PreviewMeshType", newOne);
 
         this.forceUpdate();
     }
@@ -64,9 +64,9 @@ export class PreviewMeshControlComponent extends React.Component<IPreviewMeshCon
     changeBackground(value: string) {
         const newColor = Color3.FromHexString(value);
 
-        DataStorage.StoreNumber("BackgroundColorR", newColor.r);
-        DataStorage.StoreNumber("BackgroundColorG", newColor.g);
-        DataStorage.StoreNumber("BackgroundColorB", newColor.b);
+        DataStorage.WriteNumber("BackgroundColorR", newColor.r);
+        DataStorage.WriteNumber("BackgroundColorG", newColor.g);
+        DataStorage.WriteNumber("BackgroundColorB", newColor.b);
 
         const newBackgroundColor = Color4.FromColor3(newColor, 1.0);
         this.props.globalState.backgroundColor = newBackgroundColor;

nodeEditor/src/components/propertyTab/propertyTabComponent.tsx

@@ -9,7 +9,7 @@ import { FileButtonLineComponent } from '../../sharedComponents/fileButtonLineCo
 import { Tools } from 'babylonjs/Misc/tools';
 import { SerializationTools } from '../../serializationTools';
 import { CheckBoxLineComponent } from '../../sharedComponents/checkBoxLineComponent';
-import { DataStorage } from '../../dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { GraphNode } from '../../diagram/graphNode';
 import { SliderLineComponent } from '../../sharedComponents/sliderLineComponent';
 import { GraphFrame } from '../../diagram/graphFrame';
@@ -202,14 +202,14 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         <CheckBoxLineComponent label="Embed textures when saving" 
                             isSelected={() => DataStorage.ReadBoolean("EmbedTextures", true)}
                             onSelect={(value: boolean) => {
-                                DataStorage.StoreBoolean("EmbedTextures", value);
+                                DataStorage.WriteBoolean("EmbedTextures", value);
                             }}
                         />
                         <SliderLineComponent label="Grid size" minimum={0} maximum={100} step={5} 
                             decimalCount={0} 
                             directValue={gridSize}
                             onChange={value => {
-                                DataStorage.StoreNumber("GridSize", value);                                
+                                DataStorage.WriteNumber("GridSize", value);                                
                                 this.props.globalState.onGridSizeChanged.notifyObservers();
                                 this.forceUpdate();
                             }}
@@ -217,7 +217,7 @@ export class PropertyTabComponent extends React.Component<IPropertyTabComponentP
                         <CheckBoxLineComponent label="Show grid" 
                             isSelected={() => DataStorage.ReadBoolean("ShowGrid", true)}
                             onSelect={(value: boolean) => {
-                                DataStorage.StoreBoolean("ShowGrid", value);                
+                                DataStorage.WriteBoolean("ShowGrid", value);                
                                 this.props.globalState.onGridSizeChanged.notifyObservers();
                             }}
                         />

nodeEditor/src/dataStorage.ts

@@ -1,65 +0,0 @@
-export class DataStorage {
-    private static _InMemoryStorage: { [key: string]: boolean | number };
-
-    public static ReadBoolean(key: string, defaultValue: boolean): boolean {
-        try {
-            if (this._InMemoryStorage && this._InMemoryStorage[key] !== undefined) {
-                return this._InMemoryStorage[key] as boolean;
-            } else if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
-                return localStorage.getItem(key) === "true";
-            } else {
-                return defaultValue;
-            }
-        }
-        catch (e) {
-            this._InMemoryStorage = {};
-            this._InMemoryStorage[key] = defaultValue;
-            return defaultValue;
-        }
-    }
-
-    public static StoreBoolean(key: string, value: boolean) {
-        try {
-            if (this._InMemoryStorage) {
-                this._InMemoryStorage[key] = value;
-            } else if (typeof (Storage) !== "undefined") {
-                localStorage.setItem(key, value ? "true" : "false");
-            }
-        }
-        catch (e) {
-            this._InMemoryStorage = {};
-            this._InMemoryStorage[key] = value;
-        }
-    }
-
-    public static ReadNumber(key: string, defaultValue: number): number {
-        try {
-            if (this._InMemoryStorage && this._InMemoryStorage[key] !== undefined) {
-                return this._InMemoryStorage[key] as number;
-            } else if (typeof (Storage) !== "undefined" && localStorage.getItem(key) !== null) {
-                return parseFloat(localStorage.getItem(key)!);
-            } else {
-                return defaultValue;
-            }
-        }
-        catch (e) {
-            this._InMemoryStorage = {};
-            this._InMemoryStorage[key] = defaultValue;
-            return defaultValue;
-        }
-    }
-
-    public static StoreNumber(key: string, value: number) {
-        try {
-            if (this._InMemoryStorage) {
-                this._InMemoryStorage[key] = value;
-            } else if (typeof (Storage) !== "undefined") {
-                localStorage.setItem(key, value.toString());
-            }
-        }
-        catch (e) {
-            this._InMemoryStorage = {};
-            this._InMemoryStorage[key] = value;
-        }
-    }
-}

nodeEditor/src/diagram/graphCanvas.tsx

@@ -11,7 +11,7 @@ import { NodeMaterialConnectionPoint, NodeMaterialConnectionPointDirection, Node
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { FragmentOutputBlock } from 'babylonjs/Materials/Node/Blocks/Fragment/fragmentOutputBlock';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
-import { DataStorage } from '../dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { GraphFrame } from './graphFrame';
 import { IEditorData } from '../nodeLocationInfo';
 

nodeEditor/src/globalState.ts

@@ -4,7 +4,7 @@ import { Observable } from 'babylonjs/Misc/observable';
 import { LogEntry } from './components/log/logComponent';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 import { PreviewMeshType } from './components/preview/previewMeshType';
-import { DataStorage } from './dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { Color4 } from 'babylonjs/Maths/math.color';
 import { GraphNode } from './diagram/graphNode';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
@@ -33,8 +33,8 @@ export class GlobalState {
     onBackFaceCullingChanged = new Observable<void>();
     onDepthPrePassChanged = new Observable<void>();
     onAnimationCommandActivated = new Observable<void>();
-    onCandidateLinkMoved = new Observable<Nullable<Vector2>>();   
-    onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();       
+    onCandidateLinkMoved = new Observable<Nullable<Vector2>>();
+    onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();
     onFrameCreated = new Observable<GraphFrame>();
     onCandidatePortSelected = new Observable<Nullable<NodePort>>();
     onGetNodeFromBlock: (block: NodeMaterialBlock) => GraphNode;

nodeEditor/src/graphEditor.tsx

@@ -6,7 +6,7 @@ import { NodeListComponent } from './components/nodeList/nodeListComponent';
 import { PropertyTabComponent } from './components/propertyTab/propertyTabComponent';
 import { Portal } from './portal';
 import { LogComponent, LogEntry } from './components/log/logComponent';
-import { DataStorage } from './dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { Nullable } from 'babylonjs/types';
@@ -485,11 +485,11 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         if (forLeft) {
             this._leftWidth += deltaX;
             this._leftWidth = Math.max(150, Math.min(400, this._leftWidth));
-            DataStorage.StoreNumber("LeftWidth", this._leftWidth);
+            DataStorage.WriteNumber("LeftWidth", this._leftWidth);
         } else {
             this._rightWidth -= deltaX;
             this._rightWidth = Math.max(250, Math.min(500, this._rightWidth));
-            DataStorage.StoreNumber("RightWidth", this._rightWidth);
+            DataStorage.WriteNumber("RightWidth", this._rightWidth);
             rootElement.ownerDocument!.getElementById("preview")!.style.height = this._rightWidth + "px";
         }
 

nodeEditor/src/serializationTools.ts

@@ -1,7 +1,7 @@
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 import { GlobalState } from './globalState';
 import { Texture } from 'babylonjs/Materials/Textures/texture';
-import { DataStorage } from './dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 import { NodeMaterialBlock } from 'babylonjs/Materials/Node/nodeMaterialBlock';
 
 export class SerializationTools {

nodeEditor/src/sharedComponents/lineContainerComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { DataStorage } from '../dataStorage';
+import { DataStorage } from 'babylonjs/Misc/dataStorage';
 
 
 interface ILineContainerComponentProps {
@@ -22,7 +22,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
     switchExpandedState(): void {
         const newState = !this.state.isExpanded;
 
-        DataStorage.StoreBoolean(this.props.title, newState);
+        DataStorage.WriteBoolean(this.props.title, newState);
 
         this.setState({ isExpanded: newState });
     }

src/Misc/dataStorage.ts

@@ -0,0 +1,58 @@
+interface IStorage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+}
+
+/**
+ * Class for storing data to local storage if available or in-memory storage otherwise
+ */
+export class DataStorage {
+    private static _Storage: IStorage = DataStorage._GetStorage();
+
+    private static _GetStorage(): IStorage {
+        try {
+            localStorage.setItem("test", "");
+            localStorage.removeItem("test");
+            return localStorage;
+        }
+        catch {
+            const inMemoryStorage: { [key: string]: string } = {};
+            return {
+                getItem: (key) => {
+                    const value = inMemoryStorage[key];
+                    return value === undefined ? null : value;
+                },
+                setItem: (key, value) => {
+                    inMemoryStorage[key] = value;
+                }
+            };
+        }
+    }
+
+    public static ReadString(key: string, defaultValue: string): string {
+        const value = this._Storage.getItem(key);
+        return (value !== null ? value : defaultValue);
+    }
+
+    public static WriteString(key: string, value: string): void {
+        this._Storage.setItem(key, value);
+    }
+
+    public static ReadBoolean(key: string, defaultValue: boolean): boolean {
+        const value = this._Storage.getItem(key);
+        return (value !== null ? (value === "true") : defaultValue);
+    }
+
+    public static WriteBoolean(key: string, value: boolean) {
+        this._Storage.setItem(key, value ? "true" : "false");
+    }
+
+    public static ReadNumber(key: string, defaultValue: number): number {
+        const value = this._Storage.getItem(key);
+        return (value !== null ? parseFloat(value) : defaultValue);
+    }
+
+    public static WriteNumber(key: string, value: number) {
+        this._Storage.setItem(key, value.toString());
+    }
+}

src/Misc/index.ts

@@ -47,3 +47,4 @@ export * from "./stringTools";
 export * from "./dataReader";
 export * from "./minMaxReducer";
 export * from "./depthReducer";
+export * from "./dataStorage";