Where can I locate documentation on the source code of Node Red Editor in order to customize the CSS and JS for the client?

I am seeking assistance in modifying the following files:

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

Unfortunately, I have been unable to find any information or documentation regarding the functions and styles of the Node-Red editor. My main objective is to enable the node palette sidebar to be resizable as shown in the image example:

https://i.sstatic.net/emrNr.png

I have considered reusing a portion of the code used for:

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

I welcome any ideas and thank you for taking the time to read this.

Additional notes: To install Node-Red, run the following command:

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

Update 13/12/2020

Events Added:

  • 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);

HTML Additions:

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

CSS Additions:

  • 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

JavaScript Additions:

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

What's Working:

  • The palette separator displays correctly and maintains its styles
  • The palette separator toggles on and off in the correct position
  • The palette toggle button is positioned above the palette separator for ease of use
  • The palette separator can now be dragged and remembers its last position when toggled on and off

What I Need Help With:

  • Creating events to handle Palette resizing upon start
  • Resizing the Palette and Workspace during drag event
  • Updating the resized Palette and Workspace upon stop event

Any assistance would be greatly appreciated.

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

              start: function (event, ui) {
                
              },

              drag: function (event, ui) {

              },

              stop: function (event, ui) {
                
              },

        });
         
 }
javascriptcssnode.jscustomizationnode-red

Answer №1

If you're looking to customize the appearance of the Node-RED editor, you can refer to the official documentation here.

By editing the settings.js file, you have the ability to modify or enhance the default CSS styles and incorporate your own custom scripts through the editorTheme configuration.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align the radio buttons vertically

My goal is to align all my buttons vertically, similar to the first question. However, I'm struggling to get the second question to align correctly. Despite trying different methods like using the vertical-align: middle property, nothing seems to be w ...

htmlcssradio-buttonalignment

Uploading a file from Node.js using Axios to a Symfony API

I have encountered an issue while working with an external API that is written in Symfony (version 5.4.31). The code I am using is based on NestJS, and my goal is to send local files to the Symfony API using Axios. However, when I attempt to do this, the ...

node.jssymfonyfile-uploadaxios

Utilizing JavaScript to create multiple HTML tables from JSON data

Is it necessary to create separate tables in HTML for each set of JSON data when all tables have the same number of columns (2 columns)? I am looking to minimize the JavaScript function that displays the table with the current JSON data. Can I use one tabl ...

javascripthtmljson

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project. The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is c ...

javascriptjquerycsshtml

What is the best way to divide a GraphQL schema to avoid circular dependencies?

I have a question that is similar to the issue of circular dependency in GraphQL code discussed on Stack Overflow, but my problem lies within JavaScript (ES6). The size of my schema definition has become too large, and I am struggling to find a way to bre ...

javascriptgraphql

JavaScript Parsing of MongoDB Object Identifiers

Exploring this MongoDB documentation link: http://docs.mongodb.org/manual/reference/object-id/ This informative source explains that an ObjectId consists of Time, Machine, Process Id, and Counter values. The next step is figuring out how to extract and i ...

javascriptmongodb

Show real-time server responses using jQuery while waiting for the AJAX request to complete

I have a challenge in creating a function that displays the server response while waiting for Ajax to complete. Here's the scenario: I have selected 10 checkboxes. When I click the submit button, Ajax is triggered. On the server side, there is a loo ...

javascriptjqueryajaxcodeigniter

`<picture> contains the main image``

Is it possible to access the currently displayed source of a <picture> element in JavaScript without relying on viewport width or pixel density? Looking for a method similar to <select>:selected If anyone has insights on this, please share! ...

javascripthtml

Is there a way in Vue to efficiently route multiple instances belonging to the same component while ensuring they maintain their individual states?

It's a bit difficult to capture the exact issue in the title. Here is the scenario: // In the main layout page <keep-alive> <router-view /> </keep-alive> // And I have a route { path: "something/:id", name: "someth ...

javascriptvue.jsvue-router

JavaScript framework enabling front-end communication with RESTful APIs

I am searching for a lightweight javascript framework to build a client-side web application that will interact with the server via a REST API. I initially considered using react.js, but my team members rejected the idea because it lacks templating. Angul ...

javascriptangularjsrestframeworksclient-side

waiting for the import statement in a React/NextJS/Typescript project to resolve

While working on my node.js development server, I encountered a problem with the following code: import { useRouter } from 'next/router' import nextBase64 from 'next-base64'; const Load = () => { const router = useRouter() co ...

node.jsreactjstypescriptnext.js

A helpful guide on how to separate text using Java Script and the "/" character

Just diving into the world of JavaScript and encountering some challenges with splitting text. The string that needs to be split looks like this: mobile)/index.m3u8 The desired output should be: mobile and index.m3u8 I attempted to use .split("&bso ...

javascript

"Implementing an ellipsis feature in Highcharts to handle lengthy data gracefully

Looking for some help with adjusting the positioning of a pie chart on the page. The data on the left and right sides is not displaying correctly, so I want to center the chart and add ellipsis for any overflow. Check out the code here: http://jsfiddle.n ...

javascriptjqueryhighcharts

The utilization of ES Modules within a Next.js server.js

After reviewing a few examples in the Next.js repository, I came across: https://github.com/zeit/next.js/tree/master/examples/custom-server-express https://github.com/zeit/next.js/tree/master/examples/custom-server-koa I observed that these examples ut ...

javascriptnode.jsnext.jses6-modules

CSS search bar with sharp corners and radius ignored

I am currently developing an Android application using Angular NativeScript, and I'm aiming to implement a search bar with rounded corners. My HTML code looks like this: <SearchBar class="search"></SearchBar> In my CSS file, I h ...

htmlcssangularnativescriptradius

JavaScript for returning a boolean output

I have been tasked with creating a webpage based on the requirements below Here is the current code that I am working with function validate() { var form = document.getElementsByTagName('form')[0]; if (form.tickets.value <= form.childr ...

javascripthtml

Issue with Async / await: The function is returning true prematurely without waiting for the value to be set in the new state

Currently, I'm in the process of developing a multiple image file upload feature using Firebase and React with Typescript. The issue I am facing revolves around the usage of async/await. In particular, my function uploadFiles is responsible for saving ...

javascriptreactjsfirebaseasync-awaites6-promise

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Console warning in Next.js: "The 'style' property did not match."

Currently working on a website with Next.js, I've encountered a red color warning in the console related to the Image component from 'next/Image'. Unsure of the reason for this warning, I'm seeking to resolve it to ensure the project&ap ...

javascriptreactjsnext.js

Restore background color when clicked outside

I'm currently using this code to both load content from a div and change the color of the tab when a user clicks on it. However, I'm struggling to find a way to revert the background color back once the user clicks on something else. Any suggesti ...

jquerycsstabsbackground-color