From 7e8af0a902c6083115a943b1f786a47c4b6916bd Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Thu, 13 Dec 2018 17:46:12 -0800
Subject: [PATCH] better wheel delta handling
---
src/mol-canvas3d/controls/trackball.ts | 2 +-
src/mol-util/input/input-observer.ts | 26 +++++------
src/mol-util/parse-unit.ts | 22 ---------
src/mol-util/to-pixels.ts | 63 --------------------------
4 files changed, 12 insertions(+), 101 deletions(-)
delete mode 100644 src/mol-util/parse-unit.ts
delete mode 100644 src/mol-util/to-pixels.ts
diff --git a/src/mol-canvas3d/controls/trackball.ts b/src/mol-canvas3d/controls/trackball.ts
index 269c5819c..163ed4c53 100644
--- a/src/mol-canvas3d/controls/trackball.ts
+++ b/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) {
diff --git a/src/mol-util/input/input-observer.ts b/src/mol-util/input/input-observer.ts
index 67bd8a14c..84ead2d65 100644
--- a/src/mol-util/input/input-observer.ts
+++ b/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 })
}
diff --git a/src/mol-util/parse-unit.ts b/src/mol-util/parse-unit.ts
deleted file mode 100644
index e0e0652b1..000000000
--- a/src/mol-util/parse-unit.ts
+++ /dev/null
@@ -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
-}
\ No newline at end of file
diff --git a/src/mol-util/to-pixels.ts b/src/mol-util/to-pixels.ts
deleted file mode 100644
index 870404025..000000000
--- a/src/mol-util/to-pixels.ts
+++ /dev/null
@@ -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
-}
\ No newline at end of file
--
GitLab