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 @@
-
+
+
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, [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;
}
@@ -131,10 +167,10 @@ namespace HudCustomizer {
customizer: $('#HudCustomizer')!,
virtual: $('#HudCustomizerVirtual')!,
virtualName: $