midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge branches

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-29 19:49:42 +02:00
commit 6f70dc702e
4 changed files with 107 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

25
UI/Input/LocationInput.ts
View file

@ -8,11 +8,12 @@ import Svg from "../../Svg";
import State from "../../State"; import State from "../../State";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"; import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import {GeoOperations} from "../../Logic/GeoOperations"; import {GeoOperations} from "../../Logic/GeoOperations";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer"; import ShowDataMultiLayer from "../ShowDataLayer/ShowDataMultiLayer";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource"; import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {BBox} from "../../Logic/BBox"; import {BBox} from "../../Logic/BBox";
import {FixedUiElement} from "../Base/FixedUiElement";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
export default class LocationInput extends InputElement<Loc> { export default class LocationInput extends InputElement<Loc> {
@ -124,7 +125,7 @@ export default class LocationInput extends InputElement<Loc> {
}) })
} }
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") this.SetClass("block h-full")
} }
@ -143,7 +144,7 @@ export default class LocationInput extends InputElement<Loc> {
{ {
location: this._centerLocation, location: this._centerLocation,
background: this.mapBackground, background: this.mapBackground,
attribution: this.mapBackground !== State.state.backgroundLayer, attribution: this.mapBackground !== State.state?.backgroundLayer,
lastClickLocation: clickLocation, lastClickLocation: clickLocation,
bounds: this._bounds bounds: this._bounds
} }
@ -179,7 +180,6 @@ export default class LocationInput extends InputElement<Loc> {
}) })
} }
this.mapBackground.map(layer => { this.mapBackground.map(layer => {
const leaflet = map.leafletMap.data const leaflet = map.leafletMap.data
if (leaflet === undefined || layer === undefined) { if (leaflet === undefined || layer === undefined) {
@ -191,20 +191,31 @@ export default class LocationInput extends InputElement<Loc> {
leaflet.setZoom(layer.max_zoom - 1) leaflet.setZoom(layer.max_zoom - 1)
}, [map.leafletMap]) }, [map.leafletMap])
const animatedHand = Svg.hand_ui()
.SetStyle("width: 2rem; height: unset;")
.SetClass("hand-drag-animation block pointer-events-none")
return new Combine([ return new Combine([
new Combine([ new Combine([
Svg.move_arrows_ui() Svg.move_arrows_ui()
.SetClass("block relative pointer-events-none") .SetClass("block relative pointer-events-none")
.SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem") .SetStyle("left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem")
]).SetClass("block w-0 h-0 z-10 relative") ]).SetClass("block w-0 h-0 z-10 relative")
.SetStyle("background: rgba(255, 128, 128, 0.21); left: 50%; top: 50%"), .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 map
.SetClass("z-0 relative block w-full h-full bg-gray-100") .SetClass("z-0 relative block w-full h-full bg-gray-100")
]).ConstructElement(); ]).ConstructElement();
} catch (e) { } catch (e) {
console.error("Could not generate LocationInputElement:", e) console.error("Could not generate LocationInputElement:", e)
return undefined; return new FixedUiElement("Constructing a locationInput failed due to" + e).SetClass("alert").ConstructElement();
} }
} }

77
assets/svg/hand.svg
View file

@ -1,53 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" id="svg6"
version="1.1" height="39.557907"
width="28.561806" width="28.561806"
height="39.557907" version="1.1">
id="svg6" <metadata
sodipodi:docname="Right-pointing_hand_in_green_octagon.svg" id="metadata12">
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"> <rdf:RDF>
<metadata <cc:Work
id="metadata12"> rdf:about="">
<rdf:RDF> <dc:format>image/svg+xml</dc:format>
<cc:Work <dc:type
rdf:about=""> rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:format>image/svg+xml</dc:format> <dc:title></dc:title>
<dc:type </cc:Work>
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> </rdf:RDF>
</cc:Work> </metadata>
</rdf:RDF> <defs
</metadata> id="defs10" />
<defs <path
id="defs10"/> id="path4"
<sodipodi:namedview style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
pagecolor="#ffffff" d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z" />
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1003"
id="namedview8"
showgrid="false"
inkscape:zoom="3.6875"
inkscape:cx="-15.38013"
inkscape:cy="19.778954"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg6"/>
<path
d="m 7.931404,38.692909 h 16.078583 l 3.686819,-10.34355 V 16.367203 c 0,-1.666145 -5.427816,-2.851496 -5.427816,-1.945801 V 18.1082 12.782817 c 0,-0.971193 -5.398869,-1.707156 -5.398869,0 v 3.994037 -4.406807 c -0.573718,-0.956195 -5.354332,-1.343658 -5.354332,0 V 17.084093 2.6404066 c -0.191239,-2.28522003 -4.938353,-2.44771503 -5.416439,0 V 24.048061 18.20547 c 0.02267,-1.537788 -5.14447599,-1.703651 -5.23434999,0 v 6.14983 z"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.73000002;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
id="path4"
inkscape:connector-curvature="0"/>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

46
index.css
View file

@ -307,6 +307,7 @@ li::marker {
@keyframes slide { @keyframes slide {
/* This is the animation on the marker to add a new point - it slides through all the possible presets */
from { from {
transform: translateX(0%); 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);
}
}
/**************************************/ /**************************************/

17
test.ts
View file

@ -1,3 +1,4 @@
<<<<<<< HEAD
import {Tiles} from "./Models/TileRange"; import {Tiles} from "./Models/TileRange";
import OsmFeatureSource from "./Logic/FeatureSource/TiledFeatureSource/OsmFeatureSource"; import OsmFeatureSource from "./Logic/FeatureSource/TiledFeatureSource/OsmFeatureSource";
import {Utils} from "./Utils"; import {Utils} from "./Utils";
@ -32,4 +33,18 @@ src.LoadTile(16, 33354, 21875).then(geojson => {
mimetype: "application/vnd.geo+json" mimetype: "application/vnd.geo+json"
}) })
}) })
//*/ //*/
=======
import LocationInput from "./UI/Input/LocationInput";
import Loc from "./Models/Loc";
import {UIEventSource} from "./Logic/UIEventSource";
new LocationInput({
centerLocation: new UIEventSource<Loc>({
lat: 51.1110,
lon: 3.3701,
zoom : 14
})
}).SetStyle("height: 500px")
.AttachTo("maindiv");
>>>>>>> feature/animated-precise-input