From 28434960655b0615fccb8b56545c240e8399c5e4 Mon Sep 17 00:00:00 2001
From: Matthew Bloch <mbloch@nytimes.com>
Date: Wed, 6 Dec 2023 11:29:19 -0500
Subject: [PATCH] Improvements to gui intersection tool

---
 REFERENCE.md                   |  2 +-
 src/gui/gui-el.mjs             |  3 +-
 src/gui/gui-repair-control.mjs | 54 +++++++++++++++++++---------------
 test/info-test.mjs             |  1 -
 www/index.html                 |  5 ++--
 www/page.css                   |  8 ++---
 6 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/REFERENCE.md b/REFERENCE.md
index 16954257..e8f10764 100644
--- a/REFERENCE.md
+++ b/REFERENCE.md
@@ -1,6 +1,6 @@
 # COMMAND REFERENCE
 
-This documentation applies to version 0.6.53 of mapshaper's command line program. Run `mapshaper -v` to check your version. For an introduction to the command line tool, read [this page](https://github.com/mbloch/mapshaper/wiki/Introduction-to-the-Command-Line-Tool) first.
+This documentation applies to version 0.6.54 of mapshaper's command line program. Run `mapshaper -v` to check your version. For an introduction to the command line tool, read [this page](https://github.com/mbloch/mapshaper/wiki/Introduction-to-the-Command-Line-Tool) first.
 
 ## Command line syntax
 
