diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx index 0010a90..2f12e70 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx @@ -180,6 +180,7 @@ const DemoNode: React.FunctionComponent = observer( showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus} statusDecoratorTooltip={nodeElement.getNodeStatus()} onContextMenu={options.contextMenus ? onContextMenu : undefined} + hideContextMenuKebab={options.hideKebabMenu} onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined} onHideCreateConnector={onHideCreateConnector} labelIcon={options.icons && LabelIcon && } diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx index 9a22fb7..aa35cb3 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx @@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => { > Context Menus + + options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu }) + } + > + Hide kebab for context menu + = observe onShowCreateConnector, onContextMenu, contextMenuOpen, - raiseLabelOnHover = true + raiseLabelOnHover = true, + hideContextMenuKebab }) => { const [hovered, hoverRef] = useHover(); const status = nodeStatus || element.getNodeStatus(); @@ -370,6 +373,7 @@ const DefaultNodeInner: React.FunctionComponent = observe badgeLocation={badgeLocation} onContextMenu={onContextMenu} contextMenuOpen={contextMenuOpen} + hideContextMenuKebab={hideContextMenuKebab} hover={isHover} labelIconClass={labelIconClass} labelIcon={labelIcon} diff --git a/packages/module/src/components/nodes/labels/NodeLabel.tsx b/packages/module/src/components/nodes/labels/NodeLabel.tsx index f6fef1f..1eb6c71 100644 --- a/packages/module/src/components/nodes/labels/NodeLabel.tsx +++ b/packages/module/src/components/nodes/labels/NodeLabel.tsx @@ -43,6 +43,7 @@ export type NodeLabelProps = { badgeBorderColor?: string; badgeClassName?: string; badgeLocation?: BadgeLocation; + hideContextMenuKebab?: boolean; } & Partial; /** @@ -77,6 +78,7 @@ const NodeLabel: React.FunctionComponent = ({ dropTarget, onContextMenu, contextMenuOpen, + hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, @@ -124,7 +126,7 @@ const NodeLabel: React.FunctionComponent = ({ const height = Math.max(textSize.height, badgeSize?.height ?? 0) + paddingY * 2; const iconSpace = labelIconClass || labelIcon ? (height + paddingY * 0.5) / 2 : 0; const actionSpace = actionIcon && actionSize ? actionSize.width : 0; - const contextSpace = onContextMenu && contextSize ? contextSize.width : 0; + const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width : 0; const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + actionSpace + contextSpace + paddingX; const secondaryWidth = secondaryLabel && secondaryTextSize ? secondaryTextSize.width + 2 * paddingX : 0; const width = Math.max(primaryWidth, secondaryWidth); @@ -184,6 +186,7 @@ const NodeLabel: React.FunctionComponent = ({ labelIcon, actionIcon, actionSize, + hideContextMenuKebab, onContextMenu, contextSize, secondaryLabel, @@ -293,7 +296,7 @@ const NodeLabel: React.FunctionComponent = ({ /> )} - {textSize && onContextMenu && ( + {textSize && onContextMenu && !hideContextMenuKebab && ( <> void; /** Flag indicating that the context menu for the node is currently open */ contextMenuOpen?: boolean; + /** Hide context menu kebab for the node */ + hideContextMenuKebab?: boolean; /** Number of shadowed pills to show */ shadowCount?: number; /** Offset for each shadow */ diff --git a/packages/module/src/pipelines/components/nodes/TaskPill.tsx b/packages/module/src/pipelines/components/nodes/TaskPill.tsx index c2318db..7fb1f44 100644 --- a/packages/module/src/pipelines/components/nodes/TaskPill.tsx +++ b/packages/module/src/pipelines/components/nodes/TaskPill.tsx @@ -71,6 +71,7 @@ const TaskPill: React.FC = observer( hasWhenExpression = false, onContextMenu, contextMenuOpen, + hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, @@ -160,7 +161,7 @@ const TaskPill: React.FC = observer( const actionSpace = actionIcon && actionSize ? actionSize.width + paddingX : 0; const contextStartX = actionStartX + actionSpace; - const contextSpace = onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0; + const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0; const pillWidth = contextStartX + contextSpace + paddingX / 2; @@ -198,6 +199,7 @@ const TaskPill: React.FC = observer( badge, actionIcon, actionSize, + hideContextMenuKebab, onContextMenu, contextSize, verticalLayout, @@ -429,7 +431,7 @@ const TaskPill: React.FC = observer( /> )} - {textSize && onContextMenu && ( + {textSize && onContextMenu && !hideContextMenuKebab && ( <>