node-red editor-client - Modul Quellcode-Analyse

Vorwort

Vorheriger ArtikelWir haben das Editor-API - Modul in Node-RED beschrieben. Es wird hauptsächlich für die Bereitstellung von Front-End - Schnittstellen verwendet.
In diesem Artikel schauen wir uns das Editor-Client - Modul in Node-RED an.
Das Modul ist der Front-End - Code, der die Schnittstelle bestimmt, die wir sehen.
Wenn Sie die Schnittstelle von Node-RED ändern möchten, dann müssen Sie es genau untersuchen.
Schauen wir uns unten mal an.

editor-client

im Verzeichnis packages/node_modeles/editor-client.
ist hauptsächlich eine internationale Übersetzung der vier Kernverzeichnisse

• locales Schnittstelle, wenn Sie einen Text ändern möchten, sollten Sie hier suchen.
• public Die kompilierten Dateien, die in diesem Verzeichnis gespeichert werden. In der Regel wird nicht geändert.
• Die Kerndatei des src-Stream - Editors enthält den gesamten Geschäftscode, Komponenten und Ressourcen des Editors.
• Templates Programm Eingang, eine MST-Datei.
  
  Das Verzeichnis der ersten Ebene unter editor-client ist so.

Unter dem Verzeichnis locales sind die Übersetzungen in verschiedenen Sprachen gespeichert.
zh-CN für vereinfachtes Chinesisch
zh-TW für traditionelle Chinesisch
en-US Englisch

Zuerst konzentrieren wir uns auf das src-Verzeichnis

src-Verzeichnis

von unten nach unten, die Verzeichnisse sind

• ace Ressourcen für ace Code Editor
• images Alle Bildressourcen
• js Code Editor ist entscheidend
• sass-Editor - Style-Datei
• Tours Standard-Streams für die Präsentation oder Versionsmerkmale
• Types ts Deklarationstypen
• Anbieter Externe Abhängigkeitsbibliotheken wie ace, jquery, monaco, d3, font-awesome

Wenn Sie ein Bild auf einer Node-RED - Seite ändern möchten, können Sie es in den Images suchen und dann durch eine gleichnamige Bilddatei ersetzen.

Die aktuelle Version von Node-RED ist 3.x. Der Standardcode-Editor für diese Version ist monaco, aber als Übergang, der Code des Ace-Editor bleibt im Code, und Benutzer können die Konfiguration wechseln und weiterhin mit dem Ace-Editor.

Das sass-Verzeichnis speichert alle CSS-Stile auf der Seite, von denen die wichtigsten sind:variables.scssam wichtigsten ist.
Diese Datei definiert die CSS-Stilvariablen, die von node-red verwendet werden, und wenn Sie diese Variablen ändern, können Sie den Stil an vielen Stellen auf einmal ändern.
Wo jede Variable verwendet wird, muss man genau überlegen.

Unter src ist das Kernverzeichnis das js-Verzeichnis. Der Eingang dieses Verzeichnisses ist main.js.
Und alle Methoden und Variablen werden unter dem RED-Objekt definiert.
zum Beispiel Abonnements für einige Ereignisse, Verteilung von Events, Operations Stack History, Hook Hooks
Plugins, Einstellungen, Benutzer-UI und Logik, wenn Sie das Login-Popup hässlich finden, können Sie die Änderungen in user.js ändern.

Bei der sekundären Schnittstellenentwicklung von Node-RED war es unkomfortabel, dass der Großteil seiner Dom-Struktur mit jQuery zusammengefasst wurde.
In node-red finden Sie also keine großen HTML-Codes.
Zum Beispiel das Fenster der Anmeldeseite.

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()
    }
});

Obwohl die Seite im UI-Teil nicht so einfach zu finden ist, hat node-red zum Glück eine gute Klassifikation für die UI gemacht.
Der Großteil der Benutzeroberfläche des Editors ist im Verzeichnis js / ui gespeichert. Wie Deploy Button, Ereignisprotokoll, Tasten, Benachrichtigungen, Einfügen...

Zusammenfassung

Wie viele Geräte werden "Hochspannung im Inneren, Nicht-Profis nicht entfernen" geklebt. Das gleiche gilt für die Modifikation von Node-RED, um den ganzen Körper zu bewegen.
Wenn Sie eine Anpassung benötigen, suchen Sie einen Profi.