This commit is contained in:
Azgaar 2019-11-18 01:07:36 +03:00
parent f5985a4374
commit 94badd833b
5 changed files with 42 additions and 7 deletions

View file

@ -526,7 +526,23 @@ input[type="color"]::-webkit-color-swatch-wrapper {
color: white;
}
.glow {
#exitCustomization {
position: absolute;
display: none;
}
#exitCustomization > div {
width: 12em;
background: #5d4651;
cursor: move;
}
#finalizeHeightmap {
width: 100%;
border: none;
padding: .45em .75em;
margin: .4em 0;
font-family: Consolas, monospace;
animation: glowing 2s infinite;
}

View file

@ -1872,8 +1872,6 @@
<span>Cell: </span><span id="heightmapInfoCell"></span><br>
<span>Height: </span><span id="heightmapInfoHeight"></span>
</div>
<button data-tip="Finalize the heightmap and exit the edit mode" id="finalizeHeightmap" class="glow">Exit Customization</button>
</div>
<div id="aboutContent" class="tabcontent">
@ -1908,6 +1906,13 @@
</div>
</div>
</div>
<div id="exitCustomization">
<div data-tip="Drag to move the pane">
<button data-tip="Finalize the heightmap and exit the edit mode" id="finalizeHeightmap">Exit Customization</button>
</div>
</div>
<div id="dialogs" style="background-color: #ffffff">
@ -1963,10 +1968,10 @@
<span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
</div>
<div>
<i data-tip="Length of Medirian. Almost half of the equator length">Meridian length:</i><br>
<span id="meridianLength" data-tip="Length of Medirian in pixels"></span> px =
<span id="meridianLengthFriendly" data-tip="Length of Medirian is friendly units (depends on user configuration)"></span>
<span id="meridianLengthEarth" data-tip="Fantasy world medirian length relative to real-world Earth (20k km)"></span>
<i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br>
<span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
<span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
<span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
</div>
<div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
</div>

View file

@ -16,6 +16,7 @@ const tooltip = document.getElementById("tooltip");
// show tip for non-svg elemets with data-tip
document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
function tip(tip = "Tip is undefined", main, error, time) {
tooltip.innerHTML = tip;

View file

@ -66,6 +66,17 @@ function editHeightmap() {
applyTemplate.style.display = type === "keep" ? "none" : "inline-block";
convertImage.style.display = type === "keep" ? "none" : "inline-block";
// show finalize button
const box = exitCustomization.getBoundingClientRect();
exitCustomization.style.opacity = 0;
exitCustomization.style.right = (svgWidth + box.width) / 2 + "px";
exitCustomization.style.bottom = (svgHeight + box.height) / 2 + "px";
exitCustomization.style.transform = "scale(2)";
exitCustomization.style.display = "block";
d3.select("#exitCustomization")
.transition().duration(1000).style("opacity", 1)
.transition().duration(2000).ease(d3.easeSinInOut).style("right", "10px").style("bottom", "10px").style("transform", "scale(1)");
openBrushesPanel();
turnButtonOn("toggleHeight");
layersPreset.value = "heightmap";
@ -113,6 +124,7 @@ function editHeightmap() {
customizationMenu.style.display = "none";
toolsContent.style.display = "block";
layersPreset.disabled = false;
exitCustomization.style.display = "none"; // hide finalize button
restoreDefaultEvents();
clearMainTip();
closeDialogs();

View file

@ -2,6 +2,7 @@
"use strict";
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
$("#exitCustomization").draggable({handle: "div"});
$("#mapLayers").disableSelection();
// remove glow if tip is aknowledged