Update: Python Online板卡下支持挂载本地文件夹到pyodide

boards/default_src/python_pyodide/others/loader.js

@@ -1,3 +1,3 @@
 import NavExt from './nav-ext';
 
-await NavExt.init();
+NavExt.init();

boards/default_src/python_pyodide/others/nav-ext.js

@@ -1,4 +1,4 @@
-import { app, Nav } from 'mixly';
+import { app, Nav, Debug } from 'mixly';
 import * as Blockly from 'blockly/core';
 import PythonShell from './python-shell';
 
@@ -16,7 +16,7 @@ NavExt.init = async function () {
             return true;
         },
         callback: () => {
-            PythonShell.run();
+            PythonShell.run().catch(Debug.error);
         },
         scopeType: Nav.Scope.LEFT,
         weight: 4
@@ -31,7 +31,7 @@ NavExt.init = async function () {
             return true;
         },
         callback: () => {
-            PythonShell.stop();
+            PythonShell.stop().catch(Debug.error);
         },
         scopeType: Nav.Scope.LEFT,
         weight: 5

boards/default_src/python_pyodide/others/python-shell.js

@@ -3,17 +3,19 @@ import * as path from 'path';
 import $ from 'jquery';
 import {
     Workspace,
-    Debug,
     Env,
     Msg,
     HTMLTemplate,
+    Debug,
     app
 } from 'mixly';
 import { KernelLoader } from '@basthon/kernel-loader';
 import StatusBarImage from './statusbar-image';
+import StatusBarFileSystem from './statusbar-filesystem';
 import LOADER_TEMPLATE from '../templates/html/loader.html';
 
-class PythonShell {
+
+export default class PythonShell {
     static {
         HTMLTemplate.add(
             'html/statusbar/loader.html',
@@ -27,13 +29,16 @@ class PythonShell {
                 loading: Blockly.Msg.PYTHON_PYODIDE_LOADING
             }
         }));
+        this.statusBarImage = null;
+        this.statusBarFileSystem = null;
 
         this.init = async function () {
             const footerBar = app.getFooterBar();
             const $content = footerBar.getContent();
             $content.after(this.$loader);
 
-            StatusBarImage.init();
+            this.statusBarImage = StatusBarImage.init();
+            this.statusBarFileSystem = StatusBarFileSystem.init();
             const projectPath = path.relative(Env.indexDirPath, Env.boardDirPath);
             const loader = new KernelLoader({
                 rootPath: path.join(projectPath, 'deps'),
@@ -58,14 +63,20 @@ class PythonShell {
             this.$loader = null;
         }
 
-        this.run = function () {
+        this.run = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
             const mainWorkspace = Workspace.getMain();
             const editor = mainWorkspace.getEditorsManager().getActive();
             const code = editor.getCode();
             return this.pythonShell.run(code);
         }
 
-        this.stop = function () {
+        this.stop = async function () {
+            if (!this.kernelLoaded) {
+                return;
+            }
             return this.pythonShell.stop();
         }
     }
@@ -130,6 +141,7 @@ class PythonShell {
         this.#kernel_.addEventListener('eval.finished', () => {
             this.#running_ = false;
             this.#statusBarTerminal_.addValue(`\n==${Msg.Lang['shell.finish']}==`);
+            this.syncfs(false).catch(Debug.error);
         });
 
         this.#kernel_.addEventListener('eval.output', (data) => {
@@ -192,34 +204,26 @@ class PythonShell {
         editor.setReadOnly(true);
     }
 
-    run(code) {
-        if (!PythonShell.kernelLoaded) {
-            return;
+    async run(code) {
+        await this.stop();
+        await this.syncfs(true);
+        if (code.indexOf('import turtle') !== -1) {
+            code += '\nturtle.done()\n';
         }
-        this.stop()
-            .then(() => {
-                if (code.indexOf('import turtle') !== -1) {
-                    code += '\nturtle.done()\n';
-                }
-                if (code.indexOf('import matplotlib.pyplot') !== -1) {
-                    code += '\nplt.clf()\n';
-                }
-                this.#statusBarsManager_.changeTo('output');
-                this.#statusBarsManager_.show();
-                this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
-                this.#running_ = true;
-                this.#kernel_.dispatchEvent('eval.request', {
-                    code,
-                    interactive: false,
-                });
-            })
-            .catch(Debug.error);
+        if (code.indexOf('import matplotlib.pyplot') !== -1) {
+            code += '\nplt.clf()\n';
+        }
+        this.#statusBarsManager_.changeTo('output');
+        this.#statusBarsManager_.show();
+        this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
+        this.#running_ = true;
+        this.#kernel_.dispatchEvent('eval.request', {
+            code,
+            interactive: false,
+        });
     }
 
     async stop() {
-        if (!PythonShell.kernelLoaded) {
-            return;
-        }
         if (this.#waittingForInput_) {
             this.#exitInput_();
         }
@@ -239,9 +243,13 @@ class PythonShell {
         }
     }
 
+    async syncfs(populate = false) {
+        return new Promise((resolve) => {
+            window.pyodide.FS.syncfs(populate, resolve);
+        });
+    }
+
     sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
     }
