You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2022/04/12 12:36:11 UTC
[echarts] 01/01: feat(dataZoom): add `preventDefaultMouseWheel` to allow controlling whether to perform the default mouse wheel behavior.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch feat-datazoom
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 2583463c42133e7667e3b07f1931637bf5aa6352
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Apr 12 20:32:09 2022 +0800
feat(dataZoom): add `preventDefaultMouseWheel` to allow controlling whether to perform the default mouse wheel behavior.
---
src/component/dataZoom/InsideZoomModel.ts | 7 +++++--
src/component/dataZoom/roams.ts | 9 +++++++--
src/component/helper/RoamController.ts | 30 ++++++++++++++++------------
test/dataZoom-scroll.html | 33 +++++++++++++++++++++++++++++--
test/runTest/actions/__meta__.json | 2 +-
test/runTest/actions/dataZoom-scroll.json | 2 +-
6 files changed, 62 insertions(+), 21 deletions(-)
diff --git a/src/component/dataZoom/InsideZoomModel.ts b/src/component/dataZoom/InsideZoomModel.ts
index ad417afc8..077e92cc7 100644
--- a/src/component/dataZoom/InsideZoomModel.ts
+++ b/src/component/dataZoom/InsideZoomModel.ts
@@ -40,6 +40,8 @@ export interface InsideDataZoomOption extends DataZoomOption {
preventDefaultMouseMove?: boolean
+ preventDefaultMouseWheel?: boolean
+
/**
* Inside dataZoom don't support textStyle
*/
@@ -57,8 +59,9 @@ class InsideZoomModel extends DataZoomModel<InsideDataZoomOption> {
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: false,
- preventDefaultMouseMove: true
+ preventDefaultMouseMove: true,
+ preventDefaultMouseWheel: true
});
}
-export default InsideZoomModel;
\ No newline at end of file
+export default InsideZoomModel;
diff --git a/src/component/dataZoom/roams.ts b/src/component/dataZoom/roams.ts
index c4f281d53..7465f3049 100644
--- a/src/component/dataZoom/roams.ts
+++ b/src/component/dataZoom/roams.ts
@@ -191,6 +191,7 @@ function mergeControllerParams(dataZoomInfoMap: HashMap<{ model: InsideZoomModel
'type_undefined': -1
};
let preventDefaultMouseMove = true;
+ let preventDefaultMouseWheel = true;
dataZoomInfoMap.each(function (dataZoomInfo) {
const dataZoomModel = dataZoomInfo.model;
@@ -207,6 +208,9 @@ function mergeControllerParams(dataZoomInfoMap: HashMap<{ model: InsideZoomModel
// users may be confused why it does not work when multiple insideZooms exist.
preventDefaultMouseMove = preventDefaultMouseMove
&& dataZoomModel.get('preventDefaultMouseMove', true);
+
+ preventDefaultMouseWheel = preventDefaultMouseWheel
+ && dataZoomModel.get('preventDefaultMouseWheel', true);
});
return {
@@ -218,7 +222,8 @@ function mergeControllerParams(dataZoomInfoMap: HashMap<{ model: InsideZoomModel
zoomOnMouseWheel: true,
moveOnMouseMove: true,
moveOnMouseWheel: true,
- preventDefaultMouseMove: !!preventDefaultMouseMove
+ preventDefaultMouseMove: !!preventDefaultMouseMove,
+ preventDefaultMouseWheel: !!preventDefaultMouseWheel
}
};
}
@@ -294,4 +299,4 @@ export function installDataZoomRoamProcessor(registers: EChartsExtensionInstallR
});
});
-}
\ No newline at end of file
+}
diff --git a/src/component/helper/RoamController.ts b/src/component/helper/RoamController.ts
index edff61052..0effc4f43 100644
--- a/src/component/helper/RoamController.ts
+++ b/src/component/helper/RoamController.ts
@@ -37,6 +37,7 @@ interface RoamOption {
* If fixed the page when pan
*/
preventDefaultMouseMove?: boolean
+ preventDefaultMouseWheel?: boolean
}
type RoamEventType = keyof RoamEventParams;
@@ -129,7 +130,8 @@ class RoamController extends Eventful<{
moveOnMouseMove: true,
// By default, wheel do not trigger move.
moveOnMouseWheel: false,
- preventDefaultMouseMove: true
+ preventDefaultMouseMove: true,
+ preventDefaultMouseWheel: true
});
if (controlType == null) {
@@ -229,15 +231,17 @@ class RoamController extends Eventful<{
const shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt);
const shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt);
const wheelDelta = e.wheelDelta;
- const absWheelDeltaDelta = Math.abs(wheelDelta);
- const originX = e.offsetX;
- const originY = e.offsetY;
// wheelDelta maybe -0 in chrome mac.
if (wheelDelta === 0 || (!shouldZoom && !shouldMove)) {
return;
}
+ const absWheelDelta = Math.abs(wheelDelta);
+ const originX = e.offsetX;
+ const originY = e.offsetY;
+ const preventDefaultMouseWheel = this._opt.preventDefaultMouseWheel;
+
// If both `shouldZoom` and `shouldMove` is true, trigger
// their event both, and the final behavior is determined
// by event listener themselves.
@@ -252,21 +256,20 @@ class RoamController extends Eventful<{
// (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel),
// although it has been normallized by zrender.
// wheelDelta of mouse wheel is bigger than touch pad.
- const factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1;
+ const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
const scale = wheelDelta > 0 ? factor : 1 / factor;
checkPointerAndTrigger(this, 'zoom', 'zoomOnMouseWheel', e, {
scale: scale, originX: originX, originY: originY, isAvailableBehavior: null
- });
+ }, preventDefaultMouseWheel);
}
if (shouldMove) {
// FIXME: Should do more test in different environment.
- const absDelta = Math.abs(wheelDelta);
// wheelDelta of mouse wheel is bigger than touch pad.
- const scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05);
+ const scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absWheelDelta > 3 ? 0.4 : absWheelDelta > 1 ? 0.15 : 0.05);
checkPointerAndTrigger(this, 'scrollMove', 'moveOnMouseWheel', e, {
scrollDelta: scrollDelta, originX: originX, originY: originY, isAvailableBehavior: null
- });
+ }, preventDefaultMouseWheel);
}
}
@@ -277,7 +280,7 @@ class RoamController extends Eventful<{
const scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
checkPointerAndTrigger(this, 'zoom', null, e, {
scale: scale, originX: e.pinchX, originY: e.pinchY, isAvailableBehavior: null
- });
+ }, false); // PENDING
}
}
@@ -287,7 +290,8 @@ function checkPointerAndTrigger<T extends 'scrollMove' | 'zoom'>(
eventName: T,
behaviorToCheck: RoamBehavior,
e: ZRElementEvent,
- contollerEvent: RoamEventParams[T]
+ contollerEvent: RoamEventParams[T],
+ preventDefaultMouseBehavior: boolean
) {
if (controller.pointerChecker
&& controller.pointerChecker(e, contollerEvent.originX, contollerEvent.originY)
@@ -295,7 +299,7 @@ function checkPointerAndTrigger<T extends 'scrollMove' | 'zoom'>(
// When mouse is out of roamController rect,
// default befavoius should not be be disabled, otherwise
// page sliding is disabled, contrary to expectation.
- eventTool.stop(e.event);
+ preventDefaultMouseBehavior && eventTool.stop(e.event);
trigger(controller, eventName, behaviorToCheck, e, contollerEvent);
}
@@ -332,4 +336,4 @@ function isAvailableBehavior(
);
}
-export default RoamController;
\ No newline at end of file
+export default RoamController;
diff --git a/test/dataZoom-scroll.html b/test/dataZoom-scroll.html
index 279939e92..21a66d224 100644
--- a/test/dataZoom-scroll.html
+++ b/test/dataZoom-scroll.html
@@ -46,7 +46,7 @@ under the License.
<div class="chart" id="d3"></div>
<div class="chart" id="d4"></div>
<div class="chart" id="d5"></div>
-
+ <div class="chart" id="d6"></div>
<script>
@@ -343,7 +343,36 @@ under the License.
})
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [120, 200, 150, 190]
+ }],
+ dataZoom: [{
+ type: 'inside',
+ zoomOnMouseWheel: 'shift',
+ preventDefaultMouseWheel: false
+ }]
+ };
+ testHelper.create(echarts, 'd6', {
+ title: [
+ 'The page should scroll when scrolling on the bar chart'
+ ],
+ option: option,
+ height: 400
+ });
+ });
+ </script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index 70b3b82b7..3afecf191 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -76,7 +76,7 @@
"dataZoom-scatter-category": 2,
"dataZoom-scatter-hv": 1,
"dataZoom-scatter-hv-polar": 3,
- "dataZoom-scroll": 3,
+ "dataZoom-scroll": 4,
"dataZoom-sync": 1,
"dataZoom-toolbox": 6,
"dataZoomHighPrecision": 3,
diff --git a/test/runTest/actions/dataZoom-scroll.json b/test/runTest/actions/dataZoom-scroll.json
index 3bf75fc97..aeacfcdad 100644
--- a/test/runTest/actions/dataZoom-scroll.json
+++ b/test/runTest/actions/dataZoom-scroll.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousewheel","time":1420,"x":330,"y":281,"deltaY":4.000244140625},{"type":"mousewheel","time":1445,"x":330,"y":281,"deltaY":37.391357421875},{"type":"mousewheel","time":1460,"x":330,"y":281,"deltaY":154.0765380859375},{"type":"mousewheel","time":1489,"x":330,"y":281,"deltaY":215.107421875},{"type":"mousewheel","time":1522,"x":330,"y":281,"deltaY":242.252197265625},{"type":"mousedown","time":2125,"x":330,"y":281},{"type":"mouseup","time":2215,"x":330,"y" [...]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousewheel","time":1420,"x":330,"y":281,"deltaY":4.000244140625},{"type":"mousewheel","time":1445,"x":330,"y":281,"deltaY":37.391357421875},{"type":"mousewheel","time":1460,"x":330,"y":281,"deltaY":154.0765380859375},{"type":"mousewheel","time":1489,"x":330,"y":281,"deltaY":215.107421875},{"type":"mousewheel","time":1522,"x":330,"y":281,"deltaY":242.252197265625},{"type":"mousedown","time":2125,"x":330,"y":281},{"type":"mouseup","time":2215,"x":330,"y" [...]
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org