上传代码

This commit is contained in:
2025-08-18 10:01:04 +08:00
commit d0be991e07
2614 changed files with 1130442 additions and 0 deletions

View File

@ -0,0 +1,14 @@
import Path from './Path';
import PathProxy from '../core/PathProxy';
export interface CompoundPathShape {
paths: Path[];
}
export default class CompoundPath extends Path {
type: string;
shape: CompoundPathShape;
private _updatePathDirty;
beforeBrush(): void;
buildPath(ctx: PathProxy | CanvasRenderingContext2D, shape: CompoundPathShape): void;
afterBrush(): void;
getBoundingRect(): import("../core/BoundingRect").default;
}

View File

@ -0,0 +1,49 @@
import { __extends } from "tslib";
import Path from './Path.js';
var CompoundPath = (function (_super) {
__extends(CompoundPath, _super);
function CompoundPath() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'compound';
return _this;
}
CompoundPath.prototype._updatePathDirty = function () {
var paths = this.shape.paths;
var dirtyPath = this.shapeChanged();
for (var i = 0; i < paths.length; i++) {
dirtyPath = dirtyPath || paths[i].shapeChanged();
}
if (dirtyPath) {
this.dirtyShape();
}
};
CompoundPath.prototype.beforeBrush = function () {
this._updatePathDirty();
var paths = this.shape.paths || [];
var scale = this.getGlobalScale();
for (var i = 0; i < paths.length; i++) {
if (!paths[i].path) {
paths[i].createPathProxy();
}
paths[i].path.setScale(scale[0], scale[1], paths[i].segmentIgnoreThreshold);
}
};
CompoundPath.prototype.buildPath = function (ctx, shape) {
var paths = shape.paths || [];
for (var i = 0; i < paths.length; i++) {
paths[i].buildPath(ctx, paths[i].shape, true);
}
};
CompoundPath.prototype.afterBrush = function () {
var paths = this.shape.paths || [];
for (var i = 0; i < paths.length; i++) {
paths[i].pathUpdated();
}
};
CompoundPath.prototype.getBoundingRect = function () {
this._updatePathDirty.call(this);
return Path.prototype.getBoundingRect.call(this);
};
return CompoundPath;
}(Path));
export default CompoundPath;

View File

@ -0,0 +1,98 @@
import Element, { ElementProps, ElementStatePropNames, ElementAnimateConfig, ElementCommonState } from '../Element';
import BoundingRect from '../core/BoundingRect';
import { PropType, Dictionary, MapToType } from '../core/types';
import Path from './Path';
import Animator from '../animation/Animator';
export interface CommonStyleProps {
shadowBlur?: number;
shadowOffsetX?: number;
shadowOffsetY?: number;
shadowColor?: string;
opacity?: number;
blend?: string;
}
export declare const DEFAULT_COMMON_STYLE: CommonStyleProps;
export declare const DEFAULT_COMMON_ANIMATION_PROPS: MapToType<DisplayableProps, boolean>;
export interface DisplayableProps extends ElementProps {
style?: Dictionary<any>;
zlevel?: number;
z?: number;
z2?: number;
culling?: boolean;
cursor?: string;
rectHover?: boolean;
progressive?: boolean;
incremental?: boolean;
ignoreCoarsePointer?: boolean;
batch?: boolean;
invisible?: boolean;
}
declare type DisplayableKey = keyof DisplayableProps;
declare type DisplayablePropertyType = PropType<DisplayableProps, DisplayableKey>;
export declare type DisplayableStatePropNames = ElementStatePropNames | 'style' | 'z' | 'z2' | 'invisible';
export declare type DisplayableState = Pick<DisplayableProps, DisplayableStatePropNames> & ElementCommonState;
interface Displayable<Props extends DisplayableProps = DisplayableProps> {
animate(key?: '', loop?: boolean): Animator<this>;
animate(key: 'style', loop?: boolean): Animator<this['style']>;
getState(stateName: string): DisplayableState;
ensureState(stateName: string): DisplayableState;
states: Dictionary<DisplayableState>;
stateProxy: (stateName: string) => DisplayableState;
}
declare class Displayable<Props extends DisplayableProps = DisplayableProps> extends Element<Props> {
invisible: boolean;
z: number;
z2: number;
zlevel: number;
culling: boolean;
cursor: string;
rectHover: boolean;
incremental: boolean;
ignoreCoarsePointer?: boolean;
style: Dictionary<any>;
protected _normalState: DisplayableState;
protected _rect: BoundingRect;
protected _paintRect: BoundingRect;
protected _prevPaintRect: BoundingRect;
dirtyRectTolerance: number;
useHoverLayer?: boolean;
__hoverStyle?: CommonStyleProps;
__clipPaths?: Path[];
__canvasFillGradient: CanvasGradient;
__canvasStrokeGradient: CanvasGradient;
__canvasFillPattern: CanvasPattern;
__canvasStrokePattern: CanvasPattern;
__svgEl: SVGElement;
constructor(props?: Props);
protected _init(props?: Props): void;
beforeBrush(): void;
afterBrush(): void;
innerBeforeBrush(): void;
innerAfterBrush(): void;
shouldBePainted(viewWidth: number, viewHeight: number, considerClipPath: boolean, considerAncestors: boolean): boolean;
contain(x: number, y: number): boolean;
traverse<Context>(cb: (this: Context, el: this) => void, context?: Context): void;
rectContain(x: number, y: number): boolean;
getPaintRect(): BoundingRect;
setPrevPaintRect(paintRect: BoundingRect): void;
getPrevPaintRect(): BoundingRect;
animateStyle(loop: boolean): Animator<this["style"]>;
updateDuringAnimation(targetKey: string): void;
attrKV(key: DisplayableKey, value: DisplayablePropertyType): void;
setStyle(obj: Props['style']): this;
setStyle<T extends keyof Props['style']>(obj: T, value: Props['style'][T]): this;
dirtyStyle(notRedraw?: boolean): void;
dirty(): void;
styleChanged(): boolean;
styleUpdated(): void;
createStyle(obj?: Props['style']): Props["style"];
useStyle(obj: Props['style']): void;
isStyleObject(obj: Props['style']): any;
protected _innerSaveToNormal(toState: DisplayableState): void;
protected _applyStateObj(stateName: string, state: DisplayableState, normalState: DisplayableState, keepCurrentStates: boolean, transition: boolean, animationCfg: ElementAnimateConfig): void;
protected _mergeStates(states: DisplayableState[]): DisplayableState;
protected _mergeStyle(targetStyle: CommonStyleProps, sourceStyle: CommonStyleProps): CommonStyleProps;
getAnimationStyleProps(): MapToType<DisplayableProps, boolean>;
protected static initDefaultProps: void;
}
export default Displayable;

View File

@ -0,0 +1,324 @@
import { __extends } from "tslib";
import Element from '../Element.js';
import BoundingRect from '../core/BoundingRect.js';
import { keys, extend, createObject } from '../core/util.js';
import { REDRAW_BIT, STYLE_CHANGED_BIT } from './constants.js';
var STYLE_MAGIC_KEY = '__zr_style_' + Math.round((Math.random() * 10));
export var DEFAULT_COMMON_STYLE = {
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: '#000',
opacity: 1,
blend: 'source-over'
};
export var DEFAULT_COMMON_ANIMATION_PROPS = {
style: {
shadowBlur: true,
shadowOffsetX: true,
shadowOffsetY: true,
shadowColor: true,
opacity: true
}
};
DEFAULT_COMMON_STYLE[STYLE_MAGIC_KEY] = true;
var PRIMARY_STATES_KEYS = ['z', 'z2', 'invisible'];
var PRIMARY_STATES_KEYS_IN_HOVER_LAYER = ['invisible'];
var Displayable = (function (_super) {
__extends(Displayable, _super);
function Displayable(props) {
return _super.call(this, props) || this;
}
Displayable.prototype._init = function (props) {
var keysArr = keys(props);
for (var i = 0; i < keysArr.length; i++) {
var key = keysArr[i];
if (key === 'style') {
this.useStyle(props[key]);
}
else {
_super.prototype.attrKV.call(this, key, props[key]);
}
}
if (!this.style) {
this.useStyle({});
}
};
Displayable.prototype.beforeBrush = function () { };
Displayable.prototype.afterBrush = function () { };
Displayable.prototype.innerBeforeBrush = function () { };
Displayable.prototype.innerAfterBrush = function () { };
Displayable.prototype.shouldBePainted = function (viewWidth, viewHeight, considerClipPath, considerAncestors) {
var m = this.transform;
if (this.ignore
|| this.invisible
|| this.style.opacity === 0
|| (this.culling
&& isDisplayableCulled(this, viewWidth, viewHeight))
|| (m && !m[0] && !m[3])) {
return false;
}
if (considerClipPath && this.__clipPaths) {
for (var i = 0; i < this.__clipPaths.length; ++i) {
if (this.__clipPaths[i].isZeroArea()) {
return false;
}
}
}
if (considerAncestors && this.parent) {
var parent_1 = this.parent;
while (parent_1) {
if (parent_1.ignore) {
return false;
}
parent_1 = parent_1.parent;
}
}
return true;
};
Displayable.prototype.contain = function (x, y) {
return this.rectContain(x, y);
};
Displayable.prototype.traverse = function (cb, context) {
cb.call(context, this);
};
Displayable.prototype.rectContain = function (x, y) {
var coord = this.transformCoordToLocal(x, y);
var rect = this.getBoundingRect();
return rect.contain(coord[0], coord[1]);
};
Displayable.prototype.getPaintRect = function () {
var rect = this._paintRect;
if (!this._paintRect || this.__dirty) {
var transform = this.transform;
var elRect = this.getBoundingRect();
var style = this.style;
var shadowSize = style.shadowBlur || 0;
var shadowOffsetX = style.shadowOffsetX || 0;
var shadowOffsetY = style.shadowOffsetY || 0;
rect = this._paintRect || (this._paintRect = new BoundingRect(0, 0, 0, 0));
if (transform) {
BoundingRect.applyTransform(rect, elRect, transform);
}
else {
rect.copy(elRect);
}
if (shadowSize || shadowOffsetX || shadowOffsetY) {
rect.width += shadowSize * 2 + Math.abs(shadowOffsetX);
rect.height += shadowSize * 2 + Math.abs(shadowOffsetY);
rect.x = Math.min(rect.x, rect.x + shadowOffsetX - shadowSize);
rect.y = Math.min(rect.y, rect.y + shadowOffsetY - shadowSize);
}
var tolerance = this.dirtyRectTolerance;
if (!rect.isZero()) {
rect.x = Math.floor(rect.x - tolerance);
rect.y = Math.floor(rect.y - tolerance);
rect.width = Math.ceil(rect.width + 1 + tolerance * 2);
rect.height = Math.ceil(rect.height + 1 + tolerance * 2);
}
}
return rect;
};
Displayable.prototype.setPrevPaintRect = function (paintRect) {
if (paintRect) {
this._prevPaintRect = this._prevPaintRect || new BoundingRect(0, 0, 0, 0);
this._prevPaintRect.copy(paintRect);
}
else {
this._prevPaintRect = null;
}
};
Displayable.prototype.getPrevPaintRect = function () {
return this._prevPaintRect;
};
Displayable.prototype.animateStyle = function (loop) {
return this.animate('style', loop);
};
Displayable.prototype.updateDuringAnimation = function (targetKey) {
if (targetKey === 'style') {
this.dirtyStyle();
}
else {
this.markRedraw();
}
};
Displayable.prototype.attrKV = function (key, value) {
if (key !== 'style') {
_super.prototype.attrKV.call(this, key, value);
}
else {
if (!this.style) {
this.useStyle(value);
}
else {
this.setStyle(value);
}
}
};
Displayable.prototype.setStyle = function (keyOrObj, value) {
if (typeof keyOrObj === 'string') {
this.style[keyOrObj] = value;
}
else {
extend(this.style, keyOrObj);
}
this.dirtyStyle();
return this;
};
Displayable.prototype.dirtyStyle = function (notRedraw) {
if (!notRedraw) {
this.markRedraw();
}
this.__dirty |= STYLE_CHANGED_BIT;
if (this._rect) {
this._rect = null;
}
};
Displayable.prototype.dirty = function () {
this.dirtyStyle();
};
Displayable.prototype.styleChanged = function () {
return !!(this.__dirty & STYLE_CHANGED_BIT);
};
Displayable.prototype.styleUpdated = function () {
this.__dirty &= ~STYLE_CHANGED_BIT;
};
Displayable.prototype.createStyle = function (obj) {
return createObject(DEFAULT_COMMON_STYLE, obj);
};
Displayable.prototype.useStyle = function (obj) {
if (!obj[STYLE_MAGIC_KEY]) {
obj = this.createStyle(obj);
}
if (this.__inHover) {
this.__hoverStyle = obj;
}
else {
this.style = obj;
}
this.dirtyStyle();
};
Displayable.prototype.isStyleObject = function (obj) {
return obj[STYLE_MAGIC_KEY];
};
Displayable.prototype._innerSaveToNormal = function (toState) {
_super.prototype._innerSaveToNormal.call(this, toState);
var normalState = this._normalState;
if (toState.style && !normalState.style) {
normalState.style = this._mergeStyle(this.createStyle(), this.style);
}
this._savePrimaryToNormal(toState, normalState, PRIMARY_STATES_KEYS);
};
Displayable.prototype._applyStateObj = function (stateName, state, normalState, keepCurrentStates, transition, animationCfg) {
_super.prototype._applyStateObj.call(this, stateName, state, normalState, keepCurrentStates, transition, animationCfg);
var needsRestoreToNormal = !(state && keepCurrentStates);
var targetStyle;
if (state && state.style) {
if (transition) {
if (keepCurrentStates) {
targetStyle = state.style;
}
else {
targetStyle = this._mergeStyle(this.createStyle(), normalState.style);
this._mergeStyle(targetStyle, state.style);
}
}
else {
targetStyle = this._mergeStyle(this.createStyle(), keepCurrentStates ? this.style : normalState.style);
this._mergeStyle(targetStyle, state.style);
}
}
else if (needsRestoreToNormal) {
targetStyle = normalState.style;
}
if (targetStyle) {
if (transition) {
var sourceStyle = this.style;
this.style = this.createStyle(needsRestoreToNormal ? {} : sourceStyle);
if (needsRestoreToNormal) {
var changedKeys = keys(sourceStyle);
for (var i = 0; i < changedKeys.length; i++) {
var key = changedKeys[i];
if (key in targetStyle) {
targetStyle[key] = targetStyle[key];
this.style[key] = sourceStyle[key];
}
}
}
var targetKeys = keys(targetStyle);
for (var i = 0; i < targetKeys.length; i++) {
var key = targetKeys[i];
this.style[key] = this.style[key];
}
this._transitionState(stateName, {
style: targetStyle
}, animationCfg, this.getAnimationStyleProps());
}
else {
this.useStyle(targetStyle);
}
}
var statesKeys = this.__inHover ? PRIMARY_STATES_KEYS_IN_HOVER_LAYER : PRIMARY_STATES_KEYS;
for (var i = 0; i < statesKeys.length; i++) {
var key = statesKeys[i];
if (state && state[key] != null) {
this[key] = state[key];
}
else if (needsRestoreToNormal) {
if (normalState[key] != null) {
this[key] = normalState[key];
}
}
}
};
Displayable.prototype._mergeStates = function (states) {
var mergedState = _super.prototype._mergeStates.call(this, states);
var mergedStyle;
for (var i = 0; i < states.length; i++) {
var state = states[i];
if (state.style) {
mergedStyle = mergedStyle || {};
this._mergeStyle(mergedStyle, state.style);
}
}
if (mergedStyle) {
mergedState.style = mergedStyle;
}
return mergedState;
};
Displayable.prototype._mergeStyle = function (targetStyle, sourceStyle) {
extend(targetStyle, sourceStyle);
return targetStyle;
};
Displayable.prototype.getAnimationStyleProps = function () {
return DEFAULT_COMMON_ANIMATION_PROPS;
};
Displayable.initDefaultProps = (function () {
var dispProto = Displayable.prototype;
dispProto.type = 'displayable';
dispProto.invisible = false;
dispProto.z = 0;
dispProto.z2 = 0;
dispProto.zlevel = 0;
dispProto.culling = false;
dispProto.cursor = 'pointer';
dispProto.rectHover = false;
dispProto.incremental = false;
dispProto._rect = null;
dispProto.dirtyRectTolerance = 0;
dispProto.__dirty = REDRAW_BIT | STYLE_CHANGED_BIT;
})();
return Displayable;
}(Element));
var tmpRect = new BoundingRect(0, 0, 0, 0);
var viewRect = new BoundingRect(0, 0, 0, 0);
function isDisplayableCulled(el, width, height) {
tmpRect.copy(el.getBoundingRect());
if (el.transform) {
tmpRect.applyTransform(el.transform);
}
viewRect.width = width;
viewRect.height = height;
return !tmpRect.intersect(viewRect);
}
export default Displayable;

View File

@ -0,0 +1,23 @@
export interface GradientObject {
id?: number;
type: string;
colorStops: GradientColorStop[];
global?: boolean;
}
export interface InnerGradientObject extends GradientObject {
__canvasGradient: CanvasGradient;
__width: number;
__height: number;
}
export interface GradientColorStop {
offset: number;
color: string;
}
export default class Gradient {
id?: number;
type: string;
colorStops: GradientColorStop[];
global: boolean;
constructor(colorStops: GradientColorStop[]);
addColorStop(offset: number, color: string): void;
}

View File

@ -0,0 +1,13 @@
var Gradient = (function () {
function Gradient(colorStops) {
this.colorStops = colorStops || [];
}
Gradient.prototype.addColorStop = function (offset, color) {
this.colorStops.push({
offset: offset,
color: color
});
};
return Gradient;
}());
export default Gradient;

View File

