typedInput code / function editor

Core Development
1

Hi,

We all love the typed input widget. I'm looking for a way to use the typedInput to enter callback functions. I have for example a parameter which can be either a boolean or a function resulting a boolean. It would be nice to enable the typedInput to open a code editor window (like the JSON input type) to enter a piece a javascript code. (and a way to inform the user about the available parameters like

function(x, y)

// here the users code
return z;

I can use the string type for now but the monaco editor would be certainly more comfortable.
I don't sound too demanding: a ... button for string type to open a bigger text input could be sometimes useful too (i.e. a custom markdown input).

As usual, thank you for all your hard work.

Chris

2

The hard thing here is the TypedInput is designed around the standard <input> element which cannot contain newlines - they literally get stripped out of any value placed in the input.

We can get away with it with JSON because there we can use JSON.stringify to format in a single line/multiple lines as the user switches between the input and the expanded editor.

Similarly, we have a custom JSONata formatter that does the same job.

What we don't have, and is not trivial to create, is something that can strip newlines from arbitrary JavaScript and, more importantly, be able to reinsert them when expanding the editor.

2 Likes
3

Understood ... I totally forgot that typed input is based on the input element and didn't knew about that limitation. (same as I think the spinner steps of the numeric input makes the feature useless as it also limits the manual input to these steps. I would prefer to have greater steps with the up down buttons and do fine tuning "by hand")

Perhaps the auto format of the monaco editor can help but I understand if this is not a valid solution. Not the end of the world as using a unconnected function node as an editor and copy/paste works.

Never mind : Was only an idea. Thank you for the fast reply late at night!

4

I needed something similar some time ago. Wanted to ask the same feature request as you now did. Because that would have saved me from quite some headache, and my code would have become much cleaner. But I had already a suspicion that it would be too much work to implement as a new TypedInput. Now at least I clearly understand why.

You can have a look at the node-red-contrib-ui-svg node. On the second tabsheet there are input fields for event handlers, which you can magnify into a code editor. However after years of development, the code has become quite overwhelming. So if you like I can try to summarize that part here tonight...

Bart

5

Hi Bart,
thank you offering help here. I already noticed that you ran into the same challenge with your svg node. To be honest I haven’t installed it yet because I know I would be so distracted by it and not able to finish other important tasks if I dig into that. No need to summarize your “legacy code” :innocent: now - I believe I’m able to find the relevant parts. If not I’ll ask.

I thought it is ok to ask here. I believe that developers need as much input as possible.

For now I would like to add or see added

  • function type
  • color
  • numeric with more and better options
  • multi line strings

But this have to wait. Will take a look into your node and see what intermediate solution I can work with

2 Likes
6

Hi Bart,

looked into your node but came up with my own solution.
rWgtsAiVhL

  • I connected a button to the typed input with a own type (without value).
  • On the change event I enable the button if the type matches my "function" type.
  • The button opens the RED.editor.editJavaScript() editor
  • the value piggybacks as a property on the button until saved

If you need some shortcuts I'll happy to share some code.

@knolleary would be nice if it would be possible (sometimes) for custom types to define a callback to utilize the ... button.

