加载上传项目

chengyu2333 · chengyu2333 · commit 6c4a1b3e62ae · 2020-11-01T19:29:37.000+08:00
diff --git a/src/editor/ScratchJr.js b/src/editor/ScratchJr.js
@@ -47,6 +47,7 @@ let layerAboveBottom = 4;
 let dragginLayer = 7000;
 
 let currentProject = undefined; //项目ID
+let filepath = undefined;
 let editmode;
 
 let isDebugging = false;
@@ -128,6 +129,14 @@ export default class ScratchJr {
         return currentProject;
     }
 
+    static set currentProject(v){
+        currentProject = v;
+    }
+
+    static get filepath(){
+        return filepath;
+    }
+
     static get editmode () {
         return editmode;
     }
@@ -190,6 +199,9 @@ export default class ScratchJr {
         Project.loadIcon.src = 'assets/loading.png';
         ScratchJr.log('blocks init', ScratchJr.getTime(), 'sec', BlockSpecs.loadCount);
         currentProject = urlvars.pmd5;
+        if("filepath" in urlvars){
+            filepath = urlvars.filepath
+        }
         editmode = urlvars.mode;
         libInit();
         Project.init();
@@ -203,7 +215,7 @@ export default class ScratchJr {
         runtime = new Runtime();
         Undo.init();
         ScratchJr.editorEvents();
-        Project.load(currentProject);
+        Project.load();
         Events.init();
         if (window.Settings.autoSaveInterval > 0) {
             autoSaveSetInterval = window.setInterval(function () {
@@ -214,6 +226,27 @@ export default class ScratchJr {
                 }
             }, window.Settings.autoSaveInterval);
         }
+
+        window.scratchjr = {}
+        window.scratchjr.projectName = IO.zipFileName
+        //获取sjr项目
+        window.scratchjr.getProjectSjr = function(cb){
+            let md5 = ScratchJr.currentProject + ""
+            Project.prepareToSave(md5, function () {
+                IO.zipProject(md5, function (contents) {
+                    ScratchJr.onHold = false;
+                    cb(contents, IO.zipFileName)
+                });
+            });
+        }
+        //载入网络sjr项目
+        window.scratchjr.loadProjectSjr = function(url){
+            Project.downloadProject(url, (md5)=>{
+                // window.location.href = 'editor.html?pmd5=' + md5 + '&mode=edit';
+                ScratchJr.currentProject = md5
+                IO.getObject(md5+"", Project.dataRecieved);
+            });
+        }
     }
 
     // Event handler for when a story is started
@@ -406,7 +439,7 @@ export default class ScratchJr {
             }
         }
 