@ -0,0 +1,31 @@
import Element, { ElementProps } from '../Element';
import BoundingRect from '../core/BoundingRect';
import { ZRenderType } from '../zrender';
export interface GroupProps extends ElementProps {
}
declare class Group extends Element<GroupProps> {
readonly isGroup = true;
private _children;
constructor(opts?: GroupProps);
childrenRef(): Element<ElementProps>[];
children(): Element<ElementProps>[];
childAt(idx: number): Element;
childOfName(name: string): Element;
childCount(): number;
add(child: Element): Group;
addBefore(child: Element, nextSibling: Element): this;
replace(oldChild: Element, newChild: Element): this;
replaceAt(child: Element, index: number): this;
_doAdd(child: Element): void;
remove(child: Element): this;
removeAll(): this;
eachChild<Context>(cb: (this: Context, el: Element, index?: number) => void, context?: Context): this;
traverse<T>(cb: (this: T, el: Element) => boolean | void, context?: T): this;
addSelfToZr(zr: ZRenderType): void;
removeSelfFromZr(zr: ZRenderType): void;
getBoundingRect(includeChildren?: Element[]): BoundingRect;
}
export interface GroupLike extends Element {
childrenRef(): Element[];
}
export default Group;

View File

@ -0,0 +1,179 @@
import { __extends } from "tslib";
import * as zrUtil from '../core/util.js';
import Element from '../Element.js';
import BoundingRect from '../core/BoundingRect.js';
var Group = (function (_super) {
__extends(Group, _super);
function Group(opts) {
var _this = _super.call(this) || this;
_this.isGroup = true;
_this._children = [];
_this.attr(opts);
return _this;
}
Group.prototype.childrenRef = function () {
return this._children;
};
Group.prototype.children = function () {
return this._children.slice();
};
Group.prototype.childAt = function (idx) {
return this._children[idx];
};
Group.prototype.childOfName = function (name) {
var children = this._children;
for (var i = 0; i < children.length; i++) {
if (children[i].name === name) {
return children[i];
}
}
};
Group.prototype.childCount = function () {
return this._children.length;
};
Group.prototype.add = function (child) {
if (child) {
if (child !== this && child.parent !== this) {
this._children.push(child);
this._doAdd(child);
}
if (process.env.NODE_ENV !== 'production') {
if (child.__hostTarget) {
throw 'This elemenet has been used as an attachment';
}
}
}
return this;
};
Group.prototype.addBefore = function (child, nextSibling) {
if (child && child !== this && child.parent !== this
&& nextSibling && nextSibling.parent === this) {
var children = this._children;
var idx = children.indexOf(nextSibling);
if (idx >= 0) {
children.splice(idx, 0, child);
this._doAdd(child);
}
}
return this;
};
Group.prototype.replace = function (oldChild, newChild) {
var idx = zrUtil.indexOf(this._children, oldChild);
if (idx >= 0) {
this.replaceAt(newChild, idx);
}
return this;
};
Group.prototype.replaceAt = function (child, index) {
var children = this._children;
var old = children[index];
if (child && child !== this && child.parent !== this && child !== old) {
children[index] = child;
old.parent = null;
var zr = this.__zr;
if (zr) {
old.removeSelfFromZr(zr);
}
this._doAdd(child);
}
return this;
};
Group.prototype._doAdd = function (child) {
if (child.parent) {
child.parent.remove(child);
}
child.parent = this;
var zr = this.__zr;
if (zr && zr !== child.__zr) {
child.addSelfToZr(zr);
}
zr && zr.refresh();
};
Group.prototype.remove = function (child) {
var zr = this.__zr;
var children = this._children;
var idx = zrUtil.indexOf(children, child);
if (idx < 0) {
return this;
}
children.splice(idx, 1);
child.parent = null;
if (zr) {
child.removeSelfFromZr(zr);
}
zr && zr.refresh();
return this;
};
Group.prototype.removeAll = function () {
var children = this._children;
var zr = this.__zr;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (zr) {
child.removeSelfFromZr(zr);
}
child.parent = null;
}
children.length = 0;
return this;
};
Group.prototype.eachChild = function (cb, context) {
var children = this._children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
cb.call(context, child, i);
}
return this;
};
Group.prototype.traverse = function (cb, context) {
for (var i = 0; i < this._children.length; i++) {
var child = this._children[i];
var stopped = cb.call(context, child);
if (child.isGroup && !stopped) {
child.traverse(cb, context);
}
}
return this;
};
Group.prototype.addSelfToZr = function (zr) {
_super.prototype.addSelfToZr.call(this, zr);
for (var i = 0; i < this._children.length; i++) {
var child = this._children[i];
child.addSelfToZr(zr);
}
};
Group.prototype.removeSelfFromZr = function (zr) {
_super.prototype.removeSelfFromZr.call(this, zr);
for (var i = 0; i < this._children.length; i++) {
var child = this._children[i];
child.removeSelfFromZr(zr);
}
};
Group.prototype.getBoundingRect = function (includeChildren) {
var tmpRect = new BoundingRect(0, 0, 0, 0);
var children = includeChildren || this._children;
var tmpMat = [];
var rect = null;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.ignore || child.invisible) {
continue;
}
var childRect = child.getBoundingRect();
var transform = child.getLocalTransform(tmpMat);
if (transform) {
BoundingRect.applyTransform(tmpRect, childRect, transform);
rect = rect || tmpRect.clone();
rect.union(tmpRect);
}
else {
rect = rect || childRect.clone();
rect.union(childRect);
}
}
return rect || tmpRect;
};
return Group;
}(Element));
Group.prototype.type = 'group';
export default Group;

View File

@ -0,0 +1,35 @@
import Displayable, { DisplayableProps, CommonStyleProps, DisplayableStatePropNames } from './Displayable';
import BoundingRect from '../core/BoundingRect';
import { ImageLike, MapToType } from '../core/types';
import { ElementCommonState } from '../Element';
export interface ImageStyleProps extends CommonStyleProps {
image?: string | ImageLike;
x?: number;
y?: number;
width?: number;
height?: number;
sx?: number;
sy?: number;
sWidth?: number;
sHeight?: number;
}
export declare const DEFAULT_IMAGE_STYLE: CommonStyleProps;
export declare const DEFAULT_IMAGE_ANIMATION_PROPS: MapToType<ImageProps, boolean>;
export interface ImageProps extends DisplayableProps {
style?: ImageStyleProps;
onload?: (image: ImageLike) => void;
}
export declare type ImageState = Pick<ImageProps, DisplayableStatePropNames> & ElementCommonState;
declare class ZRImage extends Displayable<ImageProps> {
style: ImageStyleProps;
__image: ImageLike;
__imageSrc: string;
onload: (image: ImageLike) => void;
createStyle(obj?: ImageStyleProps): ImageStyleProps;
private _getSize;
getWidth(): number;
getHeight(): number;
getAnimationStyleProps(): MapToType<ImageProps, boolean>;
getBoundingRect(): BoundingRect;
}
export default ZRImage;

View File

@ -0,0 +1,73 @@
import { __extends } from "tslib";
import Displayable, { DEFAULT_COMMON_STYLE, DEFAULT_COMMON_ANIMATION_PROPS } from './Displayable.js';
import BoundingRect from '../core/BoundingRect.js';
import { defaults, createObject } from '../core/util.js';
export var DEFAULT_IMAGE_STYLE = defaults({
x: 0,
y: 0
}, DEFAULT_COMMON_STYLE);
export var DEFAULT_IMAGE_ANIMATION_PROPS = {
style: defaults({
x: true,
y: true,
width: true,
height: true,
sx: true,
sy: true,
sWidth: true,
sHeight: true
}, DEFAULT_COMMON_ANIMATION_PROPS.style)
};
function isImageLike(source) {
return !!(source
&& typeof source !== 'string'
&& source.width && source.height);
}
var ZRImage = (function (_super) {
__extends(ZRImage, _super);
function ZRImage() {
return _super !== null && _super.apply(this, arguments) || this;
}
ZRImage.prototype.createStyle = function (obj) {
return createObject(DEFAULT_IMAGE_STYLE, obj);
};
ZRImage.prototype._getSize = function (dim) {
var style = this.style;
var size = style[dim];
if (size != null) {
return size;
}
var imageSource = isImageLike(style.image)
? style.image : this.__image;
if (!imageSource) {
return 0;
}
var otherDim = dim === 'width' ? 'height' : 'width';
var otherDimSize = style[otherDim];
if (otherDimSize == null) {
return imageSource[dim];
}
else {
return imageSource[dim] / imageSource[otherDim] * otherDimSize;
}
};
ZRImage.prototype.getWidth = function () {
return this._getSize('width');
};
ZRImage.prototype.getHeight = function () {
return this._getSize('height');
};
ZRImage.prototype.getAnimationStyleProps = function () {
return DEFAULT_IMAGE_ANIMATION_PROPS;
};
ZRImage.prototype.getBoundingRect = function () {
var style = this.style;
if (!this._rect) {
this._rect = new BoundingRect(style.x || 0, style.y || 0, this.getWidth(), this.getHeight());
}
return this._rect;
};
return ZRImage;
}(Displayable));
ZRImage.prototype.type = 'image';
export default ZRImage;

View File

@ -0,0 +1,23 @@
import Displayble from './Displayable';
import BoundingRect from '../core/BoundingRect';
export default class IncrementalDisplayable extends Displayble {
notClear: boolean;
incremental: boolean;
private _displayables;
private _temporaryDisplayables;
private _cursor;
traverse<T>(cb: (this: T, el: this) => void, context: T): void;
useStyle(): void;
getCursor(): number;
innerAfterBrush(): void;
clearDisplaybles(): void;
clearTemporalDisplayables(): void;
addDisplayable(displayable: Displayble, notPersistent?: boolean): void;
addDisplayables(displayables: Displayble[], notPersistent?: boolean): void;
getDisplayables(): Displayble[];
getTemporalDisplayables(): Displayble[];
eachPendingDisplayable(cb: (displayable: Displayble) => void): void;
update(): void;
getBoundingRect(): BoundingRect;
contain(x: number, y: number): boolean;
}

View File

@ -0,0 +1,112 @@
import { __extends } from "tslib";
import Displayble from './Displayable.js';
import BoundingRect from '../core/BoundingRect.js';
var m = [];
var IncrementalDisplayable = (function (_super) {
__extends(IncrementalDisplayable, _super);
function IncrementalDisplayable() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.notClear = true;
_this.incremental = true;
_this._displayables = [];
_this._temporaryDisplayables = [];
_this._cursor = 0;
return _this;
}
IncrementalDisplayable.prototype.traverse = function (cb, context) {
cb.call(context, this);
};
IncrementalDisplayable.prototype.useStyle = function () {
this.style = {};
};
IncrementalDisplayable.prototype.getCursor = function () {
return this._cursor;
};
IncrementalDisplayable.prototype.innerAfterBrush = function () {
this._cursor = this._displayables.length;
};
IncrementalDisplayable.prototype.clearDisplaybles = function () {
this._displayables = [];
this._temporaryDisplayables = [];
this._cursor = 0;
this.markRedraw();
this.notClear = false;
};
IncrementalDisplayable.prototype.clearTemporalDisplayables = function () {
this._temporaryDisplayables = [];
};
IncrementalDisplayable.prototype.addDisplayable = function (displayable, notPersistent) {
if (notPersistent) {
this._temporaryDisplayables.push(displayable);
}
else {
this._displayables.push(displayable);
}
this.markRedraw();
};
IncrementalDisplayable.prototype.addDisplayables = function (displayables, notPersistent) {
notPersistent = notPersistent || false;
for (var i = 0; i < displayables.length; i++) {
this.addDisplayable(displayables[i], notPersistent);
}
};
IncrementalDisplayable.prototype.getDisplayables = function () {
return this._displayables;
};
IncrementalDisplayable.prototype.getTemporalDisplayables = function () {
return this._temporaryDisplayables;
};
IncrementalDisplayable.prototype.eachPendingDisplayable = function (cb) {
for (var i = this._cursor; i < this._displayables.length; i++) {
cb && cb(this._displayables[i]);
}
for (var i = 0; i < this._temporaryDisplayables.length; i++) {
cb && cb(this._temporaryDisplayables[i]);
}
};
IncrementalDisplayable.prototype.update = function () {
this.updateTransform();
for (var i = this._cursor; i < this._displayables.length; i++) {
var displayable = this._displayables[i];
displayable.parent = this;
displayable.update();
displayable.parent = null;
}
for (var i = 0; i < this._temporaryDisplayables.length; i++) {
var displayable = this._temporaryDisplayables[i];
displayable.parent = this;
displayable.update();
displayable.parent = null;
}
};
IncrementalDisplayable.prototype.getBoundingRect = function () {
if (!this._rect) {
var rect = new BoundingRect(Infinity, Infinity, -Infinity, -Infinity);
for (var i = 0; i < this._displayables.length; i++) {
var displayable = this._displayables[i];
var childRect = displayable.getBoundingRect().clone();
if (displayable.needLocalTransform()) {
childRect.applyTransform(displayable.getLocalTransform(m));
}
rect.union(childRect);
}
this._rect = rect;
}
return this._rect;
};
IncrementalDisplayable.prototype.contain = function (x, y) {
var localPos = this.transformCoordToLocal(x, y);
var rect = this.getBoundingRect();
if (rect.contain(localPos[0], localPos[1])) {
for (var i = 0; i < this._displayables.length; i++) {
var displayable = this._displayables[i];
if (displayable.contain(x, y)) {
return true;
}
}
}
return false;
};
return IncrementalDisplayable;
}(Displayble));
export default IncrementalDisplayable;

View File

@ -0,0 +1,16 @@
import Gradient, { GradientObject, GradientColorStop } from './Gradient';
export interface LinearGradientObject extends GradientObject {
type: 'linear';
x: number;
y: number;
x2: number;
y2: number;
}
export default class LinearGradient extends Gradient {
type: 'linear';
x: number;
y: number;
x2: number;
y2: number;
constructor(x: number, y: number, x2: number, y2: number, colorStops?: GradientColorStop[], globalCoord?: boolean);
}

View File

@ -0,0 +1,18 @@
import { __extends } from "tslib";
import Gradient from './Gradient.js';
var LinearGradient = (function (_super) {
__extends(LinearGradient, _super);
function LinearGradient(x, y, x2, y2, colorStops, globalCoord) {
var _this = _super.call(this, colorStops) || this;
_this.x = x == null ? 0 : x;
_this.y = y == null ? 0 : y;
_this.x2 = x2 == null ? 1 : x2;
_this.y2 = y2 == null ? 0 : y2;
_this.type = 'linear';
_this.global = globalCoord || false;
return _this;
}
return LinearGradient;
}(Gradient));
export default LinearGradient;
;

View File

@ -0,0 +1,112 @@
import Displayable, { DisplayableProps, CommonStyleProps, DisplayableStatePropNames } from './Displayable';
import Element, { ElementAnimateConfig } from '../Element';
import PathProxy from '../core/PathProxy';
import { PatternObject } from './Pattern';
import { Dictionary, PropType, MapToType } from '../core/types';
import BoundingRect from '../core/BoundingRect';
import { LinearGradientObject } from './LinearGradient';
import { RadialGradientObject } from './RadialGradient';
import Animator from '../animation/Animator';
export interface PathStyleProps extends CommonStyleProps {
fill?: string | PatternObject | LinearGradientObject | RadialGradientObject;
stroke?: string | PatternObject | LinearGradientObject | RadialGradientObject;
decal?: PatternObject;
strokePercent?: number;
strokeNoScale?: boolean;
fillOpacity?: number;
strokeOpacity?: number;
lineDash?: false | number[] | 'solid' | 'dashed' | 'dotted';
lineDashOffset?: number;
lineWidth?: number;
lineCap?: CanvasLineCap;
lineJoin?: CanvasLineJoin;
miterLimit?: number;
strokeFirst?: boolean;
}
export declare const DEFAULT_PATH_STYLE: PathStyleProps;
export declare const DEFAULT_PATH_ANIMATION_PROPS: MapToType<PathProps, boolean>;
export interface PathProps extends DisplayableProps {
strokeContainThreshold?: number;
segmentIgnoreThreshold?: number;
subPixelOptimize?: boolean;
style?: PathStyleProps;
shape?: Dictionary<any>;
autoBatch?: boolean;
__value?: (string | number)[] | (string | number);
buildPath?: (ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBatch?: boolean) => void;
}
declare type PathKey = keyof PathProps;
declare type PathPropertyType = PropType<PathProps, PathKey>;
interface Path<Props extends PathProps = PathProps> {
animate(key?: '', loop?: boolean): Animator<this>;
animate(key: 'style', loop?: boolean): Animator<this['style']>;
animate(key: 'shape', loop?: boolean): Animator<this['shape']>;
getState(stateName: string): PathState;
ensureState(stateName: string): PathState;
states: Dictionary<PathState>;
stateProxy: (stateName: string) => PathState;
}
export declare type PathStatePropNames = DisplayableStatePropNames | 'shape';
export declare type PathState = Pick<PathProps, PathStatePropNames> & {
hoverLayer?: boolean;
};
declare class Path<Props extends PathProps = PathProps> extends Displayable<Props> {
path: PathProxy;
strokeContainThreshold: number;
segmentIgnoreThreshold: number;
subPixelOptimize: boolean;
style: PathStyleProps;
autoBatch: boolean;
private _rectStroke;
protected _normalState: PathState;
protected _decalEl: Path;
shape: Dictionary<any>;
constructor(opts?: Props);
update(): void;
getDecalElement(): Path<PathProps>;
protected _init(props?: Props): void;
protected getDefaultStyle(): Props['style'];
protected getDefaultShape(): {};
protected canBeInsideText(): boolean;
protected getInsideTextFill(): "#333" | "#ccc" | "#eee";
protected getInsideTextStroke(textFill?: string): string;
buildPath(ctx: PathProxy | CanvasRenderingContext2D, shapeCfg: Dictionary<any>, inBatch?: boolean): void;
pathUpdated(): void;
getUpdatedPathProxy(inBatch?: boolean): PathProxy;
createPathProxy(): void;
hasStroke(): boolean;
hasFill(): boolean;
getBoundingRect(): BoundingRect;
contain(x: number, y: number): boolean;
dirtyShape(): void;
dirty(): void;
animateShape(loop: boolean): Animator<this["shape"]>;
updateDuringAnimation(targetKey: string): void;
attrKV(key: PathKey, value: PathPropertyType): void;
setShape(obj: Props['shape']): this;
setShape<T extends keyof Props['shape']>(obj: T, value: Props['shape'][T]): this;
shapeChanged(): boolean;
createStyle(obj?: Props['style']): Props["style"];
protected _innerSaveToNormal(toState: PathState): void;
protected _applyStateObj(stateName: string, state: PathState, normalState: PathState, keepCurrentStates: boolean, transition: boolean, animationCfg: ElementAnimateConfig): void;
protected _mergeStates(states: PathState[]): PathState;
getAnimationStyleProps(): MapToType<PathProps, boolean>;
isZeroArea(): boolean;
static extend<Shape extends Dictionary<any>>(defaultProps: {
type?: string;
shape?: Shape;
style?: PathStyleProps;
beforeBrush?: Displayable['beforeBrush'];
afterBrush?: Displayable['afterBrush'];
getBoundingRect?: Displayable['getBoundingRect'];
calculateTextPosition?: Element['calculateTextPosition'];
buildPath(this: Path, ctx: CanvasRenderingContext2D | PathProxy, shape: Shape, inBatch?: boolean): void;
init?(this: Path, opts: PathProps): void;
}): {
new (opts?: PathProps & {
shape: Shape;
}): Path;
};
protected static initDefaultProps: void;
}
export default Path;

