#2137 Enable right flyout resize using drag

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

@@ -1618,6 +1618,10 @@ export default class CanvasController {
 		this.objectModel.setBottomPanelHeight(ht);
 	}
 
+	setRightPanelWidth(wdth) {
+		this.objectModel.setRightPanelWidth(wdth);
+	}
+
 	isTopPanelOpen() {
 		return this.getObjectModel().isTopPanelOpen();
 	}

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

@@ -138,7 +138,7 @@ class CommonCanvasPanels extends React.Component {
 				containingDivId={this.props.containingDivId}
 			/>
 		);
-		const rightFlyout = (<CommonCanvasRightFlyout />);
+		const rightFlyout = (<CommonCanvasRightFlyout containingDivId={this.props.containingDivId} canvasController={this.props.canvasController} />);
 		const leftFlyoutIsOpen = this.isLeftPanelOpen();
 		const leftFlyout = leftFlyoutIsOpen ? this.generateLeftFlyout() : null;
 

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

@@ -19,24 +19,71 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import Logger from "../logging/canvas-logger.js";
 
+const MIN_WIDTH = 300;
+const MAX_WIDTH_EXTEND_PERCENT = 0.7; // Should cover atmost 70% of available width
 class CommonCanvasRightFlyout extends React.Component {
 	constructor(props) {
 		super(props);
+
 		this.logger = new Logger("CC-RightFlyout");
+
+		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onMouseMoveX = this.onMouseMoveX.bind(this);
+		this.onMouseUp = this.onMouseUp.bind(this);
+	}
+
+	onMouseDown(e) {
+		if (e.button === 0) {
+			document.addEventListener("mousemove", this.onMouseMoveX, true);
+			document.addEventListener("mouseup", this.onMouseUp, true);
+			this.posX = e.clientX;
+			this.startWidth = this.commonCanvasRightFlyout.offsetWidth;
+
+			e.preventDefault();
+		}
+	}
+
+	onMouseUp() {
+		document.removeEventListener("mousemove", this.onMouseMoveX, true);
+		document.removeEventListener("mouseup", this.onMouseUp, true);
+	}
+
+	onMouseMoveX(e) {
+		if (e.clientX) {
+			const newWidth = this.startWidth + (this.posX - e.clientX);
+			this.commonCanvasRightFlyout.style.width = `${this.limitWidth(newWidth)}px`;
+			this.props.canvasController.setRightPanelWidth(newWidth);
+		}
+	}
+
+	limitWidth(wth) {
+		const canvasContainer = document.getElementById(this.props.containingDivId);
+		let width = wth;
+
+		if (canvasContainer) {
+			// Max Width should be 70% of the total available width (canvas + rightflyout)
+			const totalAvialableWidth = canvasContainer.getBoundingClientRect().width + this.commonCanvasRightFlyout.offsetWidth;
+			const maxWidth = MAX_WIDTH_EXTEND_PERCENT * totalAvialableWidth;
+			width = Math.min(Math.max(width, MIN_WIDTH), maxWidth);
+		}
+
+		return width;
 	}
 
 	render() {
 		this.logger.log("render");
-
 		let rightFlyout = <div />; // For no content, return empty <div> so grid siziing for parent <div> work correctly.
 
 		if (this.props.content && this.props.isOpen) {
 			const rfClass = this.props.enableRightFlyoutUnderToolbar
 				? "right-flyout-panel under-toolbar"
 				: "right-flyout-panel";
 			rightFlyout = (
-				<div className={rfClass}>
-					{this.props.content}
+				<div className="right-flyout-container" ref={ (ref) => (this.commonCanvasRightFlyout = ref) } >
+					<div className="right-flyout-resize-handle" onMouseDown={this.onMouseDown} />
+					<div className={rfClass}>
+						{this.props.content}
+					</div>
 				</div>
 			);
 		}
@@ -46,16 +93,22 @@ class CommonCanvasRightFlyout extends React.Component {
 }
 
 CommonCanvasRightFlyout.propTypes = {
+	// Provided by Common Canvas
+	canvasController: PropTypes.object,
+	containingDivId: PropTypes.string,
+
 	// Provided by Redux
 	isOpen: PropTypes.bool,
 	content: PropTypes.object,
-	enableRightFlyoutUnderToolbar: PropTypes.bool
+	enableRightFlyoutUnderToolbar: PropTypes.bool,
+	panelWidth: PropTypes.number
 };
 
 const mapStateToProps = (state, ownProps) => ({
 	isOpen: state.rightflyout.isOpen,
 	content: state.rightflyout.content,
-	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar
+	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	panelWidth: state.rightflyout.panelWidth
 });
 
 export default connect(mapStateToProps)(CommonCanvasRightFlyout);

canvas_modules/common-canvas/src/common-canvas/common-canvas.scss

@@ -44,18 +44,39 @@ $panel-border-color: $border-subtle-01;
 	position: relative; // This allows the State Tag to have positio: absolute
 }
 
+.right-flyout-container {
+	display: flex;
+	border-left: $panel-border-width solid $panel-border-color;
+	:hover {
+		border-left: 0px;
+	}
+}
+
 .left-flyout-panel,
 .right-flyout-panel {
 	// This combination of height and min-height enable scrolling in the child panel,
 	// I believe this is because it sets a specific height on the CSS grid cell,
 	// so the contents of the panel can adjust themselves to the height accordingly.
 	height: 0;
 	min-height: 100%;
+	min-width: 100%;
 
 	user-select: none; /* Prevent elements from being selectable */
 	background-color: $layer-01;
 }
 
+.right-flyout-resize-handle {
+	cursor: ew-resize;
+	flex: 0 0 $spacing-01;
+	border: $panel-border-color;
+	border-width: 1px;
+	background: $layer-01;
+	transition: all 0.2s ease-in;
+	&:hover {
+		background: $button-tertiary;
+	}
+}
+
 .bottom-panel {
 	display: flex;
 	flex-direction: column;

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx

@@ -37,7 +37,7 @@ import TitleEditor from "./../components/title-editor";
 import classNames from "classnames";
 
 import { injectIntl } from "react-intl";
-import styles from "./properties-main-widths.scss";
+import styles from "./properties-main-widths.module.scss";
 
 const FLYOUT_WIDTH_SMALL = parseInt(styles.flyoutWidthSmall, 10);
 const FLYOUT_WIDTH_MEDIUM = parseInt(styles.flyoutWidthMedium, 10);
@@ -88,6 +88,12 @@ class PropertiesMain extends React.Component {
 			showPropertiesButtons: true,
 			editorSize: editorSize
 		};
+		this.flyoutWidth = {
+			small: FLYOUT_WIDTH_SMALL,
+			medium: FLYOUT_WIDTH_MEDIUM,
+			large: FLYOUT_WIDTH_LARGE,
+			max: FLYOUT_WIDTH_MAX
+		};
 		this.applyPropertiesEditing = this.applyPropertiesEditing.bind(this);
 		this.showPropertiesButtons = this.showPropertiesButtons.bind(this);
 		this.updateEditorSize = this.updateEditorSize.bind(this);
@@ -96,6 +102,7 @@ class PropertiesMain extends React.Component {
 		this._getResizeButton = this._getResizeButton.bind(this);
 		this._isResizeButtonRequired = this._isResizeButtonRequired.bind(this);
 		this.onBlur = this.onBlur.bind(this);
+		this.updateRightFlyoutWidth = this.updateRightFlyoutWidth.bind(this);
 	}
 
 	componentDidMount() {
@@ -420,11 +427,19 @@ class PropertiesMain extends React.Component {
 		this.setState({ showPropertiesButtons: state });
 	}
 
+	updateRightFlyoutWidth(size) {
+		const element = document.querySelector(".right-flyout-container");
+		if (element) {
+			element.style.width = `${this.flyoutWidth[size]}px`;
+		}
+	}
+
 	updateEditorSize(newEditorSize) {
 		this.setState({
 			editorSize: newEditorSize
 		});
 		this.propertiesController.setEditorSize(newEditorSize);
+		this.updateRightFlyoutWidth(newEditorSize);
 	}
 
 	resize() {
@@ -493,6 +508,7 @@ class PropertiesMain extends React.Component {
 					showPropertiesButtons={this.state.showPropertiesButtons}
 					disableSaveOnRequiredErrors={this.props.propertiesConfig.disableSaveOnRequiredErrors}
 				/>);
+
 				if (this._isResizeButtonRequired()) {
 					const resizeIcon = this._getResizeButton();
 					// Resize button label can be "Expand" or "Contract"

canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss

@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-@import "./properties-main-widths.scss";
+@import "./properties-main-widths.module.scss";
 $properties-modal-buttons-height: $spacing-10;
 $properties-resize-button-size: $spacing-06;
 
 .properties-right-flyout {
 	// Set the font explicitly to 14px to shrink them across the entire properties editor
 	font-size: 14px;
-	width: 0;
+	min-width: 100%;
 	height: 100%;
 	overflow: hidden;
-	border-left: 1px solid $layer-accent-01;
 	outline: none;
 	display: flex;
 	flex-direction: column;
+	position: relative;
 	transition: motion(entrance, expressive) $duration-moderate-01;
 
 	&.properties-small {

canvas_modules/common-canvas/src/object-model/object-model.js

@@ -1298,6 +1298,10 @@ export default class ObjectModel {
 		this.store.dispatch({ type: "SET_BOTTOM_PANEL_CONFIG", data: { config: { panelHeight: ht } } });
 	}
 
+	setRightPanelWidth(wdth) {
+		this.store.dispatch({ type: "SET_RIGHT_FLYOUT_WIDTH", data: { config: { panelWidth: wdth } } });
+	}
+
 	// ---------------------------------------------------------------------------
 	// Top panel methods
 	// ---------------------------------------------------------------------------

canvas_modules/common-canvas/src/object-model/redux/reducers/rightflyout.js

@@ -25,6 +25,16 @@ export default (state = {}, action) => {
 		return state;
 	}
 
+	case "SET_RIGHT_FLYOUT_WIDTH": {
+		if (action.data.config.panelWidth) {
+			return {
+				...state,
+				panelWidth: action.data.config.panelWidth
+			};
+		}
+		return state;
+	}
+
 	default:
 		return state;
 	}