v13.13.0

Feature Enhancements

Common Canvas

#2266 Custom port images

The specification for the way ports are displayed has been changed in this release. The following fields in the node layout object (enableNodeLayout in the canvas config object) have been removed:

• outputPortObject
• outputPortImage
• outputPortWidth
• outputPortHeight

They have been replaced with a field called outputPortDisplayObjects. This contains an array with an element that corresponds to each output port specified for the nodes. The elements of the array can have different structures as follows:

Either: 
{ type: “circle” } // Draws a circle to represent the port
Or:
{ type: “circleWithArrow” } // Draws a circle with an arrow head (shown when port is connected) to represent the port.  
Or:
{ type: “image”, src: “path/picture.svg”, width: 10, height: 10 } // Displays an image for the port
Or:
{ type: “jsx”, src: (<FaceCool />), width: 10, height: 10 } // Displays a JSX object for the port

If the node has more output ports (outputs) than elements in the array the last element from the array will be used for the remaining ports. So if you want all ports to be displayed the same, just specify one element in the array.

The same change has been made for output ‘guide objects’. A Guide object is the image displayed at the end of the new link line as it is dragged away from the node. These fields have been removed:

• outputPortGuideObject
• outputPortGuideImage

They have been replaced with the field outputPortGuideObjects which is an array with the same structure as for outputPortDisplayObjects.

The same change has been made for input ports. These fields have been removed:

• inputPortObject
• inputPortImage
• inputPortWidth
• inputPortHeight

and have been replaced by inputPortDisplayObjects.

And also these fields have been removed:

• inputPortGuideObject
• inputPortGuideImage

and have been replaced by the field inputPortGuideObjects

These changes allow something like this where each output port can have a different image:

Notes:

1. The Prompt sample application has been altered to use this new approach.
2. The old fields will continue to work in the current release but will be removed in the next major release (which is not that far in the future). It is therefore strongly recommended, if your code is overriding any of the defaults for these fields, that you convert your code to use the new arrays. This will save having migration work in the future.

#2276 Allow click on a port to cause an action

The user can now click on a port which will cause the clickActionHandler callback to be called with a source parameter object that contains information about the node and port that was clicked.

The Prompt sample application in the test harness has been updated to enable this, so the user can click a port to display a link and prompt for that port.

Common Properties

• Just bug fixes

Issues Resolved

• #2261 Properties sizing button hidden by bottom panel by @srikant-ch5 in #2262
• #2268 Jest tests broken in Elyra Canvas build by @tomlyn in #2269
• #2266 Custom port images by @tomlyn in #2267
• #2271 Use React Testing Library for common-properties tests - Part 2-… by @Jerinjk14 in #2272
• #2274 Document enableFocusOnMount config field by @tomlyn in #2275
• #2276 Allow click on a port to cause an action by @tomlyn in #2277
• #2279 Have a property not to display the context toolbar when the use… by @tomlyn in #2280
• #2270 Canvas palette not loading/displayed in Safari browser by @tomlyn in #2278

Full Changelog: v13.12.0...v13.13.0