From 13ec455d7416be4194f5e7b78f3281b617500707 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Mon, 14 Apr 2025 22:14:40 +0200 Subject: [PATCH] fix: Searchbar threating input as username/password, inability to spawn explosion on marker --- .../src/map/coalitionarea/coalitioncircle.ts | 17 +++++++-- frontend/react/src/map/map.ts | 21 +++++++---- .../react/src/ui/components/olsearchbar.tsx | 36 ++++++++++--------- frontend/react/src/unit/unit.ts | 7 ++++ 4 files changed, 56 insertions(+), 25 deletions(-) diff --git a/frontend/react/src/map/coalitionarea/coalitioncircle.ts b/frontend/react/src/map/coalitionarea/coalitioncircle.ts index 4273a761..2951f42c 100644 --- a/frontend/react/src/map/coalitionarea/coalitioncircle.ts +++ b/frontend/react/src/map/coalitionarea/coalitioncircle.ts @@ -1,4 +1,4 @@ -import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng } from "leaflet"; +import { LatLngExpression, Map, Circle, DivIcon, Marker, CircleOptions, LatLng, DomEvent } from "leaflet"; import { getApp } from "../../olympusapp"; import { DraggableHandle } from "../markers/draggablehandle"; import { BLUE_COMMANDER, colors, RED_COMMANDER } from "../../constants/constants"; @@ -121,6 +121,13 @@ export class CoalitionCircle extends Circle { super.setLatLng(latlng); this.#setRadiusHandle(); this.#drawLabel(); + + if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout); + this.#updateTimeout = window.setTimeout(() => { + CoalitionAreaChangedEvent.dispatch(this); + this.#updateTimeout = null; + }, 500); + return this; } @@ -144,13 +151,19 @@ export class CoalitionCircle extends Circle { this.#radiusHandle.addTo(getApp().getMap()); this.#radiusHandle.on("drag", (e: any) => { this.setRadius(this.getLatLng().distanceTo(e.latlng)); + + if (this.#updateTimeout) window.clearTimeout(this.#updateTimeout); + this.#updateTimeout = window.setTimeout(() => { + CoalitionAreaChangedEvent.dispatch(this); + this.#updateTimeout = null; + }, 500); }); } } #drawLabel() { this.#label?.removeFrom(this._map); - + this.#label = new Marker(this.getLatLng(), { icon: new DivIcon({ className: "label", diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts index 4880fa7c..9fbee7b8 100644 --- a/frontend/react/src/map/map.ts +++ b/frontend/react/src/map/map.ts @@ -22,8 +22,6 @@ import { ContextActionTarget, ContextActionType, ContextActions, - SHORT_PRESS_MILLISECONDS, - DEBOUNCE_MILLISECONDS, DrawSubState, colors, } from "../constants/constants"; @@ -183,6 +181,14 @@ export class Map extends L.Map { }); this.setView([37.23, -115.8], 10); + (document.getElementById(ID) as HTMLElement).onkeydown = function (e) { + // TODO Find a way to fix the bug where the map is zoomed out when pressing the "6" key + //if (e.code == "Digit6") { + // // 6 + // e.stopPropagation(); + //} + }; + /* Minimap */ var minimapLayer = new L.TileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { minZoom: 0, @@ -310,7 +316,7 @@ export class Map extends L.Map { this.#starredSpawnRequestTables = localSessionData.starredSpawns; StarredSpawnsChangedEvent.dispatch(this.#starredSpawnRequestTables); } - + setTimeout(() => { if (sessionData.mapSource?.id) { this.setLayerName(sessionData.mapSource.id); @@ -898,6 +904,7 @@ export class Map extends L.Map { ["white", "blue", "red", "green", "orange"].forEach((color) => this.getContainer().classList.remove(`smoke-${color}-cursor`)); this.getContainer().classList.remove(`plus-cursor`); this.getContainer().classList.remove(`measure-cursor`); + this.getContainer().classList.remove(`pointer-cursor`); /* Clear the last measure if the state is changed */ if (this.#previousAppState === OlympusState.MEASURE) { @@ -1020,7 +1027,7 @@ export class Map extends L.Map { } } - #onMouseWheelPressed(e: any) { } + #onMouseWheelPressed(e: any) {} #onRightMousePressed(e: any) { this.dragging.disable(); @@ -1169,8 +1176,10 @@ export class Map extends L.Map { this.dragging.disable(); } } else { - getApp().setState(OlympusState.IDLE); - this.setSelectionEnabled(true); + if (getApp().getState() !== OlympusState.DRAW) { + getApp().setState(OlympusState.IDLE); + this.setSelectionEnabled(true); + } //@ts-ignore We force the boxselect to enter in selection mode this.boxSelect._onMouseDown(e.originalEvent); diff --git a/frontend/react/src/ui/components/olsearchbar.tsx b/frontend/react/src/ui/components/olsearchbar.tsx index a3c49544..8ef562e4 100644 --- a/frontend/react/src/ui/components/olsearchbar.tsx +++ b/frontend/react/src/ui/components/olsearchbar.tsx @@ -31,23 +31,25 @@ export function OlSearchBar(props: { onChange: (e: string) => void; text: string > - props.onChange(e.currentTarget.value)} - className={` - mb-2 block w-full rounded-full border border-gray-300 bg-gray-50 p-3 - ps-10 text-sm text-gray-900 - dark:border-gray-600 dark:bg-gray-700 dark:text-white - dark:placeholder-gray-400 dark:focus:border-blue-500 - dark:focus:ring-blue-500 - focus:border-blue-500 focus:ring-blue-500 - `} - placeholder="Search" - value={props.text} - required - /> +
+ props.onChange(e.currentTarget.value)} + className={` + mb-2 block w-full rounded-full border border-gray-300 bg-gray-50 + p-3 ps-10 text-sm text-gray-900 + dark:border-gray-600 dark:bg-gray-700 dark:text-white + dark:placeholder-gray-400 dark:focus:border-blue-500 + dark:focus:ring-blue-500 + focus:border-blue-500 focus:ring-blue-500 + `} + placeholder="Search" + value={props.text} + required + /> +