feat(core): 将一些progress layer从layui调整为dialog-plus

common/modules/mixly-modules/common/layer-progress.js

@@ -0,0 +1,41 @@
+goog.loadJs('common', () => {
+
+goog.require('Mixly.Env');
+goog.require('Mixly.Layer');
+goog.require('Mixly.HTMLTemplate');
+goog.provide('Mixly.LayerProgress');
+
+const {
+    Env,
+    Layer,
+    HTMLTemplate
+} = Mixly;
+
+
+class LayerProgress extends Layer {
+    static {
+        HTMLTemplate.add(
+            'html/dialog/progress.html',
+            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/dialog/progress.html')))
+        );
+    }
+
+    #dialog_ = null;
+    #$dialogContent_ = null;
+
+    constructor(config = {}, shadowType = 'nav') {
+        const $dialogContent_ = $(HTMLTemplate.get('html/dialog/progress.html').render());
+        config.content = $dialogContent_[0];
+        super(config, shadowType);
+        this.#$dialogContent_ = $dialogContent_;
+    }
+
+    dispose() {
+        this.#$dialogContent_.remove();
+        super.dispose();
+    }
+}
+
+Mixly.LayerProgress = LayerProgress;
+
+});

common/modules/mixly-modules/common/layer.js

@@ -1,22 +1,91 @@
 goog.loadJs('common', () => {
 
+goog.require('dialog');
+goog.require('Mixly.Env');
 goog.require('Mixly.Registry');
+goog.require('Mixly.Component');
+goog.require('Mixly.HTMLTemplate');
 goog.provide('Mixly.Layer');
 
-const { Registry } = Mixly;
+const {
+    Env,
+    Registry,
+    Component,
+    HTMLTemplate
+} = Mixly;
 
-class Layer {
+
+class Layer extends Component {
     static {
         this.templates = new Registry();
 
         this.register = function (key, value) {
-
+            this.templates.register(key, value);
-        }
         }
 
-    constructor() {
+        this.register('all', (new HTMLTemplate(
+            goog.readFileSync(path.join(Env.templatePath, 'html/dialog/shadow-all.html'))
+        )).render());
+        this.register('nav', (new HTMLTemplate(
+            goog.readFileSync(path.join(Env.templatePath, 'html/dialog/shadow-nav.html'))
+        )).render());
+    }
 
+    #dialog_ = null;
+
+    constructor(config = {}, shadowType = 'nav') {
+        super();
+        const shadow = Layer.templates.getItem(shadowType);
+        this.setContent($(shadow));
+        this.#dialog_ = dialog({
+            skin: 'min-dialog tips',
+            padding: 0,
+            ...config
+        });
+    }
+
+    show() {
+        this.mountOn($(window.document.body));
+        this.#dialog_.show();
+    }
+
+    hide() {
+        this.getContent().detach();
+        this.#dialog_.close();
+        this.onUnmounted();
+    }
+
+    title(text) {
+        this.#dialog_.title(text);
+    }
+
+    width(value) {
+        this.#dialog_.width(value);
+    }
+
+    height(value) {
+        this.#dialog_.height(value);
+    }
+
+    reset() {
+        this.#dialog_.reset();
+    }
+
+    focus() {
+        this.#dialog_.focus();
+    }
+
+    blur() {
+        this.#dialog_.blur();
+    }
+
+    dispose() {
+        this.#dialog_.remove();
+        this.#dialog_ = null;
+        super.dispose();
     }
 }
 
+Mixly.Layer = Layer;
+
 });

common/modules/mixly-modules/web-socket/arduino-shell.js

@@ -7,6 +7,7 @@ goog.require('Mixly.Debug');
 goog.require('Mixly.LayerExt');
 goog.require('Mixly.Msg');
 goog.require('Mixly.Workspace');
+goog.require('Mixly.LayerProgress');
 goog.require('Mixly.WebSocket.Serial');
 goog.provide('Mixly.WebSocket.ArduShell');
 
@@ -16,12 +17,14 @@ const {
     LayerExt,
     Msg,
     Workspace,
+    LayerProgress,
     WebSocket
 } = Mixly;
 
-
 const { Serial } = WebSocket;
 
