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: $