#2137 Resize Right Flyout using drag

canvas_modules/common-canvas/__tests__/common-canvas/common-canvas-test.js

@@ -65,7 +65,8 @@ describe("CommonCanvas renders correctly", () => {
 		const config = {};
 		const canvasParams = { showRightFlyout: false };
 		const wrapper = createCommonCanvas(config, canvasController, canvasParams);
-		expect(wrapper.find(CommonCanvasRightFlyout)).to.have.length(1);
+		// When showRightFlyout is false then Right Flyout should not be visible
+		expect(wrapper.find(CommonCanvasRightFlyout)).to.have.length(0);
 		expect(canvasController.isRightFlyoutOpen() === false).to.be.true;
 	});
 

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

@@ -114,6 +114,11 @@ class CommonCanvasPanels extends React.Component {
 		return false;
 	}
 
+	// Returns true if the right flyout should be displayed.
+	isRightPanelOpen() {
+		return this.props.rightFlyoutIsOpen;
+	}
+
 	// Returns a JSX object for the contents of the left panel. If the application
 	// sets enablePaletteLayout to None this indicates the app wamts its own content
 	// to go into the left panel provided by leftFlyoutContent provided to <CommonCanvas>
@@ -138,7 +143,8 @@ class CommonCanvasPanels extends React.Component {
 				containingDivId={this.props.containingDivId}
 			/>
 		);
-		const rightFlyout = (<CommonCanvasRightFlyout />);
+		const rightFlyoutOpen = this.isRightPanelOpen();
+		const rightFlyout = rightFlyoutOpen ? (<CommonCanvasRightFlyout containingDivId={this.props.containingDivId} canvasController={this.props.canvasController} />) : null;
 		const leftFlyoutIsOpen = this.isLeftPanelOpen();
 		const leftFlyout = leftFlyoutIsOpen ? this.generateLeftFlyout() : null;
 
@@ -288,6 +294,7 @@ const mapStateToProps = (state, ownProps) => ({
 	enableNarrowPalette: state.canvasconfig.enableNarrowPalette,
 	enableLeftFlyoutUnderToolbar: state.canvasconfig.enableLeftFlyoutUnderToolbar,
 	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	enableRightFlyoutDragToResize: state.canvasconfig.enableRightFlyoutDragToResize,
 	toolbarIsOpen: (state.canvasconfig.enableToolbarLayout !== PALETTE_LAYOUT_NONE),
 	paletteIsOpen: state.palette.isOpen,
 	topPanelIsOpen: state.toppanel.isOpen,

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

@@ -19,24 +19,90 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import Logger from "../logging/canvas-logger.js";
 
+const MAX_WIDTH_EXTEND_PERCENT = 0.7; // Should cover atmost 70% of available width
+const MIN_WIDTH = 300;
 class CommonCanvasRightFlyout extends React.Component {
 	constructor(props) {
 		super(props);
+
 		this.logger = new Logger("CC-RightFlyout");
+
+		this.onMouseUp = this.onMouseUp.bind(this);
+		this.onMouseDown = this.onMouseDown.bind(this);
+		this.onMouseMoveX = this.onMouseMoveX.bind(this);
+
+		this.getRightFlyoutResizeContent = this.getRightFlyoutResizeContent.bind(this);
+	}
+
+	onMouseDown(e) {
+		if (e.button === 0) {
+			document.addEventListener("mousemove", this.onMouseMoveX, true);
+			document.addEventListener("mouseup", this.onMouseUp, true);
+			this.posX = e.clientX;
+			// Prevent panel contents being dragged in the test harness (which can
+			// happen even though draggable is false for the contents!)
+			e.preventDefault();
+		}
+	}
+
+	onMouseUp() {
+		document.removeEventListener("mousemove", this.onMouseMoveX, true);
+		document.removeEventListener("mouseup", this.onMouseUp, true);
+	}
+
+	onMouseMoveX(e) {
+		if (e.clientX) {
+			const diff = e.clientX - this.posX;
+			const wth = this.props.panelWidth - diff;
+			this.props.canvasController.setRightPanelWidth(this.limitWidth(wth));
+			this.posX = e.clientX;
+		}
+	}
+
+	// Returns content to enable/disable resize based on feature flag.
+	getRightFlyoutResizeContent() {
+		let resizeContent = null;
+
+		if (this.props.enableRightFlyoutDragToResize) {
+			resizeContent = (<div className="right-flyout-drag" onMouseDown={this.onMouseDown} />);
+		}
+
+		return resizeContent;
+	}
+
+	// Returns a new width for right panel limited by the need to enforce
+	// a minimum and maximum width
+	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 canvasWidth = canvasContainer.getBoundingClientRect().width;
+			const maxWidth = (canvasWidth + this.props.panelWidth) * MAX_WIDTH_EXTEND_PERCENT;
+			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.
+		const rightFlyoutDragContent = this.getRightFlyoutResizeContent();
 
 		if (this.props.content && this.props.isOpen) {
+			const widthPx = this.limitWidth(this.props.panelWidth) + "px";
 			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" style={{ width: widthPx }} >
+					{rightFlyoutDragContent}
+					<div className={rfClass}>
+						{this.props.content}
+					</div>
 				</div>
 			);
 		}
@@ -46,16 +112,24 @@ 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,
+	enableRightFlyoutDragToResize: 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,
+	enableRightFlyoutDragToResize: state.canvasconfig.enableRightFlyoutDragToResize,
+	panelWidth: state.rightflyout.panelWidth
 });
 
 export default connect(mapStateToProps)(CommonCanvasRightFlyout);

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

