Fix Right Flyout Drag and apply defualt width of 100%

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

canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx

@@ -20,26 +20,41 @@ import PropTypes from "prop-types";
 import Logger from "../logging/canvas-logger.js";
 
 const MAX_WIDTH_EXTEND_PERCENT = 0.7; // Should cover at most 70% of available width
-const MIN_WIDTH = 300;
+const MIN_WIDTH = 0;
+const DEFAULT_WIDTH = "100%";
 class CommonCanvasRightFlyout extends React.Component {
 	constructor(props) {
 		super(props);
 
+		this.minWidth = MIN_WIDTH;
+		this.initialWidth = MIN_WIDTH;
+
 		this.logger = new Logger("CC-RightFlyout");
 
+		this.rightFlyoutRef = React.createRef();
+
 		this.onMouseUp = this.onMouseUp.bind(this);
 		this.onMouseDown = this.onMouseDown.bind(this);
 		this.onMouseMoveX = this.onMouseMoveX.bind(this);
+		this.getCurrentWidth = this.getCurrentWidth.bind(this);
 
 		this.getRightFlyoutResizeContent = this.getRightFlyoutResizeContent.bind(this);
 	}
 
+	componentDidMount() {
+		const currentWidth = this.getCurrentWidth();
+		this.initialWidth = currentWidth;
+	}
+
 	componentWillUnmount() {
 		// Reset the flyout width to adjust as per content width in next render
 		this.props.canvasController.setRightFlyoutWidth(0);
 	}
 
 	onMouseDown(e) {
+		const currentWidth = this.getCurrentWidth();
+		this.props.canvasController.setRightFlyoutWidth(this.limitWidth(currentWidth));
+
 		if (e.button === 0) {
 			document.addEventListener("mousemove", this.onMouseMoveX, true);
 			document.addEventListener("mouseup", this.onMouseUp, true);
@@ -59,7 +74,10 @@ class CommonCanvasRightFlyout extends React.Component {
 		if (e.clientX) {
 			const diff = e.clientX - this.posX;
 			const wth = this.props.panelWidth - diff;
-			this.props.canvasController.setRightFlyoutWidth(this.limitWidth(wth));
+			const currentWidth = this.getCurrentWidth();
+			if (currentWidth >= this.initialWidth) {
+				this.props.canvasController.setRightFlyoutWidth(this.limitWidth(wth));
+			}
 			this.posX = e.clientX;
 		}
 	}
@@ -75,6 +93,15 @@ class CommonCanvasRightFlyout extends React.Component {
 		return resizeContent;
 	}
 
+	getCurrentWidth() {
+		let currentWidth = 0;
+		const el = this.rightFlyoutRef?.current;
+		if (el) {
+			currentWidth = el?.offsetWidth;
+		}
+		return currentWidth;
+	}
+
 	// Returns a new width for right panel limited by the need to enforce
 	// a minimum and maximum width
 	limitWidth(wd) {
@@ -85,7 +112,7 @@ class CommonCanvasRightFlyout extends React.Component {
 			// Max Width should be 70% of the total available width (canvas + rightflyout)
 			const canvasWidth = canvasContainer.getBoundingClientRect().width;
 			const maxWidth = (canvasWidth + this.props.panelWidth) * MAX_WIDTH_EXTEND_PERCENT;
-			width = Math.min(Math.max(width, MIN_WIDTH), maxWidth);
+			width = Math.min(Math.max(width, this.initialWidth), maxWidth);
 		}
 
 		return width;
@@ -98,14 +125,17 @@ class CommonCanvasRightFlyout extends React.Component {
 		const rightFlyoutDragContent = this.getRightFlyoutResizeContent();
 
 		if (this.props.content && this.props.isOpen) {
-			const widthPx = this.limitWidth(this.props.panelWidth) + "px";
+			let widthPx = this.limitWidth(this.props.panelWidth) + "px";
+			if (this.props.panelWidth === MIN_WIDTH) {
+				widthPx = DEFAULT_WIDTH;
+			}
 			const rfClass = this.props.enableRightFlyoutUnderToolbar
 				? "right-flyout-panel under-toolbar"
 				: "right-flyout-panel";
 			rightFlyout = (
 				<div className="right-flyout-container" style={{ width: widthPx }} >
 					{rightFlyoutDragContent}
-					<div className={rfClass}>
+					<div className={rfClass} ref={this.rightFlyoutRef}>
 						{this.props.content}
 					</div>
 				</div>