Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add RED.view.annotations api #3032

Merged
merged 2 commits into from
Jun 29, 2021
Merged

Add RED.view.annotations api #3032

merged 2 commits into from
Jun 29, 2021

Conversation

knolleary
Copy link
Member

@knolleary knolleary commented Jun 24, 2021

This PR introduces a new api that can be used to add custom annotations to nodes.

This initial implementation provides support for one type of annotation - 'badges'.

Badges are ~10px square icons shown in the top-right corner of the node. The existing node-changed (blue dot) and node-warning (orange triangle) indicators have been reimplemented using this new API.

The flow debugger will use this api to add a badge to indicate if a node is currently paused or not.
The flow linter will use this api to highlight nodes that have linter errors.

This is how the node-changed badge is defined:

RED.view.annotations.register("red-ui-flow-node-changed",{
            type: "badge",
            class: "red-ui-flow-node-changed",
            element: function(node) {
                var changeBadge = document.createElementNS("http://www.w3.org/2000/svg","circle");
                changeBadge.setAttribute("cx",5);
                changeBadge.setAttribute("cy",5);
                changeBadge.setAttribute("r",5);
                return changeBadge;
            },
            show: function(n) { return n.changed||n.moved }
        })

RED.view.annotations.register is called with two args - a string identifier for the annocation and an options object.

In the options object, the following properties can be provided:

  • type - the type of annotation. Currently badge is the only supported type
  • class - a css class name to apply to the annotation
  • element - a function this is called to generate the annotation for the provided node. It should return an SVG element.
  • show - used whenever the node is redrawn to determine if the badge should be shown. If set to a string, this is expected to be the name of a node property that will used as a boolean to determine the badge visibility. If set to a function, it will be called (with the node instance passed in) and expected to return a boolean.
  • filter - a function this is called to determine if the annotation should be added to the provided node.

RED.view.annotations.unregister is also defined to remove the annotation. It is passed the id that was passed to the register call.

@knolleary knolleary added the 2.0 label Jun 24, 2021
@knolleary knolleary added this to In progress in Node-RED 2.0 Planning Jun 24, 2021
@knolleary
Copy link
Member Author

For any passers-by finding this API - please tread carefully with it. It is to be considered experimental and could change in future versions. It is being added here as an experiment to see if this type of API is useful. It is not intended for contrib-nodes to start adding all of their own annotations - it is intended for platform-wide tools (like Debugger/linter etc).

@knolleary knolleary merged commit 5b980e8 into dev Jun 29, 2021
Node-RED 2.0 Planning automation moved this from In progress to Done Jun 29, 2021
@knolleary knolleary deleted the view-annotations branch June 29, 2021 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant