refactor(es modules): continue migration

index.html

@@ -459,7 +459,6 @@
               data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="X"
               class="buttonoff"
-              onclick="toggleTexture(event)"
             >
               Te<u>x</u>ture
             </li>
@@ -468,7 +467,6 @@
               data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="H"
               class="buttonoff"
-              onclick="toggleHeight(event)"
             >
               <u>H</u>eightmap
             </li>
@@ -477,7 +475,6 @@
               data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="B"
               class="buttonoff"
-              onclick="toggleBiomes(event)"
             >
               <u>B</u>iomes
             </li>
@@ -486,7 +483,6 @@
               data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="E"
               class="buttonoff"
-              onclick="toggleCells(event)"
             >
               C<u>e</u>lls
             </li>
@@ -495,7 +491,6 @@
               data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
               data-shortcut="G"
               class="buttonoff"
-              onclick="toggleGrid(event)"
             >
               <u>G</u>rid
             </li>
@@ -504,7 +499,6 @@
               data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="O"
               class="buttonoff"
-              onclick="toggleCoordinates(event)"
             >
               C<u>o</u>ordinates
             </li>
@@ -513,7 +507,6 @@
               data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="W"
               class="buttonoff"
-              onclick="toggleCompass(event)"
             >
               <u>W</u>ind Rose
             </li>
@@ -521,7 +514,6 @@
               id="toggleRivers"
               data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="V"
-              onclick="toggleRivers(event)"
             >
               Ri<u>v</u>ers
             </li>
@@ -530,7 +522,6 @@
               data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="F"
               class="buttonoff"
-              onclick="toggleRelief(event)"
             >
               Relie<u>f</u>
             </li>
@@ -539,7 +530,6 @@
               data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="R"
               class="buttonoff"
-              onclick="toggleReligions(event)"
             >
               <u>R</u>eligions
             </li>
@@ -548,7 +538,6 @@
               data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="C"
               class="buttonoff"
-              onclick="toggleCultures(event)"
             >
               <u>C</u>ultures
             </li>
@@ -556,7 +545,6 @@
               id="toggleStates"
               data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="S"
-              onclick="toggleStates(event)"
             >
               <u>S</u>tates
             </li>
@@ -565,7 +553,6 @@
               data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="P"
               class="buttonoff"
-              onclick="toggleProvinces(event)"
             >
               <u>P</u>rovinces
             </li>
@@ -574,7 +561,6 @@
               data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Z"
               class="buttonoff"
-              onclick="toggleZones(event)"
             >
               <u>Z</u>ones
             </li>
@@ -582,7 +568,6 @@
               id="toggleBorders"
               data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="D"
-              onclick="toggleBorders(event)"
             >
               Bor<u>d</u>ers
             </li>
@@ -590,7 +575,6 @@
               id="toggleRoutes"
               data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="U"
-              onclick="toggleRoutes(event)"
             >
               Ro<u>u</u>tes
             </li>
@@ -599,7 +583,6 @@
               data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="T"
               class="buttonoff"
-              onclick="toggleTemp(event)"
             >
               <u>T</u>emperature
             </li>
@@ -608,7 +591,6 @@
               data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="N"
               class="buttonoff"
-              onclick="togglePopulation(event)"
             >
               Populatio<u>n</u>
             </li>
@@ -617,7 +599,6 @@
               data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="J"
               class="buttonoff"
-              onclick="toggleIce(event)"
             >
               Ice
             </li>
@@ -626,7 +607,6 @@
               data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="A"
               class="buttonoff"
-              onclick="togglePrec(event)"
             >
               Precipit<u>a</u>tion
             </li>
@@ -635,7 +615,6 @@
               data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Y"
               class="buttonoff"
-              onclick="toggleEmblems(event)"
             >
               Emblems
             </li>
@@ -643,7 +622,6 @@
               id="toggleLabels"
               data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="L"
-              onclick="toggleLabels(event)"
             >
               <u>L</u>abels
             </li>
@@ -651,7 +629,6 @@
               id="toggleIcons"
               data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="I"
-              onclick="toggleIcons(event)"
             >
               <u>I</u>cons
             </li>
@@ -660,7 +637,6 @@
               data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="M"
               class="buttonoff"
-              onclick="toggleMilitary(event)"
             >
               <u>M</u>ilitary
             </li>
