v1.4.33

index.html

@@ -3212,11 +3212,12 @@
         <input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 17em">
       </div>
       <div>
-        <span>Legend:</span><br>
+        <span>Note:</span><br>
         <textarea id="notesText" rows="7" data-tip="Type object description" placeholder="Type object description"></textarea>
       </div>
       <div>
         <button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
+        <button id="notesPin" data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move" class="icon-pin"></button>
         <button id="notesDownload" data-tip="Download notes to PC" class="icon-download"></button>
         <button id="notesUpload" data-tip="Upload notes from PC" class="icon-upload"></button>
         <button id="notesRemove" data-tip="Remove this note" class="icon-trash fastDelete"></button>

main.js

@@ -117,7 +117,7 @@ let scale = 1, viewX = 0, viewY = 0;
 const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", zoomed);
 
 // default options
-let options = {}; // options object
+let options = {pinNotes:false}; // options object
 let mapCoordinates = {}; // map coordinates on globe
 options.winds = [225, 45, 225, 315, 135, 315]; // default wind directions
 

modules/ui/general.js

@@ -61,6 +61,7 @@ function moved() {
 
 // show note box on hover (if any)
 function showNotes(e, i) {
+  if (notesEditor.offsetParent) return;
   let id = e.target.id || e.target.parentNode.id || e.target.parentNode.parentNode.id;
   if (e.target.parentNode.parentNode.id === "burgLabels") id = "burg" + e.target.dataset.id; else
   if (e.target.parentNode.parentNode.id === "burgIcons") id = "burg" + e.target.dataset.id;
@@ -70,7 +71,7 @@ function showNotes(e, i) {
     document.getElementById("notes").style.display = "block";
     document.getElementById("notesHeader").innerHTML = note.name;
     document.getElementById("notesBody").innerHTML = note.legend;
-  } else {
+  } else if (!options.pinNotes) {
     document.getElementById("notes").style.display = "none";
     document.getElementById("notesHeader").innerHTML = "";
     document.getElementById("notesBody").innerHTML = "";

modules/ui/notes-editor.js

@@ -18,6 +18,7 @@ function editNotes(id, name) {
     select.value = id;
     notesName.value = note.name;
     notesText.value = note.legend;
+    showNote(note);
   } else {
     const value = "There are no added notes. Click on element (e.g. label) and add a free text note";
     document.getElementById("notesText").value = value;
@@ -37,12 +38,19 @@ function editNotes(id, name) {
   document.getElementById("notesSelect").addEventListener("change", changeObject);
   document.getElementById("notesName").addEventListener("input", changeName);
   document.getElementById("notesText").addEventListener("input", changeText);
+  document.getElementById("notesPin").addEventListener("click", () => options.pinNotes = !options.pinNotes);
   document.getElementById("notesFocus").addEventListener("click", validateHighlightElement);
   document.getElementById("notesDownload").addEventListener("click", downloadLegends);
   document.getElementById("notesUpload").addEventListener("click", () => legendsToLoad.click());
   document.getElementById("legendsToLoad").addEventListener("change", function() {uploadFile(this, uploadLegends)});
   document.getElementById("notesRemove").addEventListener("click", triggerNotesRemove);
 
+  function showNote(note) {
+    document.getElementById("notes").style.display = "block";
+    document.getElementById("notesHeader").innerHTML = note.name;
+    document.getElementById("notesBody").innerHTML = note.legend;
+  }
+
   function changeObject() {
     const note = notes.find(note => note.id === this.value);
     if (!note) return;
@@ -55,6 +63,7 @@ function editNotes(id, name) {
     const note = notes.find(note => note.id === id);
     if (!note) return;
     note.name = this.value;
+    showNote(note);
   }
 
   function changeText() {
@@ -62,6 +71,7 @@ function editNotes(id, name) {
     const note = notes.find(note => note.id === id);
     if (!note) return;
     note.legend = this.value;
+    showNote(note);
   }
 
   function validateHighlightElement() {