Ovilia commented on code in PR #67:
URL: https://github.com/apache/echarts-handbook/pull/67#discussion_r975208291
##########
contents/en/how-to/interaction/coarse-pointer.md:
##########
@@ -0,0 +1,27 @@
+# Intelligent Pointer Snapping
+
+Some interactive elements may be relatively small in charts, so sometimes it
is difficult for users to click and do other operations accurately, especially
on the mobile. Therefore, in Apache ECharts<sup>TM</sup> 5.4.0, we introduced
the concept of "smart pointer snapping".
+
+Starting from this version, by default, ECharts enables pointer snapping for
mobile charts and disables it for non-mobile charts.
+
+> If it needs to be enabled for all platforms, it can be achieved by setting
`opt.useCoarserPointer` to `true` in
[init](${mainSitePath}api.html#echarts.init); set to `false` is turned off for
all platforms.
+
+## Snapping Algorithm
+
+When a mouse or touch event occurs, ECharts will determine whether it is
interacting with an interactable element based on the position of the mouse or
touch. If it is, the element is the object to be interacted with, which is the
same logic before this optimization. If not, find an element that is closest to
the mouse or touch position within a certain range.
+
+> The default range is 44px (see [W3C
standard](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)),
developers can set this value through `opt.pointerSize` when
[init](${mainSitePath}api.html#echarts.init).
+
+More specifically, ECharts will loop through different angles and different
radii (within `opt.pointerSize`) around the mouse or touch position until it
finds an element that intersects it. If found, the element is considered to be
an interactive object.
+
+<img width="100%" height="100%" style="max-width: 441px"
+src="images/how-to/coarse-pointer-en.gif">
+</img>
+
+That is, if an element is within the `opt.pointerSize` radius of the mouse or
touch position, the closest interactable element is considered the interactive
object.
Review Comment:
Thanks for the review. I was using Google Translation and did not pay much
attention to the difference between interactive and interactable. After a
second thought, I think interactable can mean something can be interacted with
(可交互的) while interactive is the adjective form of interaction (交互的). But I do
like the idea to keep it simple so I changed all to be interactive.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
