node-red editor-clientモジュール

前の記事

前回の記事では、Node-REDのeditor-apiモジュールについて説明した。主にフロントエンドインターフェースに使用されます。
この記事では、Node-REDのeditor-clientモジュールを見ていきます。
このモジュールはフロントエンドコードであり、表示するインターフェイスを決定します。
Node-REDのインターフェイスを変更する場合は、慎重に検討する必要があります。
下を見てみましょう。

editor-client

packages/node_modeles/editor-clientディレクトリにあります。
主に4つのコアカタログ

• ロケールインターフェイスで国際翻訳を行う場合は、テキストを変更する場合は、ここで探す必要があります。
• publicこのディレクトリはコンパイルで生成されたファイルを格納します。通常は変更されない
• srcストリームエディタのコアファイルは、エディタのすべてのビジネスコード、コンポーネント、およびリソースを格納します。
• templatesプログラムエントリ、mstファイル。
  
  editor-client下のファーストレベルディレクトリはこんな感じです。

localesディレクトリには、各言語版の翻訳が保存されています。
zh-CNは中国語簡体字
zh-TWは中国語の繁体字
en-US英語

まず、srcディレクトリを見てみましょう。

srcディレクトリ

下から下へ、カタログは

• ACEコードエディタのためのACEリソース
• すべての画像リソースの画像
• JSエディタは重要です。
• sassエディタスタイルファイル
• Toursプリセットストリーム、デモ用のデモ、またはバージョン機能の紹介
• types tsの宣言型
• Vendor 外部依存ライブラリ（ace、jQuery、monaco、d 3、font-awesomeなど）

Node-REDページで画像を変更したい場合は、画像で検索して、同じ名前の画像ファイルに置き換えてください。

Node-REDのバージョンは3.xです。このバージョンのデフォルトのコードエディタはモナコですが、移行としてaceエディタのコードはコードに残り、ユーザーは設定を切り替えてaceエディタを使用し続けることができます。

sassディレクトリにはページ上のすべてのCSSスタイルが含まれます。variables.scss 文書です。
このファイルはnode-redが使用するCSSスタイル変数を定義しており、これらの変数を変更すると一度に多くの場所でスタイルを変更できます。
各変数が使用される場所は慎重に検討する必要があります。

srcの下では、コアディレクトリはjsディレクトリです。このディレクトリのエントリはmain.jsです。
すべてのメソッドと変数はREDオブジェクトの下で定義されます。
イベントのサブスクライブ、イベントの配布、アクションスタック履歴、フックなど。
プラグイン、設定、ユーザーの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を改造しても同じで、全身を一発動かします。
カスタマイズが必要な場合は、専門家に相談してください。