alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-23 14:19:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update performance overlay positioning and styling

Browse Source
This commit is contained in:
scamiv
2026-02-22 17:14:16 +01:00
parent 3acb624ced
commit 3dbac7d387
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/PerformanceOverlay.ts
+25 -7
View File
@@ -46,7 +46,7 @@ export class PerformanceOverlay extends LitElement implements Layer {
private isDragging: boolean = false;
@state()
private position: { x: number; y: number } = { x: 50, y: 20 }; // Percentage values
private position: { x: number; y: number } = { x: 8, y: 8 }; // px values
@state()
private copyStatus: "idle" | "success" | "error" = "idle";
@@ -131,7 +131,11 @@ export class PerformanceOverlay extends LitElement implements Layer {
user-select: none;
cursor: move;
transition: none;
min-width: 420px;
box-sizing: border-box;
width: min(460px, calc(100vw - 16px));
max-width: calc(100vw - 16px);
max-height: calc(100vh - 16px);
overflow: auto;
}
.performance-overlay.dragging {
@@ -307,13 +311,17 @@ export class PerformanceOverlay extends LitElement implements Layer {
const newX = e.clientX - this.dragStart.x;
const newY = e.clientY - this.dragStart.y;
// Convert to percentage of viewport
const margin = 8;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const overlayWidth = Math.min(420, Math.max(0, viewportWidth - margin * 2));
this.position = {
x: Math.max(0, Math.min(viewportWidth - 100, newX)), // Keep within viewport bounds
y: Math.max(0, Math.min(viewportHeight - 100, newY)),
x: Math.max(
margin,
Math.min(viewportWidth - overlayWidth - margin, newX),
),
y: Math.max(margin, Math.min(viewportHeight - 100, newY)),
};
this.requestUpdate();
@@ -671,6 +679,17 @@ export class PerformanceOverlay extends LitElement implements Layer {
return html``;
}
const margin = 8;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const overlayWidth = Math.min(420, Math.max(0, viewportWidth - margin * 2));
const maxLeft = Math.max(margin, viewportWidth - overlayWidth - margin);
const clampedX = Math.max(margin, Math.min(this.position.x, maxLeft));
const clampedY = Math.max(
margin,
Math.min(this.position.y, viewportHeight),
);
const copyLabel =
this.copyStatus === "success"
? translateText("performance_overlay.copied")
@@ -694,8 +713,7 @@ export class PerformanceOverlay extends LitElement implements Layer {
return html`
<div
class="performance-overlay ${this.isDragging ? "dragging" : ""}"
style="--left: ${this.position.x}px; --top: ${this.position
.y}px; --transform: none;"
style="--left: ${clampedX}px; --top: ${clampedY}px; --transform: none;"
@mousedown="${this.handleMouseDown}"
>
<button class="reset-button" @click="${this.handleReset}">