plainheart commented on code in PR #67:
URL: https://github.com/apache/echarts-handbook/pull/67#discussion_r974997719
##########
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:
`interactable` seems less used and it's better to use `interactive` for
consistency.
##########
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.
+
+## Performance
+
+As for the implementation, we first judge the intersection between the mouse
or touch position and the AABB bounding box of all interactable elements, so as
to quickly eliminate most of the elements that is not interacting. Then, we
perform an accurate path intersection judgment on the remaining elements.
Therefore, from the perspective of user experience, there is hardly any
perceivable performance loss.
Review Comment:
> As for the implementation, we first judge the intersection between the
mouse or touch position and the AABB bounding box of all **_interactable_**
elements, so as to quickly eliminate most of the elements that **_is_** not
**_interacting_**.
I think it should be
> As for the implementation, we first judge the intersection between the
mouse or touch position and the AABB bounding box of all **_interactive_**
elements, so as to quickly eliminate most of the elements that **_are_** not
**_intersecting_**.
##########
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.
Review Comment:
> 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.
I think it should be
> When a mouse or touch event occurs, ECharts will determine whether it is
**_intersecting_** with an **_interactive_** element based on the position of
the mouse or touch.
##########
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">
Review Comment:
In my view, it seems the word in this gif should be `Found Intersection`
instead of `Found Interaction`.
--
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]
