diff --git a/README.md b/README.md
index 00568b6b2..4dc3415fd 100644
--- a/README.md
+++ b/README.md
@@ -16,15 +16,13 @@
VRender, not just a feature-rich visual rendering engine, but also a skillful and ingenious tool for creating beautiful artwork.
- Introduction •
- Demo •
- Tutorial •
- API •
- Cross-Platform
+ Introduction •
+ Demo •
+ Tutorial •
-
-
+
+
[](https://www.npmjs.com/package/@visactor/vrender)
[](https://www.npmjs.com/package/@visactor/vrender)
[](https://github.com/visactor/vrender/blob/main/LICENSE)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 19aa9e15a..b38be7167 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -16,13 +16,13 @@
VRender，不只是一个功能丰富的可视化渲染引可视化渲染擎，更是一支得心应手的生花妙笔。
- 简介 •
- demo •
- 教程 •
- API •
- 跨端
+ 简介 •
+ demo •
+ 教程 •
+
+
[](https://www.npmjs.com/package/@visactor/vrender)
[](https://www.npmjs.com/package/@visactor/vrender)
[](https://github.com/visactor/vrender/blob/main/LICENSE)
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 75d4d728d..8e3c61ae8 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
'@esbuild-plugins/node-modules-polyfill': 0.1.4
'@internal/eslint-config': workspace:*
'@internal/ts-config': workspace:*
- '@visactor/vrender': workspace:0.14.4
- '@visactor/vrender-kits': workspace:0.12.18
+ '@visactor/vrender': workspace:0.14.5
+ '@visactor/vrender-kits': workspace:0.12.19
'@visactor/vutils': ~0.15.5
canvas: 2.11.2
d3-scale-chromatic: ^3.0.0
@@ -55,7 +55,7 @@ importers:
'@types/react': 16.9.49
'@types/react-dom': 16.9.8
'@types/react-reconciler': ^0.28.2
- '@visactor/vrender': workspace:0.14.4
+ '@visactor/vrender': workspace:0.14.5
'@visactor/vutils': ~0.15.5
'@vitejs/plugin-react': 3.1.0
eslint: ~8.18.0
@@ -93,8 +93,8 @@ importers:
'@rushstack/eslint-patch': ~1.1.4
'@types/react': 16.9.49
'@types/react-dom': 16.9.8
- '@visactor/react-vrender': workspace:0.12.18
- '@visactor/vrender': workspace:0.14.4
+ '@visactor/react-vrender': workspace:0.12.19
+ '@visactor/vrender': workspace:0.14.5
'@visactor/vutils': ~0.15.5
'@vitejs/plugin-react': 3.1.0
eslint: ~8.18.0
@@ -184,7 +184,7 @@ importers:
'@internal/ts-config': workspace:*
'@rushstack/eslint-patch': ~1.1.4
'@types/jest': ^26.0.0
- '@visactor/vrender': workspace:0.14.4
+ '@visactor/vrender': workspace:0.14.5
'@visactor/vscale': ~0.15.5
'@visactor/vutils': ~0.15.5
eslint: ~8.18.0
@@ -224,7 +224,7 @@ importers:
'@types/node-fetch': 2.6.4
'@types/react': 16.9.49
'@types/react-dom': 16.9.8
- '@visactor/vrender': workspace:0.14.4
+ '@visactor/vrender': workspace:0.14.5
'@visactor/vutils': ~0.15.5
'@vitejs/plugin-react': 3.1.0
canvas: 2.11.2
diff --git a/docs/demos/package.json b/docs/demos/package.json
index 110477a0f..d63c67577 100644
--- a/docs/demos/package.json
+++ b/docs/demos/package.json
@@ -11,7 +11,7 @@
"devDependencies": {
"@internal/eslint-config": "workspace:*",
"@internal/ts-config": "workspace:*",
- "@visactor/vrender-kits": "workspace:0.12.18",
+ "@visactor/vrender-kits": "workspace:0.12.19",
"@visactor/vutils": "~0.15.5",
"d3-scale-chromatic": "^3.0.0",
"lodash": "4.17.21",
@@ -28,6 +28,6 @@
"@antv/g": "^5.7.4"
},
"dependencies": {
- "@visactor/vrender": "workspace:0.14.4"
+ "@visactor/vrender": "workspace:0.14.5"
}
}
diff --git a/docs/demos/src/pages/symbol.ts b/docs/demos/src/pages/symbol.ts
index afaba8111..ef72fe1e2 100644
--- a/docs/demos/src/pages/symbol.ts
+++ b/docs/demos/src/pages/symbol.ts
@@ -5,31 +5,72 @@ import { addShapesToStage, colorPools } from '../utils';
// container.load(roughModule);
export const page = () => {
-
const symbolList = [
- 'circle', 'cross', 'diamond', 'square', 'arrow', 'arrow2Left', 'arrow2Right', 'wedge', 'thinTriangle', 'triangle', 'triangleUp', 'triangleDown', 'triangleRight', 'triangleLeft', 'stroke', 'star', 'wye', 'rect',
+ 'circle',
+ 'cross',
+ 'diamond',
+ 'square',
+ 'arrow',
+ 'arrow2Left',
+ 'arrow2Right',
+ 'wedge',
+ 'thinTriangle',
+ 'triangle',
+ 'triangleUp',
+ 'triangleDown',
+ 'triangleRight',
+ 'triangleLeft',
+ 'stroke',
+ 'star',
+ 'wye',
+ 'rect',
'M -2 2 L 4 -5 L 7 -6 L 6 -3 L -1 3 C 0 4 0 5 1 4 C 1 5 2 6 1 6 A 1.42 1.42 0 0 1 0 7 A 5 5 0 0 0 -2 4 Q -2.5 3.9 -2.5 4.5 T -4 5.8 T -4.8 5 T -3.5 3.5 T -3 3 A 5 5 90 0 0 -6 1 A 1.42 1.42 0 0 1 -5 0 C -5 -1 -4 0 -3 0 C -4 1 -3 1 -2 2 M 4 -5 L 4 -3 L 6 -3 L 5 -4 L 4 -5'
- ]
+ ];
const graphics: IGraphic[] = [];
-
+
symbolList.forEach((st, i) => {
const symbol = createSymbol({
symbolType: st,
- x: (i * 100) % 500 + 100,
- y: (Math.floor(i * 100 / 500) + 1) * 100,
+ x: ((i * 100) % 500) + 100,
+ y: (Math.floor((i * 100) / 500) + 1) * 100,
size: 60,
- background:
- ' {
align: 'arc',
strategy: 'priority',
tangentConstraint: true
- }
+ },
+ pickable: false
};
private _ellipsisWidth: number = 0;
@@ -416,7 +417,7 @@ export class ArcLabel extends LabelBase {
} else {
// const alignOffset = this._computeAlignOffset(align, labelWidth, flag);
const alignOffset = 0;
- labelPosition.x = cx + alignOffset + flag * (spaceWidth + 0.5 * targetCenterOffset);
+ labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
}
}
diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts
index 5c3c623b6..932d2fadb 100644
--- a/packages/vrender-components/src/label/base.ts
+++ b/packages/vrender-components/src/label/base.ts
@@ -618,8 +618,8 @@ export abstract class LabelBase extends AbstractCompon
protected _smartInvert(labels: IText[]) {
const option = (this.attribute.smartInvert || {}) as SmartInvertAttrs;
const { textType, contrastRatiosThreshold, alternativeColors } = option;
- const fillStrategy = option.fillStrategy ?? 'invertSeries';
- const strokeStrategy = option.strokeStrategy ?? 'series';
+ const fillStrategy = option.fillStrategy ?? 'invertBase';
+ const strokeStrategy = option.strokeStrategy ?? 'base';
const brightColor = option.brightColor ?? '#ffffff';
const darkColor = option.darkColor ?? '#000000';
@@ -634,30 +634,22 @@ export abstract class LabelBase extends AbstractCompon
}
const baseMark = this._idToGraphic.get((label.attribute as LabelItem).id);
- // let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
-
- // if (this.attribute.type === 'arc') {
- // if (this.attribute.position === 'inside') {
- // isInside = true;
- // } else {
- // isInside = false;
- // }
- // }
+ let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
- // if (!isInside) {
- // continue;
- // }
+ if (this.attribute.type === 'arc') {
+ isInside = this.attribute.position === 'inside';
+ }
/**
* 增加smartInvert时fillStrategy和 strokeStrategy的四种策略：
* series（baseMark色），
* invertSeries（执行智能反色），
* similarSeries（智能反色的补色），
- * null（不执行智能反色，保持fill设置的颜色） */
-
+ * null（不执行智能反色，保持fill设置的颜色）
+ * */
const backgroundColor = baseMark.attribute.fill as IColor;
const foregroundColor = label.attribute.fill as IColor;
- const seriesColor = backgroundColor;
+ const baseColor = backgroundColor;
const invertColor = labelSmartInvert(
foregroundColor,
backgroundColor,
@@ -667,48 +659,40 @@ export abstract class LabelBase extends AbstractCompon
);
const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
- switch (fillStrategy) {
- case 'null':
- break;
- case 'series':
- label.setAttributes({
- fill: seriesColor
- });
- break;
- case 'invertSeries':
- label.setAttributes({
- fill: invertColor
- });
- break;
- case 'similarSeries':
- label.setAttributes({
- fill: simialrColor
- });
- break;
- }
+ if (isInside) {
+ this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
- if (label.attribute.lineWidth === 0) {
- continue;
- }
- switch (strokeStrategy) {
- case 'null':
- break;
- case 'series':
- label.setAttributes({
- stroke: seriesColor
- });
- break;
- case 'invertSeries':
- label.setAttributes({
- stroke: invertColor
- });
- break;
- case 'similarSeries':
+ if (label.attribute.lineWidth === 0) {
+ continue;
+ }
+
+ this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
+ } else {
+ /** 当label无法设置stroke时，不进行反色计算（容易反色为白色与白色背景混合不可见） */
+ if (label.attribute.lineWidth === 0) {
+ continue;
+ }
+
+ /** 当label设置stroke时，保留stroke设置的颜色，根据stroke对fill做反色 */
+ if (label.attribute.stroke) {
label.setAttributes({
- stroke: simialrColor
+ fill: labelSmartInvert(
+ label.attribute.fill as IColor,
+ label.attribute.stroke as IColor,
+ textType,
+ contrastRatiosThreshold,
+ alternativeColors
+ )
});
- break;
+ continue;
+ }
+
+ /** 当label未设置stroke，且可设置stroke时，正常计算 */
+ this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
+
+ this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
}
+
// /**
// * stroke 的处理逻辑
// * 1. 当文本在图元内部时，有两种情况：
@@ -758,6 +742,49 @@ export abstract class LabelBase extends AbstractCompon
}
}
+ setFillStrategy(fillStrategy: any, label: IText, baseColor: IColor, invertColor: IColor, simialrColor: IColor) {
+ switch (fillStrategy) {
+ case 'base':
+ label.setAttributes({
+ fill: baseColor
+ });
+ break;
+ case 'invertBase':
+ label.setAttributes({
+ fill: invertColor
+ });
+ break;
+ case 'similarBase':
+ label.setAttributes({
+ fill: simialrColor
+ });
+ default:
+ break;
+ }
+ }
+
+ setStrokeStrategy(strokeStrategy: any, label: IText, baseColor: IColor, invertColor: IColor, simialrColor: IColor) {
+ switch (strokeStrategy) {
+ case 'base':
+ label.setAttributes({
+ stroke: baseColor
+ });
+ break;
+ case 'invertBase':
+ label.setAttributes({
+ stroke: invertColor
+ });
+ break;
+ case 'similarBase':
+ label.setAttributes({
+ stroke: simialrColor
+ });
+ break;
+ default:
+ break;
+ }
+ }
+
setLocation(point: PointLocationCfg) {
this.translateTo(point.x, point.y);
}
diff --git a/packages/vrender-components/src/label/type.ts b/packages/vrender-components/src/label/type.ts
index 5d000f248..751f5e30b 100644
--- a/packages/vrender-components/src/label/type.ts
+++ b/packages/vrender-components/src/label/type.ts
@@ -135,22 +135,22 @@ export interface SmartInvertAttrs {
alternativeColors?: string | string[];
/**
* fillStrategy四种策略：
- * - series（baseMark色），
- * - invertSeries（执行智能反色），
- * - similarSeries（智能反色的补色），
- * - null（不执行智能反色，保持fill设置的颜色）
+ * - base（baseMark色），
+ * - invertBase（执行智能反色），
+ * - similarBase（智能反色的补色），
+ * - null（不执行智能反色，保持stroke设置的颜色）
* @default 'invertSeries'
*/
- fillStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null';
+ fillStrategy?: 'base' | 'invertBase' | 'similarBase' | 'null';
/**
* strokeStrategy的四种策略:
- * - series（baseMark色），
- * - invertSeries（执行智能反色），
- * - similarSeries（智能反色的补色），
+ * - base（baseMark色），
+ * - invertBase（执行智能反色），
+ * - similarBase（智能反色的补色），
* - null（不执行智能反色，保持fill设置的颜色）
* @default 'series'
*/
- strokeStrategy?: 'series' | 'invertSeries' | 'similarSeries' | 'null';
+ strokeStrategy?: 'base' | 'invertBase' | 'similarBase' | 'null';
/**
* 前景色与亮色具有对比度时，similarSeries使用该色
* @default '#ffffff'
diff --git a/packages/vrender-components/src/poptip/poptip.ts b/packages/vrender-components/src/poptip/poptip.ts
index 341456e02..2323908c9 100644
--- a/packages/vrender-components/src/poptip/poptip.ts
+++ b/packages/vrender-components/src/poptip/poptip.ts
@@ -155,10 +155,10 @@ export class PopTip extends AbstractComponent> {
const layout = position === 'auto';
// 最多循环this.positionList次
- let minifyBBoxI: number;
- let minifyBBoxSize: number = Infinity;
+ let maxBBoxI: number;
+ let maxBBoxSize: number = -Infinity;
for (let i = 0; i < this.positionList.length + 1; i++) {
- const p = layout ? this.positionList[i === this.positionList.length ? minifyBBoxI : i] : position;
+ const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
const { angle, offset, rectOffset } = this.getAngleAndOffset(
p,
popTipWidth,
@@ -221,9 +221,9 @@ export class PopTip extends AbstractComponent> {
} else {
const bbox = getRectIntersect(b, stageBounds, false);
const size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
- if (size < minifyBBoxSize) {
- minifyBBoxSize = size;
- minifyBBoxI = i;
+ if (size > maxBBoxSize) {
+ maxBBoxSize = size;
+ maxBBoxI = i;
}
}
} else {
diff --git a/packages/vrender-components/src/slider/slider.ts b/packages/vrender-components/src/slider/slider.ts
index 634d91f86..eeadc6e7d 100644
--- a/packages/vrender-components/src/slider/slider.ts
+++ b/packages/vrender-components/src/slider/slider.ts
@@ -1,4 +1,3 @@
-import { isNil, merge, clamp, isValid, array, isObject, isArray } from '@visactor/vutils';
/**
* @description slider 滑块组件
* TODO:
@@ -15,6 +14,7 @@ import type {
FederatedPointerEvent,
Cursor
} from '@visactor/vrender';
+import { isNil, merge, clamp, isValid, array, isObject, isArray, clampRange } from '@visactor/vutils';
import { createGroup, createText, vglobal, createRect, createSymbol, CustomEvent } from '@visactor/vrender';
import { AbstractComponent } from '../core/base';
import { SLIDER_ELEMENT_NAME } from './constant';
@@ -121,8 +121,13 @@ export class Slider extends AbstractComponent> {
* 更新值域
*/
setValue(value: number | number[]) {
- const [startValue, endValue] = array(value);
const { layout, railWidth, railHeight, min, max } = this.attribute as SliderAttributes;
+ if (max === min) {
+ return;
+ }
+
+ const [startValue, endValue] = array(value);
+
const { startHandler, endHandler } = this._getHandlers();
const railLen = layout === 'vertical' ? railHeight : railWidth;
const startPos = ((startValue - min) / (max - min)) * railLen;
@@ -279,9 +284,8 @@ export class Slider extends AbstractComponent> {
const railLen = isHorizontal ? railWidth : railHeight;
const [startValue, endValue] = convertValueToRange(value);
-
// 单滑块
- const handlerStart = (((startValue as number) - min) / (max - min)) * railLen;
+ const handlerStart = max === min ? (range ? 0 : railLen) : (((startValue as number) - min) / (max - min)) * railLen;
const startHandler = this._renderHandler({
x: isHorizontal ? handlerStart : railWidth / 2,
y: isHorizontal ? railHeight / 2 : handlerStart,
@@ -296,7 +300,7 @@ export class Slider extends AbstractComponent> {
this._currentValue.startPos = handlerStart;
if (handlerTextVisible) {
- const startHandlerText = this._renderHandlerText(startValue);
+ const startHandlerText = this._renderHandlerText(startValue, range ? 'start' : 'end');
startHandlerText.name = SLIDER_ELEMENT_NAME.startHandlerText;
container.add(startHandlerText);
@@ -306,7 +310,7 @@ export class Slider extends AbstractComponent> {
if (range) {
// 绘制第二个滑块
// 单滑块
- const handlerEnd = (((endValue as number) - min) / (max - min)) * railLen;
+ const handlerEnd = max === min ? railLen : (((endValue as number) - min) / (max - min)) * railLen;
const endHandler = this._renderHandler({
x: isHorizontal ? handlerEnd : railWidth / 2,
y: isHorizontal ? railHeight / 2 : handlerEnd,
@@ -321,7 +325,7 @@ export class Slider extends AbstractComponent> {
this._currentValue.endPos = handlerEnd;
if (handlerTextVisible) {
- const endHandlerText = this._renderHandlerText(endValue);
+ const endHandlerText = this._renderHandlerText(endValue, 'end');
endHandlerText.name = SLIDER_ELEMENT_NAME.endHandlerText;
container.add(endHandlerText);
@@ -332,17 +336,34 @@ export class Slider extends AbstractComponent> {
// 渲染选中区域
protected _renderTrack(container: IGroup) {
- const { range, min, max, railHeight, railWidth, trackStyle, railStyle, slidable } = this
+ const { range, min, max, railHeight, railWidth, trackStyle, railStyle, slidable, value } = this
.attribute as SliderAttributes;
- let { value } = this.attribute as SliderAttributes;
+
+ let startValue;
+ let endValue;
+
if (isNil(value)) {
- value = [min, max];
+ if (range) {
+ startValue = min;
+ endValue = max;
+ } else {
+ startValue = endValue = min;
+ }
+ } else {
+ if (range) {
+ const clampValue = clampRange(value as [number, number], min, max);
+ startValue = clampValue[0];
+ endValue = clampValue[1];
+ } else {
+ startValue = min;
+ endValue = clamp(value as number, min, max);
+ }
}
const isHorizontal = this._isHorizontal;
const railLen = isHorizontal ? railWidth : railHeight;
// eslint-disable-next-line prefer-const
- let [startValue, endValue] = convertValueToRange(value);
+ // let [startValue, endValue] = convertValueToRange(value);
if (!range) {
startValue = min;
@@ -371,10 +392,11 @@ export class Slider extends AbstractComponent> {
cursor = getDefaultCursor(isHorizontal);
}
- const trackWidth = ((endValue - startValue) / (max - min)) * railLen;
+ const trackWidth = max === min ? railLen : ((endValue - startValue) / (max - min)) * railLen;
+ const startPos = max === min ? 0 : ((startValue - min) / (max - min)) * railLen;
const track = createRect({
- x: isHorizontal ? ((startValue - min) / (max - min)) * railLen : 0,
- y: isHorizontal ? 0 : ((startValue - min) / (max - min)) * railLen,
+ x: isHorizontal ? startPos : 0,
+ y: isHorizontal ? 0 : startPos,
width: isHorizontal ? trackWidth : railWidth,
height: isHorizontal ? railHeight : trackWidth,
cursor,
@@ -393,7 +415,7 @@ export class Slider extends AbstractComponent> {
return handler;
}
- private _renderHandlerText(value: number) {
+ private _renderHandlerText(value: number, position: string) {
const {
align,
min,
@@ -407,7 +429,8 @@ export class Slider extends AbstractComponent> {
const isHorizontal = this._isHorizontal;
const railLen = isHorizontal ? railWidth : railHeight;
- const handlerStart = (((value as number) - min) / (max - min)) * railLen;
+ const handlerStart =
+ max === min ? (position === 'start' ? 0 : railLen) : (((value as number) - min) / (max - min)) * railLen;
const textSpace = handlerText.space ?? 4;
const textStyle: ITextGraphicAttribute = {
text: handlerText?.formatter ? handlerText.formatter(value) : value.toFixed(handlerText?.precision ?? 0),
@@ -515,6 +538,9 @@ export class Slider extends AbstractComponent> {
private _onHandlerPointerMove = (e: FederatedPointerEvent) => {
e.stopPropagation();
const { railWidth, railHeight, min, max } = this.attribute as SliderAttributes;
+ if (max === min) {
+ return;
+ }
let currentPos;
let delta = 0;
@@ -583,6 +609,10 @@ export class Slider extends AbstractComponent> {
private _onTrackPointerMove = (e: FederatedPointerEvent) => {
e.stopPropagation();
const { railWidth, railHeight, min, max } = this.attribute as SliderAttributes;
+
+ if (max === min) {
+ return;
+ }
const { startHandler, endHandler } = this._getHandlers();
let currentPos;
@@ -646,6 +676,11 @@ export class Slider extends AbstractComponent> {
private _onRailPointerDown = (e: FederatedPointerEvent) => {
e.stopPropagation();
const { railWidth, railHeight, min, max } = this.attribute as SliderAttributes;
+
+ if (max === min) {
+ return;
+ }
+
const startHandler = this._startHandler as ISymbol;
const endHandler = this._endHandler;
diff --git a/packages/vrender-kits/CHANGELOG.json b/packages/vrender-kits/CHANGELOG.json
index 5b6f653de..99787a5c5 100644
--- a/packages/vrender-kits/CHANGELOG.json
+++ b/packages/vrender-kits/CHANGELOG.json
@@ -1,6 +1,18 @@
{
"name": "@visactor/vrender-kits",
"entries": [
+ {
+ "version": "0.12.19",
+ "tag": "@visactor/vrender-kits_v0.12.19",
+ "date": "Wed, 23 Aug 2023 11:53:28 GMT",
+ "comments": {
+ "dependency": [
+ {
+ "comment": "Updating dependency \"@visactor/vrender\" from `0.14.4` to `0.14.5`"
+ }
+ ]
+ }
+ },
{
"version": "0.12.18",
"tag": "@visactor/vrender-kits_v0.12.18",
diff --git a/packages/vrender-kits/CHANGELOG.md b/packages/vrender-kits/CHANGELOG.md
index 96a4dee5d..0d8b0a81b 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 Fri, 18 Aug 2023 10:16:08 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Aug 2023 11:53:28 GMT and should not be manually modified.
+
+## 0.12.19
+Wed, 23 Aug 2023 11:53:28 GMT
+
+_Version update only_
## 0.12.18
Fri, 18 Aug 2023 10:16:08 GMT
diff --git a/packages/vrender-kits/package.json b/packages/vrender-kits/package.json
index 9a1e089fc..4fde44e13 100644
--- a/packages/vrender-kits/package.json
+++ b/packages/vrender-kits/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender-kits",
- "version": "0.12.18",
+ "version": "0.12.19",
"description": "",
"sideEffects": false,
"main": "cjs/index.js",
@@ -21,7 +21,7 @@
"prepublishOnly": "npm run build"
},
"dependencies": {
- "@visactor/vrender": "workspace:0.14.4",
+ "@visactor/vrender": "workspace:0.14.5",
"@visactor/vutils": "~0.15.5",
"@resvg/resvg-js": "2.4.1",
"canvas": "2.11.2",
diff --git a/packages/vrender/CHANGELOG.json b/packages/vrender/CHANGELOG.json
index ab286aac2..1ae9be0f9 100644
--- a/packages/vrender/CHANGELOG.json
+++ b/packages/vrender/CHANGELOG.json
@@ -1,6 +1,27 @@
{
"name": "@visactor/vrender",
"entries": [
+ {
+ "version": "0.14.5",
+ "tag": "@visactor/vrender_v0.14.5",
+ "date": "Wed, 23 Aug 2023 11:53:28 GMT",
+ "comments": {
+ "patch": [
+ {
+ "comment": "fix: fix _prePointTargetCache error in EventManager"
+ },
+ {
+ "comment": "fix: fix the issue of * event invalidation when * and named event exist simultaneously"
+ },
+ {
+ "comment": "fix: fix the outerBorder issue with false stroke, closed #342"
+ },
+ {
+ "comment": "fix: fix the issue with outerborder gradient color, closed #343"
+ }
+ ]
+ }
+ },
{
"version": "0.14.4",
"tag": "@visactor/vrender_v0.14.4",
diff --git a/packages/vrender/CHANGELOG.md b/packages/vrender/CHANGELOG.md
index 25051cc3e..88f70b2d2 100644
--- a/packages/vrender/CHANGELOG.md
+++ b/packages/vrender/CHANGELOG.md
@@ -1,6 +1,16 @@
# Change Log - @visactor/vrender
-This log was last generated on Fri, 18 Aug 2023 10:16:08 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Aug 2023 11:53:28 GMT and should not be manually modified.
+
+## 0.14.5
+Wed, 23 Aug 2023 11:53:28 GMT
+
+### Patches
+
+- fix: fix _prePointTargetCache error in EventManager
+- fix: fix the issue of * event invalidation when * and named event exist simultaneously
+- fix: fix the outerBorder issue with false stroke, closed #342
+- fix: fix the issue with outerborder gradient color, closed #343
## 0.14.4
Fri, 18 Aug 2023 10:16:08 GMT
diff --git a/packages/vrender/package.json b/packages/vrender/package.json
index 01eb82f0a..f1bedc5bc 100644
--- a/packages/vrender/package.json
+++ b/packages/vrender/package.json
@@ -1,6 +1,6 @@
{
"name": "@visactor/vrender",
- "version": "0.14.4",
+ "version": "0.14.5",
"description": "",
"sideEffects": true,
"main": "cjs/index.js",
diff --git a/packages/vrender/src/event/event-manager.ts b/packages/vrender/src/event/event-manager.ts
index 1a3bd444a..a49170005 100644
--- a/packages/vrender/src/event/event-manager.ts
+++ b/packages/vrender/src/event/event-manager.ts
@@ -5,7 +5,7 @@ import type { IEventTarget } from '../interface/event';
import { WILDCARD } from './constant';
import type { FederatedEvent } from './federated-event/base-event';
import { clock } from './util';
-import type { Cursor } from '../interface';
+import type { Cursor, IGraphic } from '../interface';
/**
* 代码参考自 https://github.com/pixijs/pixijs
* The MIT License
@@ -77,7 +77,7 @@ export class EventManager {
protected eventPool: Map = new Map();
// 缓存上一个坐标点的拾取结果，用于优化在同一个点连续触发事件的拾取逻辑
- private _prePointTargetCache: Dict;
+ private _prePointTargetCache: Dict & { stageRenderCount: number };
constructor(root: IEventTarget) {
this.rootTarget = root;
@@ -120,13 +120,18 @@ export class EventManager {
let target;
const cacheKey = `${e.canvasX}-${e.canvasY}`;
- if (this._prePointTargetCache?.[cacheKey]) {
+ if (
+ this._prePointTargetCache?.[cacheKey] &&
+ (this._prePointTargetCache?.[cacheKey] as unknown as IGraphic)?.stage.renderCount ===
+ (this._prePointTargetCache?.stageRenderCount as number)
+ ) {
target = this._prePointTargetCache[cacheKey];
} else {
target = this.pickTarget(e.canvasX, e.canvasY);
// 缓存上一个坐标点的拾取结果，减少拾取的次数，如 pointermove pointerdown 和 pointerup 在同一个点触发
this._prePointTargetCache = {
- [cacheKey]: target
+ [cacheKey]: target,
+ stageRenderCount: target?.stage.renderCount ?? -1
};
}
@@ -755,9 +760,9 @@ export class EventManager {
listeners[i].fn.call(listeners[i].context, e);
}
}
- } else {
- this.emitDelegation(e, type);
}
+ // 永远触发WILDCARD事件代理
+ this.emitDelegation(e, type);
}
private emitDelegation(e: FederatedEvent, type: string): void {
diff --git a/packages/vrender/src/interface/graphic.ts b/packages/vrender/src/interface/graphic.ts
index fa05b0d0a..88690ef61 100644
--- a/packages/vrender/src/interface/graphic.ts
+++ b/packages/vrender/src/interface/graphic.ts
@@ -115,6 +115,7 @@ export type ILayout = {
export type IBorderStyle = Omit & {
distance: number | string;
+ visible?: boolean;
};
export type IStrokeType = boolean | string | IColor | null;
diff --git a/packages/vrender/src/render/contributions/render/contributions/arc-contribution-render.ts b/packages/vrender/src/render/contributions/render/contributions/arc-contribution-render.ts
index f2d2bc38c..0d457deee 100644
--- a/packages/vrender/src/render/contributions/render/contributions/arc-contribution-render.ts
+++ b/packages/vrender/src/render/contributions/render/contributions/arc-contribution-render.ts
@@ -44,16 +44,27 @@ export class DefaultArcRenderContribution implements IArcRenderContribution {
themeAttribute: IThemeAttribute
) => boolean
) {
+ const { outerBorder, innerBorder } = arc.attribute;
+ const doOuterBorder = outerBorder && outerBorder.visible !== false;
+ const doInnerBorder = innerBorder && innerBorder.visible !== false;
+ if (!(doOuterBorder || doInnerBorder)) {
+ return;
+ }
const {
innerRadius = arcAttribute.innerRadius,
outerRadius = arcAttribute.outerRadius,
startAngle = arcAttribute.startAngle,
endAngle = arcAttribute.endAngle,
opacity = arcAttribute.opacity,
- outerBorder,
- innerBorder
+ x: originX = arcAttribute.x,
+ y: originY = arcAttribute.y,
+ scaleX = arcAttribute.scaleX,
+ scaleY = arcAttribute.scaleY
} = arc.attribute;
- if (outerBorder) {
+ const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+ const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+
+ if (doOuterBorder) {
const { distance = arcAttribute.outerBorder.distance } = outerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const deltaAngle = (distance as number) / outerRadius;
@@ -70,17 +81,23 @@ export class DefaultArcRenderContribution implements IArcRenderContribution {
if (strokeCb) {
strokeCb(context, outerBorder, arcAttribute.outerBorder);
- } else if (sVisible) {
+ } else if (doStrokeOuter) {
// 存在stroke
const lastOpacity = (arcAttribute.outerBorder as any).opacity;
(arcAttribute.outerBorder as any).opacity = opacity;
- context.setStrokeStyle(arc, outerBorder, x, y, arcAttribute.outerBorder as any);
+ context.setStrokeStyle(
+ arc,
+ outerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ arcAttribute.outerBorder as any
+ );
(arcAttribute.outerBorder as any).opacity = lastOpacity;
context.stroke();
}
}
- if (innerBorder) {
+ if (doInnerBorder) {
const { distance = arcAttribute.innerBorder.distance } = innerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const deltaAngle = (distance as number) / outerRadius;
@@ -99,11 +116,17 @@ export class DefaultArcRenderContribution implements IArcRenderContribution {
if (strokeCb) {
strokeCb(context, innerBorder, arcAttribute.innerBorder);
- } else if (sVisible) {
+ } else if (doStrokeInner) {
// 存在stroke
const lastOpacity = (arcAttribute.innerBorder as any).opacity;
(arcAttribute.innerBorder as any).opacity = opacity;
- context.setStrokeStyle(arc, innerBorder, x, y, arcAttribute.innerBorder as any);
+ context.setStrokeStyle(
+ arc,
+ innerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ arcAttribute.innerBorder as any
+ );
(arcAttribute.innerBorder as any).opacity = lastOpacity;
context.stroke();
}
diff --git a/packages/vrender/src/render/contributions/render/contributions/circle-contribution-render.ts b/packages/vrender/src/render/contributions/render/contributions/circle-contribution-render.ts
index 579761027..fd1ca2f24 100644
--- a/packages/vrender/src/render/contributions/render/contributions/circle-contribution-render.ts
+++ b/packages/vrender/src/render/contributions/render/contributions/circle-contribution-render.ts
@@ -43,16 +43,27 @@ export class DefaultCircleRenderContribution implements ICircleRenderContributio
themeAttribute: IThemeAttribute
) => boolean
) {
+ const { outerBorder, innerBorder } = circle.attribute;
+ const doOuterBorder = outerBorder && outerBorder.visible !== false;
+ const doInnerBorder = innerBorder && innerBorder.visible !== false;
+ if (!(doOuterBorder || doInnerBorder)) {
+ return;
+ }
const {
radius = circleAttribute.radius,
startAngle = circleAttribute.startAngle,
endAngle = circleAttribute.endAngle,
opacity = circleAttribute.opacity,
- outerBorder,
- innerBorder
+ x: originX = circleAttribute.x,
+ y: originY = circleAttribute.y,
+ scaleX = circleAttribute.scaleX,
+ scaleY = circleAttribute.scaleY
} = circle.attribute;
- if (outerBorder) {
+ const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+ const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+
+ if (doOuterBorder) {
const { distance = circleAttribute.outerBorder.distance } = outerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const dw = d;
@@ -65,17 +76,23 @@ export class DefaultCircleRenderContribution implements ICircleRenderContributio
if (strokeCb) {
strokeCb(context, outerBorder, circleAttribute.outerBorder);
- } else if (sVisible) {
+ } else if (doStrokeOuter) {
// 存在stroke
const lastOpacity = (circleAttribute.outerBorder as any).opacity;
(circleAttribute.outerBorder as any).opacity = opacity;
- context.setStrokeStyle(circle, outerBorder, x, y, circleAttribute.outerBorder as any);
+ context.setStrokeStyle(
+ circle,
+ outerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ circleAttribute.outerBorder as any
+ );
(circleAttribute.outerBorder as any).opacity = lastOpacity;
context.stroke();
}
}
- if (innerBorder) {
+ if (doInnerBorder) {
const { distance = circleAttribute.innerBorder.distance } = innerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const dw = d;
@@ -89,11 +106,17 @@ export class DefaultCircleRenderContribution implements ICircleRenderContributio
if (strokeCb) {
strokeCb(context, innerBorder, circleAttribute.innerBorder);
- } else if (sVisible) {
+ } else if (doStrokeInner) {
// 存在stroke
const lastOpacity = (circleAttribute.innerBorder as any).opacity;
(circleAttribute.innerBorder as any).opacity = opacity;
- context.setStrokeStyle(circle, innerBorder, x, y, circleAttribute.innerBorder as any);
+ context.setStrokeStyle(
+ circle,
+ innerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ circleAttribute.innerBorder as any
+ );
(circleAttribute.innerBorder as any).opacity = lastOpacity;
context.stroke();
}
diff --git a/packages/vrender/src/render/contributions/render/contributions/rect-contribution-render.ts b/packages/vrender/src/render/contributions/render/contributions/rect-contribution-render.ts
index d7cabbfd4..7eec6ed7e 100644
--- a/packages/vrender/src/render/contributions/render/contributions/rect-contribution-render.ts
+++ b/packages/vrender/src/render/contributions/render/contributions/rect-contribution-render.ts
@@ -45,16 +45,27 @@ export class DefaultRectRenderContribution implements IRectRenderContribution {
themeAttribute: IThemeAttribute
) => boolean
) {
+ const { outerBorder, innerBorder } = rect.attribute;
+ const doOuterBorder = outerBorder && outerBorder.visible !== false;
+ const doInnerBorder = innerBorder && innerBorder.visible !== false;
+ if (!(doOuterBorder || doInnerBorder)) {
+ return;
+ }
const {
width = rectAttribute.width,
height = rectAttribute.height,
cornerRadius = rectAttribute.cornerRadius,
opacity = rectAttribute.opacity,
- outerBorder,
- innerBorder
+ x: originX = rectAttribute.x,
+ y: originY = rectAttribute.y,
+ scaleX = rectAttribute.scaleX,
+ scaleY = rectAttribute.scaleY
} = rect.attribute;
- if (outerBorder) {
+ const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+ const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+
+ if (doOuterBorder) {
const { distance = rectAttribute.outerBorder.distance } = outerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const nextX = x - d;
@@ -76,17 +87,23 @@ export class DefaultRectRenderContribution implements IRectRenderContribution {
if (strokeCb) {
strokeCb(context, outerBorder, rectAttribute.outerBorder);
- } else if (sVisible) {
+ } else if (doStrokeOuter) {
// 存在stroke
const lastOpacity = (rectAttribute.outerBorder as any).opacity;
(rectAttribute.outerBorder as any).opacity = opacity;
- context.setStrokeStyle(rect, outerBorder, x, y, rectAttribute.outerBorder as any);
+ context.setStrokeStyle(
+ rect,
+ outerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ rectAttribute.outerBorder as any
+ );
(rectAttribute.outerBorder as any).opacity = lastOpacity;
context.stroke();
}
}
- if (innerBorder) {
+ if (doInnerBorder) {
const { distance = rectAttribute.innerBorder.distance } = innerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
const nextX = x + d;
@@ -108,11 +125,17 @@ export class DefaultRectRenderContribution implements IRectRenderContribution {
if (strokeCb) {
strokeCb(context, innerBorder, rectAttribute.innerBorder);
- } else if (sVisible) {
+ } else if (doStrokeInner) {
// 存在stroke
const lastOpacity = (rectAttribute.innerBorder as any).opacity;
(rectAttribute.innerBorder as any).opacity = opacity;
- context.setStrokeStyle(rect, innerBorder, x, y, rectAttribute.innerBorder as any);
+ context.setStrokeStyle(
+ rect,
+ innerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ rectAttribute.innerBorder as any
+ );
(rectAttribute.innerBorder as any).opacity = lastOpacity;
context.stroke();
}
diff --git a/packages/vrender/src/render/contributions/render/contributions/symbol-contribution-render.ts b/packages/vrender/src/render/contributions/render/contributions/symbol-contribution-render.ts
index b2d767cfb..80c56794a 100644
--- a/packages/vrender/src/render/contributions/render/contributions/symbol-contribution-render.ts
+++ b/packages/vrender/src/render/contributions/render/contributions/symbol-contribution-render.ts
@@ -43,20 +43,32 @@ export class DefaultSymbolRenderContribution implements ISymbolRenderContributio
themeAttribute: IThemeAttribute
) => boolean
) {
- const {
- size = symbolAttribute.size,
- opacity = symbolAttribute.opacity,
- outerBorder,
- innerBorder
- } = symbol.attribute;
-
const parsedPath = symbol.getParsedPath();
// todo: 考虑使用path
if (!parsedPath) {
return;
}
- if (outerBorder) {
+ const { outerBorder, innerBorder } = symbol.attribute;
+ const doOuterBorder = outerBorder && outerBorder.visible !== false;
+ const doInnerBorder = innerBorder && innerBorder.visible !== false;
+ if (!(doOuterBorder || doInnerBorder)) {
+ return;
+ }
+
+ const {
+ size = symbolAttribute.size,
+ opacity = symbolAttribute.opacity,
+ x: originX = symbolAttribute.x,
+ y: originY = symbolAttribute.y,
+ scaleX = symbolAttribute.scaleX,
+ scaleY = symbolAttribute.scaleY
+ } = symbol.attribute;
+
+ const doStrokeOuter = !!(outerBorder && outerBorder.stroke);
+ const doStrokeInner = !!(innerBorder && innerBorder.stroke);
+
+ if (doOuterBorder) {
const { distance = symbolAttribute.outerBorder.distance } = outerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
@@ -70,17 +82,23 @@ export class DefaultSymbolRenderContribution implements ISymbolRenderContributio
if (strokeCb) {
strokeCb(context, outerBorder, symbolAttribute.outerBorder);
- } else if (sVisible) {
+ } else if (doStrokeOuter) {
// 存在stroke
const lastOpacity = (symbolAttribute.outerBorder as any).opacity;
(symbolAttribute.outerBorder as any).opacity = opacity;
- context.setStrokeStyle(symbol, outerBorder, x, y, symbolAttribute.outerBorder as any);
+ context.setStrokeStyle(
+ symbol,
+ outerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ symbolAttribute.outerBorder as any
+ );
(symbolAttribute.outerBorder as any).opacity = lastOpacity;
context.stroke();
}
}
- if (innerBorder) {
+ if (doInnerBorder) {
const { distance = symbolAttribute.innerBorder.distance } = innerBorder;
const d = getScaledStroke(context, distance as number, context.dpr);
@@ -94,11 +112,17 @@ export class DefaultSymbolRenderContribution implements ISymbolRenderContributio
if (strokeCb) {
strokeCb(context, innerBorder, symbolAttribute.innerBorder);
- } else if (sVisible) {
+ } else if (doStrokeInner) {
// 存在stroke
const lastOpacity = (symbolAttribute.innerBorder as any).opacity;
(symbolAttribute.innerBorder as any).opacity = opacity;
- context.setStrokeStyle(symbol, innerBorder, x, y, symbolAttribute.innerBorder as any);
+ context.setStrokeStyle(
+ symbol,
+ innerBorder,
+ (originX - x) / scaleX,
+ (originY - y) / scaleY,
+ symbolAttribute.innerBorder as any
+ );
(symbolAttribute.innerBorder as any).opacity = lastOpacity;
context.stroke();
}