@pie-lib/plot 3.1.0-next.2 → 3.1.0-next.26

package/src/__tests__/root.test.jsx

@@ -1,11 +1,11 @@
 import { render, cleanup } from '@testing-library/react';
 import React from 'react';
 import { Root } from '../root';
-import { select, mouse } from 'd3-selection';
+import { select, pointer } from 'd3-selection';
 
 jest.mock('d3-selection', () => ({
   select: jest.fn(),
-  mouse: jest.fn(),
+  pointer: jest.fn(),
 }));
 
 const scaleMock = () => {
@@ -48,7 +48,7 @@ describe('root', () => {
     select.mockReturnValue({
       on: mockOn,
     });
-    mouse.mockReturnValue([0, 0]);
+    pointer.mockReturnValue([0, 0]);
 
     defaultProps = {
       classes: {},
@@ -62,9 +62,7 @@ describe('root', () => {
   });
 
   it('renders with children', () => {
-    const { container, getByText } = render(
-      <Root {...defaultProps}>hi</Root>
-    );
+    const { container, getByText } = render(<Root {...defaultProps}>hi</Root>);
     expect(container.firstChild).toBeInTheDocument();
     expect(getByText('hi')).toBeInTheDocument();
   });
@@ -100,7 +98,7 @@ describe('root', () => {
       });
 
       describe('mouseMove function', () => {
-        it('calls mouse with correct arguments', () => {
+        it('calls pointer with correct arguments', () => {
           const onMouseMove = jest.fn();
           const gp = graphProps();
           const props = {
@@ -110,6 +108,7 @@ describe('root', () => {
           };
 
           const mockNode = document.createElement('div');
+          const mockEvent = { clientX: 10, clientY: 20 };
           const mockSelection = {
             _groups: [[mockNode]],
             node: () => mockNode,
@@ -122,17 +121,17 @@ describe('root', () => {
               mockOn(event, handler);
               // When 'mousemove' is registered, immediately test it
               if (event === 'mousemove' && handler) {
-                mouse.mockReturnValue([10, 20]);
-                // Handler is bound with mockSelection as first arg, so call with no args
-                handler();
+                pointer.mockReturnValue([10, 20]);
+                // Handler is bound with mockSelection as first arg, so call with event
+                handler(mockEvent);
               }
             },
           });
 
           render(<Root {...props}>hi</Root>);
 
-          // Verify mouse was called with the correct node
-          expect(mouse).toHaveBeenCalledWith(mockNode);
+          // Verify pointer was called with the event and correct node
+          expect(pointer).toHaveBeenCalledWith(mockEvent, mockNode);
         });
 
         it('calls scale.x.invert and scale.y.invert', () => {
@@ -145,6 +144,7 @@ describe('root', () => {
           };
 
           const mockNode = document.createElement('div');
+          const mockEvent = { clientX: 15, clientY: 25 };
           const mockSelection = {
             _groups: [[mockNode]],
             node: () => mockNode,
@@ -155,8 +155,8 @@ describe('root', () => {
             on: (event, handler) => {
               mockOn(event, handler);
               if (event === 'mousemove' && handler) {
-                mouse.mockReturnValue([15, 25]);
-                handler();
+                pointer.mockReturnValue([15, 25]);
+                handler(mockEvent);
               }
             },
           });
@@ -179,6 +179,7 @@ describe('root', () => {
           };
 
           const mockNode = document.createElement('div');
+          const mockEvent = { clientX: 100, clientY: 200 };
           const mockSelection = {
             _groups: [[mockNode]],
             node: () => mockNode,
@@ -189,7 +190,7 @@ describe('root', () => {
             on: (event, handler) => {
               mockOn(event, handler);
               if (event === 'mousemove' && handler) {
-                mouse.mockReturnValue([15, 25]);
+                pointer.mockReturnValue([100, 200]);
                 handler();
               }
             },
@@ -216,6 +217,7 @@ describe('root', () => {
           };
 
           const mockNode = document.createElement('div');
+          const mockEvent = { clientX: 100, clientY: 200 };
           const mockSelection = {
             _groups: [[mockNode]],
             node: () => mockNode,
@@ -226,8 +228,8 @@ describe('root', () => {
             on: (event, handler) => {
               mockOn(event, handler);
               if (event === 'mousemove' && handler) {
-                mouse.mockReturnValue([100, 200]);
-                handler();
+                pointer.mockReturnValue([100, 200]);
+                handler(mockEvent);
               }
             },
           });
@@ -245,6 +247,7 @@ describe('root', () => {
           };
 
           const mockNode = document.createElement('div');
+          const mockEvent = { clientX: 100, clientY: 200 };
           const mockSelection = {
             _groups: [[mockNode]],
             node: () => mockNode,
@@ -255,9 +258,9 @@ describe('root', () => {
             on: (event, handler) => {
               mockOn(event, handler);
               if (event === 'mousemove' && handler) {
-                mouse.mockReturnValue([100, 200]);
+                pointer.mockReturnValue([100, 200]);
                 // Should not throw error when onMouseMove is not provided
-                expect(() => handler()).not.toThrow();
+                expect(() => handler(mockEvent)).not.toThrow();
               }
             },
           });

package/src/__tests__/utils.test.js

@@ -1,4 +1,3 @@
-import { AssertionError } from 'assert';
 import * as utils from '../utils';
 
 const xy = utils.xy;
@@ -53,7 +52,7 @@ describe('utils', () => {
     let scaleFn;
 
     beforeEach(() => {
-      scaleFn = jest.fn(function(v) {
+      scaleFn = jest.fn(function (v) {
         return v;
       });
     });

package/src/grid-draggable.jsx

@@ -6,7 +6,7 @@ import debug from 'debug';
 import * as utils from './utils';
 import isFunction from 'lodash/isFunction';
 import invariant from 'invariant';
-import { clientPoint } from 'd3-selection';
+import { pointer } from 'd3-selection';
 
 const log = debug('pie-lib:plot:grid-draggable');
 
@@ -235,7 +235,7 @@ export const gridDraggable = (opts) => (Comp) => {
           this.setState({ startX: null });
           const { graphProps } = this.props;
           const { scale, snap } = graphProps;
-          const [rawX, rawY] = clientPoint(e.target, e);
+          const [rawX, rawY] = pointer(e, e.target);
           let x = scale.x.invert(rawX);
           let y = scale.y.invert(rawY);
           x = snap.x(x);

package/src/root.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { select, mouse } from 'd3-selection';
+import { select, pointer } from 'd3-selection';
 
 import { color, Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html-tip-tap';
@@ -126,7 +126,7 @@ export class Root extends React.Component {
     labelsCharactersLimit: PropTypes.number,
   };
 
-  mouseMove = (g) => {
+  mouseMove = (g, event) => {
     const { graphProps, onMouseMove } = this.props;
 
     if (!onMouseMove) {
@@ -134,7 +134,7 @@ export class Root extends React.Component {
     }
 
     const { scale, snap } = graphProps;
-    const coords = mouse(g.node());
+    const coords = pointer(event, g.node());
     const x = scale.x.invert(coords[0]);
     const y = scale.y.invert(coords[1]);