@visactor/vrender-components 0.19.21 → 0.19.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +2 -1
- package/cjs/index.js +5 -4
- package/cjs/index.js.map +1 -1
- package/cjs/indicator/indicator.d.ts +3 -1
- package/cjs/indicator/indicator.js +19 -41
- package/cjs/indicator/indicator.js.map +1 -1
- package/cjs/indicator/type.d.ts +1 -0
- package/cjs/indicator/type.js.map +1 -1
- package/cjs/timeline/index.d.ts +2 -0
- package/cjs/timeline/index.js +21 -0
- package/cjs/timeline/index.js.map +1 -0
- package/cjs/timeline/register.d.ts +1 -0
- package/cjs/timeline/register.js +15 -0
- package/cjs/timeline/register.js.map +1 -0
- package/cjs/timeline/timeline.d.ts +30 -0
- package/cjs/timeline/timeline.js +178 -0
- package/cjs/timeline/timeline.js.map +1 -0
- package/cjs/timeline/type.d.ts +18 -0
- package/cjs/timeline/type.js +6 -0
- package/cjs/timeline/type.js.map +1 -0
- package/dist/index.es.js +381 -172
- package/es/index.d.ts +2 -1
- package/es/index.js +3 -1
- package/es/index.js.map +1 -1
- package/es/indicator/indicator.d.ts +3 -1
- package/es/indicator/indicator.js +19 -40
- package/es/indicator/indicator.js.map +1 -1
- package/es/indicator/type.d.ts +1 -0
- package/es/indicator/type.js.map +1 -1
- package/es/timeline/index.d.ts +2 -0
- package/es/timeline/index.js +4 -0
- package/es/timeline/index.js.map +1 -0
- package/es/timeline/register.d.ts +1 -0
- package/es/timeline/register.js +6 -0
- package/es/timeline/register.js.map +1 -0
- package/es/timeline/timeline.d.ts +30 -0
- package/es/timeline/timeline.js +175 -0
- package/es/timeline/timeline.js.map +1 -0
- package/es/timeline/type.d.ts +18 -0
- package/es/timeline/type.js +2 -0
- package/es/timeline/type.js.map +1 -0
- package/package.json +3 -3
package/es/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const version = "0.19.
|
|
1
|
+
export declare const version = "0.19.22";
|
|
2
2
|
export * from './core/base';
|
|
3
3
|
export * from './core/type';
|
|
4
4
|
export * from './scrollbar';
|
|
@@ -20,6 +20,7 @@ export * from './link-path';
|
|
|
20
20
|
export * from './player';
|
|
21
21
|
export * from './brush';
|
|
22
22
|
export * from './tooltip';
|
|
23
|
+
export * from './timeline';
|
|
23
24
|
export * from './interface';
|
|
24
25
|
export * from './jsx';
|
|
25
26
|
export * from './checkbox';
|
package/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const version = "0.19.
|
|
1
|
+
export const version = "0.19.22";
|
|
2
2
|
|
|
3
3
|
export * from "./core/base";
|
|
4
4
|
|
|
@@ -42,6 +42,8 @@ export * from "./brush";
|
|
|
42
42
|
|
|
43
43
|
export * from "./tooltip";
|
|
44
44
|
|
|
45
|
+
export * from "./timeline";
|
|
46
|
+
|
|
45
47
|
export * from "./interface";
|
|
46
48
|
|
|
47
49
|
export * from "./jsx";
|
package/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC;AAEjC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.19.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,CAAC;AAEjC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["// 导出版本号\nexport const version = \"0.19.22\";\n\nexport * from './core/base';\nexport * from './core/type';\nexport * from './scrollbar';\nexport * from './tag';\nexport * from './poptip';\nexport * from './crosshair';\nexport * from './label';\nexport * from './axis';\nexport * from './axis/grid';\nexport * from './segment';\nexport * from './data-zoom';\nexport * from './marker';\nexport * from './pager';\nexport * from './legend';\nexport * from './title';\nexport * from './indicator';\nexport * from './slider';\nexport * from './link-path';\nexport * from './player';\nexport * from './brush';\nexport * from './tooltip';\nexport * from './timeline';\nexport * from './interface';\nexport * from './jsx';\nexport * from './checkbox';\nexport * from './radio';\nexport * from './empty-tip';\nexport * from './util';\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import type { IGroup, IRichText, IText } from '@visactor/vrender-core';
|
|
1
2
|
import { AbstractComponent } from '../core/base';
|
|
2
|
-
import type { IndicatorAttributes } from './type';
|
|
3
|
+
import type { IndicatorAttributes, IndicatorItemSpec } from './type';
|
|
3
4
|
export declare class Indicator extends AbstractComponent<Required<IndicatorAttributes>> {
|
|
4
5
|
name: string;
|
|
5
6
|
private _title?;
|
|
6
7
|
private _content?;
|
|
8
|
+
protected _renderText(group: IGroup, title: IndicatorItemSpec, limit: number, limitRatio: number, themePath: string, graphicName: string): IRichText | IText;
|
|
7
9
|
protected render(): void;
|
|
8
10
|
private _setLocalAutoFit;
|
|
9
11
|
private _setGlobalAutoFit;
|
|
@@ -2,7 +2,7 @@ import { merge, isValid, array, isValidNumber, get } from "@visactor/vutils";
|
|
|
2
2
|
|
|
3
3
|
import { AbstractComponent } from "../core/base";
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { createTextGraphicByType, measureTextSize } from "../util";
|
|
6
6
|
|
|
7
7
|
import { DEFAULT_INDICATOR_THEME } from "./config";
|
|
8
8
|
|
|
@@ -14,53 +14,32 @@ export class Indicator extends AbstractComponent {
|
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments), this.name = "indicator";
|
|
16
16
|
}
|
|
17
|
+
_renderText(group, title, limit, limitRatio, themePath, graphicName) {
|
|
18
|
+
if (!1 !== title.visible) {
|
|
19
|
+
const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, themePath), title.style, {
|
|
20
|
+
visible: title.visible
|
|
21
|
+
});
|
|
22
|
+
titleStyle.lineHeight = isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,
|
|
23
|
+
title.formatMethod && (titleStyle._originText = titleStyle.text, titleStyle.text = title.formatMethod(titleStyle.text, titleStyle));
|
|
24
|
+
const textGraphic = createTextGraphicByType(titleStyle);
|
|
25
|
+
return textGraphic.name = graphicName, group.appendChild(textGraphic), title.autoFit && isValidNumber(limit) && this._setLocalAutoFit(limit, textGraphic, title),
|
|
26
|
+
title.autoLimit && isValidNumber(limitRatio) && textGraphic.setAttribute("maxLineWidth", limit),
|
|
27
|
+
textGraphic;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
17
30
|
render() {
|
|
18
31
|
var _a;
|
|
19
|
-
|
|
32
|
+
if (this.removeAllChild(!0), !0 !== this.attribute.visible) return;
|
|
33
|
+
const {title: title = {}, content: content, size: size, limitRatio: limitRatio = 1 / 0} = this.attribute, limit = Math.min(size.width, size.height) * limitRatio, group = this.createOrUpdateChild("indicator-container", {
|
|
20
34
|
x: 0,
|
|
21
35
|
y: 0,
|
|
22
36
|
zIndex: 1
|
|
23
37
|
}, "group");
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
-
const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, "title.style"), title.style);
|
|
27
|
-
isRichText(titleStyle) ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({}, richTextAttributeTransform(titleStyle)), {
|
|
28
|
-
visible: title.visible,
|
|
29
|
-
x: 0,
|
|
30
|
-
y: 0
|
|
31
|
-
}), "richtext") : this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({}, titleStyle), {
|
|
32
|
-
lineHeight: isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,
|
|
33
|
-
visible: title.visible,
|
|
34
|
-
x: 0,
|
|
35
|
-
y: 0
|
|
36
|
-
}), "text"), title.autoFit && isValidNumber(limit) && this._setLocalAutoFit(limit, this._title, title),
|
|
37
|
-
title.autoLimit && isValidNumber(limitRatio) && this._title.setAttribute("maxLineWidth", limit);
|
|
38
|
-
} else {
|
|
39
|
-
const titleNode = group.find((node => "indicator-title" === node.name), !1);
|
|
40
|
-
titleNode && group.removeChild(titleNode), this._title = void 0;
|
|
41
|
-
}
|
|
42
|
-
if (isValid(content)) {
|
|
38
|
+
if (isValid(title) && (this._title = this._renderText(group, title, limit, limitRatio, "title.style", "indicator-title")),
|
|
39
|
+
isValid(content)) {
|
|
43
40
|
const contents = array(content), contentComponents = [];
|
|
44
41
|
contents.forEach(((contentItem, i) => {
|
|
45
|
-
|
|
46
|
-
const contentStyle = merge({}, get(DEFAULT_INDICATOR_THEME, "content.style"), contentItem.style);
|
|
47
|
-
let contentComponent;
|
|
48
|
-
contentComponent = isRichText(contentStyle) ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({}, richTextAttributeTransform(contentStyle)), {
|
|
49
|
-
visible: title.visible,
|
|
50
|
-
x: 0,
|
|
51
|
-
y: 0
|
|
52
|
-
}), "richtext") : group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({}, contentStyle), {
|
|
53
|
-
lineHeight: isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,
|
|
54
|
-
visible: contentItem.visible,
|
|
55
|
-
x: 0,
|
|
56
|
-
y: 0
|
|
57
|
-
}), "text"), contentItem.autoFit && isValidNumber(limit) && this._setLocalAutoFit(limit, contentComponent, contentItem),
|
|
58
|
-
contentItem.autoLimit && isValidNumber(limitRatio) && contentComponent.setAttribute("maxLineWidth", limit),
|
|
59
|
-
contentComponents.push(contentComponent);
|
|
60
|
-
} else {
|
|
61
|
-
const contentItemNode = group.find((node => node.name === "indicator-content-" + i), !1);
|
|
62
|
-
contentItemNode && group.removeChild(contentItemNode);
|
|
63
|
-
}
|
|
42
|
+
!1 !== contentItem.visible && contentComponents.push(this._renderText(group, contentItem, limit, limitRatio, "content.style", "indicator-content-" + i));
|
|
64
43
|
})), this._content = contentComponents;
|
|
65
44
|
}
|
|
66
45
|
this._setGlobalAutoFit(limit), this._setYPosition();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/indicator/indicator.ts"],"names":[],"mappings":"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","file":"indicator.js","sourcesContent":["/**\n * @description 指标卡组件\n */\nimport type { IGroup, INode, IText, ITextGraphicAttribute } from '@visactor/vrender-core';\nimport { merge, isValid, array, isValidNumber, get } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { isRichText, measureTextSize, richTextAttributeTransform } from '../util';\nimport type { IndicatorAttributes, IndicatorItemSpec } from './type';\nimport { DEFAULT_INDICATOR_THEME } from './config';\nimport { loadIndicatorComponent } from './register';\n\nloadIndicatorComponent();\nexport class Indicator extends AbstractComponent<Required<IndicatorAttributes>> {\n name = 'indicator';\n\n private _title?: IText;\n private _content?: IText | IText[];\n\n protected render() {\n const { visible, title = {}, content, size, limitRatio = Infinity } = this.attribute as IndicatorAttributes;\n\n const limit = Math.min(size.width, size.height) * limitRatio;\n\n const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group') as IGroup;\n\n // 指标卡全部隐藏\n if (visible !== true) {\n group && group.hideAll();\n return;\n }\n\n if (isValid(title)) {\n if (title.visible !== false) {\n const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, 'title.style'), title.style);\n if (isRichText(titleStyle)) {\n this._title = group.createOrUpdateChild(\n 'indicator-title',\n {\n ...richTextAttributeTransform(titleStyle),\n visible: title.visible,\n x: 0,\n y: 0\n },\n 'richtext'\n ) as IText;\n } else {\n this._title = group.createOrUpdateChild(\n 'indicator-title',\n {\n ...titleStyle,\n /**\n * 加入以下逻辑:如果没有声明lineHeight,默认 lineHeight 等于 fontSize\n * 因为如果不声明 vrender 底层会默认给文本加上 2px 的高度,会影响布局计算\n * 注意:在autoFit改变fontsize时,lineHeight也要同步修改\n */\n lineHeight: isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,\n visible: title.visible,\n x: 0,\n y: 0\n },\n 'text'\n ) as IText;\n }\n\n // auto-fit\n if (title.autoFit && isValidNumber(limit)) {\n this._setLocalAutoFit(limit, this._title, title);\n }\n\n //auto-limit\n if (title.autoLimit && isValidNumber(limitRatio)) {\n this._title.setAttribute('maxLineWidth', limit);\n }\n } else {\n /**\n * indicator部分隐藏\n * 例如title隐藏了,content还保留。直接设置visible:false 计算group.AABBounts是错的,影响上下居中。\n * 这里把隐藏的nodes删除后,group.AABBounts计算才正确。\n */\n const titleNode = group.find(node => node.name === 'indicator-title', false);\n titleNode && group.removeChild(titleNode as INode);\n this._title = undefined;\n }\n }\n\n if (isValid(content)) {\n const contents: IndicatorItemSpec[] = array(content);\n const contentComponents: IText[] = [];\n contents.forEach((contentItem, i) => {\n if (contentItem.visible !== false) {\n const contentStyle = merge({}, get(DEFAULT_INDICATOR_THEME, 'content.style'), contentItem.style);\n let contentComponent;\n if (isRichText(contentStyle)) {\n contentComponent = group.createOrUpdateChild(\n 'indicator-content-' + i,\n {\n ...richTextAttributeTransform(contentStyle),\n visible: title.visible,\n x: 0,\n y: 0\n },\n 'richtext'\n ) as IText;\n } else {\n contentComponent = group.createOrUpdateChild(\n 'indicator-content-' + i,\n {\n ...contentStyle,\n lineHeight: isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,\n visible: contentItem.visible,\n x: 0,\n y: 0\n },\n 'text'\n ) as IText;\n }\n\n // auto-fit\n if (contentItem.autoFit && isValidNumber(limit)) {\n this._setLocalAutoFit(limit, contentComponent, contentItem);\n }\n\n //auto-limit\n if (contentItem.autoLimit && isValidNumber(limitRatio)) {\n contentComponent.setAttribute('maxLineWidth', limit);\n }\n\n contentComponents.push(contentComponent);\n } else {\n /**\n * indicator部分隐藏\n */\n const contentItemNode = group.find(node => node.name === 'indicator-content-' + i, false);\n contentItemNode && group.removeChild(contentItemNode as INode);\n }\n });\n this._content = contentComponents;\n }\n\n this._setGlobalAutoFit(limit);\n this._setYPosition();\n\n const totalHeight = group?.AABBBounds.height() ?? 0;\n group.setAttribute('y', size.height / 2 - totalHeight / 2);\n group.setAttribute('x', size.width / 2);\n }\n\n private _setLocalAutoFit(limit: number, indicatorItem: IText, indicatorItemSpec: IndicatorItemSpec) {\n // only apply local auto fit for default auto fit text\n if ((indicatorItemSpec.fitStrategy ?? 'default') !== 'default') {\n return;\n }\n const originWidth = measureTextSize(\n (indicatorItemSpec.style?.text ?? '') as string | number | number[] | string[],\n (indicatorItemSpec.style ?? {}) as Partial<ITextGraphicAttribute>,\n this.stage?.getTheme()?.text\n ).width;\n if (originWidth > 0) {\n const ratio = (limit * (indicatorItemSpec.fitPercent ?? 0.5)) / originWidth;\n const fontSize = Math.floor((indicatorItemSpec.style?.fontSize ?? 20) * ratio);\n indicatorItem.setAttribute('fontSize', fontSize);\n indicatorItem.setAttribute(\n 'lineHeight',\n isValid(indicatorItemSpec.style.lineHeight) ? indicatorItemSpec.style.lineHeight : fontSize\n );\n }\n }\n\n private _setGlobalAutoFit(limit: number) {\n // compute the inscribed rect width & height for all texts\n // the font size will be determined by the longest text\n // 1. hx^2 + hy^2 = r^2\n // 2. hy = ra * hx + h\n // -> (ra^2 + 1) * x^2 + (2 * h * ra) * x + (h^2 - r^2) = 0\n\n const r = limit / 2;\n\n // unify the initial font size for auto fit texts\n const singleHeight = 12;\n const autoFitTexts: { text: IText; spec: IndicatorItemSpec }[] = [];\n // other text height\n let otherHeight = 0;\n // non auto fit title height\n const titleSpec = this.attribute.title ?? {};\n if (titleSpec.autoFit && titleSpec.fitStrategy === 'inscribed') {\n this._title.setAttribute('fontSize', singleHeight);\n autoFitTexts.push({ text: this._title, spec: this.attribute.title ?? {} });\n } else {\n otherHeight += this._title?.AABBBounds?.height?.() ?? 0;\n }\n const titleSpace = titleSpec.space ?? 0;\n otherHeight += titleSpace;\n // non auto fit content height\n array(this.attribute.content)\n .filter(contentSpec => contentSpec.visible !== false)\n .forEach((contentSpec, index) => {\n const contentText = this._content[index];\n if (contentSpec.autoFit && contentSpec.fitStrategy === 'inscribed') {\n contentText.setAttribute('fontSize', singleHeight);\n autoFitTexts.push({ text: contentText, spec: contentSpec });\n } else {\n otherHeight += contentText?.AABBBounds?.height?.() ?? 0;\n }\n const contentSpace = contentSpec.space ?? 0;\n otherHeight += contentSpace;\n });\n if (autoFitTexts.length <= 0) {\n return;\n }\n\n // max width for all auto fit texts\n const maxWidth = autoFitTexts.reduce((width, textItem) => {\n return Math.max(width, textItem.text.AABBBounds.width());\n }, 0);\n\n // y = x * (singleHeight / maxWidth * textCount) + otherHeight\n // hy = hx * (singleHeight / maxWidth * textCount) + otherHeight / 2\n const ra = (singleHeight / maxWidth) * autoFitTexts.length;\n const h = otherHeight / 2;\n const a = ra ** 2 + 1;\n const b = 2 * h * ra;\n const c = h ** 2 - r ** 2;\n const hx = (-b + Math.sqrt(b ** 2 - 4 * a * c)) / (2 * a);\n const hy = ra * hx + h;\n const y = 2 * hy;\n const lineHeight = (y - otherHeight) / autoFitTexts.length;\n if (isValidNumber(y)) {\n autoFitTexts.forEach(textItem => {\n const specLineHeight = textItem.spec.style?.lineHeight;\n textItem.text.setAttribute('fontSize', lineHeight);\n textItem.text.setAttribute('lineHeight', isValid(specLineHeight) ? specLineHeight : lineHeight);\n });\n }\n }\n\n private _setYPosition() {\n let lastContentHeight = 0;\n\n const titleHeight = this._title?.AABBBounds?.height?.() ?? 0;\n const titleSpace = this.attribute.title?.space ?? 0;\n array(this.attribute.content)\n .filter(contentSpec => contentSpec.visible !== false)\n .forEach((contentSpec, index) => {\n const contentText = this._content[index];\n contentText.setAttribute('y', titleHeight + titleSpace + lastContentHeight);\n const contentSpace = contentSpec.space ?? 0;\n lastContentHeight += contentText.AABBBounds.height() + contentSpace;\n });\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/indicator/indicator.ts"],"names":[],"mappings":"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","file":"indicator.js","sourcesContent":["/**\n * @description 指标卡组件\n */\nimport type { IGroup, IRichText, IText, ITextGraphicAttribute } from '@visactor/vrender-core';\nimport { merge, isValid, array, isValidNumber, get } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { createTextGraphicByType, measureTextSize } from '../util';\nimport type { IndicatorAttributes, IndicatorItemSpec } from './type';\nimport { DEFAULT_INDICATOR_THEME } from './config';\nimport { loadIndicatorComponent } from './register';\n\nloadIndicatorComponent();\nexport class Indicator extends AbstractComponent<Required<IndicatorAttributes>> {\n name = 'indicator';\n\n private _title?: IText | IRichText;\n private _content?: (IText | IRichText)[];\n\n protected _renderText(\n group: IGroup,\n title: IndicatorItemSpec,\n limit: number,\n limitRatio: number,\n themePath: string,\n graphicName: string\n ) {\n if (title.visible !== false) {\n const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, themePath), title.style, {\n visible: title.visible\n });\n titleStyle.lineHeight = isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize;\n\n if (title.formatMethod) {\n titleStyle._originText = titleStyle.text;\n titleStyle.text = title.formatMethod(titleStyle.text, titleStyle);\n }\n const textGraphic = createTextGraphicByType(titleStyle);\n textGraphic.name = graphicName;\n group.appendChild(textGraphic);\n\n // auto-fit\n if (title.autoFit && isValidNumber(limit)) {\n this._setLocalAutoFit(limit, textGraphic as IText, title);\n }\n\n //auto-limit\n if (title.autoLimit && isValidNumber(limitRatio)) {\n textGraphic.setAttribute('maxLineWidth', limit);\n }\n\n return textGraphic;\n }\n\n return undefined;\n }\n\n protected render() {\n this.removeAllChild(true);\n\n if (this.attribute.visible !== true) {\n return;\n }\n const { title = {}, content, size, limitRatio = Infinity } = this.attribute as IndicatorAttributes;\n\n const limit = Math.min(size.width, size.height) * limitRatio;\n\n const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group') as IGroup;\n\n if (isValid(title)) {\n this._title = this._renderText(group, title, limit, limitRatio, 'title.style', 'indicator-title');\n }\n\n if (isValid(content)) {\n const contents: IndicatorItemSpec[] = array(content);\n const contentComponents: (IText | IRichText)[] = [];\n contents.forEach((contentItem, i) => {\n if (contentItem.visible !== false) {\n contentComponents.push(\n this._renderText(group, contentItem, limit, limitRatio, 'content.style', 'indicator-content-' + i)\n );\n } else {\n }\n });\n this._content = contentComponents;\n }\n\n this._setGlobalAutoFit(limit);\n this._setYPosition();\n\n const totalHeight = group?.AABBBounds.height() ?? 0;\n group.setAttribute('y', size.height / 2 - totalHeight / 2);\n group.setAttribute('x', size.width / 2);\n }\n\n private _setLocalAutoFit(limit: number, indicatorItem: IText, indicatorItemSpec: IndicatorItemSpec) {\n // only apply local auto fit for default auto fit text\n if ((indicatorItemSpec.fitStrategy ?? 'default') !== 'default') {\n return;\n }\n const originWidth = measureTextSize(\n (indicatorItemSpec.style?.text ?? '') as string | number | number[] | string[],\n (indicatorItemSpec.style ?? {}) as Partial<ITextGraphicAttribute>,\n this.stage?.getTheme()?.text\n ).width;\n if (originWidth > 0) {\n const ratio = (limit * (indicatorItemSpec.fitPercent ?? 0.5)) / originWidth;\n const fontSize = Math.floor((indicatorItemSpec.style?.fontSize ?? 20) * ratio);\n indicatorItem.setAttribute('fontSize', fontSize);\n indicatorItem.setAttribute(\n 'lineHeight',\n isValid(indicatorItemSpec.style.lineHeight) ? indicatorItemSpec.style.lineHeight : fontSize\n );\n }\n }\n\n private _setGlobalAutoFit(limit: number) {\n // compute the inscribed rect width & height for all texts\n // the font size will be determined by the longest text\n // 1. hx^2 + hy^2 = r^2\n // 2. hy = ra * hx + h\n // -> (ra^2 + 1) * x^2 + (2 * h * ra) * x + (h^2 - r^2) = 0\n\n const r = limit / 2;\n\n // unify the initial font size for auto fit texts\n const singleHeight = 12;\n const autoFitTexts: { text: IText; spec: IndicatorItemSpec }[] = [];\n // other text height\n let otherHeight = 0;\n // non auto fit title height\n const titleSpec = this.attribute.title ?? {};\n if (titleSpec.autoFit && titleSpec.fitStrategy === 'inscribed') {\n this._title.setAttribute('fontSize', singleHeight);\n autoFitTexts.push({ text: this._title as IText, spec: this.attribute.title ?? {} });\n } else {\n otherHeight += this._title?.AABBBounds?.height?.() ?? 0;\n }\n const titleSpace = titleSpec.space ?? 0;\n otherHeight += titleSpace;\n // non auto fit content height\n array(this.attribute.content)\n .filter(contentSpec => contentSpec.visible !== false)\n .forEach((contentSpec, index) => {\n const contentText = this._content[index];\n if (contentSpec.autoFit && contentSpec.fitStrategy === 'inscribed') {\n contentText.setAttribute('fontSize', singleHeight);\n autoFitTexts.push({ text: contentText as IText, spec: contentSpec });\n } else {\n otherHeight += contentText?.AABBBounds?.height?.() ?? 0;\n }\n const contentSpace = contentSpec.space ?? 0;\n otherHeight += contentSpace;\n });\n if (autoFitTexts.length <= 0) {\n return;\n }\n\n // max width for all auto fit texts\n const maxWidth = autoFitTexts.reduce((width, textItem) => {\n return Math.max(width, textItem.text.AABBBounds.width());\n }, 0);\n\n // y = x * (singleHeight / maxWidth * textCount) + otherHeight\n // hy = hx * (singleHeight / maxWidth * textCount) + otherHeight / 2\n const ra = (singleHeight / maxWidth) * autoFitTexts.length;\n const h = otherHeight / 2;\n const a = ra ** 2 + 1;\n const b = 2 * h * ra;\n const c = h ** 2 - r ** 2;\n const hx = (-b + Math.sqrt(b ** 2 - 4 * a * c)) / (2 * a);\n const hy = ra * hx + h;\n const y = 2 * hy;\n const lineHeight = (y - otherHeight) / autoFitTexts.length;\n if (isValidNumber(y)) {\n autoFitTexts.forEach(textItem => {\n const specLineHeight = textItem.spec.style?.lineHeight;\n textItem.text.setAttribute('fontSize', lineHeight);\n textItem.text.setAttribute('lineHeight', isValid(specLineHeight) ? specLineHeight : lineHeight);\n });\n }\n }\n\n private _setYPosition() {\n let lastContentHeight = 0;\n\n const titleHeight = this._title?.AABBBounds?.height?.() ?? 0;\n const titleSpace = this.attribute.title?.space ?? 0;\n array(this.attribute.content)\n .filter(contentSpec => contentSpec.visible !== false)\n .forEach((contentSpec, index) => {\n const contentText = this._content[index];\n contentText.setAttribute('y', titleHeight + titleSpace + lastContentHeight);\n const contentSpace = contentSpec.space ?? 0;\n lastContentHeight += contentText.AABBBounds.height() + contentSpace;\n });\n }\n}\n"]}
|
package/es/indicator/type.d.ts
CHANGED
|
@@ -19,5 +19,6 @@ export interface IndicatorItemSpec {
|
|
|
19
19
|
autoFit?: boolean;
|
|
20
20
|
fitPercent?: number;
|
|
21
21
|
fitStrategy?: 'default' | 'inscribed';
|
|
22
|
+
formatMethod?: (text: string | number, textStyle: ITextGraphicAttribute) => TextContent;
|
|
22
23
|
style?: Omit<ITextGraphicAttribute, 'text'> & TextContent;
|
|
23
24
|
}
|
package/es/indicator/type.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/indicator/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { IGroupGraphicAttribute, ITextGraphicAttribute, IRichTextCharacter } from '@visactor/vrender-core';\nimport type { TextContent } from '../core/type';\n\nexport interface IndicatorAttributes extends IGroupGraphicAttribute {\n /**\n * 是否显示指标卡组件\n * @default true\n */\n visible?: boolean;\n /**\n * 内容尺寸\n */\n size: { width: number; height: number };\n /**\n * 指标卡 x 方向偏移\n * @default 0\n */\n dx?: number;\n /**\n * 指标卡 y 方向偏移\n * @default 0\n */\n dy?: number;\n /**\n * 指标卡宽度占内容区域的最大比值(从0到1)\n */\n limitRatio?: number;\n /**\n * 指标卡标题文字配置\n */\n title?: IndicatorItemSpec;\n /**\n * 指标卡内容文字配置\n */\n content?: IndicatorItemSpec[] | IndicatorItemSpec;\n}\n\nexport interface IndicatorItemSpec {\n /**\n * 是否显示当前项\n * @default true\n */\n visible?: boolean;\n /**\n * title.space: title 和 content 之间的间距\n * contentItem.space: content 之间的间距\n */\n space?: number;\n /**\n * 是否自适应文字空间进行缩略\n * 按照原字体大小,根据空间大小缩略文字\n * @default false\n */\n autoLimit?: boolean;\n /**\n * 是否自适应文字空间缩放文字大小\n * 不缩略文字,改变字体大小以适应空间\n * @default false\n */\n autoFit?: boolean;\n /**\n * 自适应文字宽度与可用空间的比例\n * @default 0.5\n */\n fitPercent?: number;\n /**\n * 自适应文字策略\n * @default 'local'\n */\n fitStrategy?: 'default' | 'inscribed';\n /**\n * 文字样式\n */\n style?: Omit<ITextGraphicAttribute, 'text'> & TextContent;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/indicator/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type { IGroupGraphicAttribute, ITextGraphicAttribute, IRichTextCharacter } from '@visactor/vrender-core';\nimport type { TextContent } from '../core/type';\n\nexport interface IndicatorAttributes extends IGroupGraphicAttribute {\n /**\n * 是否显示指标卡组件\n * @default true\n */\n visible?: boolean;\n /**\n * 内容尺寸\n */\n size: { width: number; height: number };\n /**\n * 指标卡 x 方向偏移\n * @default 0\n */\n dx?: number;\n /**\n * 指标卡 y 方向偏移\n * @default 0\n */\n dy?: number;\n /**\n * 指标卡宽度占内容区域的最大比值(从0到1)\n */\n limitRatio?: number;\n /**\n * 指标卡标题文字配置\n */\n title?: IndicatorItemSpec;\n /**\n * 指标卡内容文字配置\n */\n content?: IndicatorItemSpec[] | IndicatorItemSpec;\n}\n\nexport interface IndicatorItemSpec {\n /**\n * 是否显示当前项\n * @default true\n */\n visible?: boolean;\n /**\n * title.space: title 和 content 之间的间距\n * contentItem.space: content 之间的间距\n */\n space?: number;\n /**\n * 是否自适应文字空间进行缩略\n * 按照原字体大小,根据空间大小缩略文字\n * @default false\n */\n autoLimit?: boolean;\n /**\n * 是否自适应文字空间缩放文字大小\n * 不缩略文字,改变字体大小以适应空间\n * @default false\n */\n autoFit?: boolean;\n /**\n * 自适应文字宽度与可用空间的比例\n * @default 0.5\n */\n fitPercent?: number;\n /**\n * 自适应文字策略\n * @default 'local'\n */\n fitStrategy?: 'default' | 'inscribed';\n /**\n * 格式化方法\n * @since 0.20.0\n * @param text 文本\n * @returns\n */\n formatMethod?: (text: string | number, textStyle: ITextGraphicAttribute) => TextContent;\n /**\n * 文字样式\n */\n style?: Omit<ITextGraphicAttribute, 'text'> & TextContent;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC","file":"index.js","sourcesContent":["export * from './timeline';\nexport * from './type';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function loadTimelineComponent(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/timeline/register.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEnG,MAAM,UAAU,qBAAqB;IACnC,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,cAAc,EAAE,CAAC;IACjB,YAAY,EAAE,CAAC;AACjB,CAAC","file":"register.js","sourcesContent":["import { registerGroup, registerSymbol, registerLine, registerText } from '@visactor/vrender-kits';\n\nexport function loadTimelineComponent() {\n registerGroup();\n registerText();\n registerSymbol();\n registerLine();\n}\n"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { AbstractComponent } from '../core/base';
|
|
2
|
+
import type { TimelineAttrs } from './type';
|
|
3
|
+
import type { ComponentOptions } from '../interface';
|
|
4
|
+
export declare class Timeline extends AbstractComponent<Required<TimelineAttrs>> {
|
|
5
|
+
name: string;
|
|
6
|
+
private _line?;
|
|
7
|
+
private _activeLine?;
|
|
8
|
+
private _symbolGroup?;
|
|
9
|
+
private _labelGroup?;
|
|
10
|
+
private _timesPercent?;
|
|
11
|
+
static defaultAttributes: Partial<TimelineAttrs>;
|
|
12
|
+
constructor(attributes: TimelineAttrs, options?: ComponentOptions);
|
|
13
|
+
protected render(): void;
|
|
14
|
+
appearAnimate(animateConfig: {
|
|
15
|
+
duration?: number;
|
|
16
|
+
easing?: string;
|
|
17
|
+
}): void;
|
|
18
|
+
goto(flag: 1 | -1, animateConfig: {
|
|
19
|
+
duration?: number;
|
|
20
|
+
easing?: string;
|
|
21
|
+
}): void;
|
|
22
|
+
forward(animateConfig: {
|
|
23
|
+
duration?: number;
|
|
24
|
+
easing?: string;
|
|
25
|
+
}): void;
|
|
26
|
+
backward(animateConfig: {
|
|
27
|
+
duration?: number;
|
|
28
|
+
easing?: string;
|
|
29
|
+
}): void;
|
|
30
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import { isArray, merge } from "@visactor/vutils";
|
|
2
|
+
|
|
3
|
+
import { AbstractComponent } from "../core/base";
|
|
4
|
+
|
|
5
|
+
import { loadTimelineComponent } from "./register";
|
|
6
|
+
|
|
7
|
+
loadTimelineComponent();
|
|
8
|
+
|
|
9
|
+
export class Timeline extends AbstractComponent {
|
|
10
|
+
constructor(attributes, options) {
|
|
11
|
+
super((null == options ? void 0 : options.skipDefault) ? attributes : merge({}, Timeline.defaultAttributes, attributes)),
|
|
12
|
+
this.name = "timeline";
|
|
13
|
+
}
|
|
14
|
+
render() {
|
|
15
|
+
const {width: width, lineStyle: lineStyle, activeLineStyle: activeLineStyle, symbolStyle: symbolStyle, activeSymbolStyle: activeSymbolStyle, labelStyle: labelStyle, activeLabelStyle: activeLabelStyle, times: times, pointLayoutMode: pointLayoutMode, labelSpace: labelSpace, clipRange: clipRange, animation: animation} = this.attribute;
|
|
16
|
+
if (!times || !times.length) return;
|
|
17
|
+
const symbolHeight = (isArray(symbolStyle.size) ? symbolStyle.size[1] : symbolStyle.size) || 0, activeSymbolHeight = (isArray(activeSymbolStyle.size) ? activeSymbolStyle.size[1] : activeSymbolStyle.size) || 0, lineSymbolHeight = Math.max(lineStyle.lineWidth || 0, activeLineStyle.lineWidth || 0, symbolHeight, activeSymbolHeight), lineY = lineSymbolHeight / 2, lineAttr = {
|
|
18
|
+
y: lineY,
|
|
19
|
+
points: [ {
|
|
20
|
+
x: 0,
|
|
21
|
+
y: 0
|
|
22
|
+
}, {
|
|
23
|
+
x: width,
|
|
24
|
+
y: 0
|
|
25
|
+
} ]
|
|
26
|
+
};
|
|
27
|
+
this._line = this.createOrUpdateChild("line-axes", Object.assign(Object.assign({}, lineStyle), lineAttr), "line"),
|
|
28
|
+
this._activeLine = this.createOrUpdateChild("active-line-axes", Object.assign(Object.assign(Object.assign({}, activeLineStyle), lineAttr), {
|
|
29
|
+
clipRange: clipRange
|
|
30
|
+
}), "line");
|
|
31
|
+
const activeWidth = width * clipRange, symbolGroup = this.createOrUpdateChild("symbol-group", {
|
|
32
|
+
y: lineY
|
|
33
|
+
}, "group"), symbolSpace = 1 === times.length ? width : "space-between" === pointLayoutMode ? width / (times.length - 1) : width / times.length, symbolStartX = "space-between" === pointLayoutMode ? 0 : symbolSpace / 2;
|
|
34
|
+
this._timesPercent = times.map(((_, i) => (symbolStartX + symbolSpace * i) / width)),
|
|
35
|
+
times.forEach(((item, i) => {
|
|
36
|
+
const x = this._timesPercent[i] * width;
|
|
37
|
+
symbolGroup.createOrUpdateChild(item.label, Object.assign(Object.assign({}, symbolStyle), {
|
|
38
|
+
x: x
|
|
39
|
+
}), "symbol");
|
|
40
|
+
})), this._symbolGroup = symbolGroup;
|
|
41
|
+
const labelY = lineSymbolHeight + labelSpace, labelGroup = this.createOrUpdateChild("label-group", {
|
|
42
|
+
y: labelY
|
|
43
|
+
}, "group");
|
|
44
|
+
times.forEach(((item, i) => {
|
|
45
|
+
const x = this._timesPercent[i] * width;
|
|
46
|
+
labelGroup.createOrUpdateChild(item.label, Object.assign(Object.assign({}, labelStyle), {
|
|
47
|
+
x: x,
|
|
48
|
+
text: item.label
|
|
49
|
+
}), "text");
|
|
50
|
+
})), this._labelGroup = labelGroup;
|
|
51
|
+
const setActive = (group, activeStyle) => {
|
|
52
|
+
group.forEachChildren((label => {
|
|
53
|
+
if (label.currentStates) {
|
|
54
|
+
const currentStates = label.currentStates;
|
|
55
|
+
label.clearStates(), label.useStates(currentStates, !1);
|
|
56
|
+
}
|
|
57
|
+
label.states = {
|
|
58
|
+
active: activeStyle
|
|
59
|
+
}, label.attribute.x <= activeWidth && label.useStates([ "active" ], animation);
|
|
60
|
+
}));
|
|
61
|
+
};
|
|
62
|
+
setActive(labelGroup, activeLabelStyle), setActive(symbolGroup, activeSymbolStyle);
|
|
63
|
+
}
|
|
64
|
+
appearAnimate(animateConfig) {
|
|
65
|
+
const {duration: duration = 1e3, easing: easing = "quadOut"} = animateConfig, {activeLabelStyle: activeLabelStyle, activeSymbolStyle: activeSymbolStyle} = this.attribute, percent = duration / 1e3, lineDuration = 500 * percent, activeLineDuration = 200 * percent, perSymbolDuration = 100 * percent, perSymbolNormalDuration = 90 * percent, symbolDelay = 100 * percent, symbolNormalDelay = 600 * percent;
|
|
66
|
+
if (this._line && (this._line.setAttributes({
|
|
67
|
+
clipRange: 0
|
|
68
|
+
}), this._line.animate().to({
|
|
69
|
+
clipRange: 1
|
|
70
|
+
}, lineDuration, easing)), this._activeLine && (this._activeLine.setAttributes({
|
|
71
|
+
opacity: 0
|
|
72
|
+
}), this._activeLine.animate().wait(500).to({
|
|
73
|
+
opacity: 1
|
|
74
|
+
}, activeLineDuration, easing)), this._symbolGroup) {
|
|
75
|
+
const size = this._symbolGroup.count - 1, delay = percent * (1 === size ? 0 : 400 / (size - 1)), delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
|
|
76
|
+
this._symbolGroup.forEachChildren(((symbol, i) => {
|
|
77
|
+
const originAttrs = Object.assign({}, symbol.attribute);
|
|
78
|
+
symbol.setAttributes({
|
|
79
|
+
opacity: 0
|
|
80
|
+
}), symbol.animate().wait(symbolDelay + delay * i).to({
|
|
81
|
+
opacity: 1
|
|
82
|
+
}, perSymbolDuration, easing), symbol.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({
|
|
83
|
+
scaleX: 1.8,
|
|
84
|
+
scaleY: 1.8
|
|
85
|
+
}, activeSymbolStyle), perSymbolNormalDuration, easing).to(Object.assign({
|
|
86
|
+
scaleX: 1,
|
|
87
|
+
scaleY: 1
|
|
88
|
+
}, originAttrs), perSymbolNormalDuration, easing);
|
|
89
|
+
}));
|
|
90
|
+
}
|
|
91
|
+
if (this._labelGroup) {
|
|
92
|
+
const size = this._labelGroup.count - 1, delay = percent * (1 === size ? 0 : 400 / (size - 1)), delayNormal = percent * (1 === size ? 0 : 240 / (size - 1));
|
|
93
|
+
this._labelGroup.forEachChildren(((label, i) => {
|
|
94
|
+
const originAttrs = Object.assign({}, label.attribute);
|
|
95
|
+
label.setAttributes({
|
|
96
|
+
opacity: 0
|
|
97
|
+
}), label.animate().wait(symbolDelay + delay * i).to({
|
|
98
|
+
opacity: 1
|
|
99
|
+
}, perSymbolDuration, easing), label.animate().wait(symbolNormalDelay + delayNormal * i).to(Object.assign({
|
|
100
|
+
dy: 10
|
|
101
|
+
}, activeLabelStyle), perSymbolNormalDuration, easing).to(Object.assign({
|
|
102
|
+
dy: 0
|
|
103
|
+
}, originAttrs), perSymbolNormalDuration, easing);
|
|
104
|
+
}));
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
goto(flag, animateConfig) {
|
|
108
|
+
var _a;
|
|
109
|
+
let {clipRange: clipRange} = this.attribute;
|
|
110
|
+
const {animation: animation} = this.attribute;
|
|
111
|
+
if (flag > 0) {
|
|
112
|
+
if (clipRange >= 1) return;
|
|
113
|
+
clipRange < 0 && (clipRange = 0);
|
|
114
|
+
} else {
|
|
115
|
+
if (clipRange <= 0) return;
|
|
116
|
+
clipRange > 1 && (clipRange = 1);
|
|
117
|
+
}
|
|
118
|
+
clipRange !== this.attribute.clipRange && this.setAttributes({
|
|
119
|
+
clipRange: clipRange
|
|
120
|
+
});
|
|
121
|
+
let i = 0;
|
|
122
|
+
for (;i < this._timesPercent.length && !(clipRange < this._timesPercent[i]); i++) ;
|
|
123
|
+
const nextClipRange = flag > 0 ? this._timesPercent[i] : this._timesPercent[i - 1] || 0;
|
|
124
|
+
if (animation) {
|
|
125
|
+
const {duration: duration = 1e3, easing: easing = "quadOut"} = animateConfig, actDuration = Math.abs(nextClipRange - clipRange) / (this._timesPercent[i] - (null !== (_a = this._timesPercent[i - 1]) && void 0 !== _a ? _a : 0)) * duration;
|
|
126
|
+
this.animate().to({
|
|
127
|
+
clipRange: nextClipRange
|
|
128
|
+
}, actDuration, easing);
|
|
129
|
+
} else this.setAttributes({
|
|
130
|
+
clipRange: nextClipRange
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
forward(animateConfig) {
|
|
134
|
+
this.goto(1, animateConfig);
|
|
135
|
+
}
|
|
136
|
+
backward(animateConfig) {
|
|
137
|
+
this.goto(-1, animateConfig);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
Timeline.defaultAttributes = {
|
|
142
|
+
labelSpace: 10,
|
|
143
|
+
pointLayoutMode: "space-around",
|
|
144
|
+
animation: !0,
|
|
145
|
+
symbolStyle: {
|
|
146
|
+
fill: "black",
|
|
147
|
+
size: 12,
|
|
148
|
+
symbolType: "circle"
|
|
149
|
+
},
|
|
150
|
+
activeSymbolStyle: {
|
|
151
|
+
fill: "orange"
|
|
152
|
+
},
|
|
153
|
+
lineStyle: {
|
|
154
|
+
lineDash: [ 2, 2 ],
|
|
155
|
+
lineCap: "butt",
|
|
156
|
+
stroke: "black",
|
|
157
|
+
lineWidth: 2
|
|
158
|
+
},
|
|
159
|
+
activeLineStyle: {
|
|
160
|
+
stroke: "orange",
|
|
161
|
+
lineWidth: 4
|
|
162
|
+
},
|
|
163
|
+
labelStyle: {
|
|
164
|
+
fontSize: 12,
|
|
165
|
+
fill: "black",
|
|
166
|
+
textAlign: "center",
|
|
167
|
+
textBaseline: "top"
|
|
168
|
+
},
|
|
169
|
+
activeLabelStyle: {
|
|
170
|
+
fontSize: 14,
|
|
171
|
+
fill: "orange"
|
|
172
|
+
},
|
|
173
|
+
clipRange: 0
|
|
174
|
+
};
|
|
175
|
+
//# sourceMappingURL=timeline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/timeline/timeline.ts"],"names":[],"mappings":"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","file":"timeline.js","sourcesContent":["import { isArray, merge } from '@visactor/vutils';\nimport { AbstractComponent } from '../core/base';\nimport { loadTimelineComponent } from './register';\nimport type { TimelineAttrs } from './type';\nimport type { ComponentOptions } from '../interface';\nimport type { IGraphicAttribute, IGroup, ILine, IText } from '@visactor/vrender-core';\nimport type { ISymbol } from '@visactor/vrender-core';\n\nloadTimelineComponent();\n\nexport class Timeline extends AbstractComponent<Required<TimelineAttrs>> {\n name = 'timeline';\n\n private _line?: ILine;\n private _activeLine?: ILine;\n private _symbolGroup?: IGroup;\n private _labelGroup?: IGroup;\n private _timesPercent?: number[];\n\n static defaultAttributes: Partial<TimelineAttrs> = {\n labelSpace: 10,\n pointLayoutMode: 'space-around',\n animation: true,\n symbolStyle: {\n fill: 'black',\n size: 12,\n symbolType: 'circle'\n },\n activeSymbolStyle: {\n fill: 'orange'\n },\n lineStyle: {\n lineDash: [2, 2],\n lineCap: 'butt',\n stroke: 'black',\n lineWidth: 2\n },\n activeLineStyle: {\n stroke: 'orange',\n lineWidth: 4\n },\n labelStyle: {\n fontSize: 12,\n fill: 'black',\n textAlign: 'center',\n textBaseline: 'top'\n },\n activeLabelStyle: {\n fontSize: 14,\n fill: 'orange'\n },\n clipRange: 0\n };\n\n constructor(attributes: TimelineAttrs, options?: ComponentOptions) {\n super(options?.skipDefault ? attributes : merge({}, Timeline.defaultAttributes, attributes));\n }\n\n protected render(): void {\n const {\n width,\n lineStyle,\n activeLineStyle,\n symbolStyle,\n activeSymbolStyle,\n labelStyle,\n activeLabelStyle,\n times,\n pointLayoutMode,\n labelSpace,\n clipRange,\n animation\n } = this.attribute;\n\n if (!(times && times.length)) {\n return;\n }\n\n // 计算线段中心的y位置,考虑线宽和symbol宽度\n const symbolHeight = (isArray(symbolStyle.size) ? symbolStyle.size[1] : symbolStyle.size) || 0;\n const activeSymbolHeight =\n (isArray(activeSymbolStyle.size) ? activeSymbolStyle.size[1] : activeSymbolStyle.size) || 0;\n const lineSymbolHeight = Math.max(\n lineStyle.lineWidth || 0,\n activeLineStyle.lineWidth || 0,\n symbolHeight,\n activeSymbolHeight\n );\n const lineY = lineSymbolHeight / 2;\n const lineAttr = {\n y: lineY,\n points: [\n { x: 0, y: 0 },\n { x: width, y: 0 }\n ]\n };\n this._line = this.createOrUpdateChild(\n 'line-axes',\n {\n ...lineStyle,\n ...lineAttr\n },\n 'line'\n ) as ILine;\n this._activeLine = this.createOrUpdateChild(\n 'active-line-axes',\n {\n ...activeLineStyle,\n ...lineAttr,\n clipRange\n },\n 'line'\n ) as ILine;\n\n const activeWidth = width * clipRange;\n\n const symbolGroup = this.createOrUpdateChild(\n 'symbol-group',\n {\n y: lineY\n },\n 'group'\n ) as IGroup;\n const symbolSpace =\n times.length === 1\n ? width\n : pointLayoutMode === 'space-between'\n ? width / (times.length - 1)\n : width / times.length;\n const symbolStartX = pointLayoutMode === 'space-between' ? 0 : symbolSpace / 2;\n this._timesPercent = times.map((_, i) => (symbolStartX + symbolSpace * i) / width);\n\n times.forEach((item, i) => {\n const x = this._timesPercent[i] * width;\n symbolGroup.createOrUpdateChild(\n item.label,\n {\n ...symbolStyle,\n x\n },\n 'symbol'\n );\n });\n this._symbolGroup = symbolGroup;\n\n const labelY = lineSymbolHeight + labelSpace;\n const labelGroup = this.createOrUpdateChild(\n 'label-group',\n {\n y: labelY\n },\n 'group'\n ) as IGroup;\n\n times.forEach((item, i) => {\n const x = this._timesPercent[i] * width;\n labelGroup.createOrUpdateChild(\n item.label,\n {\n ...labelStyle,\n x,\n text: item.label\n },\n 'text'\n );\n });\n this._labelGroup = labelGroup;\n\n const setActive = (group: IGroup, activeStyle: Partial<IGraphicAttribute>) => {\n group.forEachChildren((label: IText) => {\n if (label.currentStates) {\n const currentStates = label.currentStates;\n label.clearStates();\n label.useStates(currentStates, false);\n }\n label.states = {\n active: activeStyle\n };\n if (label.attribute.x <= activeWidth) {\n label.useStates(['active'], animation);\n }\n });\n };\n\n setActive(labelGroup, activeLabelStyle);\n setActive(symbolGroup, activeSymbolStyle);\n }\n\n appearAnimate(animateConfig: { duration?: number; easing?: string }) {\n // 基准时间,line[0, 500], point[100, 600] 100 onebyone, pointNormal[600, 1000] 90+90 onebyone, activeLine[500, 700]\n // line和activeLine的clipRange\n const { duration = 1000, easing = 'quadOut' } = animateConfig;\n const { activeLabelStyle, activeSymbolStyle } = this.attribute;\n const percent = duration / 1000;\n const lineDuration = percent * 500;\n const activeLineDuration = percent * 200;\n const perSymbolDuration = percent * 100;\n const perSymbolNormalDuration = percent * 90;\n const symbolDelay = percent * 100;\n const symbolNormalDelay = percent * 600;\n if (this._line) {\n this._line.setAttributes({ clipRange: 0 });\n this._line.animate().to({ clipRange: 1 }, lineDuration, easing as any);\n }\n if (this._activeLine) {\n this._activeLine.setAttributes({ opacity: 0 });\n this._activeLine\n .animate()\n .wait(500)\n .to({ opacity: 1 }, activeLineDuration, easing as any);\n }\n if (this._symbolGroup) {\n const size = this._symbolGroup.count - 1;\n const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n this._symbolGroup.forEachChildren((symbol: ISymbol, i) => {\n const originAttrs = { ...symbol.attribute };\n symbol.setAttributes({ opacity: 0 });\n symbol\n .animate()\n .wait(symbolDelay + delay * i)\n .to({ opacity: 1 }, perSymbolDuration, easing as any);\n symbol\n .animate()\n .wait(symbolNormalDelay + delayNormal * i)\n .to({ scaleX: 1.8, scaleY: 1.8, ...activeSymbolStyle }, perSymbolNormalDuration, easing as any)\n .to({ scaleX: 1, scaleY: 1, ...originAttrs }, perSymbolNormalDuration, easing as any);\n });\n }\n if (this._labelGroup) {\n const size = this._labelGroup.count - 1;\n const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));\n const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));\n this._labelGroup.forEachChildren((label: IText, i) => {\n const originAttrs = { ...label.attribute };\n label.setAttributes({ opacity: 0 });\n label\n .animate()\n .wait(symbolDelay + delay * i)\n .to({ opacity: 1 }, perSymbolDuration, easing as any);\n label\n .animate()\n .wait(symbolNormalDelay + delayNormal * i)\n .to({ dy: 10, ...activeLabelStyle }, perSymbolNormalDuration, easing as any)\n .to({ dy: 0, ...originAttrs }, perSymbolNormalDuration, easing as any);\n });\n }\n }\n\n goto(flag: 1 | -1, animateConfig: { duration?: number; easing?: string }) {\n let { clipRange } = this.attribute;\n const { animation } = this.attribute;\n\n // 合法性判断\n if (flag > 0) {\n if (clipRange >= 1) {\n return;\n } else if (clipRange < 0) {\n clipRange = 0;\n }\n } else {\n if (clipRange <= 0) {\n return;\n } else if (clipRange > 1) {\n clipRange = 1;\n }\n }\n\n if (clipRange !== this.attribute.clipRange) {\n this.setAttributes({ clipRange });\n }\n\n // 判断区间\n let i = 0;\n for (; i < this._timesPercent.length; i++) {\n if (clipRange < this._timesPercent[i]) {\n break;\n }\n }\n\n const nextClipRange = flag > 0 ? this._timesPercent[i] : this._timesPercent[i - 1] || 0;\n if (animation) {\n const { duration = 1000, easing = 'quadOut' } = animateConfig;\n const actDuration =\n (Math.abs(nextClipRange - clipRange) / (this._timesPercent[i] - (this._timesPercent[i - 1] ?? 0))) * duration;\n this.animate().to({ clipRange: nextClipRange }, actDuration, easing as any);\n } else {\n this.setAttributes({ clipRange: nextClipRange });\n }\n }\n\n forward(animateConfig: { duration?: number; easing?: string }) {\n this.goto(1, animateConfig);\n }\n\n backward(animateConfig: { duration?: number; easing?: string }) {\n this.goto(-1, animateConfig);\n }\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { IGroupGraphicAttribute, ILineGraphicAttribute, ISymbolGraphicAttribute, ITextGraphicAttribute } from '@visactor/vrender-core';
|
|
2
|
+
export interface TimelineAttrs extends IGroupGraphicAttribute {
|
|
3
|
+
width: number;
|
|
4
|
+
times: {
|
|
5
|
+
label: string;
|
|
6
|
+
desc?: string;
|
|
7
|
+
}[];
|
|
8
|
+
labelSpace?: number;
|
|
9
|
+
symbolStyle?: Partial<ISymbolGraphicAttribute>;
|
|
10
|
+
activeSymbolStyle?: Partial<ISymbolGraphicAttribute>;
|
|
11
|
+
lineStyle?: Partial<ILineGraphicAttribute>;
|
|
12
|
+
activeLineStyle?: Partial<ILineGraphicAttribute>;
|
|
13
|
+
labelStyle?: Partial<ITextGraphicAttribute>;
|
|
14
|
+
activeLabelStyle?: Partial<ITextGraphicAttribute>;
|
|
15
|
+
pointLayoutMode?: 'space-around' | 'space-between';
|
|
16
|
+
clipRange?: number;
|
|
17
|
+
animation?: boolean;
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/timeline/type.ts"],"names":[],"mappings":"","file":"type.js","sourcesContent":["import type {\n IGroupGraphicAttribute,\n ILineGraphicAttribute,\n ISymbolGraphicAttribute,\n ITextGraphicAttribute\n} from '@visactor/vrender-core';\nimport { ILineAttribute, ISymbolAttribute } from '@visactor/vrender-core';\n\nexport interface TimelineAttrs extends IGroupGraphicAttribute {\n width: number;\n // height?: number;\n times: { label: string; desc?: string }[];\n labelSpace?: number;\n symbolStyle?: Partial<ISymbolGraphicAttribute>;\n activeSymbolStyle?: Partial<ISymbolGraphicAttribute>;\n lineStyle?: Partial<ILineGraphicAttribute>;\n activeLineStyle?: Partial<ILineGraphicAttribute>;\n labelStyle?: Partial<ITextGraphicAttribute>;\n activeLabelStyle?: Partial<ITextGraphicAttribute>;\n pointLayoutMode?: 'space-around' | 'space-between';\n // 当前进度\n clipRange?: number;\n animation?: boolean;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@visactor/vrender-components",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.22",
|
|
4
4
|
"description": "components library for dp visualization",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@visactor/vrender-core": "0.19.
|
|
16
|
-
"@visactor/vrender-kits": "0.19.
|
|
15
|
+
"@visactor/vrender-core": "0.19.22",
|
|
16
|
+
"@visactor/vrender-kits": "0.19.22",
|
|
17
17
|
"@visactor/vutils": "~0.18.10",
|
|
18
18
|
"@visactor/vscale": "~0.18.9"
|
|
19
19
|
},
|