View File

@ -0,0 +1,398 @@
import { __extends } from "tslib";
import Displayable, { DEFAULT_COMMON_STYLE, DEFAULT_COMMON_ANIMATION_PROPS } from './Displayable.js';
import PathProxy from '../core/PathProxy.js';
import * as pathContain from '../contain/path.js';
import { defaults, keys, extend, clone, isString, createObject } from '../core/util.js';
import { lum } from '../tool/color.js';
import { DARK_LABEL_COLOR, LIGHT_LABEL_COLOR, DARK_MODE_THRESHOLD, LIGHTER_LABEL_COLOR } from '../config.js';
import { REDRAW_BIT, SHAPE_CHANGED_BIT, STYLE_CHANGED_BIT } from './constants.js';
import { TRANSFORMABLE_PROPS } from '../core/Transformable.js';
export var DEFAULT_PATH_STYLE = defaults({
fill: '#000',
stroke: null,
strokePercent: 1,
fillOpacity: 1,
strokeOpacity: 1,
lineDashOffset: 0,
lineWidth: 1,
lineCap: 'butt',
miterLimit: 10,
strokeNoScale: false,
strokeFirst: false
}, DEFAULT_COMMON_STYLE);
export var DEFAULT_PATH_ANIMATION_PROPS = {
style: defaults({
fill: true,
stroke: true,
strokePercent: true,
fillOpacity: true,
strokeOpacity: true,
lineDashOffset: true,
lineWidth: true,
miterLimit: true
}, DEFAULT_COMMON_ANIMATION_PROPS.style)
};
var pathCopyParams = TRANSFORMABLE_PROPS.concat(['invisible',
'culling', 'z', 'z2', 'zlevel', 'parent'
]);
var Path = (function (_super) {
__extends(Path, _super);
function Path(opts) {
return _super.call(this, opts) || this;
}
Path.prototype.update = function () {
var _this = this;
_super.prototype.update.call(this);
var style = this.style;
if (style.decal) {
var decalEl = this._decalEl = this._decalEl || new Path();
if (decalEl.buildPath === Path.prototype.buildPath) {
decalEl.buildPath = function (ctx) {
_this.buildPath(ctx, _this.shape);
};
}
decalEl.silent = true;
var decalElStyle = decalEl.style;
for (var key in style) {
if (decalElStyle[key] !== style[key]) {
decalElStyle[key] = style[key];
}
}
decalElStyle.fill = style.fill ? style.decal : null;
decalElStyle.decal = null;
decalElStyle.shadowColor = null;
style.strokeFirst && (decalElStyle.stroke = null);
for (var i = 0; i < pathCopyParams.length; ++i) {
decalEl[pathCopyParams[i]] = this[pathCopyParams[i]];
}
decalEl.__dirty |= REDRAW_BIT;
}
else if (this._decalEl) {
this._decalEl = null;
}
};
Path.prototype.getDecalElement = function () {
return this._decalEl;
};
Path.prototype._init = function (props) {
var keysArr = keys(props);
this.shape = this.getDefaultShape();
var defaultStyle = this.getDefaultStyle();
if (defaultStyle) {
this.useStyle(defaultStyle);
}
for (var i = 0; i < keysArr.length; i++) {
var key = keysArr[i];
var value = props[key];
if (key === 'style') {
if (!this.style) {
this.useStyle(value);
}
else {
extend(this.style, value);
}
}
else if (key === 'shape') {
extend(this.shape, value);
}
else {
_super.prototype.attrKV.call(this, key, value);
}
}
if (!this.style) {
this.useStyle({});
}
};
Path.prototype.getDefaultStyle = function () {
return null;
};
Path.prototype.getDefaultShape = function () {
return {};
};
Path.prototype.canBeInsideText = function () {
return this.hasFill();
};
Path.prototype.getInsideTextFill = function () {
var pathFill = this.style.fill;
if (pathFill !== 'none') {
if (isString(pathFill)) {
var fillLum = lum(pathFill, 0);
if (fillLum > 0.5) {
return DARK_LABEL_COLOR;
}
else if (fillLum > 0.2) {
return LIGHTER_LABEL_COLOR;
}
return LIGHT_LABEL_COLOR;
}
else if (pathFill) {
return LIGHT_LABEL_COLOR;
}
}
return DARK_LABEL_COLOR;
};
Path.prototype.getInsideTextStroke = function (textFill) {
var pathFill = this.style.fill;
if (isString(pathFill)) {
var zr = this.__zr;
var isDarkMode = !!(zr && zr.isDarkMode());
var isDarkLabel = lum(textFill, 0) < DARK_MODE_THRESHOLD;
if (isDarkMode === isDarkLabel) {
return pathFill;
}
}
};
Path.prototype.buildPath = function (ctx, shapeCfg, inBatch) { };
Path.prototype.pathUpdated = function () {
this.__dirty &= ~SHAPE_CHANGED_BIT;
};
Path.prototype.getUpdatedPathProxy = function (inBatch) {
!this.path && this.createPathProxy();
this.path.beginPath();
this.buildPath(this.path, this.shape, inBatch);
return this.path;
};
Path.prototype.createPathProxy = function () {
this.path = new PathProxy(false);
};
Path.prototype.hasStroke = function () {
var style = this.style;
var stroke = style.stroke;
return !(stroke == null || stroke === 'none' || !(style.lineWidth > 0));
};
Path.prototype.hasFill = function () {
var style = this.style;
var fill = style.fill;
return fill != null && fill !== 'none';
};
Path.prototype.getBoundingRect = function () {
var rect = this._rect;
var style = this.style;
var needsUpdateRect = !rect;
if (needsUpdateRect) {
var firstInvoke = false;
if (!this.path) {
firstInvoke = true;
this.createPathProxy();
}
var path = this.path;
if (firstInvoke || (this.__dirty & SHAPE_CHANGED_BIT)) {
path.beginPath();
this.buildPath(path, this.shape, false);
this.pathUpdated();
}
rect = path.getBoundingRect();
}
this._rect = rect;
if (this.hasStroke() && this.path && this.path.len() > 0) {
var rectStroke = this._rectStroke || (this._rectStroke = rect.clone());
if (this.__dirty || needsUpdateRect) {
rectStroke.copy(rect);
var lineScale = style.strokeNoScale ? this.getLineScale() : 1;
var w = style.lineWidth;
if (!this.hasFill()) {
var strokeContainThreshold = this.strokeContainThreshold;
w = Math.max(w, strokeContainThreshold == null ? 4 : strokeContainThreshold);
}
if (lineScale > 1e-10) {
rectStroke.width += w / lineScale;
rectStroke.height += w / lineScale;
rectStroke.x -= w / lineScale / 2;
rectStroke.y -= w / lineScale / 2;
}
}
return rectStroke;
}
return rect;
};
Path.prototype.contain = function (x, y) {
var localPos = this.transformCoordToLocal(x, y);
var rect = this.getBoundingRect();
var style = this.style;
x = localPos[0];
y = localPos[1];
if (rect.contain(x, y)) {
var pathProxy = this.path;
if (this.hasStroke()) {
var lineWidth = style.lineWidth;
var lineScale = style.strokeNoScale ? this.getLineScale() : 1;
if (lineScale > 1e-10) {
if (!this.hasFill()) {
lineWidth = Math.max(lineWidth, this.strokeContainThreshold);
}
if (pathContain.containStroke(pathProxy, lineWidth / lineScale, x, y)) {
return true;
}
}
}
if (this.hasFill()) {
return pathContain.contain(pathProxy, x, y);
}
}
return false;
};
Path.prototype.dirtyShape = function () {
this.__dirty |= SHAPE_CHANGED_BIT;
if (this._rect) {
this._rect = null;
}
if (this._decalEl) {
this._decalEl.dirtyShape();
}
this.markRedraw();
};
Path.prototype.dirty = function () {
this.dirtyStyle();
this.dirtyShape();
};
Path.prototype.animateShape = function (loop) {
return this.animate('shape', loop);
};
Path.prototype.updateDuringAnimation = function (targetKey) {
if (targetKey === 'style') {
this.dirtyStyle();
}
else if (targetKey === 'shape') {
this.dirtyShape();
}
else {
this.markRedraw();
}
};
Path.prototype.attrKV = function (key, value) {
if (key === 'shape') {
this.setShape(value);
}
else {
_super.prototype.attrKV.call(this, key, value);
}
};
Path.prototype.setShape = function (keyOrObj, value) {
var shape = this.shape;
if (!shape) {
shape = this.shape = {};
}
if (typeof keyOrObj === 'string') {
shape[keyOrObj] = value;
}
else {
extend(shape, keyOrObj);
}
this.dirtyShape();
return this;
};
Path.prototype.shapeChanged = function () {
return !!(this.__dirty & SHAPE_CHANGED_BIT);
};
Path.prototype.createStyle = function (obj) {
return createObject(DEFAULT_PATH_STYLE, obj);
};
Path.prototype._innerSaveToNormal = function (toState) {
_super.prototype._innerSaveToNormal.call(this, toState);
var normalState = this._normalState;
if (toState.shape && !normalState.shape) {
normalState.shape = extend({}, this.shape);
}
};
Path.prototype._applyStateObj = function (stateName, state, normalState, keepCurrentStates, transition, animationCfg) {
_super.prototype._applyStateObj.call(this, stateName, state, normalState, keepCurrentStates, transition, animationCfg);
var needsRestoreToNormal = !(state && keepCurrentStates);
var targetShape;
if (state && state.shape) {
if (transition) {
if (keepCurrentStates) {
targetShape = state.shape;
}
else {
targetShape = extend({}, normalState.shape);
extend(targetShape, state.shape);
}
}
else {
targetShape = extend({}, keepCurrentStates ? this.shape : normalState.shape);
extend(targetShape, state.shape);
}
}
else if (needsRestoreToNormal) {
targetShape = normalState.shape;
}
if (targetShape) {
if (transition) {
this.shape = extend({}, this.shape);
var targetShapePrimaryProps = {};
var shapeKeys = keys(targetShape);
for (var i = 0; i < shapeKeys.length; i++) {
var key = shapeKeys[i];
if (typeof targetShape[key] === 'object') {
this.shape[key] = targetShape[key];
}
else {
targetShapePrimaryProps[key] = targetShape[key];
}
}
this._transitionState(stateName, {
shape: targetShapePrimaryProps
}, animationCfg);
}
else {
this.shape = targetShape;
this.dirtyShape();
}
}
};
Path.prototype._mergeStates = function (states) {
var mergedState = _super.prototype._mergeStates.call(this, states);
var mergedShape;
for (var i = 0; i < states.length; i++) {
var state = states[i];
if (state.shape) {
mergedShape = mergedShape || {};
this._mergeStyle(mergedShape, state.shape);
}
}
if (mergedShape) {
mergedState.shape = mergedShape;
}
return mergedState;
};
Path.prototype.getAnimationStyleProps = function () {
return DEFAULT_PATH_ANIMATION_PROPS;
};
Path.prototype.isZeroArea = function () {
return false;
};
Path.extend = function (defaultProps) {
var Sub = (function (_super) {
__extends(Sub, _super);
function Sub(opts) {
var _this = _super.call(this, opts) || this;
defaultProps.init && defaultProps.init.call(_this, opts);
return _this;
}
Sub.prototype.getDefaultStyle = function () {
return clone(defaultProps.style);
};
Sub.prototype.getDefaultShape = function () {
return clone(defaultProps.shape);
};
return Sub;
}(Path));
for (var key in defaultProps) {
if (typeof defaultProps[key] === 'function') {
Sub.prototype[key] = defaultProps[key];
}
}
return Sub;
};
Path.initDefaultProps = (function () {
var pathProto = Path.prototype;
pathProto.type = 'path';
pathProto.strokeContainThreshold = 5;
pathProto.segmentIgnoreThreshold = 0;
pathProto.subPixelOptimize = false;
pathProto.autoBatch = false;
pathProto.__dirty = REDRAW_BIT | STYLE_CHANGED_BIT | SHAPE_CHANGED_BIT;
})();
return Path;
}(Displayable));
export default Path;

View File

@ -0,0 +1,40 @@
import { ImageLike } from '../core/types';
import { SVGVNode } from '../svg/core';
declare type ImagePatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
export interface PatternObjectBase {
id?: number;
type?: 'pattern';
x?: number;
y?: number;
rotation?: number;
scaleX?: number;
scaleY?: number;
}
export interface ImagePatternObject extends PatternObjectBase {
image: ImageLike | string;
repeat?: ImagePatternRepeat;
imageWidth?: number;
imageHeight?: number;
}
export interface InnerImagePatternObject extends ImagePatternObject {
__image?: ImageLike;
}
export interface SVGPatternObject extends PatternObjectBase {
svgElement?: SVGVNode;
svgWidth?: number;
svgHeight?: number;
}
export declare type PatternObject = ImagePatternObject | SVGPatternObject;
declare class Pattern {
type: 'pattern';
image: ImageLike | string;
svgElement: SVGElement | string;
repeat: ImagePatternRepeat;
x: number;
y: number;
rotation: number;
scaleX: number;
scaleY: number;
constructor(image: ImageLike | string, repeat: ImagePatternRepeat);
}
export default Pattern;

View File

@ -0,0 +1,13 @@
var Pattern = (function () {
function Pattern(image, repeat) {
this.image = image;
this.repeat = repeat;
this.x = 0;
this.y = 0;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
}
return Pattern;
}());
export default Pattern;

View File

@ -0,0 +1,15 @@
import Gradient, { GradientColorStop, GradientObject } from './Gradient';
export interface RadialGradientObject extends GradientObject {
type: 'radial';
x: number;
y: number;
r: number;
}
declare class RadialGradient extends Gradient {
type: 'radial';
x: number;
y: number;
r: number;
constructor(x: number, y: number, r: number, colorStops?: GradientColorStop[], globalCoord?: boolean);
}
export default RadialGradient;

View File

@ -0,0 +1,16 @@
import { __extends } from "tslib";
import Gradient from './Gradient.js';
var RadialGradient = (function (_super) {
__extends(RadialGradient, _super);
function RadialGradient(x, y, r, colorStops, globalCoord) {
var _this = _super.call(this, colorStops) || this;
_this.x = x == null ? 0.5 : x;
_this.y = y == null ? 0.5 : y;
_this.r = r == null ? 0.5 : r;
_this.type = 'radial';
_this.global = globalCoord || false;
return _this;
}
return RadialGradient;
}(Gradient));
export default RadialGradient;

View File

@ -0,0 +1,31 @@
import Displayable, { DisplayableProps, DisplayableStatePropNames } from './Displayable';
import BoundingRect from '../core/BoundingRect';
import { PathStyleProps } from './Path';
import { FontStyle, FontWeight } from '../core/types';
export interface TSpanStyleProps extends PathStyleProps {
x?: number;
y?: number;
text?: string;
font?: string;
fontSize?: number;
fontWeight?: FontWeight;
fontStyle?: FontStyle;
fontFamily?: string;
textAlign?: CanvasTextAlign;
textBaseline?: CanvasTextBaseline;
}
export declare const DEFAULT_TSPAN_STYLE: TSpanStyleProps;
export interface TSpanProps extends DisplayableProps {
style?: TSpanStyleProps;
}
export declare type TSpanState = Pick<TSpanProps, DisplayableStatePropNames>;
declare class TSpan extends Displayable<TSpanProps> {
style: TSpanStyleProps;
hasStroke(): boolean;
hasFill(): boolean;
createStyle(obj?: TSpanStyleProps): TSpanStyleProps;
setBoundingRect(rect: BoundingRect): void;
getBoundingRect(): BoundingRect;
protected static initDefaultProps: void;
}
export default TSpan;

View File

@ -0,0 +1,63 @@
import { __extends } from "tslib";
import Displayable from './Displayable.js';
import { getBoundingRect } from '../contain/text.js';
import { DEFAULT_PATH_STYLE } from './Path.js';
import { createObject, defaults } from '../core/util.js';
import { DEFAULT_FONT } from '../core/platform.js';
export var DEFAULT_TSPAN_STYLE = defaults({
strokeFirst: true,
font: DEFAULT_FONT,
x: 0,
y: 0,
textAlign: 'left',
textBaseline: 'top',
miterLimit: 2
}, DEFAULT_PATH_STYLE);
var TSpan = (function (_super) {
__extends(TSpan, _super);
function TSpan() {
return _super !== null && _super.apply(this, arguments) || this;
}
TSpan.prototype.hasStroke = function () {
var style = this.style;
var stroke = style.stroke;
return stroke != null && stroke !== 'none' && style.lineWidth > 0;
};
TSpan.prototype.hasFill = function () {
var style = this.style;
var fill = style.fill;
return fill != null && fill !== 'none';
};
TSpan.prototype.createStyle = function (obj) {
return createObject(DEFAULT_TSPAN_STYLE, obj);
};
TSpan.prototype.setBoundingRect = function (rect) {
this._rect = rect;
};
TSpan.prototype.getBoundingRect = function () {
var style = this.style;
if (!this._rect) {
var text = style.text;
text != null ? (text += '') : (text = '');
var rect = getBoundingRect(text, style.font, style.textAlign, style.textBaseline);
rect.x += style.x || 0;
rect.y += style.y || 0;
if (this.hasStroke()) {
var w = style.lineWidth;
rect.x -= w / 2;
rect.y -= w / 2;
rect.width += w;
rect.height += w;
}
this._rect = rect;
}
return this._rect;
};
TSpan.initDefaultProps = (function () {
var tspanProto = TSpan.prototype;
tspanProto.dirtyRectTolerance = 10;
})();
return TSpan;
}(Displayable));
TSpan.prototype.type = 'tspan';
export default TSpan;

View File

