From e269acd47af2a3305246d76f04426edee810f77a Mon Sep 17 00:00:00 2001
From: Rex Zeng <rex@rexskz.info>
Date: Wed, 30 Aug 2023 11:53:44 +0800
Subject: [PATCH] fix(clip): calculate with dpr when extending clip path. close
 #19051

---
 src/chart/bar/BarView.ts                      | 10 +-
 src/chart/candlestick/CandlestickView.ts      |  6 +-
 src/chart/custom/CustomView.ts                |  2 +-
 .../helper/createClipPathFromCoordSys.ts      |  9 +-
 src/chart/line/LineView.ts                    | 12 ++-
 src/chart/lines/LinesView.ts                  |  2 +-
 test/clip-line-cap.html                       | 93 +++++++++++++++++++
 7 files changed, 116 insertions(+), 18 deletions(-)
 create mode 100644 test/clip-line-cap.html

diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 54cc6ec72e8..4de10a89513 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -163,12 +163,12 @@ class BarView extends ChartView {
         }
     }
 
-    incrementalPrepareRender(seriesModel: BarSeriesModel): void {
+    incrementalPrepareRender(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         this._clear();
         this._updateDrawMode(seriesModel);
         // incremental also need to clip, otherwise might be overlow.
         // But must not set clip in each frame, otherwise all of the children will be marked redraw.
-        this._updateLargeClip(seriesModel);
+        this._updateLargeClip(seriesModel, ecModel, api);
     }
 
     incrementalRender(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
@@ -455,7 +455,7 @@ class BarView extends ChartView {
     private _renderLarge(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         this._clear();
         createLarge(seriesModel, this.group);
-        this._updateLargeClip(seriesModel);
+        this._updateLargeClip(seriesModel, ecModel, api);
     }
 
     private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
@@ -463,10 +463,10 @@ class BarView extends ChartView {
         createLarge(seriesModel, this.group, this._progressiveEls, true);
     }
 
-    private _updateLargeClip(seriesModel: BarSeriesModel): void {
+    private _updateLargeClip(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
         // Use clipPath in large mode.
         const clipPath = seriesModel.get('clip', true)
-            && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
+            && createClipPath(seriesModel.coordinateSystem, false, seriesModel, api.getDevicePixelRatio());
         const group = this.group;
         if (clipPath) {
             group.setClipPath(clipPath);
diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts
index 3d05e81c70f..7a9b60ebf0f 100644
--- a/src/chart/candlestick/CandlestickView.ts
+++ b/src/chart/candlestick/CandlestickView.ts
@@ -56,7 +56,7 @@ class CandlestickView extends ChartView {
         this._updateDrawMode(seriesModel);
 
         this._isLargeDraw
-            ? this._renderLarge(seriesModel)
+            ? this._renderLarge(seriesModel, ecModel, api)
             : this._renderNormal(seriesModel);
     }
 
@@ -166,13 +166,13 @@ class CandlestickView extends ChartView {
         this._data = data;
     }
 
-    _renderLarge(seriesModel: CandlestickSeriesModel) {
+    _renderLarge(seriesModel: CandlestickSeriesModel, ecModel: GlobalModel, api: ExtensionAPI) {
         this._clear();
 
         createLarge(seriesModel, this.group);
 
         const clipPath = seriesModel.get('clip', true)
-            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
+            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel, api.getDevicePixelRatio())
             : null;
         if (clipPath) {
             this.group.setClipPath(clipPath);
diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts
index ee4e244cf7f..3d2892823a3 100644
--- a/src/chart/custom/CustomView.ts
+++ b/src/chart/custom/CustomView.ts
@@ -243,7 +243,7 @@ export default class CustomChartView extends ChartView {
 
         // Do clipping
         const clipPath = customSeries.get('clip', true)
-            ? createClipPath(customSeries.coordinateSystem, false, customSeries)
+            ? createClipPath(customSeries.coordinateSystem, false, customSeries, api.getDevicePixelRatio())
             : null;
         if (clipPath) {
             group.setClipPath(clipPath);
diff --git a/src/chart/helper/createClipPathFromCoordSys.ts b/src/chart/helper/createClipPathFromCoordSys.ts
index 7bc83d7def8..886d59d78de 100644
--- a/src/chart/helper/createClipPathFromCoordSys.ts
+++ b/src/chart/helper/createClipPathFromCoordSys.ts
@@ -33,6 +33,7 @@ function createGridClipPath(
     cartesian: Cartesian2D,
     hasAnimation: boolean,
     seriesModel: SeriesModelWithLineWidth,
+    dpr: number,
     done?: () => void,
     during?: (percent: number, clipRect: graphic.Rect) => void
 ) {
@@ -43,7 +44,8 @@ function createGridClipPath(
     let width = rect.width;
     let height = rect.height;
 
-    const lineWidth = seriesModel.get(['lineStyle', 'width']) || 2;
+    const lineWidth = (seriesModel.get(['lineStyle', 'width']) || 2) * (dpr || 1);
+
     // Expand the clip path a bit to avoid the border is clipped and looks thinner
     x -= lineWidth / 2;
     y -= lineWidth / 2;
@@ -146,6 +148,7 @@ function createClipPath(
     coordSys: CoordinateSystem,
     hasAnimation: boolean,
     seriesModel: SeriesModelWithLineWidth,
+    dpr: number,
     done?: () => void,
     during?: (percent: number) => void
 ) {
@@ -156,7 +159,7 @@ function createClipPath(
         return createPolarClipPath(coordSys as Polar, hasAnimation, seriesModel);
     }
     else if (coordSys.type === 'cartesian2d') {
-        return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel, done, during);
+        return createGridClipPath(coordSys as Cartesian2D, hasAnimation, seriesModel, dpr, done, during);
     }
     return null;
 }
@@ -165,4 +168,4 @@ export {
     createGridClipPath,
     createPolarClipPath,
     createClipPath
-};
\ No newline at end of file
+};
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 435fa2a90cc..f1ea0e56080 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -507,7 +507,8 @@ function createLineClipPath(
     lineView: LineView,
     coordSys: Cartesian2D | Polar,
     hasAnimation: boolean,
-    seriesModel: LineSeriesModel
+    seriesModel: LineSeriesModel,
+    dpr: number
 ) {
     if (isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')) {
         const endLabelModel = seriesModel.getModel('endLabel');
@@ -531,7 +532,7 @@ function createLineClipPath(
             : null;
 
         const isHorizontal = coordSys.getBaseAxis().isHorizontal();
-        const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, () => {
+        const clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, dpr, () => {
             const endLabel = lineView._endLabel;
             if (endLabel && hasAnimation) {
                 if (labelAnimationRecord.originalX != null) {
@@ -697,6 +698,7 @@ class LineView extends ChartView {
         this._clipShapeForSymbol = clipShapeForSymbol;
         const visualColor = getVisualGradient(data, coordSys, api)
             || data.getVisual('style')[data.getVisual('drawType')];
+        const dpr = api.getDevicePixelRatio();
         // Initialization animation or coordinate system changed
         if (
             !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
@@ -742,7 +744,7 @@ class LineView extends ChartView {
             }
 
             lineGroup.setClipPath(
-                createLineClipPath(this, coordSys, true, seriesModel)
+                createLineClipPath(this, coordSys, true, seriesModel, dpr)
             );
         }
         else {
@@ -766,14 +768,14 @@ class LineView extends ChartView {
             // Update clipPath
             const oldClipPath = lineGroup.getClipPath();
             if (oldClipPath) {
-                const newClipPath = createLineClipPath(this, coordSys, false, seriesModel);
+                const newClipPath = createLineClipPath(this, coordSys, false, seriesModel, dpr);
                 graphic.initProps(oldClipPath, {
                     shape: newClipPath.shape
                 }, seriesModel);
             }
             else {
                 lineGroup.setClipPath(
-                    createLineClipPath(this, coordSys, true, seriesModel)
+                    createLineClipPath(this, coordSys, true, seriesModel, dpr)
                 );
             }
 
diff --git a/src/chart/lines/LinesView.ts b/src/chart/lines/LinesView.ts
index 5d9cbfeefbc..7d6f7f629b5 100644
--- a/src/chart/lines/LinesView.ts
+++ b/src/chart/lines/LinesView.ts
@@ -87,7 +87,7 @@ class LinesView extends ChartView {
         lineDraw.updateData(data as SeriesData);
 
         const clipPath = seriesModel.get('clip', true) && createClipPath(
-            (seriesModel.coordinateSystem as Polar | Cartesian2D), false, seriesModel
+            (seriesModel.coordinateSystem as Polar | Cartesian2D), false, seriesModel, api.getDevicePixelRatio()
         );
         if (clipPath) {
             this.group.setClipPath(clipPath);
diff --git a/test/clip-line-cap.html b/test/clip-line-cap.html
new file mode 100644
index 00000000000..c444e3af5c8
--- /dev/null
+++ b/test/clip-line-cap.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+
+        <div id="main0"></div>
+
+
+
+
+
+
+        <script>
+        require([
+            'echarts',
+        ], function (echarts) {
+            var option;
+
+            option = {
+                grid: {
+                    width: 503,
+                    height: 400,
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    boundaryGap: false,
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: [150, 230, 224, 218, 135, 147, 152],
+                        type: 'line',
+                        showSymbol: false,
+                        lineStyle: {
+                            width: 4,
+                            cap: 'round',
+                        },
+                    },
+                ],
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Should Not Clip The Rightmost Cap of The Line'
+                ],
+                option: option
+                // height: 300,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+        });
+        </script>
+
+
+    </body>
+</html>