Cleanup: use pointer events instead of my older Draggable.v2 library

Draggable.v2 is a wrapper around mouse and touch events to hide their
differences. Pointer Events, widely supported in browsers as of 2021,
is a simpler way to handle mouse and touch events.

Author: redblobgames

README.org

@@ -52,6 +52,10 @@ It's a continuation of ideas I developed for [[https://github.com/amitp/mapgen2/
 
 There's plenty more that could be done to make it even faster and prettier. There are plenty of features that could be added, such as [[https://www.redblobgames.com/x/1723-procedural-river-growing/#draw][drawing your own rivers]], [[https://www.redblobgames.com/x/1843-planet-generation/][sphere output]], [[https://www.redblobgames.com/x/1736-resource-placement/][natural resources]], towns, forests, names, roads, and nations, but I'm leaving those for a future project.
 
+* Code
+
+The entry point is [[mapgen4.js]]. The main data structures are from my dual-mesh library. The map generation algorithms are in [[map.js]]. The input painting is in [[painting.js]]. The output rendering is in [[render.js]]. Calculations are in [[worker.js]]. Some of the calculations are shared between the worker and renderer, and those are in [[geometry.js]].
+
 * License
 
 Mapgen4 and helper libraries I wrote (dual-mesh, prng) are licensed under Apache v2. You can use this code in your own project, including commercial projects.

draggable.v2.js

@@ -92,7 +92,6 @@
 
   <div id="map"><canvas id="mapgen4" width="2048" height="2048"/></div>
   </div>
-  <script defer="defer" src="draggable.v2.js"></script>
   <script defer="defer" src="build/_bundle.js"></script>
 </div>
 

embed.html

@@ -7,8 +7,6 @@
  */
 'use strict';
 
-/* global Draggable */
-
 /*
  * The painting interface uses a square array of elevations. As you
  * drag the mouse it will paint filled circles into the elevation map,
@@ -198,42 +196,78 @@ for (let control of controls) {
 displayCurrentTool();
 
 
-const output = document.getElementById('mapgen4');
-new Draggable({
-    // TODO: replace with pointer events, now that they're widely supported
-    el: output,
-    start(event) {
-        this.timestamp = Date.now();
+function setUpPaintEventHandling() {
+    const el = document.getElementById('mapgen4');
+    let dragging = false;
+    let timestamp = 0;
+    
+    /**
+     * @param {PointerEvent} event
+     */
+    function start(event) {
+        if (event.button !== 0) return; // left button only
+        el.setPointerCapture(event.pointerId);
+        
+        dragging = true;
+        timestamp = Date.now();
         currentStroke.time.fill(0);
         currentStroke.strength.fill(0);
         currentStroke.previousElevation.set(heightMap.elevation);
-        this.drag(event);
-    },
-    drag(event) {
+        move(event);
+    }
+
+    function end(_event) {
+        dragging = false;
+    }
+
+    /**
+     * @param {PointerEvent} event
+     */
+    function move(event) {
+        if (!dragging) return;
+
         const nowMs = Date.now();
-        let coords = [event.x / output.clientWidth,
-                      event.y / output.clientHeight];
+        const bounds = el.getBoundingClientRect();
+        let coords = [
+            (event.x - bounds.left) / bounds.width,
+            (event.y - bounds.top) / bounds.height,
+        ];
         coords = exported.screenToWorldCoords(coords);
         let brushSize = SIZES[currentSize];
-        if (event.touch && event.touch.force > 0) {
-            // Apple Stylus
-            let radius = Math.sqrt(event.touch.force);
+        if (event.pointerType === 'pen' && event.pressure !== 0.5) {
+            // Pointer Event spec says 0.5 sent when pen does not
+            // support pressure; I primarily added this for Apple
+            // Pencil but haven't tested on others. I want pressure
+            // 0.25 to correspond to "regular" pressure for the given
+            // brush size, so radius should be 1.0. I am *not*
+            // currently supporting Macbook pressure-sensitive
+            // touchpads, which don't show up under Pointer Events.
+            // https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events
+            let radius = 2 * Math.sqrt(event.pressure);
             brushSize = {
                 key: brushSize.key,
                 innerRadius: Math.max(1, brushSize.innerRadius * radius),
                 outerRadius: Math.max(2, brushSize.outerRadius * radius),
                 rate: brushSize.rate,
             };
         }
-        if (event.raw && event.raw.shiftKey) {
+        if (event.shiftKey) {
             // Hold down shift to paint slowly
             brushSize = {...brushSize, rate: brushSize.rate/4};
         }
-        heightMap.paintAt(TOOLS[currentTool], coords[0], coords[1], brushSize, nowMs - this.timestamp);
-        this.timestamp = nowMs;
+        heightMap.paintAt(TOOLS[currentTool], coords[0], coords[1],
+                          brushSize, nowMs - timestamp);
+        timestamp = nowMs;
         exported.onUpdate();
-    },
-});
+    }
+        
+    el.addEventListener('pointerdown', start);
+    el.addEventListener('pointerup', end);
+    el.addEventListener('pointercancel', end);
+    el.addEventListener('pointermove', move)
+    el.addEventListener('touchstart', (e) => e.preventDefault()); // prevent scroll
+}
+setUpPaintEventHandling();