feat(core): 将firmware layer从layui调整为dialog-plus

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

@@ -0,0 +1,94 @@
+goog.loadJs('common', () => {
+
+goog.require('Mixly.Env');
+goog.require('Mixly.Msg');
+goog.require('Mixly.Layer');
+goog.require('Mixly.HTMLTemplate');
+goog.provide('Mixly.LayerFirmware');
+
+const {
+    Env,
+    Msg,
+    Layer,
+    HTMLTemplate
+} = Mixly;
+
+
+class LayerFirmware extends Layer {
+    static {
+        HTMLTemplate.add(
+            'html/dialog/firmware.html',
+            new HTMLTemplate(goog.readFileSync(path.join(Env.templatePath, 'html/dialog/firmware.html')))
+        );
+    }
+
+    #dialog_ = null;
+    #$dialogContent_ = null;
+    #$cancel_ = null;
+    #$burn_ = null;
+    #$select_ = null;
+    #map_ = {};
+
+    constructor(config = {}, shadowType = 'nav') {
+        const $dialogContent_ = $(HTMLTemplate.get('html/dialog/firmware.html').render({
+            cancel: Msg.Lang['nav.btn.cancel'],
+            burn: Msg.Lang['nav.btn.burn']
+        }));
+        config.content = $dialogContent_;
+        super(config, shadowType);
+        this.#$dialogContent_ = $dialogContent_;
+        this.#$cancel_ = $dialogContent_.find('.cancel');
+        this.#$burn_ = $dialogContent_.find('.burn');
+        this.#$select_ = $dialogContent_.find('.type');
+        this.#$select_.select2({
+            data: [],
+            minimumResultsForSearch: Infinity,
+            width: '380px',
+            dropdownCssClass: 'mixly-scrollbar'
+        });
+        this.addEventsType(['burn']);
+        this.#addEventsListener_();
+    }
+
+    #addEventsListener_() {
+        this.#$cancel_.click(() => {
+            this.hide();
+        });
+
+        this.#$burn_.click(() => {
+            this.hide();
+            this.runEvent('burn', this.#map_[this.#$select_.val()]);
+        });
+    }
+
+    setMenu(items) {
+        this.#$select_.empty();
+        for (let item of items) {
+            const newOption = new window.Option(item.text, item.id);
+            this.#$select_.append(newOption);
+        }
+        this.#$select_.trigger('change');
+    }
+
+    setMap(firmwareMap) {
+        this.#map_ = firmwareMap;
+    }
+
+    dispose() {
+        this.#$select_.select2('destroy');
+        this.#$select_.remove();
+        this.#$select_ = null;
+        this.#$cancel_.remove();
+        this.#$cancel_ = null;
+        this.#$burn_.remove();
+        this.#$burn_ = null;
+        this.#$dialogContent_.remove();
+        this.#$dialogContent_ = null;
+        this.#map_ = null;
+        super.dispose();
+    }
+}
+
+Mixly.LayerFirmware = LayerFirmware;
+
+});

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

@@ -25,13 +25,14 @@ class LayerProgress extends Layer {
 
     constructor(config = {}, shadowType = 'nav') {
         const $dialogContent_ = $(HTMLTemplate.get('html/dialog/progress.html').render());
-        config.content = $dialogContent_[0];
+        config.content = $dialogContent_;
         super(config, shadowType);
         this.#$dialogContent_ = $dialogContent_;
     }
 
     dispose() {
         this.#$dialogContent_.remove();
+        this.#$dialogContent_ = null;
         super.dispose();
     }
 }

common/modules/mixly-modules/deps.json

@@ -597,6 +597,18 @@
             "Mixly.LayerExt"
         ]
     },