diff --git a/src/gui/gui-el.mjs b/src/gui/gui-el.mjs
index d2f3c4a2..e35fd355 100644
--- a/src/gui/gui-el.mjs
+++ b/src/gui/gui-el.mjs
@@ -194,8 +194,9 @@ utils.extend(El.prototype, {
   },
 
   show: function(css) {
+    var tag = this.el && this.el.tagName;
     if (!this.visible()) {
-      this.css('display:block;');
+      this.css('display', tag == 'SPAN' ? 'inline-block' : 'block');
       this._hidden = false;
     }
     return this;
diff --git a/src/gui/gui-repair-control.mjs b/src/gui/gui-repair-control.mjs
index ef3b8a82..cf52bc0c 100644
--- a/src/gui/gui-repair-control.mjs
+++ b/src/gui/gui-repair-control.mjs
@@ -11,7 +11,10 @@ export function RepairControl(gui) {
       repairBtn = el.findChild(".repair-btn"),
       _simplifiedXX, // saved simplified intersections, for repair
       _unsimplifiedXX, // saved unsimplified intersection data, for performance
-      _disabled = false;
+      _disabled = false,
+      _on = false;
+
+  el.findChild('.close-btn').on('click', dismissForever);
 
   gui.on('simplify_drag_start', function() {
     if (intersectionsAreOn()) {
@@ -20,19 +23,20 @@ export function RepairControl(gui) {
   });
 
   gui.on('simplify_drag_end', function() {
-    updateAsync();
+    updateSync('simplify_drag_end');
   });
 
   checkBtn.on('click', function() {
     checkBtn.hide();
-    refreshSync();
+    _on = true;
+    updateSync();
   });
 
   repairBtn.on('click', function() {
     var e = model.getActiveLayer();
     if (!_simplifiedXX || !e.dataset.arcs) return;
-    var xx = _simplifiedXX = internal.repairIntersections(e.dataset.arcs, _simplifiedXX);
-    showIntersections(xx, e.layer, e.dataset.arcs);
+    _simplifiedXX = internal.repairIntersections(e.dataset.arcs, _simplifiedXX);
+    showIntersections(_simplifiedXX, e.layer, e.dataset.arcs);
     repairBtn.hide();
     model.updated({repair: true});
     gui.session.simplificationRepair();
@@ -43,7 +47,8 @@ export function RepairControl(gui) {
       reset(); // need this?
       return;
     }
-    var needRefresh = e.flags.simplify_method || e.flags.simplify || e.flags.repair;
+    var needRefresh = e.flags.simplify_method || e.flags.simplify ||
+      e.flags.repair || e.flags.clean;
     if (needRefresh) {
       updateAsync();
     } else if (e.flags.simplify_amount) {
@@ -58,17 +63,18 @@ export function RepairControl(gui) {
   });
 
   function intersectionsAreOn() {
-    return !!(_simplifiedXX || _unsimplifiedXX);
+    return _on && !_disabled;
   }
 
-  function clearSavedData() {
+  function turnOff() {
+    hide();
+    _on = false;
     _simplifiedXX = null;
     _unsimplifiedXX = null;
   }
 
   function reset() {
-    clearSavedData();
-    hide();
+    turnOff();
     if (_disabled) {
       return;
     }
@@ -83,8 +89,7 @@ export function RepairControl(gui) {
 
   function dismissForever() {
     _disabled = true;
-    clearSavedData();
-    hide();
+    turnOff();
   }
 
   function hide() {
@@ -95,12 +100,11 @@ export function RepairControl(gui) {
   // Update intersection display, after a short delay so map can redraw after previous
   // operation (e.g. simplification change)
   function updateAsync() {
-    if (intersectionsAreOn()) {
-      setTimeout(refreshSync, 10);
-    }
+    setTimeout(updateSync, 10);
   }
 
-  function refreshSync() {
+  function updateSync(action) {
+    if (!intersectionsAreOn()) return;
     var e = model.getActiveLayer();
     var arcs = e.dataset && e.dataset.arcs;
     var intersectionOpts = {
@@ -111,13 +115,14 @@ export function RepairControl(gui) {
       return;
     }
     if (arcs.getRetainedInterval() > 0) {
+      // simplification
       _simplifiedXX = internal.findSegmentIntersections(arcs, intersectionOpts);
     } else {
       // no simplification
-      _simplifiedXX = null; // clear old simplified XX
-      if (!_unsimplifiedXX) {
-        // save intersections at 0 simplification, to avoid recalculating
-        // every time the simplification slider is set to 100% or the layer is selected at 100%
+      _simplifiedXX = null; // clear any old simplified XX
+      if (_unsimplifiedXX && action == 'simplify_drag_end') {
+        // re-use previously generated intersection data (optimization)
+      } else {
         _unsimplifiedXX = internal.findSegmentIntersections(arcs, intersectionOpts);
       }
     }
@@ -125,7 +130,7 @@ export function RepairControl(gui) {
   }
 
   function showIntersections(xx, lyr, arcs) {
-    var pointLyr, count = 0;
+    var pointLyr, count = 0, html;
     el.show();
     readout.show();
     checkBtn.hide();
@@ -135,12 +140,13 @@ export function RepairControl(gui) {
     }
     if (count == 0) {
       map.setIntersectionLayer(null);
-      readout.html('<span class="icon black"></span>No self-intersections');
+      html = '<span class="icon black"></span>No self-intersections';
     } else {
       map.setIntersectionLayer(pointLyr, {layers:[pointLyr]});
-      readout.html(utils.format('<span class="icon"></span>%s line intersection%s <img class="close-btn" src="images/close.png">', count, utils.pluralSuffix(count)));
-      readout.findChild('.close-btn').on('click', dismissForever);
+      html = utils.format('<span class="icon"></span>%s line intersection%s', count, utils.pluralSuffix(count));
     }
+    readout.html(html);
+
     if (_simplifiedXX && count > 0) {
       repairBtn.show();
     } else {
diff --git a/test/info-test.mjs b/test/info-test.mjs
index a0d627fa..0c2e52f6 100644
--- a/test/info-test.mjs
+++ b/test/info-test.mjs
@@ -12,7 +12,6 @@ describe('mapshaper-info.js', function () {
       assert.equal(d.layer_name, 'data');
       assert.equal(d.feature_count, 2);
     });
-
   })
 
   describe('save-to option', function() {
diff --git a/www/index.html b/www/index.html
index 1b994fa5..19145af3 100644
--- a/www/index.html
+++ b/www/index.html
@@ -308,9 +308,10 @@ <h4>Options</h4>
 	<div class="mshp-main-map main-area map-area">
 		<div class="coordinate-info colored-text selectable"></div>
 		<div class="intersection-display">
-			<div class="intersection-check text-btn colored-text">Check line intersections</div>
-			<div class="intersection-count">0 line intersections</div>
+			<span class="intersection-check text-btn colored-text">Check line intersections</span><span class="intersection-count">0 line intersections</span>
+			<img class="close-btn" src="images/close.png">
 			<div class="repair-btn text-btn colored-text">Repair</div>
+			
 		</div>
 		<div class="map-layers"></div>
 		<div class="basemap-container"><div class="basemap"></div></div>
diff --git a/www/page.css b/www/page.css
index fc0933d2..1d5d87c0 100644
--- a/www/page.css
+++ b/www/page.css
@@ -959,10 +959,6 @@ img.close-btn:hover,
 	left: 13px;
 }
 
-.intersection-count {
-	vertical-align: middle;
-}
-
 .intersection-check {
 	display: none;
 }
@@ -979,13 +975,13 @@ img.close-btn:hover,
 	background-color: black;
 }
 
-.intersection-count .close-btn {
+.intersection-display .close-btn {
 	width: 16px;
 	height: 16px;
 	cursor: pointer;
 	position: relative;
 	top: 4px;
-	margin-left: 2px;
+	margin-left: 1px;
 }
 
 /*.intersection-display .text-btn.disabled {