diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index e1880a79e..e18c4523e 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
'@types/react-dom': ^18.0.0
'@visactor/vchart': 1.3.0
'@visactor/vgrammar': ~0.5.7
- '@visactor/vrender': workspace:0.19.21
+ '@visactor/vrender': workspace:0.19.22
'@visactor/vutils': ~0.18.10
'@vitejs/plugin-react': 3.1.0
axios: ^1.4.0
@@ -71,7 +71,7 @@ importers:
'@types/react': ^18.0.0
'@types/react-dom': ^18.0.0
'@types/react-reconciler': ^0.28.2
- '@visactor/vrender': workspace:0.19.21
+ '@visactor/vrender': workspace:0.19.22
'@visactor/vutils': ~0.18.10
'@vitejs/plugin-react': 3.1.0
cross-env: ^7.0.3
@@ -111,8 +111,8 @@ importers:
'@rushstack/eslint-patch': ~1.1.4
'@types/react': ^18.0.0
'@types/react-dom': ^18.0.0
- '@visactor/react-vrender': workspace:0.19.21
- '@visactor/vrender': workspace:0.19.21
+ '@visactor/react-vrender': workspace:0.19.22
+ '@visactor/vrender': workspace:0.19.22
'@visactor/vutils': ~0.18.10
'@vitejs/plugin-react': 3.1.0
cross-env: ^7.0.3
@@ -153,8 +153,8 @@ importers:
'@types/jest': ^26.0.0
'@types/react': ^18.0.0
'@types/react-dom': ^18.0.0
- '@visactor/vrender-core': workspace:0.19.21
- '@visactor/vrender-kits': workspace:0.19.21
+ '@visactor/vrender-core': workspace:0.19.22
+ '@visactor/vrender-kits': workspace:0.19.22
'@visactor/vutils': ~0.18.10
'@vitejs/plugin-react': 3.1.0
canvas: 2.11.2
@@ -200,8 +200,8 @@ importers:
'@internal/ts-config': workspace:*
'@rushstack/eslint-patch': ~1.1.4
'@types/jest': ^26.0.0
- '@visactor/vrender-core': workspace:0.19.21
- '@visactor/vrender-kits': workspace:0.19.21
+ '@visactor/vrender-core': workspace:0.19.22
+ '@visactor/vrender-kits': workspace:0.19.22
'@visactor/vscale': ~0.18.9
'@visactor/vutils': ~0.18.10
cross-env: ^7.0.3
@@ -287,7 +287,7 @@ importers:
'@types/node-fetch': 2.6.4
'@types/react': ^18.0.0
'@types/react-dom': ^18.0.0
- '@visactor/vrender-core': workspace:0.19.21
+ '@visactor/vrender-core': workspace:0.19.22
'@visactor/vutils': ~0.18.10
'@vitejs/plugin-react': 3.1.0
canvas: 2.11.2
@@ -369,10 +369,10 @@ importers:
'@rushstack/eslint-patch': ~1.1.4
'@types/node': '*'
'@types/node-fetch': 2.6.4
- '@visactor/vrender': workspace:0.19.21
- '@visactor/vrender-components': workspace:0.19.21
- '@visactor/vrender-core': workspace:0.19.21
- '@visactor/vrender-kits': workspace:0.19.21
+ '@visactor/vrender': workspace:0.19.22
+ '@visactor/vrender-components': workspace:0.19.22
+ '@visactor/vrender-core': workspace:0.19.22
+ '@visactor/vrender-kits': workspace:0.19.22
cross-env: ^7.0.3
eslint: ~8.18.0
form-data: ~4.0.0
diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json
index 449353cde..c5d3f29ce 100644
--- a/common/config/rush/version-policies.json
+++ b/common/config/rush/version-policies.json
@@ -1 +1 @@
-[{"definitionName":"lockStepVersion","policyName":"vrenderMain","version":"0.19.21","nextBump":"patch"}]
+[{"definitionName":"lockStepVersion","policyName":"vrenderMain","version":"0.19.22","nextBump":"patch"}]
diff --git a/docs/assets/changelog/en/changelog.md b/docs/assets/changelog/en/changelog.md
index 133374a89..2e8f20728 100644
--- a/docs/assets/changelog/en/changelog.md
+++ b/docs/assets/changelog/en/changelog.md
@@ -1,3 +1,16 @@
+# v0.19.21
+
+2024-08-05
+
+
+**🆕 New feature**
+
+- **@visactor/vrender-components**: label line support custom path. feat @VisActor/VChart[#3000](https://github.com/VisActor/VRender/issues/3000)
+
+
+
+[more detail about v0.19.21](https://github.com/VisActor/VRender/releases/tag/v0.19.21)
+
# v0.19.20
2024-08-01
diff --git a/docs/assets/changelog/zh/changelog.md b/docs/assets/changelog/zh/changelog.md
index f1facc914..1bdea256e 100644
--- a/docs/assets/changelog/zh/changelog.md
+++ b/docs/assets/changelog/zh/changelog.md
@@ -1,3 +1,16 @@
+# v0.19.21
+
+2024-08-05
+
+
+**🆕 新增功能**
+
+- **@visactor/vrender-components**: label line support custom path. feat @VisActor/VChart[#3000](https://github.com/VisActor/VRender/issues/3000)
+
+
+
+[更多详情请查看 v0.19.21](https://github.com/VisActor/VRender/releases/tag/v0.19.21)
+
# v0.19.20
2024-08-01
diff --git a/docs/package.json b/docs/package.json
index 55d0acf62..85f899807 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,7 +13,7 @@
"@visactor/vchart": "1.3.0",
"@visactor/vutils": "~0.18.10",
"@visactor/vgrammar": "~0.5.7",
- "@visactor/vrender": "workspace:0.19.21",
+ "@visactor/vrender": "workspace:0.19.22",
"markdown-it": "^13.0.0",
"highlight.js": "^11.8.0",
"axios": "^1.4.0",
diff --git a/packages/react-vrender-utils/CHANGELOG.json b/packages/react-vrender-utils/CHANGELOG.json
index 4557760f9..9e9ca6947 100644
--- a/packages/react-vrender-utils/CHANGELOG.json
+++ b/packages/react-vrender-utils/CHANGELOG.json
@@ -1,6 +1,12 @@
{
"name": "@visactor/react-vrender-utils",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/react-vrender-utils_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {}
+ },
{
"version": "0.19.21",
"tag": "@visactor/react-vrender-utils_v0.19.21",
diff --git a/packages/react-vrender-utils/CHANGELOG.md b/packages/react-vrender-utils/CHANGELOG.md
index aee625caa..041f0cc8f 100644
--- a/packages/react-vrender-utils/CHANGELOG.md
+++ b/packages/react-vrender-utils/CHANGELOG.md
@@ -1,6 +1,11 @@
# Change Log - @visactor/react-vrender-utils
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+_Version update only_
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/react-vrender-utils/package.json b/packages/react-vrender-utils/package.json
index fbb01e373..b93c72252 100644
--- a/packages/react-vrender-utils/package.json
+++ b/packages/react-vrender-utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/react-vrender-utils",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "",
"sideEffects": false,
"main": "cjs/index.js",
@@ -24,8 +24,8 @@
"react-dom": "^18.2.0"
},
"dependencies": {
- "@visactor/vrender": "workspace:0.19.21",
- "@visactor/react-vrender": "workspace:0.19.21",
+ "@visactor/vrender": "workspace:0.19.22",
+ "@visactor/react-vrender": "workspace:0.19.22",
"@visactor/vutils": "~0.18.10",
"react-reconciler": "^0.29.0",
"tslib": "^2.3.1"
diff --git a/packages/react-vrender/CHANGELOG.json b/packages/react-vrender/CHANGELOG.json
index 0ce80aade..44a57097f 100644
--- a/packages/react-vrender/CHANGELOG.json
+++ b/packages/react-vrender/CHANGELOG.json
@@ -1,6 +1,12 @@
{
"name": "@visactor/react-vrender",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/react-vrender_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {}
+ },
{
"version": "0.19.21",
"tag": "@visactor/react-vrender_v0.19.21",
diff --git a/packages/react-vrender/CHANGELOG.md b/packages/react-vrender/CHANGELOG.md
index 5c3b2c945..b643adada 100644
--- a/packages/react-vrender/CHANGELOG.md
+++ b/packages/react-vrender/CHANGELOG.md
@@ -1,6 +1,11 @@
# Change Log - @visactor/react-vrender
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+_Version update only_
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/react-vrender/package.json b/packages/react-vrender/package.json
index bb9cb0316..286742ca1 100644
--- a/packages/react-vrender/package.json
+++ b/packages/react-vrender/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/react-vrender",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "",
"sideEffects": false,
"main": "cjs/index.js",
@@ -23,7 +23,7 @@
"react": "^18.2.0"
},
"dependencies": {
- "@visactor/vrender": "workspace:0.19.21",
+ "@visactor/vrender": "workspace:0.19.22",
"@visactor/vutils": "~0.18.10",
"react-reconciler": "^0.29.0",
"tslib": "^2.3.1"
diff --git a/packages/vrender-components/CHANGELOG.json b/packages/vrender-components/CHANGELOG.json
index 6d8ba3c58..4faaef521 100644
--- a/packages/vrender-components/CHANGELOG.json
+++ b/packages/vrender-components/CHANGELOG.json
@@ -1,6 +1,24 @@
{
"name": "@visactor/vrender-components",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/vrender-components_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {
+ "none": [
+ {
+ "comment": "feat: support react and html of indicator\n\n"
+ },
+ {
+ "comment": "feat: support timeline component"
+ },
+ {
+ "comment": "fix: fix issue with indicator autolimit"
+ }
+ ]
+ }
+ },
{
"version": "0.19.21",
"tag": "@visactor/vrender-components_v0.19.21",
diff --git a/packages/vrender-components/CHANGELOG.md b/packages/vrender-components/CHANGELOG.md
index 77e955de4..d567c246e 100644
--- a/packages/vrender-components/CHANGELOG.md
+++ b/packages/vrender-components/CHANGELOG.md
@@ -1,6 +1,17 @@
# Change Log - @visactor/vrender-components
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+### Updates
+
+- feat: support react and html of indicator
+
+
+- feat: support timeline component
+- fix: fix issue with indicator autolimit
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/vrender-components/__tests__/browser/examples/indicator-html.ts b/packages/vrender-components/__tests__/browser/examples/indicator-html.ts
new file mode 100644
index 000000000..364528dfd
--- /dev/null
+++ b/packages/vrender-components/__tests__/browser/examples/indicator-html.ts
@@ -0,0 +1,668 @@
+import '@visactor/vrender';
+import { createCircle, createLine } from '@visactor/vrender';
+import render from '../../util/render';
+import { Indicator } from '../../../src';
+
+export function run() {
+ const attr1 = {
+ visible: true,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: false,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr2 = {
+ visible: true,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: true,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ text: 'Aris',
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr3 = {
+ visible: true,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: false,
+ // visible: true,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ // text: '',
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr4 = {
+ visible: false,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: false,
+ space: 0,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ text: 'TITLE',
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr5 = {
+ visible: true,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: true,
+ space: 0,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ text: 'TITLE',
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr6 = {
+ visible: false,
+ size: {
+ width: 649.455,
+ height: 300
+ },
+ x: 176,
+ y: 100,
+ dx: 0,
+ dy: 0,
+ limitRatio: 1,
+ title: {
+ visible: false,
+ space: 0,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ text: 'TITLE',
+ fontSize: 42,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red'
+ }
+ },
+ content: [
+ {
+ visible: true,
+ autoLimit: true,
+ fitPercent: 1,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoFit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ const attr7 = {
+ size: {
+ width: 500,
+ height: 500
+ },
+ visible: true,
+ // limitRatio: 0.8,
+ limitRatio: 1,
+ title: {
+ // visible: false,
+ space: 10,
+ autoFit: true,
+ fitStrategy: 'inscribed',
+ fitPercent: 1,
+ formatMethod: text => {
+ return {
+ type: 'html',
+ text: {
+ dom: 'TitleABCDEFG
'
+ }
+ };
+ },
+ style: {
+ fontSize: 64,
+ text: 'TitleABCDEFG'
+ }
+ },
+ content: [
+ {
+ space: 5,
+ // autoFit: true,
+ fitStrategy: 'inscribed',
+ fitPercent: 1,
+ formatMethod: text => {
+ return {
+ type: 'html',
+ text: {
+ dom: 'CONTENT0
'
+ }
+ };
+ },
+ style: {
+ fontSize: 66,
+ text: 'CONTENT0'
+ }
+ },
+ {
+ autoLimit: true,
+ autoFit: true,
+ fitPercent: 1,
+ fitStrategy: 'inscribed',
+ formatMethod: (text, textStyle) => {
+ console.log(text, textStyle);
+ return {
+ type: 'html',
+ text: {
+ style: {
+ maxWidth: textStyle.maxLineWidth
+ },
+ dom: 'CONTENT1111111111111111111111111111111111111111111111111111
'
+ }
+ };
+ },
+ // space: 5,
+ style: {
+ fontSize: 16,
+ // text: 'CONTENT111111111111111111111111111111111111111111111111111111111111111111111111111111',
+ text: 'CONTENT1111111111111111111111111111111111111111111111111111',
+ fill: 'blue',
+ fontWeight: 'bolder'
+ }
+ }
+ ]
+ };
+
+ const attr_progress = {
+ visible: true,
+ size: {
+ width: 767.818,
+ height: 476
+ },
+ x: 12,
+ y: 12,
+ dx: 0,
+ dy: 0,
+ limitRatio: null,
+ title: {
+ visible: true,
+ space: 0,
+ autoLimit: false,
+ autoFit: true,
+ style: {
+ fontSize: 20,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ fill: 'red',
+ text: 2
+ }
+ },
+ content: [
+ {
+ visible: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 0.9,
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'normal',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT0',
+ fill: 'black'
+ }
+ },
+ {
+ visible: true,
+ autoLimit: true,
+ style: {
+ fontSize: 16,
+
+ fontWeight: 'bolder',
+ fillOpacity: 1,
+ textBaseline: 'top',
+ textAlign: 'center',
+ text: 'CONTENT111111111111111111111111111111111111111',
+ fill: 'blue'
+ }
+ }
+ ]
+ };
+
+ // const indicator = new Indicator(attr_progress);
+
+ // const indicator = new Indicator({
+ // // dx: 100,
+ // // dy: 100,
+ // size: {
+ // width: 500,
+ // height: 500
+ // },
+ // visible: true,
+ // // limitRatio: 0.8,
+ // limitRatio: 1,
+ // title: {
+ // // visible: false,
+ // space: 10,
+ // // autoLimit: true,
+ // autoFit: true,
+ // style: {
+ // type: 'rich',
+ // text: [
+ // {
+ // text: 'Visactor-',
+ // fontWeight: 'bold',
+ // fontSize: 42,
+ // fill: 'red'
+ // },
+
+ // {
+ // text: 'vchart',
+ // textDecoration: 'underline',
+ // fontSize: 36,
+ // fill: 'black'
+ // }
+ // ],
+ // fontSize: 42,
+
+ // fill: 'red'
+ // }
+ // },
+ // content: [
+ // {
+ // // fitPercent: 1,
+ // // autoFit: true,
+ // // visible: true,
+ // space: 5,
+ // // autoLimit: true,
+ // style: {
+ // fontSize: 16,
+ // // text: 'CONTENT0'
+ // type: 'rich',
+ // text: [
+ // {
+ // text: 'Mapbox',
+ // fontWeight: 'bold',
+ // fontSize: 25,
+ // fill: '#3f51b5'
+ // },
+
+ // {
+ // text: '替代方案',
+ // fontStyle: 'italic',
+ // textDecoration: 'underline',
+ // fill: '#3f51b5'
+ // }
+ // ]
+ // }
+ // },
+ // {
+ // // visible: false,
+ // // fitPercent: 0.2,
+ // autoLimit: true,
+ // // autoFit: true,
+ // space: 5,
+ // style: {
+ // fontSize: 16,
+ // text: 'CONTENT111111111111111111111111111111111111111111111111111111111111111111111111111111',
+
+ // fill: 'blue',
+ // fontWeight: 'bolder'
+ // }
+ // }
+ // ]
+ // });
+
+ const indicator = new Indicator(attr7);
+
+ /** 指标卡部分隐藏 */
+ // const indicator = new Indicator(attr1);
+
+ /** 指标卡全部隐藏 */
+ // const indicator = new Indicator(attr4);
+
+ const stage = render(
+ [
+ indicator,
+ createLine({
+ points: [
+ { x: 0, y: 250 },
+ { x: 500, y: 250 }
+ ],
+ lineWidth: 1,
+
+ stroke: '#ccc',
+ lineDash: [2]
+ }),
+ createLine({
+ points: [
+ { x: 0, y: 0 },
+ { x: 0, y: 200 }
+ ],
+ lineWidth: 1,
+
+ stroke: '#ccc',
+ lineDash: [2]
+ }),
+ createLine({
+ points: [
+ { x: 250, y: 0 },
+ { x: 250, y: 500 }
+ ],
+ lineWidth: 1,
+
+ stroke: '#ccc',
+ lineDash: [2]
+ }),
+ createLine({
+ points: [
+ { x: 500, y: 0 },
+ { x: 500, y: 200 }
+ ],
+ lineWidth: 1,
+
+ stroke: '#ccc',
+ lineDash: [2]
+ }),
+ createCircle({
+ x: 250,
+ y: 250,
+ radius: 250,
+ fill: 'rgba(0, 0, 0, 0.1)'
+ })
+ ],
+ 'main'
+ );
+
+ window.indicator = indicator;
+ window.stage = stage;
+ console.log(indicator);
+
+ /** 指标卡部分隐藏 */
+ // indicator.setAttributes(attr2);
+
+ // indicator.setAttributes(attr3);
+
+ /** 指标卡全部隐藏 */
+ // indicator.setAttributes(attr5);
+
+ // indicator.setAttributes(attr6);
+}
diff --git a/packages/vrender-components/__tests__/browser/examples/timeline.ts b/packages/vrender-components/__tests__/browser/examples/timeline.ts
new file mode 100644
index 000000000..49a1c61ad
--- /dev/null
+++ b/packages/vrender-components/__tests__/browser/examples/timeline.ts
@@ -0,0 +1,34 @@
+import '@visactor/vrender';
+import { IPointLike } from '@visactor/vutils';
+import render from '../../util/render';
+import { Timeline } from '../../../src';
+import { createLine } from '@visactor/vrender-core';
+
+export function run() {
+ const timelines: Timeline[] = [];
+
+ timelines.push(
+ new Timeline({
+ x: 30,
+ y: 100,
+ times: [
+ { label: '2000', desc: '' },
+ { label: '2001', desc: '' },
+ { label: '2002', desc: '' },
+ { label: '2003', desc: '' },
+ { label: '2004', desc: '' },
+ { label: '2005', desc: '' },
+ { label: '2006', desc: '' }
+ ],
+ width: 380,
+ clipRange: 0.3
+ })
+ );
+
+ setTimeout(() => {
+ // timelines[0].forward({ duration: 1000 });
+ timelines[0].appearAnimate({ duration: 5000 });
+ }, 2000);
+
+ const stage = render(timelines as any, 'main');
+}
diff --git a/packages/vrender-components/__tests__/browser/main.ts b/packages/vrender-components/__tests__/browser/main.ts
index 3020bd810..3c084d3f6 100644
--- a/packages/vrender-components/__tests__/browser/main.ts
+++ b/packages/vrender-components/__tests__/browser/main.ts
@@ -246,6 +246,10 @@ const specs = [
path: 'indicator',
name: '指标卡'
},
+ {
+ path: 'indicator-html',
+ name: '指标卡使用html展示'
+ },
{
path: 'brush',
name: 'brush'
@@ -261,6 +265,10 @@ const specs = [
{
path: 'empty-tip',
name: 'empty-tip'
+ },
+ {
+ path: 'timeline',
+ name: 'timeline'
}
];
diff --git a/packages/vrender-components/package.json b/packages/vrender-components/package.json
index e9985ab25..a7d65cffb 100644
--- a/packages/vrender-components/package.json
+++ b/packages/vrender-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender-components",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "components library for dp visualization",
"sideEffects": false,
"main": "cjs/index.js",
@@ -24,8 +24,8 @@
"analysis-core": "cross-env DEBUG='Bundler*' bundle -f umd -a -i core.ts"
},
"dependencies": {
- "@visactor/vrender-core": "workspace:0.19.21",
- "@visactor/vrender-kits": "workspace:0.19.21",
+ "@visactor/vrender-core": "workspace:0.19.22",
+ "@visactor/vrender-kits": "workspace:0.19.22",
"@visactor/vutils": "~0.18.10",
"@visactor/vscale": "~0.18.9"
},
diff --git a/packages/vrender-components/src/index.ts b/packages/vrender-components/src/index.ts
index 396bdb99b..7e3f5da76 100644
--- a/packages/vrender-components/src/index.ts
+++ b/packages/vrender-components/src/index.ts
@@ -22,6 +22,7 @@ export * from './link-path';
export * from './player';
export * from './brush';
export * from './tooltip';
+export * from './timeline';
export * from './interface';
export * from './jsx';
export * from './checkbox';
diff --git a/packages/vrender-components/src/indicator/indicator.ts b/packages/vrender-components/src/indicator/indicator.ts
index c3a4cad5c..5fe38ff11 100644
--- a/packages/vrender-components/src/indicator/indicator.ts
+++ b/packages/vrender-components/src/indicator/indicator.ts
@@ -1,10 +1,10 @@
/**
* @description 指标卡组件
*/
-import type { IGroup, INode, IText, ITextGraphicAttribute } from '@visactor/vrender-core';
+import type { IGroup, IRichText, IText, ITextGraphicAttribute } from '@visactor/vrender-core';
import { merge, isValid, array, isValidNumber, get } from '@visactor/vutils';
import { AbstractComponent } from '../core/base';
-import { isRichText, measureTextSize, richTextAttributeTransform } from '../util';
+import { createTextGraphicByType, measureTextSize } from '../util';
import type { IndicatorAttributes, IndicatorItemSpec } from './type';
import { DEFAULT_INDICATOR_THEME } from './config';
import { loadIndicatorComponent } from './register';
@@ -13,125 +13,72 @@ loadIndicatorComponent();
export class Indicator extends AbstractComponent> {
name = 'indicator';
- private _title?: IText;
- private _content?: IText | IText[];
+ private _title?: IText | IRichText;
+ private _content?: (IText | IRichText)[];
+
+ protected _renderText(
+ group: IGroup,
+ title: IndicatorItemSpec,
+ limit: number,
+ limitRatio: number,
+ themePath: string,
+ graphicName: string
+ ) {
+ if (title.visible !== false) {
+ const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, themePath), title.style, {
+ visible: title.visible
+ });
+ titleStyle.lineHeight = isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize;
- protected render() {
- const { visible, title = {}, content, size, limitRatio = Infinity } = this.attribute as IndicatorAttributes;
+ if (title.formatMethod) {
+ titleStyle._originText = titleStyle.text;
+ titleStyle.text = title.formatMethod(titleStyle.text, titleStyle);
+ }
+ const textGraphic = createTextGraphicByType(titleStyle);
+ textGraphic.name = graphicName;
+ group.appendChild(textGraphic);
- const limit = Math.min(size.width, size.height) * limitRatio;
+ // auto-fit
+ if (title.autoFit && isValidNumber(limit)) {
+ this._setLocalAutoFit(limit, textGraphic as IText, title);
+ }
- const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group') as IGroup;
+ //auto-limit
+ if (title.autoLimit && isValidNumber(limitRatio)) {
+ textGraphic.setAttribute('maxLineWidth', limit);
+ }
+
+ return textGraphic;
+ }
+
+ return undefined;
+ }
- // 指标卡全部隐藏
- if (visible !== true) {
- group && group.hideAll();
+ protected render() {
+ this.removeAllChild(true);
+
+ if (this.attribute.visible !== true) {
return;
}
+ const { title = {}, content, size, limitRatio = Infinity } = this.attribute as IndicatorAttributes;
- if (isValid(title)) {
- if (title.visible !== false) {
- const titleStyle = merge({}, get(DEFAULT_INDICATOR_THEME, 'title.style'), title.style);
- if (isRichText(titleStyle)) {
- this._title = group.createOrUpdateChild(
- 'indicator-title',
- {
- ...richTextAttributeTransform(titleStyle),
- visible: title.visible,
- x: 0,
- y: 0
- },
- 'richtext'
- ) as IText;
- } else {
- this._title = group.createOrUpdateChild(
- 'indicator-title',
- {
- ...titleStyle,
- /**
- * 加入以下逻辑：如果没有声明lineHeight，默认 lineHeight 等于 fontSize
- * 因为如果不声明 vrender 底层会默认给文本加上 2px 的高度，会影响布局计算
- * 注意：在autoFit改变fontsize时，lineHeight也要同步修改
- */
- lineHeight: isValid(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,
- visible: title.visible,
- x: 0,
- y: 0
- },
- 'text'
- ) as IText;
- }
+ const limit = Math.min(size.width, size.height) * limitRatio;
- // auto-fit
- if (title.autoFit && isValidNumber(limit)) {
- this._setLocalAutoFit(limit, this._title, title);
- }
+ const group = this.createOrUpdateChild('indicator-container', { x: 0, y: 0, zIndex: 1 }, 'group') as IGroup;
- //auto-limit
- if (title.autoLimit && isValidNumber(limitRatio)) {
- this._title.setAttribute('maxLineWidth', limit);
- }
- } else {
- /**
- * indicator部分隐藏
- * 例如title隐藏了，content还保留。直接设置visible:false 计算group.AABBounts是错的，影响上下居中。
- * 这里把隐藏的nodes删除后，group.AABBounts计算才正确。
- */
- const titleNode = group.find(node => node.name === 'indicator-title', false);
- titleNode && group.removeChild(titleNode as INode);
- this._title = undefined;
- }
+ if (isValid(title)) {
+ this._title = this._renderText(group, title, limit, limitRatio, 'title.style', 'indicator-title');
}
if (isValid(content)) {
const contents: IndicatorItemSpec[] = array(content);
- const contentComponents: IText[] = [];
+ const contentComponents: (IText | IRichText)[] = [];
contents.forEach((contentItem, i) => {
if (contentItem.visible !== false) {
- const contentStyle = merge({}, get(DEFAULT_INDICATOR_THEME, 'content.style'), contentItem.style);
- let contentComponent;
- if (isRichText(contentStyle)) {
- contentComponent = group.createOrUpdateChild(
- 'indicator-content-' + i,
- {
- ...richTextAttributeTransform(contentStyle),
- visible: title.visible,
- x: 0,
- y: 0
- },
- 'richtext'
- ) as IText;
- } else {
- contentComponent = group.createOrUpdateChild(
- 'indicator-content-' + i,
- {
- ...contentStyle,
- lineHeight: isValid(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,
- visible: contentItem.visible,
- x: 0,
- y: 0
- },
- 'text'
- ) as IText;
- }
-
- // auto-fit
- if (contentItem.autoFit && isValidNumber(limit)) {
- this._setLocalAutoFit(limit, contentComponent, contentItem);
- }
-
- //auto-limit
- if (contentItem.autoLimit && isValidNumber(limitRatio)) {
- contentComponent.setAttribute('maxLineWidth', limit);
- }
-
- contentComponents.push(contentComponent);
+ contentComponents.push(
+ this._renderText(group, contentItem, limit, limitRatio, 'content.style', 'indicator-content-' + i)
+ );
} else {
- /**
- * indicator部分隐藏
- */
- const contentItemNode = group.find(node => node.name === 'indicator-content-' + i, false);
- contentItemNode && group.removeChild(contentItemNode as INode);
}
});
this._content = contentComponents;
@@ -184,7 +131,7 @@ export class Indicator extends AbstractComponent>
const titleSpec = this.attribute.title ?? {};
if (titleSpec.autoFit && titleSpec.fitStrategy === 'inscribed') {
this._title.setAttribute('fontSize', singleHeight);
- autoFitTexts.push({ text: this._title, spec: this.attribute.title ?? {} });
+ autoFitTexts.push({ text: this._title as IText, spec: this.attribute.title ?? {} });
} else {
otherHeight += this._title?.AABBBounds?.height?.() ?? 0;
}
@@ -197,7 +144,7 @@ export class Indicator extends AbstractComponent>
const contentText = this._content[index];
if (contentSpec.autoFit && contentSpec.fitStrategy === 'inscribed') {
contentText.setAttribute('fontSize', singleHeight);
- autoFitTexts.push({ text: contentText, spec: contentSpec });
+ autoFitTexts.push({ text: contentText as IText, spec: contentSpec });
} else {
otherHeight += contentText?.AABBBounds?.height?.() ?? 0;
}
diff --git a/packages/vrender-components/src/indicator/type.ts b/packages/vrender-components/src/indicator/type.ts
index d82d95841..64daea0a4 100644
--- a/packages/vrender-components/src/indicator/type.ts
+++ b/packages/vrender-components/src/indicator/type.ts
@@ -68,6 +68,13 @@ export interface IndicatorItemSpec {
* @default 'local'
*/
fitStrategy?: 'default' | 'inscribed';
+ /**
+ * 格式化方法
+ * @since 0.20.0
+ * @param text 文本
+ * @returns
+ */
+ formatMethod?: (text: string | number, textStyle: ITextGraphicAttribute) => TextContent;
/**
* 文字样式
*/
diff --git a/packages/vrender-components/src/timeline/index.ts b/packages/vrender-components/src/timeline/index.ts
new file mode 100644
index 000000000..40e96023f
--- /dev/null
+++ b/packages/vrender-components/src/timeline/index.ts
@@ -0,0 +1,2 @@
+export * from './timeline';
+export * from './type';
diff --git a/packages/vrender-components/src/timeline/register.ts b/packages/vrender-components/src/timeline/register.ts
new file mode 100644
index 000000000..923e145e7
--- /dev/null
+++ b/packages/vrender-components/src/timeline/register.ts
@@ -0,0 +1,8 @@
+import { registerGroup, registerSymbol, registerLine, registerText } from '@visactor/vrender-kits';
+
+export function loadTimelineComponent() {
+ registerGroup();
+ registerText();
+ registerSymbol();
+ registerLine();
+}
diff --git a/packages/vrender-components/src/timeline/timeline.ts b/packages/vrender-components/src/timeline/timeline.ts
new file mode 100644
index 000000000..d5f566dca
--- /dev/null
+++ b/packages/vrender-components/src/timeline/timeline.ts
@@ -0,0 +1,299 @@
+import { isArray, merge } from '@visactor/vutils';
+import { AbstractComponent } from '../core/base';
+import { loadTimelineComponent } from './register';
+import type { TimelineAttrs } from './type';
+import type { ComponentOptions } from '../interface';
+import type { IGraphicAttribute, IGroup, ILine, IText } from '@visactor/vrender-core';
+import type { ISymbol } from '@visactor/vrender-core';
+
+loadTimelineComponent();
+
+export class Timeline extends AbstractComponent> {
+ name = 'timeline';
+
+ private _line?: ILine;
+ private _activeLine?: ILine;
+ private _symbolGroup?: IGroup;
+ private _labelGroup?: IGroup;
+ private _timesPercent?: number[];
+
+ static defaultAttributes: Partial = {
+ labelSpace: 10,
+ pointLayoutMode: 'space-around',
+ animation: true,
+ symbolStyle: {
+ fill: 'black',
+ size: 12,
+ symbolType: 'circle'
+ },
+ activeSymbolStyle: {
+ fill: 'orange'
+ },
+ lineStyle: {
+ lineDash: [2, 2],
+ lineCap: 'butt',
+ stroke: 'black',
+ lineWidth: 2
+ },
+ activeLineStyle: {
+ stroke: 'orange',
+ lineWidth: 4
+ },
+ labelStyle: {
+ fontSize: 12,
+ fill: 'black',
+ textAlign: 'center',
+ textBaseline: 'top'
+ },
+ activeLabelStyle: {
+ fontSize: 14,
+ fill: 'orange'
+ },
+ clipRange: 0
+ };
+
+ constructor(attributes: TimelineAttrs, options?: ComponentOptions) {
+ super(options?.skipDefault ? attributes : merge({}, Timeline.defaultAttributes, attributes));
+ }
+
+ protected render(): void {
+ const {
+ width,
+ lineStyle,
+ activeLineStyle,
+ symbolStyle,
+ activeSymbolStyle,
+ labelStyle,
+ activeLabelStyle,
+ times,
+ pointLayoutMode,
+ labelSpace,
+ clipRange,
+ animation
+ } = this.attribute;
+
+ if (!(times && times.length)) {
+ return;
+ }
+
+ // 计算线段中心的y位置，考虑线宽和symbol宽度
+ const symbolHeight = (isArray(symbolStyle.size) ? symbolStyle.size[1] : symbolStyle.size) || 0;
+ const activeSymbolHeight =
+ (isArray(activeSymbolStyle.size) ? activeSymbolStyle.size[1] : activeSymbolStyle.size) || 0;
+ const lineSymbolHeight = Math.max(
+ lineStyle.lineWidth || 0,
+ activeLineStyle.lineWidth || 0,
+ symbolHeight,
+ activeSymbolHeight
+ );
+ const lineY = lineSymbolHeight / 2;
+ const lineAttr = {
+ y: lineY,
+ points: [
+ { x: 0, y: 0 },
+ { x: width, y: 0 }
+ ]
+ };
+ this._line = this.createOrUpdateChild(
+ 'line-axes',
+ {
+ ...lineStyle,
+ ...lineAttr
+ },
+ 'line'
+ ) as ILine;
+ this._activeLine = this.createOrUpdateChild(
+ 'active-line-axes',
+ {
+ ...activeLineStyle,
+ ...lineAttr,
+ clipRange
+ },
+ 'line'
+ ) as ILine;
+
+ const activeWidth = width * clipRange;
+
+ const symbolGroup = this.createOrUpdateChild(
+ 'symbol-group',
+ {
+ y: lineY
+ },
+ 'group'
+ ) as IGroup;
+ const symbolSpace =
+ times.length === 1
+ ? width
+ : pointLayoutMode === 'space-between'
+ ? width / (times.length - 1)
+ : width / times.length;
+ const symbolStartX = pointLayoutMode === 'space-between' ? 0 : symbolSpace / 2;
+ this._timesPercent = times.map((_, i) => (symbolStartX + symbolSpace * i) / width);
+
+ times.forEach((item, i) => {
+ const x = this._timesPercent[i] * width;
+ symbolGroup.createOrUpdateChild(
+ item.label,
+ {
+ ...symbolStyle,
+ x
+ },
+ 'symbol'
+ );
+ });
+ this._symbolGroup = symbolGroup;
+
+ const labelY = lineSymbolHeight + labelSpace;
+ const labelGroup = this.createOrUpdateChild(
+ 'label-group',
+ {
+ y: labelY
+ },
+ 'group'
+ ) as IGroup;
+
+ times.forEach((item, i) => {
+ const x = this._timesPercent[i] * width;
+ labelGroup.createOrUpdateChild(
+ item.label,
+ {
+ ...labelStyle,
+ x,
+ text: item.label
+ },
+ 'text'
+ );
+ });
+ this._labelGroup = labelGroup;
+
+ const setActive = (group: IGroup, activeStyle: Partial) => {
+ group.forEachChildren((label: IText) => {
+ if (label.currentStates) {
+ const currentStates = label.currentStates;
+ label.clearStates();
+ label.useStates(currentStates, false);
+ }
+ label.states = {
+ active: activeStyle
+ };
+ if (label.attribute.x <= activeWidth) {
+ label.useStates(['active'], animation);
+ }
+ });
+ };
+
+ setActive(labelGroup, activeLabelStyle);
+ setActive(symbolGroup, activeSymbolStyle);
+ }
+
+ appearAnimate(animateConfig: { duration?: number; easing?: string }) {
+ // 基准时间，line[0, 500], point[100, 600] 100 onebyone, pointNormal[600, 1000] 90+90 onebyone, activeLine[500, 700]
+ // line和activeLine的clipRange
+ const { duration = 1000, easing = 'quadOut' } = animateConfig;
+ const { activeLabelStyle, activeSymbolStyle } = this.attribute;
+ const percent = duration / 1000;
+ const lineDuration = percent * 500;
+ const activeLineDuration = percent * 200;
+ const perSymbolDuration = percent * 100;
+ const perSymbolNormalDuration = percent * 90;
+ const symbolDelay = percent * 100;
+ const symbolNormalDelay = percent * 600;
+ if (this._line) {
+ this._line.setAttributes({ clipRange: 0 });
+ this._line.animate().to({ clipRange: 1 }, lineDuration, easing as any);
+ }
+ if (this._activeLine) {
+ this._activeLine.setAttributes({ opacity: 0 });
+ this._activeLine
+ .animate()
+ .wait(500)
+ .to({ opacity: 1 }, activeLineDuration, easing as any);
+ }
+ if (this._symbolGroup) {
+ const size = this._symbolGroup.count - 1;
+ const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
+ const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
+ this._symbolGroup.forEachChildren((symbol: ISymbol, i) => {
+ const originAttrs = { ...symbol.attribute };
+ symbol.setAttributes({ opacity: 0 });
+ symbol
+ .animate()
+ .wait(symbolDelay + delay * i)
+ .to({ opacity: 1 }, perSymbolDuration, easing as any);
+ symbol
+ .animate()
+ .wait(symbolNormalDelay + delayNormal * i)
+ .to({ scaleX: 1.8, scaleY: 1.8, ...activeSymbolStyle }, perSymbolNormalDuration, easing as any)
+ .to({ scaleX: 1, scaleY: 1, ...originAttrs }, perSymbolNormalDuration, easing as any);
+ });
+ }
+ if (this._labelGroup) {
+ const size = this._labelGroup.count - 1;
+ const delay = percent * (size === 1 ? 0 : (500 - 100) / (size - 1));
+ const delayNormal = percent * (size === 1 ? 0 : (400 - 160) / (size - 1));
+ this._labelGroup.forEachChildren((label: IText, i) => {
+ const originAttrs = { ...label.attribute };
+ label.setAttributes({ opacity: 0 });
+ label
+ .animate()
+ .wait(symbolDelay + delay * i)
+ .to({ opacity: 1 }, perSymbolDuration, easing as any);
+ label
+ .animate()
+ .wait(symbolNormalDelay + delayNormal * i)
+ .to({ dy: 10, ...activeLabelStyle }, perSymbolNormalDuration, easing as any)
+ .to({ dy: 0, ...originAttrs }, perSymbolNormalDuration, easing as any);
+ });
+ }
+ }
+
+ goto(flag: 1 | -1, animateConfig: { duration?: number; easing?: string }) {
+ let { clipRange } = this.attribute;
+ const { animation } = this.attribute;
+
+ // 合法性判断
+ if (flag > 0) {
+ if (clipRange >= 1) {
+ return;
+ } else if (clipRange < 0) {
+ clipRange = 0;
+ }
+ } else {
+ if (clipRange <= 0) {
+ return;
+ } else if (clipRange > 1) {
+ clipRange = 1;
+ }
+ }
+
+ if (clipRange !== this.attribute.clipRange) {
+ this.setAttributes({ clipRange });
+ }
+
+ // 判断区间
+ let i = 0;
+ for (; i < this._timesPercent.length; i++) {
+ if (clipRange < this._timesPercent[i]) {
+ break;
+ }
+ }
+
+ const nextClipRange = flag > 0 ? this._timesPercent[i] : this._timesPercent[i - 1] || 0;
+ if (animation) {
+ const { duration = 1000, easing = 'quadOut' } = animateConfig;
+ const actDuration =
+ (Math.abs(nextClipRange - clipRange) / (this._timesPercent[i] - (this._timesPercent[i - 1] ?? 0))) * duration;
+ this.animate().to({ clipRange: nextClipRange }, actDuration, easing as any);
+ } else {
+ this.setAttributes({ clipRange: nextClipRange });
+ }
+ }
+
+ forward(animateConfig: { duration?: number; easing?: string }) {
+ this.goto(1, animateConfig);
+ }
+
+ backward(animateConfig: { duration?: number; easing?: string }) {
+ this.goto(-1, animateConfig);
+ }
+}
diff --git a/packages/vrender-components/src/timeline/type.ts b/packages/vrender-components/src/timeline/type.ts
new file mode 100644
index 000000000..f95efd13a
--- /dev/null
+++ b/packages/vrender-components/src/timeline/type.ts
@@ -0,0 +1,24 @@
+import type {
+ IGroupGraphicAttribute,
+ ILineGraphicAttribute,
+ ISymbolGraphicAttribute,
+ ITextGraphicAttribute
+} from '@visactor/vrender-core';
+import { ILineAttribute, ISymbolAttribute } from '@visactor/vrender-core';
+
+export interface TimelineAttrs extends IGroupGraphicAttribute {
+ width: number;
+ // height?: number;
+ times: { label: string; desc?: string }[];
+ labelSpace?: number;
+ symbolStyle?: Partial;
+ activeSymbolStyle?: Partial;
+ lineStyle?: Partial;
+ activeLineStyle?: Partial;
+ labelStyle?: Partial;
+ activeLabelStyle?: Partial;
+ pointLayoutMode?: 'space-around' | 'space-between';
+ // 当前进度
+ clipRange?: number;
+ animation?: boolean;
+}
diff --git a/packages/vrender-core/CHANGELOG.json b/packages/vrender-core/CHANGELOG.json
index 1043983e1..275247033 100644
--- a/packages/vrender-core/CHANGELOG.json
+++ b/packages/vrender-core/CHANGELOG.json
@@ -1,6 +1,21 @@
{
"name": "@visactor/vrender-core",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/vrender-core_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {
+ "none": [
+ {
+ "comment": "feat: shadow graphic support pick group"
+ },
+ {
+ "comment": "fix: fix issue with Event class in harmony event"
+ }
+ ]
+ }
+ },
{
"version": "0.19.21",
"tag": "@visactor/vrender-core_v0.19.21",
diff --git a/packages/vrender-core/CHANGELOG.md b/packages/vrender-core/CHANGELOG.md
index cd6f29f06..4592e59fb 100644
--- a/packages/vrender-core/CHANGELOG.md
+++ b/packages/vrender-core/CHANGELOG.md
@@ -1,6 +1,14 @@
# Change Log - @visactor/vrender-core
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+### Updates
+
+- feat: shadow graphic support pick group
+- fix: fix issue with Event class in harmony event
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/vrender-core/package.json b/packages/vrender-core/package.json
index fbbf75e28..ff6f7f009 100644
--- a/packages/vrender-core/package.json
+++ b/packages/vrender-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender-core",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "",
"sideEffects": [
"./src/modules.ts",
diff --git a/packages/vrender-core/src/common/text.ts b/packages/vrender-core/src/common/text.ts
index 866a3ae1f..a91d6c871 100644
--- a/packages/vrender-core/src/common/text.ts
+++ b/packages/vrender-core/src/common/text.ts
@@ -1,6 +1,6 @@
// 存放一些公共方法，公共配置
-import { isNil, isString, type ITextFontParams, lowerCamelCaseToMiddle } from '@visactor/vutils';
+import { isNil, isString, isValid, type ITextFontParams, lowerCamelCaseToMiddle } from '@visactor/vutils';
import type { ITextGraphicAttribute, TextAlignType, TextBaselineType } from '../interface';
export function getContextFont(
@@ -98,6 +98,9 @@ export function textAttributesToStyle(attrs: ITextGraphicAttribute) {
const stringTypes = ['textAlign', 'fontFamily', 'fontVariant', 'fontStyle', 'fontWeight'];
const pxKeys = ['fontSize', 'lineHeight'];
const style: any = {};
+ const parsePxValue = (value: string | number) => {
+ return /^\d+(\.\d+)?$/.test(`${value}`) ? `${value}px` : `${value}`;
+ };
stringTypes.forEach(key => {
if (attrs[key]) {
@@ -108,10 +111,14 @@ export function textAttributesToStyle(attrs: ITextGraphicAttribute) {
pxKeys.forEach(key => {
const styleKey = lowerCamelCaseToMiddle(key);
if (!isNil(attrs[key])) {
- style[styleKey] = /^[0-9]*$/.test(`${attrs[key]}`) ? `${attrs[key]}px` : `${attrs[key]}`;
+ style[styleKey] = parsePxValue(attrs[key]);
}
});
+ if (isValid(attrs.maxLineWidth)) {
+ style['max-width'] = parsePxValue(attrs.maxLineWidth);
+ }
+
if (attrs.underline) {
style['text-decoration'] = 'underline';
} else if (attrs.lineThrough) {
diff --git a/packages/vrender-core/src/event/federated-event/base-event.ts b/packages/vrender-core/src/event/federated-event/base-event.ts
index 737bcda75..d232dd1e0 100644
--- a/packages/vrender-core/src/event/federated-event/base-event.ts
+++ b/packages/vrender-core/src/event/federated-event/base-event.ts
@@ -1,3 +1,4 @@
+import { isFunction } from '@visactor/vutils';
import type { IPickEventParams } from '../../interface';
import type { EventPoint, IEventTarget } from '../../interface/event';
import type { EventManager } from '../event-manager';
@@ -200,8 +201,14 @@ export class FederatedEvent implements Event {
}
preventDefault(): void {
- if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
- this.nativeEvent.preventDefault();
+ try {
+ if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
+ this.nativeEvent.preventDefault();
+ }
+ } catch (err) {
+ this.nativeEvent.preventDefault &&
+ isFunction(this.nativeEvent.preventDefault) &&
+ this.nativeEvent.preventDefault();
}
this.defaultPrevented = true;
@@ -212,8 +219,14 @@ export class FederatedEvent implements Event {
}
stopPropagation(): void {
- if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
- this.nativeEvent.stopPropagation();
+ try {
+ if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
+ this.nativeEvent.stopPropagation();
+ }
+ } catch (err) {
+ this.nativeEvent.stopPropagation &&
+ isFunction(this.nativeEvent.stopPropagation) &&
+ this.nativeEvent.stopPropagation();
}
this.propagationStopped = true;
diff --git a/packages/vrender-core/src/picker/pick-interceptor.ts b/packages/vrender-core/src/picker/pick-interceptor.ts
index 7e8300239..40b66b5d0 100644
--- a/packages/vrender-core/src/picker/pick-interceptor.ts
+++ b/packages/vrender-core/src/picker/pick-interceptor.ts
@@ -94,6 +94,11 @@ export class ShadowRootPickItemInterceptorContribution implements IPickItemInter
context.highPerformanceRestore();
+ // 影子节点pick到group也算pick到graphic
+ if (!result.graphic && result.group) {
+ result.graphic = result.group;
+ }
+
return result;
}
}
diff --git a/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts b/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts
index 59bb38d65..c59c3ef1c 100644
--- a/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts
+++ b/packages/vrender-core/src/plugins/builtin-plugin/html-attribute-plugin.ts
@@ -161,8 +161,9 @@ export class HtmlAttributePlugin implements IPlugin {
// const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);
const containerTL = application.global.getElementTopLeft(nativeContainer, false);
const windowTL = stage.window.getTopLeft(false);
- const offsetX = left + windowTL.left - containerTL.left;
- const offsetTop = top + windowTL.top - containerTL.top;
+ const viewBox = stage.viewBox;
+ const offsetX = left + windowTL.left - containerTL.left + viewBox.x1;
+ const offsetTop = top + windowTL.top - containerTL.top + viewBox.y1;
// wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;
calculateStyle.left = `${offsetX}px`;
calculateStyle.top = `${offsetTop}px`;
diff --git a/packages/vrender-core/src/render/contributions/render/index.ts b/packages/vrender-core/src/render/contributions/render/index.ts
index f8849fa44..d8e303f51 100644
--- a/packages/vrender-core/src/render/contributions/render/index.ts
+++ b/packages/vrender-core/src/render/contributions/render/index.ts
@@ -8,6 +8,7 @@ export * from './symbol-render';
export * from './text-render';
export * from './graphic-render';
export * from './polygon-render';
+export * from './group-render';
export * from './image-render';
export * from './symbol';
export * from './contributions';
diff --git a/packages/vrender-kits/CHANGELOG.json b/packages/vrender-kits/CHANGELOG.json
index 3a4a24922..c47b704ac 100644
--- a/packages/vrender-kits/CHANGELOG.json
+++ b/packages/vrender-kits/CHANGELOG.json
@@ -1,6 +1,12 @@
{
"name": "@visactor/vrender-kits",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/vrender-kits_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {}
+ },
{
"version": "0.19.21",
"tag": "@visactor/vrender-kits_v0.19.21",
diff --git a/packages/vrender-kits/CHANGELOG.md b/packages/vrender-kits/CHANGELOG.md
index 13ba2f9ec..27ce15800 100644
--- a/packages/vrender-kits/CHANGELOG.md
+++ b/packages/vrender-kits/CHANGELOG.md
@@ -1,6 +1,11 @@
# Change Log - @visactor/vrender-kits
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+_Version update only_
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/vrender-kits/package.json b/packages/vrender-kits/package.json
index 55cfdb81f..75dda8c2d 100644
--- a/packages/vrender-kits/package.json
+++ b/packages/vrender-kits/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender-kits",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "",
"sideEffects": false,
"main": "cjs/index.js",
@@ -20,7 +20,7 @@
"test": ""
},
"dependencies": {
- "@visactor/vrender-core": "workspace:0.19.21",
+ "@visactor/vrender-core": "workspace:0.19.22",
"@visactor/vutils": "~0.18.10",
"@resvg/resvg-js": "2.4.1",
"roughjs": "4.5.2"
diff --git a/packages/vrender/CHANGELOG.json b/packages/vrender/CHANGELOG.json
index fd2c80da4..c3f960141 100644
--- a/packages/vrender/CHANGELOG.json
+++ b/packages/vrender/CHANGELOG.json
@@ -1,6 +1,12 @@
{
"name": "@visactor/vrender",
"entries": [
+ {
+ "version": "0.19.22",
+ "tag": "@visactor/vrender_v0.19.22",
+ "date": "Mon, 05 Aug 2024 09:08:30 GMT",
+ "comments": {}
+ },
{
"version": "0.19.21",
"tag": "@visactor/vrender_v0.19.21",
diff --git a/packages/vrender/CHANGELOG.md b/packages/vrender/CHANGELOG.md
index 8b11ff795..7d60606cb 100644
--- a/packages/vrender/CHANGELOG.md
+++ b/packages/vrender/CHANGELOG.md
@@ -1,6 +1,11 @@
# Change Log - @visactor/vrender
-This log was last generated on Mon, 05 Aug 2024 01:39:45 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Aug 2024 09:08:30 GMT and should not be manually modified.
+
+## 0.19.22
+Mon, 05 Aug 2024 09:08:30 GMT
+
+_Version update only_
## 0.19.21
Mon, 05 Aug 2024 01:39:45 GMT
diff --git a/packages/vrender/package.json b/packages/vrender/package.json
index 3179b0dcb..2aa6e7b73 100644
--- a/packages/vrender/package.json
+++ b/packages/vrender/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender",
- "version": "0.19.21",
+ "version": "0.19.22",
"description": "",
"sideEffects": true,
"main": "cjs/index.js",
@@ -24,8 +24,8 @@
"test-watch": "cross-env DEBUG_MODE=1 jest --watch"
},
"dependencies": {
- "@visactor/vrender-core": "workspace:0.19.21",
- "@visactor/vrender-kits": "workspace:0.19.21"
+ "@visactor/vrender-core": "workspace:0.19.22",
+ "@visactor/vrender-kits": "workspace:0.19.22"
},
"devDependencies": {
"@internal/bundler": "workspace:*",
diff --git a/tools/bugserver-trigger/package.json b/tools/bugserver-trigger/package.json
index 47d6aba44..b03036456 100644
--- a/tools/bugserver-trigger/package.json
+++ b/tools/bugserver-trigger/package.json
@@ -8,10 +8,10 @@
"ci": "ts-node --transpileOnly --skipProject ./scripts/trigger-test.ts"
},
"dependencies": {
- "@visactor/vrender": "workspace:0.19.21",
- "@visactor/vrender-core": "workspace:0.19.21",
- "@visactor/vrender-kits": "workspace:0.19.21",
- "@visactor/vrender-components": "workspace:0.19.21"
+ "@visactor/vrender": "workspace:0.19.22",
+ "@visactor/vrender-core": "workspace:0.19.22",
+ "@visactor/vrender-kits": "workspace:0.19.22",
+ "@visactor/vrender-components": "workspace:0.19.22"
},
"devDependencies": {
"@rushstack/eslint-patch": "~1.1.4",