Merge pull request #11959 from apache/group-draggable

feat(graphic): add draggable support to group elements.
apache · Jan 7, 2020 · 3e728eb · 3e728eb
2 parents 0161a74 + 44bfbd7
commit 3e728eb
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/test/graphic-draggable.html b/test/graphic-draggable.html
@@ -0,0 +1,140 @@
+<!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/esl.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>
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <div id="main0"></div>
+
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var option;
+
+            option = {
+                graphic: [{
+                    elements: [{
+                        type: 'rect',
+                        shape: {
+                            x: -50, y: -50, width: 100, height: 100
+                        },
+                        style: {
+                            fill: 'blue'
+                        },
+                        position: [200, 200],
+                        rotation: 1,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'circle',
+                        shape: {
+                            cx: 100, cy: 100, r: 50
+                        },
+                        style: {
+                            fill: 'red'
+                        },
+                        rotation: 0.3,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'text',
+                        style: {
+                            text: 'DRAG ME',
+                            font: '20px sans-serif'
+                        },
+                        position: [300, 50],
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'bezierCurve',
+                        shape: {
+                            x1: 10,
+                            y1: 10,
+                            x2: 100,
+                            y2: 10,
+                            cpx1: 60,
+                            cpy1: 100
+                        },
+                        style: {
+                            fill: 'green',
+                            lineWidth: 10
+                        },
+                        left: 300,
+                        bottom: 100,
+                        cursor: 'move',
+                        draggable: true
+                    }, {
+                        type: 'group',
+                        draggable: true,
+                        children: [{
+                            type: 'rect',
+                            shape: {
+                                x: -30, y: -30, width: 60, height: 60
+                            },
+                            style: {
+                                fill: '#aaa'
+                            },
+                            rotation: 2,
+                            cursor: 'move'
+                        }, {
+                            type: 'circle',
+                            shape: {
+                                cx: 40, cy: 0, r: 40
+                            },
+                            style: {
+                                fill: '#777'
+                            },
+                            cursor: 'move'
+                        }, {
+                            type: 'text',
+                            style: {
+                                x: 100,
+                                text: 'DRAG GROUP',
+                                textAlign: 'left',
+                                font: '16px sans-serif'
+                            },
+                            cursor: 'move'
+                        }],
+                        position: [500, 200]
+                    }]
+                },]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Draggable on different elements'
+                ],
+                option: option
+            });
+        });
+        </script>
+    </body>
+</html>
+
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
@@ -79,6 +79,7 @@
   "graph": 2,
   "graph-grid": 1,
   "graph-simple": 2,
+  "graphic-draggable": 1,
   "heatmap": 1,
   "heatmap-map": 1,
   "homepage3": 1,