@ -0,0 +1,121 @@
import { TextAlign, TextVerticalAlign, ImageLike, Dictionary, MapToType, FontWeight, FontStyle } from '../core/types';
import TSpan from './TSpan';
import ZRImage from './Image';
import Rect from './shape/Rect';
import BoundingRect from '../core/BoundingRect';
import { MatrixArray } from '../core/matrix';
import Displayable, { DisplayableStatePropNames, DisplayableProps } from './Displayable';
import { ZRenderType } from '../zrender';
import Animator from '../animation/Animator';
import Transformable from '../core/Transformable';
import { ElementCommonState } from '../Element';
import { GroupLike } from './Group';
export interface TextStylePropsPart {
text?: string;
fill?: string;
stroke?: string;
strokeNoScale?: boolean;
opacity?: number;
fillOpacity?: number;
strokeOpacity?: number;
lineWidth?: number;
lineDash?: false | number[];
lineDashOffset?: number;
borderDash?: false | number[];
borderDashOffset?: number;
font?: string;
textFont?: string;
fontStyle?: FontStyle;
fontWeight?: FontWeight;
fontFamily?: string;
fontSize?: number | string;
align?: TextAlign;
verticalAlign?: TextVerticalAlign;
lineHeight?: number;
width?: number | string;
height?: number;
tag?: string;
textShadowColor?: string;
textShadowBlur?: number;
textShadowOffsetX?: number;
textShadowOffsetY?: number;
backgroundColor?: string | {
image: ImageLike | string;
};
padding?: number | number[];
margin?: number;
borderColor?: string;
borderWidth?: number;
borderRadius?: number | number[];
shadowColor?: string;
shadowBlur?: number;
shadowOffsetX?: number;
shadowOffsetY?: number;
}
export interface TextStyleProps extends TextStylePropsPart {
text?: string;
x?: number;
y?: number;
width?: number;
rich?: Dictionary<TextStylePropsPart>;
overflow?: 'break' | 'breakAll' | 'truncate' | 'none';
lineOverflow?: 'truncate';
ellipsis?: string;
placeholder?: string;
truncateMinChar?: number;
}
export interface TextProps extends DisplayableProps {
style?: TextStyleProps;
zlevel?: number;
z?: number;
z2?: number;
culling?: boolean;
cursor?: string;
}
export declare type TextState = Pick<TextProps, DisplayableStatePropNames> & ElementCommonState;
export declare type DefaultTextStyle = Pick<TextStyleProps, 'fill' | 'stroke' | 'align' | 'verticalAlign'> & {
autoStroke?: boolean;
};
export declare const DEFAULT_TEXT_ANIMATION_PROPS: MapToType<TextProps, boolean>;
interface ZRText {
animate(key?: '', loop?: boolean): Animator<this>;
animate(key: 'style', loop?: boolean): Animator<this['style']>;
getState(stateName: string): TextState;
ensureState(stateName: string): TextState;
states: Dictionary<TextState>;
stateProxy: (stateName: string) => TextState;
}
declare class ZRText extends Displayable<TextProps> implements GroupLike {
type: string;
style: TextStyleProps;
overlap: 'hidden' | 'show' | 'blur';
innerTransformable: Transformable;
private _children;
private _childCursor;
private _defaultStyle;
constructor(opts?: TextProps);
childrenRef(): (ZRImage | Rect | TSpan)[];
update(): void;
updateTransform(): void;
getLocalTransform(m?: MatrixArray): MatrixArray;
getComputedTransform(): MatrixArray;
private _updateSubTexts;
addSelfToZr(zr: ZRenderType): void;
removeSelfFromZr(zr: ZRenderType): void;
getBoundingRect(): BoundingRect;
setDefaultTextStyle(defaultTextStyle: DefaultTextStyle): void;
setTextContent(textContent: never): void;
protected _mergeStyle(targetStyle: TextStyleProps, sourceStyle: TextStyleProps): TextStyleProps;
private _mergeRich;
getAnimationStyleProps(): MapToType<TextProps, boolean>;
private _getOrCreateChild;
private _updatePlainTexts;
private _updateRichTexts;
private _placeToken;
private _renderBackground;
static makeFont(style: TextStylePropsPart): string;
}
export declare function parseFontSize(fontSize: number | string): string;
export declare function hasSeparateFont(style: Pick<TextStylePropsPart, 'fontSize' | 'fontFamily' | 'fontWeight'>): string | number | true;
export declare function normalizeTextStyle(style: TextStyleProps): TextStyleProps;
export default ZRText;

View File

@ -0,0 +1,549 @@
import { __extends } from "tslib";
import { parseRichText, parsePlainText } from './helper/parseText.js';
import TSpan from './TSpan.js';
import { retrieve2, each, normalizeCssArray, trim, retrieve3, extend, keys, defaults } from '../core/util.js';
import { adjustTextX, adjustTextY } from '../contain/text.js';
import ZRImage from './Image.js';
import Rect from './shape/Rect.js';
import BoundingRect from '../core/BoundingRect.js';
import Displayable, { DEFAULT_COMMON_ANIMATION_PROPS } from './Displayable.js';
import { DEFAULT_FONT, DEFAULT_FONT_SIZE } from '../core/platform.js';
var DEFAULT_RICH_TEXT_COLOR = {
fill: '#000'
};
var DEFAULT_STROKE_LINE_WIDTH = 2;
export var DEFAULT_TEXT_ANIMATION_PROPS = {
style: defaults({
fill: true,
stroke: true,
fillOpacity: true,
strokeOpacity: true,
lineWidth: true,
fontSize: true,
lineHeight: true,
width: true,
height: true,
textShadowColor: true,
textShadowBlur: true,
textShadowOffsetX: true,
textShadowOffsetY: true,
backgroundColor: true,
padding: true,
borderColor: true,
borderWidth: true,
borderRadius: true
}, DEFAULT_COMMON_ANIMATION_PROPS.style)
};
var ZRText = (function (_super) {
__extends(ZRText, _super);
function ZRText(opts) {
var _this = _super.call(this) || this;
_this.type = 'text';
_this._children = [];
_this._defaultStyle = DEFAULT_RICH_TEXT_COLOR;
_this.attr(opts);
return _this;
}
ZRText.prototype.childrenRef = function () {
return this._children;
};
ZRText.prototype.update = function () {
_super.prototype.update.call(this);
if (this.styleChanged()) {
this._updateSubTexts();
}
for (var i = 0; i < this._children.length; i++) {
var child = this._children[i];
child.zlevel = this.zlevel;
child.z = this.z;
child.z2 = this.z2;
child.culling = this.culling;
child.cursor = this.cursor;
child.invisible = this.invisible;
}
};
ZRText.prototype.updateTransform = function () {
var innerTransformable = this.innerTransformable;
if (innerTransformable) {
innerTransformable.updateTransform();
if (innerTransformable.transform) {
this.transform = innerTransformable.transform;
}
}
else {
_super.prototype.updateTransform.call(this);
}
};
ZRText.prototype.getLocalTransform = function (m) {
var innerTransformable = this.innerTransformable;
return innerTransformable
? innerTransformable.getLocalTransform(m)
: _super.prototype.getLocalTransform.call(this, m);
};
ZRText.prototype.getComputedTransform = function () {
if (this.__hostTarget) {
this.__hostTarget.getComputedTransform();
this.__hostTarget.updateInnerText(true);
}
return _super.prototype.getComputedTransform.call(this);
};
ZRText.prototype._updateSubTexts = function () {
this._childCursor = 0;
normalizeTextStyle(this.style);
this.style.rich
? this._updateRichTexts()
: this._updatePlainTexts();
this._children.length = this._childCursor;
this.styleUpdated();
};
ZRText.prototype.addSelfToZr = function (zr) {
_super.prototype.addSelfToZr.call(this, zr);
for (var i = 0; i < this._children.length; i++) {
this._children[i].__zr = zr;
}
};
ZRText.prototype.removeSelfFromZr = function (zr) {
_super.prototype.removeSelfFromZr.call(this, zr);
for (var i = 0; i < this._children.length; i++) {
this._children[i].__zr = null;
}
};
ZRText.prototype.getBoundingRect = function () {
if (this.styleChanged()) {
this._updateSubTexts();
}
if (!this._rect) {
var tmpRect = new BoundingRect(0, 0, 0, 0);
var children = this._children;
var tmpMat = [];
var rect = null;
for (var i = 0; i < children.length; i++) {
var child = children[i];
var childRect = child.getBoundingRect();
var transform = child.getLocalTransform(tmpMat);
if (transform) {
tmpRect.copy(childRect);
tmpRect.applyTransform(transform);
rect = rect || tmpRect.clone();
rect.union(tmpRect);
}
else {
rect = rect || childRect.clone();
rect.union(childRect);
}
}
this._rect = rect || tmpRect;
}
return this._rect;
};
ZRText.prototype.setDefaultTextStyle = function (defaultTextStyle) {
this._defaultStyle = defaultTextStyle || DEFAULT_RICH_TEXT_COLOR;
};
ZRText.prototype.setTextContent = function (textContent) {
if (process.env.NODE_ENV !== 'production') {
throw new Error('Can\'t attach text on another text');
}
};
ZRText.prototype._mergeStyle = function (targetStyle, sourceStyle) {
if (!sourceStyle) {
return targetStyle;
}
var sourceRich = sourceStyle.rich;
var targetRich = targetStyle.rich || (sourceRich && {});
extend(targetStyle, sourceStyle);
if (sourceRich && targetRich) {
this._mergeRich(targetRich, sourceRich);
targetStyle.rich = targetRich;
}
else if (targetRich) {
targetStyle.rich = targetRich;
}
return targetStyle;
};
ZRText.prototype._mergeRich = function (targetRich, sourceRich) {
var richNames = keys(sourceRich);
for (var i = 0; i < richNames.length; i++) {
var richName = richNames[i];
targetRich[richName] = targetRich[richName] || {};
extend(targetRich[richName], sourceRich[richName]);
}
};
ZRText.prototype.getAnimationStyleProps = function () {
return DEFAULT_TEXT_ANIMATION_PROPS;
};
ZRText.prototype._getOrCreateChild = function (Ctor) {
var child = this._children[this._childCursor];
if (!child || !(child instanceof Ctor)) {
child = new Ctor();
}
this._children[this._childCursor++] = child;
child.__zr = this.__zr;
child.parent = this;
return child;
};
ZRText.prototype._updatePlainTexts = function () {
var style = this.style;
var textFont = style.font || DEFAULT_FONT;
var textPadding = style.padding;
var text = getStyleText(style);
var contentBlock = parsePlainText(text, style);
var needDrawBg = needDrawBackground(style);
var bgColorDrawn = !!(style.backgroundColor);
var outerHeight = contentBlock.outerHeight;
var outerWidth = contentBlock.outerWidth;
var contentWidth = contentBlock.contentWidth;
var textLines = contentBlock.lines;
var lineHeight = contentBlock.lineHeight;
var defaultStyle = this._defaultStyle;
var baseX = style.x || 0;
var baseY = style.y || 0;
var textAlign = style.align || defaultStyle.align || 'left';
var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign || 'top';
var textX = baseX;
var textY = adjustTextY(baseY, contentBlock.contentHeight, verticalAlign);
if (needDrawBg || textPadding) {
var boxX = adjustTextX(baseX, outerWidth, textAlign);
var boxY = adjustTextY(baseY, outerHeight, verticalAlign);
needDrawBg && this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
}
textY += lineHeight / 2;
if (textPadding) {
textX = getTextXForPadding(baseX, textAlign, textPadding);
if (verticalAlign === 'top') {
textY += textPadding[0];
}
else if (verticalAlign === 'bottom') {
textY -= textPadding[2];
}
}
var defaultLineWidth = 0;
var useDefaultFill = false;
var textFill = getFill('fill' in style
? style.fill
: (useDefaultFill = true, defaultStyle.fill));
var textStroke = getStroke('stroke' in style
? style.stroke
: (!bgColorDrawn
&& (!defaultStyle.autoStroke || useDefaultFill))
? (defaultLineWidth = DEFAULT_STROKE_LINE_WIDTH, defaultStyle.stroke)
: null);
var hasShadow = style.textShadowBlur > 0;
var fixedBoundingRect = style.width != null
&& (style.overflow === 'truncate' || style.overflow === 'break' || style.overflow === 'breakAll');
var calculatedLineHeight = contentBlock.calculatedLineHeight;
for (var i = 0; i < textLines.length; i++) {
var el = this._getOrCreateChild(TSpan);
var subElStyle = el.createStyle();
el.useStyle(subElStyle);
subElStyle.text = textLines[i];
subElStyle.x = textX;
subElStyle.y = textY;
if (textAlign) {
subElStyle.textAlign = textAlign;
}
subElStyle.textBaseline = 'middle';
subElStyle.opacity = style.opacity;
subElStyle.strokeFirst = true;
if (hasShadow) {
subElStyle.shadowBlur = style.textShadowBlur || 0;
subElStyle.shadowColor = style.textShadowColor || 'transparent';
subElStyle.shadowOffsetX = style.textShadowOffsetX || 0;
subElStyle.shadowOffsetY = style.textShadowOffsetY || 0;
}
subElStyle.stroke = textStroke;
subElStyle.fill = textFill;
if (textStroke) {
subElStyle.lineWidth = style.lineWidth || defaultLineWidth;
subElStyle.lineDash = style.lineDash;
subElStyle.lineDashOffset = style.lineDashOffset || 0;
}
subElStyle.font = textFont;
setSeparateFont(subElStyle, style);
textY += lineHeight;
if (fixedBoundingRect) {
el.setBoundingRect(new BoundingRect(adjustTextX(subElStyle.x, style.width, subElStyle.textAlign), adjustTextY(subElStyle.y, calculatedLineHeight, subElStyle.textBaseline), contentWidth, calculatedLineHeight));
}
}
};
ZRText.prototype._updateRichTexts = function () {
var style = this.style;
var text = getStyleText(style);
var contentBlock = parseRichText(text, style);
var contentWidth = contentBlock.width;
var outerWidth = contentBlock.outerWidth;
var outerHeight = contentBlock.outerHeight;
var textPadding = style.padding;
var baseX = style.x || 0;
var baseY = style.y || 0;
var defaultStyle = this._defaultStyle;
var textAlign = style.align || defaultStyle.align;
var verticalAlign = style.verticalAlign || defaultStyle.verticalAlign;
var boxX = adjustTextX(baseX, outerWidth, textAlign);
var boxY = adjustTextY(baseY, outerHeight, verticalAlign);
var xLeft = boxX;
var lineTop = boxY;
if (textPadding) {
xLeft += textPadding[3];
lineTop += textPadding[0];
}
var xRight = xLeft + contentWidth;
if (needDrawBackground(style)) {
this._renderBackground(style, style, boxX, boxY, outerWidth, outerHeight);
}
var bgColorDrawn = !!(style.backgroundColor);
for (var i = 0; i < contentBlock.lines.length; i++) {
var line = contentBlock.lines[i];
var tokens = line.tokens;
var tokenCount = tokens.length;
var lineHeight = line.lineHeight;
var remainedWidth = line.width;
var leftIndex = 0;
var lineXLeft = xLeft;
var lineXRight = xRight;
var rightIndex = tokenCount - 1;
var token = void 0;
while (leftIndex < tokenCount
&& (token = tokens[leftIndex], !token.align || token.align === 'left')) {
this._placeToken(token, style, lineHeight, lineTop, lineXLeft, 'left', bgColorDrawn);
remainedWidth -= token.width;
lineXLeft += token.width;
leftIndex++;
}
while (rightIndex >= 0
&& (token = tokens[rightIndex], token.align === 'right')) {
this._placeToken(token, style, lineHeight, lineTop, lineXRight, 'right', bgColorDrawn);
remainedWidth -= token.width;
lineXRight -= token.width;
rightIndex--;
}
lineXLeft += (contentWidth - (lineXLeft - xLeft) - (xRight - lineXRight) - remainedWidth) / 2;
while (leftIndex <= rightIndex) {
token = tokens[leftIndex];
this._placeToken(token, style, lineHeight, lineTop, lineXLeft + token.width / 2, 'center', bgColorDrawn);
lineXLeft += token.width;
leftIndex++;
}
lineTop += lineHeight;
}
};
ZRText.prototype._placeToken = function (token, style, lineHeight, lineTop, x, textAlign, parentBgColorDrawn) {
var tokenStyle = style.rich[token.styleName] || {};
tokenStyle.text = token.text;
var verticalAlign = token.verticalAlign;
var y = lineTop + lineHeight / 2;
if (verticalAlign === 'top') {
y = lineTop + token.height / 2;
}
else if (verticalAlign === 'bottom') {
y = lineTop + lineHeight - token.height / 2;
}
var needDrawBg = !token.isLineHolder && needDrawBackground(tokenStyle);
needDrawBg && this._renderBackground(tokenStyle, style, textAlign === 'right'
? x - token.width
: textAlign === 'center'
? x - token.width / 2
: x, y - token.height / 2, token.width, token.height);
var bgColorDrawn = !!tokenStyle.backgroundColor;
var textPadding = token.textPadding;
if (textPadding) {
x = getTextXForPadding(x, textAlign, textPadding);
y -= token.height / 2 - textPadding[0] - token.innerHeight / 2;
}
var el = this._getOrCreateChild(TSpan);
var subElStyle = el.createStyle();
el.useStyle(subElStyle);
var defaultStyle = this._defaultStyle;
var useDefaultFill = false;
var defaultLineWidth = 0;
var textFill = getFill('fill' in tokenStyle ? tokenStyle.fill
: 'fill' in style ? style.fill
: (useDefaultFill = true, defaultStyle.fill));
var textStroke = getStroke('stroke' in tokenStyle ? tokenStyle.stroke
: 'stroke' in style ? style.stroke
: (!bgColorDrawn
&& !parentBgColorDrawn
&& (!defaultStyle.autoStroke || useDefaultFill)) ? (defaultLineWidth = DEFAULT_STROKE_LINE_WIDTH, defaultStyle.stroke)
: null);
var hasShadow = tokenStyle.textShadowBlur > 0
|| style.textShadowBlur > 0;
subElStyle.text = token.text;
subElStyle.x = x;
subElStyle.y = y;
if (hasShadow) {
subElStyle.shadowBlur = tokenStyle.textShadowBlur || style.textShadowBlur || 0;
subElStyle.shadowColor = tokenStyle.textShadowColor || style.textShadowColor || 'transparent';
subElStyle.shadowOffsetX = tokenStyle.textShadowOffsetX || style.textShadowOffsetX || 0;
subElStyle.shadowOffsetY = tokenStyle.textShadowOffsetY || style.textShadowOffsetY || 0;
}
subElStyle.textAlign = textAlign;
subElStyle.textBaseline = 'middle';
subElStyle.font = token.font || DEFAULT_FONT;
subElStyle.opacity = retrieve3(tokenStyle.opacity, style.opacity, 1);
setSeparateFont(subElStyle, tokenStyle);
if (textStroke) {
subElStyle.lineWidth = retrieve3(tokenStyle.lineWidth, style.lineWidth, defaultLineWidth);
subElStyle.lineDash = retrieve2(tokenStyle.lineDash, style.lineDash);
subElStyle.lineDashOffset = style.lineDashOffset || 0;
subElStyle.stroke = textStroke;
}
if (textFill) {
subElStyle.fill = textFill;
}
var textWidth = token.contentWidth;
var textHeight = token.contentHeight;
el.setBoundingRect(new BoundingRect(adjustTextX(subElStyle.x, textWidth, subElStyle.textAlign), adjustTextY(subElStyle.y, textHeight, subElStyle.textBaseline), textWidth, textHeight));
};
ZRText.prototype._renderBackground = function (style, topStyle, x, y, width, height) {
var textBackgroundColor = style.backgroundColor;
var textBorderWidth = style.borderWidth;
var textBorderColor = style.borderColor;
var isImageBg = textBackgroundColor && textBackgroundColor.image;
var isPlainOrGradientBg = textBackgroundColor && !isImageBg;
var textBorderRadius = style.borderRadius;
var self = this;
var rectEl;
var imgEl;
if (isPlainOrGradientBg || style.lineHeight || (textBorderWidth && textBorderColor)) {
rectEl = this._getOrCreateChild(Rect);
rectEl.useStyle(rectEl.createStyle());
rectEl.style.fill = null;
var rectShape = rectEl.shape;
rectShape.x = x;
rectShape.y = y;
rectShape.width = width;
rectShape.height = height;
rectShape.r = textBorderRadius;
rectEl.dirtyShape();
}
if (isPlainOrGradientBg) {
var rectStyle = rectEl.style;
rectStyle.fill = textBackgroundColor || null;
rectStyle.fillOpacity = retrieve2(style.fillOpacity, 1);
}
else if (isImageBg) {
imgEl = this._getOrCreateChild(ZRImage);
imgEl.onload = function () {
self.dirtyStyle();
};
var imgStyle = imgEl.style;
imgStyle.image = textBackgroundColor.image;
imgStyle.x = x;
imgStyle.y = y;
imgStyle.width = width;
imgStyle.height = height;
}
if (textBorderWidth && textBorderColor) {
var rectStyle = rectEl.style;
rectStyle.lineWidth = textBorderWidth;
rectStyle.stroke = textBorderColor;
rectStyle.strokeOpacity = retrieve2(style.strokeOpacity, 1);
rectStyle.lineDash = style.borderDash;
rectStyle.lineDashOffset = style.borderDashOffset || 0;
rectEl.strokeContainThreshold = 0;
if (rectEl.hasFill() && rectEl.hasStroke()) {
rectStyle.strokeFirst = true;
rectStyle.lineWidth *= 2;
}
}
var commonStyle = (rectEl || imgEl).style;
commonStyle.shadowBlur = style.shadowBlur || 0;
commonStyle.shadowColor = style.shadowColor || 'transparent';
commonStyle.shadowOffsetX = style.shadowOffsetX || 0;
commonStyle.shadowOffsetY = style.shadowOffsetY || 0;
commonStyle.opacity = retrieve3(style.opacity, topStyle.opacity, 1);
};
ZRText.makeFont = function (style) {
var font = '';
if (hasSeparateFont(style)) {
font = [
style.fontStyle,
style.fontWeight,
parseFontSize(style.fontSize),
style.fontFamily || 'sans-serif'
].join(' ');
}
return font && trim(font) || style.textFont || style.font;
};
return ZRText;
}(Displayable));
var VALID_TEXT_ALIGN = { left: true, right: 1, center: 1 };
var VALID_TEXT_VERTICAL_ALIGN = { top: 1, bottom: 1, middle: 1 };
var FONT_PARTS = ['fontStyle', 'fontWeight', 'fontSize', 'fontFamily'];
export function parseFontSize(fontSize) {
if (typeof fontSize === 'string'
&& (fontSize.indexOf('px') !== -1
|| fontSize.indexOf('rem') !== -1
|| fontSize.indexOf('em') !== -1)) {
return fontSize;
}
else if (!isNaN(+fontSize)) {
return fontSize + 'px';
}
else {
return DEFAULT_FONT_SIZE + 'px';
}
}
function setSeparateFont(targetStyle, sourceStyle) {
for (var i = 0; i < FONT_PARTS.length; i++) {
var fontProp = FONT_PARTS[i];
var val = sourceStyle[fontProp];
if (val != null) {
targetStyle[fontProp] = val;
}
}
}
export function hasSeparateFont(style) {
return style.fontSize != null || style.fontFamily || style.fontWeight;
}
export function normalizeTextStyle(style) {
normalizeStyle(style);
each(style.rich, normalizeStyle);
return style;
}
function normalizeStyle(style) {
if (style) {
style.font = ZRText.makeFont(style);
var textAlign = style.align;
textAlign === 'middle' && (textAlign = 'center');
style.align = (textAlign == null || VALID_TEXT_ALIGN[textAlign]) ? textAlign : 'left';
var verticalAlign = style.verticalAlign;
verticalAlign === 'center' && (verticalAlign = 'middle');
style.verticalAlign = (verticalAlign == null || VALID_TEXT_VERTICAL_ALIGN[verticalAlign]) ? verticalAlign : 'top';
var textPadding = style.padding;
if (textPadding) {
style.padding = normalizeCssArray(style.padding);
}
}
}
function getStroke(stroke, lineWidth) {
return (stroke == null || lineWidth <= 0 || stroke === 'transparent' || stroke === 'none')
? null
: (stroke.image || stroke.colorStops)
? '#000'
: stroke;
}
function getFill(fill) {
return (fill == null || fill === 'none')
? null
: (fill.image || fill.colorStops)
? '#000'
: fill;
}
function getTextXForPadding(x, textAlign, textPadding) {
return textAlign === 'right'
? (x - textPadding[1])
: textAlign === 'center'
? (x + textPadding[3] / 2 - textPadding[1] / 2)
: (x + textPadding[3]);
}
function getStyleText(style) {
var text = style.text;
text != null && (text += '');
return text;
}
function needDrawBackground(style) {
return !!(style.backgroundColor
|| style.lineHeight
|| (style.borderWidth && style.borderColor));
}
export default ZRText;

