node-red editor-client模块 源码解析

前言

上篇文章 我们讲解了Node-RED中的editor-api模块。它主要是用于提供给前端接口。
本篇我们一起看一下Node-RED中的editor-client模块。
该模块是前端代码，它决定了我们看到的界面。
如果你要修改Node-RED的界面，那么你需要仔细研究它。
下面让我们一起来看看吧。

editor-client

在packages/node_modeles/editor-client目录中。
主要是四个核心目录

• locales 界面上国际化的翻译，如果你要修改某个文本，应该在这里找一下。
• public 该目录存放的由编译生成的文件。一般不会修改。
• src 流编辑器的核心文件，存放了编辑器所有的业务代码，组件，资源。
• templates 程序入口，一个mst文件。
  
  editor-client下的第一级目录就是这样子的。

在locales目录下，存放了各个语言版本的翻译。
zh-CN为中文简体
zh-TW 为中文繁体
en-US 英语

先我们着重看一下src目录

src目录

从下往下，目录分别是

• ace 存放ace代码编辑器的资源
• images 所有的图片资源
• js 编辑器代码 至关重要
• sass 编辑器样式文件
• tours 预设流，用于展示的demo，或版本特性介绍
• types ts的声明类型
• vendor 外部依赖库，如ace，jquery，monaco，d3，font-awesome

如果你要修改Node-RED页面上的某个图片，图标，可以在images里找一下，然后使用同名的图片文件替换它。

目前Node-RED的版本是3.x。该版本默认的代码编辑器是monaco，但是作为过渡，代码中依然保留了ace编辑器的代码，用户可以切换配置，继续使用ace编辑器。

sass目录存放的是页面上所有的css样式，其中比较重要的是variables.scss 文件。
该文件定义了node-red使用的css样式变量，更改这些变量就能一次性修改很多地方的样式。
具体每个变量使用的地方，还需要细细琢磨。

在src下，核心的目录是js目录。该目录的入口是main.js。
并且所有的方法，变量都是定义在RED对象下的。
比如一些事件的订阅，分发events，操作堆栈history，钩子hooks
插件plugins，设置，登录用户的UI和逻辑，如果你觉得登录弹窗比较丑，那你可以在user.js中修改修改。

在对Node-RED做二次界面开发时，让人感觉不太舒服的地方是 他的大部分dom结构都是使用jquery拼接起来的。
所以在node-red中你基本找不到大串的html代码。
比如登录页的弹窗

var dialog = $('<div id="node-dialog-login" class="hide" style="display: flex; align-items: flex-end;">'+
  '<div style="width: 250px; flex-grow: 0;"><img id="node-dialog-login-image" src=""/></div>'+
  '<div style="flex-grow: 1;">'+
      '<form id="node-dialog-login-fields" class="form-horizontal" style="margin-bottom: 0px; margin-left:20px;"></form>'+
  '</div>'+
  '</div>');
dialog.dialog({
    autoOpen: false,
    classes: {
        "ui-dialog": "red-ui-editor-dialog",
        "ui-dialog-titlebar-close": "hide",
        "ui-widget-overlay": "red-ui-editor-dialog"
    },
    modal: true,
    closeOnEscape: !!opts.cancelable,
    width: 600,
    resizable: false,
    draggable: false,
    close: function( event, ui ) {
        $("#node-dialog-login").dialog('destroy').remove();
        RED.keyboard.enable()
    }
});

虽然UI部分的页面不太好找，但所幸node-red对ui做了一个很好的分类。
编辑器绝大部分的UI存放在js/ui目录。如部署按钮，事件日志，按键，通知，粘贴。。。等等

总结

就像很多电器上会贴上“内有高压，非专业人士勿拆”。修改Node-RED也是一样，迁一发而动全身。
如果需要定制，请找专业人士。