+const { layer } = layui;
+
 
 class WebSocketArduShell {
     static {
@@ -56,8 +59,8 @@ class WebSocketArduShell {
                 const { mainStatusBarTabs } = Mixly;
                 const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
                 try {
-                    data = decodeURIComponent(data.replace(/(_E[0-9A-F]{1}_[0-9A-F]{2}_[0-9A-F]{2})+/gm, '%$1'));
+                    data = unescape(data.replace(/(_E[0-9A-F]{1}_[0-9A-F]{2}_[0-9A-F]{2})+/gm, '%$1'));
-                    data = decodeURIComponent(data.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
+                    data = unescape(data.replace(/\\(u[0-9a-fA-F]{4})/gm, '%$1'));
                 } catch (error) {
                     Debug.error(error);
                 }
@@ -159,15 +162,33 @@ class WebSocketArduShell {
 
     #running_ = false;
     #upload_ = false;
-    #layerNum_ = null;
+    #killing_ = false;
+    #layer_ = null;
 
-    constructor() {}
+    constructor() {
+        this.#layer_ = new LayerProgress({
+            width: 200,
+            cancelValue: Msg.Lang['nav.btn.stop'],
+            skin: 'layui-anim layui-anim-scale',
+            cancel: () => {
+                if (this.#killing_) {
+                    return false;
+                }
+                this.#layer_.title(`${Msg.Lang['shell.aborting']}...`);
+                this.#killing_ = true;
+                this.kill().catch(Debug.error);
+                return false;
+            },
+            cancelDisplay: false
+        });
+    }
 
     async compile(code) {
         return new Promise(async (resolve, reject) => {
             this.#running_ = true;
             this.#upload_ = false;
-            await this.showProgress();
+            this.#killing_ = false;
+            this.showProgress();
             const key = Boards.getSelectedBoardCommandParam();
             const config = { key, code };
             const mixlySocket = WebSocketArduShell.getMixlySocket();
@@ -191,7 +212,8 @@ class WebSocketArduShell {
         return new Promise(async (resolve, reject) => {
             this.#running_ = true;
             this.#upload_ = true;
-            await this.showProgress();
+            this.#killing_ = false;
+            this.showProgress();
             const key = Boards.getSelectedBoardCommandParam();
             const config = { key, code, port };
             const mixlySocket = WebSocketArduShell.getMixlySocket();
@@ -229,33 +251,14 @@ class WebSocketArduShell {
         });
     }
 
-    async showProgress() {
+    showProgress() {
-        return new Promise((resolve, reject) => {
+        const message = this.isCompiling() ? Msg.Lang['shell.compiling'] : Msg.Lang['shell.uploading'];
-            this.#layerNum_ = layer.open({
+        this.#layer_.title(`${message}...`);
-                type: 1,
+        this.#layer_.show();
-                title: `${this.isCompiling ? Msg.Lang['shell.compiling'] : Msg.Lang['shell.uploading']}...`,
-                content: $('#mixly-loader-div'),
-                shade: LayerExt.SHADE_NAV,
-                resize: false,
-                closeBtn: 0,
-                success: () => {
-                    $('#mixly-loader-btn').off('click').click(() => {
-                        $('#mixly-loader-btn').css('display', 'none');
-                        layer.title(`${Msg.Lang['shell.aborting']}...`, this.layerNum);
-                        this.kill().catch(Debug.error);
-                    });
-                    resolve();
-                },
-                end: function () {
-                    $('#mixly-loader-btn').off('click');
-                    $('#mixly-loader-btn').css('display', 'inline-block');
-                }
-            });
-        })
     }
 
     hideProgress() {
-        layer.close(this.#layerNum_);
+        this.#layer_.hide();
     }
 
     isUploading() {

common/modules/mixly-modules/web-socket/burn-upload.js

@@ -10,6 +10,7 @@ goog.require('Mixly.Env');
 goog.require('Mixly.Config');
 goog.require('Mixly.Workspace');
 goog.require('Mixly.MString');
+goog.require('Mixly.LayerProgress');
 goog.require('Mixly.WebSocket.Serial');
 goog.provide('Mixly.WebSocket.BU');
 
@@ -21,6 +22,7 @@ const {
     Env,
     Workspace,
     MString,
+    LayerProgress,
     WebSocket
 } = Mixly;
 
@@ -28,6 +30,8 @@ const { SELECTED_BOARD } = Config;
 
 const { Serial } = WebSocket;
 
+const { layer } = layui;
+
 
 class WebSocketBU {
     static {
@@ -160,15 +164,33 @@ class WebSocketBU {
 
     #running_ = false;
     #upload_ = false;
-    #layerNum_ = null;
+    #killing_ = false;
+    #layer_ = null;
 
-    constructor() {}
+    constructor() {
+        this.#layer_ = new LayerProgress({
+            width: 200,
+            cancelValue: Msg.Lang['nav.btn.stop'],
+            skin: 'layui-anim layui-anim-scale',
+            cancel: () => {
+                if (this.#killing_) {
+                    return false;
+                }
+                this.#layer_.title(`${Msg.Lang['shell.aborting']}...`);
+                this.#killing_ = true;
+                this.kill().catch(Debug.error);
+                return false;
+            },
+            cancelDisplay: false
+        });
+    }
 
     async burn(port) {
         return new Promise(async (resolve, reject) => {
             this.#running_ = true;
             this.#upload_ = false;
-            await this.showProgress();
+            this.#killing_ = false;
+            this.showProgress();
             const config = {
                 boardDirPath: `.${Env.boardDirPath}`,
                 port,
@@ -195,13 +217,13 @@ class WebSocketBU {
         return new Promise(async (resolve, reject) => {
             this.#running_ = true;
             this.#upload_ = true;
-            await this.showProgress();
+            this.#killing_ = false;
-
+            this.showProgress();
             const importsMap = this.getImportModules(code);
             let libraries = {};
             for (let key in importsMap) {
                 const filename = importsMap[key]['__name__'];
-                const data = goog.get(importsMap[key]['__path__']);
+                const data = goog.readFileSync(importsMap[key]['__path__']);
                 libraries[filename] = data;
             }
             const config = {
@@ -250,7 +272,7 @@ class WebSocketBU {
         const libPath = SELECTED_BOARD.upload.libPath;
         for (let i = libPath.length - 1; i >= 0; i--) {
             const dirname = MString.tpl(libPath[i], { indexPath: Env.boardDirPath });
-            const map = goog.getJSON(path.join(dirname, 'map.json'));
+            const map = goog.readJsonSync(path.join(dirname, 'map.json'));
             if (!(map && map instanceof Object)) {
                 continue;
             }
@@ -304,33 +326,14 @@ class WebSocketBU {
         });
     }
 
-    async showProgress() {
+    showProgress() {
-        return new Promise((resolve, reject) => {
+        const message = this.isBurning() ? Msg.Lang['shell.burning'] : Msg.Lang['shell.uploading'];
-            this.#layerNum_ = layer.open({
+        this.#layer_.title(`${message}...`);
-                type: 1,
+        this.#layer_.show();
-                title: `${this.isCompiling ? Msg.Lang['shell.burning'] : Msg.Lang['shell.uploading']}...`,
-                content: $('#mixly-loader-div'),
-                shade: LayerExt.SHADE_NAV,
-                resize: false,
-                closeBtn: 0,
-                success: () => {
-                    $('#mixly-loader-btn').off('click').click(() => {
-                        $('#mixly-loader-btn').css('display', 'none');
-                        layer.title(`${Msg.Lang['shell.aborting']}...`, this.layerNum);
-                        this.kill().catch(Debug.error);
-                    });
-                    resolve();
-                },
-                end: function () {
-                    $('#mixly-loader-btn').off('click');
-                    $('#mixly-loader-btn').css('display', 'inline-block');
-                }
-            });
-        })
     }
 
     hideProgress() {
-        layer.close(this.#layerNum_);
+        this.#layer_.hide();
     }
 
     isUploading() {

common/templates/html/dialog/progress.html

@@ -0,0 +1,17 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        width: 100%;
+        height: 100%;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 5px 0px;
+    }
+
+    div[m-id="{{d.mId}}"] > progress {
+        width: 100%;
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <progress class="mixly-progress"></progress>
+</div>

common/templates/html/dialog/shadow-all.html

@@ -0,0 +1,12 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        background: transparent;
+        z-index: 100;
+    }
+</style>
+<div m-id="{{d.mId}}"></div>

common/templates/html/dialog/shadow-nav.html

@@ -0,0 +1,12 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        height: var(--nav-height);
+        width: 100%;
+        background: transparent;
+        z-index: 100;
+    }
+</style>
+<div m-id="{{d.mId}}"></div>