[WIP] Feat: smart invert optimize

common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-06-31.json

@@ -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"
+}

common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-07-22.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: add `underlyingColor` for blending of  transparent background",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-07-50.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": " refactor: deprecate `label.smartInvert.outsideEnable`",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

common/changes/@visactor/vrender-components/feat-smartInvert-optimize_2025-01-15-08-24.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: support `lumCalculate` in label smartInvert",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

docs/demos/package.json

@@ -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",

docs/package.json

@@ -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",

packages/react-vrender-utils/package.json

@@ -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"
   },

packages/react-vrender/package.json

@@ -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"
   },

packages/vrender-components/package.json

@@ -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"
   },
@@ -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",

packages/vrender-components/src/label/base.ts

@@ -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;
@@ -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 });
@@ -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;