From db497c035eab94608a39b2b0d6aebd975f57ec70 Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Thu, 17 Aug 2023 23:18:00 +0800 Subject: [PATCH 1/6] feat: handle inverse color for no stroke and configuration stroke --- .../browser/examples/label-smart-inverse.ts | 16 +- packages/vrender-components/src/label/base.ts | 169 ++++++++++++------ 2 files changed, 125 insertions(+), 60 deletions(-) diff --git a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts index 8782073d5..c9f2d2c2a 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts @@ -579,10 +579,11 @@ function createContent(stage: Stage) { baseMarkGroupName: barSpec.name, data: barSpec.children.map(c => { return { - text: `${[212, 218, 230, 224].includes(c.id) ? '-' : ''}${c.id}`, - fill: 'white', - stroke: c.attribute.fill, - lineWidth: 2 + text: `${[212, 218, 230, 224].includes(c.id) ? '-' : ''}${c.id}` + // stroke: 'white' + // fill: 'white' + // stroke: c.attribute.fill, + // lineWidth: 0 }; }), type: 'rect', @@ -607,10 +608,11 @@ function createContent(stage: Stage) { } ] }, + // smartInvert: false, smartInvert: { - // strokeStrategy: 'similarSeries' - // brightColor: '#fff000', - // darkColor: '#dd0000' + strokeStrategy: 'similarSeries', + brightColor: '#fff000', + darkColor: '#dd0000' }, zIndex: 302 diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index 815da9a39..dc87b26da 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -636,12 +636,11 @@ 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 brightColor = option.brightColor ?? '#ffffff'; const darkColor = option.darkColor ?? '#000000'; - if (fillStrategy === 'null' && strokeStrategy === 'null') { + if (option.fillStrategy === 'null' && option.strokeStrategy === 'null') { return; } @@ -652,19 +651,15 @@ 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') { + if (this.attribute.position === 'inside') { + isInside = true; + } else { + isInside = false; + } + } /** * 增加smartInvert时fillStrategy和 strokeStrategy的四种策略： @@ -685,48 +680,116 @@ 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; - } + const fillStrategy = option.fillStrategy ?? 'invertSeries'; + const strokeStrategy = option.strokeStrategy ?? 'series'; - 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 (isInside) { + 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 (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': + label.setAttributes({ + stroke: simialrColor + }); + break; + } + } else { + /** 当label无法设置stroke时，不进行反色计算（容易反色为白色与白色背景混合不可见） */ + if (label.attribute.lineWidth === 0) { + continue; + } + + /** 当label设置stroke时，保留stroke设置的颜色，根据stroke对fill做反色 */ + if (label.attribute.stroke) { + const backgroundColor = label.attribute.stroke as IColor; + const foregroundColor = label.attribute.fill as IColor; label.setAttributes({ - stroke: simialrColor + fill: labelSmartInvert( + foregroundColor, + backgroundColor, + textType, + contrastRatiosThreshold, + alternativeColors + ) }); - break; + continue; + } + + /** 当label未设置stroke，且可设置stroke时，正常计算 */ + 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; + } + + switch (strokeStrategy) { + case 'null': + break; + case 'series': + label.setAttributes({ + stroke: seriesColor + }); + break; + case 'invertSeries': + label.setAttributes({ + stroke: invertColor + }); + break; + case 'similarSeries': + label.setAttributes({ + stroke: simialrColor + }); + break; + } } + // /** // * stroke 的处理逻辑 // * 1. 当文本在图元内部时，有两种情况： From 35d9991d4559a9f0e112402d490a583cb2bd411c Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Thu, 17 Aug 2023 23:19:21 +0800 Subject: [PATCH 2/6] feat: optimize code style --- packages/vrender-components/src/label/base.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index dc87b26da..0c66fdfc4 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -636,7 +636,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 brightColor = option.brightColor ?? '#ffffff'; const darkColor = option.darkColor ?? '#000000'; @@ -666,8 +667,8 @@ export abstract class LabelBase extends AbstractCompon * 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; @@ -734,8 +735,6 @@ export abstract class LabelBase extends AbstractCompon /** 当label设置stroke时，保留stroke设置的颜色，根据stroke对fill做反色 */ if (label.attribute.stroke) { - const backgroundColor = label.attribute.stroke as IColor; - const foregroundColor = label.attribute.fill as IColor; label.setAttributes({ fill: labelSmartInvert( foregroundColor, From b398adbc652883fc123e82911f92aaa0c4aaecb6 Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Fri, 18 Aug 2023 14:50:27 +0800 Subject: [PATCH 3/6] feat: handle smartInver when stroke config and outside the mark --- .../__tests__/browser/examples/label-smart-inverse.ts | 10 +++++----- packages/vrender-components/src/label/base.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts index c9f2d2c2a..998d71f7a 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts @@ -609,11 +609,11 @@ function createContent(stage: Stage) { ] }, // smartInvert: false, - smartInvert: { - strokeStrategy: 'similarSeries', - brightColor: '#fff000', - darkColor: '#dd0000' - }, + // smartInvert: { + // strokeStrategy: 'similarSeries', + // brightColor: '#fff000', + // darkColor: '#dd0000' + // }, zIndex: 302 }); diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index 2b490aab6..b5559f9e0 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -719,8 +719,8 @@ export abstract class LabelBase extends AbstractCompon if (label.attribute.stroke) { label.setAttributes({ fill: labelSmartInvert( - foregroundColor, - backgroundColor, + label.attribute.fill, + label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors From db2ec71254e2e10026f46adc6007570116a89ee8 Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Fri, 18 Aug 2023 16:16:32 +0800 Subject: [PATCH 4/6] feat: spetify fill and stroke as IColor --- packages/vrender-components/src/label/base.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index b5559f9e0..cd95c08ee 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -719,8 +719,8 @@ export abstract class LabelBase extends AbstractCompon if (label.attribute.stroke) { label.setAttributes({ fill: labelSmartInvert( - label.attribute.fill, - label.attribute.stroke, + label.attribute.fill as IColor, + label.attribute.stroke as IColor, textType, contrastRatiosThreshold, alternativeColors From 6c705a1c14d18d498dc5ef1f34435e7c098ff8e7 Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Fri, 18 Aug 2023 18:30:00 +0800 Subject: [PATCH 5/6] feat: modify the name of the fill stroke strategy, and optimize the code style --- .../browser/examples/label-smart-inverse.ts | 10 +- packages/vrender-components/src/label/base.ts | 135 +++++++----------- packages/vrender-components/src/label/type.ts | 18 +-- 3 files changed, 66 insertions(+), 97 deletions(-) diff --git a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts index 998d71f7a..3c14e409d 100644 --- a/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts +++ b/packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts @@ -609,11 +609,11 @@ function createContent(stage: Stage) { ] }, // smartInvert: false, - // smartInvert: { - // strokeStrategy: 'similarSeries', - // brightColor: '#fff000', - // darkColor: '#dd0000' - // }, + smartInvert: { + strokeStrategy: 'similarBase', + brightColor: '#fff000', + darkColor: '#dd0000' + }, zIndex: 302 }); diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index cd95c08ee..7689f335e 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -618,12 +618,12 @@ 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'; - if (option.fillStrategy === 'null' && option.strokeStrategy === 'null') { + if (fillStrategy === 'null' && strokeStrategy === 'null') { return; } @@ -653,7 +653,7 @@ export abstract class LabelBase extends AbstractCompon * */ 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, @@ -663,52 +663,14 @@ export abstract class LabelBase extends AbstractCompon ); const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor; - const fillStrategy = option.fillStrategy ?? 'invertSeries'; - const strokeStrategy = option.strokeStrategy ?? 'series'; - if (isInside) { - 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; - } + 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': - label.setAttributes({ - stroke: simialrColor - }); - break; - } + + this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor); } else { /** 当label无法设置stroke时，不进行反色计算（容易反色为白色与白色背景混合不可见） */ if (label.attribute.lineWidth === 0) { @@ -730,45 +692,9 @@ export abstract class LabelBase extends AbstractCompon } /** 当label未设置stroke，且可设置stroke时，正常计算 */ - 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; - } + this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor); - switch (strokeStrategy) { - case 'null': - break; - case 'series': - label.setAttributes({ - stroke: seriesColor - }); - break; - case 'invertSeries': - label.setAttributes({ - stroke: invertColor - }); - break; - case 'similarSeries': - label.setAttributes({ - stroke: simialrColor - }); - break; - } + this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor); } // /** @@ -820,6 +746,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' From e93227a63d17ed3e6795e9dfda82b46d6af69129 Mon Sep 17 00:00:00 2001 From: pairone <1063258712@qq.com> Date: Mon, 21 Aug 2023 11:20:35 +0800 Subject: [PATCH 6/6] feat: optimize code of isInside when arc type --- packages/vrender-components/src/label/base.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/vrender-components/src/label/base.ts b/packages/vrender-components/src/label/base.ts index 7689f335e..932d2fadb 100644 --- a/packages/vrender-components/src/label/base.ts +++ b/packages/vrender-components/src/label/base.ts @@ -637,11 +637,7 @@ export abstract class LabelBase extends AbstractCompon let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds); if (this.attribute.type === 'arc') { - if (this.attribute.position === 'inside') { - isInside = true; - } else { - isInside = false; - } + isInside = this.attribute.position === 'inside'; } /**