View File

@ -0,0 +1,3 @@
export declare const REDRAW_BIT = 1;
export declare const STYLE_CHANGED_BIT = 2;
export declare const SHAPE_CHANGED_BIT = 4;

View File

@ -0,0 +1,3 @@
export var REDRAW_BIT = 1;
export var STYLE_CHANGED_BIT = 2;
export var SHAPE_CHANGED_BIT = 4;

View File

@ -0,0 +1,6 @@
import { ImageLike } from '../../core/types';
export declare function findExistImage(newImageOrSrc: string | ImageLike): ImageLike;
export declare function createOrUpdateImage<T>(newImageOrSrc: string | ImageLike, image: ImageLike, hostEl: {
dirty: () => void;
}, onload?: (image: ImageLike, payload: T) => void, cbPayload?: T): ImageLike;
export declare function isImageReady(image: ImageLike): number;

View File

@ -0,0 +1,54 @@
import LRU from '../../core/LRU.js';
import { platformApi } from '../../core/platform.js';
var globalImageCache = new LRU(50);
export function findExistImage(newImageOrSrc) {
if (typeof newImageOrSrc === 'string') {
var cachedImgObj = globalImageCache.get(newImageOrSrc);
return cachedImgObj && cachedImgObj.image;
}
else {
return newImageOrSrc;
}
}
export function createOrUpdateImage(newImageOrSrc, image, hostEl, onload, cbPayload) {
if (!newImageOrSrc) {
return image;
}
else if (typeof newImageOrSrc === 'string') {
if ((image && image.__zrImageSrc === newImageOrSrc) || !hostEl) {
return image;
}
var cachedImgObj = globalImageCache.get(newImageOrSrc);
var pendingWrap = { hostEl: hostEl, cb: onload, cbPayload: cbPayload };
if (cachedImgObj) {
image = cachedImgObj.image;
!isImageReady(image) && cachedImgObj.pending.push(pendingWrap);
}
else {
image = platformApi.loadImage(newImageOrSrc, imageOnLoad, imageOnLoad);
image.__zrImageSrc = newImageOrSrc;
globalImageCache.put(newImageOrSrc, image.__cachedImgObj = {
image: image,
pending: [pendingWrap]
});
}
return image;
}
else {
return newImageOrSrc;
}
}
function imageOnLoad() {
var cachedImgObj = this.__cachedImgObj;
this.onload = this.onerror = this.__cachedImgObj = null;
for (var i = 0; i < cachedImgObj.pending.length; i++) {
var pendingWrap = cachedImgObj.pending[i];
var cb = pendingWrap.cb;
cb && cb(this, pendingWrap.cbPayload);
pendingWrap.hostEl.dirty();
}
cachedImgObj.pending.length = 0;
}
export function isImageReady(image) {
return image && image.width && image.height;
}

View File

@ -0,0 +1,54 @@
import { TextAlign, TextVerticalAlign } from '../../core/types';
import { TextStyleProps } from '../Text';
interface InnerTruncateOption {
maxIteration?: number;
minChar?: number;
placeholder?: string;
maxIterations?: number;
}
export declare function truncateText(text: string, containerWidth: number, font: string, ellipsis?: string, options?: InnerTruncateOption): string;
export interface PlainTextContentBlock {
lineHeight: number;
calculatedLineHeight: number;
contentWidth: number;
contentHeight: number;
width: number;
height: number;
outerWidth: number;
outerHeight: number;
lines: string[];
}
export declare function parsePlainText(text: string, style?: TextStyleProps): PlainTextContentBlock;
declare class RichTextToken {
styleName: string;
text: string;
width: number;
height: number;
innerHeight: number;
contentHeight: number;
contentWidth: number;
lineHeight: number;
font: string;
align: TextAlign;
verticalAlign: TextVerticalAlign;
textPadding: number[];
percentWidth?: string;
isLineHolder: boolean;
}
declare class RichTextLine {
lineHeight: number;
width: number;
tokens: RichTextToken[];
constructor(tokens?: RichTextToken[]);
}
export declare class RichTextContentBlock {
width: number;
height: number;
contentWidth: number;
contentHeight: number;
outerWidth: number;
outerHeight: number;
lines: RichTextLine[];
}
export declare function parseRichText(text: string, style: TextStyleProps): RichTextContentBlock;
export {};

View File

