Pencil tool menu-based prototype of the GUI Electron Revisited

Why do you want to retry it?

Mainly that the Pencil tool is quite valuable. Like Linus on Linux distributions under the attitude of "let the user select" Like, now this Sass services, Web services of the more common the more convenient times, such a position in the desktop open-source software, is to give users of a choice.

Indeed, good service, the core of the services we need to pay, willingness to pay, but it is also a service to the importance of different people are different, for example, I set in Evernote, Thunder download, Jetbrains the IDE, Jingdong, books reading, etc. is required to pay, because this is my own core demands, notes multiport synchronization, download speeds often experience when foreign variety of software, such as Jingdong VIP shopping experience. The prototype drawing design I think it is not my core demands, then I do not need to use a complete range of services, such as Sketch. Last year also bought authorization, but the frequency of use is very low, but its core function of the user experience is not very good, so this year after the expiration no longer renewals.

Experience standard mac user base, I can not represent my overall rating mac, it should be a level that is even lower, the perfect combination of hardware and software but that the concept of experience, compared to other products on the market, is definitely a big point praise.

Retry

Very strange, tried the first two months of the transformation process of the Pencil menu of macOS native, two days to go to retry the time, can not remember, so be sure to promptly recorded, but also to focus in mind, the brain internal storage performance No, to find external storage.

1, event-driven development approach

Primary process pencil/app/index.js

Asynchronous communication from the primary process to the rendering process

mainWindow.webContents.on("will-navigate", handleRedirect);
    mainWindow.webContents.on("new-window", handleRedirect);
    mainWindow.webContents.on('did-finish-load', function () {
        console.log('页面内容加载完成');
        if (process.platform == 'darwin') {
            mainWindow.webContents.send('initMacOSMenu');
        }
    });

Electron initialization comes on the menu, if there is demand, then.

app.on('ready', function() {
    app.setAboutPanelOptions({
        applicationName: pkg.productName,
        applicationVersion: pkg.version,
        copyright: pkg.copyright,
        version: '',
        credits: '',
        authors: '',
        website: pkg.homepage,
        iconPath: '',
    });

The rendering process pencil/app/app.js

/**
 * 调整实现方式为完全在渲染进程中初始化原生菜单
 */
ipcRenderer.on('initMacOSMenu', (event) => {
    console.log('initMacOSMenu web page received ');

    var {MacOSToolbar} = require('./views/toolbars/MacOSToolbar');

    MacOSToolbar.createMacOSToolbar();
});

2, the specific implementation

After the process is to make the main menu click event is triggered, the rendering process in response to the corresponding command. Keywords: UICommandManager.getCommand, menu key.

Initialization menu pencil/app/views/toolbars/MacOSToolbar.js

const {Menu, app, webContents} = require('electron').remote;
const pkg = require("../../package.json");
const FileToolMenu = require('../menus/FileToolMenu');

/**
 * 原始逻辑是在主进程中，初始化MacOS下的原生菜单
 * 目前改成在渲染进程中被调用
 * 菜单的交互事件，需要在 渲染进程 中指定
 */
exports.MacOSToolbar = {

    menuClicked(menuItem, browserWindow, event) {
        // browserWindow.webContents.send('menuClicked', menuItem);

        var command = UICommandManager.getCommand(menuItem.id);
        if (!command) {
            return;
        }

        command.run();
    },

    createMacOSToolbar() {
        // Cli 环境执行
        var menuClicked = this.menuClicked;
        var fileMenus = [];
        var fileCommands = FileToolMenu.allItems();
        for (let i = 0; i < fileCommands.length; i++) {
            const command = fileCommands[i];

            let menu = {
                id: command.key,
                label: command.label,
                accelerator: command.shortcut,
                click: menuClicked,
            };
            if (command.type == 'separator') {
                menu = {
                    type: "separator",
                };
            }
            if (command.run) {
                
            }
            fileMenus.push(menu);
        }