chore: add some resizing structure

Author: TeodorTaushanov

packages/main/src/Popover.ts

@@ -217,12 +217,30 @@ class Popover extends Popup {
 	_width?: string;
 	_height?: string;
 
+	_resizeMouseMoveHandler: (e: MouseEvent) => void;
+	_resizeMouseUpHandler: (e: MouseEvent) => void;
+	_y?: number;
+	_x?: number;
+	_isRTL?: boolean;
+	_initialX?: number;
+	_initialY?: number;
+	_initialWidth?: number;
+	_initialHeight?: number;
+	_initialTop?: number;
+	_initialLeft?: number;
+	_minWidth?: number;
+	_cachedMinHeight?: number;
+	_draggedOrResized = false;
+
 	static get VIEWPORT_MARGIN() {
 		return 10; // px
 	}
 
 	constructor() {
 		super();
+
+		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
+		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
 	}
 
 	/**
@@ -873,6 +891,131 @@ class Popover extends Popup {
 
 		return this.horizontalAlign;
 	}
+
+	get _showResizeHandle() {
+		return this.resizable && this.onDesktop;
+	}
+
+	_onResizeMouseDown(e: MouseEvent) {
+		if (!this.resizable) {
+			return;
+		}
+
+		e.preventDefault();
+
+		const {
+			top,
+			left,
+		} = this.getBoundingClientRect();
+		const {
+			width,
+			height,
+			minWidth,
+		} = window.getComputedStyle(this);
+
+		this._initialX = e.clientX;
+		this._initialY = e.clientY;
+		this._initialWidth = Number.parseFloat(width);
+		this._initialHeight = Number.parseFloat(height);
+		this._initialTop = top;
+		this._initialLeft = left;
+		this._minWidth = Number.parseFloat(minWidth);
+		// this._cachedMinHeight = this._minHeight;
+
+		Object.assign(this.style, {
+			top: `${top}px`,
+			left: `${left}px`,
+		});
+
+		this._draggedOrResized = true;
+		this._attachMouseResizeHandlers();
+	}
+
+	_onResizeMouseMove(e: MouseEvent) {
+		const { clientX, clientY } = e;
+
+		let newWidth,
+			newLeft;
+
+		if (this._isRTL) {
+			newWidth = clamp(
+				this._initialWidth! - (clientX - this._initialX!),
+				this._minWidth!,
+				this._initialLeft! + this._initialWidth!,
+			);
+
+			// check if width is changed to avoid "left" jumping when max width is reached
+			Object.assign(this.style, {
+				width: `${newWidth}px`,
+			});
+
+			const deltaWidth = newWidth - this.getBoundingClientRect().width;
+			const rightEdge = this._initialLeft! + this._initialWidth! + deltaWidth;
+
+			newLeft = clamp(
+				rightEdge - newWidth,
+				0,
+				rightEdge - this._minWidth!,
+			);
+		} else {
+			newWidth = clamp(
+				this._initialWidth! + (clientX - this._initialX!),
+				this._minWidth!,
+				window.innerWidth - this._initialLeft!,
+			);
+		}
+
+		const newHeight = clamp(
+			this._initialHeight! + (clientY - this._initialY!),
+			this._cachedMinHeight!,
+			window.innerHeight - this._initialTop!,
+		);
+
+		Object.assign(this.style, {
+			height: `${newHeight}px`,
+			width: `${newWidth}px`,
+			left: this._isRTL ? `${newLeft}px` : undefined,
+		});
+	}
+
+	_onResizeMouseUp() {
+		delete this._initialX;
+		delete this._initialY;
+		delete this._initialWidth;
+		delete this._initialHeight;
+		delete this._initialTop;
+		delete this._initialLeft;
+		delete this._minWidth;
+		delete this._cachedMinHeight;
+
+		this._detachMouseResizeHandlers();
+	}
+
+	_handleDragStart(e: DragEvent) {
+		if (this.draggable) {
+			e.preventDefault();
+		}
+	}
+
+	_attachMouseResizeHandlers() {
+		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
+		window.addEventListener("mouseup", this._resizeMouseUpHandler);
+		this.addEventListener("ui5-before-close", this._revertSize, { once: true });
+	}
+
+	_detachMouseResizeHandlers() {
+		window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
+		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
+	}
+
+	_revertSize = () => {
+		Object.assign(this.style, {
+			top: "",
+			left: "",
+			width: "",
+			height: "",
+		});
+	}
 }
 
 const instanceOfPopover = (object: any): object is Popover => {

packages/main/src/PopoverTemplate.tsx

@@ -35,9 +35,11 @@ function afterContent(this: Popover) {
 			</footer>
 		}
 
-		{this.resizable &&
-			<div class="ui5-popover-resize-handle">
-				<Icon name={resizeCorner} class="ui5-popover-resize-handle-icon" mode="Decorative" />
+		{this._showResizeHandle &&
+			<div class="ui5-popover-resize-handle"
+				 onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner} />
 			</div>
 		}
 	</>);

packages/main/src/themes/Popover.css

@@ -101,11 +101,12 @@
 	z-index: 10;
 }
 
-.ui5-popover-resize-handle .ui5-popover-resize-handle-icon {
+.ui5-popover-resize-handle [ui5-icon] {
 	position: absolute;
 	width: 1rem;
 	height: 1rem;
 	cursor: inherit;
+	color: var(--sapButton_Lite_TextColor);
 }
 
 .ui5-popover-resize-handle-top-right .ui5-popover-resize-handle {
@@ -114,7 +115,7 @@
 	cursor: ne-resize;
 }
 
-.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle .ui5-popover-resize-handle-icon {
+.ui5-popover-resize-handle-top-right .ui5-popover-resize-handle [ui5-icon] {
 	bottom: 0;
 	left: 0;
 	transform: rotate(270deg);
@@ -126,7 +127,7 @@
 	cursor: nw-resize;
 }
 
-.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle .ui5-popover-resize-handle-icon {
+.ui5-popover-resize-handle-top-left .ui5-popover-resize-handle [ui5-icon] {
 	bottom: 0;
 	right: 0;
 	transform: rotate(180deg);
@@ -138,7 +139,7 @@
 	cursor: ne-resize;
 }
 
-.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle .ui5-popover-resize-handle-icon {
+.ui5-popover-resize-handle-bottom-left .ui5-popover-resize-handle [ui5-icon] {
 	top: 0;
 	right: 0;
 	transform: rotate(90deg);
@@ -150,7 +151,7 @@
 	cursor: nw-resize;
 }
 
-.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle .ui5-popover-resize-handle-icon {
+.ui5-popover-resize-handle-bottom-right .ui5-popover-resize-handle [ui5-icon] {
 	top: 0;
 	left: 0;
 }