diff --git a/frontend/server/public/stylesheets/panels/mouseinfo.css b/frontend/server/public/stylesheets/panels/mouseinfo.css index 384933cc..2917847e 100644 --- a/frontend/server/public/stylesheets/panels/mouseinfo.css +++ b/frontend/server/public/stylesheets/panels/mouseinfo.css @@ -124,6 +124,53 @@ display:flex; } -#unit-coordinates-title { +#unit-coordinates-container { + box-sizing: border-box; + background-color: var(--background-steel); + border-radius: var(--border-radius-sm); + box-shadow: 0px 2px 5px #000A; + padding: 10px; + position: absolute; + top: -48px; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 0px; + transition: all 200ms ease-in-out; +} + +#unit-coordinates-container[data-open="true"] { + gap: 4px; + top: -140px; +} + +#unit-coordinates-container > #unit-coordinates { + width: 170px; + height: 0; + padding: 0 6px; + overflow: hidden; + flex-grow: 1; + transition: all 200ms ease-in-out; +} + +#unit-coordinates-container[data-open="true"] > #unit-coordinates { + height: 90px; + padding: 6px; +} + +#unit-coordinates-container > #unit-coordinates-toggle { font-size: 10px; + flex-shrink: 1; + cursor: pointer; +} + +#unit-coordinates-container > #unit-coordinates-toggle> #unit-coordinates-toggle-icon::after { + margin-top: 8px; + font-size: 12px; + content: "↑"; +} + +#unit-coordinates-container[data-open="true"] > #unit-coordinates-toggle > #unit-coordinates-toggle-icon::after { + content: "↓"; } \ No newline at end of file diff --git a/frontend/server/views/panels/mouseinfo.ejs b/frontend/server/views/panels/mouseinfo.ejs index a9ac7410..20981dec 100644 --- a/frontend/server/views/panels/mouseinfo.ejs +++ b/frontend/server/views/panels/mouseinfo.ejs @@ -60,40 +60,44 @@ - Selected Unit Coordinates: - -
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ Unit Coordinates
diff --git a/frontend/website/src/panels/mouseinfopanel.ts b/frontend/website/src/panels/mouseinfopanel.ts index 0f8bfd48..1b3a0d05 100644 --- a/frontend/website/src/panels/mouseinfopanel.ts +++ b/frontend/website/src/panels/mouseinfopanel.ts @@ -22,6 +22,7 @@ export class MouseInfoPanel extends Panel { #elevationRequest: XMLHttpRequest | null = null; #unitElevationRequest: XMLHttpRequest | null = null; #unitElevation: any = null; + #updateInterval: any = null; constructor(ID: string) { @@ -43,7 +44,6 @@ export class MouseInfoPanel extends Panel { document.addEventListener('clearSelection', () => this.#update()); this.#coordinatesElement = this.getElement().querySelector( '#coordinates-tool' ); - this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); this.#coordinatesElement.addEventListener( "click", ( ev:MouseEvent ) => { this.#changeLocationSystem(); @@ -79,6 +79,63 @@ export class MouseInfoPanel extends Panel { }, "code": "Period" }); + + /* Selected unit coordinates panel interaction */ + this.#unitCoordinatesElement = this.getElement().querySelector( '#unit-coordinates' ); + + const unitCoordsToggleEl = this.getElement().querySelector('#unit-coordinates-toggle'); + const unitCoordsContainer = this.getElement().querySelector('#unit-coordinates-container'); + unitCoordsToggleEl.addEventListener("click", (ev: MouseEvent) => { + if (unitCoordsContainer.getAttribute('data-open') === 'true') { + unitCoordsContainer.setAttribute('data-open', 'false'); + } else { + unitCoordsContainer.setAttribute('data-open', 'true'); + } + }); + + /* Let's update selected unit coordinates every second, useful for moving units */ + this.#updateInterval = setInterval(() => { + var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); + if (selectedUnits && selectedUnits.length == 1) { + this.#update() + } else { + } + }, 1000); + + /* Let's make coordinates copy-able */ + this.#listenForCopyableElements(); + } + + #listenForCopyableElements() { + const copyableElements = document.getElementsByClassName('copyable'); + + for (const element of copyableElements) { + element.addEventListener('click', (ev) => { + if (!ev.target) return; + + const el = ev.target as HTMLElement; + + let text = null; + + if (el.innerText !== "") { + text = el.innerText; + } + + if (el.getAttribute('data-value')) { + text = el.getAttribute('data-value'); + } + + if (!text) return; + + navigator.clipboard.writeText(text) + .then(() => { + console.log('Testo copiato negli appunti!'); + }) + .catch(err => { + console.error('Errore nel copiare:', err); + }); + }); + } } #update() { @@ -88,14 +145,12 @@ export class MouseInfoPanel extends Panel { var selectedUnits = getApp().getUnitsManager().getSelectedUnits(); if (selectedUnits && selectedUnits.length == 1) { - this.getElement().querySelector(`#unit-coordinates`)?.classList.remove('hide'); - this.getElement().querySelector(`#unit-coordinates-title`)?.classList.remove('hide'); + this.getElement().querySelector(`#unit-coordinates-container`)?.classList.remove('hide'); selectedUnitPosition = new LatLng(selectedUnits[0].getPosition().lat, selectedUnits[0].getPosition().lng); } else { selectedUnitPosition = null; this.#unitElevation = null; - this.getElement().querySelector(`#unit-coordinates`)?.classList.add('hide'); - this.getElement().querySelector(`#unit-coordinates-title`)?.classList.add('hide'); + this.getElement().querySelector(`#unit-coordinates-container`)?.classList.add('hide'); } /* Draw measures from selected unit, from pin location, and from bullseyes */