3d labels - don't create svg element

index.html

@@ -31,7 +31,6 @@
     #loading-text span:nth-child(2), #mapOverlay > span:nth-child(2) {animation-delay: 1s;}
     #loading-text span:nth-child(3), #mapOverlay > span:nth-child(3) {animation-delay: 2s;}
     @keyframes blink {0% {opacity: 0;} 20% {opacity: 1;} 100% {opacity: .1;}}
-
   </style>
   <link rel="stylesheet" href="index.css">
   <link rel="stylesheet" href="icons.css">

main.js

@@ -111,14 +111,14 @@ legend.on("mousemove", () => tip("Drag to change the position. Click to hide the
 // main data variables
 let grid = {}; // initial grapg based on jittered square grid and data
 let pack = {}; // packed graph and data
-let seed,
+let seed;
-  mapId,
+let mapId;
-  mapHistory = [],
+let mapHistory = [];
-  elSelected,
+let elSelected;
-  modules = {},
+let modules = {};
-  notes = [];
+let notes = [];
 let rulers = new Rulers();
-let customization = 0; // 0 - no; 1 = heightmap draw; 2 - states draw; 3 - add state/burg; 4 - cultures draw
+let customization = 0;
 
 let biomesData = applyDefaultBiomesSystem();
 let nameBases = Names.getNameBases(); // cultures-related data
@@ -155,20 +155,24 @@ let populationRate = +document.getElementById("populationRateInput").value;
 let urbanization = +document.getElementById("urbanizationInput").value;
 
 applyStoredOptions();
-let graphWidth = +mapWidthInput.value,
+
-  graphHeight = +mapHeightInput.value; // voronoi graph extention, cannot be changed arter generation
+// voronoi graph extention, cannot be changed arter generation
-let svgWidth = graphWidth,
+let graphWidth = +mapWidthInput.value;
-  svgHeight = graphHeight; // svg canvas resolution, can be changed
+let graphHeight = +mapHeightInput.value;
+
+// svg canvas resolution, can be changed
+let svgWidth = graphWidth;
+let svgHeight = graphHeight;
+
 landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
 oceanPattern.append("rect").attr("fill", "url(#oceanic)").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
 oceanLayers.append("rect").attr("id", "oceanBase").attr("x", 0).attr("y", 0).attr("width", graphWidth).attr("height", graphHeight);
 
-void (function removeLoading() {
+// remove loading screen
-  d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
+d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
-  d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
+d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
-  d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
+d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
-  d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
+d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
-})();
 
 // decide which map should be loaded or generated on page load
 void (function checkLoadParameters() {

modules/ui/3d.js

@@ -1,20 +1,43 @@
 "use strict";
 
 window.ThreeD = (function () {
-  // set default options
+  const options = {
-  const options = {scale: 50, lightness: 0.7, shadow: 0.5, sun: {x: 100, y: 600, z: 1000}, rotateMesh: 0, rotateGlobe: 0.5, skyColor: "#9ecef5", waterColor: "#466eab", extendedWater: 0, labels3d: 0, resolution: 2};
+    scale: 50,
+    lightness: 0.7,
+    shadow: 0.5,
+    sun: {x: 100, y: 600, z: 1000},
+    rotateMesh: 0,
+    rotateGlobe: 0.5,
+    skyColor: "#9ecef5",
+    waterColor: "#466eab",
+    extendedWater: 0,
+    labels3d: 0,
+    resolution: 2
+  };
 
   // set variables
-  let Renderer, scene, camera, controls, animationFrame, material, texture, geometry, mesh, ambientLight, spotLight, waterPlane, waterMaterial, waterMesh, raycaster;
+  let Renderer,
-
+    scene,
-  const drawCtx = document.createElement("canvas").getContext("2d");
+    camera,
-  const drawSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    controls,
-  document.body.appendChild(drawSVG);
+    animationFrame,
+    material,
+    texture,
+    geometry,
+    mesh,
+    ambientLight,
+    spotLight,
+    waterPlane,
+    waterMaterial,
+    waterMesh,
+    raycaster;
 
   let labels = [];
   let icons = [];
   let lines = [];
 
+  const context2d = document.createElement("canvas").getContext("2d");
+
   // initiate 3d scene
   const create = async function (canvas, type = "viewMesh") {
     options.isOn = true;
@@ -210,16 +233,16 @@ window.ThreeD = (function () {
   }
 
   async function createTextLabel({text, font, size, color, quality}) {
-    drawCtx.font = `${size * quality}px ${font}`;
+    context2d.font = `${size * quality}px ${font}`;
-    drawCtx.canvas.width = drawCtx.measureText(text).width;
+    context2d.canvas.width = context2d.measureText(text).width;
-    drawCtx.canvas.height = size * quality * 1.25; // 25% margin as text can overflow the font size
+    context2d.canvas.height = size * quality * 1.25; // 25% margin as text can overflow the font size
-    drawCtx.clearRect(0, 0, drawCtx.canvas.width, drawCtx.canvas.height);
+    context2d.clearRect(0, 0, context2d.canvas.width, context2d.canvas.height);
 
-    drawCtx.font = `${size * quality}px ${font}`;
+    context2d.font = `${size * quality}px ${font}`;
-    drawCtx.fillStyle = color;
+    context2d.fillStyle = color;
-    drawCtx.fillText(text, 0, size * quality);
+    context2d.fillText(text, 0, size * quality);
 
-    return textureToSprite(drawCtx.canvas.toDataURL(), drawCtx.canvas.width / quality, drawCtx.canvas.height / quality);
+    return textureToSprite(context2d.canvas.toDataURL(), context2d.canvas.width / quality, context2d.canvas.height / quality);
   }
 
   function get3dCoords(baseX, baseY) {
@@ -578,5 +601,21 @@ window.ThreeD = (function () {
     });
   }
 
-  return {create, redraw, update, stop, options, setScale, setLightness, setSun, setRotation, toggleLabels, toggleSky, setResolution, setColors, saveScreenshot, saveOBJ};
+  return {
+    create,
+    redraw,
+    update,
+    stop,
+    options,
+    setScale,
+    setLightness,
+    setSun,
+    setRotation,
+    toggleLabels,
+    toggleSky,
+    setResolution,
+    setColors,
+    saveScreenshot,
+    saveOBJ
+  };
 })();