From 5264f7665e09a6b2490711629d53caba49fcccf0 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        |   2 +-
 scripts/hud/customizer.ts | 271 +++++++++++++++++++++++---------------
 styles/hud/hud.scss       |  13 +-
 3 files changed, 168 insertions(+), 118 deletions(-)

diff --git a/layout/hud/hud.xml b/layout/hud/hud.xml
index fc9228be..46dfa83f 100644
--- a/layout/hud/hud.xml
+++ b/layout/hud/hud.xml
@@ -28,7 +28,7 @@
 				</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>
 		
diff --git a/scripts/hud/customizer.ts b/scripts/hud/customizer.ts
index b50461d5..84aa030e 100644
--- a/scripts/hud/customizer.ts
+++ b/scripts/hud/customizer.ts
@@ -40,6 +40,31 @@ namespace HudCustomizer {
 		TOP_LEFT: 8
 	};
 
+	function getResizeVector(dir: number) {
+		return [
+			[0, -1],
+			[1, -1],
+			[1, 0],
+			[1, 1],
+			[0, 1],
+			[-1, 1],
+			[-1, 0],
+			[-1, -1]
+		][dir - 1];
+	}
+
+	enum DragMode {
+		MOVE = 0,
+		TOP = 1,
+		TOP_RIGHT = 2,
+		RIGHT = 3,
+		BOTTOM_RIGHT = 4,
+		BOTTOM = 5,
+		BOTTOM_LEFT = 6,
+		LEFT = 7,
+		TOP_LEFT = 8
+	}
+
 	// Tuple of X, Y axis snaps respectively
 	const DEFAULT_SNAP_MODES: Snaps = [SnapMode.OFF, SnapMode.OFF];
 	const DEFAULT_GRID_SIZE = 5;
@@ -48,6 +73,7 @@ namespace HudCustomizer {
 		components: {
 			[id: string]: {
 				position: LayoutUtil.Position;
+				size: LayoutUtil.Size;
 				snaps: [number, number];
 			};
 		};
@@ -60,6 +86,7 @@ namespace HudCustomizer {
 		panel: Panel;
 		snaps: Snaps;
 		position: LayoutUtil.Position;
+		size: LayoutUtil.Size;
 		properties?: Record<string, unknown>;
 	}
 
@@ -133,8 +160,7 @@ namespace HudCustomizer {
 		virtualName: $<Label>('#HudCustomizerVirtualName')!,
 		snaps: $('#HudCustomizerSnaps')!,
 		grid: $('#HudCustomizerGrid')!,
-		gridSize: $<NumberEntry>('#HudCustomizerGridSize')!,
-		knobContainer: $('#HudCustomizerKnobContainer')!
+		gridSize: $<NumberEntry>('#HudCustomizerGridSize')!
 	};
 
 	let components: Record<string, Component>;
@@ -147,11 +173,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 +201,7 @@ namespace HudCustomizer {
 
 			saveData.components[id] = {
 				position: [posX, posY],
+				size: LayoutUtil.getSize(component.panel),
 				snaps: component.snaps
 			};
 		}
@@ -208,11 +231,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, resizeKnobs[dir], ...args)
+				);
+				$.RegisterEventHandler('DragEnd', resizeKnobs[dir], () => onEndDrag());
 			});
 
 		components = {};
@@ -222,7 +249,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 +267,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 +286,7 @@ namespace HudCustomizer {
 				return layoutLen;
 			}) as LayoutUtil.Position;
 
