feat(line): add support for touch events + crosshair (#2524)

* Fix build + note Windows development

* Add touch cursor support

* Make touch crosshair optional + off by default

* `touchCrosshair` > `enableTouchCrosshair`

* Add missing hook dependencies

* Make unions of MouseEvent | TouchEvent

* Added website docs

* Update help

* Add tests

* Add touch crosshair to storybook

* Fix make command

* Add support for touch crosshair on slice based graphs

* Update docs

* Tweak defaults

* Added note about slices vs useMesh for line isInteractive

* Fix missing import

* Tweaks comments

CONTRIBUTING.md

@@ -28,7 +28,11 @@ the various packages, please execute the following:
 make init
 ```
 
-> please note that it will take a while as this project uses a lot of dependencies…
+> please note that it will take a while as this project uses a lot of dependencies…'
+
+### Windows
+
+If you want to build this project on Windows, it is recommended to use either WSL 2, or Git bash + `choco install make`.
 
 ## Development
 

Makefile

@@ -78,7 +78,7 @@ fmt-check: ##@0 global check if files were all formatted using prettier
 
 test: ##@0 global run all checks/tests (packages, website)
 	@$(MAKE) fmt-check
-	@$(MAKE) lint
+	@$(MAKE) pkgs-lint
 	@$(MAKE) pkgs-test
 
 vercel-build: ##@0 global Build the website and storybook to vercel

package.json

@@ -18,6 +18,9 @@
   "keywords": [],
   "devDependencies": {
     "@babel/core": "^7.21.5",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
     "@ekino/config": "^0.3.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -27,6 +30,7 @@
     "@types/lodash": "^4.14.170",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
@@ -35,6 +39,7 @@
     "babel-loader": "^8.2.3",
     "chalk": "^5.2.0",
     "chalk-template": "^1.0.0",
+    "cypress": "^12.11.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
@@ -57,16 +62,14 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-test-renderer": "^18.2.0",
-    "@types/react-test-renderer": "^18.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^3.21.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-size": "^0.3.1",
     "rollup-plugin-strip-banner": "^3.0.0",
     "rollup-plugin-visualizer": "^5.5.2",
     "serve": "^13.0.2",
-    "typescript": "^4.9.5",
-    "cypress": "^12.11.0"
+    "typescript": "^4.9.5"
   },
   "resolutions": {
     "@types/react": "^18.2.0",

packages/core/index.d.ts

@@ -516,7 +516,10 @@ export function usePropertyAccessor<Datum, Value>(
     accessor: PropertyAccessor<Datum, Value>
 ): (datum: Datum) => Value
 
-export function getRelativeCursor(element: Element, event: React.MouseEvent): [number, number]
+export function getRelativeCursor(
+    element: Element,
+    event: React.MouseEvent | React.TouchEvent
+): [number, number]
 export function isCursorInRect(
     x: number,
     y: number,

packages/core/src/lib/interactivity/index.js

@@ -22,7 +22,8 @@ export * from './detect'
  * give us the scaling factor to calculate the proper mouse position.
  */
 export const getRelativeCursor = (el, event) => {
-    const { clientX, clientY } = event
+    const { clientX, clientY } = 'touches' in event ? event.touches[0] : event
+
     // Get the dimensions of the element, in case it has
     // been scaled using a transform for example, we get
     // the scaled dimensions, not the original ones.
@@ -36,8 +37,10 @@ export const getRelativeCursor = (el, event) => {
     } else {
         // Other elements.
         originalBox = {
-            width: el.offsetWidth,
-            height: el.offsetHeight,
+            // These should be here, except when we are running in jsdom.
+            // https://github.com/jsdom/jsdom/issues/135
+            width: el.offsetWidth || 0,
+            height: el.offsetHeight || 0,
         }
     }
 

packages/line/index.d.ts

@@ -99,6 +99,7 @@ export interface Point {
 export type AccessorFunc = (datum: Point['data']) => string
 
 export type PointMouseHandler = (point: Point, event: React.MouseEvent) => void
+export type PointTouchHandler = (point: Point, event: React.TouchEvent) => void
 
 export interface PointTooltipProps {
     point: Point
@@ -185,6 +186,9 @@ export interface LineProps {
     onMouseMove?: PointMouseHandler
     onMouseLeave?: PointMouseHandler
     onClick?: PointMouseHandler
+    onTouchStart?: PointTouchHandler
+    onTouchMove?: PointTouchHandler
+    onTouchEnd?: PointTouchHandler
 
     debugMesh?: boolean
 
@@ -197,6 +201,7 @@ export interface LineProps {
 
     enableCrosshair?: boolean
     crosshairType?: CrosshairType
+    enableTouchCrosshair?: boolean
 
     legends?: LegendProps[]
 }

packages/line/src/Line.js

@@ -101,6 +101,9 @@ const Line = props => {
         onMouseMove,
         onMouseLeave,
         onClick,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
 
         tooltip = PointTooltip,
 
@@ -110,6 +113,7 @@ const Line = props => {
 
         enableCrosshair = true,
         crosshairType = 'bottom-left',
+        enableTouchCrosshair = false,
 
         role = 'img',
     } = props
@@ -241,6 +245,9 @@ const Line = props => {
                 onMouseMove={onMouseMove}
                 onMouseLeave={onMouseLeave}
                 onClick={onClick}
+                onTouchStart={onTouchStart}
+                onTouchMove={onTouchMove}
+                onTouchEnd={onTouchEnd}
             />
         )
     }
@@ -303,7 +310,11 @@ const Line = props => {
                 onMouseMove={onMouseMove}
                 onMouseLeave={onMouseLeave}
                 onClick={onClick}
+                onTouchStart={onTouchStart}
+                onTouchMove={onTouchMove}
+                onTouchEnd={onTouchEnd}
                 tooltip={tooltip}
+                enableTouchCrosshair={enableTouchCrosshair}
                 debug={debugMesh}
             />
         )

packages/line/src/Mesh.js

@@ -21,8 +21,12 @@ const Mesh = ({
     onMouseMove,
     onMouseLeave,
     onClick,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
     tooltip,
     debug,
+    enableTouchCrosshair,
 }) => {
     const { showTooltipAt, hideTooltip } = useTooltip()
 
@@ -49,7 +53,7 @@ const Mesh = ({
             setCurrent(point)
             onMouseMove && onMouseMove(point, event)
         },
-        [setCurrent, showTooltipAt, tooltip, onMouseMove]
+        [showTooltipAt, tooltip, margin.left, margin.top, setCurrent, onMouseMove]
     )
 
     const handleMouseLeave = useCallback(
@@ -68,6 +72,41 @@ const Mesh = ({
         [onClick]
     )
 
+    const handleTouchStart = useCallback(
+        (point, event) => {
+            showTooltipAt(
+                createElement(tooltip, { point }),
+                [point.x + margin.left, point.y + margin.top],
+                'top'
+            )
+            setCurrent(point)
+            onTouchStart && onTouchStart(point, event)
+        },
+        [margin.left, margin.top, onTouchStart, setCurrent, showTooltipAt, tooltip]
+    )
+
+    const handleTouchMove = useCallback(
+        (point, event) => {
+            showTooltipAt(
+                createElement(tooltip, { point }),
+                [point.x + margin.left, point.y + margin.top],
+                'top'
+            )
+            setCurrent(point)
+            onTouchMove && onTouchMove(point, event)
+        },
+        [margin.left, margin.top, onTouchMove, setCurrent, showTooltipAt, tooltip]
+    )
+
+    const handleTouchEnd = useCallback(
+        (point, event) => {
+            hideTooltip()
+            setCurrent(null)
+            onTouchEnd && onTouchEnd(point, event)
+        },
+        [onTouchEnd, hideTooltip, setCurrent]
+    )
+
     return (
         <BaseMesh
             nodes={points}
@@ -77,6 +116,10 @@ const Mesh = ({
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
             onClick={handleClick}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            enableTouchCrosshair={enableTouchCrosshair}
             debug={debug}
         />
     )
@@ -92,6 +135,9 @@ Mesh.propTypes = {
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchMove: PropTypes.func,
+    onTouchEnd: PropTypes.func,
     tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
     debug: PropTypes.bool.isRequired,
 }

packages/line/src/Slices.js

@@ -22,11 +22,15 @@ const Slices = ({
     onMouseMove,
     onMouseLeave,
     onClick,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
 }) => {
     return slices.map(slice => (
         <SlicesItem
             key={slice.id}
             slice={slice}
+            slices={slices}
             axis={axis}
             debug={debug}
             height={height}
@@ -37,6 +41,9 @@ const Slices = ({
             onMouseMove={onMouseMove}
             onMouseLeave={onMouseLeave}
             onClick={onClick}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
         />
     ))
 }
@@ -64,6 +71,9 @@ Slices.propTypes = {
     onMouseMove: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
+    onTouchStart: PropTypes.func,
+    onTouchMove: PropTypes.func,
+    onTouchEnd: PropTypes.func,
 }
 
 export default memo(Slices)