From e0d153926cd9511600bdc6435b3a0007e656e528 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Tue, 6 Aug 2024 16:18:56 +0100
Subject: [PATCH] feat(hud customizer): Add resizing

---
 layout/hud/hud.xml        |   3 +-
 scripts/hud/customizer.ts | 282 +++++++++++++++++++++++---------------
 styles/hud/hud.scss       |  13 +-
 3 files changed, 179 insertions(+), 119 deletions(-)

diff --git a/layout/hud/hud.xml b/layout/hud/hud.xml
index fc9228be..116b92fe 100644
--- a/layout/hud/hud.xml
+++ b/layout/hud/hud.xml
@@ -28,8 +28,9 @@
 				</Button>
 				<NumberEntry id="HudCustomizerGridSize" class="hud-customizer-settings__gridsize" min="4" max="12" onvaluechanged="HudCustomizer.updateGridSize()" />
 			</Panel>
-			<Panel id="HudCustomizerKnobContainer" class="hud-customizer__knob-container" hittest="false" />
+
 			<Panel id="HudCustomizerGrid" class="hud-customizer__grid" hittest="false" hittestchildren="false" />
+			<Panel id="HudCustomizerVirtualKnob" />
 		</Panel>
 		
 		<HudTrickTracker id="TrickTracker" />
diff --git a/scripts/hud/customizer.ts b/scripts/hud/customizer.ts
index b50461d5..d7930073 100644
--- a/scripts/hud/customizer.ts
+++ b/scripts/hud/customizer.ts
@@ -40,6 +40,40 @@ namespace HudCustomizer {
 		TOP_LEFT: 8
 	};
 
+	enum DragMode {
+		MOVE = 0,
+		RESIZE_TOP = 1,
+		RESIZE_TOP_RIGHT = 2,
+		RESIZE_RIGHT = 3,
+		RESIZE_BOTTOM_RIGHT = 4,
+		RESIZE_BOTTOM = 5,
+		RESIZE_BOTTOM_LEFT = 6,
+		RESIZE_LEFT = 7,
+		RESIZE_TOP_LEFT = 8
+	}
+
+	const resizeVector: ReadonlyMap<Exclude<DragMode, DragMode.MOVE>, [number, number]> = new Map([
+		[DragMode.RESIZE_TOP, [0, -1]],
+		[DragMode.RESIZE_TOP_RIGHT, [1, -1]],
+		[DragMode.RESIZE_RIGHT, [1, 0]],
+		[DragMode.RESIZE_BOTTOM_RIGHT, [1, 1]],
+		[DragMode.RESIZE_BOTTOM, [0, 1]],
+		[DragMode.RESIZE_BOTTOM_LEFT, [-1, 1]],
+		[DragMode.RESIZE_LEFT, [-1, 0]],
+		[DragMode.RESIZE_TOP_LEFT, [-1, -1]]
+	]);
+
+	function parsePx(str: string): number | undefined {
+		if (str?.slice(-2) === 'px') {
+			return Number.parseFloat(str.slice(0, -2));
+		}
+		return undefined;
+	}
+
+	function getMinSize(panel: Panel): [number, number] {
+		return [parsePx(panel.style.minWidth) ?? 0, parsePx(panel.style.minHeight) ?? 0];
+	}
+
 	// Tuple of X, Y axis snaps respectively
 	const DEFAULT_SNAP_MODES: Snaps = [SnapMode.OFF, SnapMode.OFF];
 	const DEFAULT_GRID_SIZE = 5;
