better wheel delta handling

src/mol-canvas3d/controls/trackball.ts

@@ -258,7 +258,7 @@ namespace TrackballControls {
         }
 
         function onWheel({ dy }: WheelInput) {
-            _zoomStart[1] -= dy
+            _zoomStart[1] -= dy * 0.0001
         }
 
         function onPinch({ distance, isStart }: PinchInput) {

src/mol-util/input/input-observer.ts

@@ -8,7 +8,6 @@ import { Subject } from 'rxjs';
 
 import { Vec2 } from 'mol-math/linear-algebra';
 
-import toPixels from '../to-pixels'
 import { BitFlags } from 'mol-util';
 
 function getButtons(event: MouseEvent | Touch) {
@@ -152,8 +151,6 @@ namespace InputObserver {
     export function create (element: Element, props: InputObserverProps = {}): InputObserver {
         let { noScroll, noContextMenu } = { ...DefaultInputObserverProps, ...props }
 
-        const lineHeight = toPixels('ex', element)
-
         let lastTouchDistance = 0
         const pointerDown = Vec2.zero()
         const pointerStart = Vec2.zero()
@@ -376,23 +373,22 @@ namespace InputObserver {
             dragging = DraggingState.Moving
         }
 
-        function onMouseWheel(ev: MouseWheelEvent) {
+        function onMouseWheel(ev: WheelEvent) {
             if (noScroll) {
                 ev.preventDefault()
             }
-            const mode = ev.deltaMode
-            let dx = ev.deltaX || 0
-            let dy = ev.deltaY || 0
-            let dz = ev.deltaZ || 0
+
             let scale = 1
-            switch (mode) {
-                case 1: scale = lineHeight; break
-                case 2: scale = window.innerHeight; break
+            switch (ev.deltaMode) {
+                case 0: scale = 1; break // pixels
+                case 1: scale = 40; break // lines
+                case 2: scale = 800; break // pages
             }
-            scale *= 0.0001
-            dx *= scale
-            dy *= scale
-            dz *= scale
+
+            const dx = (ev.deltaX || 0) * scale
+            const dy = (ev.deltaY || 0) * scale
+            const dz = (ev.deltaZ || 0) * scale
+
             if (dx || dy || dz) {
                 wheel.next({ dx, dy, dz, buttons, modifiers })
             }

src/mol-util/parse-unit.ts

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-/*
- * This code has been modified from https://github.com/mattdesl/parse-unit,
- * copyright (c) 2014 Matt DesLauriers. MIT License
- */
-
-const reUnit = /[\d.\-\+]*\s*(.*)/
-
-/** Parsing value of, for example, CSS unit strings */
-export default function parseUnit(str: string, out: [number, string] = [ 0, '' ]) {
-    str = String(str)
-    const num = parseFloat(str)
-    out[0] = num
-    const m = str.match(reUnit)
-    if (m) out[1] = m[1] || ''
-    return out
-}

src/mol-util/to-pixels.ts

@@ -1,63 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-/*
- * This code has been modified from https://github.com/mikolalysenko/to-px,
- * copyright (c) 2015 Mikola Lysenko. MIT License
- */
-
-import parseUnit from './parse-unit'
-
-const PIXELS_PER_INCH = 96
-
-function getPropertyInPX(element: Element, prop: string) {
-    const parts = parseUnit(getComputedStyle(element).getPropertyValue(prop))
-    return parts[0] * toPixels(parts[1], element)
-}
-
-// This brutal hack is needed
-function getSizeBrutal(unit: string, element: Element) {
-    const testDIV = document.createElement('div')
-    testDIV.style.setProperty('font-size', '128' + unit)
-    element.appendChild(testDIV)
-    const size = getPropertyInPX(testDIV, 'font-size') / 128
-    element.removeChild(testDIV)
-    return size
-}
-
-export default function toPixels(str: string, element: Element = document.body): number {
-    str = (str || 'px').trim().toLowerCase()
-    switch (str) {
-        case '%':  // Ambiguous, not sure if we should use width or height
-            return element.clientHeight / 100.0
-        case 'ch':
-        case 'ex':
-            return getSizeBrutal(str, element)
-        case 'em':
-            return getPropertyInPX(element, 'font-size')
-        case 'rem':
-            return getPropertyInPX(document.body, 'font-size')
-        case 'vw':
-            return window.innerWidth/100
-        case 'vh':
-            return window.innerHeight/100
-        case 'vmin':
-            return Math.min(window.innerWidth, window.innerHeight) / 100
-        case 'vmax':
-            return Math.max(window.innerWidth, window.innerHeight) / 100
-        case 'in':
-            return PIXELS_PER_INCH
-        case 'cm':
-            return PIXELS_PER_INCH / 2.54
-        case 'mm':
-            return PIXELS_PER_INCH / 25.4
-        case 'pt':
-            return PIXELS_PER_INCH / 72
-        case 'pc':
-            return PIXELS_PER_INCH / 6
-  }
-  return 1
-}