-}
-
-export default PythonShell;
+}

boards/default_src/python_pyodide/others/statusbar-filesystem.js

@@ -0,0 +1,453 @@
+import * as Blockly from 'blockly/core';
+import { layer } from 'layui';
+import * as path from 'path';
+import $ from 'jquery';
+import {
+    PageBase,
+    Msg,
+    HTMLTemplate,
+    DragV,
+    StatusBar,
+    ContextMenu,
+    Debug,
+    StatusBarsManager,
+    Workspace,
+    Web
+} from 'mixly';
+import FILE_SYSTEM_TEMPLATE from '../templates/html/statusbar-filesystem.html';
+import FILE_SYSTEM_OPEN_FS_TEMPLATE from '../templates/html/statusbar-filesystem-open-fs.html';
+import FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE from '../templates/html/statusbar-filesystem-editor-empty.html';
+
+const { FileTree } = Web;
+
+
+export default class StatusBarFileSystem extends PageBase {
+    static {
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem.html',
+            new HTMLTemplate(FILE_SYSTEM_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-open-fs.html',
+            new HTMLTemplate(FILE_SYSTEM_OPEN_FS_TEMPLATE)
+        );
+
+        HTMLTemplate.add(
+            'html/statusbar/statusbar-filesystem-editor-empty.html',
+            new HTMLTemplate(FILE_SYSTEM_EDITOR_EMPTY_TEMPLATE)
+        );
+
+        this.init = function () {
+            StatusBarsManager.typesRegistry.register(['file-system'], StatusBarFileSystem);
+            const mainWorkspace = Workspace.getMain();
+            const statusBarsManager = mainWorkspace.getStatusBarsManager();
+            statusBarsManager.add('file-system', 'file-system', Blockly.Msg.PYTHON_PYODIDE_FILE_SYSTEM);
+            statusBarsManager.changeTo('output');
+            return statusBarsManager.get('file-system');
+        }
+    }
+
+    #$close_ = null;
+    #$fileTree_ = null;
+    #$editor_ = null;
+    #$openFS_ = null;
+    #$editorEmpty_ = null;
+    #editor_ = null;
+    #fileTree_ = null;
+    #drag_ = null;
+    #fileTreeShown_ = false;
+    #editorShown_ = false;
+    #changed_ = false;
+    #nativefs_ = null;
+
+    constructor() {
+        super();
+        const $content = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem.html').render());
+        this.setContent($content);
+        this.#fileTree_ = new FileTree();
+        this.#$fileTree_ = $content.children('.file-tree');
+        this.#$openFS_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-open-fs.html').render({
+            msg: {
+                loadFS: Blockly.Msg.PYTHON_PYODIDE_LOAD_FILE_SYSTEM
+            }
+        }));
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#editor_ = new StatusBar();
+        this.#$editor_ = $content.children('.editor');
+        this.#$editorEmpty_ = $(HTMLTemplate.get('html/statusbar/statusbar-filesystem-editor-empty.html').render());
+        this.#$editor_.append(this.#$editorEmpty_);
+    }
+
+    #addEventsListener_() {
+        this.#drag_ = new DragV(this.getContent()[0], {
+            min: '150px',
+            startSize: '15%',
+            full: [false, false]
+        });
+
+        this.#drag_.bind('sizeChanged', () => {
+            this.resize();
+        });
+
+        this.#$openFS_.children('button').click(() => {
+            this.openFS();
+        });
+
+        this.#fileTree_.bind('beforeSelectLeaf', (selected) => {
+            const filePath = selected[0].id;
+            const mode = this.#editor_.getFileMode(path.extname(filePath));
+            if (!mode) {
+                layer.msg(Msg.Lang['statusbar.ampy.cannotEdit'], { time: 1000 });
+                return false;
+            }
+            this.#editor_.setMode(mode);
+            return true;
+        });
+
+        this.#fileTree_.bind('afterSelectLeaf', async (selected) => {
+            const filePath = selected[0].id;
+            this.#fileTree_.showProgress();
+            const fs = this.#fileTree_.getFS();
+            const result = await fs.readFile(filePath);
+            this.showEditor();
+            this.#editor_.setValue(result);
+            this.#editor_.scrollToTop();
+            this.#editor_.focus();
+            this.setStatus(false);
+            this.#fileTree_.hideProgress();
+        });
+
+        this.#fileTree_.bind('afterCreateNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterDeleteNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRenameNode', (folderPath) => {
+            this.#fileTree_.refreshFolder(folderPath);
+        });
+
+        this.#fileTree_.bind('afterRefreshNode', () => {
+            const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+            if (!selectedNodeId) {
+                this.hideEditor();
+            }
+        });
+
+        const fileTreeContextMenu = this.#fileTree_.getContextMenu();
+        const fileTreeMenu = fileTreeContextMenu.getItem('menu');
+
+        fileTreeMenu.add({
+            weight: 14,
+            type: 'sep5',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 15,
+            type: 'refresh',
+            preconditionFn: ($trigger) => {
+                const selectedNodeId = this.#fileTree_.getSelectedNodeId();
+                let type = $trigger.attr('type');
+                let id = $trigger.attr('id');
+                if (type === 'file' && selectedNodeId !== id) {
+                    return false;
+                }
+                return true;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.refresh'], ''),
+                callback: (_, { $trigger }) => {
+                    let type = $trigger.attr('type');
+                    if (type === 'root') {
+                        this.#fileTree_.openRootFolder();
+                        this.#fileTree_.refreshFolder('/');
+                    } else if (type === 'folder') {
+                        let id = $trigger.attr('id');
+                        this.#fileTree_.openNode(id);
+                        this.#fileTree_.refreshFolder(id);
+                    } else {
+                        const nodes = this.#fileTree_.getSelectedNodes();
+                        this.#fileTree_.runEvent('afterSelectLeaf', nodes);
+                    }
+                }
+            }
+        });
+
+        fileTreeMenu.add({
+            weight: 16,
+            type: 'sep6',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: '---------'
+        });
+
+        fileTreeMenu.add({
+            weight: 17,
+            type: 'exit',
+            preconditionFn: ($trigger) => {
+                let type = $trigger.attr('type');
+                return ['root'].includes(type);
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['statusbar.ampy.exit'], ''),
+                callback: () => {
+                    this.closeFS();
+                }
+            }
+        });
+
+        fileTreeMenu.remove('copy');
+        fileTreeMenu.remove('cut');
+        fileTreeMenu.remove('paste');
+        fileTreeMenu.remove('sep2');
+
+        const editorContextMenu = this.#editor_.getContextMenu();
+        const editorMenu = editorContextMenu.getItem('code');
+
+        editorMenu.empty();
+
+        editorMenu.add({
+            weight: 0,
+            type: 'cut',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.cut'], 'Ctrl+X'),
+                callback: () => this.#editor_.cut()
+            }
+        });
+        editorMenu.add({
+            weight: 1,
+            type: 'copy',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.copy'], 'Ctrl+C'),
+                callback: () => this.#editor_.copy()
+            }
+        });
+        editorMenu.add({
+            weight: 2,
+            type: 'paste',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.paste'], 'Ctrl+V'),
+                callback: () => this.#editor_.paste()
+            }
+        });
+        editorMenu.add({
+            weight: 3,
+            type: 'sep1',
+            data: '---------'
+        });
+        editorMenu.add({
+            weight: 4,
+            type: 'togglecomment',
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['editor.contextMenu.togglecomment'], 'Ctrl+/'),
+                callback: () => this.#editor_.commentLine()
+            }
+        });
+
+        editorMenu.add({
+            weight: 6,
+            type: 'sep2',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: '---------'
+        });
+
+        editorMenu.add({
+            weight: 7,
+            type: 'save',
+            preconditionFn: () => {
+                return this.#changed_;
+            },
+            data: {
+                isHtmlName: true,
+                name: ContextMenu.getItem(Msg.Lang['file.save'], 'Ctrl+S'),
+                callback: async () => {
+                    await this.put();
+                }
+            }
+        });
+
+        const { commands } = this.#editor_.getEditor();
+        commands.addCommand({
+            name: "save",
+            bindKey: "Ctrl-S",
+            exec: async () => {
+                if (!this.#changed_) {
+                    return;
+                }
+                await this.put();
+            }
+        });
+    }
+
+    async put() {
+        this.#fileTree_.showProgress();
+        const id = this.#fileTree_.getSelectedNodeId();
+        const fs = this.#fileTree_.getFS();
+        const [error,] = await fs.writeFile(id, this.#editor_.getValue());
+        this.#fileTree_.hideProgress();
+        if (!error) {
+            this.setStatus(false);
+        }
+    }
+
+    showFileTree() {
+        if (this.#fileTreeShown_) {
+            return;
+        }
+        this.#$openFS_.detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#fileTree_.getContent());
+        this.#fileTreeShown_ = true;
+    }
+
+    hideFileTree() {
+        if (!this.#fileTreeShown_) {
+            return;
+        }
+        this.#fileTree_.getContent().detach();
+        this.#$fileTree_.empty();
+        this.#$fileTree_.append(this.#$openFS_);
+        this.#fileTreeShown_ = false;
+    }
+
+    showEditor() {
+        if (this.#editorShown_) {
+            return;
+        }
+        this.#$editorEmpty_.detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#editor_.getContent());
+        this.#editorShown_ = true;
+    }
+
+    hideEditor() {
+        if (!this.#editorShown_) {
+            return;
+        }
+        this.#editor_.getContent().detach();
+        this.#$editor_.empty();
+        this.#$editor_.append(this.#$editorEmpty_);
+        this.#editorShown_ = false;
+        this.setStatus(false);
+    }
+
+    getDrag() {
+        return this.#drag_;
+    }
+
+    init() {
+        super.init();
+        this.hideCloseBtn();
+        this.#editor_.init();
+        this.#addEventsListener_();
+        const editor = this.#editor_.getEditor();
+        editor.setReadOnly(false);
+        editor.renderer.setShowGutter(true);
+        editor.setOptions({
+            enableBasicAutocompletion: true,
+            enableSnippets: true,
+            enableLiveAutocompletion: true,
+            newLineMode: 'unix'
+        });
+        editor.on('change', () => {
+            this.setStatus(true);
+        });
+    }
+
+    openFS() {
+        const fs = this.#fileTree_.getFS();
+        fs.showDirectoryPicker()
+            .then((directoryHandle) => {
+                if (!directoryHandle.name) {
+                    return;
+                }
+                this.#fileTree_.setFolderPath('/');
+                this.#fileTree_.setRootFolderName(directoryHandle.name);
+                this.#fileTree_.openRootFolder();
+                this.showFileTree();
+                return window.pyodide.mountNativeFS('/' + directoryHandle.name, directoryHandle);
+            })
+            .then((nativefs) => {
+                console.log(nativefs)
+                this.#nativefs_ = nativefs;
+            })
+            .catch(Debug.error);
+    }
+
+    closeFS() {
+        const rootPath = this.#fileTree_.getFolderPath();
+        const lookup = window.pyodide.FS.lookupPath(rootPath, {
+            follow_mount: false
+        });
+        if (window.pyodide.isMountpoint(lookup.node)) {
+            window.pyodide.FS.unmount(rootPath);
+        }
+        this.#fileTree_.deselectAll();
+        this.hideFileTree();
+        this.hideEditor();
+        this.setStatus(false);
+    }
+
+    onMounted() {
+        super.onMounted();
+        this.#editor_.onMounted();
+        this.#fileTree_.onMounted();
+        // this.#fileTree_.refreshFolder('/');
+    }
+
+    onUnmounted() {
+        // this.hideEditor();
+        // this.#fileTree_.deselectAll();
+        super.onUnmounted();
+        this.#editor_.onUnmounted();
+        this.#fileTree_.onUnmounted();
+    }
+
+    resize() {
+        super.resize();
+        this.#editor_.resize();
+        this.#fileTree_.resize();
+    }
+
+    setStatus(isChanged) {
+        if (this.#changed_ === isChanged || !this.#$close_) {
+            return;
+        }
+        this.#changed_ = isChanged;
+    }
+
+    getNativeFS() {
+        return this.#nativefs_;
+    }
+
+    dispose() {
+        this.#editor_.dispose();
+        this.#editor_ = null;
+        this.#fileTree_.dispose();
+        this.#fileTree_ = null;
+        super.dispose();
+    }
+}

boards/default_src/python_pyodide/others/statusbar-image.js

@@ -10,7 +10,7 @@ import '../language/loader';
 import STATUS_BAR_IMAGE_TEMPLATE from '../templates/html/statusbar-image.html';
 
 
-class StatusBarImage extends PageBase {
+export default class StatusBarImage extends PageBase {
     static {
         HTMLTemplate.add(
             'html/statusbar/statusbar-image.html',
@@ -23,6 +23,7 @@ class StatusBarImage extends PageBase {
             const statusBarsManager = mainWorkspace.getStatusBarsManager();
             statusBarsManager.add('images', 'images', Blockly.Msg.PYTHON_PYODIDE_IMAGE);
             statusBarsManager.changeTo('output');
+            return statusBarsManager.get('images');
         }
     }
 
@@ -164,6 +165,4 @@ class StatusBarImage extends PageBase {
                 );
         }
     }
-}
-
-export default StatusBarImage;
+}