From 8054bab68840ae040b3a1523facf11218fdc275b Mon Sep 17 00:00:00 2001
From: Evolvedexperiment <evolvedexperiment@gmail.com>
Date: Wed, 16 Oct 2019 11:16:51 +0000
Subject: [PATCH] Fixes for brush circle and Firefox

---
 modules/ui/3dpreview.js        | 39 ++++++++++++++++++----------------
 modules/ui/3dutils.js          |  9 ++++++--
 modules/ui/heightmap-editor.js | 24 +++++++++++++++------
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/modules/ui/3dpreview.js b/modules/ui/3dpreview.js
index b83ff39b..a7134c99 100644
--- a/modules/ui/3dpreview.js
+++ b/modules/ui/3dpreview.js
@@ -41,9 +41,8 @@ function render() {
   _3dpreviewRenderer.render(_3dpreviewScene, _3dpreviewCamera);
 }
 
-function start3dpreview(canvas) {
-  _3dpreviewScene = new THREE.Scene();
-
+function check3dCamera(canvas) {
+// workaround to fix camera problems
   var resetCamera = 0;
   if (!_3dpreviewCamera) {
     resetCamera = 1;
@@ -57,6 +56,22 @@ function start3dpreview(canvas) {
     _3dpreviewCamera.position.z = 800;
     _3dpreviewCamera.position.y = 1000;
   }
+}
+
+function removeMesh() {
+  _3dpreviewScene.remove(_3dmesh);
+  _3dmesh.geometry.dispose();
+  _3dmesh.material.dispose();
+  _3dmesh = undefined;
+  _3dgeometry = undefined;
+  _3dmaterial = undefined;
+  _3dtexture = undefined;
+}
+
+function start3dpreview(canvas) {
+  _3dpreviewScene = new THREE.Scene();
+
+  check3dCamera(canvas);
 
   _3dpreviewRenderer = new THREE.WebGLRenderer({ canvas: canvas });
   _3dpreviewControls = new THREE.OrbitControls( _3dpreviewCamera, _3dpreviewRenderer.domElement );
@@ -66,7 +81,6 @@ function start3dpreview(canvas) {
 
   document.body.appendChild(_3dpreviewRenderer.domElement);
 
-//  _3dpreviewControls.addEventListener( 'change', render );
   _3danimationFrame = requestAnimationFrame(render);
 }
 
@@ -75,13 +89,7 @@ function stop3dpreview() {
     cancelAnimationFrame(_3danimationFrame);
     _3danimationFrame = null;
   }
-  _3dpreviewScene.remove(_3dmesh);
-  _3dmesh.geometry.dispose();
-  _3dmesh.material.dispose();
-  _3dmesh = undefined;
-  _3dgeometry = undefined;
-  _3dmaterial = undefined;
-  _3dtexture = undefined;
+  removeMesh();
 
   _3dpreviewScene = null;
   _3dpreviewRenderer = null;
@@ -89,13 +97,8 @@ function stop3dpreview() {
 }
 
 function update3dpreview(canvas) {
-  _3dpreviewScene.remove(_3dmesh);
-  _3dmesh.geometry.dispose();
-  _3dmesh.material.dispose();
-  _3dmesh = undefined;
-  _3dgeometry = undefined;
-  _3dmaterial = undefined;
-  _3dtexture = undefined;
+  removeMesh();
+  check3dCamera(canvas);
 
   _3dpreviewRenderer.setSize(canvas.width, canvas.height);
   addMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
diff --git a/modules/ui/3dutils.js b/modules/ui/3dutils.js
index cfe688b3..6fce31d5 100644
--- a/modules/ui/3dutils.js
+++ b/modules/ui/3dutils.js
@@ -53,6 +53,12 @@ function getSVGImage(type, width, height) {
   if (!clone.select("#prec").selectAll("circle").size()) clone.select("#prec").remove();
   if (!clone.select("#scaleBar").selectAll("use").size()) clone.select("#scaleBar").remove();
 
+  // default to water - on Firefox, ocean pattern appears as alternating blocks of ocean and water pattern
+  const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  if (isFirefox) {
+    if (!clone.select("#oceanPattern").selectAll("use").size()) clone.select("#oceanPattern").remove();
+  }
+
   const removeEmptyGroups = function() {
     let empty = 0;
     clone.selectAll("g").each(function() {
@@ -76,7 +82,7 @@ function getSVGImage(type, width, height) {
       if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) {
         style += "mask-image: url('#land');";
         continue;
-      }
+      }    
       if (key === "cursor") continue; // cursor should be default
       if (this.hasAttribute(key)) continue; // don't add style if there is the same attribute
       if (value === defaultStyles.getPropertyValue(key)) continue;
@@ -140,6 +146,5 @@ function getHeightmap() {
 }
 
 function getPreviewTexture(width, height) {
-
   return getSVGImage("svg", width, height);
 }
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index fa3285db..7dd98306 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1251,16 +1251,26 @@ function getHeight(h) {
     _3dpreview.height = 800 / (graphWidth / graphHeight);
  
     $("#_3dpreviewEditor").dialog({
-      title: "3D Preview", width: _3dpreview.width, height: _3dpreview.height+50, resizable: true, 
-      resizeStop: function(event, ui) { 
-                    var _3dpreview = document.getElementById("_3dpreview");
-                    _3dpreview.width = ui.size.width;
-                    _3dpreview.height = ui.size.height-50;
-                    update3dpreview(_3dpreview); 
-                  }
+      title: "3D Preview", width: _3dpreview.width, height: _3dpreview.height, resizable: true
     }).on('dialogclose', close3dPreview);
 
+    var titleBar = document.getElementById("_3dpreviewEditor").previousSibling;
+    $("#_3dpreviewEditor").dialog( "option", "height", _3dpreview.height + titleBar.clientHeight + 2 );
+
+    $("#_3dpreviewEditor").on("dialogresizestop", function(event, ui) { 
+      var titleBar = document.getElementById("_3dpreviewEditor").previousSibling;
+
+      var _3dpreview = document.getElementById("_3dpreview");
+      _3dpreview.width = ui.size.width;
+      _3dpreview.height = (ui.size.height - titleBar.clientHeight);
+      hideCircle();
+      update3dpreview(_3dpreview); 
+      showCircle();
+    });
+
+    hideCircle();
     start3dpreview(_3dpreview);
+    showCircle();
 
     var _3dpreviewContainer = document.getElementById("_3dpreviewContainer");
     _3dpreviewContainer.appendChild(_3dpreview);