From 6dcc710cc2728773e22ee164b6c53a6d6875145b Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 29 Sep 2021 19:48:36 +0200 Subject: [PATCH] Add a little hand, inviting the user to drag location inputs --- UI/Input/LocationInput.ts | 23 +++++++++--- assets/svg/hand.svg | 77 ++++++++++++++------------------------- index.css | 46 +++++++++++++++++++++++ test.ts | 26 ++++++------- 4 files changed, 101 insertions(+), 71 deletions(-) diff --git a/UI/Input/LocationInput.ts b/UI/Input/LocationInput.ts index 875fce9cbe..adc4414727 100644 --- a/UI/Input/LocationInput.ts +++ b/UI/Input/LocationInput.ts @@ -11,6 +11,7 @@ import {GeoOperations} from "../../Logic/GeoOperations"; import ShowDataLayer from "../ShowDataLayer"; import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"; import * as L from "leaflet"; +import {FixedUiElement} from "../Base/FixedUiElement"; export default class LocationInput extends InputElement { @@ -128,7 +129,7 @@ export default class LocationInput extends InputElement { }) } - this.mapBackground = options.mapBackground ?? State.state.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto) + this.mapBackground = options.mapBackground ?? State.state?.backgroundLayer ?? new UIEventSource(AvailableBaseLayers.osmCarto) this.SetClass("block h-full") } @@ -147,7 +148,7 @@ export default class LocationInput extends InputElement { { location: this._centerLocation, background: this.mapBackground, - attribution: this.mapBackground !== State.state.backgroundLayer, + attribution: this.mapBackground !== State.state?.backgroundLayer, lastClickLocation: clickLocation } ) @@ -219,7 +220,6 @@ export default class LocationInput extends InputElement { ) } } - this.mapBackground.map(layer => { const leaflet = map.leafletMap.data if (leaflet === undefined || layer === undefined) { @@ -231,20 +231,31 @@ export default class LocationInput extends InputElement { leaflet.setZoom(layer.max_zoom - 1) }, [map.leafletMap]) + + const animatedHand = Svg.hand_ui() + .SetStyle("width: 2rem; height: unset;") + .SetClass("hand-drag-animation block pointer-events-none") + return new Combine([ new Combine([ Svg.move_arrows_ui() .SetClass("block relative pointer-events-none") .SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem") - ]).SetClass("block w-0 h-0 z-10 relative") - .SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"), + ]).SetClass("block w-0 h-0 z-10 relative") + .SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%; opacity: 0.5"), + + new Combine([ + animatedHand]) + .SetClass("block w-0 h-0 z-10 relative") + .SetStyle("left: calc(50% + 3rem); top: calc(50% + 2rem); opacity: 0.7"), + map .SetClass("z-0 relative block w-full h-full bg-gray-100") ]).ConstructElement(); } catch (e) { console.error("Could not generate LocationInputElement:", e) - return undefined; + return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement(); } } diff --git a/assets/svg/hand.svg b/assets/svg/hand.svg index 75118da951..bbef4187a0 100644 --- a/assets/svg/hand.svg +++ b/assets/svg/hand.svg @@ -1,53 +1,30 @@ - - - - image/svg+xml - - - - - - - + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + id="svg6" + height="39.557907" + width="28.561806" + version="1.1"> + + + + image/svg+xml + + + + + + + diff --git a/index.css b/index.css index bf49576eef..bfdfad61a7 100644 --- a/index.css +++ b/index.css @@ -307,6 +307,7 @@ li::marker { @keyframes slide { + /* This is the animation on the marker to add a new point - it slides through all the possible presets */ from { transform: translateX(0%); } @@ -316,6 +317,51 @@ li::marker { } } +.hand-drag-animation { + animation: hand-drag-animation 6s ease-in-out infinite; + transform-origin: 50% 125%; +} + +@keyframes hand-drag-animation { + /* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */ + 0% { + opacity: 0; + transform: rotate(-30deg); + } + + 6% { + opacity: 1; + transform: rotate(-30deg); + } + + 12% { + opacity: 1; + transform: rotate(-45deg); + } + + 24% { + opacity: 1; + transform: rotate(-00deg); + } + + 30% { + opacity: 1; + transform: rotate(-30deg); + } + + + 36% { + opacity: 0; + transform: rotate(-30deg); + } + + 100% { + opacity: 0; + transform: rotate(-30deg); + } + +} + /**************************************/ diff --git a/test.ts b/test.ts index c34a6c3033..51c8177a1d 100644 --- a/test.ts +++ b/test.ts @@ -1,16 +1,12 @@ -const client_token = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85" +import LocationInput from "./UI/Input/LocationInput"; +import Loc from "./Models/Loc"; +import {UIEventSource} from "./Logic/UIEventSource"; -const image_id = '196804715753265'; -const api_url = 'https://graph.mapillary.com/' + image_id + '?fields=thumb_1024_url&&access_token=' + client_token; -fetch(api_url, - { - headers: {'Authorization': 'OAuth ' + client_token} - } -).then(response => { - return response.json() -}).then( - json => { - const thumbnail_url = json["thumb_1024"] - console.log(thumbnail_url) - } -) \ No newline at end of file +new LocationInput({ + centerLocation: new UIEventSource({ + lat: 51.1110, + lon: 3.3701, + zoom : 14 + }) +}).SetStyle("height: 500px") + .AttachTo("maindiv"); \ No newline at end of file