@@ -48,6 +82,7 @@ namespace HudCustomizer {
 		components: {
 			[id: string]: {
 				position: LayoutUtil.Position;
+				size: LayoutUtil.Size;
 				snaps: [number, number];
 			};
 		};
@@ -60,6 +95,7 @@ namespace HudCustomizer {
 		panel: Panel;
 		snaps: Snaps;
 		position: LayoutUtil.Position;
+		size: LayoutUtil.Size;
 		properties?: Record<string, unknown>;
 	}
 
@@ -131,10 +167,10 @@ namespace HudCustomizer {
 		customizer: $('#HudCustomizer')!,
 		virtual: $('#HudCustomizerVirtual')!,
 		virtualName: $<Label>('#HudCustomizerVirtualName')!,
+		virtualKnob: $('#HudCustomizerVirtualKnob')!,
 		snaps: $('#HudCustomizerSnaps')!,
 		grid: $('#HudCustomizerGrid')!,
-		gridSize: $<NumberEntry>('#HudCustomizerGridSize')!,
-		knobContainer: $('#HudCustomizerKnobContainer')!
+		gridSize: $<NumberEntry>('#HudCustomizerGridSize')!
 	};
 
 	let components: Record<string, Component>;
@@ -147,11 +183,7 @@ namespace HudCustomizer {
 	let dragEndHandle: number | undefined;
 	let onThinkHandle: number | undefined;
 
-	// TODO: Unused. Didn't get very far with resize stuff, behaviour should be
-	// similar to dragging the virtual panel.
-	let knobDragStartHandle: number | undefined;
-	let knobDragEndHandle: number | undefined;
-	let knobOnThinkHandle: number | undefined;
+	let dragMode: DragMode | undefined;
 
 	let gridSize = 5;
 
@@ -179,6 +211,7 @@ namespace HudCustomizer {
 
 			saveData.components[id] = {
 				position: [posX, posY],
+				size: LayoutUtil.getSize(component.panel),
 				snaps: component.snaps
 			};
 		}
@@ -208,11 +241,15 @@ namespace HudCustomizer {
 		Object.values(ResizeDirection)
 			.filter((x) => !Number.isNaN(+x))
 			.forEach((dir) => {
-				resizeKnobs[dir] = $.CreatePanel('Button', panels.knobContainer, `Resize_${ResizeDirection[dir]}`, {
+				resizeKnobs[dir] = $.CreatePanel('Button', panels.customizer, `Resize_${ResizeDirection[dir]}`, {
 					class: 'hud-customizer__resize-knob',
 					draggable: true,
 					hittest: true
 				});
+				$.RegisterEventHandler('DragStart', resizeKnobs[dir], (...args) =>
+					onStartDrag(dir, panels.virtualKnob, ...args)
+				);
+				$.RegisterEventHandler('DragEnd', resizeKnobs[dir], () => onEndDrag());
 			});
 
 		components = {};
@@ -222,7 +259,7 @@ namespace HudCustomizer {
 			.forEach((panel) => loadComponentPanel(layoutData?.components[panel.id], panel));
 	}
 
-	function loadComponentPanel(component: Pick<Component, 'position' | 'snaps'> | undefined, panel: Panel) {
+	function loadComponentPanel(component: Pick<Component, 'position' | 'size' | 'snaps'> | undefined, panel: Panel) {
 		if (component) {
 			for (const [i, snap] of component.snaps.entries()) {
 				if (!Object.values(SnapMode).includes(snap)) {
@@ -240,7 +277,7 @@ namespace HudCustomizer {
 				const isX = i === 0;
 				const max = isX ? 1920 : 1080;
 				const sf = snaps[i][component.snaps[i]].sizeFactor;
-				const panelLen = isX ? LayoutUtil.getWidth(panel) : LayoutUtil.getHeight(panel);
+				const panelLen = component.size[i];
 				let layoutLen = len - panelLen * sf;
 				const maxOOB = 16;
 
@@ -259,7 +296,7 @@ namespace HudCustomizer {
 				return layoutLen;
 			}) as LayoutUtil.Position;
 
-			LayoutUtil.setPosition(panel, layoutPos);
+			LayoutUtil.setPositionAndSize(panel, layoutPos, component.size);
 
 			components[panel.id] = {
 				panel,
@@ -294,6 +331,7 @@ namespace HudCustomizer {
 			components[panel.id] = {
 				panel,
 				position: LayoutUtil.getPosition(panel),
+				size: size,
 				snaps: DEFAULT_SNAP_MODES
 			};
 		}
@@ -334,159 +372,185 @@ namespace HudCustomizer {
 
 		activeComponent.panel.AddClass('hud-customizable--active');
 
-		const [[x, y], [width, height]] = LayoutUtil.getPositionAndSize(component.panel);
+		const [position, size] = LayoutUtil.getPositionAndSize(component.panel);
 
 		// Set the virtual panel's position and size to the component we just hovered over
-		LayoutUtil.setPositionAndSize(panels.virtual, [x, y], [width, height]);
-		LayoutUtil.setPositionAndSize(panels.knobContainer, [x, y], [width, height]);
+		LayoutUtil.setPositionAndSize(panels.virtual, position, size);
 
-		const halfWidth = width / 2;
-		const halfHeight = height / 2;
-		let plusX, plusY;
-		for (const [dir, knob] of Object.entries(resizeKnobs)) {
-			switch (+dir) {
-				case ResizeDirection.TOP:
-					plusX = halfWidth;
-					plusY = 0;
-					break;
-				case ResizeDirection.TOP_RIGHT:
-					plusX = width;
-					plusY = 0;
-					break;
-				case ResizeDirection.RIGHT:
-					plusX = width;
-					plusY = halfHeight;
-					break;
-				case ResizeDirection.BOTTOM_RIGHT:
-					plusX = width;
-					plusY = height;
-					break;
-				case ResizeDirection.BOTTOM:
-					plusX = halfWidth;
-					plusY = height;
-					break;
-				case ResizeDirection.BOTTOM_LEFT:
-					plusX = 0;
-					plusY = height;
-					break;
-				case ResizeDirection.LEFT:
-					plusX = 0;
-					plusY = halfHeight;
-					break;
-				case ResizeDirection.TOP_LEFT:
-					plusX = 0;
-					plusY = 0;
-					break;
-			}
-
-			$.Msg({ x, y, width, height, dir, plusX, plusY });
-
-			LayoutUtil.setPosition(knob, [plusX, plusY]);
-		}
+		updateResizeKnobs(position, size);
 
 		// This is going to be weird to localise, but I guess we could do it, probably in V2 when we can
 		// define the locale string in the `customisable` XML property.
 		panels.virtualName.text = activeComponent.panel.id;
 		// TODO: This text looks TERRIBLE. Better to just have a constant size text for every component
 		// place text above component (left-aligned)
-		const stupidFontSizeThing = Math.min(
-			LayoutUtil.getHeight(activeComponent.panel) / 2,
-			LayoutUtil.getWidth(activeComponent.panel) / 2
-		);
 
-		panels.virtualName.style.fontSize = stupidFontSizeThing;
+		updateVirtualPanelFontSize();
 
 		snaps[0][activeComponent.snaps[0]].button.SetSelected(true);
-		snaps[1][activeComponent.snaps[1]].button.SetSelected(true); 
+		snaps[1][activeComponent.snaps[1]].button.SetSelected(true);
 
 		if (dragStartHandle) {
 			$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
 		}
+		if (dragEndHandle) {
+			$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
+		}
 
-		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) => onStartDrag(...args));
+		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) =>
+			onStartDrag(DragMode.MOVE, panels.virtual, ...args)
+		);
+		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
 	}
 
-	function onStartDrag(_source, callback) {
+	function onStartDrag(mode, displayPanel, _source, callback) {
 		if (!activeComponent) return;
 
-		callback.displayPanel = panels.virtual;
-		callback.removePositionBeforeDrop = false;
-
-		// These aren't actually related to one-another in XML hierarchy so need to handle two classes
-		activeComponent.panel.AddClass('hud-customizable--dragging');
-		panels.virtual.AddClass('hud-customizer-virtual--dragging');
-
-		$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
+		dragMode = mode;
 
 		onThinkHandle = $.RegisterEventHandler('HudThink', $.GetContextPanel(), () => onDragThink());
 
-		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
+		if (mode !== DragMode.MOVE) {
+			callback.offsetX = 0;
+			callback.offsetY = 0;
+		}
+
+		callback.displayPanel = displayPanel;
+		callback.removePositionBeforeDrop = false;
 	}
 
 	function onDragThink() {
-		if (!activeComponent) return;
+		if (!activeComponent || dragMode === undefined) return;
 
-		const oldPosition = [0, 0];
-		const newPosition: LayoutUtil.Position = [0, 0];
+		let panelPos = activeComponent.position;
+		const panelSize = activeComponent.size;
 
-		for (const axis of Axes) {
-			const isX = axis === 0;
+		const minSize = getMinSize(activeComponent.panel);
+
+		if (dragMode === DragMode.MOVE) {
+			panelPos = LayoutUtil.getPosition(panels.virtual);
+		} else {
+			const resizeDir = resizeVector.get(dragMode) ?? [0, 0];
+			const knobPos = LayoutUtil.getPosition(panels.virtualKnob);
+			for (const i of Axes) {
+				if (resizeDir[i] === 1) {
+					panelSize[i] = Math.max(knobPos[i] - panelPos[i], minSize[i]);
+				} else if (resizeDir[i] === -1) {
+					panelSize[i] += panelPos[i] - knobPos[i];
+					const offset = Math.max(panelSize[i], minSize[i]) - panelSize[i];
+					panelSize[i] += offset;
+					panelPos[i] = knobPos[i] - offset;
+				}
+			}
+		}
+
+		updateVirtualPanelFontSize();
 
-			if (activeComponent.snaps[axis] === SnapMode.OFF) {
-				newPosition[axis] = isX ? LayoutUtil.getX(panels.virtual) : LayoutUtil.getY(panels.virtual);
-			} else {
-				const sizeFactor = snaps[axis][activeComponent.snaps[axis]].sizeFactor;
+		LayoutUtil.setPositionAndSize(panels.virtual, panelPos, panelSize);
 
-				const offset = isX
-					? (activeComponent.panel.actuallayoutwidth * sizeFactor) / scaleX
-					: (activeComponent.panel.actuallayoutheight * sizeFactor) / scaleY;
+		// snapping
+		if (dragMode === DragMode.MOVE) {
+			for (const axis of Axes) {
+				const isX = axis === 0;
 
-				const gridline = getNearestGridLine(axis, sizeFactor);
-				const activeGridline = activeGridlines[axis];
+				if (activeComponent.snaps[axis] !== SnapMode.OFF) {
+					const sizeFactor = snaps[axis][activeComponent.snaps[axis]].sizeFactor;
 
-				if (activeGridline) oldPosition[axis] = activeGridline.offset - offset;
-				if (gridline) newPosition[axis] = gridline.offset - offset;
+					const offset = panelSize[axis] * sizeFactor;
 
-				if (gridline !== activeGridline) {
-					if (activeGridline) activeGridline.panel.RemoveClass('hud-customizer__gridline--highlight');
-					if (gridline) {
-						gridline.panel.AddClass('hud-customizer__gridline--highlight');
-						activeGridlines[axis] = gridline;
+					const gridline = getNearestGridLine(axis, sizeFactor);
+					const activeGridline = activeGridlines[axis];
 
-						newPosition[axis] = gridline.offset - offset;
+					if (gridline) panelPos[axis] = gridline.offset - offset;
+					if (gridline !== activeGridline) {
+						if (activeGridline) activeGridline.panel.RemoveClass('hud-customizer__gridline--highlight');
+						if (gridline) {
+							gridline.panel.AddClass('hud-customizer__gridline--highlight');
+							activeGridlines[axis] = gridline;
+						}
 					}
 				}
 			}
 		}
 
-		if (newPosition[0] !== oldPosition[1] || newPosition[1] !== oldPosition[1]) {
-			LayoutUtil.setPosition(activeComponent.panel, newPosition);
-			LayoutUtil.setPosition(panels.knobContainer, newPosition);
-		}
+		activeComponent.position = panelPos;
+		activeComponent.size = panelSize;
+		LayoutUtil.setPositionAndSize(activeComponent.panel, activeComponent.position, activeComponent.size);
+		updateResizeKnobs(panelPos, panelSize);
 	}
 
 	function onEndDrag() {
 		if (!activeComponent) return;
 
-		$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
-		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
+		onDragThink();
 
-		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) => onStartDrag(...args));
+		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
 
-		dragEndHandle = undefined;
-		onThinkHandle = undefined;
+		LayoutUtil.setPositionAndSize(panels.virtual, activeComponent.position, activeComponent.size);
 
 		activeComponent.panel.RemoveClass('hud-customizable--dragging');
 		panels.virtual.RemoveClass('hud-customizer-virtual--dragging');
 
-		LayoutUtil.copyPositionAndSize(activeComponent.panel, panels.virtual);
-
 		activeGridlines?.forEach((line) => line?.panel.RemoveClass('hud-customizer__gridline--highlight'));
-
 		activeGridlines = [undefined, undefined];
 
 		// TODO: this is just for testing
 		save();
+
+		dragMode = undefined;
+	}
+
+	function updateResizeKnobs(position, size) {
+		const width = size[0];
+		const height = size[1];
+		const halfWidth = width / 2;
+		const halfHeight = height / 2;
+		let plusX, plusY;
+		for (const [dir, knob] of Object.entries(resizeKnobs)) {
+			switch (+dir) {
+				case ResizeDirection.TOP:
+					plusX = halfWidth;
+					plusY = 0;
+					break;
+				case ResizeDirection.TOP_RIGHT:
+					plusX = width;
+					plusY = 0;
+					break;
+				case ResizeDirection.RIGHT:
+					plusX = width;
+					plusY = halfHeight;
+					break;
+				case ResizeDirection.BOTTOM_RIGHT:
+					plusX = width;
+					plusY = height;
+					break;
+				case ResizeDirection.BOTTOM:
+					plusX = halfWidth;
+					plusY = height;
+					break;
+				case ResizeDirection.BOTTOM_LEFT:
+					plusX = 0;
+					plusY = height;
+					break;
+				case ResizeDirection.LEFT:
+					plusX = 0;
+					plusY = halfHeight;
+					break;
+				case ResizeDirection.TOP_LEFT:
+					plusX = 0;
+					plusY = 0;
+					break;
+			}
+
+			LayoutUtil.setPosition(knob, [position[0] + plusX, position[1] + plusY]);
+		}
+	}
+
+	function updateVirtualPanelFontSize() {
+		if (!activeComponent) return;
+		const stupidFontSizeThing = Math.min(activeComponent.size[0] / 2, activeComponent.size[1] / 2);
+
+		panels.virtualName.style.fontSize = stupidFontSizeThing;
 	}
 
 	function getNearestGridLine(axis: Axis, sizeFactor: number): Gridline {
@@ -552,7 +616,7 @@ namespace HudCustomizer {
 		if (newSize !== gridSize) {
 			gridSize = newSize;
 			createGridLines();
-		} 
+		}
 	}
 
 	export function setSnapMode(axis: keyof Axis, mode: SnapMode): void {
diff --git a/styles/hud/hud.scss b/styles/hud/hud.scss
index b77a6902..379cdccb 100644
--- a/styles/hud/hud.scss
+++ b/styles/hud/hud.scss
@@ -63,6 +63,7 @@
 	height: 100%;
 
 	visibility: collapse;
+	z-index: 1000;
 
 	&--enabled {
 		visibility: visible;
@@ -120,20 +121,14 @@
 		}
 	}
 
-	&__knob-container {
-		overflow: noclip;
-		border: 2px solid orange;
-	}
-
 	&__resize-knob {
-		width: 8px;
-		height: 8px;
-		transform: translateX(-4px) translateY(-4px);
+		width: 16px;
+		height: 16px;
+		transform: translateX(-8px) translateY(-8px);
 		border-radius: 50%;
 		background-color: rgba(255, 255, 255, 0.8);
 		border: 1px solid rgba(0, 0, 0, 0.2);
 		box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-		z-index: 1000;
 
 		transition-property: border, box-shadow, background-color;
 		transition-timing-function: ease-in-out;