feat: add draggable in labelLayout

src/label/LabelManager.ts

@@ -49,6 +49,7 @@ import SeriesModel from '../model/Series';
 import { makeInner } from '../util/model';
 import { retrieve2, each, keys } from 'zrender/src/core/util';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
+import Model from '../model/Model';
 
 interface DisplayedLabelItem {
     label: ZRText
@@ -65,6 +66,7 @@ interface LabelLayoutDesc {
 
     seriesModel: SeriesModel
     dataIndex: number
+    dataType: string
 
     layoutOption: LabelLayoutOptionCallback | LabelLayoutOption
 
@@ -107,6 +109,7 @@ function prepareLayoutCallbackParams(labelItem: LabelLayoutDesc): LabelLayoutOpt
     const label = labelItem.label;
     return {
         dataIndex: labelItem.dataIndex,
+        dataType: labelItem.dataType,
         seriesIndex: labelItem.seriesModel.seriesIndex,
         text: labelItem.label.style.text,
         rect: labelItem.hostRect,
@@ -136,6 +139,11 @@ const labelLineAnimationStore = makeInner<{
     }
 }, Polyline>();
 
+type LabelLineOptionMixin = {
+    labelLine: LabelLineOption,
+    emphasis: { labelLine: LabelLineOption }
+};
+
 class LabelManager {
 
     private _labelList: LabelLayoutDesc[] = [];
@@ -153,6 +161,7 @@ class LabelManager {
      */
     private _addLabel(
         dataIndex: number,
+        dataType: string,
         seriesModel: SeriesModel,
         label: ZRText,
         layoutOption: LabelLayoutDesc['layoutOption']
@@ -192,6 +201,7 @@ class LabelManager {
 
             seriesModel,
             dataIndex,
+            dataType,
 
             layoutOption,
 
@@ -253,10 +263,11 @@ class LabelManager {
 
             // Only support label being hosted on graphic elements.
             const textEl = child.getTextContent();
-            const dataIndex = getECData(child).dataIndex;
+            const ecData = getECData(child);
+            const dataIndex = ecData.dataIndex;
             // Can only attach the text on the element with dataIndex
             if (textEl && dataIndex != null) {
-                this._addLabel(dataIndex, seriesModel, textEl, layoutOption);
+                this._addLabel(dataIndex, ecData.dataType, seriesModel, textEl, layoutOption);
             }
         });
     }
@@ -264,6 +275,12 @@ class LabelManager {
     updateLayoutConfig(api: ExtensionAPI) {
         const width = api.getWidth();
         const height = api.getHeight();
+
+        function createDragHandler(el: Element, labelLineModel: Model) {
+            return function () {
+                updateLabelLinePoints(el, labelLineModel);
+            };
+        }
         for (let i = 0; i < this._labelList.length; i++) {
             const labelItem = this._labelList[i];
             const label = labelItem.label;
@@ -324,6 +341,21 @@ class LabelManager {
 
             labelItem.overlap = layoutOption.overlap;
             labelItem.overlapMargin = layoutOption.overlapMargin;
+
+            if (layoutOption.draggable) {
+                label.draggable = true;
+                label.cursor = 'move';
+                if (hostEl) {
+                    const data = labelItem.seriesModel.getData(labelItem.dataType);
+                    const itemModel = data.getItemModel<LabelLineOptionMixin>(labelItem.dataIndex);
+                    label.on('drag', createDragHandler(hostEl, itemModel.getModel('labelLine')));
+                }
+            }
+            else {
+                // TODO Other drag functions?
+                label.off('drag');
+                label.cursor = 'default';
+            }
         }
     }
 
@@ -406,7 +438,6 @@ class LabelManager {
                     transform
                 });
             }
-
         }
     }
 
@@ -444,10 +475,7 @@ class LabelManager {
 
         if (textEl && dataIndex != null) {
             const data = seriesModel.getData(ecData.dataType);
-            const itemModel = data.getItemModel<{
-                labelLine: LabelLineOption,
-                emphasis: { labelLine: LabelLineOption }
-            }>(dataIndex);
+            const itemModel = data.getItemModel<LabelLineOptionMixin>(dataIndex);
 
             const defaultStyle: PathStyleProps = {};
             const visualStyle = data.getItemVisual(dataIndex, 'style');
@@ -462,7 +490,6 @@ class LabelManager {
                 emphasis: itemModel.getModel(['emphasis', 'labelLine'])
             }, defaultStyle);
 
-
             updateLabelLinePoints(el, labelLineModel);
         }
     }

src/util/types.ts

@@ -811,6 +811,7 @@ export interface LabelLineOption {
 
 export interface LabelLayoutOptionCallbackParams {
     dataIndex: number,
+    dataType: string,
     seriesIndex: number,
     text: string
     align: ZRTextAlign
@@ -831,6 +832,11 @@ export interface LabelLayoutOption {
      * Minimal margin between two labels which will be considered as overlapped.
      */
     overlapMargin?: number
+
+    /**
+     * If label is draggable.
+     */
+    draggable?: boolean
     /**
      * Can be absolute px number or percent string.
      */

test/labelLine.html

@@ -67,11 +67,13 @@ under the License.
                     },
                     labelLayout: {
                         y: 20,
+                        draggable: true,
                         align: 'center',
                         overlap: 'hidden'
                     },
                     labelLine: {
-                        show: true
+                        show: true,
+                        length2: 10
                     },
                     label: {
                         show: true,
@@ -89,11 +91,13 @@ under the License.
                     },
                     labelLayout: {
                         y: 40,
+                        draggable: true,
                         align: 'center',
                         overlap: 'hidden'
                     },
                     labelLine: {
-                        show: true
+                        show: true,
+                        length2: 10
                     },
                     label: {
                         show: true,
@@ -107,8 +111,6 @@ under the License.
 
             var chart = testHelper.create(echarts, 'main0', {
                 title: [
-                    'Test Case Description of main0',
-                    '(Muliple lines and **emphasis** are supported in description)'
                 ],
                 option: option
                 // height: 300,

test/pie-label.html

@@ -47,6 +47,7 @@ under the License.
         <div id="main4"></div>
         <div id="main5"></div>
         <div id="main6"></div>
+        <div id="main7"></div>
 
 
         <script>
@@ -645,5 +646,60 @@ under the License.
 
         </script>
 
+        <script>
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+                const option = {
+                    backgroundColor: '#2c343c',
+                    visualMap: {
+                        show: false,
+                        min: 80,
+                        max: 600,
+                        inRange: {
+                            colorLightness: [0, 1]
+                        }
+                    },
+                    series : [
+                        {
+                            name: '访问来源',
+                            type: 'pie',
+                            radius: '55%',
+                            data:[
+                                {value:235, name:'视频广告'},
+                                {value:274, name:'联盟广告'},
+                                {value:310, name:'邮件营销'},
+                                {value:335, name:'直接访问'},
+                                {value:400, name:'搜索引擎'}
+                            ],
+                            roseType: 'angle',
+                            label: {
+                                textStyle: {
+                                    color: 'rgba(255, 255, 255, 0.3)'
+                                }
+                            },
+                            labelLine: {
+                                smooth: true,
+                                minTurnAngle: 120,
+                                lineStyle: {
+                                    color: 'rgba(255, 255, 255, 0.3)'
+                                }
+                            },
+                            itemStyle: {
+                                color: '#c23531',
+                                shadowBlur: 200,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    ]
+                };
+                var chart = testHelper.create(echarts, 'main7', {
+                    title: 'Case from https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step5',
+                    height: 300,
+                    option: option
+                });
+            });
+
+        </script>
     </body>
 </html>
\ No newline at end of file