diff --git a/test/runTest/actions/graphic-draggable.json b/test/runTest/actions/graphic-draggable.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousedown","time":594,"x":140,"y":107},{"type":"mousemove","time":670,"x":140,"y":109},{"type":"mousemove","time":877,"x":123,"y":295},{"type":"mousemove","time":1094,"x":118,"y":389},{"type":"mouseup","time":1148,"x":118,"y":389},{"time":1149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1303,"x":144,"y":348},{"type":"mousemove","time":1503,"x":210,"y":274},{"type":"mousedown","time":1645,"x":210,"y":272},{"type":"mousemove","time":1703,"x":205,"y":291},{"type":"mousemove","time":1903,"x":254,"y":428},{"type":"mousemove","time":2111,"x":296,"y":497},{"type":"mouseup","time":2144,"x":296,"y":497},{"time":2145,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2320,"x":339,"y":387},{"type":"mousemove","time":2521,"x":337,"y":380},{"type":"mousemove","time":2721,"x":272,"y":441},{"type":"mousedown","time":2878,"x":271,"y":441},{"type":"mousemove","time":2928,"x":271,"y":441},{"type":"mousemove","time":3138,"x":189,"y":231},{"type":"mousemove","time":3338,"x":145,"y":170},{"type":"mouseup","time":3496,"x":111,"y":160},{"time":3497,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3540,"x":111,"y":160},{"type":"mousemove","time":3746,"x":337,"y":293},{"type":"mousemove","time":3955,"x":344,"y":324},{"type":"mousedown","time":4063,"x":343,"y":326},{"type":"mousemove","time":4155,"x":265,"y":309},{"type":"mousemove","time":4356,"x":136,"y":296},{"type":"mouseup","time":4553,"x":128,"y":297},{"time":4554,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4567,"x":128,"y":297},{"type":"mousemove","time":4773,"x":309,"y":170},{"type":"mousemove","time":4980,"x":330,"y":134},{"type":"mousemove","time":5197,"x":328,"y":123},{"type":"mousedown","time":5331,"x":328,"y":122},{"type":"mousemove","time":5406,"x":326,"y":125},{"type":"mousemove","time":5606,"x":264,"y":285},{"type":"mousemove","time":5816,"x":241,"y":331},{"type":"mouseup","time":5933,"x":241,"y":331},{"time":5934,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6009,"x":241,"y":331},{"type":"mousemove","time":6209,"x":478,"y":276},{"type":"mousemove","time":6410,"x":509,"y":270},{"type":"mousedown","time":6615,"x":511,"y":268},{"type":"mousemove","time":6623,"x":511,"y":268},{"type":"mousemove","time":6826,"x":487,"y":272},{"type":"mousemove","time":7026,"x":428,"y":281},{"type":"mousemove","time":7232,"x":391,"y":283},{"type":"mouseup","time":7332,"x":391,"y":283},{"time":7333,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7425,"x":390,"y":283},{"type":"mousemove","time":7625,"x":370,"y":274},{"type":"mousemove","time":7825,"x":362,"y":270},{"type":"mousedown","time":7884,"x":362,"y":270},{"type":"mousemove","time":8026,"x":312,"y":214},{"type":"mousemove","time":8226,"x":253,"y":123},{"type":"mousemove","time":8432,"x":253,"y":122},{"type":"mouseup","time":8505,"x":253,"y":122},{"time":8506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8593,"x":253,"y":122},{"type":"mousemove","time":8801,"x":426,"y":144},{"type":"mousemove","time":9010,"x":425,"y":139},{"type":"mousemove","time":9217,"x":425,"y":136},{"type":"mousedown","time":9269,"x":425,"y":136},{"type":"mousemove","time":9427,"x":404,"y":251},{"type":"mousemove","time":9627,"x":398,"y":309},{"type":"mouseup","time":10122,"x":398,"y":309},{"time":10123,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10130,"x":396,"y":310},{"type":"mousemove","time":10335,"x":252,"y":338},{"type":"mousemove","time":10544,"x":236,"y":340},{"type":"mousemove","time":10744,"x":229,"y":335},{"type":"mousemove","time":10953,"x":223,"y":332},{"type":"mousemove","time":11161,"x":216,"y":332},{"type":"mousedown","time":11269,"x":215,"y":332},{"type":"mousemove","time":11362,"x":215,"y":332},{"type":"mousemove","time":11571,"x":335,"y":370},{"type":"mousemove","time":11778,"x":478,"y":383},{"type":"mousemove","time":11985,"x":496,"y":385},{"type":"mouseup","time":12130,"x":496,"y":385},{"time":12131,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1577774171449}]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"name":"Action 1","ops":[{"type":"mousedown","time":594,"x":140,"y":107},{"type":"mousemove","time":670,"x":140,"y":109},{"type":"mousemove","time":877,"x":123,"y":295},{"type":"mousemove","time":1094,"x":118,"y":389},{"type":"mouseup","time":1148,"x":118,"y":389},{"time":1149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1303,"x":144,"y":348},{"type":"mousemove","time":1503,"x":210,"y":274},{"type":"mousedown","time":1645,"x":210,"y":272},{"type":"mousemove","time":1703,"x":205,"y":291},{"type":"mousemove","time":1903,"x":254,"y":428},{"type":"mousemove","time":2111,"x":296,"y":497},{"type":"mouseup","time":2144,"x":296,"y":497},{"time":2145,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2320,"x":339,"y":387},{"type":"mousemove","time":2521,"x":337,"y":380},{"type":"mousemove","time":2721,"x":272,"y":441},{"type":"mousedown","time":2878,"x":271,"y":441},{"type":"mousemove","time":2928,"x":271,"y":441},{"type":"mousemove","time":3138,"x":189,"y":231},{"type":"mousemove","time":3338,"x":145,"y":170},{"type":"mouseup","time":3496,"x":111,"y":160},{"time":3497,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3540,"x":111,"y":160},{"type":"mousemove","time":3746,"x":337,"y":293},{"type":"mousemove","time":3955,"x":344,"y":324},{"type":"mousedown","time":4063,"x":343,"y":326},{"type":"mousemove","time":4155,"x":265,"y":309},{"type":"mousemove","time":4356,"x":136,"y":296},{"type":"mouseup","time":4553,"x":128,"y":297},{"time":4554,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4567,"x":128,"y":297},{"type":"mousemove","time":4773,"x":309,"y":170},{"type":"mousemove","time":4980,"x":330,"y":134},{"type":"mousemove","time":5197,"x":328,"y":123},{"type":"mousedown","time":5331,"x":328,"y":122},{"type":"mousemove","time":5406,"x":326,"y":125},{"type":"mousemove","time":5606,"x":264,"y":285},{"type":"mousemove","time":5816,"x":241,"y":331},{"type":"mouseup","time":5933,"x":241,"y":331},{"time":5934,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6009,"x":241,"y":331},{"type":"mousemove","time":6209,"x":478,"y":276},{"type":"mousemove","time":6410,"x":509,"y":270},{"type":"mousedown","time":6615,"x":511,"y":268},{"type":"mousemove","time":6623,"x":511,"y":268},{"type":"mousemove","time":6826,"x":487,"y":272},{"type":"mousemove","time":7026,"x":428,"y":281},{"type":"mousemove","time":7232,"x":391,"y":283},{"type":"mouseup","time":7332,"x":391,"y":283},{"time":7333,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7425,"x":390,"y":283},{"type":"mousemove","time":7625,"x":370,"y":274},{"type":"mousemove","time":7825,"x":362,"y":270},{"type":"mousedown","time":7884,"x":362,"y":270},{"type":"mousemove","time":8026,"x":312,"y":214},{"type":"mousemove","time":8226,"x":253,"y":123},{"type":"mousemove","time":8432,"x":253,"y":122},{"type":"mouseup","time":8505,"x":253,"y":122},{"time":8506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8593,"x":253,"y":122},{"type":"mousemove","time":8801,"x":426,"y":144},{"type":"mousemove","time":9010,"x":425,"y":139},{"type":"mousemove","time":9217,"x":425,"y":136},{"type":"mousedown","time":9269,"x":425,"y":136},{"type":"mousemove","time":9427,"x":404,"y":251},{"type":"mousemove","time":9627,"x":398,"y":309},{"type":"mouseup","time":10122,"x":398,"y":309},{"time":10123,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10130,"x":396,"y":310},{"type":"mousemove","time":10335,"x":252,"y":338},{"type":"mousemove","time":10544,"x":236,"y":340},{"type":"mousemove","time":10744,"x":229,"y":335},{"type":"mousemove","time":10953,"x":223,"y":332},{"type":"mousemove","time":11161,"x":216,"y":332},{"type":"mousedown","time":11269,"x":215,"y":332},{"type":"mousemove","time":11362,"x":215,"y":332},{"type":"mousemove","time":11571,"x":335,"y":370},{"type":"mousemove","time":11778,"x":478,"y":383},{"type":"mousemove","time":11985,"x":496,"y":385},{"type":"mouseup","time":12130,"x":496,"y":385},{"time":12131,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1577774171449}]