muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed arrows

Browse source
This commit is contained in:
Fedor Katurov 2020-01-16 16:59:09 +07:00
parent bdcd7fd814
commit 973f934614
2 changed files with 31 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/styles/map.less
View file

@ -14,12 +14,16 @@
} }
.leaflet-touch .leaflet-bar a { .leaflet-touch .leaflet-bar a {
border-radius: @panel_radius !important; border-radius: @panel_radius !important;
} }
@keyframes vertex_spin { @keyframes vertex_spin {
0% { transform: scale(1); } 0% {
100% { transform: scale(1.2); } transform: scale(1);
}
100% {
transform: scale(1.2);
}
} }
.leaflet-vertex-drag-helper { .leaflet-vertex-drag-helper {
@ -43,16 +47,16 @@
.vertex-icon-mixin(@left, @right) { .vertex-icon-mixin(@left, @right) {
&::after { &::after {
content: ' '; content: ' ';
position:absolute; position: absolute;
top:4px; top: 4px;
left: @left; left: @left;
right: @right; right: @right;
width:8px; width: 8px;
height:8px; height: 8px;
background: white; background: white;
border-radius: 8px; border-radius: 8px;
transform:scale(1); transform: scale(1);
transition:transform 150ms; transition: transform 150ms;
} }
} }
@ -63,8 +67,8 @@
border: none; border: none;
width: 16px !important; width: 16px !important;
height: 16px !important; height: 16px !important;
margin-left:-8px !important; margin-left: -8px !important;
margin-top:-8px !important; margin-top: -8px !important;
background: transparent; background: transparent;
position: absolute; position: absolute;
cursor: grab; cursor: grab;
@ -110,7 +114,8 @@
pointer-events: none !important; pointer-events: none !important;
} }
.leaflet-km-marker, .leaflet-km-marker-2 { .leaflet-km-marker,
.leaflet-km-marker-2 {
position: absolute; position: absolute;
z-index: 0 !important; z-index: 0 !important;
@ -137,6 +142,12 @@
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
&.reverse {
svg {
transform: translate(-50%, 0) rotate(180deg);
}
}
} }
} }
@ -191,7 +202,7 @@
} }
.leaflet-control-container .leaflet-routing-container-hide { .leaflet-control-container .leaflet-routing-container-hide {
display: none; display: none;
} }
.leaflet-bar { .leaflet-bar {
@ -294,7 +305,7 @@
#canvas { #canvas {
background: #eeeeee; background: #eeeeee;
z-index: 0; z-index: 0;
> div { > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -303,4 +314,4 @@
.leaflet-pane { .leaflet-pane {
user-select: none; user-select: none;
} }

10
src/utils/marks.ts
View file

@ -87,12 +87,12 @@ class KmMarksLayer extends LayerGroup {
interactive: false, interactive: false,
icon: divIcon({ icon: divIcon({
html: ` html: `
<div class="leaflet-km-dist" style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg( <div
angle class="leaflet-km-dist ${allwaysPositiveAngleDeg(angle) !== angle ? 'reverse' : ''}"
)}deg);"> style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg(angle)}deg);"
>
${distance} ${distance}
<svg width="48" height="48" preserveAspectRatio="xMidYMid" transform="rotate(0deg)">
<svg width="48" height="48" preserveAspectRatio="xMidYMid">
<image xlink:href="${arrow_image}" x="0" y="0" width="48" height="48"/> <image xlink:href="${arrow_image}" x="0" y="0" width="48" height="48"/>
</svg> </svg>
</div> </div>