| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| |
| import Eventful from 'zrender/src/core/Eventful'; |
| import * as eventTool from 'zrender/src/core/event'; |
| import * as interactionMutex from './interactionMutex'; |
| import { ZRenderType } from 'zrender/src/zrender'; |
| import { ZRElementEvent, RoamOptionMixin } from '../../util/types'; |
| import { Bind3, isString, bind, defaults, clone } from 'zrender/src/core/util'; |
| import Group from 'zrender/src/graphic/Group'; |
| |
| // Can be null/undefined or true/false |
| // or 'pan/move' or 'zoom'/'scale' |
| export type RoamType = RoamOptionMixin['roam']; |
| |
| interface RoamOption { |
| zoomOnMouseWheel?: boolean | 'ctrl' | 'shift' | 'alt' |
| moveOnMouseMove?: boolean | 'ctrl' | 'shift' | 'alt' |
| moveOnMouseWheel?: boolean | 'ctrl' | 'shift' | 'alt' |
| /** |
| * If fixed the page when pan |
| */ |
| preventDefaultMouseMove?: boolean |
| } |
| |
| type RoamEventType = keyof RoamEventParams; |
| |
| type RoamBehavior = 'zoomOnMouseWheel' | 'moveOnMouseMove' | 'moveOnMouseWheel'; |
| |
| export type RoamEventParams = { |
| 'zoom': { |
| scale: number |
| originX: number |
| originY: number |
| |
| isAvailableBehavior: Bind3<typeof isAvailableBehavior, null, RoamBehavior, ZRElementEvent> |
| } |
| 'scrollMove': { |
| scrollDelta: number |
| originX: number |
| originY: number |
| |
| isAvailableBehavior: Bind3<typeof isAvailableBehavior, null, RoamBehavior, ZRElementEvent> |
| } |
| 'pan': { |
| dx: number |
| dy: number |
| oldX: number |
| oldY: number |
| newX: number |
| newY: number |
| |
| isAvailableBehavior: Bind3<typeof isAvailableBehavior, null, RoamBehavior, ZRElementEvent> |
| } |
| }; |
| |
| export interface RoamControllerHost { |
| target: Group |
| zoom: number |
| zoomLimit: { |
| min?: number |
| max?: number |
| } |
| } |
| |
| class RoamController extends Eventful<RoamEventParams> { |
| |
| pointerChecker: (e: ZRElementEvent, x: number, y: number) => boolean; |
| |
| private _zr: ZRenderType; |
| |
| private _opt: Required<RoamOption>; |
| |
| private _dragging: boolean; |
| |
| private _pinching: boolean; |
| |
| private _x: number; |
| |
| private _y: number; |
| |
| readonly enable: (this: this, controlType?: RoamType, opt?: RoamOption) => void; |
| |
| readonly disable: () => void; |
| |
| |
| constructor(zr: ZRenderType) { |
| super(); |
| |
| this._zr = zr; |
| |
| // Avoid two roamController bind the same handler |
| const mousedownHandler = bind(this._mousedownHandler, this); |
| const mousemoveHandler = bind(this._mousemoveHandler, this); |
| const mouseupHandler = bind(this._mouseupHandler, this); |
| const mousewheelHandler = bind(this._mousewheelHandler, this); |
| const pinchHandler = bind(this._pinchHandler, this); |
| |
| /** |
| * Notice: only enable needed types. For example, if 'zoom' |
| * is not needed, 'zoom' should not be enabled, otherwise |
| * default mousewheel behaviour (scroll page) will be disabled. |
| */ |
| this.enable = function (controlType, opt) { |
| |
| // Disable previous first |
| this.disable(); |
| |
| this._opt = defaults(clone(opt) || {}, { |
| zoomOnMouseWheel: true, |
| moveOnMouseMove: true, |
| // By default, wheel do not trigger move. |
| moveOnMouseWheel: false, |
| preventDefaultMouseMove: true |
| }); |
| |
| if (controlType == null) { |
| controlType = true; |
| } |
| |
| if (controlType === true || (controlType === 'move' || controlType === 'pan')) { |
| zr.on('mousedown', mousedownHandler); |
| zr.on('mousemove', mousemoveHandler); |
| zr.on('mouseup', mouseupHandler); |
| } |
| if (controlType === true || (controlType === 'scale' || controlType === 'zoom')) { |
| zr.on('mousewheel', mousewheelHandler); |
| zr.on('pinch', pinchHandler); |
| } |
| }; |
| |
| this.disable = function () { |
| zr.off('mousedown', mousedownHandler); |
| zr.off('mousemove', mousemoveHandler); |
| zr.off('mouseup', mouseupHandler); |
| zr.off('mousewheel', mousewheelHandler); |
| zr.off('pinch', pinchHandler); |
| }; |
| } |
| |
| isDragging() { |
| return this._dragging; |
| } |
| |
| isPinching() { |
| return this._pinching; |
| } |
| |
| setPointerChecker(pointerChecker: RoamController['pointerChecker']) { |
| this.pointerChecker = pointerChecker; |
| } |
| |
| dispose() { |
| this.disable(); |
| } |
| |
| private _mousedownHandler(e: ZRElementEvent) { |
| if (eventTool.isMiddleOrRightButtonOnMouseUpDown(e) |
| || (e.target && e.target.draggable) |
| ) { |
| return; |
| } |
| |
| const x = e.offsetX; |
| const y = e.offsetY; |
| |
| // Only check on mosedown, but not mousemove. |
| // Mouse can be out of target when mouse moving. |
| if (this.pointerChecker && this.pointerChecker(e, x, y)) { |
| this._x = x; |
| this._y = y; |
| this._dragging = true; |
| } |
| } |
| |
| private _mousemoveHandler(e: ZRElementEvent) { |
| if (!this._dragging |
| || !isAvailableBehavior('moveOnMouseMove', e, this._opt) |
| || e.gestureEvent === 'pinch' |
| || interactionMutex.isTaken(this._zr, 'globalPan') |
| ) { |
| return; |
| } |
| |
| const x = e.offsetX; |
| const y = e.offsetY; |
| |
| const oldX = this._x; |
| const oldY = this._y; |
| |
| const dx = x - oldX; |
| const dy = y - oldY; |
| |
| this._x = x; |
| this._y = y; |
| |
| this._opt.preventDefaultMouseMove && eventTool.stop(e.event); |
| |
| trigger(this, 'pan', 'moveOnMouseMove', e, { |
| dx: dx, dy: dy, oldX: oldX, oldY: oldY, newX: x, newY: y, isAvailableBehavior: null |
| }); |
| } |
| |
| private _mouseupHandler(e: ZRElementEvent) { |
| if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) { |
| this._dragging = false; |
| } |
| } |
| |
| private _mousewheelHandler(e: ZRElementEvent) { |
| const shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt); |
| const shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt); |
| const wheelDelta = e.wheelDelta; |
| const absWheelDeltaDelta = Math.abs(wheelDelta); |
| const originX = e.offsetX; |
| const originY = e.offsetY; |
| |
| // wheelDelta maybe -0 in chrome mac. |
| if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) { |
| return; |
| } |
| |
| // If both `shouldZoom` and `shouldMove` is true, trigger |
| // their event both, and the final behavior is determined |
| // by event listener themselves. |
| |
| if (shouldZoom) { |
| // Convenience: |
| // Mac and VM Windows on Mac: scroll up: zoom out. |
| // Windows: scroll up: zoom in. |
| |
| // FIXME: Should do more test in different environment. |
| // wheelDelta is too complicated in difference nvironment |
| // (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel), |
| // although it has been normallized by zrender. |
| // wheelDelta of mouse wheel is bigger than touch pad. |
| const factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1; |
| const scale = wheelDelta > 0 ? factor : 1 / factor; |
| checkPointerAndTrigger(this, 'zoom', 'zoomOnMouseWheel', e, { |
| scale: scale, originX: originX, originY: originY, isAvailableBehavior: null |
| }); |
| } |
| |
| if (shouldMove) { |
| // FIXME: Should do more test in different environment. |
| const absDelta = Math.abs(wheelDelta); |
| // wheelDelta of mouse wheel is bigger than touch pad. |
| const scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05); |
| checkPointerAndTrigger(this, 'scrollMove', 'moveOnMouseWheel', e, { |
| scrollDelta: scrollDelta, originX: originX, originY: originY, isAvailableBehavior: null |
| }); |
| } |
| } |
| |
| private _pinchHandler(e: ZRElementEvent) { |
| if (interactionMutex.isTaken(this._zr, 'globalPan')) { |
| return; |
| } |
| const scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1; |
| checkPointerAndTrigger(this, 'zoom', null, e, { |
| scale: scale, originX: e.pinchX, originY: e.pinchY, isAvailableBehavior: null |
| }); |
| } |
| } |
| |
| |
| function checkPointerAndTrigger<T extends 'scrollMove' | 'zoom'>( |
| controller: RoamController, |
| eventName: T, |
| behaviorToCheck: RoamBehavior, |
| e: ZRElementEvent, |
| contollerEvent: RoamEventParams[T] |
| ) { |
| if (controller.pointerChecker |
| && controller.pointerChecker(e, contollerEvent.originX, contollerEvent.originY) |
| ) { |
| // When mouse is out of roamController rect, |
| // default befavoius should not be be disabled, otherwise |
| // page sliding is disabled, contrary to expectation. |
| eventTool.stop(e.event); |
| |
| trigger(controller, eventName, behaviorToCheck, e, contollerEvent); |
| } |
| } |
| |
| function trigger<T extends RoamEventType>( |
| controller: RoamController, |
| eventName: T, |
| behaviorToCheck: RoamBehavior, |
| e: ZRElementEvent, |
| contollerEvent: RoamEventParams[T] |
| ) { |
| // Also provide behavior checker for event listener, for some case that |
| // multiple components share one listener. |
| contollerEvent.isAvailableBehavior = bind(isAvailableBehavior, null, behaviorToCheck, e); |
| controller.trigger(eventName, contollerEvent); |
| } |
| |
| // settings: { |
| // zoomOnMouseWheel |
| // moveOnMouseMove |
| // moveOnMouseWheel |
| // } |
| // The value can be: true / false / 'shift' / 'ctrl' / 'alt'. |
| function isAvailableBehavior( |
| behaviorToCheck: RoamBehavior, |
| e: ZRElementEvent, |
| settings: Pick<RoamOption, RoamBehavior> |
| ) { |
| const setting = settings[behaviorToCheck]; |
| return !behaviorToCheck || ( |
| setting && (!isString(setting) || e.event[setting + 'Key' as 'shiftKey' | 'ctrlKey' | 'altKey']) |
| ); |
| } |
| |
| export default RoamController; |