@ -0,0 +1,469 @@
import * as imageHelper from '../helper/image.js';
import { extend, retrieve2, retrieve3, reduce } from '../../core/util.js';
import { getLineHeight, getWidth, parsePercent } from '../../contain/text.js';
var STYLE_REG = /\{([a-zA-Z0-9_]+)\|([^}]*)\}/g;
export function truncateText(text, containerWidth, font, ellipsis, options) {
if (!containerWidth) {
return '';
}
var textLines = (text + '').split('\n');
options = prepareTruncateOptions(containerWidth, font, ellipsis, options);
for (var i = 0, len = textLines.length; i < len; i++) {
textLines[i] = truncateSingleLine(textLines[i], options);
}
return textLines.join('\n');
}
function prepareTruncateOptions(containerWidth, font, ellipsis, options) {
options = options || {};
var preparedOpts = extend({}, options);
preparedOpts.font = font;
ellipsis = retrieve2(ellipsis, '...');
preparedOpts.maxIterations = retrieve2(options.maxIterations, 2);
var minChar = preparedOpts.minChar = retrieve2(options.minChar, 0);
preparedOpts.cnCharWidth = getWidth('国', font);
var ascCharWidth = preparedOpts.ascCharWidth = getWidth('a', font);
preparedOpts.placeholder = retrieve2(options.placeholder, '');
var contentWidth = containerWidth = Math.max(0, containerWidth - 1);
for (var i = 0; i < minChar && contentWidth >= ascCharWidth; i++) {
contentWidth -= ascCharWidth;
}
var ellipsisWidth = getWidth(ellipsis, font);
if (ellipsisWidth > contentWidth) {
ellipsis = '';
ellipsisWidth = 0;
}
contentWidth = containerWidth - ellipsisWidth;
preparedOpts.ellipsis = ellipsis;
preparedOpts.ellipsisWidth = ellipsisWidth;
preparedOpts.contentWidth = contentWidth;
preparedOpts.containerWidth = containerWidth;
return preparedOpts;
}
function truncateSingleLine(textLine, options) {
var containerWidth = options.containerWidth;
var font = options.font;
var contentWidth = options.contentWidth;
if (!containerWidth) {
return '';
}
var lineWidth = getWidth(textLine, font);
if (lineWidth <= containerWidth) {
return textLine;
}
for (var j = 0;; j++) {
if (lineWidth <= contentWidth || j >= options.maxIterations) {
textLine += options.ellipsis;
break;
}
var subLength = j === 0
? estimateLength(textLine, contentWidth, options.ascCharWidth, options.cnCharWidth)
: lineWidth > 0
? Math.floor(textLine.length * contentWidth / lineWidth)
: 0;
textLine = textLine.substr(0, subLength);
lineWidth = getWidth(textLine, font);
}
if (textLine === '') {
textLine = options.placeholder;
}
return textLine;
}
function estimateLength(text, contentWidth, ascCharWidth, cnCharWidth) {
var width = 0;
var i = 0;
for (var len = text.length; i < len && width < contentWidth; i++) {
var charCode = text.charCodeAt(i);
width += (0 <= charCode && charCode <= 127) ? ascCharWidth : cnCharWidth;
}
return i;
}
export function parsePlainText(text, style) {
text != null && (text += '');
var overflow = style.overflow;
var padding = style.padding;
var font = style.font;
var truncate = overflow === 'truncate';
var calculatedLineHeight = getLineHeight(font);
var lineHeight = retrieve2(style.lineHeight, calculatedLineHeight);
var bgColorDrawn = !!(style.backgroundColor);
var truncateLineOverflow = style.lineOverflow === 'truncate';
var width = style.width;
var lines;
if (width != null && (overflow === 'break' || overflow === 'breakAll')) {
lines = text ? wrapText(text, style.font, width, overflow === 'breakAll', 0).lines : [];
}
else {
lines = text ? text.split('\n') : [];
}
var contentHeight = lines.length * lineHeight;
var height = retrieve2(style.height, contentHeight);
if (contentHeight > height && truncateLineOverflow) {
var lineCount = Math.floor(height / lineHeight);
lines = lines.slice(0, lineCount);
}
if (text && truncate && width != null) {
var options = prepareTruncateOptions(width, font, style.ellipsis, {
minChar: style.truncateMinChar,
placeholder: style.placeholder
});
for (var i = 0; i < lines.length; i++) {
lines[i] = truncateSingleLine(lines[i], options);
}
}
var outerHeight = height;
var contentWidth = 0;
for (var i = 0; i < lines.length; i++) {
contentWidth = Math.max(getWidth(lines[i], font), contentWidth);
}
if (width == null) {
width = contentWidth;
}
var outerWidth = contentWidth;
if (padding) {
outerHeight += padding[0] + padding[2];
outerWidth += padding[1] + padding[3];
width += padding[1] + padding[3];
}
if (bgColorDrawn) {
outerWidth = width;
}
return {
lines: lines,
height: height,
outerWidth: outerWidth,
outerHeight: outerHeight,
lineHeight: lineHeight,
calculatedLineHeight: calculatedLineHeight,
contentWidth: contentWidth,
contentHeight: contentHeight,
width: width
};
}
var RichTextToken = (function () {
function RichTextToken() {
}
return RichTextToken;
}());
var RichTextLine = (function () {
function RichTextLine(tokens) {
this.tokens = [];
if (tokens) {
this.tokens = tokens;
}
}
return RichTextLine;
}());
var RichTextContentBlock = (function () {
function RichTextContentBlock() {
this.width = 0;
this.height = 0;
this.contentWidth = 0;
this.contentHeight = 0;
this.outerWidth = 0;
this.outerHeight = 0;
this.lines = [];
}
return RichTextContentBlock;
}());
export { RichTextContentBlock };
export function parseRichText(text, style) {
var contentBlock = new RichTextContentBlock();
text != null && (text += '');
if (!text) {
return contentBlock;
}
var topWidth = style.width;
var topHeight = style.height;
var overflow = style.overflow;
var wrapInfo = (overflow === 'break' || overflow === 'breakAll') && topWidth != null
? { width: topWidth, accumWidth: 0, breakAll: overflow === 'breakAll' }
: null;
var lastIndex = STYLE_REG.lastIndex = 0;
var result;
while ((result = STYLE_REG.exec(text)) != null) {
var matchedIndex = result.index;
if (matchedIndex > lastIndex) {
pushTokens(contentBlock, text.substring(lastIndex, matchedIndex), style, wrapInfo);
}
pushTokens(contentBlock, result[2], style, wrapInfo, result[1]);
lastIndex = STYLE_REG.lastIndex;
}
if (lastIndex < text.length) {
pushTokens(contentBlock, text.substring(lastIndex, text.length), style, wrapInfo);
}
var pendingList = [];
var calculatedHeight = 0;
var calculatedWidth = 0;
var stlPadding = style.padding;
var truncate = overflow === 'truncate';
var truncateLine = style.lineOverflow === 'truncate';
function finishLine(line, lineWidth, lineHeight) {
line.width = lineWidth;
line.lineHeight = lineHeight;
calculatedHeight += lineHeight;
calculatedWidth = Math.max(calculatedWidth, lineWidth);
}
outer: for (var i = 0; i < contentBlock.lines.length; i++) {
var line = contentBlock.lines[i];
var lineHeight = 0;
var lineWidth = 0;
for (var j = 0; j < line.tokens.length; j++) {
var token = line.tokens[j];
var tokenStyle = token.styleName && style.rich[token.styleName] || {};
var textPadding = token.textPadding = tokenStyle.padding;
var paddingH = textPadding ? textPadding[1] + textPadding[3] : 0;
var font = token.font = tokenStyle.font || style.font;
token.contentHeight = getLineHeight(font);
var tokenHeight = retrieve2(tokenStyle.height, token.contentHeight);
token.innerHeight = tokenHeight;
textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
token.height = tokenHeight;
token.lineHeight = retrieve3(tokenStyle.lineHeight, style.lineHeight, tokenHeight);
token.align = tokenStyle && tokenStyle.align || style.align;
token.verticalAlign = tokenStyle && tokenStyle.verticalAlign || 'middle';
if (truncateLine && topHeight != null && calculatedHeight + token.lineHeight > topHeight) {
if (j > 0) {
line.tokens = line.tokens.slice(0, j);
finishLine(line, lineWidth, lineHeight);
contentBlock.lines = contentBlock.lines.slice(0, i + 1);
}
else {
contentBlock.lines = contentBlock.lines.slice(0, i);
}
break outer;
}
var styleTokenWidth = tokenStyle.width;
var tokenWidthNotSpecified = styleTokenWidth == null || styleTokenWidth === 'auto';
if (typeof styleTokenWidth === 'string' && styleTokenWidth.charAt(styleTokenWidth.length - 1) === '%') {
token.percentWidth = styleTokenWidth;
pendingList.push(token);
token.contentWidth = getWidth(token.text, font);
}
else {
if (tokenWidthNotSpecified) {
var textBackgroundColor = tokenStyle.backgroundColor;
var bgImg = textBackgroundColor && textBackgroundColor.image;
if (bgImg) {
bgImg = imageHelper.findExistImage(bgImg);
if (imageHelper.isImageReady(bgImg)) {
token.width = Math.max(token.width, bgImg.width * tokenHeight / bgImg.height);
}
}
}
var remainTruncWidth = truncate && topWidth != null
? topWidth - lineWidth : null;
if (remainTruncWidth != null && remainTruncWidth < token.width) {
if (!tokenWidthNotSpecified || remainTruncWidth < paddingH) {
token.text = '';
token.width = token.contentWidth = 0;
}
else {
token.text = truncateText(token.text, remainTruncWidth - paddingH, font, style.ellipsis, { minChar: style.truncateMinChar });
token.width = token.contentWidth = getWidth(token.text, font);
}
}
else {
token.contentWidth = getWidth(token.text, font);
}
}
token.width += paddingH;
lineWidth += token.width;
tokenStyle && (lineHeight = Math.max(lineHeight, token.lineHeight));
}
finishLine(line, lineWidth, lineHeight);
}
contentBlock.outerWidth = contentBlock.width = retrieve2(topWidth, calculatedWidth);
contentBlock.outerHeight = contentBlock.height = retrieve2(topHeight, calculatedHeight);
contentBlock.contentHeight = calculatedHeight;
contentBlock.contentWidth = calculatedWidth;
if (stlPadding) {
contentBlock.outerWidth += stlPadding[1] + stlPadding[3];
contentBlock.outerHeight += stlPadding[0] + stlPadding[2];
}
for (var i = 0; i < pendingList.length; i++) {
var token = pendingList[i];
var percentWidth = token.percentWidth;
token.width = parseInt(percentWidth, 10) / 100 * contentBlock.width;
}
return contentBlock;
}
function pushTokens(block, str, style, wrapInfo, styleName) {
var isEmptyStr = str === '';
var tokenStyle = styleName && style.rich[styleName] || {};
var lines = block.lines;
var font = tokenStyle.font || style.font;
var newLine = false;
var strLines;
var linesWidths;
if (wrapInfo) {
var tokenPadding = tokenStyle.padding;
var tokenPaddingH = tokenPadding ? tokenPadding[1] + tokenPadding[3] : 0;
if (tokenStyle.width != null && tokenStyle.width !== 'auto') {
var outerWidth_1 = parsePercent(tokenStyle.width, wrapInfo.width) + tokenPaddingH;
if (lines.length > 0) {
if (outerWidth_1 + wrapInfo.accumWidth > wrapInfo.width) {
strLines = str.split('\n');
newLine = true;
}
}
wrapInfo.accumWidth = outerWidth_1;
}
else {
var res = wrapText(str, font, wrapInfo.width, wrapInfo.breakAll, wrapInfo.accumWidth);
wrapInfo.accumWidth = res.accumWidth + tokenPaddingH;
linesWidths = res.linesWidths;
strLines = res.lines;
}
}
else {
strLines = str.split('\n');
}
for (var i = 0; i < strLines.length; i++) {
var text = strLines[i];
var token = new RichTextToken();
token.styleName = styleName;
token.text = text;
token.isLineHolder = !text && !isEmptyStr;
if (typeof tokenStyle.width === 'number') {
token.width = tokenStyle.width;
}
else {
token.width = linesWidths
? linesWidths[i]
: getWidth(text, font);
}
if (!i && !newLine) {
var tokens = (lines[lines.length - 1] || (lines[0] = new RichTextLine())).tokens;
var tokensLen = tokens.length;
(tokensLen === 1 && tokens[0].isLineHolder)
? (tokens[0] = token)
: ((text || !tokensLen || isEmptyStr) && tokens.push(token));
}
else {
lines.push(new RichTextLine([token]));
}
}
}
function isAlphabeticLetter(ch) {
var code = ch.charCodeAt(0);
return code >= 0x20 && code <= 0x24F
|| code >= 0x370 && code <= 0x10FF
|| code >= 0x1200 && code <= 0x13FF
|| code >= 0x1E00 && code <= 0x206F;
}
var breakCharMap = reduce(',&?/;] '.split(''), function (obj, ch) {
obj[ch] = true;
return obj;
}, {});
function isWordBreakChar(ch) {
if (isAlphabeticLetter(ch)) {
if (breakCharMap[ch]) {
return true;
}
return false;
}
return true;
}
function wrapText(text, font, lineWidth, isBreakAll, lastAccumWidth) {
var lines = [];
var linesWidths = [];
var line = '';
var currentWord = '';
var currentWordWidth = 0;
var accumWidth = 0;
for (var i = 0; i < text.length; i++) {
var ch = text.charAt(i);
if (ch === '\n') {
if (currentWord) {
line += currentWord;
accumWidth += currentWordWidth;
}
lines.push(line);
linesWidths.push(accumWidth);
line = '';
currentWord = '';
currentWordWidth = 0;
accumWidth = 0;
continue;
}
var chWidth = getWidth(ch, font);
var inWord = isBreakAll ? false : !isWordBreakChar(ch);
if (!lines.length
? lastAccumWidth + accumWidth + chWidth > lineWidth
: accumWidth + chWidth > lineWidth) {
if (!accumWidth) {
if (inWord) {
lines.push(currentWord);
linesWidths.push(currentWordWidth);
currentWord = ch;
currentWordWidth = chWidth;
}
else {
lines.push(ch);
linesWidths.push(chWidth);
}
}
else if (line || currentWord) {
if (inWord) {
if (!line) {
line = currentWord;
currentWord = '';
currentWordWidth = 0;
accumWidth = currentWordWidth;
}
lines.push(line);
linesWidths.push(accumWidth - currentWordWidth);
currentWord += ch;
currentWordWidth += chWidth;
line = '';
accumWidth = currentWordWidth;
}
else {
if (currentWord) {
line += currentWord;
currentWord = '';
currentWordWidth = 0;
}
lines.push(line);
linesWidths.push(accumWidth);
line = ch;
accumWidth = chWidth;
}
}
continue;
}
accumWidth += chWidth;
if (inWord) {
currentWord += ch;
currentWordWidth += chWidth;
}
else {
if (currentWord) {
line += currentWord;
currentWord = '';
currentWordWidth = 0;
}
line += ch;
}
}
if (!lines.length && !line) {
line = text;
currentWord = '';
currentWordWidth = 0;
}
if (currentWord) {
line += currentWord;
}
if (line) {
lines.push(line);
linesWidths.push(accumWidth);
}
if (lines.length === 1) {
accumWidth += lastAccumWidth;
}
return {
accumWidth: accumWidth,
lines: lines,
linesWidths: linesWidths
};
}

View File

@ -0,0 +1,7 @@
import { VectorArray } from '../../core/vector';
import PathProxy from '../../core/PathProxy';
export declare function buildPath(ctx: CanvasRenderingContext2D | PathProxy, shape: {
points: VectorArray[];
smooth?: number;
smoothConstraint?: VectorArray[];
}, closePath: boolean): void;

View File

@ -0,0 +1,25 @@
import smoothBezier from './smoothBezier.js';
export function buildPath(ctx, shape, closePath) {
var smooth = shape.smooth;
var points = shape.points;
if (points && points.length >= 2) {
if (smooth) {
var controlPoints = smoothBezier(points, smooth, closePath, shape.smoothConstraint);
ctx.moveTo(points[0][0], points[0][1]);
var len = points.length;
for (var i = 0; i < (closePath ? len : len - 1); i++) {
var cp1 = controlPoints[i * 2];
var cp2 = controlPoints[i * 2 + 1];
var p = points[(i + 1) % len];
ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]);
}
}
else {
ctx.moveTo(points[0][0], points[0][1]);
for (var i = 1, l = points.length; i < l; i++) {
ctx.lineTo(points[i][0], points[i][1]);
}
}
closePath && ctx.closePath();
}
}

View File

@ -0,0 +1,8 @@
import PathProxy from '../../core/PathProxy';
export declare function buildPath(ctx: CanvasRenderingContext2D | PathProxy, shape: {
x: number;
y: number;
width: number;
height: number;
r?: number | number[];
}): void;

View File

@ -0,0 +1,75 @@
export function buildPath(ctx, shape) {
var x = shape.x;
var y = shape.y;
var width = shape.width;
var height = shape.height;
var r = shape.r;
var r1;
var r2;
var r3;
var r4;
if (width < 0) {
x = x + width;
width = -width;
}
if (height < 0) {
y = y + height;
height = -height;
}
if (typeof r === 'number') {
r1 = r2 = r3 = r4 = r;
}
else if (r instanceof Array) {
if (r.length === 1) {
r1 = r2 = r3 = r4 = r[0];
}
else if (r.length === 2) {
r1 = r3 = r[0];
r2 = r4 = r[1];
}
else if (r.length === 3) {
r1 = r[0];
r2 = r4 = r[1];
r3 = r[2];
}
else {
r1 = r[0];
r2 = r[1];
r3 = r[2];
r4 = r[3];
}
}
else {
r1 = r2 = r3 = r4 = 0;
}
var total;
if (r1 + r2 > width) {
total = r1 + r2;
r1 *= width / total;
r2 *= width / total;
}
if (r3 + r4 > width) {
total = r3 + r4;
r3 *= width / total;
r4 *= width / total;
}
if (r2 + r3 > height) {
total = r2 + r3;
r2 *= height / total;
r3 *= height / total;
}
if (r1 + r4 > height) {
total = r1 + r4;
r1 *= height / total;
r4 *= height / total;
}
ctx.moveTo(x + r1, y);
ctx.lineTo(x + width - r2, y);
r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
ctx.lineTo(x + width, y + height - r3);
r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
ctx.lineTo(x + r4, y + height);
r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
ctx.lineTo(x, y + r1);
r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
}

View File

@ -0,0 +1,11 @@
import PathProxy from '../../core/PathProxy';
export declare function buildPath(ctx: CanvasRenderingContext2D | PathProxy, shape: {
cx: number;
cy: number;
startAngle: number;
endAngle: number;
clockwise?: boolean;
r?: number;
r0?: number;
cornerRadius?: number | number[];
}): void;

View File

@ -0,0 +1,227 @@
import { isArray } from '../../core/util.js';
var PI = Math.PI;
var PI2 = PI * 2;
var mathSin = Math.sin;
var mathCos = Math.cos;
var mathACos = Math.acos;
var mathATan2 = Math.atan2;
var mathAbs = Math.abs;
var mathSqrt = Math.sqrt;
var mathMax = Math.max;
var mathMin = Math.min;
var e = 1e-4;
function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
var dx10 = x1 - x0;
var dy10 = y1 - y0;
var dx32 = x3 - x2;
var dy32 = y3 - y2;
var t = dy32 * dx10 - dx32 * dy10;
if (t * t < e) {
return;
}
t = (dx32 * (y0 - y2) - dy32 * (x0 - x2)) / t;
return [x0 + t * dx10, y0 + t * dy10];
}
function computeCornerTangents(x0, y0, x1, y1, radius, cr, clockwise) {
var x01 = x0 - x1;
var y01 = y0 - y1;
var lo = (clockwise ? cr : -cr) / mathSqrt(x01 * x01 + y01 * y01);
var ox = lo * y01;
var oy = -lo * x01;
var x11 = x0 + ox;
var y11 = y0 + oy;
var x10 = x1 + ox;
var y10 = y1 + oy;
var x00 = (x11 + x10) / 2;
var y00 = (y11 + y10) / 2;
var dx = x10 - x11;
var dy = y10 - y11;
var d2 = dx * dx + dy * dy;
var r = radius - cr;
var s = x11 * y10 - x10 * y11;
var d = (dy < 0 ? -1 : 1) * mathSqrt(mathMax(0, r * r * d2 - s * s));
var cx0 = (s * dy - dx * d) / d2;
var cy0 = (-s * dx - dy * d) / d2;
var cx1 = (s * dy + dx * d) / d2;
var cy1 = (-s * dx + dy * d) / d2;
var dx0 = cx0 - x00;
var dy0 = cy0 - y00;
var dx1 = cx1 - x00;
var dy1 = cy1 - y00;
if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) {
cx0 = cx1;
cy0 = cy1;
}
return {
cx: cx0,
cy: cy0,
x0: -ox,
y0: -oy,
x1: cx0 * (radius / r - 1),
y1: cy0 * (radius / r - 1)
};
}
function normalizeCornerRadius(cr) {
var arr;
if (isArray(cr)) {
var len = cr.length;
if (!len) {
return cr;
}
if (len === 1) {
arr = [cr[0], cr[0], 0, 0];
}
else if (len === 2) {
arr = [cr[0], cr[0], cr[1], cr[1]];
}
else if (len === 3) {
arr = cr.concat(cr[2]);
}
else {
arr = cr;
}
}
else {
arr = [cr, cr, cr, cr];
}
return arr;
}
export function buildPath(ctx, shape) {
var _a;
var radius = mathMax(shape.r, 0);
var innerRadius = mathMax(shape.r0 || 0, 0);
var hasRadius = radius > 0;
var hasInnerRadius = innerRadius > 0;
if (!hasRadius && !hasInnerRadius) {
return;
}
if (!hasRadius) {
radius = innerRadius;
innerRadius = 0;
}
if (innerRadius > radius) {
var tmp = radius;
radius = innerRadius;
innerRadius = tmp;
}
var startAngle = shape.startAngle, endAngle = shape.endAngle;
if (isNaN(startAngle) || isNaN(endAngle)) {
return;
}
var cx = shape.cx, cy = shape.cy;
var clockwise = !!shape.clockwise;
var arc = mathAbs(endAngle - startAngle);
var mod = arc > PI2 && arc % PI2;
mod > e && (arc = mod);
if (!(radius > e)) {
ctx.moveTo(cx, cy);
}
else if (arc > PI2 - e) {
ctx.moveTo(cx + radius * mathCos(startAngle), cy + radius * mathSin(startAngle));
ctx.arc(cx, cy, radius, startAngle, endAngle, !clockwise);
if (innerRadius > e) {
ctx.moveTo(cx + innerRadius * mathCos(endAngle), cy + innerRadius * mathSin(endAngle));
ctx.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise);
}
}
else {
var icrStart = void 0;
var icrEnd = void 0;
var ocrStart = void 0;
var ocrEnd = void 0;
var ocrs = void 0;
var ocre = void 0;
var icrs = void 0;
var icre = void 0;
var ocrMax = void 0;
var icrMax = void 0;
var limitedOcrMax = void 0;
var limitedIcrMax = void 0;
var xre = void 0;
var yre = void 0;
var xirs = void 0;
var yirs = void 0;
var xrs = radius * mathCos(startAngle);
var yrs = radius * mathSin(startAngle);
var xire = innerRadius * mathCos(endAngle);
var yire = innerRadius * mathSin(endAngle);
var hasArc = arc > e;
if (hasArc) {
var cornerRadius = shape.cornerRadius;
if (cornerRadius) {
_a = normalizeCornerRadius(cornerRadius), icrStart = _a[0], icrEnd = _a[1], ocrStart = _a[2], ocrEnd = _a[3];
}
var halfRd = mathAbs(radius - innerRadius) / 2;
ocrs = mathMin(halfRd, ocrStart);
ocre = mathMin(halfRd, ocrEnd);
icrs = mathMin(halfRd, icrStart);
icre = mathMin(halfRd, icrEnd);
limitedOcrMax = ocrMax = mathMax(ocrs, ocre);
limitedIcrMax = icrMax = mathMax(icrs, icre);
if (ocrMax > e || icrMax > e) {
xre = radius * mathCos(endAngle);
yre = radius * mathSin(endAngle);
xirs = innerRadius * mathCos(startAngle);
yirs = innerRadius * mathSin(startAngle);
if (arc < PI) {
var it_1 = intersect(xrs, yrs, xirs, yirs, xre, yre, xire, yire);
if (it_1) {
var x0 = xrs - it_1[0];
var y0 = yrs - it_1[1];
var x1 = xre - it_1[0];
var y1 = yre - it_1[1];
var a = 1 / mathSin(mathACos((x0 * x1 + y0 * y1) / (mathSqrt(x0 * x0 + y0 * y0) * mathSqrt(x1 * x1 + y1 * y1))) / 2);
var b = mathSqrt(it_1[0] * it_1[0] + it_1[1] * it_1[1]);
limitedOcrMax = mathMin(ocrMax, (radius - b) / (a + 1));
limitedIcrMax = mathMin(icrMax, (innerRadius - b) / (a - 1));
}
}
}
}
if (!hasArc) {
ctx.moveTo(cx + xrs, cy + yrs);
}
else if (limitedOcrMax > e) {
var crStart = mathMin(ocrStart, limitedOcrMax);
var crEnd = mathMin(ocrEnd, limitedOcrMax);
var ct0 = computeCornerTangents(xirs, yirs, xrs, yrs, radius, crStart, clockwise);
var ct1 = computeCornerTangents(xre, yre, xire, yire, radius, crEnd, clockwise);
ctx.moveTo(cx + ct0.cx + ct0.x0, cy + ct0.cy + ct0.y0);
if (limitedOcrMax < ocrMax && crStart === crEnd) {
ctx.arc(cx + ct0.cx, cy + ct0.cy, limitedOcrMax, mathATan2(ct0.y0, ct0.x0), mathATan2(ct1.y0, ct1.x0), !clockwise);
}
else {
crStart > 0 && ctx.arc(cx + ct0.cx, cy + ct0.cy, crStart, mathATan2(ct0.y0, ct0.x0), mathATan2(ct0.y1, ct0.x1), !clockwise);
ctx.arc(cx, cy, radius, mathATan2(ct0.cy + ct0.y1, ct0.cx + ct0.x1), mathATan2(ct1.cy + ct1.y1, ct1.cx + ct1.x1), !clockwise);
crEnd > 0 && ctx.arc(cx + ct1.cx, cy + ct1.cy, crEnd, mathATan2(ct1.y1, ct1.x1), mathATan2(ct1.y0, ct1.x0), !clockwise);
}
}
else {
ctx.moveTo(cx + xrs, cy + yrs);
ctx.arc(cx, cy, radius, startAngle, endAngle, !clockwise);
}
if (!(innerRadius > e) || !hasArc) {
ctx.lineTo(cx + xire, cy + yire);
}
else if (limitedIcrMax > e) {
var crStart = mathMin(icrStart, limitedIcrMax);
var crEnd = mathMin(icrEnd, limitedIcrMax);
var ct0 = computeCornerTangents(xire, yire, xre, yre, innerRadius, -crEnd, clockwise);
var ct1 = computeCornerTangents(xrs, yrs, xirs, yirs, innerRadius, -crStart, clockwise);
ctx.lineTo(cx + ct0.cx + ct0.x0, cy + ct0.cy + ct0.y0);
if (limitedIcrMax < icrMax && crStart === crEnd) {
ctx.arc(cx + ct0.cx, cy + ct0.cy, limitedIcrMax, mathATan2(ct0.y0, ct0.x0), mathATan2(ct1.y0, ct1.x0), !clockwise);
}
else {
crEnd > 0 && ctx.arc(cx + ct0.cx, cy + ct0.cy, crEnd, mathATan2(ct0.y0, ct0.x0), mathATan2(ct0.y1, ct0.x1), !clockwise);
ctx.arc(cx, cy, innerRadius, mathATan2(ct0.cy + ct0.y1, ct0.cx + ct0.x1), mathATan2(ct1.cy + ct1.y1, ct1.cx + ct1.x1), clockwise);
crStart > 0 && ctx.arc(cx + ct1.cx, cy + ct1.cy, crStart, mathATan2(ct1.y1, ct1.x1), mathATan2(ct1.y0, ct1.x0), !clockwise);
}
}
else {
ctx.lineTo(cx + xire, cy + yire);
ctx.arc(cx, cy, innerRadius, endAngle, startAngle, clockwise);
}
}
ctx.closePath();
}

