v1.0.25

index.css

@@ -885,16 +885,16 @@ body button.noicon {
 }
 
 .color-div {
-	width: 32px;
+	width: 2.7em;
-	height: 12px;
+	height: 1.1em;
 	display: inline-block;
-	margin: 1px 2px;
+	margin: .1em .2em;
 	border: 1px #c5c5c5 groove;
 	cursor: pointer;
 }
 
 #colorsSelect div {
-	height: 18px;
+	height: 1.7em;
 	display: inline-block;
 	cursor: pointer;
 }

index.html

@@ -1776,7 +1776,6 @@
           <button data-tip="Open template editor" id="applyTemplate" style="display: none">Template Editor</button>
           <button data-tip="Open Image Converter" id="convertImage" style="display: none">Image Converter</button>
           <button data-tip="Render heightmap data as a small monochrome image" id="heightmapPreview">Heightmap Preview</button>
-          <button data-tip="Render heightmap in perspective" id="perspectiveView">Perspective View</button>
         </div>
 
         <div id="customizeOptions">
@@ -2401,8 +2400,8 @@
       </div>
 
       <div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i><br>
-        <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 8em">
+        <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 11.5em">
-        <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em; border: 1px solid #d4d4d4">
+        <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em">
       </div>
 
       <div data-tip="Select a color below and assign a height value for it" id="colorsSelect" style="display: none">
@@ -2421,10 +2420,6 @@
 
     </div>
 
-    <div id="perspectivePanel" class="dialog stable" style="display: none">
-      <canvas id="perspective" width="480" height="150"></canvas>
-    </div>
-
     <div id="biomesEditor" class="dialog stable" style="display: none">
       <div id="biomesHeader" class="header">
         <div style="left:1.4em" data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome&nbsp;</div>

modules/ui/heightmap-editor.js

@@ -34,7 +34,6 @@ function editHeightmap() {
   document.getElementById("applyTemplate").addEventListener("click", openTemplateEditor);
   document.getElementById("convertImage").addEventListener("click", openImageConverter);
   document.getElementById("heightmapPreview").addEventListener("click", toggleHeightmapPreview);
-  document.getElementById("perspectiveView").addEventListener("click", openPerspectivePanel);
   document.getElementById("finalizeHeightmap").addEventListener("click", finalizeHeightmap);
   document.getElementById("renderOcean").addEventListener("click", mockHeightmap);
   document.getElementById("templateUndo").addEventListener("click", () => restoreHistory(edits.n-1));
@@ -389,7 +388,6 @@ function getHeight(h) {
     if (!noStat) updateStatistics();
 
     if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
-    if ($("#perspectivePanel").is(":visible")) drawPerspective(); // update perspective view if opened
   }
 
   // restoreHistory
@@ -403,7 +401,6 @@ function getHeight(h) {
     updateStatistics();
     
     if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
-    if ($("#perspectivePanel").is(":visible")) drawPerspective(); // update perspective view if opened
   }
 
   // restart edits from 1st step
@@ -896,7 +893,7 @@ function getHeight(h) {
     closeDialogs("#imageConverter");
 
     $("#imageConverter").dialog({
-      title: "Image Converter", minHeight: "auto", width: "22.5em", resizable: false,
+      title: "Image Converter", minHeight: "auto", width: "19.5em", resizable: false,
       position: {my: "right top", at: "right-10 top+10", of: "svg"}
     }).on('dialogclose', closeImageConverter);
 
@@ -924,7 +921,7 @@ function getHeight(h) {
       const container = d3.select("#colorScheme");
       container.selectAll("div").data(d3.range(101)).enter().append("div").attr("data-color", i => i)
         .style("background-color", i => color(1-i/100))
-        .style("width", i => i < 20 || i > 70 ? "3px" : "1px")
+        .style("width", i => i < 20 || i > 70 ? ".2em" : ".1em")
         .on("touchmove mousemove", showPalleteHeight).on("click", assignHeight);
     }()
 
@@ -1173,68 +1170,4 @@ function getHeight(h) {
     }
   }
 
-  function openPerspectivePanel() {
-    if ($("#perspectivePanel").is(":visible")) return;
-    $("#perspectivePanel").dialog({
-      title: "Perspective View", minHeight: "auto", width: 510, height: 200,
-      position: {my: "center center", at: "center center", of: "svg"}
-    });
-
-    drawPerspective();
-  }
-
-  function drawPerspective() {
-    const width = 320, height = 180;
-    const wRatio = graphWidth / width, hRatio = graphHeight / height;
-    const lineCount = 320, lineGranularity = 90;
-    const perspective = document.getElementById("perspective");
-    const pContext = perspective.getContext("2d");
-    const lines = [];
-
-    let i = lineCount;
-    while (i--) {
-      const x = i / lineCount * width | 0;
-      const canvasPoints = [];
-      lines.push(canvasPoints);
-      let j = Math.floor(lineGranularity);
-      while (j--) {
-        const y = j / lineGranularity * height | 0;
-        let index = findGridCell(x * wRatio, y * hRatio);
-        let h = grid.cells.h[index] - 20;
-        if (h < 1) h = 0;
-        canvasPoints.push([x, y, h]);
-      }
-    }
-
-    pContext.clearRect(0, 0, perspective.width, perspective.height);
-    for (let canvasPoints of lines) {
-      for (let i = 0; i < canvasPoints.length - 1; i++) {
-        const pt1 = canvasPoints[i];
-        const pt2 = canvasPoints[i + 1];
-        const avHeight = (pt1[2] + pt2[2]) / 200;
-        pContext.beginPath();
-        pContext.moveTo(...transformPt(pt1));
-        pContext.lineTo(...transformPt(pt2));
-        let clr = "rgb(81, 103, 169)"; // water
-        if (avHeight !== 0) {clr = color(1 - avHeight - 0.2);}
-        pContext.strokeStyle = clr;
-        pContext.stroke();
-      }
-      for (let i = 0; i < canvasPoints.length - 1; i++) {
-
-      }
-    }
-  }
-
-  function transformPt(pt) {
-    const width = 320, maxHeight = 0.2;
-    var [x, y] = projectIsometric(pt[0],pt[1]);
-    return [x + width / 2 + 10, y + 10 - pt[2] * maxHeight];
-  }
-
-  function projectIsometric(x, y) {
-    const scale = 1, yProj = 4;
-    return [(x - y) * scale, (x + y) / yProj * scale];
-  }  
-
 }

modules/ui/options.js

@@ -586,6 +586,7 @@ styleStatesHaloOpacity.addEventListener("input", function() {
 
 // request to restore default style on button click
 function askToRestoreDefaultStyle() {
+  if (customization) {tip("Please exit the customization mode first", false, "error"); return;}
   alertMessage.innerHTML = "Are you sure you want to restore default style for all elements?";
   $("#alert").dialog({resizable: false, title: "Restore default style",
     buttons: {