| /* |
| * 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 BaseAxisPointer, { AxisPointerElementOptions } from './BaseAxisPointer'; |
| import * as graphic from '../../util/graphic'; |
| import * as viewHelper from './viewHelper'; |
| import * as matrix from 'zrender/src/core/matrix'; |
| import AxisBuilder from '../axis/AxisBuilder'; |
| import { |
| OptionDataValue, |
| ScaleDataValue, |
| CommonAxisPointerOption, |
| ZRTextAlign, |
| ZRTextVerticalAlign |
| } from '../../util/types'; |
| import { PolarAxisModel } from '../../coord/polar/AxisModel'; |
| import ExtensionAPI from '../../core/ExtensionAPI'; |
| import Polar from '../../coord/polar/Polar'; |
| import AngleAxis from '../../coord/polar/AngleAxis'; |
| import RadiusAxis from '../../coord/polar/RadiusAxis'; |
| import { PathProps } from 'zrender/src/graphic/Path'; |
| import Model from '../../model/Model'; |
| |
| // Not use top level axisPointer model |
| type AxisPointerModel = Model<CommonAxisPointerOption>; |
| |
| class PolarAxisPointer extends BaseAxisPointer { |
| |
| /** |
| * @override |
| */ |
| makeElOption( |
| elOption: AxisPointerElementOptions, |
| value: OptionDataValue, |
| axisModel: PolarAxisModel, |
| axisPointerModel: Model<CommonAxisPointerOption>, |
| api: ExtensionAPI |
| ) { |
| const axis = axisModel.axis; |
| |
| if (axis.dim === 'angle') { |
| this.animationThreshold = Math.PI / 18; |
| } |
| |
| const polar = axis.polar; |
| const otherAxis = polar.getOtherAxis(axis); |
| const otherExtent = otherAxis.getExtent(); |
| |
| const coordValue = axis.dataToCoord(value); |
| |
| const axisPointerType = axisPointerModel.get('type'); |
| if (axisPointerType && axisPointerType !== 'none') { |
| const elStyle = viewHelper.buildElStyle(axisPointerModel); |
| const pointerOption = pointerShapeBuilder[axisPointerType]( |
| axis, polar, coordValue, otherExtent |
| ); |
| pointerOption.style = elStyle; |
| elOption.graphicKey = pointerOption.type; |
| elOption.pointer = pointerOption; |
| } |
| |
| const labelMargin = axisPointerModel.get(['label', 'margin']); |
| const labelPos = getLabelPosition(value, axisModel, axisPointerModel, polar, labelMargin); |
| viewHelper.buildLabelElOption(elOption, axisModel, axisPointerModel, api, labelPos); |
| } |
| |
| // Do not support handle, utill any user requires it. |
| |
| }; |
| |
| function getLabelPosition( |
| value: ScaleDataValue, |
| axisModel: PolarAxisModel, |
| axisPointerModel: AxisPointerModel, |
| polar: Polar, |
| labelMargin: number |
| ) { |
| const axis = axisModel.axis; |
| const coord = axis.dataToCoord(value); |
| let axisAngle = polar.getAngleAxis().getExtent()[0]; |
| axisAngle = axisAngle / 180 * Math.PI; |
| const radiusExtent = polar.getRadiusAxis().getExtent(); |
| let position; |
| let align: ZRTextAlign; |
| let verticalAlign: ZRTextVerticalAlign; |
| |
| if (axis.dim === 'radius') { |
| const transform = matrix.create(); |
| matrix.rotate(transform, transform, axisAngle); |
| matrix.translate(transform, transform, [polar.cx, polar.cy]); |
| position = graphic.applyTransform([coord, -labelMargin], transform); |
| |
| const labelRotation = axisModel.getModel('axisLabel').get('rotate') || 0; |
| // @ts-ignore |
| const labelLayout = AxisBuilder.innerTextLayout( |
| axisAngle, labelRotation * Math.PI / 180, -1 |
| ); |
| align = labelLayout.textAlign; |
| verticalAlign = labelLayout.textVerticalAlign; |
| } |
| else { // angle axis |
| const r = radiusExtent[1]; |
| position = polar.coordToPoint([r + labelMargin, coord]); |
| const cx = polar.cx; |
| const cy = polar.cy; |
| align = Math.abs(position[0] - cx) / r < 0.3 |
| ? 'center' : (position[0] > cx ? 'left' : 'right'); |
| verticalAlign = Math.abs(position[1] - cy) / r < 0.3 |
| ? 'middle' : (position[1] > cy ? 'top' : 'bottom'); |
| } |
| |
| return { |
| position: position, |
| align: align, |
| verticalAlign: verticalAlign |
| }; |
| } |
| |
| |
| const pointerShapeBuilder = { |
| |
| line: function ( |
| axis: AngleAxis | RadiusAxis, |
| polar: Polar, |
| coordValue: number, |
| otherExtent: number[] |
| ): PathProps & { type: 'Line' | 'Circle' } { |
| return axis.dim === 'angle' |
| ? { |
| type: 'Line', |
| shape: viewHelper.makeLineShape( |
| polar.coordToPoint([otherExtent[0], coordValue]), |
| polar.coordToPoint([otherExtent[1], coordValue]) |
| ) |
| } |
| : { |
| type: 'Circle', |
| shape: { |
| cx: polar.cx, |
| cy: polar.cy, |
| r: coordValue |
| } |
| }; |
| }, |
| |
| shadow: function ( |
| axis: AngleAxis | RadiusAxis, |
| polar: Polar, |
| coordValue: number, |
| otherExtent: number[] |
| ): PathProps & { type: 'Sector' } { |
| const bandWidth = Math.max(1, axis.getBandWidth()); |
| const radian = Math.PI / 180; |
| |
| return axis.dim === 'angle' |
| ? { |
| type: 'Sector', |
| shape: viewHelper.makeSectorShape( |
| polar.cx, polar.cy, |
| otherExtent[0], otherExtent[1], |
| // In ECharts y is negative if angle is positive |
| (-coordValue - bandWidth / 2) * radian, |
| (-coordValue + bandWidth / 2) * radian |
| ) |
| } |
| : { |
| type: 'Sector', |
| shape: viewHelper.makeSectorShape( |
| polar.cx, polar.cy, |
| coordValue - bandWidth / 2, |
| coordValue + bandWidth / 2, |
| 0, Math.PI * 2 |
| ) |
| }; |
| } |
| }; |
| |
| export default PolarAxisPointer; |