-        if (!currentProject) {
+        if (!currentProject && !filepath) {
             return 'home.html?place=home';
         }
 
diff --git a/src/editor/ui/Project.js b/src/editor/ui/Project.js
@@ -83,7 +83,16 @@ export default class Project {
         ScratchJr.log('all UI assets recieved - procced to call server', ScratchJr.getTime(), 'sec');
         Project.setProgress(20);
         UI.layout();
-        IO.getObject(ScratchJr.currentProject, Project.dataRecieved);
+        if(ScratchJr.filepath){
+            Project.downloadProject(ScratchJr.filepath, (md5)=>{
+                // window.location.href = 'editor.html?pmd5=' + md5 + '&mode=edit';
+                ScratchJr.currentProject = md5
+                history.replaceState(null,document.title,location.href.split("?")[0] + '?pmd5=' + md5 + '&mode=edit');
+                IO.getObject(md5+"", Project.dataRecieved);
+            });
+        }else{
+            IO.getObject(ScratchJr.currentProject, Project.dataRecieved);
+        }
     }
 
     static dataRecieved (str) {
@@ -323,6 +332,30 @@ export default class Project {
     // load project data
     //////////////////////////////////////////////////
 
+    static downloadProject(filepath, cb){
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", filepath);
+        xhr.responseType = "arraybuffer";
+        xhr.onload = function(){
+            if(xhr.readyState == 4 && xhr.status == 200){
+                var req = xhr.response;
+                console.log("download finished");
+                IO.loadProjectFromSjr(req, (md5)=>{
+                    cb(md5)
+                })
+            } else if(xhr.readyState == 4 && xhr.status == 404){
+                cb(null);
+            };
+        }
+        xhr.upload.onprogress = function(evt){ 
+            var loaded = evt.loaded; 
+            var tot = evt.total; 
+            var per = Math.floor(100*loaded/tot); 
+            console.log("download progress:" + per);
+        } 
+        xhr.send()
+    }
+
     static recreate (data) {
         ScratchJr.log('Project data structures start loading', ScratchJr.getTime(), 'sec');
         mediaCount = 0;
diff --git a/src/editor/ui/UI.js b/src/editor/ui/UI.js
@@ -196,26 +196,33 @@ export default class UI {
             });
 
             onTouchStartBind(saveCloudButton,function (e) {
-                alert("未对接API")
-                return;
                 UI.handleTextFieldSave(true);
-
-                // Save any changes made to the project
                 ScratchJr.onHold = true; // Freeze the editing UI
                 ScratchJr.stopStripsFromTop(e);
-
                 Project.prepareToSave(ScratchJr.currentProject, function () {
-                    // Alert.close();
-                    // Package the project as a .sjr file
                     IO.zipProject(ScratchJr.currentProject, function (contents) {
-                        
-                        ScratchJr.onHold = false; // Unfreeze the editing UI
-                        // var emailSubject = Localization.localize('SHARING_EMAIL_SUBJECT', {
-                        //     PROJECT_NAME: IO.shareName
-                        // });
-                        // OS.sendSjrToShareDialog(IO.zipFileName, emailSubject, Localization.localize('SHARING_EMAIL_TEXT'),
-                        //     shareType, contents);
-
+                        var form = new FormData();
+                        contents.name = IO.zipFileName + ".sjr";
+                        form.append("file", contents);
+                        form.append("biz", "sjr")
+                        // XMLHttpRequest 对象
+                        var xhr = new XMLHttpRequest();
+                        xhr.open("POST", "/api/sys/common/upload", true);
+                        xhr.onload = function () {
+                            if(xhr.readyState == 4 && xhr.status == 200){
+                                var req = xhr.responseText;
+                            } else if(xhr.readyState == 4 && xhr.status == 404){
+                                return;
+                            };
+                        };
+                        xhr.upload.onprogress = function(evt){ 
+                            var loaded = evt.loaded; 
+                            var tot = evt.total; 
+                            var per = Math.floor(100*loaded/tot); 
+                            console.log("upload progress:" + per);
+                        } 
+                        xhr.send(form)
+                        ScratchJr.onHold = false;
                         shareLoadingGif.style.visibility = 'hidden';
                     });
                 });
@@ -323,7 +330,6 @@ export default class UI {
 
                 // Package the project as a .sjr file
                 IO.zipProject(ScratchJr.currentProject, function (contents) {
-                    console.log("save file")
                     FileSaver.saveAs(contents, IO.zipFileName) 
                     ScratchJr.onHold = false; // Unfreeze the editing UI
                     // var emailSubject = Localization.localize('SHARING_EMAIL_SUBJECT', {
diff --git a/src/lobby/Home.js b/src/lobby/Home.js
@@ -41,6 +41,11 @@ export default class Home {
     static openProjectThumbnail (parent) {
         var tb = newHTML('div', 'projectthumb', parent);
         newHTML('div', 'aproject open', tb);
+        var fileinput = newHTML('input', "fileinput", tb);
+        fileinput.setAttribute("type", "file")
+        fileinput.setAttribute("id", "fileinput");
+        fileinput.setAttribute("accept", ".sjr")
+        fileinput.setAttribute("style",'visibility:hidden');
         tb.id = 'openproject';
     }
 
@@ -171,7 +176,21 @@ export default class Home {
     }
 
     static openProject(){
-        alert("暂未实现")
+        document.getElementById('fileinput').addEventListener('change', e => {
+            const reader = new FileReader();
+            const thisFileInput = e.target;
+            reader.onload = () => {
+                console.log(reader);
+                IO.loadProjectFromSjr(reader.result, (md5)=>{
+                    console.log("load project:" + md5);
+                    OS.setfile('homescroll.sjr', gn('wrapc').scrollTop, function () {
+                        window.location.href = 'editor.html?pmd5=' + md5 + '&mode=edit';
+                    });
+                })
+            };
+            reader.readAsArrayBuffer(thisFileInput.files[0]);
+        });
+        document.getElementById('fileinput').click();
     }
 
     static createNewProject () {
@@ -198,7 +217,7 @@ export default class Home {
         var pn = [];
         var div = gn('scrollarea');
         for (var i = 0; i < div.childElementCount; i++) {
-            if (div.childNodes[i].id == 'newproject') {
+            if (div.childNodes[i].id == 'newproject' || div.childNodes[i].id == 'openproject') {
                 continue;
             }
             pn.push(div.childNodes[i].childNodes[1].childNodes[0].textContent);
@@ -263,7 +282,7 @@ export default class Home {
             div.removeChild(div.childNodes[0]);
         }
         Home.emptyProjectThumbnail(div);
-        //Home.openProjectThumbnail(div);
+        Home.openProjectThumbnail(div);
         for (var i = 0; i < data.length; i++) {
             Home.addProjectLink(div, data[i]);
         }
diff --git a/src/tablet/IO.js b/src/tablet/IO.js
@@ -524,16 +524,18 @@ export default class IO {
     }
 
     // Receive a base64-encoded zip from iOS (upon open a project)
-    static loadProjectFromSjr (b64data) {
+    static loadProjectFromSjr (b64data, callback) {
         // Together, these two provide a "progress" indication
         // that lets us know when to refresh the lobby (when sE/sA = 1)
         var saveExpected = 0; // How many assets we expect to save - updated as we process the zip
         var saveActual = 0; // How many assets actually saved - updated as we make IO saves
+        var projectMd5 = null;
 
-        var receivedZip = JSZip();
-        receivedZip.load(b64data, {
-            'base64': true
-        });
+        var receivedZip = JSZip(b64data);
+        // var receivedZip = JSZip();
+        // receivedZip.load(b64data, {
+        //     'base64': true
+        // });
 
         // To store character MD5 -> character name map
         // The character name is stored in the project JSON; when we load
@@ -559,7 +561,9 @@ export default class IO {
 
                 IO.uniqueProjectName(jsonData, function (jsonData) {
                     jsonData.isgift = '1'; // Project will display with a bow and ribbon
-                    IO.createProject(jsonData, function () {});
+                    IO.createProject(jsonData, function (md5) {
+                        projectMd5 = md5
+                    });
                 });
 
                 // Build map of character filename -> character name
@@ -714,6 +718,13 @@ export default class IO {
             if (gn('hometab') !== null) { // Check if we're on the lobby page
                 if (saveActual == saveExpected) {
                     Lobby.setPage('home');
+                        callback(projectMd5)
+                } else { // Waiting for assets to be saved
+                    setTimeout(refreshLobby, 100);
+                }
+            }else{
+                if (saveActual == saveExpected) {
+                    callback(projectMd5)
                 } else { // Waiting for assets to be saved
                     setTimeout(refreshLobby, 100);
                 }
diff --git a/static/assets/lobby/back.png b/static/assets/lobby/back.png
diff --git a/static/assets/lobby/cef_debug.log b/static/assets/lobby/cef_debug.log
diff --git a/static/css/lobby.css b/static/css/lobby.css
@@ -62,14 +62,14 @@ div.frame {
 }
 
 #topbar ul.topbar-nav li.logo {
-    width: ${css_vh(32)};
+    width: ${css_vh(12)};
 }
 
 #topbar ul.topbar-nav .logo .logo-icon {
     display: block;
-    width: ${css_vh(28.65)};
+    width: ${css_vh(10)};
     height: ${css_vh(10.03)};
-    background: url('../assets/lobby/scratchJrlogo.svg');
+    background: url('../assets/lobby/back.png');
     background-size: 101%;
     padding: 0;
     margin: auto auto;
diff --git a/webpack.config.js b/webpack.config.js
@@ -10,7 +10,14 @@ module.exports = {
     devServer: {
         contentBase: path.resolve(__dirname, 'static'),
         host: '127.0.0.1',
-        port: process.env.PORT || 8080
+        port: process.env.PORT || 8601,
+        proxy: {
+            '/api': {
+              target: 'http://localhost:8080', 
+              ws: false,
+              changeOrigin: true
+            },
+          }
     },
     output: {
         path: __dirname + '/static',