-			LayoutUtil.setPosition(panel, layoutPos);
+			LayoutUtil.setPositionAndSize(panel, layoutPos, component.size);
 
 			components[panel.id] = {
 				panel,
@@ -294,6 +321,7 @@ namespace HudCustomizer {
 			components[panel.id] = {
 				panel,
 				position: LayoutUtil.getPosition(panel),
+				size: size,
 				snaps: DEFAULT_SNAP_MODES
 			};
 		}
@@ -325,21 +353,110 @@ namespace HudCustomizer {
 		$.UnregisterEventHandler('DragStart', panels.virtual, dragStartHandle);
 	}
 
-	function onComponentMouseOver(component: Component) {
-		if (activeComponent && activeComponent === component) return;
+	function onStartDrag(mode, displayPanel, _source, callback) {
+		if (!activeComponent) return;
 
-		activeComponent?.panel.RemoveClass('hud-customizable--active');
+		dragMode = mode;
 
-		activeComponent = component;
+		onThinkHandle = $.RegisterEventHandler('HudThink', $.GetContextPanel(), () => onDragThink());
 
-		activeComponent.panel.AddClass('hud-customizable--active');
+		if (mode !== DragMode.MOVE) {
+			callback.offsetX = 0;
+			callback.offsetY = 0;
+		}
 
-		const [[x, y], [width, height]] = LayoutUtil.getPositionAndSize(component.panel);
+		callback.displayPanel = displayPanel;
+		callback.removePositionBeforeDrop = false;
+	}
 
-		// 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]);
+	function onEndDrag() {
+		if (!activeComponent) return;
+
+		onDragThink();
+
+		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
+
+		LayoutUtil.setPositionAndSize(panels.virtual, activeComponent.position, activeComponent.size);
+		updateResizeKnobs(activeComponent.position, activeComponent.size);
+
+		activeComponent.panel.RemoveClass('hud-customizable--dragging');
+		panels.virtual.RemoveClass('hud-customizer-virtual--dragging');
+
+		activeGridlines?.forEach((line) => line?.panel.RemoveClass('hud-customizer__gridline--highlight'));
+		activeGridlines = [undefined, undefined];
 
+		// TODO: this is just for testing
+		save();
+
+		dragMode = undefined;
+	}
+
+	function onDragThink() {
+		if (!activeComponent || dragMode === undefined) return;
+
+		let panelPos = activeComponent.position;
+		const panelSize = activeComponent.size;
+
+		const resizeDir = getResizeVector(dragMode);
+
+		if (dragMode === DragMode.MOVE) {
+			panelPos = LayoutUtil.getPosition(panels.virtual);
+		} else {
+			const knobPos = LayoutUtil.getPosition(resizeKnobs[dragMode]);
+			if (resizeDir[0] === 1) {
+				panelSize[0] = knobPos[0] - panelPos[0];
+			} else if (resizeDir[0] === -1) {
+				panelSize[0] += panelPos[0] - knobPos[0];
+				panelPos[0] = knobPos[0];
+			}
+
+			if (resizeDir[1] === 1) {
+				panelSize[1] = knobPos[1] - panelPos[1];
+			} else if (resizeDir[1] === -1) {
+				panelSize[1] += panelPos[1] - knobPos[1];
+				panelPos[1] = knobPos[1];
+			}
+		}
+
+		const stupidFontSizeThing = Math.min(panelSize[1] / 2, panelSize[0] / 2);
+		panels.virtualName.style.fontSize = stupidFontSizeThing;
+
+		updateResizeKnobs(panelPos, panelSize);
+		LayoutUtil.setPositionAndSize(panels.virtual, panelPos, panelSize);
+
+		// snapping
+		if (dragMode === DragMode.MOVE) {
+			for (const axis of Axes) {
+				const isX = axis === 0;
+
+				if (activeComponent.snaps[axis] !== SnapMode.OFF) {
+					const sizeFactor = snaps[axis][activeComponent.snaps[axis]].sizeFactor;
+
+					const offset = panelSize[axis] * sizeFactor;
+
+					const gridline = getNearestGridLine(axis, sizeFactor);
+					const activeGridline = activeGridlines[axis];
+
+					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;
+						}
+					}
+				}
+			}
+		}
+
+		activeComponent.position = panelPos;
+		activeComponent.size = panelSize;
+		LayoutUtil.setPositionAndSize(activeComponent.panel, activeComponent.position, activeComponent.size);
+	}
+
+	function updateResizeKnobs(position, size) {
+		const width = size[0];
+		const height = size[1];
 		const halfWidth = width / 2;
 		const halfHeight = height / 2;
 		let plusX, plusY;
@@ -379,10 +496,25 @@ namespace HudCustomizer {
 					break;
 			}
 
-			$.Msg({ x, y, width, height, dir, plusX, plusY });
-
-			LayoutUtil.setPosition(knob, [plusX, plusY]);
+			LayoutUtil.setPosition(knob, [position[0] + plusX, position[1] + plusY]);
 		}
+	}
+
+	function onComponentMouseOver(component: Component) {
+		if (activeComponent && activeComponent === component) return;
+
+		activeComponent?.panel.RemoveClass('hud-customizable--active');
+
+		activeComponent = component;
+
+		activeComponent.panel.AddClass('hud-customizable--active');
+
+		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, position, size);
+
+		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.
@@ -397,96 +529,19 @@ namespace HudCustomizer {
 		panels.virtualName.style.fontSize = stupidFontSizeThing;
 
 		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);
 		}
-
-		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) => onStartDrag(...args));
-	}
-
-	function onStartDrag(_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);
-
-		onThinkHandle = $.RegisterEventHandler('HudThink', $.GetContextPanel(), () => onDragThink());
-
-		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
-	}
-
-	function onDragThink() {
-		if (!activeComponent) return;
-
-		const oldPosition = [0, 0];
-		const newPosition: LayoutUtil.Position = [0, 0];
-
-		for (const axis of Axes) {
-			const isX = axis === 0;
-
-			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;
-
-				const offset = isX
-					? (activeComponent.panel.actuallayoutwidth * sizeFactor) / scaleX
-					: (activeComponent.panel.actuallayoutheight * sizeFactor) / scaleY;
-
-				const gridline = getNearestGridLine(axis, sizeFactor);
-				const activeGridline = activeGridlines[axis];
-
-				if (activeGridline) oldPosition[axis] = activeGridline.offset - offset;
-				if (gridline) newPosition[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;
-
-						newPosition[axis] = gridline.offset - offset;
-					}
-				}
-			}
-		}
-
-		if (newPosition[0] !== oldPosition[1] || newPosition[1] !== oldPosition[1]) {
-			LayoutUtil.setPosition(activeComponent.panel, newPosition);
-			LayoutUtil.setPosition(panels.knobContainer, newPosition);
+		if (dragEndHandle) {
+			$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
 		}
-	}
-
-	function onEndDrag() {
-		if (!activeComponent) return;
-
-		$.UnregisterEventHandler('DragEnd', panels.virtual, dragEndHandle);
-		$.UnregisterEventHandler('HudThink', $.GetContextPanel(), onThinkHandle);
 
-		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) => onStartDrag(...args));
-
-		dragEndHandle = undefined;
-		onThinkHandle = undefined;
-
-		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();
+		dragStartHandle = $.RegisterEventHandler('DragStart', panels.virtual, (...args) =>
+			onStartDrag(DragMode.MOVE, panels.virtual, ...args)
+		);
+		dragEndHandle = $.RegisterEventHandler('DragEnd', panels.virtual, () => onEndDrag());
 	}
 
 	function getNearestGridLine(axis: Axis, sizeFactor: number): Gridline {
@@ -552,7 +607,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;