Remove jquery-ui-bundle and use vanilla js instead

.eslintrc.json

@@ -13,7 +13,7 @@
   "extends": ["eslint:recommended", "plugin:react/recommended"],
   "overrides": [],
   "parserOptions": {
-    "ecmaVersion": 9,
+    "ecmaVersion": 2022,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true

package.json

@@ -11,7 +11,6 @@
     "@turf/turf": "^6.5.0",
     "axios": "^1.1.3",
     "date-fns": "^2.29.3",
-    "jquery-ui-bundle": "^1.12.1-migrate",
     "json-format": "^1.0.1",
     "leaflet": "^1.9.3",
     "leaflet-extra-markers": "^1.2.1",

src/Map/Map.jsx

@@ -2,9 +2,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import L from 'leaflet'
-import * as $ from 'jquery'
-import 'jquery-ui-bundle'
-import 'jquery-ui-bundle/jquery-ui.css'
 
 import '@geoman-io/leaflet-geoman-free'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
@@ -32,6 +29,7 @@ import {
 } from 'utils/valhalla'
 import { colorMappings, buildHeightgraphData } from 'utils/heightgraph'
 import formatDuration from 'utils/date_time'
+import makeResizable from 'utils/resizable'
 import './Map.css'
 const OSMTiles = L.tileLayer(process.env.REACT_APP_TILE_SERVER_URL, {
   attribution:
@@ -312,29 +310,29 @@ class Map extends React.Component {
     this.hg.addTo(this.map)
     const hg = this.hg
     // Added title property to heightgraph-toggle element to show "Height Graph" tooltip
-    $('.heightgraph-toggle').prop('title', 'Height Graph')
-    $('.heightgraph').resizable({
-      handles: 'w, n, nw',
-      minWidth: 380,
-      minHeight: 140,
-      stop: function (event, ui) {
-        // Remove the size/position of the UI element (.heightgraph .leaflet-control) because
-        // it should be sized dynamically based on its contents. Giving it a fixed size causes
-        // the toggle icon to be in the wrong place when the height graph is minimized.
-        ui.element.css({ width: '', height: '', left: '', top: '' })
-      },
-      resize: function (event, ui) {
-        if (
-          ui.originalPosition.left !== ui.position.left ||
-          ui.originalPosition.top !== ui.position.top
-        ) {
-          // left/upper edge was dragged => only keep size change since we're sticking to the right/bottom
-          ui.position.left = 0
-          ui.position.top = 0
-        }
-        hg.resize(ui.size)
-      },
-    })
+    document
+      .querySelector('.heightgraph-toggle')
+      .setAttribute('title', 'Height Graph')
+
+    const heightgraphEl = document.querySelector('.heightgraph')
+    if (heightgraphEl) {
+      this.heightgraphResizer = makeResizable(heightgraphEl, {
+        handles: 'w, n, nw',
+        minWidth: 380,
+        minHeight: 140,
+        applyInlineSize: false,
+        onResize: ({ width, height }) => {
+          hg.resize({ width, height })
+        },
+        onStop: () => {
+          // Clear inline size/position if any
+          heightgraphEl.style.width = ''
+          heightgraphEl.style.height = ''
+          heightgraphEl.style.left = ''
+          heightgraphEl.style.top = ''
+        },
+      })
+    }
 
     // this.map.on('moveend', () => {
     //   dispatch(doUpdateBoundingBox(this.map.getBounds()))
@@ -440,6 +438,15 @@ class Map extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    if (
+      this.heightgraphResizer &&
+      typeof this.heightgraphResizer.destroy === 'function'
+    ) {
+      this.heightgraphResizer.destroy()
+    }
+  }
+
   zoomToCoordinates = () => {
     const { coordinates, showDirectionsPanel, showSettings } = this.props
     const maxZoom = coordinates.length === 1 ? 11 : 18

src/utils/resizable.js

@@ -0,0 +1,220 @@
+/* eslint-disable id-length */
+export default function makeResizable(target, options = {}) {
+  if (!target) {
+    throw new Error('makeResizable: target element is required')
+  }
+
+  const handles = parseHandles(options.handles || 'w, n, nw')
+  const minWidth = options.minWidth || 0
+  const minHeight = options.minHeight || 0
+  const applyInlineSize = options.applyInlineSize !== false
+  const onResize =
+    typeof options.onResize === 'function' ? options.onResize : null
+  const onStop = typeof options.onStop === 'function' ? options.onStop : null
+
+  const state = {
+    resizing: false,
+    activeHandle: null,
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    startHeight: 0,
+  }
+
+  const handleElements = []
+  const boundDownHandlers = []
+  const boundTouchStartHandlers = []
+
+  const computedStyle = window.getComputedStyle(target)
+  if (computedStyle.position === 'static') {
+    target.style.position = 'relative'
+  }
+
+  handles.forEach((h) => {
+    const el = document.createElement('div')
+    el.className = `resizable-handle resizable-handle-${h}`
+    Object.assign(el.style, baseHandleStyle, handlePositionStyle(h))
+    const md = onMouseDown(h)
+    const ts = onTouchStart(h)
+    el.addEventListener('mousedown', md)
+    el.addEventListener('touchstart', ts, { passive: false })
+    target.appendChild(el)
+    handleElements.push(el)
+    boundDownHandlers.push(md)
+    boundTouchStartHandlers.push(ts)
+  })
+
+  function onMouseDown(handle) {
+    return function (e) {
+      e.preventDefault()
+      startResize(handle, e.clientX, e.clientY)
+      window.addEventListener('mousemove', onMouseMove)
+      window.addEventListener('mouseup', onMouseUp)
+    }
+  }
+
+  function onTouchStart(handle) {
+    return function (e) {
+      if (e.touches && e.touches.length > 0) {
+        e.preventDefault()
+        const t = e.touches[0]
+        startResize(handle, t.clientX, t.clientY)
+        window.addEventListener('touchmove', onTouchMove, { passive: false })
+        window.addEventListener('touchend', onTouchEnd)
+      }
+    }
+  }
+
+  function startResize(handle, clientX, clientY) {
+    state.resizing = true
+    state.activeHandle = handle
+    state.startX = clientX
+    state.startY = clientY
+    state.startWidth = getElementPixelWidth(target)
+    state.startHeight = getElementPixelHeight(target)
+    target.classList.add('resizing')
+  }
+
+  function onMouseMove(e) {
+    e.preventDefault()
+    performResize(e.clientX, e.clientY)
+  }
+
+  function onTouchMove(e) {
+    if (e.touches && e.touches.length > 0) {
+      e.preventDefault()
+      const t = e.touches[0]
+      performResize(t.clientX, t.clientY)
+    }
+  }
+
+  function performResize(clientX, clientY) {
+    if (!state.resizing) {
+      return
+    }
+    const dx = clientX - state.startX
+    const dy = clientY - state.startY
+
+    let newWidth = state.startWidth
+    let newHeight = state.startHeight
+
+    if (state.activeHandle.includes('w')) {
+      newWidth = Math.max(minWidth, state.startWidth - dx)
+    }
+    if (state.activeHandle.includes('n')) {
+      newHeight = Math.max(minHeight, state.startHeight - dy)
+    }
+
+    if (applyInlineSize) {
+      target.style.width = `${newWidth}px`
+      target.style.height = `${newHeight}px`
+    }
+
+    if (onResize) {
+      onResize({ width: newWidth, height: newHeight })
+    }
+  }
+
+  function onMouseUp() {
+    stopResize()
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+
+  function onTouchEnd() {
+    stopResize()
+    window.removeEventListener('touchmove', onTouchMove)
+    window.removeEventListener('touchend', onTouchEnd)
+  }
+
+  function stopResize() {
+    if (!state.resizing) {
+      return
+    }
+    state.resizing = false
+    target.classList.remove('resizing')
+    if (applyInlineSize) {
+      // Remove explicit left/top to stick to bottom-right if consumer adjusts positioning
+      target.style.left = ''
+      target.style.top = ''
+    }
+    if (onStop) {
+      onStop()
+    }
+  }
+
+  function destroy() {
+    handleElements.forEach((el, idx) => {
+      el.removeEventListener('mousedown', boundDownHandlers[idx])
+      el.removeEventListener('touchstart', boundTouchStartHandlers[idx])
+      if (el.parentNode === target) {
+        target.removeChild(el)
+      }
+    })
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+    window.removeEventListener('touchmove', onTouchMove)
+    window.removeEventListener('touchend', onTouchEnd)
+  }
+
+  return { destroy }
+}
+
+function parseHandles(handles) {
+  return handles
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+function getElementPixelWidth(el) {
+  // Prefer attribute 'width' if present (leaflet.heightgraph uses an SVG width attr)
+  const attr = el.getAttribute('width')
+  if (attr && !isNaN(Number(attr))) {
+    return Number(attr)
+  }
+  const rect = el.getBoundingClientRect()
+  return Math.max(0, Math.round(rect.width))
+}
+
+function getElementPixelHeight(el) {
+  const attr = el.getAttribute('height')
+  if (attr && !isNaN(Number(attr))) {
+    return Number(attr)
+  }
+  const rect = el.getBoundingClientRect()
+  return Math.max(0, Math.round(rect.height))
+}
+
+const baseHandleStyle = {
+  position: 'absolute',
+  width: '12px',
+  height: '7px',
+  zIndex: '10',
+  cursor: 'default',
+}
+
+function handlePositionStyle(h) {
+  switch (h) {
+    case 'w':
+      return {
+        left: '-4px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        cursor: 'ew-resize',
+        height: '100%',
+      }
+    case 'n':
+      return {
+        top: '-4px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        cursor: 'ns-resize',
+        width: '100%',
+      }
+    case 'nw':
+      return { top: '-4px', left: '-4px', cursor: 'nwse-resize' }
+    default:
+      return {}
+  }
+}