+    {
+        "path": "/common/layer-firmware.js",
+        "require": [
+            "Mixly.Env",
+            "Mixly.Msg",
+            "Mixly.Layer",
+            "Mixly.HTMLTemplate"
+        ],
+        "provide": [
+            "Mixly.LayerFirmware"
+        ]
+    },
     {
         "path": "/common/layer-progress.js",
         "require": [
@@ -1283,6 +1295,7 @@
             "Mixly.Workspace",
             "Mixly.Debug",
             "Mixly.HTMLTemplate",
+            "Mixly.LayerFirmware",
             "Mixly.Electron.Serial"
         ],
         "provide": [
@@ -1560,6 +1573,7 @@
             "Mixly.Debug",
             "Mixly.HTMLTemplate",
             "Mixly.MString",
+            "Mixly.LayerFirmware",
             "Mixly.Web.Serial",
             "Mixly.Web.Ampy"
         ],

common/modules/mixly-modules/electron/burn-upload.js

@@ -10,6 +10,7 @@ goog.require('Mixly.Msg');
 goog.require('Mixly.Workspace');
 goog.require('Mixly.Debug');
 goog.require('Mixly.HTMLTemplate');
+goog.require('Mixly.LayerFirmware');
 goog.require('Mixly.Electron.Serial');
 goog.provide('Mixly.Electron.BU');
 
@@ -24,7 +25,8 @@ const {
     Workspace,
     Serial,
     Debug,
-    HTMLTemplate
+    HTMLTemplate,
+    LayerFirmware
 } = Mixly;
 
 const { BU } = Electron;
@@ -43,16 +45,26 @@ const iconv_lite = Mixly.require('iconv-lite');
 const os = Mixly.require('node:os');
 
 BU.uploading = false;
-
 BU.burning = false;
-
 BU.shell = null;
-
+BU.firmwareLayer = new LayerFirmware({
-BU.FILMWARE_LAYER = new HTMLTemplate(
+    width: 400,
-    goog.readFileSync(path.join(Env.templatePath, 'html/filmware-layer.html'))
+    title: Msg.Lang['nav.btn.burn'],
-).render({
+    cancelValue: false,
-    cancel: Msg.Lang['nav.btn.cancel'],
+    skin: 'layui-anim layui-anim-scale',
-    burn: Msg.Lang['nav.btn.burn']
+    cancel: false,
+    cancelDisplay: false
+});
+BU.firmwareLayer.bind('burn', (info) => {
+    const { mainStatusBarTabs } = Mixly;
+    const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
+    statusBarTerminal.setValue('');
+    mainStatusBarTabs.changeTo('output');
+    mainStatusBarTabs.show();
+    BU.burning = true;
+    BU.uploading = false;
+    const port = Serial.getSelectedPortName();
+    BU.burnWithPort(port, info);
 });
 
 /**
@@ -613,52 +625,18 @@ BU.burnWithSpecialBin = () => {
     const statusBarTerminal = mainStatusBarTabs.getStatusBarById('output');
     const firmwares = SELECTED_BOARD.burn.special;
     let menu = [];
+    let commandMap = {};
     for (let firmware of firmwares) {
-        if (!firmware?.name && !firmware?.command) return;
+        if (!firmware?.name && !firmware?.command) continue;
         menu.push({
-            id: firmware.command,
+            id: firmware.name,
             text: firmware.name
         });
+        commandMap[firmware.name] = firmware.command;
     }
-    LayerExt.open({
+    BU.firmwareLayer.setMap(commandMap);
-        title: [Msg.Lang['nav.btn.burn'], '36px'],
+    BU.firmwareLayer.setMenu(menu);
-        area: ['400px', '160px'],
+    BU.firmwareLayer.show();
-        max: false,
-        min: false,
-        content: BU.FILMWARE_LAYER,
-        shade: Mixly.LayerExt.SHADE_ALL,
-        resize: false,
-        success: function (layero, index) {
-            const $select = layero.find('select');
-            $select.select2({
-                data: menu,
-                minimumResultsForSearch: Infinity,
-                width: '360px',
-                dropdownCssClass: 'mixly-scrollbar'
-            });
-            layero.find('button').click((event) => {
-                const $target = $(event.currentTarget);
-                const type = $target.attr('data-id');
-                const command = $select.val();
-                layer.close(index, () => {
-                    if (type !== 'burn') {
-                        return;
-                    }
-                    statusBarTerminal.setValue('');
-                    mainStatusBarTabs.changeTo('output');
-                    mainStatusBarTabs.show();
-                    BU.burning = true;
-                    BU.uploading = false;
-                    const port = Serial.getSelectedPortName();
-                    BU.burnWithPort(port, command);
-                });
-            });
-        },
-        beforeEnd: function (layero) {
-            layero.find('select').select2('destroy');
-            layero.find('button').off();
-        }
-    });
 }
 
 /**

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

@@ -19,6 +19,7 @@ goog.require('Mixly.Workspace');
 goog.require('Mixly.Debug');
 goog.require('Mixly.HTMLTemplate');
 goog.require('Mixly.MString');
+goog.require('Mixly.LayerFirmware');
 goog.require('Mixly.Web.Serial');
 goog.require('Mixly.Web.Ampy');
 goog.provide('Mixly.Web.BU');
@@ -34,7 +35,8 @@ const {
     Workspace,
     Debug,
     HTMLTemplate,
-    MString
+    MString,
+    LayerFirmware
 } = Mixly;
 
 const {
@@ -52,12 +54,22 @@ const {
 
 BU.uploading = false;
 BU.burning = false;
-
+BU.firmwareLayer = new LayerFirmware({
-BU.FILMWARE_LAYER = new HTMLTemplate(
+    width: 400,
-    goog.readFileSync(path.join(Env.templatePath, 'html/filmware-layer.html'))
+    title: Msg.Lang['nav.btn.burn'],
-).render({
+    cancelValue: false,
-    cancel: Msg.Lang['nav.btn.cancel'],
+    skin: 'layui-anim layui-anim-scale',
-    burn: Msg.Lang['nav.btn.burn']
+    cancel: false,
+    cancelDisplay: false
+});
+BU.firmwareLayer.bind('burn', (info) => {
+    const boardKey = Boards.getSelectedBoardKey();
+    const { web } = SELECTED_BOARD;
+    if (boardKey.indexOf('micropython:esp32s2') !== -1) {
+        BU.burnWithAdafruitEsptool(info, web.burn.erase);
+    } else {
+        BU.burnWithEsptool(info, web.burn.erase);
+    }
 });
 
 const BAUD = goog.platform() === 'darwin' ? 460800 : 921600;
@@ -863,55 +875,16 @@ BU.burnWithSpecialBin = () => {
     let menu = [];
     let firmwareMap = {};
     for (let firmware of firmwares) {
-        if (!firmware?.name && !firmware?.binFile) return;
+        if (!firmware?.name && !firmware?.binFile) continue;
         menu.push({
             id: firmware.name,
             text: firmware.name
         });
         firmwareMap[firmware.name] = firmware.binFile;
     }
-    const layerNum = LayerExt.open({
+    BU.firmwareLayer.setMap(firmwareMap);
-        title: [Msg.Lang['nav.btn.burn'], '36px'],
+    BU.firmwareLayer.setMenu(menu);
-        area: ['400px', '160px'],
+    BU.firmwareLayer.show();
-        max: false,
-        min: false,
-        content: BU.FILMWARE_LAYER,
-        shade: LayerExt.SHADE_ALL,
-        resize: false,
-        success: function (layero, index) {
-            const $select = layero.find('select');
-            $select.select2({
-                data: menu,
-                minimumResultsForSearch: Infinity,
-                width: '360px',
-                dropdownCssClass: 'mixly-scrollbar'
-            });
-            layero.find('button').click((event) => {
-                const $target = $(event.currentTarget);
-                const type = $target.attr('data-id');
-                const binFile = firmwareMap[$select.val()];
-                layer.close(index, () => {
-                    if (type !== 'burn') {
-                        return;
-                    }
-                    const boardKey = Boards.getSelectedBoardKey();
-                    const { web } = SELECTED_BOARD;
-                    if (boardKey.indexOf('micropython:esp32s2') !== -1) {
-                        BU.burnWithAdafruitEsptool(binFile, web.burn.erase);
-                    } else {
-                        BU.burnWithEsptool(binFile, web.burn.erase);
-                    }
-                });
-            });
-        },
-        beforeEnd: function (layero) {
-            layero.find('select').select2('destroy');
-            layero.find('button').off();
-        },
-        end: function () {
-            $(`#layui-layer-shade${layerNum}`).remove();
-        }
-    });
 }
 
 });

common/templates/html/dialog/firmware.html

@@ -0,0 +1,32 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .select2-container {
+        margin: 10px 10px 20px 10px;
+    }
+
+    div[m-id="{{d.mId}}"] > .layui-btn-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    div[m-id="{{d.mId}}"] > .layui-btn-container > button {
+        font-family: "Lato", "Noto Sans SC";
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <select class="type"></select>
+    <div class="layui-btn-container">
+        <button type="button" class="cancel layui-btn layui-btn-sm self-adaption-btn">{{d.cancel}}</button>
+        <button type="button" class="burn layui-btn layui-btn-sm self-adaption-btn">{{d.burn}}</button>
+    </div>
+</div>

common/templates/html/dialog/progress.html

@@ -5,7 +5,7 @@
         display: inline-flex;
         flex-direction: row;
         align-items: center;
-        padding: 5px 0px;
+        padding: 15px 10px 12px 10px;
     }
 
     div[m-id="{{d.mId}}"] > progress {

common/templates/html/filmware-layer.html

@@ -1,19 +0,0 @@
-<style>
-    div[m-id="{{d.mId}}"] > .select2-container {
-        margin: 20px;
-    }
-
-    div[m-id="{{d.mId}}"] > .layui-btn-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
-<div m-id="{{d.mId}}" class="page-item">
-    <select class="type"></select>
-    <div class="layui-btn-container">
-        <button type="button" data-id="cancel" class="layui-btn layui-btn-sm self-adaption-btn">{{d.cancel}}</button>
-        <button type="button" data-id="burn" class="layui-btn layui-btn-sm self-adaption-btn">{{d.burn}}</button>
-    </div>
-</div>