@@ -669,7 +645,6 @@
               data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="K"
               class="buttonoff"
-              onclick="toggleMarkers(event)"
             >
               Mar<u>k</u>ers
             </li>
@@ -678,7 +653,6 @@
               data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
               data-shortcut="= (equal sign)"
               class="buttonoff"
-              onclick="toggleRulers(event)"
             >
               Rulers
             </li>
@@ -686,7 +660,6 @@
               id="toggleScaleBar"
               data-tip="Scale Bar: click to toggle. Ctrl + click to edit style"
               data-shortcut="/ (slash sign)"
-              onclick="toggleScaleBar(event)"
               class="solid"
             >
               Scale Bar

modules/dynamic/editors/cultures-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
 

modules/dynamic/editors/religions-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
 

modules/dynamic/editors/states-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
 

modules/io/load.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {calculateVoronoi, findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
 
@@ -571,7 +572,7 @@ async function parseLoadedData(data) {
     eraInput.value = options.era;
     shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
 
-    if (window.restoreDefaultEvents) restoreDefaultEvents();
+    restoreDefaultEvents();
     focusOn(); // based on searchParams focus on point, cell or burg
     invokeActiveZooming();
 

modules/ui/biomes-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 
 export function editBiomes() {

modules/ui/burgs-overview.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 
 export function overviewBurgs() {

modules/ui/diplomacy-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 
 export function editDiplomacy() {

modules/ui/editors.js

@@ -1,13 +1,7 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
 
-// restore default viewbox events
-function restoreDefaultEvents() {
-  svg.call(zoom);
-  viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
-  legend.call(d3.drag().on("start", dragLegendBox));
-}
-
 // on viewbox click event - run function based on target
 function clicked() {
   const el = d3.event.target;

modules/ui/heightmap-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findGridCell, findGridAll, findCell, getPackPolygon, getGridPolygon} from "/src/utils/graphUtils";
 import {last, createTypedArray} from "/src/utils/arrayUtils";
 import {byId} from "/src/utils/shorthands";

modules/ui/layers.js

@@ -2,9 +2,12 @@ import {TIME} from "/src/config/logging";
 import {invokeActiveZooming} from "../activeZooming";
 import {getGridPolygon} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
+import {stored, store} from "/src/utils/shorthands";
+import {byId} from "/src/utils/shorthands";
 
-let presets = {}; // global object
+let presets = {};
 restoreCustomPresets(); // run on-load
+addToggleLayersListener();
 
 function getDefaultPresets() {
   return {
@@ -88,33 +91,34 @@ function restoreCustomPresets() {
 }
 
 // run on map generation
-function applyPreset() {
+export function applyPreset() {
-  const preset = localStorage.getItem("preset") || document.getElementById("layersPreset").value;
+  const preset = stored("preset") || byId("layersPreset")?.value || "political";
   changePreset(preset);
 }
 
 // toggle layers on preset change
 function changePreset(preset) {
   const layers = presets[preset]; // layers to be turned on
-  document
+  const $layerButtons = byId("mapLayers").querySelectorAll("li");
-    .getElementById("mapLayers")
+
-    .querySelectorAll("li")
+  $layerButtons.forEach(function ($layerButton) {
-    .forEach(function (e) {
+    const {id} = $layerButton;
-      if (layers.includes(e.id) && !layerIsOn(e.id)) e.click();
+    if (layers.includes(id) && !layerIsOn(id)) $layerButton.click();
-      else if (!layers.includes(e.id) && layerIsOn(e.id)) e.click();
+    else if (!layers.includes(id) && layerIsOn(id)) $layerButton.click();
   });
-  layersPreset.value = preset;
+
-  localStorage.setItem("preset", preset);
+  byId("layersPreset").value = preset;
+  store("preset", preset);
 
   const isDefault = getDefaultPresets()[preset];
-  removePresetButton.style.display = isDefault ? "none" : "inline-block";
+  byId("removePresetButton").style.display = isDefault ? "none" : "inline-block";
-  savePresetButton.style.display = "none";
+  byId("savePresetButton").style.display = "none";
-  if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 400);
+  if (byId("canvas3d")) setTimeout(ThreeD.update(), 400);
 }
 
 function savePreset() {
   prompt("Please provide a preset name", {default: ""}, preset => {
-    presets[preset] = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
+    presets[preset] = Array.from(byId("mapLayers").querySelectorAll("li:not(.buttonoff)"))
       .map(node => node.id)
       .sort();
     layersPreset.add(new Option(preset, preset, false, true));
@@ -139,22 +143,24 @@ function removePreset() {
 }
 
 function getCurrentPreset() {
-  const layers = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
+  const $toggledOnLayers = byId("mapLayers").querySelectorAll("li:not(.buttonoff)");
+  const currentLayers = Array.from($toggledOnLayers)
     .map(node => node.id)
     .sort();
-  const defaultPresets = getDefaultPresets();
 
+  const defaultPresets = getDefaultPresets();
   for (const preset in presets) {
-    if (JSON.stringify(presets[preset]) !== JSON.stringify(layers)) continue;
+    if (JSON.stringify(presets[preset].sort()) !== JSON.stringify(currentLayers)) continue;
-    layersPreset.value = preset;
+
-    removePresetButton.style.display = defaultPresets[preset] ? "none" : "inline-block";
+    byId("layersPreset").value = preset;
-    savePresetButton.style.display = "none";
+    byId("removePresetButton").style.display = defaultPresets[preset] ? "none" : "inline-block";
+    byId("savePresetButton").style.display = "none";
     return;
   }
 
-  layersPreset.value = "custom";
+  byId("layersPreset").value = "custom";
-  removePresetButton.style.display = "none";
+  byId("removePresetButton").style.display = "none";
-  savePresetButton.style.display = "inline-block";
+  byId("savePresetButton").style.display = "inline-block";
 }
 
 // run on map regeneration
@@ -182,6 +188,46 @@ function restoreLayers() {
   if (!layerIsOn("toggleRivers")) rivers.selectAll("*").remove();
 }
 
+export const layerTogglesMap = {
+  toggleBiomes,
+  toggleBorders,
+  toggleCells,
+  toggleCompass,
+  toggleCoordinates,
+  toggleCultures,
+  toggleEmblems,
+  toggleGrid,
+  toggleHeight,
+  toggleIce,
+  toggleIcons,
+  toggleLabels,
+  toggleMarkers,
+  toggleMilitary,
+  togglePopulation,
+  togglePrec,
+  toggleProvinces,
+  toggleRelief,
+  toggleReligions,
+  toggleRivers,
+  toggleRoutes,
+  toggleRulers,
+  toggleScaleBar,
+  toggleStates,
+  toggleTemp,
+  toggleTexture,
+  toggleZones
+};
+
+function toggleLayer(event) {
+  const targetId = event.target.id;
+  if (!targetId || targetId === "mapLayers" || !layerTogglesMap[targetId]) return;
+  layerTogglesMap[targetId]();
+}
+
+export function addToggleLayersListener() {
+  byId("mapLayers").on("click", toggleLayer);
+}
+
 function toggleHeight(event) {
   if (customization === 1) {
     tip("You cannot turn off the layer when heightmap is in edit mode", false, "error");
@@ -1475,8 +1521,8 @@ function drawCoordinates() {
 
 // conver svg point into viewBox point
 function getViewPoint(x, y) {
-  const view = document.getElementById("viewbox");
+  const view = byId("viewbox");
-  const svg = document.getElementById("map");
+  const svg = byId("map");
   const pt = svg.createSVGPoint();
   (pt.x = x), (pt.y = y);
   return pt.matrixTransform(view.getScreenCTM().inverse());
@@ -1597,7 +1643,7 @@ function toggleRoutes(event) {
   }
 }
 
-function toggleMilitary() {
+function toggleMilitary(event) {
   if (!layerIsOn("toggleMilitary")) {
     turnButtonOn("toggleMilitary");
     $("#armies").fadeIn();
@@ -1772,21 +1818,21 @@ function drawEmblems() {
   const getStateEmblemsSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
     const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
-    const sizeMod = +document.getElementById("emblemsStateSizeInput").value || 1;
+    const sizeMod = +byId("emblemsStateSizeInput").value || 1;
     return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
   };
 
   const getProvinceEmblemsSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
     const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
-    const sizeMod = +document.getElementById("emblemsProvinceSizeInput").value || 1;
+    const sizeMod = +byId("emblemsProvinceSizeInput").value || 1;
     return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
   };
 
   const getBurgEmblemSize = () => {
     const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
     const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
-    const sizeMod = +document.getElementById("emblemsBurgSizeInput").value || 1;
+    const sizeMod = +byId("emblemsBurgSizeInput").value || 1;
     return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
   };
 
@@ -1873,17 +1919,17 @@ function drawEmblems() {
 }
 
 export function layerIsOn(el) {
-  const buttonoff = document.getElementById(el).classList.contains("buttonoff");
+  const buttonoff = byId(el).classList.contains("buttonoff");
   return !buttonoff;
 }
 
 function turnButtonOff(el) {
-  document.getElementById(el).classList.add("buttonoff");
+  byId(el).classList.add("buttonoff");
   getCurrentPreset();
 }
 
 function turnButtonOn(el) {
-  document.getElementById(el).classList.remove("buttonoff");
+  byId(el).classList.remove("buttonoff");
   getCurrentPreset();
 }
 

modules/ui/markers-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 
 export function editMarker(markerI) {

modules/ui/markers-overview.js

@@ -1,5 +1,6 @@
-"use strict";
+import {restoreDefaultEvents} from "/src/scripts/events";
-function overviewMarkers() {
+
+export function overviewMarkers() {
   if (customization) return;
   closeDialogs("#markersOverview, .stable");
   if (!layerIsOn("toggleMarkers")) toggleMarkers();
@@ -54,8 +55,12 @@ function overviewMarkers() {
         <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
         <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
         <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
-        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${pinned ? "" : "inactive"}" pointer"></span>
+        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
-        <span style="padding-right:.1em" class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
+          pinned ? "" : "inactive"
+        }" pointer"></span>
+        <span style="padding-right:.1em" class="locks pointer ${
+          lock ? "icon-lock" : "icon-lock-open inactive"
+        }" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove marker" class="icon-trash-empty"></span>
       </div>`;
       })
@@ -177,8 +182,8 @@ function overviewMarkers() {
       const {i, type, icon, x, y} = marker;
       const id = `marker${i}`;
       const note = notes.find(note => note.id === id);
-      const name = note ? quote(note.name) : 'Unknown';
+      const name = note ? quote(note.name) : "Unknown";
-      const legend = note ? quote(note.legend) : '';
+      const legend = note ? quote(note.legend) : "";
       return [id, type, icon, name, legend, x, y].join(",");
     });
 

modules/ui/provinces-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
 

modules/ui/regiment-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
 

modules/ui/relief-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 
 export function editReliefIcon() {

modules/ui/rivers-creator.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {getPackPolygon, findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
 

modules/ui/tools.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
 

modules/ui/units-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 
 export function editUnits() {

modules/ui/zones-editor.js

@@ -1,3 +1,4 @@
+import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
 

modules/zoom.js

@@ -22,6 +22,10 @@ window.Zoom = (function () {
   const onZoomDebouced = debounce(onZoom, 50);
   const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);
 
+  function setZoomBehavior() {
+    svg.call(zoom);
+  }
+
   // zoom to a specific point
   function to(x, y, z = 8, d = 2000) {
     const transform = d3.zoomIdentity.translate(x * -z + graphWidth / 2, y * -z + graphHeight / 2).scale(z);
@@ -48,5 +52,5 @@ window.Zoom = (function () {
     zoom.scaleTo(element, scale);
   }
 
-  return {to, reset, scaleExtent, translateExtent, scaleTo};
+  return {setZoomBehavior, to, reset, scaleExtent, translateExtent, scaleTo};
 })();

src/main.ts

@@ -12,13 +12,14 @@ import {
   findCell
 } from "./utils/graphUtils";
 import {createTypedArray} from "./utils/arrayUtils";
-import {drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
+import {applyPreset, drawRivers, drawStates, drawBorders} from "../modules/ui/layers";
 import {invokeActiveZooming} from "../modules/activeZooming";
 import {applyStoredOptions, applyMapSize, randomizeOptions} from "../modules/ui/options";
 import {locked} from "./scripts/options/lock";
 import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
 import {byId} from "./utils/shorthands";
 import {addGlobalListeners} from "./scripts/listeners";
+import {restoreDefaultEvents} from "./scripts/events";
 
 addGlobalListeners();
 

src/scripts/events.ts

@@ -0,0 +1,5 @@
+export function restoreDefaultEvents() {
+  Zoom.setZoomBehavior();
+  viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
+  legend.call(d3.drag().on("start", dragLegendBox));
+}