Update: 优化在线版下文件的加载与保存

common/modules/mixly-modules/web/file.js

@@ -22,19 +22,76 @@ const { MSG } = Blockly.Msg;
 
 const { File } = Web;
 
+const platform = goog.platform();
+
 File.obj = null;
 
+
+
+File.getFileTypes = (filters) => {
+    let fileTypes = [];
+    if (platform === 'mobile') {
+        fileTypes.push({
+            description: 'Mixly File',
+            accept: {
+                'application/octet-stream': filters
+            }
+        });
+    } else {
+        fileTypes.push({
+            description: 'Mixly File',
+            accept: {
+                'application/xml': filters
+            }
+        });
+    }
+    return fileTypes;
+}
+
 File.open = async () => {
+    if (window.location.protocol === 'https:') {
+        let filters = [];
+        MFile.openFilters.map((data) => {
+            filters.push(`.${data}`);
+        });
+        const fileConfig = {
+            multiple: false,
+            types: File.getFileTypes(filters),
+            excludeAcceptAllOption: true,
+            multiple: false,
+        };
+        try {
+            const [ obj ] = await window.showOpenFilePicker(fileConfig);
+            if (!obj) {
+                return;
+            }
+            File.obj = obj;
+            const extname = path.extname(obj.name);
+            const fileInfo = await File.obj.getFile();
+            if (!fileInfo) {
+                return;
+            }
+            File.parseData(extname, await fileInfo.text());
+            Title.updateTitle(`${obj.name} - ${Title.title}`);
+        } catch (error) {
+            console.log(error);
+        }
+    } else {
         const filters = '.' + MFile.openFilters.join(',.');
         MFile.openFile(filters, 'text', (fileObj) => {
             let { data, filename } = fileObj;
             const extname = path.extname(filename);
             File.parseData(extname, data);
-        Title.updateTitle(filename + ' - ' + Title.title);
+            Title.updateTitle(`${filename} - ${Title.title}`);
         });
+    }
 }
 
 File.parseData = (extname, text) => {
+    const index = extname.indexOf(' ');
+    if (index !== -1) {
+        extname = extname.substring(0, index);
+    }
     if (['.bin', '.hex'].includes(extname)) {
         MFile.loadHex(text);
     } else if (['.mix', '.xml', '.ino', '.py'].includes(extname)) {
@@ -42,7 +99,7 @@ File.parseData = (extname, text) => {
         const editor = mainWorkspace.getEditorsManager().getActive();
         editor.setValue(text, extname);
     } else {
-        layer.msg(Msg.Lang['文件后缀错误'], { time: 1000 });
+        layer.msg(Msg.Lang['file.type.error'], { time: 1000 });
         File.obj = null;
     }
 }
@@ -58,24 +115,40 @@ File.save = async () => {
     const mainWorkspace = Workspace.getMain();
     const editor = mainWorkspace.getEditorsManager().getActive();
     let text = '';
-    const extname = path.extname(File.obj.name);
-    switch (extname) {
-    case '.mix':
-    case '.xml':
+    let extname = path.extname(File.obj.name);
+    const index = extname.indexOf(' ');
+    if (index !== -1) {
+        extname = extname.substring(0, index);
+    }
+    if (['.mix', '.xml'].includes(extname)) {
         text = editor.getValue();
-        break;
-    case '.ino':
-    case '.py':
+    } else if (['.ino', '.py'].includes(extname)) {
         text = editor.getCode();
-        break;
-    default:
+    } else {
         return;
     }
     try {
-        const writer = await File.obj.createWritable();
+        let currentLayero = null;
+        const loadIndex = layer.msg(Msg.Lang['file.saving'], {
+            icon: 16,
+            shade: 0,
+            time: 0,
+            success: function(layero) {
+                currentLayero = layero;
+            }
+        });
+        const writer = await File.obj.createWritable({
+            keepExistingData: true
+        });
         await writer.write(text);
         await writer.close();
-        layer.msg('写入新数据到' + File.obj.name, { time: 1000 });
+        let $content = currentLayero.children('.layui-layer-content');
+        $content.html(`<i class="layui-layer-face layui-icon layui-icon-success"></i>${Msg.Lang['file.saveSucc']}`);
+        currentLayero = null;
+        $content = null;
+        setTimeout(() => {
+            layer.close(loadIndex);
+        }, 500);
     } catch (error) {
         console.log(error);
     }
@@ -84,15 +157,10 @@ File.save = async () => {
 File.saveAs = async () => {
     let filters = [];
     MFile.saveFilters.map((data) => {
-        filters.push('.' + data.extensions[0]);
+        filters.push(`.${data.extensions[0]}`);
     });
     const fileConfig = {
-        types: [{
-            description: 'Mixly File',
-            accept: {
-                'application/xml': filters
-            }
-        }],
+        types: File.getFileTypes(filters),
         suggestedName: 'mixly.mix'
     };
     try {
@@ -102,7 +170,7 @@ File.saveAs = async () => {
         }
         File.obj = obj;
         File.save();
-        Title.updateTitle(obj.name + ' - ' + Title.title);
+        Title.updateTitle(`${obj.name} - ${Title.title}`);
     } catch (error) {
         console.log(error);
     }
@@ -119,14 +187,14 @@ File.new = async () => {
         const code = codeEditor.getValue(),
         workspaceToCode = generator.workspaceToCode(blockEditor) || '';
         if (!blocksList.length && workspaceToCode === code) {
-            layer.msg(Msg.Lang['代码区已清空'], { time: 1000 });
+            layer.msg(Msg.Lang['editor.codeEditorEmpty'], { time: 1000 });
             Title.updateTitle(Title.title);
             File.obj = null;
             return;
         }
     } else {
         if (!blocksList.length) {
-            layer.msg(Msg.Lang['工作区已清空'], { time: 1000 });
+            layer.msg(Msg.Lang['editor.blockEditorEmpty'], { time: 1000 });
             Title.updateTitle(Title.title);
             File.obj = null;
             return;
@@ -141,7 +209,7 @@ File.new = async () => {
             classList.remove('layui-layer-close2');
             classList.add('layui-layer-close1');
         },
-        btn: [MSG['newfile_yes'], MSG['newfile_no']],
+        btn: [Msg.Lang['nav.btn.ok'], Msg.Lang['nav.btn.cancel']],
         btn2: (index, layero) => {
             layer.close(index);
         }
@@ -156,20 +224,4 @@ File.new = async () => {
     });
 }
 
-File.saveCode = () => {
-
-}
-
-File.saveMix = () => {
-
-}
-
-File.saveImg = () => {
-
-}
-
-File.saveHex = () => {
-
-}
-
 });

common/msg/mixly/en.json

@@ -330,7 +330,7 @@
     "editor.loadCode": "Load code",
     "editor.parseMixErrorInfo": "Some graphical modules have not been defined",
     "editor.codeEditorEmpty": "The code area has been cleared",
-    "editor.blockEditorEmpty": "The code area has been cleared",
+    "editor.blockEditorEmpty": "The workspace has been cleared",
     "editor.block": "block",
     "editor.mix": "mix",
     "editor.code": "code",
@@ -349,6 +349,7 @@
     "file.exportAs": "Export library",
     "file.saveFailed": "Save failed",
     "file.saveSucc": "Save successfully",
+    "file.saving": "File is saving...",
     "file.notExist": "File does not exist",
     "toolboxSearcher.search": "Search",
     "toolboxSearcher.empty": "No data",

common/msg/mixly/zh-hans.json

@@ -330,7 +330,7 @@
     "editor.loadCode": "载入代码",
     "editor.parseMixErrorInfo": "一些图形化模块尚未定义",
     "editor.codeEditorEmpty": "代码区已清空",
-    "editor.blockEditorEmpty": "代码区已清空",
+    "editor.blockEditorEmpty": "工作区已清空",
     "editor.block": "模块",
     "editor.mix": "混合",
     "editor.code": "代码",
@@ -349,6 +349,7 @@
     "file.exportAs": "导出库",
     "file.saveFailed": "保存失败",
     "file.saveSucc": "保存成功",
+    "file.saving": "正在保存...",
     "file.notExist": "文件不存在",
     "toolboxSearcher.search": "查找",
     "toolboxSearcher.empty": "无数据",

common/msg/mixly/zh-hant.json

@@ -349,6 +349,7 @@
     "file.exportAs": "匯出庫",
     "file.saveFailed": "儲存失敗",
     "file.saveSucc": "儲存成功",
+    "file.saving": "正在保存...",
     "file.notExist": "檔案不存在",
     "toolboxSearcher.search": "查找",
     "toolboxSearcher.empty": "無資料",