Search code examples
javascriptcssnode.jscustomizationnode-red

Need to customize Node Red Editor Client CSS and JS, where to find documentation about source code of node-red-editor?

I need some help to modify the files:

  • red.min.js file located at: ~ npm\node_modules\node-red\node_modules@node-red\editor-client\public\red
  • style.min.css file located at: ~ npm\node_modules\node-red\node_modules@node-red\editor-client\public\red

but I can't find any information or documentation on the functions and styles of the node red editor, the main purpose is to make the node palette sidebar resizable see the image example:

enter image description here

I have thought about reusing part of the code used for:

<div id = "red-ui-sidebar">

I hope for ideas and thanks for taking the time to read.

Aditional notes: To install Node-Red run:

npm install -g --unsafe-perm node-red

Update 13/12/2020

Added Events

  • Added RED.events.on("palette:resize", workspace_tabs.resize);
  • Added RED.events.on("palette:resize", resizeNavBorder);
  • Added RED.events.on("palette:resize", resizeStack);
  • Added RED.events.on("palette:resize", handleWindowResize);

Added HTML

  • Added '<div id="red-ui-palette-separator"></div>' + in foo buildEditor

Added CSS

  • Added #red-ui-palette-separator {position: absolute; top: 0px; left: 189px; bottom: 0px; width: 7px; z-index: 11; background: #f3f3f3 url(images/grip.png) no-repeat 50% 50%; cursor: col-resize; border-color: #bbb; box-sizing: border-box; border: 1px solid #bbb; }
  • Added .red-ui-palette-closed > #red-ui-palette-separator {left: 0px !important;}
  • Added z-index: 12; to .red-ui-sidebar-control-left
  • Added left: 189px; to #red-ui-workspace
  • Added border-color: #bbb; box-sizing: border-box; to #red-ui-sidebar-separator

Added JS

(to foo init inside palette prop of RED)

  • Added var paletteSeparator = {}; paletteSeparator.dragging = false;
  • Added setupPaletteSeparator();
  • Added RED.popover.tooltip($("#red-ui-palette-separator").find(".red-ui-palette-control-left"), RED._("keyboard.togglePalette"), "core:toggle-palette");

Whats works

  • Palette separator displays correctly and preserves styles
  • Palette separator toggle on / off in corrected position
  • Palette toggle button is displayed above the palette separator to simplify functionality
  • The palette separator is now draggable and in toggle on / of remenber the last position

What I need? :

  • On function Start event handle Palette resize event
  • On function Drag event resize the Palette and Workspace
  • On function Stop event update resized Palette and Workspace

Any help would be apreciated

function setupPaletteSeparator() {
        
        $("#red-ui-palette-separator").draggable({
             
              axis: "x",

              start: function (event, ui) {
                
              },

              drag: function (event, ui) {

              },

              stop: function (event, ui) {
                
              },

        });
         
 }
Solution

  • The doc for how to theme the Node-RED editor is here.

    It lets you use the settings.js file to replace/supplement the shipped CSS and to include your own custom script files using the editorTheme entry