@@ -44,18 +44,43 @@ $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;
+	min-height: fit-content;
+	min-width: fit-content;
+}
+
 .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%;
+}
 
+// Allow content in child to expand on drag using flex
+.right-flyout-panel {
+	min-width: fit-content;
+	display: flex;
+	flex: 1;
 	user-select: none; /* Prevent elements from being selectable */
 	background-color: $layer-01;
 }
 
+.right-flyout-drag {
+	cursor: ew-resize;
+	flex: 0 0 0.5px;
+	border: $panel-border-color;
+	background: $layer-01;
+	transition: all 0.2s ease-in;
+	&:hover {
+		flex: 0 0 $spacing-01;
+		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);
@@ -53,6 +53,12 @@ class PropertiesMain extends React.Component {
 		if (this.props.propertiesInfo.initialEditorSize) {
 			this.propertiesController.setEditorSize(this.props.propertiesInfo.initialEditorSize);
 		}
+		this.flyoutWidth = {
+			small: FLYOUT_WIDTH_SMALL,
+			medium: FLYOUT_WIDTH_MEDIUM,
+			large: FLYOUT_WIDTH_LARGE,
+			max: FLYOUT_WIDTH_MAX
+		};
 		this.propertiesController.setCustomControls(props.customControls);
 		this.propertiesController.setConditionOps(props.customConditionOps);
 		this.propertiesController.setLight(props.light);
@@ -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(".common-canvas .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() {
@@ -589,21 +604,24 @@ class PropertiesMain extends React.Component {
 					"properties-light-disabled": !this.props.light
 				},
 				propertiesSizeClassname);
+
 			return (
 				<Provider store={this.propertiesController.getStore()}>
-					<aside
-						aria-label={PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_LABEL, { label: propertiesLabel })}
-						role="complementary"
-						ref={ (ref) => (this.commonProperties = ref) }
-						className={className}
-						onBlur={this.onBlur}
-						style={overrideStyle}
-					>
-						{propertiesTitle}
-						{propertiesDialog}
-						{buttonsContainer}
-					</aside>
-					{resizeBtn}
+					<div className="properties-right-flyout-container">
+						<aside
+							aria-label={PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIES_LABEL, { label: propertiesLabel })}
+							role="complementary"
+							ref={ (ref) => (this.commonProperties = ref) }
+							className={className}
+							onBlur={this.onBlur}
+							style={overrideStyle}
+						>
+							{propertiesTitle}
+							{propertiesDialog}
+							{buttonsContainer}
+						</aside>
+						{resizeBtn}
+					</div>
 				</Provider>
 			);
 		}

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

@@ -14,17 +14,26 @@
  * 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-container {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+}
+
 .properties-right-flyout {
 	// Set the font explicitly to 14px to shrink them across the entire properties editor
+	display: flex;
+	min-width: 100%;
+	min-height: 100%;
+	flex: 1;
 	font-size: 14px;
 	width: 0;
 	height: 100%;
 	overflow: hidden;
-	border-left: 1px solid $layer-accent-01;
 	outline: none;
 	display: flex;
 	flex-direction: column;

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

@@ -84,6 +84,7 @@ export default class ConfigUtils {
 			enableDropZoneOnExternalDrag: false,
 			enableLeftFlyoutUnderToolbar: false,
 			enableRightFlyoutUnderToolbar: false,
+			enableRightFlyoutDragToResize: false,
 			enablePanIntoViewOnOpen: false,
 			enableZoomIntoSubFlows: false,
 			enableBrowserEditMenu: true,

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

@@ -1282,6 +1282,10 @@ export default class ObjectModel {
 		return this.store.isRightFlyoutOpen();
 	}
 
+	setRightPanelWidth(wdth) {
+		this.store.dispatch({ type: "SET_RIGHT_FLYOUT_CONFIG", data: { config: { panelWidth: wdth } } });
+	}
+
 	// ---------------------------------------------------------------------------
 	// Bottom panel methods
 	// ---------------------------------------------------------------------------

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

@@ -75,7 +75,7 @@ export default class CanavasStore {
 			texttoolbar: { isOpen: false },
 			contextmenu: { isOpen: false, menuDef: [], source: {} },
 			leftflyout: {},
-			rightflyout: {},
+			rightflyout: { panelWidth: 300 },
 			bottompanel: { panelHeight: 393 },
 			toppanel: { }
 		};

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

@@ -18,9 +18,7 @@ export default (state = {}, action) => {
 	switch (action.type) {
 	case "SET_RIGHT_FLYOUT_CONFIG": {
 		if (action.data.config) {
-			return {
-				content: action.data.config.content,
-				isOpen: action.data.config.isOpen };
+			return Object.assign({}, state, action.data.config);
 		}
 		return state;
 	}

canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js

@@ -42,7 +42,9 @@ describe("Testing bottom panel", function() {
 		// Test bottom panel does not exceed max-size successfully
 		cy.moveBottomPanelDivider(50);
 		cy.verifyBottomPanelHeight(650);
+	});
 
+	it("Testing bottom panel max height with rightFlyout open", function() {
 		// Test bottom panel does not exceed max-size successfully with the right flyout open
 		cy.setCanvasConfig({ "selectedShowRightFlyout": true });
 		cy.moveBottomPanelDivider(50);