Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Feat: smart invert optimize #1680

Open
wants to merge 10 commits into
base: dev/0.22.0
Choose a base branch
from
Open

[WIP] Feat: smart invert optimize #1680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
46fba13
feat: support transparent foreground and background color for label `…
xiaoluoHe Jan 15, 2025
95e4a17
docs: add changelog
xiaoluoHe Jan 15, 2025
163c3de
feat: add `underlyingColor` for blending of transparent background
xiaoluoHe Jan 15, 2025
d1d8cad
docs: add changelog
xiaoluoHe Jan 15, 2025
6b03b57
feat: optimize the default logic when label intersects with graphic
xiaoluoHe Jan 15, 2025
5152de4
refactor: deprecate `label.smartInvert.outsideEnable`
xiaoluoHe Jan 15, 2025
3f1d3a4
docs: add changelog
xiaoluoHe Jan 15, 2025
baeced4
feat: support `lumCalculate` in label smartInvert
xiaoluoHe Jan 15, 2025
55affc6
fix: params omitted when compute accessibility
xiaoluoHe Jan 15, 2025
8520ea9
feat: upgrade vutils
xiaoluoHe Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-06-31.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-components",
"comment": "feat: support transparent foreground and background color for label `smartInvert`",
"type": "none"
}
],
"packageName": "@visactor/vrender-components"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-07-22.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-components",
"comment": "feat: add `underlyingColor` for blending of transparent background",
"type": "none"
}
],
"packageName": "@visactor/vrender-components"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-07-50.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-components",
"comment": " refactor: deprecate `label.smartInvert.outsideEnable`",
"type": "none"
}
],
"packageName": "@visactor/vrender-components"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-08-24.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vrender-components",
"comment": "feat: support `lumCalculate` in label smartInvert",
"type": "none"
}
],
"packageName": "@visactor/vrender-components"
}
55 changes: 30 additions & 25 deletions common/config/rush/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/demos/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"@internal/eslint-config": "workspace:*",
"@internal/ts-config": "workspace:*",
"@visactor/vrender-kits": "workspace:0.14.8",
"@visactor/vutils": "~0.19.3",
"@visactor/vutils": "0.19.4-alpha.0",
"d3-scale-chromatic": "^3.0.0",
"lodash": "4.17.21",
"dat.gui": "^0.7.9",
Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@arco-design/web-react": "2.46.1",
"@visactor/vchart": "1.3.0",
"@visactor/vutils": "~0.19.3",
"@visactor/vutils": "0.19.4-alpha.0",
"@visactor/vgrammar": "~0.5.7",
"@visactor/vrender": "workspace:0.21.11",
"markdown-it": "^13.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-vrender-utils/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"dependencies": {
"@visactor/vrender": "workspace:0.21.11",
"@visactor/react-vrender": "workspace:0.21.11",
"@visactor/vutils": "~0.19.3",
"@visactor/vutils": "0.19.4-alpha.0",
"react-reconciler": "^0.29.0",
"tslib": "^2.3.1"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-vrender/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
},
"dependencies": {
"@visactor/vrender": "workspace:0.21.11",
"@visactor/vutils": "~0.19.3",
"@visactor/vutils": "0.19.4-alpha.0",
"react-reconciler": "^0.29.0",
"tslib": "^2.3.1"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/vrender-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
"build:spec-types": "rm -rf ./spec-types && tsc -p ./tsconfig.spec.json --declaration --emitDeclarationOnly --outDir ./spec-types"
},
"dependencies": {
"@visactor/vutils": "~0.19.3",
"@visactor/vscale": "~0.19.3",
"@visactor/vutils": "0.19.4-alpha.0",
"@visactor/vscale": "0.19.4-alpha.0",
"@visactor/vrender-core": "workspace:0.21.11",
"@visactor/vrender-kits": "workspace:0.21.11"
},
Expand All @@ -35,7 +35,7 @@
"@internal/eslint-config": "workspace:*",
"@internal/ts-config": "workspace:*",
"@rushstack/eslint-patch": "~1.1.4",
"@visactor/vscale": "~0.19.3",
"@visactor/vscale": "0.19.4-alpha.0",
"@types/jest": "^26.0.0",
"jest": "^26.0.0",
"jest-electron": "^0.1.12",
Expand Down
48 changes: 33 additions & 15 deletions packages/vrender-components/src/label/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -994,12 +994,19 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {

protected _smartInvert(labels: (IText | IRichText)[]) {
const option = (isObject(this.attribute.smartInvert) ? this.attribute.smartInvert : {}) as SmartInvertAttrs;
const { textType, contrastRatiosThreshold, alternativeColors, mode, interactInvertType } = option;
const { textType, contrastRatiosThreshold, alternativeColors, mode, interactInvertType = 'inside' } = option;
const fillStrategy = option.fillStrategy ?? 'invertBase';
const strokeStrategy = option.strokeStrategy ?? 'base';
const brightColor = option.brightColor ?? '#ffffff';
const darkColor = option.darkColor ?? '#000000';
const outsideEnable = option.outsideEnable ?? false;

const colorFromGradient = (color: ILinearGradient) => {
return color.stops?.[0]?.color;
};
const underlyingColor =
option.underlyingColor ?? isObject(this.stage.background)
? colorFromGradient(this.stage.background as ILinearGradient)
: this.stage.background;

if (fillStrategy === 'null' && strokeStrategy === 'null') {
return;
Expand All @@ -1022,30 +1029,42 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
* */
let backgroundColor = baseMark.attribute.fill as IColor;
let foregroundColor = label.attribute.fill as IColor;
const { fillOpacity: backgroundFillOpacity = 1, opacity: backgroundOpacity = 1 } = baseMark.attribute;
const {
fillOpacity: foregroundFillOpacity = 1,
opacity: foregroundOpacity = 1,
strokeOpacity: foregroundStrokeOpacity = 1
} = label.attribute;

if (isObject(backgroundColor) && backgroundColor.gradient) {
const firstStopColor = (backgroundColor as ILinearGradient).stops?.[0]?.color;

const firstStopColor = colorFromGradient(backgroundColor as ILinearGradient);
if (firstStopColor) {
backgroundColor = firstStopColor;
foregroundColor = firstStopColor; // 渐变色的时候，标签的颜色可能会和背景色不一致，所以需要设置为相同的颜色
}
}

const invertColor = labelSmartInvert(
foregroundColor,
backgroundColor,
const smartInvertParams = {
textType,
contrastRatiosThreshold,
alternativeColors,
mode
mode,
underlyingColor
};
const invertColor = labelSmartInvert(
foregroundColor,
backgroundColor,
foregroundFillOpacity * foregroundOpacity,
backgroundFillOpacity * backgroundOpacity,
smartInvertParams
);
const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
const similarColor = contrastAccessibilityChecker(invertColor, brightColor, smartInvertParams)
? brightColor
: darkColor;
const isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds);
const isIntersect =
!isInside && label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds);

if (isInside || outsideEnable || (isIntersect && interactInvertType === 'inside')) {
if (isInside || (isIntersect && interactInvertType === 'inside')) {
// 按照标签展示在柱子内部的情况，执行反色逻辑
const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
fill && label.setAttributes({ fill });
Expand All @@ -1069,10 +1088,9 @@ export class LabelBase<T extends BaseLabelAttrs> extends AbstractComponent<T> {
fill: labelSmartInvert(
label.attribute.fill as IColor,
label.attribute.stroke as IColor,
textType,
contrastRatiosThreshold,
alternativeColors,
mode
foregroundFillOpacity * foregroundOpacity,
foregroundStrokeOpacity * foregroundOpacity,
smartInvertParams
)
});
continue;
Expand Down
Loading
Loading