Browse Source

hmaburgermenu - step1

David `Deltakosh` Catuhe 5 years ago
parent
commit
f1828b3c6b

+ 3 - 0
Playground/src/components/commandButtonComponent.tsx

@@ -19,6 +19,9 @@ export class CommandButtonComponent extends React.Component<ICommandButtonCompon
         return (
             <div className="command-button" onClick={this.props.onClick} title={this.props.tooltip}>
                 <img src={"imgs/" + this.props.icon + ".svg"} className={this.props.isActive ? "active" : ""}/>
+                <div className="command-label">
+                    {this.props.tooltip}
+                </div>
             </div>
         );
     }

+ 48 - 0
Playground/src/components/hamburgerMenu.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { CommandButtonComponent } from './commandButtonComponent';
+
+require("../scss/hamburgerMenu.scss");
+
+interface IHamburgerMenuComponentProps {
+    globalState: GlobalState;
+}
+
+export class HamburgerMenuComponent extends React.Component<IHamburgerMenuComponentProps> {    
+  
+    public constructor(props: IHamburgerMenuComponentProps) {
+        super(props);
+    }    
+
+    onPlay() {
+        this.props.globalState.onRunRequiredObservable.notifyObservers();
+    }
+
+    onNew() {
+        this.props.globalState.onNewRequiredObservable.notifyObservers();
+    }
+
+    onClear() {        
+        this.props.globalState.onClearRequiredObservable.notifyObservers();
+    }
+
+    onSave() {
+        this.props.globalState.onSaveRequiredObservable.notifyObservers();
+    }
+
+    onDownload() {
+        this.props.globalState.onDownloadRequiredObservable.notifyObservers();
+    }
+
+    public render() {
+        return (
+            <div className={"hambuger-menu " + (this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Run" icon="play" isActive={true} onClick={()=> this.onPlay()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Save" icon="save" isActive={false} onClick={()=> this.onSave()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Download" icon="download" isActive={false} onClick={()=> this.onDownload()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Create new" icon="new" isActive={false} onClick={()=> this.onNew()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Clear code" icon="clear" isActive={false} onClick={()=> this.onClear()}/>
+            </div>
+        );
+    }
+}

+ 13 - 13
Playground/src/components/rendererComponent.tsx

@@ -33,7 +33,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
         });
 
         
-        this._downloadManager = new DownloadManager();
+        this._downloadManager = new DownloadManager(this.props.globalState);
         this.props.globalState.onDownloadRequiredObservable.add(() => {
             if (!this._engine) {
                 return;
@@ -66,8 +66,8 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             });
         }
 
-       // let zipVariables = "var engine = null;\r\nvar scene = null;\r\nvar sceneToRender = null;\r\n";
-       // let defaultEngineZip = "var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); }";
+        let zipVariables = "var engine = null;\r\nvar scene = null;\r\nvar sceneToRender = null;\r\n";
+        let defaultEngineZip = "var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); }";
         let code = this.props.globalState.currentCode;        
         let createEngineFunction = "createDefaultEngine";
         let createSceneFunction = "";
@@ -101,7 +101,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             Utilities.FastEval("runScript = function(scene, canvas) {" + code + "}");
             runScript(this._scene, canvas);            
 
-            //parent.zipTool.ZipCode = zipVariables + defaultEngineZip + "var engine = createDefaultEngine();" + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+            this.props.globalState.zipCode = zipVariables + defaultEngineZip + "var engine = createDefaultEngine();" + ";\r\nvar scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
         } else {
             code += `
 var engine;
@@ -136,23 +136,23 @@ engine = createDefaultEngine();
                 return;
             }
 
-            // let sceneToRenderCode = 'sceneToRender = scene';
+            let sceneToRenderCode = 'sceneToRender = scene';
 
             // if scene returns a promise avoid checks
             if (globalObject.scene.then) {
                 checkCamera = false;
                 checkSceneCount = false;
-                // sceneToRenderCode = 'scene.then(returnedScene => { sceneToRender = returnedScene; });\r\n';
+                sceneToRenderCode = 'scene.then(returnedScene => { sceneToRender = returnedScene; });\r\n';
             } 
 
-            // let createEngineZip = (createEngineFunction === "createEngine") ?
-            //     zipVariables :
-            //     zipVariables + defaultEngineZip;
+            let createEngineZip = (createEngineFunction === "createEngine") ?
+                zipVariables :
+                zipVariables + defaultEngineZip;
 
-            // parent.zipTool.zipCode =
-            //     createEngineZip + ";\r\n" +
-            //     code + ";\r\n" +
-            //     sceneToRenderCode;
+                this.props.globalState.zipCode =
+                createEngineZip + ";\r\n" +
+                code + ";\r\n" +
+                sceneToRenderCode;
         }
 
         if (globalObject.scene.then) {

+ 2 - 0
Playground/src/globalState.ts

@@ -20,6 +20,8 @@ export class GlobalState {
     public currentSnippetTags = "";
     public currentSnippetToken = "";
 
+    public zipCode = "";
+
     public onRunRequiredObservable = new Observable<void>();
     public onNewRequiredObservable = new Observable<void>();
     public onClearRequiredObservable = new Observable<void>();

+ 3 - 1
Playground/src/playground.tsx

@@ -9,6 +9,7 @@ import { SaveManager } from './tools/saveManager';
 import { LoadManager } from './tools/loadManager';
 import { WaitRingComponent } from './components/waitRingComponent';
 import { MetadataComponent } from './components/metadataComponent';
+import { HamburgerMenuComponent } from './components/hamburgerMenu';
 
 require("./scss/main.scss");
 const Split = require('split.js').default;
@@ -100,7 +101,8 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
                         <RenderingComponent globalState={this._globalState}/>
                     </div>
                 </div>
-                <FooterComponent globalState={this._globalState}/>
+                <HamburgerMenuComponent globalState={this._globalState}/>
+                <FooterComponent globalState={this._globalState}/>                
                 <WaitRingComponent globalState={this._globalState}/>
                 <MetadataComponent globalState={this._globalState}/>
             </div>   

+ 4 - 0
Playground/src/scss/commandBar.scss

@@ -6,6 +6,10 @@
     .command-button {
         cursor: pointer;
         width: 55px;
+
+        .command-label {
+            display: none;
+        }
         
         img {
             filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);

+ 1 - 1
Playground/src/scss/footer.scss

@@ -1,7 +1,7 @@
 #footer {
     width: 100%;
     height: 100%;
-    grid-column: 1;
+    grid-column: 2;
     grid-row: 3;
     padding: 0;
     margin: 0;

+ 49 - 0
Playground/src/scss/hamburgerMenu.scss

@@ -0,0 +1,49 @@
+.hambuger-menu {
+    grid-row: 1 / 4;
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left:0;
+    top:55px;
+
+    .command-button {
+        cursor: pointer;
+        width: 200px;
+        display: grid;
+        grid-template-columns: 55px 1fr;
+        grid-template-rows: 100%;
+
+        .command-label {
+            color: white;
+            grid-column: 2;
+            grid-row: 1;
+            align-self: center;
+        }
+        
+        img {
+            grid-column: 1;
+            grid-row: 1;
+            filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);
+            &.active {
+                filter: invert(100%);
+            }
+        }
+
+        &:hover {
+            background-color: white;
+            img {
+                filter: invert(17%) !important;
+            }
+            
+            .command-label {
+                color: black;
+            }
+        } 
+        
+        &:active {
+            transform-origin: center;
+            transform: scale(0.95);
+        }
+    }
+}

+ 1 - 1
Playground/src/scss/header.scss

@@ -1,7 +1,7 @@
 #header {
     width: 100%;
     height: 100%;
-    grid-column: 1;
+    grid-column: 2;
     grid-row: 1;
     padding: 0;
     margin: 0;

+ 2 - 2
Playground/src/scss/main.scss

@@ -7,7 +7,7 @@
     font-family: "acumin-pro-condensed";
     font-weight: normal;    
     display: grid;
-    grid-template-columns: 100%;
+    grid-template-columns: auto 1fr;
     grid-template-rows: 55px 1fr 35px;
 }
 
@@ -18,7 +18,7 @@
     margin: 0;
     display: flex;
     grid-row: 2;
-    grid-column: 1;
+    grid-column: 2;
     overflow: hidden;
 
     .split-part {

+ 172 - 43
Playground/src/tools/downloadManager.ts

@@ -1,50 +1,179 @@
 import { Engine } from 'babylonjs/Engines/engine';
+import { GlobalState } from '../globalState';
+import { Nullable } from 'babylonjs/types';
+
+declare var JSZip: any;
+declare var saveAs: any;
 
 export class DownloadManager {
 
+    public constructor(public globalState: GlobalState) {  
+    }
+     
+    private _addContentToZipAsync(zip: typeof JSZip, name: string, url: string, replace: Nullable<string>, buffer = false): Promise<void> {
+        return new Promise((resolve, reject) => {
+            if (url.substring(0, 5) == "data:" || url.substring(0, 5) == "http:" || url.substring(0, 5) == "blob:" || url.substring(0, 6) == "https:") {
+                resolve();
+                return;
+            }
+
+            var xhr = new XMLHttpRequest();
+
+            xhr.open('GET', url, true);
+
+            if (buffer) {
+                xhr.responseType = "arraybuffer";
+            }
+
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        var text;
+                        if (!buffer) {
+                            if (replace) {
+                                var splits = replace.split("\r\n");
+                                for (var index = 0; index < splits.length; index++) {
+                                    splits[index] = "        " + splits[index];
+                                }
+                                replace = splits.join("\r\n");
+
+                                text = xhr.responseText.replace("####INJECT####", replace);
+                            } else {
+                                text = xhr.responseText;
+                            }
+                        }
+
+                        zip.file(name, buffer ? xhr.response : text);
+
+                        resolve();
+                    }
+                }
+            };
+
+            xhr.send(null);
+        });
+    };
+    
+    private _addTexturesToZipAsync(zip: typeof JSZip, index: number, textures: any[], folder: Nullable<string>): Promise<void> {
+               
+        if (index === textures.length || !textures[index].name) {
+            return Promise.resolve();
+        }
+
+        if (textures[index].isRenderTarget || textures[index] instanceof BABYLON.DynamicTexture || textures[index].name.indexOf("data:") !== -1) {
+            return this._addTexturesToZipAsync(zip, index + 1, textures, folder);
+        }
+
+        if (textures[index].isCube) {
+            if (textures[index].name.indexOf("dds") === -1 && textures[index].name.indexOf(".env") === -1) {
+                if (textures[index]._extensions) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index].name + textures[index]._extensions[i] });
+                    }
+                } else if (textures[index]._files) {
+                    for (var i = 0; i < 6; i++) {
+                        textures.push({ name: textures[index]._files[i] });
+                    }
+                }
+            }
+            else {
+                textures.push({ name: textures[index].name });
+            }
+            return this._addTexturesToZipAsync(zip, index + 1, textures, folder);            
+        }
+
+        if (folder == null) {
+            folder = zip.folder("textures");
+        }
+        var url;
+
+        if (textures[index].video) {
+            url = textures[index].video.currentSrc;
+        } else {
+            // url = textures[index].name;
+            url = textures[index].url ? textures[index].url : textures[index].name;
+        }
+
+        var name = textures[index].name.replace("textures/", "");
+        // var name = url.substr(url.lastIndexOf("/") + 1);
+
+        if (url != null) {
+            return this._addContentToZipAsync(folder,
+                name,
+                url,
+                null,
+                true).then(() => {
+                    return this._addTexturesToZipAsync(zip, index + 1, textures, folder);
+                });
+        }
+        else {
+            return this._addTexturesToZipAsync(zip, index + 1, textures, folder);
+        }
+    };
+    
+    private _addImportedFilesToZipAsync(zip: typeof JSZip, index: number, importedFiles: string[], folder: Nullable<string>): Promise<void> {
+        if (index === importedFiles.length) {
+            return Promise.resolve();
+        }
+
+        if (!folder) {
+            folder = zip.folder("scenes");
+        }
+        var url = importedFiles[index];
+
+        var name = url.substr(url.lastIndexOf("/") + 1);
+
+        return this._addContentToZipAsync(folder,
+            name,
+            url,
+            null,
+            true).then(() => {
+                return this._addImportedFilesToZipAsync(zip, index + 1, importedFiles, folder);
+            });
+    };
+
+
     public download(engine: Engine) {
-        // var zip = new JSZip();
-
-        // var scene = engine.scenes[0];
-        // var textures = scene.textures;
-        // var importedFiles = scene.importedMeshesFiles;
-
-        // document.getElementById("statusBar").innerHTML = "Creating archive... Please wait.";
-
-        // var regex = /CreateGroundFromHeightMap\(".+", "(.+)"/g;
-
-        // do {
-        //     let match = regex.exec(this.zipCode);            
-
-        //     if (!match) {
-        //         break;
-        //     }
-
-        //     textures.push({ name: match[1] });
-        // } while(true);
-
-
-        // this.addContentToZip(zip,
-        //     "index.html",
-        //     "/zipContent/index.html",
-        //     this.zipCode,
-        //     false,
-        //     function () {
-        //         this.addTexturesToZip(zip,
-        //             0,
-        //             textures,
-        //             null,
-        //             function () {
-        //                 this.addImportedFilesToZip(zip,
-        //                     0,
-        //                     importedFiles,
-        //                     null,
-        //                     function () {
-        //                         var blob = zip.generate({ type: "blob" });
-        //                         saveAs(blob, "sample.zip");
-        //                         document.getElementById("statusBar").innerHTML = "";
-        //                     }.bind(this));
-        //             }.bind(this));
-        //     }.bind(this));
+        var zip = new JSZip();
+
+        var scene = engine.scenes[0];
+        var textures = scene.textures as any;
+        var importedFiles = scene.importedMeshesFiles as string[];
+
+        let zipCode = this.globalState.zipCode;
+
+        this.globalState.onDisplayWaitRingObservable.notifyObservers(true);
+
+        var regex = /CreateGroundFromHeightMap\(".+", "(.+)"/g;
+
+        do {
+            let match = regex.exec(zipCode);            
+
+            if (!match) {
+                break;
+            }
+
+            textures.push({ name: match[1] });
+        } while(true);
+
+
+        this._addContentToZipAsync(zip,
+            "index.html",
+            "zipContent/index.html",
+            zipCode).then(() => {
+                return this._addTexturesToZipAsync(zip,
+                    0,
+                    textures,
+                    null);
+            }).then(() => {
+                return this._addImportedFilesToZipAsync(zip,
+                    0,
+                    importedFiles,
+                    null);
+            }).then(() => {
+                var blob = zip.generate({ type: "blob" });
+                saveAs(blob, "sample.zip");
+                this.globalState.onDisplayWaitRingObservable.notifyObservers(false);
+            });
     }
 }

+ 0 - 1
Playground/tsconfig.json

@@ -4,7 +4,6 @@
         "jsx": "react",
         "baseUrl": "./src/",
         "rootDir": "./src/",
-        "include": ["custom.d.ts"],
         "paths": {
             "babylonjs-gui/*": [
                 "../../dist/preview release/gui/babylon.gui.module.d.ts"

Playground/old/zipContent/index.html → Playground/zipContent/index.html