View File

@ -0,0 +1,2 @@
import { VectorArray } from '../../core/vector';
export default function smoothBezier(points: VectorArray[], smooth?: number, isLoop?: boolean, constraint?: VectorArray[]): any[][];

View File

@ -0,0 +1,63 @@
import { min as v2Min, max as v2Max, scale as v2Scale, distance as v2Distance, add as v2Add, clone as v2Clone, sub as v2Sub } from '../../core/vector.js';
export default function smoothBezier(points, smooth, isLoop, constraint) {
var cps = [];
var v = [];
var v1 = [];
var v2 = [];
var prevPoint;
var nextPoint;
var min;
var max;
if (constraint) {
min = [Infinity, Infinity];
max = [-Infinity, -Infinity];
for (var i = 0, len = points.length; i < len; i++) {
v2Min(min, min, points[i]);
v2Max(max, max, points[i]);
}
v2Min(min, min, constraint[0]);
v2Max(max, max, constraint[1]);
}
for (var i = 0, len = points.length; i < len; i++) {
var point = points[i];
if (isLoop) {
prevPoint = points[i ? i - 1 : len - 1];
nextPoint = points[(i + 1) % len];
}
else {
if (i === 0 || i === len - 1) {
cps.push(v2Clone(points[i]));
continue;
}
else {
prevPoint = points[i - 1];
nextPoint = points[i + 1];
}
}
v2Sub(v, nextPoint, prevPoint);
v2Scale(v, v, smooth);
var d0 = v2Distance(point, prevPoint);
var d1 = v2Distance(point, nextPoint);
var sum = d0 + d1;
if (sum !== 0) {
d0 /= sum;
d1 /= sum;
}
v2Scale(v1, v, -d0);
v2Scale(v2, v, d1);
var cp0 = v2Add([], point, v1);
var cp1 = v2Add([], point, v2);
if (constraint) {
v2Max(cp0, cp0, min);
v2Min(cp0, cp0, max);
v2Max(cp1, cp1, min);
v2Min(cp1, cp1, max);
}
cps.push(cp0);
cps.push(cp1);
}
if (isLoop) {
cps.push(cps.shift());
}
return cps;
}

View File

@ -0,0 +1,2 @@
import { VectorArray } from '../../core/vector';
export default function smoothSpline(points: VectorArray[], isLoop?: boolean): VectorArray[];

View File

@ -0,0 +1,44 @@
import { distance as v2Distance } from '../../core/vector.js';
function interpolate(p0, p1, p2, p3, t, t2, t3) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
return (2 * (p1 - p2) + v0 + v1) * t3
+ (-3 * (p1 - p2) - 2 * v0 - v1) * t2
+ v0 * t + p1;
}
export default function smoothSpline(points, isLoop) {
var len = points.length;
var ret = [];
var distance = 0;
for (var i = 1; i < len; i++) {
distance += v2Distance(points[i - 1], points[i]);
}
var segs = distance / 2;
segs = segs < len ? len : segs;
for (var i = 0; i < segs; i++) {
var pos = i / (segs - 1) * (isLoop ? len : len - 1);
var idx = Math.floor(pos);
var w = pos - idx;
var p0 = void 0;
var p1 = points[idx % len];
var p2 = void 0;
var p3 = void 0;
if (!isLoop) {
p0 = points[idx === 0 ? idx : idx - 1];
p2 = points[idx > len - 2 ? len - 1 : idx + 1];
p3 = points[idx > len - 3 ? len - 1 : idx + 2];
}
else {
p0 = points[(idx - 1 + len) % len];
p2 = points[(idx + 1) % len];
p3 = points[(idx + 2) % len];
}
var w2 = w * w;
var w3 = w * w2;
ret.push([
interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3),
interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3)
]);
}
return ret;
}

View File

@ -0,0 +1,18 @@
import { PathStyleProps } from '../Path';
declare type LineShape = {
x1: number;
y1: number;
x2: number;
y2: number;
};
declare type RectShape = {
x: number;
y: number;
width: number;
height: number;
r?: number | number[];
};
export declare function subPixelOptimizeLine(outputShape: Partial<LineShape>, inputShape: LineShape, style: Pick<PathStyleProps, 'lineWidth'>): LineShape;
export declare function subPixelOptimizeRect(outputShape: Partial<RectShape>, inputShape: RectShape, style: Pick<PathStyleProps, 'lineWidth'>): RectShape;
export declare function subPixelOptimize(position: number, lineWidth?: number, positiveOrNegative?: boolean): number;
export {};

View File

@ -0,0 +1,56 @@
var round = Math.round;
export function subPixelOptimizeLine(outputShape, inputShape, style) {
if (!inputShape) {
return;
}
var x1 = inputShape.x1;
var x2 = inputShape.x2;
var y1 = inputShape.y1;
var y2 = inputShape.y2;
outputShape.x1 = x1;
outputShape.x2 = x2;
outputShape.y1 = y1;
outputShape.y2 = y2;
var lineWidth = style && style.lineWidth;
if (!lineWidth) {
return outputShape;
}
if (round(x1 * 2) === round(x2 * 2)) {
outputShape.x1 = outputShape.x2 = subPixelOptimize(x1, lineWidth, true);
}
if (round(y1 * 2) === round(y2 * 2)) {
outputShape.y1 = outputShape.y2 = subPixelOptimize(y1, lineWidth, true);
}
return outputShape;
}
export function subPixelOptimizeRect(outputShape, inputShape, style) {
if (!inputShape) {
return;
}
var originX = inputShape.x;
var originY = inputShape.y;
var originWidth = inputShape.width;
var originHeight = inputShape.height;
outputShape.x = originX;
outputShape.y = originY;
outputShape.width = originWidth;
outputShape.height = originHeight;
var lineWidth = style && style.lineWidth;
if (!lineWidth) {
return outputShape;
}
outputShape.x = subPixelOptimize(originX, lineWidth, true);
outputShape.y = subPixelOptimize(originY, lineWidth, true);
outputShape.width = Math.max(subPixelOptimize(originX + originWidth, lineWidth, false) - outputShape.x, originWidth === 0 ? 0 : 1);
outputShape.height = Math.max(subPixelOptimize(originY + originHeight, lineWidth, false) - outputShape.y, originHeight === 0 ? 0 : 1);
return outputShape;
}
export function subPixelOptimize(position, lineWidth, positiveOrNegative) {
if (!lineWidth) {
return position;
}
var doubledPosition = round(position * 2);
return (doubledPosition + round(lineWidth)) % 2 === 0
? doubledPosition / 2
: (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
}

View File

@ -0,0 +1,23 @@
import Path, { PathProps } from '../Path';
export declare class ArcShape {
cx: number;
cy: number;
r: number;
startAngle: number;
endAngle: number;
clockwise?: boolean;
}
export interface ArcProps extends PathProps {
shape?: Partial<ArcShape>;
}
declare class Arc extends Path<ArcProps> {
shape: ArcShape;
constructor(opts?: ArcProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): ArcShape;
buildPath(ctx: CanvasRenderingContext2D, shape: ArcShape): void;
}
export default Arc;

View File

@ -0,0 +1,44 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var ArcShape = (function () {
function ArcShape() {
this.cx = 0;
this.cy = 0;
this.r = 0;
this.startAngle = 0;
this.endAngle = Math.PI * 2;
this.clockwise = true;
}
return ArcShape;
}());
export { ArcShape };
var Arc = (function (_super) {
__extends(Arc, _super);
function Arc(opts) {
return _super.call(this, opts) || this;
}
Arc.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
Arc.prototype.getDefaultShape = function () {
return new ArcShape();
};
Arc.prototype.buildPath = function (ctx, shape) {
var x = shape.cx;
var y = shape.cy;
var r = Math.max(shape.r, 0);
var startAngle = shape.startAngle;
var endAngle = shape.endAngle;
var clockwise = shape.clockwise;
var unitX = Math.cos(startAngle);
var unitY = Math.sin(startAngle);
ctx.moveTo(unitX * r + x, unitY * r + y);
ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
};
return Arc;
}(Path));
Arc.prototype.type = 'arc';
export default Arc;

View File

@ -0,0 +1,28 @@
import Path, { PathProps } from '../Path';
export declare class BezierCurveShape {
x1: number;
y1: number;
x2: number;
y2: number;
cpx1: number;
cpy1: number;
cpx2?: number;
cpy2?: number;
percent: number;
}
export interface BezierCurveProps extends PathProps {
shape?: Partial<BezierCurveShape>;
}
declare class BezierCurve extends Path<BezierCurveProps> {
shape: BezierCurveShape;
constructor(opts?: BezierCurveProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): BezierCurveShape;
buildPath(ctx: CanvasRenderingContext2D, shape: BezierCurveShape): void;
pointAt(t: number): number[];
tangentAt(t: number): number[];
}
export default BezierCurve;

View File

@ -0,0 +1,99 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import * as vec2 from '../../core/vector.js';
import { quadraticSubdivide, cubicSubdivide, quadraticAt, cubicAt, quadraticDerivativeAt, cubicDerivativeAt } from '../../core/curve.js';
var out = [];
var BezierCurveShape = (function () {
function BezierCurveShape() {
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = 0;
this.cpx1 = 0;
this.cpy1 = 0;
this.percent = 1;
}
return BezierCurveShape;
}());
export { BezierCurveShape };
function someVectorAt(shape, t, isTangent) {
var cpx2 = shape.cpx2;
var cpy2 = shape.cpy2;
if (cpx2 != null || cpy2 != null) {
return [
(isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t),
(isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t)
];
}
else {
return [
(isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t),
(isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t)
];
}
}
var BezierCurve = (function (_super) {
__extends(BezierCurve, _super);
function BezierCurve(opts) {
return _super.call(this, opts) || this;
}
BezierCurve.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
BezierCurve.prototype.getDefaultShape = function () {
return new BezierCurveShape();
};
BezierCurve.prototype.buildPath = function (ctx, shape) {
var x1 = shape.x1;
var y1 = shape.y1;
var x2 = shape.x2;
var y2 = shape.y2;
var cpx1 = shape.cpx1;
var cpy1 = shape.cpy1;
var cpx2 = shape.cpx2;
var cpy2 = shape.cpy2;
var percent = shape.percent;
if (percent === 0) {
return;
}
ctx.moveTo(x1, y1);
if (cpx2 == null || cpy2 == null) {
if (percent < 1) {
quadraticSubdivide(x1, cpx1, x2, percent, out);
cpx1 = out[1];
x2 = out[2];
quadraticSubdivide(y1, cpy1, y2, percent, out);
cpy1 = out[1];
y2 = out[2];
}
ctx.quadraticCurveTo(cpx1, cpy1, x2, y2);
}
else {
if (percent < 1) {
cubicSubdivide(x1, cpx1, cpx2, x2, percent, out);
cpx1 = out[1];
cpx2 = out[2];
x2 = out[3];
cubicSubdivide(y1, cpy1, cpy2, y2, percent, out);
cpy1 = out[1];
cpy2 = out[2];
y2 = out[3];
}
ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
}
};
BezierCurve.prototype.pointAt = function (t) {
return someVectorAt(this.shape, t, false);
};
BezierCurve.prototype.tangentAt = function (t) {
var p = someVectorAt(this.shape, t, true);
return vec2.normalize(p, p);
};
return BezierCurve;
}(Path));
;
BezierCurve.prototype.type = 'bezier-curve';
export default BezierCurve;

View File

@ -0,0 +1,16 @@
import Path, { PathProps } from '../Path';
export declare class CircleShape {
cx: number;
cy: number;
r: number;
}
export interface CircleProps extends PathProps {
shape?: Partial<CircleShape>;
}
declare class Circle extends Path<CircleProps> {
shape: CircleShape;
constructor(opts?: CircleProps);
getDefaultShape(): CircleShape;
buildPath(ctx: CanvasRenderingContext2D, shape: CircleShape): void;
}
export default Circle;

View File

@ -0,0 +1,28 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var CircleShape = (function () {
function CircleShape() {
this.cx = 0;
this.cy = 0;
this.r = 0;
}
return CircleShape;
}());
export { CircleShape };
var Circle = (function (_super) {
__extends(Circle, _super);
function Circle(opts) {
return _super.call(this, opts) || this;
}
Circle.prototype.getDefaultShape = function () {
return new CircleShape();
};
Circle.prototype.buildPath = function (ctx, shape) {
ctx.moveTo(shape.cx + shape.r, shape.cy);
ctx.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2);
};
return Circle;
}(Path));
;
Circle.prototype.type = 'circle';
export default Circle;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
export declare class DropletShape {
cx: number;
cy: number;
width: number;
height: number;
}
export interface DropletProps extends PathProps {
shape?: Partial<DropletShape>;
}
declare class Droplet extends Path<DropletProps> {
shape: DropletShape;
constructor(opts?: DropletProps);
getDefaultShape(): DropletShape;
buildPath(ctx: CanvasRenderingContext2D, shape: DropletShape): void;
}
export default Droplet;

View File

@ -0,0 +1,34 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var DropletShape = (function () {
function DropletShape() {
this.cx = 0;
this.cy = 0;
this.width = 0;
this.height = 0;
}
return DropletShape;
}());
export { DropletShape };
var Droplet = (function (_super) {
__extends(Droplet, _super);
function Droplet(opts) {
return _super.call(this, opts) || this;
}
Droplet.prototype.getDefaultShape = function () {
return new DropletShape();
};
Droplet.prototype.buildPath = function (ctx, shape) {
var x = shape.cx;
var y = shape.cy;
var a = shape.width;
var b = shape.height;
ctx.moveTo(x, y + a);
ctx.bezierCurveTo(x + a, y + a, x + a * 3 / 2, y - a / 3, x, y - b);
ctx.bezierCurveTo(x - a * 3 / 2, y - a / 3, x - a, y + a, x, y + a);
ctx.closePath();
};
return Droplet;
}(Path));
Droplet.prototype.type = 'droplet';
export default Droplet;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
export declare class EllipseShape {
cx: number;
cy: number;
rx: number;
ry: number;
}
export interface EllipseProps extends PathProps {
shape?: Partial<EllipseShape>;
}
declare class Ellipse extends Path<EllipseProps> {
shape: EllipseShape;
constructor(opts?: EllipseProps);
getDefaultShape(): EllipseShape;
buildPath(ctx: CanvasRenderingContext2D, shape: EllipseShape): void;
}
export default Ellipse;

View File

@ -0,0 +1,39 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var EllipseShape = (function () {
function EllipseShape() {
this.cx = 0;
this.cy = 0;
this.rx = 0;
this.ry = 0;
}
return EllipseShape;
}());
export { EllipseShape };
var Ellipse = (function (_super) {
__extends(Ellipse, _super);
function Ellipse(opts) {
return _super.call(this, opts) || this;
}
Ellipse.prototype.getDefaultShape = function () {
return new EllipseShape();
};
Ellipse.prototype.buildPath = function (ctx, shape) {
var k = 0.5522848;
var x = shape.cx;
var y = shape.cy;
var a = shape.rx;
var b = shape.ry;
var ox = a * k;
var oy = b * k;
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
};
return Ellipse;
}(Path));
Ellipse.prototype.type = 'ellipse';
export default Ellipse;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
export declare class HeartShape {
cx: number;
cy: number;
width: number;
height: number;
}
export interface HeartProps extends PathProps {
shape?: Partial<HeartShape>;
}
declare class Heart extends Path<HeartProps> {
shape: HeartShape;
constructor(opts?: HeartProps);
getDefaultShape(): HeartShape;
buildPath(ctx: CanvasRenderingContext2D, shape: HeartShape): void;
}
export default Heart;

