| /* |
| * 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 { |
| Point, |
| Path, |
| Polyline |
| } from '../util/graphic'; |
| import PathProxy from 'zrender/src/core/PathProxy'; |
| import { RectLike } from 'zrender/src/core/BoundingRect'; |
| import { normalizeRadian } from 'zrender/src/contain/util'; |
| import { cubicProjectPoint, quadraticProjectPoint } from 'zrender/src/core/curve'; |
| import Element from 'zrender/src/Element'; |
| import { defaults, retrieve2 } from 'zrender/src/core/util'; |
| import { LabelLineOption, DisplayState, StatesOptionMixin } from '../util/types'; |
| import Model from '../model/Model'; |
| import { invert } from 'zrender/src/core/matrix'; |
| import * as vector from 'zrender/src/core/vector'; |
| import { DISPLAY_STATES, SPECIAL_STATES } from '../util/states'; |
| |
| const PI2 = Math.PI * 2; |
| const CMD = PathProxy.CMD; |
| |
| const DEFAULT_SEARCH_SPACE = ['top', 'right', 'bottom', 'left'] as const; |
| |
| type CandidatePosition = typeof DEFAULT_SEARCH_SPACE[number]; |
| |
| function getCandidateAnchor( |
| pos: CandidatePosition, |
| distance: number, |
| rect: RectLike, |
| outPt: Point, |
| outDir: Point |
| ) { |
| const width = rect.width; |
| const height = rect.height; |
| switch (pos) { |
| case 'top': |
| outPt.set( |
| rect.x + width / 2, |
| rect.y - distance |
| ); |
| outDir.set(0, -1); |
| break; |
| case 'bottom': |
| outPt.set( |
| rect.x + width / 2, |
| rect.y + height + distance |
| ); |
| outDir.set(0, 1); |
| break; |
| case 'left': |
| outPt.set( |
| rect.x - distance, |
| rect.y + height / 2 |
| ); |
| outDir.set(-1, 0); |
| break; |
| case 'right': |
| outPt.set( |
| rect.x + width + distance, |
| rect.y + height / 2 |
| ); |
| outDir.set(1, 0); |
| break; |
| } |
| } |
| |
| |
| function projectPointToArc( |
| cx: number, cy: number, r: number, startAngle: number, endAngle: number, anticlockwise: boolean, |
| x: number, y: number, out: number[] |
| ): number { |
| x -= cx; |
| y -= cy; |
| const d = Math.sqrt(x * x + y * y); |
| x /= d; |
| y /= d; |
| |
| // Intersect point. |
| const ox = x * r + cx; |
| const oy = y * r + cy; |
| |
| if (Math.abs(startAngle - endAngle) % PI2 < 1e-4) { |
| // Is a circle |
| out[0] = ox; |
| out[1] = oy; |
| return d - r; |
| } |
| |
| if (anticlockwise) { |
| const tmp = startAngle; |
| startAngle = normalizeRadian(endAngle); |
| endAngle = normalizeRadian(tmp); |
| } |
| else { |
| startAngle = normalizeRadian(startAngle); |
| endAngle = normalizeRadian(endAngle); |
| } |
| if (startAngle > endAngle) { |
| endAngle += PI2; |
| } |
| |
| let angle = Math.atan2(y, x); |
| if (angle < 0) { |
| angle += PI2; |
| } |
| if ((angle >= startAngle && angle <= endAngle) |
| || (angle + PI2 >= startAngle && angle + PI2 <= endAngle)) { |
| // Project point is on the arc. |
| out[0] = ox; |
| out[1] = oy; |
| return d - r; |
| } |
| |
| const x1 = r * Math.cos(startAngle) + cx; |
| const y1 = r * Math.sin(startAngle) + cy; |
| |
| const x2 = r * Math.cos(endAngle) + cx; |
| const y2 = r * Math.sin(endAngle) + cy; |
| |
| const d1 = (x1 - x) * (x1 - x) + (y1 - y) * (y1 - y); |
| const d2 = (x2 - x) * (x2 - x) + (y2 - y) * (y2 - y); |
| |
| if (d1 < d2) { |
| out[0] = x1; |
| out[1] = y1; |
| return Math.sqrt(d1); |
| } |
| else { |
| out[0] = x2; |
| out[1] = y2; |
| return Math.sqrt(d2); |
| } |
| } |
| |
| function projectPointToLine( |
| x1: number, y1: number, x2: number, y2: number, x: number, y: number, out: number[], limitToEnds: boolean |
| ) { |
| const dx = x - x1; |
| const dy = y - y1; |
| |
| let dx1 = x2 - x1; |
| let dy1 = y2 - y1; |
| |
| const lineLen = Math.sqrt(dx1 * dx1 + dy1 * dy1); |
| dx1 /= lineLen; |
| dy1 /= lineLen; |
| |
| // dot product |
| const projectedLen = dx * dx1 + dy * dy1; |
| let t = projectedLen / lineLen; |
| if (limitToEnds) { |
| t = Math.min(Math.max(t, 0), 1); |
| } |
| t *= lineLen; |
| const ox = out[0] = x1 + t * dx1; |
| const oy = out[1] = y1 + t * dy1; |
| |
| return Math.sqrt((ox - x) * (ox - x) + (oy - y) * (oy - y)); |
| } |
| |
| function projectPointToRect( |
| x1: number, y1: number, width: number, height: number, x: number, y: number, out: number[] |
| ): number { |
| if (width < 0) { |
| x1 = x1 + width; |
| width = -width; |
| } |
| if (height < 0) { |
| y1 = y1 + height; |
| height = -height; |
| } |
| const x2 = x1 + width; |
| const y2 = y1 + height; |
| |
| const ox = out[0] = Math.min(Math.max(x, x1), x2); |
| const oy = out[1] = Math.min(Math.max(y, y1), y2); |
| |
| return Math.sqrt((ox - x) * (ox - x) + (oy - y) * (oy - y)); |
| } |
| |
| const tmpPt: number[] = []; |
| |
| function nearestPointOnRect(pt: Point, rect: RectLike, out: Point) { |
| const dist = projectPointToRect( |
| rect.x, rect.y, rect.width, rect.height, |
| pt.x, pt.y, tmpPt |
| ); |
| out.set(tmpPt[0], tmpPt[1]); |
| return dist; |
| } |
| /** |
| * Calculate min distance corresponding point. |
| * This method won't evaluate if point is in the path. |
| */ |
| function nearestPointOnPath(pt: Point, path: PathProxy, out: Point) { |
| let xi = 0; |
| let yi = 0; |
| let x0 = 0; |
| let y0 = 0; |
| let x1; |
| let y1; |
| |
| let minDist = Infinity; |
| |
| const data = path.data; |
| const x = pt.x; |
| const y = pt.y; |
| |
| for (let i = 0; i < data.length;) { |
| const cmd = data[i++]; |
| |
| if (i === 1) { |
| xi = data[i]; |
| yi = data[i + 1]; |
| x0 = xi; |
| y0 = yi; |
| } |
| |
| let d = minDist; |
| |
| switch (cmd) { |
| case CMD.M: |
| // moveTo 命令重新创建一个新的 subpath, 并且更新新的起点 |
| // 在 closePath 的时候使用 |
| x0 = data[i++]; |
| y0 = data[i++]; |
| xi = x0; |
| yi = y0; |
| break; |
| case CMD.L: |
| d = projectPointToLine(xi, yi, data[i], data[i + 1], x, y, tmpPt, true); |
| xi = data[i++]; |
| yi = data[i++]; |
| break; |
| case CMD.C: |
| d = cubicProjectPoint( |
| xi, yi, |
| data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1], |
| x, y, tmpPt |
| ); |
| |
| xi = data[i++]; |
| yi = data[i++]; |
| break; |
| case CMD.Q: |
| d = quadraticProjectPoint( |
| xi, yi, |
| data[i++], data[i++], data[i], data[i + 1], |
| x, y, tmpPt |
| ); |
| xi = data[i++]; |
| yi = data[i++]; |
| break; |
| case CMD.A: |
| // TODO Arc 判断的开销比较大 |
| const cx = data[i++]; |
| const cy = data[i++]; |
| const rx = data[i++]; |
| const ry = data[i++]; |
| const theta = data[i++]; |
| const dTheta = data[i++]; |
| // TODO Arc 旋转 |
| i += 1; |
| const anticlockwise = !!(1 - data[i++]); |
| x1 = Math.cos(theta) * rx + cx; |
| y1 = Math.sin(theta) * ry + cy; |
| // 不是直接使用 arc 命令 |
| if (i <= 1) { |
| // 第一个命令起点还未定义 |
| x0 = x1; |
| y0 = y1; |
| } |
| // zr 使用scale来模拟椭圆, 这里也对x做一定的缩放 |
| const _x = (x - cx) * ry / rx + cx; |
| d = projectPointToArc( |
| cx, cy, ry, theta, theta + dTheta, anticlockwise, |
| _x, y, tmpPt |
| ); |
| xi = Math.cos(theta + dTheta) * rx + cx; |
| yi = Math.sin(theta + dTheta) * ry + cy; |
| break; |
| case CMD.R: |
| x0 = xi = data[i++]; |
| y0 = yi = data[i++]; |
| const width = data[i++]; |
| const height = data[i++]; |
| d = projectPointToRect(x0, y0, width, height, x, y, tmpPt); |
| break; |
| case CMD.Z: |
| d = projectPointToLine(xi, yi, x0, y0, x, y, tmpPt, true); |
| |
| xi = x0; |
| yi = y0; |
| break; |
| } |
| |
| if (d < minDist) { |
| minDist = d; |
| out.set(tmpPt[0], tmpPt[1]); |
| } |
| } |
| |
| return minDist; |
| } |
| |
| // Temporal varible for intermediate usage. |
| const pt0 = new Point(); |
| const pt1 = new Point(); |
| const pt2 = new Point(); |
| const dir = new Point(); |
| const dir2 = new Point(); |
| |
| /** |
| * Calculate a proper guide line based on the label position and graphic element definition |
| * @param label |
| * @param labelRect |
| * @param target |
| * @param targetRect |
| */ |
| export function updateLabelLinePoints( |
| target: Element, |
| labelLineModel: Model<LabelLineOption> |
| ) { |
| if (!target) { |
| return; |
| } |
| |
| const labelLine = target.getTextGuideLine(); |
| const label = target.getTextContent(); |
| // Needs to create text guide in each charts. |
| if (!(label && labelLine)) { |
| return; |
| } |
| |
| const labelGuideConfig = target.textGuideLineConfig || {}; |
| |
| const points = [[0, 0], [0, 0], [0, 0]]; |
| |
| const searchSpace = labelGuideConfig.candidates || DEFAULT_SEARCH_SPACE; |
| const labelRect = label.getBoundingRect().clone(); |
| labelRect.applyTransform(label.getComputedTransform()); |
| |
| let minDist = Infinity; |
| const anchorPoint = labelGuideConfig.anchor; |
| const targetTransform = target.getComputedTransform(); |
| const targetInversedTransform = targetTransform && invert([], targetTransform); |
| const len = labelLineModel.get('length2') || 0; |
| |
| if (anchorPoint) { |
| pt2.copy(anchorPoint); |
| } |
| for (let i = 0; i < searchSpace.length; i++) { |
| const candidate = searchSpace[i]; |
| getCandidateAnchor(candidate, 0, labelRect, pt0, dir); |
| Point.scaleAndAdd(pt1, pt0, dir, len); |
| |
| // Transform to target coord space. |
| pt1.transform(targetInversedTransform); |
| |
| // Note: getBoundingRect will ensure the `path` being created. |
| const boundingRect = target.getBoundingRect(); |
| const dist = anchorPoint ? anchorPoint.distance(pt1) |
| : (target instanceof Path |
| ? nearestPointOnPath(pt1, target.path, pt2) |
| : nearestPointOnRect(pt1, boundingRect, pt2)); |
| |
| // TODO pt2 is in the path |
| if (dist < minDist) { |
| minDist = dist; |
| // Transform back to global space. |
| pt1.transform(targetTransform); |
| pt2.transform(targetTransform); |
| |
| pt2.toArray(points[0]); |
| pt1.toArray(points[1]); |
| pt0.toArray(points[2]); |
| } |
| } |
| |
| limitTurnAngle(points, labelLineModel.get('minTurnAngle')); |
| |
| labelLine.setShape({ points }); |
| } |
| |
| // Temporal variable for the limitTurnAngle function |
| const tmpArr: number[] = []; |
| const tmpProjPoint = new Point(); |
| /** |
| * Reduce the line segment attached to the label to limit the turn angle between two segments. |
| * @param linePoints |
| * @param minTurnAngle Radian of minimum turn angle. 0 - 180 |
| */ |
| export function limitTurnAngle(linePoints: number[][], minTurnAngle: number) { |
| if (!(minTurnAngle <= 180 && minTurnAngle > 0)) { |
| return; |
| } |
| minTurnAngle = minTurnAngle / 180 * Math.PI; |
| // The line points can be |
| // /pt1----pt2 (label) |
| // / |
| // pt0/ |
| pt0.fromArray(linePoints[0]); |
| pt1.fromArray(linePoints[1]); |
| pt2.fromArray(linePoints[2]); |
| |
| Point.sub(dir, pt0, pt1); |
| Point.sub(dir2, pt2, pt1); |
| |
| const len1 = dir.len(); |
| const len2 = dir2.len(); |
| if (len1 < 1e-3 || len2 < 1e-3) { |
| return; |
| } |
| |
| dir.scale(1 / len1); |
| dir2.scale(1 / len2); |
| |
| const angleCos = dir.dot(dir2); |
| const minTurnAngleCos = Math.cos(minTurnAngle); |
| if (minTurnAngleCos < angleCos) { // Smaller than minTurnAngle |
| // Calculate project point of pt0 on pt1-pt2 |
| const d = projectPointToLine(pt1.x, pt1.y, pt2.x, pt2.y, pt0.x, pt0.y, tmpArr, false); |
| tmpProjPoint.fromArray(tmpArr); |
| // Calculate new projected length with limited minTurnAngle and get the new connect point |
| tmpProjPoint.scaleAndAdd(dir2, d / Math.tan(Math.PI - minTurnAngle)); |
| // Limit the new calculated connect point between pt1 and pt2. |
| const t = pt2.x !== pt1.x |
| ? (tmpProjPoint.x - pt1.x) / (pt2.x - pt1.x) |
| : (tmpProjPoint.y - pt1.y) / (pt2.y - pt1.y); |
| if (isNaN(t)) { |
| return; |
| } |
| |
| if (t < 0) { |
| Point.copy(tmpProjPoint, pt1); |
| } |
| else if (t > 1) { |
| Point.copy(tmpProjPoint, pt2); |
| } |
| |
| tmpProjPoint.toArray(linePoints[1]); |
| } |
| } |
| |
| /** |
| * Limit the angle of line and the surface |
| * @param maxSurfaceAngle Radian of minimum turn angle. 0 - 180. 0 is same direction to normal. 180 is opposite |
| */ |
| export function limitSurfaceAngle(linePoints: vector.VectorArray[], surfaceNormal: Point, maxSurfaceAngle: number) { |
| if (!(maxSurfaceAngle <= 180 && maxSurfaceAngle > 0)) { |
| return; |
| } |
| maxSurfaceAngle = maxSurfaceAngle / 180 * Math.PI; |
| |
| pt0.fromArray(linePoints[0]); |
| pt1.fromArray(linePoints[1]); |
| pt2.fromArray(linePoints[2]); |
| |
| Point.sub(dir, pt1, pt0); |
| Point.sub(dir2, pt2, pt1); |
| |
| const len1 = dir.len(); |
| const len2 = dir2.len(); |
| |
| if (len1 < 1e-3 || len2 < 1e-3) { |
| return; |
| } |
| |
| dir.scale(1 / len1); |
| dir2.scale(1 / len2); |
| |
| const angleCos = dir.dot(surfaceNormal); |
| const maxSurfaceAngleCos = Math.cos(maxSurfaceAngle); |
| |
| if (angleCos < maxSurfaceAngleCos) { |
| // Calculate project point of pt0 on pt1-pt2 |
| const d = projectPointToLine(pt1.x, pt1.y, pt2.x, pt2.y, pt0.x, pt0.y, tmpArr, false); |
| tmpProjPoint.fromArray(tmpArr); |
| |
| const HALF_PI = Math.PI / 2; |
| const angle2 = Math.acos(dir2.dot(surfaceNormal)); |
| const newAngle = HALF_PI + angle2 - maxSurfaceAngle; |
| if (newAngle >= HALF_PI) { |
| // parallel |
| Point.copy(tmpProjPoint, pt2); |
| } |
| else { |
| // Calculate new projected length with limited minTurnAngle and get the new connect point |
| tmpProjPoint.scaleAndAdd(dir2, d / Math.tan(Math.PI / 2 - newAngle)); |
| // Limit the new calculated connect point between pt1 and pt2. |
| const t = pt2.x !== pt1.x |
| ? (tmpProjPoint.x - pt1.x) / (pt2.x - pt1.x) |
| : (tmpProjPoint.y - pt1.y) / (pt2.y - pt1.y); |
| if (isNaN(t)) { |
| return; |
| } |
| |
| if (t < 0) { |
| Point.copy(tmpProjPoint, pt1); |
| } |
| else if (t > 1) { |
| Point.copy(tmpProjPoint, pt2); |
| } |
| } |
| |
| tmpProjPoint.toArray(linePoints[1]); |
| } |
| } |
| |
| |
| type LabelLineModel = Model<LabelLineOption>; |
| |
| function setLabelLineState( |
| labelLine: Polyline, |
| ignore: boolean, |
| stateName: string, |
| stateModel: Model |
| ) { |
| const isNormal = stateName === 'normal'; |
| const stateObj = isNormal ? labelLine : labelLine.ensureState(stateName); |
| // Make sure display. |
| stateObj.ignore = ignore; |
| // Set smooth |
| let smooth = stateModel.get('smooth'); |
| if (smooth && smooth === true) { |
| smooth = 0.3; |
| } |
| stateObj.shape = stateObj.shape || {}; |
| if (smooth > 0) { |
| (stateObj.shape as Polyline['shape']).smooth = smooth as number; |
| } |
| |
| const styleObj = stateModel.getModel('lineStyle').getLineStyle(); |
| isNormal ? labelLine.useStyle(styleObj) : stateObj.style = styleObj; |
| } |
| |
| function buildLabelLinePath(path: CanvasRenderingContext2D, shape: Polyline['shape']) { |
| const smooth = shape.smooth as number; |
| const points = shape.points; |
| if (!points) { |
| return; |
| } |
| path.moveTo(points[0][0], points[0][1]); |
| if (smooth > 0 && points.length >= 3) { |
| const len1 = vector.dist(points[0], points[1]); |
| const len2 = vector.dist(points[1], points[2]); |
| if (!len1 || !len2) { |
| path.lineTo(points[1][0], points[1][1]); |
| path.lineTo(points[2][0], points[2][1]); |
| return; |
| } |
| |
| const moveLen = Math.min(len1, len2) * smooth; |
| |
| const midPoint0 = vector.lerp([], points[1], points[0], moveLen / len1); |
| const midPoint2 = vector.lerp([], points[1], points[2], moveLen / len2); |
| |
| const midPoint1 = vector.lerp([], midPoint0, midPoint2, 0.5); |
| path.bezierCurveTo(midPoint0[0], midPoint0[1], midPoint0[0], midPoint0[1], midPoint1[0], midPoint1[1]); |
| path.bezierCurveTo(midPoint2[0], midPoint2[1], midPoint2[0], midPoint2[1], points[2][0], points[2][1]); |
| } |
| else { |
| for (let i = 1; i < points.length; i++) { |
| path.lineTo(points[i][0], points[i][1]); |
| } |
| } |
| } |
| |
| /** |
| * Create a label line if necessary and set it's style. |
| */ |
| export function setLabelLineStyle( |
| targetEl: Element, |
| statesModels: Record<DisplayState, LabelLineModel>, |
| defaultStyle?: Polyline['style'] |
| ) { |
| let labelLine = targetEl.getTextGuideLine(); |
| const label = targetEl.getTextContent(); |
| if (!label) { |
| // Not show label line if there is no label. |
| if (labelLine) { |
| targetEl.removeTextGuideLine(); |
| } |
| return; |
| } |
| |
| const normalModel = statesModels.normal; |
| const showNormal = normalModel.get('show'); |
| const labelIgnoreNormal = label.ignore; |
| |
| for (let i = 0; i < DISPLAY_STATES.length; i++) { |
| const stateName = DISPLAY_STATES[i]; |
| const stateModel = statesModels[stateName]; |
| const isNormal = stateName === 'normal'; |
| if (stateModel) { |
| const stateShow = stateModel.get('show'); |
| const isLabelIgnored = isNormal |
| ? labelIgnoreNormal |
| : retrieve2(label.states[stateName] && label.states[stateName].ignore, labelIgnoreNormal); |
| if (isLabelIgnored // Not show when label is not shown in this state. |
| || !retrieve2(stateShow, showNormal) // Use normal state by default if not set. |
| ) { |
| const stateObj = isNormal ? labelLine : (labelLine && labelLine.states.normal); |
| if (stateObj) { |
| stateObj.ignore = true; |
| } |
| continue; |
| } |
| // Create labelLine if not exists |
| if (!labelLine) { |
| labelLine = new Polyline(); |
| targetEl.setTextGuideLine(labelLine); |
| // Reset state of normal because it's new created. |
| // NOTE: NORMAL should always been the first! |
| if (!isNormal && (labelIgnoreNormal || !showNormal)) { |
| setLabelLineState(labelLine, true, 'normal', statesModels.normal); |
| } |
| |
| // Use same state proxy. |
| if (targetEl.stateProxy) { |
| labelLine.stateProxy = targetEl.stateProxy; |
| } |
| } |
| |
| setLabelLineState(labelLine, false, stateName, stateModel); |
| } |
| } |
| |
| if (labelLine) { |
| defaults(labelLine.style, defaultStyle); |
| // Not fill. |
| labelLine.style.fill = null; |
| |
| const showAbove = normalModel.get('showAbove'); |
| |
| const labelLineConfig = (targetEl.textGuideLineConfig = targetEl.textGuideLineConfig || {}); |
| labelLineConfig.showAbove = showAbove || false; |
| |
| // Custom the buildPath. |
| labelLine.buildPath = buildLabelLinePath; |
| } |
| } |
| |
| |
| export function getLabelLineStatesModels<LabelName extends string = 'labelLine'>( |
| itemModel: Model<StatesOptionMixin<any> & Partial<Record<LabelName, any>>>, |
| labelLineName?: LabelName |
| ): Record<DisplayState, LabelLineModel> { |
| labelLineName = (labelLineName || 'labelLine') as LabelName; |
| const statesModels = { |
| normal: itemModel.getModel(labelLineName) as LabelLineModel |
| } as Record<DisplayState, LabelLineModel>; |
| for (let i = 0; i < SPECIAL_STATES.length; i++) { |
| const stateName = SPECIAL_STATES[i]; |
| statesModels[stateName] = itemModel.getModel([stateName, labelLineName]); |
| } |
| return statesModels; |
| } |