From f38c2a6b1639276eca39a202c0f68a631fb0621d Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Thu, 12 Oct 2023 16:55:44 +0800
Subject: [PATCH] feat(pictorialBar): support clip for pictorialBar series

---
 src/chart/bar/PictorialBarSeries.ts |  6 ++
 src/chart/bar/PictorialBarView.ts   | 12 ++++
 test/pictorial-single.html          | 95 +++++++++++++++++++++++++++++
 3 files changed, 113 insertions(+)

diff --git a/src/chart/bar/PictorialBarSeries.ts b/src/chart/bar/PictorialBarSeries.ts
index d799057d9e..95fbdd230f 100644
--- a/src/chart/bar/PictorialBarSeries.ts
+++ b/src/chart/bar/PictorialBarSeries.ts
@@ -119,6 +119,8 @@ export interface PictorialBarSeriesOption
     coordinateSystem?: 'cartesian2d'
 
     data?: (PictorialBarDataItemOption | OptionDataValue | OptionDataValue[])[]
+
+    clip?: boolean
 }
 
 class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOption> {
@@ -150,6 +152,10 @@ class PictorialBarSeriesModel extends BaseBarSeriesModel<PictorialBarSeriesOptio
 
         barGap: '-100%',      // In most case, overlap is needed.
 
+        // Pictorial bar do not clip by default because in many cases
+        // xAxis and yAxis are not displayed and it's expected not to clip
+        clip: false,
+
         // z can be set in data item, which is z2 actually.
 
         // Disable progressive
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index 5b13bcbf86..7f9779e7e4 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -38,6 +38,7 @@ import { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import ZRImage from 'zrender/src/graphic/Image';
 import { getECData } from '../../util/innerStore';
+import { createClipPath } from '../helper/createClipPathFromCoordSys';
 
 const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
 
@@ -214,6 +215,17 @@ class PictorialBarView extends ChartView {
             })
             .execute();
 
+        // Do clipping
+        const clipPath = seriesModel.get('clip', true)
+            ? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
+            : null;
+        if (clipPath) {
+            group.setClipPath(clipPath);
+        }
+        else {
+            group.removeClipPath();
+        }
+
         this._data = data;
 
         return this.group;
diff --git a/test/pictorial-single.html b/test/pictorial-single.html
index f83ff84c38..950ae1022f 100644
--- a/test/pictorial-single.html
+++ b/test/pictorial-single.html
@@ -59,6 +59,10 @@ <h2>repeatDirection | dynamic</h2>
         <h2>texture</h2>
         <div class="chart" id="texture"></div>
         <h2>horizontal | no clip | symbolOffset</h2>
+        <div class="chart" id="min1"></div>
+        <h2>negative min value with clip</h2>
+        <div class="chart" id="min2"></div>
+        <h2>negative min value without clip</h2>
         <div class="chart" id="velocity"></div>
         <h2>clip</h2>
         <div class="chart" id="clip"></div>
@@ -431,12 +435,103 @@ <h2>dotted | gradient</h2>
         </script>
 
 
+        <script>
 
+            var rawData = [
+                {name: '驯鹿', velocity: 123, symbol: 'reindeer'},
+                {name: '火箭', velocity: 60, symbol: 'rocket'},
+                {name: '飞机', velocity: 25, symbol: 'plane'},
+                {name: '高铁', velocity: 18, symbol: 'train'},
+                {name: '轮船', velocity: 12, symbol: 'ship'},
+                {name: '汽车', velocity: 9, symbol: 'car'},
+                {name: '跑步', velocity: 2, symbol: 'run'},
+                {name: '步行', velocity: 1, symbol: 'walk'}
+            ];
 
+            makeChart('min1', {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'none'
+                    }
+                },
+                xAxis: {
+                    data: rawData.map(function (item) {
+                        return item.name;
+                    })
+                },
+                yAxis: {
+                    min: 10
+                },
+                series: [{
+                    name: 'hill',
+                    type: 'pictorialBar',
+                    barCategoryGap: '-50%',
+                    symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+                    itemStyle: {
+                        normal: {
+                            opacity: 0.5
+                        },
+                        emphasis: {
+                            opacity: 1
+                        }
+                    },
+                    data: rawData.map(function (item) {
+                        return item.velocity;
+                    }),
+                    clip: true
+                }]
+            });
+        </script>
 
 
+        <script>
 
+            var rawData = [
+                {name: '驯鹿', velocity: 123, symbol: 'reindeer'},
+                {name: '火箭', velocity: 60, symbol: 'rocket'},
+                {name: '飞机', velocity: 25, symbol: 'plane'},
+                {name: '高铁', velocity: 18, symbol: 'train'},
+                {name: '轮船', velocity: 12, symbol: 'ship'},
+                {name: '汽车', velocity: 9, symbol: 'car'},
+                {name: '跑步', velocity: 2, symbol: 'run'},
+                {name: '步行', velocity: 1, symbol: 'walk'}
+            ];
 
+            makeChart('min2', {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'none'
+                    }
+                },
+                xAxis: {
+                    data: rawData.map(function (item) {
+                        return item.name;
+                    })
+                },
+                yAxis: {
+                    min: 10
+                },
+                series: [{
+                    name: 'hill',
+                    type: 'pictorialBar',
+                    barCategoryGap: '-50%',
+                    symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+                    itemStyle: {
+                        normal: {
+                            opacity: 0.5
+                        },
+                        emphasis: {
+                            opacity: 1
+                        }
+                    },
+                    data: rawData.map(function (item) {
+                        return item.velocity;
+                    })
+                }]
+            });
+        </script>