View File

@ -0,0 +1,33 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var HeartShape = (function () {
function HeartShape() {
this.cx = 0;
this.cy = 0;
this.width = 0;
this.height = 0;
}
return HeartShape;
}());
export { HeartShape };
var Heart = (function (_super) {
__extends(Heart, _super);
function Heart(opts) {
return _super.call(this, opts) || this;
}
Heart.prototype.getDefaultShape = function () {
return new HeartShape();
};
Heart.prototype.buildPath = function (ctx, shape) {
var x = shape.cx;
var y = shape.cy;
var a = shape.width;
var b = shape.height;
ctx.moveTo(x, y);
ctx.bezierCurveTo(x + a / 2, y - b * 2 / 3, x + a * 2, y + b / 3, x, y + b);
ctx.bezierCurveTo(x - a * 2, y + b / 3, x - a / 2, y - b * 2 / 3, x, y);
};
return Heart;
}(Path));
Heart.prototype.type = 'heart';
export default Heart;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
export declare class IsogonShape {
x: number;
y: number;
r: number;
n: number;
}
export interface IsogonProps extends PathProps {
shape?: Partial<IsogonShape>;
}
declare class Isogon extends Path<IsogonProps> {
shape: IsogonShape;
constructor(opts?: IsogonProps);
getDefaultShape(): IsogonShape;
buildPath(ctx: CanvasRenderingContext2D, shape: IsogonShape): void;
}
export default Isogon;

View File

@ -0,0 +1,45 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var PI = Math.PI;
var sin = Math.sin;
var cos = Math.cos;
var IsogonShape = (function () {
function IsogonShape() {
this.x = 0;
this.y = 0;
this.r = 0;
this.n = 0;
}
return IsogonShape;
}());
export { IsogonShape };
var Isogon = (function (_super) {
__extends(Isogon, _super);
function Isogon(opts) {
return _super.call(this, opts) || this;
}
Isogon.prototype.getDefaultShape = function () {
return new IsogonShape();
};
Isogon.prototype.buildPath = function (ctx, shape) {
var n = shape.n;
if (!n || n < 2) {
return;
}
var x = shape.x;
var y = shape.y;
var r = shape.r;
var dStep = 2 * PI / n;
var deg = -PI / 2;
ctx.moveTo(x + r * cos(deg), y + r * sin(deg));
for (var i = 0, end = n - 1; i < end; i++) {
deg += dStep;
ctx.lineTo(x + r * cos(deg), y + r * sin(deg));
}
ctx.closePath();
return;
};
return Isogon;
}(Path));
Isogon.prototype.type = 'isogon';
export default Isogon;

View File

@ -0,0 +1,24 @@
import Path, { PathProps } from '../Path';
import { VectorArray } from '../../core/vector';
export declare class LineShape {
x1: number;
y1: number;
x2: number;
y2: number;
percent: number;
}
export interface LineProps extends PathProps {
shape?: Partial<LineShape>;
}
declare class Line extends Path<LineProps> {
shape: LineShape;
constructor(opts?: LineProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): LineShape;
buildPath(ctx: CanvasRenderingContext2D, shape: LineShape): void;
pointAt(p: number): VectorArray;
}
export default Line;

View File

@ -0,0 +1,69 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import { subPixelOptimizeLine } from '../helper/subPixelOptimize.js';
var subPixelOptimizeOutputShape = {};
var LineShape = (function () {
function LineShape() {
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = 0;
this.percent = 1;
}
return LineShape;
}());
export { LineShape };
var Line = (function (_super) {
__extends(Line, _super);
function Line(opts) {
return _super.call(this, opts) || this;
}
Line.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
Line.prototype.getDefaultShape = function () {
return new LineShape();
};
Line.prototype.buildPath = function (ctx, shape) {
var x1;
var y1;
var x2;
var y2;
if (this.subPixelOptimize) {
var optimizedShape = subPixelOptimizeLine(subPixelOptimizeOutputShape, shape, this.style);
x1 = optimizedShape.x1;
y1 = optimizedShape.y1;
x2 = optimizedShape.x2;
y2 = optimizedShape.y2;
}
else {
x1 = shape.x1;
y1 = shape.y1;
x2 = shape.x2;
y2 = shape.y2;
}
var percent = shape.percent;
if (percent === 0) {
return;
}
ctx.moveTo(x1, y1);
if (percent < 1) {
x2 = x1 * (1 - percent) + x2 * percent;
y2 = y1 * (1 - percent) + y2 * percent;
}
ctx.lineTo(x2, y2);
};
Line.prototype.pointAt = function (p) {
var shape = this.shape;
return [
shape.x1 * (1 - p) + shape.x2 * p,
shape.y1 * (1 - p) + shape.y2 * p
];
};
return Line;
}(Path));
Line.prototype.type = 'line';
export default Line;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
import { VectorArray } from '../../core/vector';
export declare class PolygonShape {
points: VectorArray[];
smooth?: number;
smoothConstraint?: VectorArray[];
}
export interface PolygonProps extends PathProps {
shape?: Partial<PolygonShape>;
}
declare class Polygon extends Path<PolygonProps> {
shape: PolygonShape;
constructor(opts?: PolygonProps);
getDefaultShape(): PolygonShape;
buildPath(ctx: CanvasRenderingContext2D, shape: PolygonShape): void;
}
export default Polygon;

View File

@ -0,0 +1,28 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import * as polyHelper from '../helper/poly.js';
var PolygonShape = (function () {
function PolygonShape() {
this.points = null;
this.smooth = 0;
this.smoothConstraint = null;
}
return PolygonShape;
}());
export { PolygonShape };
var Polygon = (function (_super) {
__extends(Polygon, _super);
function Polygon(opts) {
return _super.call(this, opts) || this;
}
Polygon.prototype.getDefaultShape = function () {
return new PolygonShape();
};
Polygon.prototype.buildPath = function (ctx, shape) {
polyHelper.buildPath(ctx, shape, true);
};
return Polygon;
}(Path));
;
Polygon.prototype.type = 'polygon';
export default Polygon;

View File

@ -0,0 +1,22 @@
import Path, { PathProps } from '../Path';
import { VectorArray } from '../../core/vector';
export declare class PolylineShape {
points: VectorArray[];
percent?: number;
smooth?: number;
smoothConstraint?: VectorArray[];
}
export interface PolylineProps extends PathProps {
shape?: Partial<PolylineShape>;
}
declare class Polyline extends Path<PolylineProps> {
shape: PolylineShape;
constructor(opts?: PolylineProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): PolylineShape;
buildPath(ctx: CanvasRenderingContext2D, shape: PolylineShape): void;
}
export default Polyline;

View File

@ -0,0 +1,34 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import * as polyHelper from '../helper/poly.js';
var PolylineShape = (function () {
function PolylineShape() {
this.points = null;
this.percent = 1;
this.smooth = 0;
this.smoothConstraint = null;
}
return PolylineShape;
}());
export { PolylineShape };
var Polyline = (function (_super) {
__extends(Polyline, _super);
function Polyline(opts) {
return _super.call(this, opts) || this;
}
Polyline.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
Polyline.prototype.getDefaultShape = function () {
return new PolylineShape();
};
Polyline.prototype.buildPath = function (ctx, shape) {
polyHelper.buildPath(ctx, shape, false);
};
return Polyline;
}(Path));
Polyline.prototype.type = 'polyline';
export default Polyline;

View File

@ -0,0 +1,19 @@
import Path, { PathProps } from '../Path';
export declare class RectShape {
r?: number | number[];
x: number;
y: number;
width: number;
height: number;
}
export interface RectProps extends PathProps {
shape?: Partial<RectShape>;
}
declare class Rect extends Path<RectProps> {
shape: RectShape;
constructor(opts?: RectProps);
getDefaultShape(): RectShape;
buildPath(ctx: CanvasRenderingContext2D, shape: RectShape): void;
isZeroArea(): boolean;
}
export default Rect;

View File

@ -0,0 +1,57 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import * as roundRectHelper from '../helper/roundRect.js';
import { subPixelOptimizeRect } from '../helper/subPixelOptimize.js';
var RectShape = (function () {
function RectShape() {
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
}
return RectShape;
}());
export { RectShape };
var subPixelOptimizeOutputShape = {};
var Rect = (function (_super) {
__extends(Rect, _super);
function Rect(opts) {
return _super.call(this, opts) || this;
}
Rect.prototype.getDefaultShape = function () {
return new RectShape();
};
Rect.prototype.buildPath = function (ctx, shape) {
var x;
var y;
var width;
var height;
if (this.subPixelOptimize) {
var optimizedShape = subPixelOptimizeRect(subPixelOptimizeOutputShape, shape, this.style);
x = optimizedShape.x;
y = optimizedShape.y;
width = optimizedShape.width;
height = optimizedShape.height;
optimizedShape.r = shape.r;
shape = optimizedShape;
}
else {
x = shape.x;
y = shape.y;
width = shape.width;
height = shape.height;
}
if (!shape.r) {
ctx.rect(x, y, width, height);
}
else {
roundRectHelper.buildPath(ctx, shape);
}
};
Rect.prototype.isZeroArea = function () {
return !this.shape.width || !this.shape.height;
};
return Rect;
}(Path));
Rect.prototype.type = 'rect';
export default Rect;

View File

@ -0,0 +1,17 @@
import Path, { PathProps } from '../Path';
export declare class RingShape {
cx: number;
cy: number;
r: number;
r0: number;
}
export interface RingProps extends PathProps {
shape?: Partial<RingShape>;
}
declare class Ring extends Path<RingProps> {
shape: RingShape;
constructor(opts?: RingProps);
getDefaultShape(): RingShape;
buildPath(ctx: CanvasRenderingContext2D, shape: RingShape): void;
}
export default Ring;

View File

@ -0,0 +1,33 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var RingShape = (function () {
function RingShape() {
this.cx = 0;
this.cy = 0;
this.r = 0;
this.r0 = 0;
}
return RingShape;
}());
export { RingShape };
var Ring = (function (_super) {
__extends(Ring, _super);
function Ring(opts) {
return _super.call(this, opts) || this;
}
Ring.prototype.getDefaultShape = function () {
return new RingShape();
};
Ring.prototype.buildPath = function (ctx, shape) {
var x = shape.cx;
var y = shape.cy;
var PI2 = Math.PI * 2;
ctx.moveTo(x + shape.r, y);
ctx.arc(x, y, shape.r, 0, PI2, false);
ctx.moveTo(x + shape.r0, y);
ctx.arc(x, y, shape.r0, 0, PI2, true);
};
return Ring;
}(Path));
Ring.prototype.type = 'ring';
export default Ring;

View File

@ -0,0 +1,22 @@
import Path, { PathProps } from '../Path';
export declare class RoseShape {
cx: number;
cy: number;
r: number[];
k: number;
n: number;
}
export interface RoseProps extends PathProps {
shape?: Partial<RoseShape>;
}
declare class Rose extends Path<RoseProps> {
shape: RoseShape;
constructor(opts?: RoseProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): RoseShape;
buildPath(ctx: CanvasRenderingContext2D, shape: RoseShape): void;
}
export default Rose;

View File

@ -0,0 +1,59 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var sin = Math.sin;
var cos = Math.cos;
var radian = Math.PI / 180;
var RoseShape = (function () {
function RoseShape() {
this.cx = 0;
this.cy = 0;
this.r = [];
this.k = 0;
this.n = 1;
}
return RoseShape;
}());
export { RoseShape };
var Rose = (function (_super) {
__extends(Rose, _super);
function Rose(opts) {
return _super.call(this, opts) || this;
}
Rose.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
Rose.prototype.getDefaultShape = function () {
return new RoseShape();
};
Rose.prototype.buildPath = function (ctx, shape) {
var R = shape.r;
var k = shape.k;
var n = shape.n;
var x0 = shape.cx;
var y0 = shape.cy;
var x;
var y;
var r;
ctx.moveTo(x0, y0);
for (var i = 0, len = R.length; i < len; i++) {
r = R[i];
for (var j = 0; j <= 360 * n; j++) {
x = r
* sin(k / n * j % 360 * radian)
* cos(j * radian)
+ x0;
y = r
* sin(k / n * j % 360 * radian)
* sin(j * radian)
+ y0;
ctx.lineTo(x, y);
}
}
};
return Rose;
}(Path));
Rose.prototype.type = 'rose';
export default Rose;

View File

@ -0,0 +1,22 @@
import Path, { PathProps } from '../Path';
export declare class SectorShape {
cx: number;
cy: number;
r0: number;
r: number;
startAngle: number;
endAngle: number;
clockwise: boolean;
cornerRadius: number | number[];
}
export interface SectorProps extends PathProps {
shape?: Partial<SectorShape>;
}
declare class Sector extends Path<SectorProps> {
shape: SectorShape;
constructor(opts?: SectorProps);
getDefaultShape(): SectorShape;
buildPath(ctx: CanvasRenderingContext2D, shape: SectorShape): void;
isZeroArea(): boolean;
}
export default Sector;

View File

@ -0,0 +1,36 @@
import { __extends } from "tslib";
import Path from '../Path.js';
import * as roundSectorHelper from '../helper/roundSector.js';
var SectorShape = (function () {
function SectorShape() {
this.cx = 0;
this.cy = 0;
this.r0 = 0;
this.r = 0;
this.startAngle = 0;
this.endAngle = Math.PI * 2;
this.clockwise = true;
this.cornerRadius = 0;
}
return SectorShape;
}());
export { SectorShape };
var Sector = (function (_super) {
__extends(Sector, _super);
function Sector(opts) {
return _super.call(this, opts) || this;
}
Sector.prototype.getDefaultShape = function () {
return new SectorShape();
};
Sector.prototype.buildPath = function (ctx, shape) {
roundSectorHelper.buildPath(ctx, shape);
};
Sector.prototype.isZeroArea = function () {
return this.shape.startAngle === this.shape.endAngle
|| this.shape.r === this.shape.r0;
};
return Sector;
}(Path));
Sector.prototype.type = 'sector';
export default Sector;

View File

@ -0,0 +1,18 @@
import Path, { PathProps } from '../Path';
export declare class StarShape {
cx: number;
cy: number;
n: number;
r0: number;
r: number;
}
export interface StarProps extends PathProps {
shape?: Partial<StarShape>;
}
declare class Star extends Path<StarProps> {
shape: StarShape;
constructor(opts?: StarProps);
getDefaultShape(): StarShape;
buildPath(ctx: CanvasRenderingContext2D, shape: StarShape): void;
}
export default Star;

View File

@ -0,0 +1,54 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var PI = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var StarShape = (function () {
function StarShape() {
this.cx = 0;
this.cy = 0;
this.n = 3;
this.r = 0;
}
return StarShape;
}());
export { StarShape };
var Star = (function (_super) {
__extends(Star, _super);
function Star(opts) {
return _super.call(this, opts) || this;
}
Star.prototype.getDefaultShape = function () {
return new StarShape();
};
Star.prototype.buildPath = function (ctx, shape) {
var n = shape.n;
if (!n || n < 2) {
return;
}
var x = shape.cx;
var y = shape.cy;
var r = shape.r;
var r0 = shape.r0;
if (r0 == null) {
r0 = n > 4
? r * cos(2 * PI / n) / cos(PI / n)
: r / 3;
}
var dStep = PI / n;
var deg = -PI / 2;
var xStart = x + r * cos(deg);
var yStart = y + r * sin(deg);
deg += dStep;
ctx.moveTo(xStart, yStart);
for (var i = 0, end = n * 2 - 1, ri = void 0; i < end; i++) {
ri = i % 2 === 0 ? r0 : r;
ctx.lineTo(x + ri * cos(deg), y + ri * sin(deg));
deg += dStep;
}
ctx.closePath();
};
return Star;
}(Path));
Star.prototype.type = 'star';
export default Star;

View File

@ -0,0 +1,23 @@
import Path, { PathProps } from '../Path';
export declare class TrochoidShape {
cx: number;
cy: number;
r: number;
r0: number;
d: number;
location: string;
}
export interface TrochoidProps extends PathProps {
shape?: Partial<TrochoidShape>;
}
declare class Trochoid extends Path<TrochoidProps> {
shape: TrochoidShape;
constructor(opts?: TrochoidProps);
getDefaultStyle(): {
stroke: string;
fill: string;
};
getDefaultShape(): TrochoidShape;
buildPath(ctx: CanvasRenderingContext2D, shape: TrochoidShape): void;
}
export default Trochoid;

View File

@ -0,0 +1,71 @@
import { __extends } from "tslib";
import Path from '../Path.js';
var cos = Math.cos;
var sin = Math.sin;
var TrochoidShape = (function () {
function TrochoidShape() {
this.cx = 0;
this.cy = 0;
this.r = 0;
this.r0 = 0;
this.d = 0;
this.location = 'out';
}
return TrochoidShape;
}());
export { TrochoidShape };
var Trochoid = (function (_super) {
__extends(Trochoid, _super);
function Trochoid(opts) {
return _super.call(this, opts) || this;
}
Trochoid.prototype.getDefaultStyle = function () {
return {
stroke: '#000',
fill: null
};
};
Trochoid.prototype.getDefaultShape = function () {
return new TrochoidShape();
};
Trochoid.prototype.buildPath = function (ctx, shape) {
var R = shape.r;
var r = shape.r0;
var d = shape.d;
var offsetX = shape.cx;
var offsetY = shape.cy;
var delta = shape.location === 'out' ? 1 : -1;
var x1;
var y1;
var x2;
var y2;
if (shape.location && R <= r) {
return;
}
var num = 0;
var i = 1;
var theta;
x1 = (R + delta * r) * cos(0)
- delta * d * cos(0) + offsetX;
y1 = (R + delta * r) * sin(0)
- d * sin(0) + offsetY;
ctx.moveTo(x1, y1);
do {
num++;
} while ((r * num) % (R + delta * r) !== 0);
do {
theta = Math.PI / 180 * i;
x2 = (R + delta * r) * cos(theta)
- delta * d * cos((R / r + delta) * theta)
+ offsetX;
y2 = (R + delta * r) * sin(theta)
- d * sin((R / r + delta) * theta)
+ offsetY;
ctx.lineTo(x2, y2);
i++;
} while (i <= (r * num) / (R + delta * r) * 360);
};
return Trochoid;
}(Path));
Trochoid.prototype.type = 'trochoid';
export default Trochoid;