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

Jump to bottom

Feat/ handle inverse color for no stroke and configuration stroke #333

Merged
merged 7 commits into from
Aug 21, 2023
Merged

Feat/ handle inverse color for no stroke and configuration stroke #333

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
db497c0
feat: handle inverse color for no stroke and configuration stroke
pairone Aug 17, 2023
35d9991
feat: optimize code style
pairone Aug 17, 2023
a73bb23
Merge branch 'develop' into feat/smartInvert-fill-stroke-strategy
pairone Aug 17, 2023
b398adb
feat: handle smartInver when stroke config and outside the mark
pairone Aug 18, 2023
db2ec71
feat: spetify fill and stroke as IColor
pairone Aug 18, 2023
6c705a1
feat: modify the name of the fill stroke strategy, and optimize the c…
pairone Aug 18, 2023
e93227a
feat: optimize code of isInside when arc type
pairone Aug 21, 2023
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
16 changes: 9 additions & 7 deletions packages/vrender-components/__tests__/browser/examples/label-smart-inverse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -607,10 +608,11 @@ function createContent(stage: Stage) {
}
]
},
// smartInvert: false,
smartInvert: {
// strokeStrategy: 'similarSeries'
// brightColor: '#fff000',
// darkColor: '#dd0000'
strokeStrategy: 'similarBase',
brightColor: '#fff000',
darkColor: '#dd0000'
},

zIndex: 302
Expand Down
141 changes: 86 additions & 55 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 @@ -618,8 +618,8 @@ export abstract class LabelBase<T extends BaseLabelAttrs> 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';

Expand All @@ -634,30 +634,26 @@ export abstract class LabelBase<T extends BaseLabelAttrs> 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;
}
}
pairone marked this conversation as resolved.
Show resolved Hide resolved

/**
* 增加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,
Expand All @@ -667,48 +663,40 @@ export abstract class LabelBase<T extends BaseLabelAttrs> 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. 当文本在图元内部时，有两种情况：
Expand Down Expand Up @@ -758,6 +746,49 @@ export abstract class LabelBase<T extends BaseLabelAttrs> 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);
}
Expand Down
18 changes: 9 additions & 9 deletions packages/vrender-components/src/label/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down