From c1b1de072f18139b48dcd183a587f5e415b89d54 Mon Sep 17 00:00:00 2001 From: CTomlyn Date: Thu, 1 Aug 2024 11:11:33 -0700 Subject: [PATCH] =?UTF-8?q?#2085=20Page=20crashes=20when=20mousing=20over?= =?UTF-8?q?=20node=20while=20submenu=20toolbaritem=20i=E2=80=A6=20(#2086)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: CTomlyn Signed-off-by: Matt Howard --- .../src/toolbar/toolbar-sub-menu.jsx | 18 ++++++++-------- .../custom-canvases/logic/logic-canvas.jsx | 21 +++++++++++++++++++ 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx index 4a5741fcb7..16a9f730fb 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx +++ b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx @@ -41,7 +41,7 @@ class ToolbarSubMenu extends React.Component { } componentDidMount() { - if (this.props.containingDivId && this.props.subMenuActions.length > 0) { + if (this.props.containingDivId && this.props.subMenuActions?.length > 0) { adjustSubAreaPosition(this.areaRef, this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect); } @@ -53,7 +53,7 @@ class ToolbarSubMenu extends React.Component { componentDidUpdate() { if (this.state.focusAction !== "subarea") { - const actionObj = this.props.subMenuActions.find((sma) => sma.action === this.state.focusAction); + const actionObj = this.props.subMenuActions?.find((sma) => sma.action === this.state.focusAction); if (!actionObj?.enable) { const actionToSet = this.getClosestEnabledAction(this.state.focusAction); if (actionToSet !== null) { @@ -117,18 +117,18 @@ class ToolbarSubMenu extends React.Component { } getClosestEnabledAction(action) { - const index = this.props.subMenuActions.findIndex((sma) => sma.action === action); + const index = this.props.subMenuActions?.findIndex((sma) => sma.action === action); let newAction = null; let indexUp = index + 1; let indexDown = index - 1; - while ((indexDown > -1 || indexUp < this.props.subMenuActions.length) && newAction === null) { + while ((indexDown > -1 || indexUp < this.props.subMenuActions?.length) && newAction === null) { if (indexDown > -1 && this.props.subMenuActions[indexDown].enable) { newAction = this.props.subMenuActions[indexDown].action; } else { indexDown--; } - if (indexUp < this.props.subMenuActions.length && this.props.subMenuActions[indexUp].enable) { + if (indexUp < this.props.subMenuActions?.length && this.props.subMenuActions[indexUp].enable) { newAction = this.props.subMenuActions[indexUp].action; } else { indexUp++; @@ -140,7 +140,7 @@ class ToolbarSubMenu extends React.Component { getFocusableActions() { const focusableActions = []; - for (let i = 0; i < this.props.subMenuActions.length; i++) { + for (let i = 0; i < this.props.subMenuActions?.length; i++) { if (this.props.subMenuActions[i].enable || this.props.subMenuActions[i].jsx) { focusableActions.push(this.props.subMenuActions[i]); } @@ -170,7 +170,7 @@ class ToolbarSubMenu extends React.Component { generateSubMenuItems() { const newItems = []; - for (let i = 0; i < this.props.subMenuActions.length; i++) { + for (let i = 0; i < this.props.subMenuActions?.length; i++) { const actionObj = this.props.subMenuActions[i]; if (actionObj) { newItems.push(this.generateSubMenuItem(actionObj, i)); @@ -214,7 +214,7 @@ class ToolbarSubMenu extends React.Component { } render() { - if (this.props.subMenuActions.length > 0) { + if (this.props.subMenuActions?.length > 0) { const style = this.props.isCascadeMenu ? generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect) : null; @@ -234,7 +234,7 @@ class ToolbarSubMenu extends React.Component { } ToolbarSubMenu.propTypes = { - subMenuActions: PropTypes.array.isRequired, + subMenuActions: PropTypes.array, // subMenuActions may occasionally be null, when menu is refreshed by React. instanceId: PropTypes.number.isRequired, toolbarActionHandler: PropTypes.func, closeSubArea: PropTypes.func, diff --git a/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx b/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx index 2d32198923..ba93d3ee77 100644 --- a/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx +++ b/canvas_modules/harness/src/client/components/custom-canvases/logic/logic-canvas.jsx @@ -18,6 +18,7 @@ import React from "react"; import PropTypes from "prop-types"; import { CommonCanvas, CanvasController } from "common-canvas"; // eslint-disable-line import/no-unresolved +import { ColorPalette } from "@carbon/react/icons"; import LogicFlow from "./logic-flow.json"; import LogicPalette from "./logic-palette.json"; @@ -44,6 +45,7 @@ export default class LogicCanvas extends React.Component { enableLinkDirection: "TopBottom", enableLinkSelection: "LinkOnly", enableSnapToGridType: "During", + enableContextToolbar: true, paletteInitialState: true, enableInsertNodeDroppedOnLink: true, enableHighlightNodeOnNewLinkDrag: true, @@ -119,12 +121,31 @@ export default class LogicCanvas extends React.Component { // Implement } + contextMenuHandler(source, defaultMenu) { + if (source.type === "link") { + const subMenuColorLink = [ + { action: "default-color", label: "Default Color", enable: true }, + { action: "red-color", label: "Red", enable: true }, + { action: "yellow-colorr", label: "Yellow", enable: true }, + { action: "green-color", label: "Green", enable: true } + ]; + + return [ + { action: "color-submenu", icon: (), label: "Color link", enable: true, + submenu: true, menu: subMenuColorLink, toolbarItem: true }, + { action: "deleteSelectedObjects", enable: true, toolbarItem: true } + ]; + } + return defaultMenu; + } + render() { const config = this.getConfig(); return ( );