And also appreciated to find a way to get access to the input area. I would like to define a color type. I will need a color picker supporting the alpha channel (which the <input> can't do (but the development tools on chrome does :frowning: ))

Any Ideas to steal this one?

image

Ok I'm off topic again, sorry

7

To be clear, all types are custom types. They all have access to the same API.

The ... button is shown if the type has a property called expand that is called when the button is clicked. However I'm not sure if that works if the type has options ... not a combination I'm aware of us using anywhere.

There is also an advanced mode where expand can be an object with icon and content properties if you want a custom dropdown menu - you can see that in action in the subflow env var editor.

Not entirely sure what you mean, but you can provide a custom label for the type using the valueLabel option. For example, the way the flow/global types overlay the context store name is done with that. They provide a custom view, but also reshow the underlying input.

As for a Colour picker - you could reuse the one we provide as seen in the Group edit dialog:

It isn't the most consumable API yet - you have to provide a basic palette of colours, something the Group node does via the palette option - but we ought to have built-in.

But equally, that could be the basis for a proper TypedInput colour/color type in the future.

1 Like
8

Yes indeed would love to see some more details!!! Very useful stuff!!!!

9

Thank you for your input. A lot to digest :wink:

I'm looking from the "outside" perspective. From there I see the "build in" types described in the docs and my own "custom" types.

I will give it a try ... should make the extra button obsolete :+1:

Here an real life example
I have a color parameter which could be either

  1. Default / Unset (let the node decide) (use a "custom" type without a value and label it "default")
  2. A color form a given palette (thank you for pointing me to this)
  3. A color (RGBA) to be selected by the user via a color picker
  4. A array of colors (use the array type)
  5. a function like: (solved)
(value) => { 
  // some fancy palette operation 
  return color;
}`

So I thought if I'm able to place my own widget here when color type is the selected the problem could be solved:

Solved typedInput code / function editor - #11 by Christian-Me I think
image
Some people might whant to place a slider in here too ;)---

I looked into the build in picker but this is limited to a given palette. Could be a extra type

The HTML input type color does not have an alpha slider so I need a extra value input
image

I can use a library but this would make the editor more heavy (like this one a-color-picker - npm) and I could not find one providing a eyedropper tool (Think it is quite difficult because it has to peek outside the sandbox - I imagine a website is reading what is what else is on my screen)

And now again off topic. The numeric input (like the alpha) can have a step parameter. But this limits the possible inputs too. So if I have min:0, max: 100 and step:10 the user can only input 0,10,20 ... without causing an validation error. I think it is more usefull to have bigger steps with the up down buttons and the ability to fine tune the value by inputting smaller values. Think it is limited by the <input> HTML tag

10

Sure
To initiate the javascript editor I currently use this:

                    editButton.on("click", function(e) {
                        e.preventDefault();
                        RED.editor.editJavaScript({
                            mode: 'ace/mode/nrjavascript',
                            value: editButton.prop('_functionEditorValue'),
                            width: "Infinity",
                            cursor: editButton.prop('_functionEditorCursor'),
                            complete: function(v,cursor) {
                                editButton.prop('_functionEditorValue',v);
                                editButton.prop('_functionEditorCursor',cursor);
                            }
                        })
                    });

You can get the value from your input field and write it back in the completecallback. There is a issue with keeping the cursor position (think it is one row off) but this can be fixed by try and error (These are the easy task for train rides :grin:)

I took this out of the core function node:

1 Like
11

OK I get it:

        node: {
            value: "node",
            label: "node",
            icon: "red/images/typedInput/target.svg",
            valueLabel: function(container,value) {} }

That is a good starting point!

12

Hi Nick,

the expand button works as expected and promised :+1:

I still have one question you have foreseen earlier: What is the best or safest way to store the function value?

Either via the type definition object and then access it like this
image

or via a prop added to the <input>

this.bindings.prop('_functionEditorValue');

or neither of these :frowning:

Chris

13

Hi,

I finally managed to prepare 3 prototypes of a color picker:
all consists of a color button and an input for easy copy paste, synced together with "live" validation

A) using the <input type='color'>
image

+ includes a system wide color picker
- no palette
--- no alpha.

B) using the RED.editor.colorPicker
image

+ palette
+ alpha (but I have difficulties to obtain the opacity value during sliding, a alpha value like #RRGGBBAA typed into the input don't effect the slider but "adds" to the preview alpha)
--- no color hue slider and brightness/saturation box

C) using the colr_pickr library
image

+ alpha
+ user defined palette (nice addon)
+/- <input type="color"> style / but not Node-RED style
- external library (if this is a problem)

And finally the function type works like a "build in" type

image

Sill have to find or build a nice icon (f = same as the function node) and get the ... back for overflow text (hmm ... it worked two weeks ago :face_with_monocle:)

For my own node I will go with the colr_pickerlibrary as it does everything I need and the 'Node-RED' version to provide a prefabricated palette and let the user decide via the beauty of typed input :+1:.

I only have to solve the opacity problem. Any thoughts, tips and ideas welcome.

Thank you for your help so far

1 Like
14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.