You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

698 lines
21 KiB

/*
* 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.
*/
/**
* AUTO-GENERATED FILE. DO NOT MODIFY.
*/
/*
* 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 * as pathTool from 'zrender/lib/tool/path';
import * as matrix from 'zrender/lib/core/matrix';
import * as vector from 'zrender/lib/core/vector';
import Path from 'zrender/lib/graphic/Path';
import Transformable from 'zrender/lib/core/Transformable';
import ZRImage from 'zrender/lib/graphic/Image';
import Group from 'zrender/lib/graphic/Group';
import ZRText from 'zrender/lib/graphic/Text';
import Circle from 'zrender/lib/graphic/shape/Circle';
import Ellipse from 'zrender/lib/graphic/shape/Ellipse';
import Sector from 'zrender/lib/graphic/shape/Sector';
import Ring from 'zrender/lib/graphic/shape/Ring';
import Polygon from 'zrender/lib/graphic/shape/Polygon';
import Polyline from 'zrender/lib/graphic/shape/Polyline';
import Rect from 'zrender/lib/graphic/shape/Rect';
import Line from 'zrender/lib/graphic/shape/Line';
import BezierCurve from 'zrender/lib/graphic/shape/BezierCurve';
import Arc from 'zrender/lib/graphic/shape/Arc';
import CompoundPath from 'zrender/lib/graphic/CompoundPath';
import LinearGradient from 'zrender/lib/graphic/LinearGradient';
import RadialGradient from 'zrender/lib/graphic/RadialGradient';
import BoundingRect from 'zrender/lib/core/BoundingRect';
import OrientedBoundingRect from 'zrender/lib/core/OrientedBoundingRect';
import Point from 'zrender/lib/core/Point';
import IncrementalDisplayable from 'zrender/lib/graphic/IncrementalDisplayable';
import * as subPixelOptimizeUtil from 'zrender/lib/graphic/helper/subPixelOptimize';
import { extend, isArrayLike, map, defaults, isObject, retrieve2 } from 'zrender/lib/core/util';
import { getECData } from './innerStore';
var mathMax = Math.max;
var mathMin = Math.min;
var _customShapeMap = {};
/**
* Extend shape with parameters
*/
export function extendShape(opts) {
return Path.extend(opts);
}
var extendPathFromString = pathTool.extendFromString;
/**
* Extend path
*/
export function extendPath(pathData, opts) {
return extendPathFromString(pathData, opts);
}
/**
* Register a user defined shape.
* The shape class can be fetched by `getShapeClass`
* This method will overwrite the registered shapes, including
* the registered built-in shapes, if using the same `name`.
* The shape can be used in `custom series` and
* `graphic component` by declaring `{type: name}`.
*
* @param name
* @param ShapeClass Can be generated by `extendShape`.
*/
export function registerShape(name, ShapeClass) {
_customShapeMap[name] = ShapeClass;
}
/**
* Find shape class registered by `registerShape`. Usually used in
* fetching user defined shape.
*
* [Caution]:
* (1) This method **MUST NOT be used inside echarts !!!**, unless it is prepared
* to use user registered shapes.
* Because the built-in shape (see `getBuiltInShape`) will be registered by
* `registerShape` by default. That enables users to get both built-in
* shapes as well as the shapes belonging to themsleves. But users can overwrite
* the built-in shapes by using names like 'circle', 'rect' via calling
* `registerShape`. So the echarts inner featrues should not fetch shapes from here
* in case that it is overwritten by users, except that some features, like
* `custom series`, `graphic component`, do it deliberately.
*
* (2) In the features like `custom series`, `graphic component`, the user input
* `{tpye: 'xxx'}` does not only specify shapes but also specify other graphic
* elements like `'group'`, `'text'`, `'image'` or event `'path'`. Those names
* are reserved names, that is, if some user register a shape named `'image'`,
* the shape will not be used. If we intending to add some more reserved names
* in feature, that might bring break changes (disable some existing user shape
* names). But that case probably rearly happen. So we dont make more mechanism
* to resolve this issue here.
*
* @param name
* @return The shape class. If not found, return nothing.
*/
export function getShapeClass(name) {
if (_customShapeMap.hasOwnProperty(name)) {
return _customShapeMap[name];
}
}
/**
* Create a path element from path data string
* @param pathData
* @param opts
* @param rect
* @param layout 'center' or 'cover' default to be cover
*/
export function makePath(pathData, opts, rect, layout) {
var path = pathTool.createFromString(pathData, opts);
if (rect) {
if (layout === 'center') {
rect = centerGraphic(rect, path.getBoundingRect());
}
resizePath(path, rect);
}
return path;
}
/**
* Create a image element from image url
* @param imageUrl image url
* @param opts options
* @param rect constrain rect
* @param layout 'center' or 'cover'. Default to be 'cover'
*/
export function makeImage(imageUrl, rect, layout) {
var zrImg = new ZRImage({
style: {
image: imageUrl,
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height
},
onload: function (img) {
if (layout === 'center') {
var boundingRect = {
width: img.width,
height: img.height
};
zrImg.setStyle(centerGraphic(rect, boundingRect));
}
}
});
return zrImg;
}
/**
* Get position of centered element in bounding box.
*
* @param rect element local bounding box
* @param boundingRect constraint bounding box
* @return element position containing x, y, width, and height
*/
function centerGraphic(rect, boundingRect) {
// Set rect to center, keep width / height ratio.
var aspect = boundingRect.width / boundingRect.height;
var width = rect.height * aspect;
var height;
if (width <= rect.width) {
height = rect.height;
} else {
width = rect.width;
height = width / aspect;
}
var cx = rect.x + rect.width / 2;
var cy = rect.y + rect.height / 2;
return {
x: cx - width / 2,
y: cy - height / 2,
width: width,
height: height
};
}
export var mergePath = pathTool.mergePath;
/**
* Resize a path to fit the rect
* @param path
* @param rect
*/
export function resizePath(path, rect) {
if (!path.applyTransform) {
return;
}
var pathRect = path.getBoundingRect();
var m = pathRect.calculateTransform(rect);
path.applyTransform(m);
}
/**
* Sub pixel optimize line for canvas
*/
export function subPixelOptimizeLine(param) {
subPixelOptimizeUtil.subPixelOptimizeLine(param.shape, param.shape, param.style);
return param;
}
/**
* Sub pixel optimize rect for canvas
*/
export function subPixelOptimizeRect(param) {
subPixelOptimizeUtil.subPixelOptimizeRect(param.shape, param.shape, param.style);
return param;
}
/**
* Sub pixel optimize for canvas
*
* @param position Coordinate, such as x, y
* @param lineWidth Should be nonnegative integer.
* @param positiveOrNegative Default false (negative).
* @return Optimized position.
*/
export var subPixelOptimize = subPixelOptimizeUtil.subPixelOptimize;
function animateOrSetProps(animationType, el, props, animatableModel, dataIndex, cb, during) {
var isFrom = false;
var removeOpt;
if (typeof dataIndex === 'function') {
during = cb;
cb = dataIndex;
dataIndex = null;
} else if (isObject(dataIndex)) {
cb = dataIndex.cb;
during = dataIndex.during;
isFrom = dataIndex.isFrom;
removeOpt = dataIndex.removeOpt;
dataIndex = dataIndex.dataIndex;
}
var isUpdate = animationType === 'update';
var isRemove = animationType === 'remove';
var animationPayload; // Check if there is global animation configuration from dataZoom/resize can override the config in option.
// If animation is enabled. Will use this animation config in payload.
// If animation is disabled. Just ignore it.
if (animatableModel && animatableModel.ecModel) {
var updatePayload = animatableModel.ecModel.getUpdatePayload();
animationPayload = updatePayload && updatePayload.animation;
}
var animationEnabled = animatableModel && animatableModel.isAnimationEnabled();
if (!isRemove) {
// Must stop the remove animation.
el.stopAnimation('remove');
}
if (animationEnabled) {
var duration = void 0;
var animationEasing = void 0;
var animationDelay = void 0;
if (animationPayload) {
duration = animationPayload.duration || 0;
animationEasing = animationPayload.easing || 'cubicOut';
animationDelay = animationPayload.delay || 0;
} else if (isRemove) {
removeOpt = removeOpt || {};
duration = retrieve2(removeOpt.duration, 200);
animationEasing = retrieve2(removeOpt.easing, 'cubicOut');
animationDelay = 0;
} else {
duration = animatableModel.getShallow(isUpdate ? 'animationDurationUpdate' : 'animationDuration');
animationEasing = animatableModel.getShallow(isUpdate ? 'animationEasingUpdate' : 'animationEasing');
animationDelay = animatableModel.getShallow(isUpdate ? 'animationDelayUpdate' : 'animationDelay');
}
if (typeof animationDelay === 'function') {
animationDelay = animationDelay(dataIndex, animatableModel.getAnimationDelayParams ? animatableModel.getAnimationDelayParams(el, dataIndex) : null);
}
if (typeof duration === 'function') {
duration = duration(dataIndex);
}
duration > 0 ? isFrom ? el.animateFrom(props, {
duration: duration,
delay: animationDelay || 0,
easing: animationEasing,
done: cb,
force: !!cb || !!during,
scope: animationType,
during: during
}) : el.animateTo(props, {
duration: duration,
delay: animationDelay || 0,
easing: animationEasing,
done: cb,
force: !!cb || !!during,
setToFinal: true,
scope: animationType,
during: during
}) : ( // FIXME:
// If `duration` is 0, only the animation on props
// can be stoped, other animation should be continued?
// But at present using duration 0 in `animateTo`, `animateFrom`
// might cause unexpected behavior.
el.stopAnimation(), // If `isFrom`, the props is the "from" props.
!isFrom && el.attr(props), cb && cb());
} else {
el.stopAnimation();
!isFrom && el.attr(props); // Call during once.
during && during(1);
cb && cb();
}
}
/**
* Update graphic element properties with or without animation according to the
* configuration in series.
*
* Caution: this method will stop previous animation.
* So do not use this method to one element twice before
* animation starts, unless you know what you are doing.
* @example
* graphic.updateProps(el, {
* position: [100, 100]
* }, seriesModel, dataIndex, function () { console.log('Animation done!'); });
* // Or
* graphic.updateProps(el, {
* position: [100, 100]
* }, seriesModel, function () { console.log('Animation done!'); });
*/
function updateProps(el, props, // TODO: TYPE AnimatableModel
animatableModel, dataIndex, cb, during) {
animateOrSetProps('update', el, props, animatableModel, dataIndex, cb, during);
}
export { updateProps };
/**
* Init graphic element properties with or without animation according to the
* configuration in series.
*
* Caution: this method will stop previous animation.
* So do not use this method to one element twice before
* animation starts, unless you know what you are doing.
*/
export function initProps(el, props, animatableModel, dataIndex, cb, during) {
animateOrSetProps('init', el, props, animatableModel, dataIndex, cb, during);
}
/**
* Remove graphic element
*/
export function removeElement(el, props, animatableModel, dataIndex, cb, during) {
// Don't do remove animation twice.
if (isElementRemoved(el)) {
return;
}
animateOrSetProps('remove', el, props, animatableModel, dataIndex, cb, during);
}
function fadeOutDisplayable(el, animatableModel, dataIndex, done) {
el.removeTextContent();
el.removeTextGuideLine();
removeElement(el, {
style: {
opacity: 0
}
}, animatableModel, dataIndex, done);
}
export function removeElementWithFadeOut(el, animatableModel, dataIndex) {
function doRemove() {
el.parent && el.parent.remove(el);
} // Hide label and labelLine first
// TODO Also use fade out animation?
if (!el.isGroup) {
fadeOutDisplayable(el, animatableModel, dataIndex, doRemove);
} else {
el.traverse(function (disp) {
if (!disp.isGroup) {
// Can invoke doRemove multiple times.
fadeOutDisplayable(disp, animatableModel, dataIndex, doRemove);
}
});
}
}
/**
* If element is removed.
* It can determine if element is having remove animation.
*/
export function isElementRemoved(el) {
if (!el.__zr) {
return true;
}
for (var i = 0; i < el.animators.length; i++) {
var animator = el.animators[i];
if (animator.scope === 'remove') {
return true;
}
}
return false;
}
/**
* Get transform matrix of target (param target),
* in coordinate of its ancestor (param ancestor)
*
* @param target
* @param [ancestor]
*/
export function getTransform(target, ancestor) {
var mat = matrix.identity([]);
while (target && target !== ancestor) {
matrix.mul(mat, target.getLocalTransform(), mat);
target = target.parent;
}
return mat;
}
/**
* Apply transform to an vertex.
* @param target [x, y]
* @param transform Can be:
* + Transform matrix: like [1, 0, 0, 1, 0, 0]
* + {position, rotation, scale}, the same as `zrender/Transformable`.
* @param invert Whether use invert matrix.
* @return [x, y]
*/
export function applyTransform(target, transform, invert) {
if (transform && !isArrayLike(transform)) {
transform = Transformable.getLocalTransform(transform);
}
if (invert) {
transform = matrix.invert([], transform);
}
return vector.applyTransform([], target, transform);
}
/**
* @param direction 'left' 'right' 'top' 'bottom'
* @param transform Transform matrix: like [1, 0, 0, 1, 0, 0]
* @param invert Whether use invert matrix.
* @return Transformed direction. 'left' 'right' 'top' 'bottom'
*/
export function transformDirection(direction, transform, invert) {
// Pick a base, ensure that transform result will not be (0, 0).
var hBase = transform[4] === 0 || transform[5] === 0 || transform[0] === 0 ? 1 : Math.abs(2 * transform[4] / transform[0]);
var vBase = transform[4] === 0 || transform[5] === 0 || transform[2] === 0 ? 1 : Math.abs(2 * transform[4] / transform[2]);
var vertex = [direction === 'left' ? -hBase : direction === 'right' ? hBase : 0, direction === 'top' ? -vBase : direction === 'bottom' ? vBase : 0];
vertex = applyTransform(vertex, transform, invert);
return Math.abs(vertex[0]) > Math.abs(vertex[1]) ? vertex[0] > 0 ? 'right' : 'left' : vertex[1] > 0 ? 'bottom' : 'top';
}
function isNotGroup(el) {
return !el.isGroup;
}
function isPath(el) {
return el.shape != null;
}
/**
* Apply group transition animation from g1 to g2.
* If no animatableModel, no animation.
*/
export function groupTransition(g1, g2, animatableModel) {
if (!g1 || !g2) {
return;
}
function getElMap(g) {
var elMap = {};
g.traverse(function (el) {
if (isNotGroup(el) && el.anid) {
elMap[el.anid] = el;
}
});
return elMap;
}
function getAnimatableProps(el) {
var obj = {
x: el.x,
y: el.y,
rotation: el.rotation
};
if (isPath(el)) {
obj.shape = extend({}, el.shape);
}
return obj;
}
var elMap1 = getElMap(g1);
g2.traverse(function (el) {
if (isNotGroup(el) && el.anid) {
var oldEl = elMap1[el.anid];
if (oldEl) {
var newProp = getAnimatableProps(el);
el.attr(getAnimatableProps(oldEl));
updateProps(el, newProp, animatableModel, getECData(el).dataIndex);
}
}
});
}
export function clipPointsByRect(points, rect) {
// FIXME: this way migth be incorrect when grpahic clipped by a corner.
// and when element have border.
return map(points, function (point) {
var x = point[0];
x = mathMax(x, rect.x);
x = mathMin(x, rect.x + rect.width);
var y = point[1];
y = mathMax(y, rect.y);
y = mathMin(y, rect.y + rect.height);
return [x, y];
});
}
/**
* Return a new clipped rect. If rect size are negative, return undefined.
*/
export function clipRectByRect(targetRect, rect) {
var x = mathMax(targetRect.x, rect.x);
var x2 = mathMin(targetRect.x + targetRect.width, rect.x + rect.width);
var y = mathMax(targetRect.y, rect.y);
var y2 = mathMin(targetRect.y + targetRect.height, rect.y + rect.height); // If the total rect is cliped, nothing, including the border,
// should be painted. So return undefined.
if (x2 >= x && y2 >= y) {
return {
x: x,
y: y,
width: x2 - x,
height: y2 - y
};
}
}
export function createIcon(iconStr, // Support 'image://' or 'path://' or direct svg path.
opt, rect) {
var innerOpts = extend({
rectHover: true
}, opt);
var style = innerOpts.style = {
strokeNoScale: true
};
rect = rect || {
x: -1,
y: -1,
width: 2,
height: 2
};
if (iconStr) {
return iconStr.indexOf('image://') === 0 ? (style.image = iconStr.slice(8), defaults(style, rect), new ZRImage(innerOpts)) : makePath(iconStr.replace('path://', ''), innerOpts, rect, 'center');
}
}
/**
* Return `true` if the given line (line `a`) and the given polygon
* are intersect.
* Note that we do not count colinear as intersect here because no
* requirement for that. We could do that if required in future.
*/
export function linePolygonIntersect(a1x, a1y, a2x, a2y, points) {
for (var i = 0, p2 = points[points.length - 1]; i < points.length; i++) {
var p = points[i];
if (lineLineIntersect(a1x, a1y, a2x, a2y, p[0], p[1], p2[0], p2[1])) {
return true;
}
p2 = p;
}
}
/**
* Return `true` if the given two lines (line `a` and line `b`)
* are intersect.
* Note that we do not count colinear as intersect here because no
* requirement for that. We could do that if required in future.
*/
export function lineLineIntersect(a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y) {
// let `vec_m` to be `vec_a2 - vec_a1` and `vec_n` to be `vec_b2 - vec_b1`.
var mx = a2x - a1x;
var my = a2y - a1y;
var nx = b2x - b1x;
var ny = b2y - b1y; // `vec_m` and `vec_n` are parallel iff
// exising `k` such that `vec_m = k · vec_n`, equivalent to `vec_m X vec_n = 0`.
var nmCrossProduct = crossProduct2d(nx, ny, mx, my);
if (nearZero(nmCrossProduct)) {
return false;
} // `vec_m` and `vec_n` are intersect iff
// existing `p` and `q` in [0, 1] such that `vec_a1 + p * vec_m = vec_b1 + q * vec_n`,
// such that `q = ((vec_a1 - vec_b1) X vec_m) / (vec_n X vec_m)`
// and `p = ((vec_a1 - vec_b1) X vec_n) / (vec_n X vec_m)`.
var b1a1x = a1x - b1x;
var b1a1y = a1y - b1y;
var q = crossProduct2d(b1a1x, b1a1y, mx, my) / nmCrossProduct;
if (q < 0 || q > 1) {
return false;
}
var p = crossProduct2d(b1a1x, b1a1y, nx, ny) / nmCrossProduct;
if (p < 0 || p > 1) {
return false;
}
return true;
}
/**
* Cross product of 2-dimension vector.
*/
function crossProduct2d(x1, y1, x2, y2) {
return x1 * y2 - x2 * y1;
}
function nearZero(val) {
return val <= 1e-6 && val >= -1e-6;
} // Register built-in shapes. These shapes might be overwirtten
// by users, although we do not recommend that.
registerShape('circle', Circle);
registerShape('ellipse', Ellipse);
registerShape('sector', Sector);
registerShape('ring', Ring);
registerShape('polygon', Polygon);
registerShape('polyline', Polyline);
registerShape('rect', Rect);
registerShape('line', Line);
registerShape('bezierCurve', BezierCurve);
registerShape('arc', Arc);
export { Group, ZRImage as Image, ZRText as Text, Circle, Ellipse, Sector, Ring, Polygon, Polyline, Rect, Line, BezierCurve, Arc, IncrementalDisplayable, CompoundPath, LinearGradient, RadialGradient, BoundingRect, OrientedBoundingRect, Point, Path };