From e7ad886d7bbe9e7b5001cc888c0c5833b08edb6c Mon Sep 17 00:00:00 2001
From: "linghao.su" <slh001@live.cn>
Date: Mon, 26 Jun 2023 23:48:31 +0800
Subject: [PATCH] fix(sunburst): normalize label rotation when decompress from
 matrix

---
 src/chart/sunburst/SunburstPiece.ts           |   2 +-
 src/label/LabelManager.ts                     |   3 +
 test/runTest/actions/__meta__.json            |   1 +
 .../actions/sunburst-label-rotate.json        |   1 +
 test/sunburst-label-rotate.html               | 110 ++++++++++++++++++
 5 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 test/runTest/actions/sunburst-label-rotate.json
 create mode 100644 test/sunburst-label-rotate.html

diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts
index f937b59ab9..b0d662796d 100644
--- a/src/chart/sunburst/SunburstPiece.ts
+++ b/src/chart/sunburst/SunburstPiece.ts
@@ -270,7 +270,7 @@ class SunburstPiece extends graphic.Sector {
                 rotate = rotateType * Math.PI / 180;
             }
 
-            state.rotation = rotate;
+            state.rotation = normalizeRadian(rotate);
         });
 
 
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index f2b2aefd36..d20c75f16d 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -53,6 +53,7 @@ import { PathStyleProps } from 'zrender/src/graphic/Path';
 import Model from '../model/Model';
 import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
 import { labelInner, animateLabelValue } from './labelStyle';
+import { normalizeRadian } from 'zrender/src/contain/util';
 
 interface LabelDesc {
     label: ZRText
@@ -219,6 +220,8 @@ class LabelManager {
             dummyTransformable.scaleX = dummyTransformable.scaleY = 1;
         }
 
+        dummyTransformable.rotation = normalizeRadian(dummyTransformable.rotation);
+
         const host = label.__hostTarget;
         let hostRect;
         if (host) {
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index e5263c1683..dee65260b6 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -177,6 +177,7 @@
   "stackBar-dataZoom": 7,
   "sunburst-book": 1,
   "sunburst-canvas": 1,
+  "sunburst-label-rotate": 1,
   "svg-ssr": 1,
   "symbol": 1,
   "symbol2": 1,
diff --git a/test/runTest/actions/sunburst-label-rotate.json b/test/runTest/actions/sunburst-label-rotate.json
new file mode 100644
index 0000000000..f2e04c5554
--- /dev/null
+++ b/test/runTest/actions/sunburst-label-rotate.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousemove","time":1481,"x":532,"y":440},{"type":"mousemove","time":1683,"x":530,"y":437},{"type":"mousemove","time":1889,"x":530,"y":437},{"type":"mousemove","time":2092,"x":516,"y":421},{"type":"mousemove","time":2298,"x":510,"y":410},{"type":"mousemove","time":2500,"x":499,"y":393},{"type":"screenshot","time":2642},{"type":"mousemove","time":2705,"x":494,"y":386},{"type":"mousemove","time":2905,"x":447,"y":313},{"type":"mousemove","time":3111,"x":441,"y":302},{"type":"mousemove","time":3317,"x":441,"y":301},{"type":"screenshot","time":3353},{"type":"mousemove","time":3431,"x":441,"y":302},{"type":"mousemove","time":3631,"x":467,"y":336},{"type":"mousemove","time":3834,"x":434,"y":333},{"type":"screenshot","time":3971},{"type":"mousemove","time":4039,"x":406,"y":297},{"type":"mousemove","time":4240,"x":404,"y":275},{"type":"screenshot","time":4311},{"type":"mousemove","time":4441,"x":404,"y":267},{"type":"screenshot","time":4579},{"type":"mousemove","time":4649,"x":432,"y":228},{"type":"mousemove","time":4849,"x":441,"y":219},{"type":"screenshot","time":5035},{"type":"mousemove","time":5065,"x":441,"y":218},{"type":"mousemove","time":5268,"x":449,"y":197},{"type":"mousemove","time":5473,"x":463,"y":175},{"type":"mousemove","time":5675,"x":347,"y":180},{"type":"screenshot","time":5854},{"type":"mousemove","time":5881,"x":342,"y":193},{"type":"screenshot","time":6063},{"type":"mousemove","time":6088,"x":356,"y":230},{"type":"mousemove","time":6290,"x":332,"y":253},{"type":"screenshot","time":6293},{"type":"mousemove","time":6493,"x":308,"y":261},{"type":"screenshot","time":6526},{"type":"mousemove","time":6698,"x":279,"y":262},{"type":"screenshot","time":6743},{"type":"mousemove","time":6905,"x":256,"y":290},{"type":"screenshot","time":6993},{"type":"mousemove","time":7107,"x":508,"y":332},{"type":"mousemove","time":7310,"x":689,"y":406},{"type":"mousemove","time":7473,"x":690,"y":406},{"type":"mousemove","time":7676,"x":771,"y":378}],"scrollY":0,"scrollX":0,"timestamp":1687794351162}]
\ No newline at end of file
diff --git a/test/sunburst-label-rotate.html b/test/sunburst-label-rotate.html
new file mode 100644
index 0000000000..a249b1b6e2
--- /dev/null
+++ b/test/sunburst-label-rotate.html
@@ -0,0 +1,110 @@
+<!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="lib/dat.gui.min.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",
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                var data = [
+                    {
+                        name: "Grandpa",
+                        children: [
+                            {
+                                name: "Uncle Leo",
+                                value: 15,
+                                children: [
+                                    {
+                                        name: "Cousin Ben",
+                                        value: 4,
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        name: "Mike",
+                        children: [
+                            {
+                                name: "Uncle Dan",
+                                children: [
+                                    {
+                                        name: "Cousin Lucy",
+                                        value: 3,
+                                    },
+                                    {
+                                        name: "Cousin Luck",
+                                        value: 4,
+                                        children: [
+                                            {
+                                                name: "Nephew",
+                                                value: 2,
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ];
+
+                option = {
+                    series: {
+                        type: "sunburst",
+                        data: data,
+                        labelLayout: {
+                            hideOverlap: true,
+                        },
+                        label: {},
+                    },
+                };
+
+                var chart = testHelper.create(echarts, "main0", {
+                    title: ["Put label in the center if it's a circle"],
+                    option: option,
+                    // height: 300,
+                    // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                    // recordCanvas: true,
+                });
+            });
+        </script>
+    </body>
+</html>