diff --git a/src/Element.ts b/src/Element.ts index 7237a700..8e642ea8 100644 --- a/src/Element.ts +++ b/src/Element.ts @@ -219,6 +219,22 @@ export interface ElementEvent { pinchY: number, pinchScale: number, wheelDelta: number, + /** + * Raw `WheelEvent.deltaX`. Only available in the zrender "mousewheel" + * event, which is fired by the native "wheel" event. + */ + deltaX?: number, + /** + * Raw `WheelEvent.deltaY`. Only available in the zrender "mousewheel" + * event, which is fired by the native "wheel" event. + */ + deltaY?: number, + /** + * Raw `WheelEvent.deltaMode` (0: pixel, 1: line, 2: page). + * Only available in the zrender "mousewheel" event, which is + * fired by the native "wheel" event. + */ + deltaMode?: number, zrByTouch: boolean, which: number, stop: (this: ElementEvent) => void diff --git a/src/Handler.ts b/src/Handler.ts index 45b09cee..d3eb3980 100644 --- a/src/Handler.ts +++ b/src/Handler.ts @@ -7,7 +7,9 @@ import {GestureMgr} from './core/GestureMgr'; import Displayable from './graphic/Displayable'; import {PainterBase} from './PainterBase'; import HandlerDomProxy, { HandlerProxyInterface } from './dom/HandlerProxy'; -import { ZRRawEvent, ZRPinchEvent, ElementEventName, ElementEventNameWithOn, ZRRawTouchEvent } from './core/types'; +import { + ZRRawEvent, ZRPinchEvent, ZRRawWheelEvent, ElementEventName, ElementEventNameWithOn, ZRRawTouchEvent +} from './core/types'; import Storage from './Storage'; import Element, {ElementEvent} from './Element'; import CanvasPainter from './canvas/Painter'; @@ -96,6 +98,9 @@ function makeEventPacket(eveType: ElementEventName, targetInfo: { pinchY: (event as ZRPinchEvent).pinchY, pinchScale: (event as ZRPinchEvent).pinchScale, wheelDelta: event.zrDelta, + deltaX: (event as ZRRawWheelEvent).deltaX, + deltaY: (event as ZRRawWheelEvent).deltaY, + deltaMode: (event as ZRRawWheelEvent).deltaMode, zrByTouch: event.zrByTouch, which: event.which, stop: stopEvent diff --git a/src/core/event.ts b/src/core/event.ts index e872db58..9be0b85c 100644 --- a/src/core/event.ts +++ b/src/core/event.ts @@ -196,7 +196,8 @@ export function normalizeEvent( return e; } -// TODO: also provide prop "deltaX" "deltaY" in zrender "mousewheel" event. +// Note: the normalization here ignores "deltaMode", so the scale of `zrDelta` differs +// among browsers and devices. `ElementEvent` provides the raw "deltaX"/"deltaY"/"deltaMode". function getWheelDeltaMayPolyfill(e: ZRRawEvent): number { // Although event "wheel" do not has the prop "wheelDelta" in spec, // agent like Chrome and Safari still provide "wheelDelta" like diff --git a/src/core/types.ts b/src/core/types.ts index 3ca5988e..00a45e60 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -62,10 +62,11 @@ type ZREventProperties = { } export type ZRRawMouseEvent = MouseEvent & ZREventProperties +export type ZRRawWheelEvent = WheelEvent & ZREventProperties export type ZRRawTouchEvent = TouchEvent & ZREventProperties export type ZRRawPointerEvent = TouchEvent & ZREventProperties -export type ZRRawEvent = ZRRawMouseEvent | ZRRawTouchEvent | ZRRawPointerEvent +export type ZRRawEvent = ZRRawMouseEvent | ZRRawWheelEvent | ZRRawTouchEvent | ZRRawPointerEvent export type ZRPinchEvent = ZRRawEvent & { pinchScale: number diff --git a/test/wheel-event.html b/test/wheel-event.html new file mode 100644 index 00000000..84204af8 --- /dev/null +++ b/test/wheel-event.html @@ -0,0 +1,59 @@ + + + + + Wheel Event: raw deltaX / deltaY / deltaMode + + + + + +

Scroll the mouse wheel / trackpad over the rectangle. + The zrender "mousewheel" event carries the raw deltaX / deltaY / deltaMode + of the native WheelEvent, along with the normalized wheelDelta.

+
+ + + + + + + +
deltaXdeltaYdeltaModewheelDelta
----
+
+ + +