| /* |
| * 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 DataZoomView from './DataZoomView'; |
| import sliderMove from '../helper/sliderMove'; |
| import * as roams from './roams'; |
| import InsideZoomModel from './InsideZoomModel'; |
| import GlobalModel from '../../model/Global'; |
| import ExtensionAPI from '../../core/ExtensionAPI'; |
| import { bind } from 'zrender/src/core/util'; |
| import RoamController, {RoamEventParams} from '../helper/RoamController'; |
| import { AxisBaseModel } from '../../coord/AxisBaseModel'; |
| import Polar from '../../coord/polar/Polar'; |
| import SingleAxis from '../../coord/single/SingleAxis'; |
| import { DataZoomCoordSysMainType, DataZoomReferCoordSysInfo } from './helper'; |
| |
| |
| class InsideZoomView extends DataZoomView { |
| static type = 'dataZoom.inside'; |
| type = 'dataZoom.inside'; |
| |
| /** |
| * 'throttle' is used in this.dispatchAction, so we save range |
| * to avoid missing some 'pan' info. |
| */ |
| range: number[]; |
| |
| render(dataZoomModel: InsideZoomModel, ecModel: GlobalModel, api: ExtensionAPI) { |
| super.render.apply(this, arguments as any); |
| |
| if (dataZoomModel.noTarget()) { |
| this._clear(); |
| return; |
| } |
| |
| // Hence the `throttle` util ensures to preserve command order, |
| // here simply updating range all the time will not cause missing |
| // any of the the roam change. |
| this.range = dataZoomModel.getPercentRange(); |
| |
| // Reset controllers. |
| roams.setViewInfoToCoordSysRecord( |
| api, |
| dataZoomModel, |
| { |
| pan: bind(getRangeHandlers.pan, this), |
| zoom: bind(getRangeHandlers.zoom, this), |
| scrollMove: bind(getRangeHandlers.scrollMove, this) |
| } |
| ); |
| } |
| |
| dispose() { |
| this._clear(); |
| super.dispose.apply(this, arguments as any); |
| } |
| |
| private _clear() { |
| roams.disposeCoordSysRecordIfNeeded(this.api, this.dataZoomModel as InsideZoomModel); |
| this.range = null; |
| } |
| } |
| |
| interface DataZoomGetRangeHandler< |
| T extends RoamEventParams['zoom'] | RoamEventParams['scrollMove'] | RoamEventParams['pan'] |
| > { |
| ( |
| coordSysInfo: DataZoomReferCoordSysInfo, |
| coordSysMainType: DataZoomCoordSysMainType, |
| controller: RoamController, |
| e: T |
| ): [number, number] |
| } |
| |
| const getRangeHandlers: { |
| pan: DataZoomGetRangeHandler<RoamEventParams['pan']> |
| zoom: DataZoomGetRangeHandler<RoamEventParams['zoom']> |
| scrollMove: DataZoomGetRangeHandler<RoamEventParams['scrollMove']> |
| } & ThisType<InsideZoomView> = { |
| |
| zoom(coordSysInfo, coordSysMainType, controller, e: RoamEventParams['zoom']) { |
| const lastRange = this.range; |
| const range = lastRange.slice() as [number, number]; |
| |
| // Calculate transform by the first axis. |
| const axisModel = coordSysInfo.axisModels[0]; |
| if (!axisModel) { |
| return; |
| } |
| |
| const directionInfo = getDirectionInfo[coordSysMainType]( |
| null, [e.originX, e.originY], axisModel, controller, coordSysInfo |
| ); |
| const percentPoint = ( |
| directionInfo.signal > 0 |
| ? (directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel) |
| : (directionInfo.pixel - directionInfo.pixelStart) |
| ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0]; |
| |
| const scale = Math.max(1 / e.scale, 0); |
| range[0] = (range[0] - percentPoint) * scale + percentPoint; |
| range[1] = (range[1] - percentPoint) * scale + percentPoint; |
| |
| // Restrict range. |
| const minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); |
| |
| sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); |
| |
| this.range = range; |
| |
| if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { |
| return range; |
| } |
| }, |
| |
| pan: makeMover(function (range, axisModel, coordSysInfo, coordSysMainType, controller, e: RoamEventParams['pan']) { |
| const directionInfo = getDirectionInfo[coordSysMainType]( |
| [e.oldX, e.oldY], [e.newX, e.newY], axisModel, controller, coordSysInfo |
| ); |
| |
| return directionInfo.signal |
| * (range[1] - range[0]) |
| * directionInfo.pixel / directionInfo.pixelLength; |
| }), |
| |
| scrollMove: makeMover( |
| function (range, axisModel, coordSysInfo, coordSysMainType, controller, e: RoamEventParams['scrollMove'] |
| ) { |
| const directionInfo = getDirectionInfo[coordSysMainType]( |
| [0, 0], [e.scrollDelta, e.scrollDelta], axisModel, controller, coordSysInfo |
| ); |
| return directionInfo.signal * (range[1] - range[0]) * e.scrollDelta; |
| }) |
| }; |
| |
| export type DataZoomGetRangeHandlers = typeof getRangeHandlers; |
| |
| function makeMover( |
| getPercentDelta: ( |
| range: [number, number], |
| axisModel: AxisBaseModel, |
| coordSysInfo: DataZoomReferCoordSysInfo, |
| coordSysMainType: DataZoomCoordSysMainType, |
| controller: RoamController, |
| e: RoamEventParams['scrollMove']| RoamEventParams['pan'] |
| ) => number |
| ) { |
| return function ( |
| this: InsideZoomView, |
| coordSysInfo: DataZoomReferCoordSysInfo, |
| coordSysMainType: DataZoomCoordSysMainType, |
| controller: RoamController, |
| e: RoamEventParams['scrollMove']| RoamEventParams['pan'] |
| ): [number, number] { |
| const lastRange = this.range; |
| const range = lastRange.slice() as [number, number]; |
| |
| // Calculate transform by the first axis. |
| const axisModel = coordSysInfo.axisModels[0]; |
| if (!axisModel) { |
| return; |
| } |
| |
| const percentDelta = getPercentDelta( |
| range, axisModel, coordSysInfo, coordSysMainType, controller, e |
| ); |
| |
| sliderMove(percentDelta, range, [0, 100], 'all'); |
| |
| this.range = range; |
| |
| if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { |
| return range; |
| } |
| }; |
| } |
| |
| interface DirectionInfo { |
| pixel: number |
| pixelLength: number |
| pixelStart: number |
| signal: -1 | 1 |
| } |
| interface GetDirectionInfo { |
| ( |
| oldPoint: number[], |
| newPoint: number[], |
| axisModel: AxisBaseModel, |
| controller: RoamController, |
| coordSysInfo: DataZoomReferCoordSysInfo |
| ): DirectionInfo |
| } |
| |
| const getDirectionInfo: Record<'grid' | 'polar' | 'singleAxis', GetDirectionInfo> = { |
| |
| grid(oldPoint, newPoint, axisModel, controller, coordSysInfo) { |
| const axis = axisModel.axis; |
| const ret = {} as DirectionInfo; |
| const rect = coordSysInfo.model.coordinateSystem.getRect(); |
| oldPoint = oldPoint || [0, 0]; |
| |
| if (axis.dim === 'x') { |
| ret.pixel = newPoint[0] - oldPoint[0]; |
| ret.pixelLength = rect.width; |
| ret.pixelStart = rect.x; |
| ret.signal = axis.inverse ? 1 : -1; |
| } |
| else { // axis.dim === 'y' |
| ret.pixel = newPoint[1] - oldPoint[1]; |
| ret.pixelLength = rect.height; |
| ret.pixelStart = rect.y; |
| ret.signal = axis.inverse ? -1 : 1; |
| } |
| |
| return ret; |
| }, |
| |
| polar(oldPoint, newPoint, axisModel, controller, coordSysInfo) { |
| const axis = axisModel.axis; |
| const ret = {} as DirectionInfo; |
| const polar = coordSysInfo.model.coordinateSystem as Polar; |
| const radiusExtent = polar.getRadiusAxis().getExtent(); |
| const angleExtent = polar.getAngleAxis().getExtent(); |
| |
| oldPoint = oldPoint ? polar.pointToCoord(oldPoint) : [0, 0]; |
| newPoint = polar.pointToCoord(newPoint); |
| |
| if (axisModel.mainType === 'radiusAxis') { |
| ret.pixel = newPoint[0] - oldPoint[0]; |
| // ret.pixelLength = Math.abs(radiusExtent[1] - radiusExtent[0]); |
| // ret.pixelStart = Math.min(radiusExtent[0], radiusExtent[1]); |
| ret.pixelLength = radiusExtent[1] - radiusExtent[0]; |
| ret.pixelStart = radiusExtent[0]; |
| ret.signal = axis.inverse ? 1 : -1; |
| } |
| else { // 'angleAxis' |
| ret.pixel = newPoint[1] - oldPoint[1]; |
| // ret.pixelLength = Math.abs(angleExtent[1] - angleExtent[0]); |
| // ret.pixelStart = Math.min(angleExtent[0], angleExtent[1]); |
| ret.pixelLength = angleExtent[1] - angleExtent[0]; |
| ret.pixelStart = angleExtent[0]; |
| ret.signal = axis.inverse ? -1 : 1; |
| } |
| |
| return ret; |
| }, |
| |
| singleAxis(oldPoint, newPoint, axisModel, controller, coordSysInfo) { |
| const axis = axisModel.axis as SingleAxis; |
| const rect = coordSysInfo.model.coordinateSystem.getRect(); |
| const ret = {} as DirectionInfo; |
| |
| oldPoint = oldPoint || [0, 0]; |
| |
| if (axis.orient === 'horizontal') { |
| ret.pixel = newPoint[0] - oldPoint[0]; |
| ret.pixelLength = rect.width; |
| ret.pixelStart = rect.x; |
| ret.signal = axis.inverse ? 1 : -1; |
| } |
| else { // 'vertical' |
| ret.pixel = newPoint[1] - oldPoint[1]; |
| ret.pixelLength = rect.height; |
| ret.pixelStart = rect.y; |
| ret.signal = axis.inverse ? -1 : 1; |
| } |
| |
| return ret; |
| } |
| }; |
| |
| export default InsideZoomView; |