Skip to content

v13.7.0
Compare
Choose a tag to compare
@tomlyn tomlyn released this 06 Aug 23:07
· 91 commits to main since this release
v13.7.0
bd46e16
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Feature Enhancements

Common Canvas

#2090 Add new left side panel to allow toggling between palette and search panel

This requirement has two parts:

  1. The application needs control over what is displayed in the left flyout. Based on the user clicking buttons in the toolbar, sometimes the Palette is displayed and sometimes a Search panel is displayed showing a sophisticated search UI.

  2. The palette (or any replacement search panel) should be displayable underneath the toolbar rather that at the side of the toolbar.

Requirement 1

Common Canvas has default behavior for the palette. This is enabled when the canvas config field enablePaletteLayout is set to “Flyout”. This default behavior involves:

  • automatically displaying a palette icon as the left most button in the toolbar
  • handling clicks on the button to control the opening and closing of the Palette in the left flyout
  • allowing the application to specify whether the “closed” palette is shown as a narrow palette or hidden completely. (This is controlled by the enableNarrowPalette canvas config field).

This default behavior might conflict with any control the application is given over the contents and behavior of the left-flyout. Therefore, to implement this requirement, the default palette behavior and the ability to control the left flyout have been separated as follows.:

  • When the default palette behavior is switched on (enablePaletteLayout === "Flyout") Common Canvas manages everything to do with the left flyout and the left flyout cannot be controlled by the application.
  • When default palette behavior is switched off (enablePaletteLayout === "None") the application must handle all aspects of the left flyout.

Consequently, to implement this requirement with this Elyra Canvas release, the application must do these things:

  • Disable the default Palette behavior by setting enablePaletteLayout to “None”
  • Add whatever buttons are required to the toolbar for opening the palette or search panels
  • Control the display and contents of the left-flyout based on which toolbar buttons are clicked

To allow for the third item two new props have been added to <CommonCanvas> called leftFlyoutContent and showLeftFlyout.

These work in the same way as these currently supported props:

  • rightFlyoutContent and showRightFlyout
  • topPanelContent and showTopPanel
  • bottomPanelContent and showBottomPanel

Notes

  1. To allow the application to provide the Palette as content for the left flyout the Palette object is now exported from Elyra Canvas. To satisfy this requirement the application must import the Palette from Elyra Canvas and then specify it in the leftFlyoutContent prop of <CommonCanvas>

  2. The width of the left flyout will expand to accommodate whatever contents that are specified in the leftFlyoutContent prop of <CommonCanvas>

  3. The Stages sample application in the Test Harness has been updated to implement the steps mentioned above. To see this, open the Test Harness, click the Common Canvas button and then click the 'Stages' sample application.

  4. You can see the code that was added to the Stages sample app, as follow:

    • The default behavior of the Palette has been switched off here
    • The two buttons for the toolbar are specified here
    • The editActionHandler has been updated to handle the click on each of these buttons here
    • The render method has been updated to render the appropriate content into the left flyout here and here

  5. For this work item a number of internal class names have been removed. These were not part of the documented API but are documented here for completeness:
    common-canvas-items-container
    common-canvas-right-side-items
    common-canvas-right-side-items-under-toolbar
    common-canvas-items-container-under-toolbar
    common-canvas-with-top-and-bottom-panel

Requiremnt 2

The left flyout (whether it is displaying the default palette or the left flyout contents provided by the app) can be displayed underneath the toolbar by setting the enableLeftFlyoutUnderToolbar config field to true. (This is the equivalent of the enableRightFlyoutUnderToolbar config field). You can see this behavior if you view the Stages sample app where you will see the Palette/Search panel appearing below the toolbar. You can see it has been switched on in the Stages sample app code here

#2079 Add ability to adjust position of context toolbar for links

Two new Canvas Layout fields have been added called linkContextToolbarPosX and linkContextToolbarPosY. These are used as an offset for the bottom center position of the context toolbar for all links. Positive X is to the right, negative X is to the left, and positive Y is down, negative Y is up.

They can be specified like this:

    const canvasConfig = {
        enableCanvasLayout: {
            linkContextToolbarPosX: 10,
            linkContextToolbarPosY: -10
        }
    };

This behavior has been implemented in the Stages sample app. You can see it in the Test Harness. In the Test Harness click the “Common Canvas“ button and the “Stages” sample app. You can see the code for it here

#2095 Hide link Label with ... and decorations based on link length in Common Canvas

Two more new Canvas Layout fields have been added in this release called:

  • linkDistanceForAltDecorations — A distance in pixels between the start point and end point of the link below which the ‘alternative decorations’ will be displayed. This defaults to 150.

  • linkAltDecorations. — Should be set to an array of alternative decorations for the link. Each element of the array should follow the decoration specification just the same as the regular decorations. The default for this field is null, which means no alternative decorations will be displayed. They can be specified something like this:

    const canvasConfig = {
        enableCanvasLayout: {
            linkDistanceForAltDecorations: 100,
            linkAltDecorations: [
                { id: “alt-123”, label: “XXX” }
            ]
        }
    }

This will display a label “XXX” in the middle of the link when the distance from the start point to the end point of the link is below 100 pixels.

The Stages sample app in the Test Harness has been updated to use this feature. In the Test Harness click the “Common Canvas“ button and the “Stages” sample app. You can see the code here.

Common Properties

Just bug fixes

Issues Resolved

  • #2079 Add ability to adjust position of context toolbar for links by @tomlyn in #2080
  • #2083 With WYSIWYG comments IBM Plex Condensed font display incorrectly by @tomlyn in #2084
  • #2085 Page crashes when mousing over node while submenu toolbaritem i… by @tomlyn in #2086
  • #2093 Text decoration on a Link -- entry area closes when mouse cursor moved out (intermittent). by @srikant-ch5 in #2094
  • #2081 Conditions + small portion of controls by @mikieyx in #2082
  • #2090 Add new left side panel to allow toggling between palette and s… by @tomlyn in #2091
  • #2095 Hide link Label with ... and decorations based on link length i… by @tomlyn in #2096

Full Changelog: v13.6.1...v13.7.0

Contributors

tomlyn, srikant-ch5, and mikieyx
Assets 2
Loading