#2074 Text toolbar dropdown menus not fully displayed when toolbar ne… (

#2075)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/common-canvas/canvas-controller-menu-utils.js

@@ -303,7 +303,7 @@ const createCommentMenu = (enableWYSIWYGComments) => {
 	if (enableWYSIWYGComments) {
 		return [
 			{ action: "createComment", label: getLabel("canvas.addComment"), toolbarItem: true },
-			{ action: "createWYSIWYGComment", label: getLabel("canvas.addWysiwygComment") }
+			{ action: "createWYSIWYGComment", label: getLabel("canvas.addWysiwygComment"), toolbarItem: true }
 		];
 	}
 	return { action: "createComment", label: getLabel("canvas.addComment"), toolbarItem: true };

canvas_modules/common-canvas/src/common-canvas/cc-contents.jsx

@@ -391,6 +391,7 @@ class CanvasContents extends React.Component {
 		return (
 			<CommonCanvasTextToolbar
 				canvasController={this.props.canvasController}
+				containingDivId={this.mainCanvasDivId}
 			/>);
 	}
 

canvas_modules/common-canvas/src/common-canvas/cc-text-toolbar.jsx

@@ -233,10 +233,11 @@ class CommonCanvasTextToolbar extends React.Component {
 
 		if (this.props.isOpen) {
 			textToolbar = (
-				<div className={"text-toolbar"} style={{ left: this.props.pos_x, top: this.props.pos_y }} onBlur={this.props.blurHandler}>
+				<div className={"text-toolbar floating-toolbar"} style={{ left: this.props.pos_x, top: this.props.pos_y }} onBlur={this.props.blurHandler}>
 					<Toolbar
 						config={this.getTextToolbar()}
 						instanceId={this.props.canvasController.getInstanceId()}
+						containingDivId={this.props.containingDivId}
 						toolbarActionHandler={this.props.actionHandler}
 						tooltipDirection={"top"}
 						size={"sm"}
@@ -253,6 +254,7 @@ CommonCanvasTextToolbar.propTypes = {
 	// Provided by CommonCanvas
 	intl: PropTypes.object.isRequired,
 	canvasController: PropTypes.object.isRequired,
+	containingDivId: PropTypes.string.isRequired,
 
 	// Provided by redux
 	isOpen: PropTypes.bool.isRequired,

canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js

@@ -200,6 +200,8 @@ export const TOOLBAR_PASTE = "paste";
 export const TOOLBAR_CLIPBOARD = "clipboard";
 export const TOOLBAR_CREATE_COMMENT = "createComment";
 export const TOOLBAR_CREATE_AUTO_COMMENT = "createAutoComment";
+export const TOOLBAR_CREATE_WYSIWYG_COMMENT = "createWYSIWYGComment";
+export const TOOLBAR_CREATE_AUTO_WYSIWYG_COMMENT = "createAutoWysiwygComment";
 export const TOOLBAR_SET_COMMENT_EDIT_MODE = "setCommentEditingMode";
 export const TOOLBAR_SHOW_COMMENTS = "commentsShow";
 export const TOOLBAR_HIDE_COMMENTS = "commentsHide";

canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx

@@ -32,7 +32,9 @@ import { StopFilledAlt, Play, Undo, Redo, Chat, ChatOff, Result,
 	CenterToFit, OpenPanelFilledLeft } from "@carbon/react/icons";
 import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
 	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
-	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
+	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT,
+	TOOLBAR_CREATE_WYSIWYG_COMMENT, TOOLBAR_CREATE_AUTO_WYSIWYG_COMMENT,
+	TOOLBAR_COLOR_BACKGROUND,
 	TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,
 	TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
 	TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY,
@@ -94,6 +96,8 @@ class ToolbarButtonItem extends React.Component {
 			return <Paste disabled={disabled} />;
 		case (TOOLBAR_CREATE_COMMENT):
 		case (TOOLBAR_CREATE_AUTO_COMMENT):
+		case (TOOLBAR_CREATE_WYSIWYG_COMMENT):
+		case (TOOLBAR_CREATE_AUTO_WYSIWYG_COMMENT):
 			return <AddComment disabled={disabled} />;
 		case (TOOLBAR_SHOW_COMMENTS):
 			return <Chat disabled={disabled} />;

canvas_modules/common-canvas/src/toolbar/toolbar-sub-utils.js

@@ -24,56 +24,56 @@
 // Adjust the position of the sub-area to make sure it doesn't extend
 // outside the containing divs boundary. We need to do this after the subarea
 // has been mounted so we can query its size and position.
-export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection, actionItemRect) {
-	if (!areaRef || !actionItemRect || !containingDivId) {
+export function adjustSubAreaPosition(subAreaRef, containingDivId, expandDirection, actionItemRect) {
+	if (!subAreaRef || !actionItemRect || !containingDivId) {
 		return;
 	}
 	const containingDiv = document.getElementById(containingDivId);
 	const containingDivRect = containingDiv
 		? containingDiv.getBoundingClientRect()
 		: { top: -1000, bottom: 1000, left: -1000, right: 1000 }; // To enable Jest tests.
 
-	const thisAreaRect = areaRef.getBoundingClientRect();
-
-	// If one of our parent objects contains the "floating-toolbar" class, we assume
-	// the toolbar is displayed in an 'absolute' position. This changes the offset calculations
-	// for the sub-area being displayed.
-	const isFloatingToolbar = areaRef.closest(".floating-toolbar");
+	const subAreaRect = subAreaRef.getBoundingClientRect();
 
 	// Calculate the amount that the panel/menu is outside of the containing div
 	// edges. Positive value means it is outside. Negative is inside.
-	const outsideBottom = actionItemRect.bottom + thisAreaRect.height - containingDivRect.bottom;
+	const outsideBottom = actionItemRect.bottom + subAreaRect.height - containingDivRect.bottom;
 
 	if (expandDirection === "vertical") {
-		const outsideRight = actionItemRect.left + thisAreaRect.width - containingDivRect.right;
+		const outsideRight = actionItemRect.left + subAreaRect.width - containingDivRect.right;
 
 		if (outsideBottom > 0) {
 			const topGap = actionItemRect.top - containingDivRect.top;
-			const newTop = (topGap > thisAreaRect.height)
-				? -(thisAreaRect.height)
+			const newTop = (topGap > subAreaRect.height)
+				? -(subAreaRect.height)
 				: -(outsideBottom);
 
-			areaRef.style.top = newTop + "px";
+			subAreaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
-			const newLeft = isFloatingToolbar
-				? actionItemRect.width - outsideRight
+			// If one of our parent objects contains the "floating-toolbar" class, we assume
+			// the toolbar is displayed in an 'absolute' position. This changes the offset calculations
+			// for the sub-area being displayed.
+			const floatingToolbar = subAreaRef.closest(".floating-toolbar");
+
+			const newLeft = floatingToolbar
+				? actionItemRect.left - floatingToolbar.getBoundingClientRect().left - outsideRight
 				: actionItemRect.left - containingDivRect.left - outsideRight;
-			areaRef.style.left = newLeft + "px";
+			subAreaRef.style.left = newLeft + "px";
 		}
 
 	} else {
-		const outsideRight = actionItemRect.right + thisAreaRect.width - containingDivRect.right;
+		const outsideRight = actionItemRect.right + subAreaRect.width - containingDivRect.right;
 
 		if (outsideBottom > 0) {
 			const newTop = -(outsideBottom + 2);
-			areaRef.style.top = newTop + "px";
+			subAreaRef.style.top = newTop + "px";
 		}
 
 		if (outsideRight > 0) {
-			const newLeft = -(thisAreaRect.width);
-			areaRef.style.left = newLeft + "px";
+			const newLeft = -(subAreaRect.width);
+			subAreaRef.style.left = newLeft + "px";
 		}
 	}
 }