@pie-lib/plot 2.41.0-mui-update.0 → 3.1.0-next.0

package/src/__tests__/root.test.jsx

@@ -1,8 +1,13 @@
-import { shallow } from 'enzyme';
+import { render, cleanup } from '@testing-library/react';
 import React from 'react';
 import { Root } from '../root';
 import { select, mouse } from 'd3-selection';
 
+jest.mock('d3-selection', () => ({
+  select: jest.fn(),
+  mouse: jest.fn(),
+}));
+
 const scaleMock = () => {
   const fn = jest.fn((n) => n);
   fn.invert = jest.fn((n) => n);
@@ -34,83 +39,234 @@ const graphProps = () => ({
   },
 });
 
-const wrapper = (props) => {
-  props = {
-    classes: {},
-    graphProps: graphProps(),
-    ...props,
-  };
+describe('root', () => {
+  let mockOn;
+  let defaultProps;
 
-  return shallow(<Root {...props}>hi</Root>, { disableLifecycleMethods: true });
-};
+  beforeEach(() => {
+    mockOn = jest.fn();
+    select.mockReturnValue({
+      on: mockOn,
+    });
+    mouse.mockReturnValue([0, 0]);
 
-jest.mock('d3-selection', () => ({
-  select: jest.fn(),
-  mouse: jest.fn(),
-}));
+    defaultProps = {
+      classes: {},
+      graphProps: graphProps(),
+    };
+  });
 
-describe('root', () => {
-  describe('snapshot', () => {
-    it('matches', () => {
-      const w = wrapper();
-      expect(w).toMatchSnapshot();
-    });
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  it('renders with children', () => {
+    const { container, getByText } = render(
+      <Root {...defaultProps}>hi</Root>
+    );
+    expect(container.firstChild).toBeInTheDocument();
+    expect(getByText('hi')).toBeInTheDocument();
   });
 
   describe('logic', () => {
     describe('mousemove', () => {
       describe('mount/unmount', () => {
-        it('adds mousemove listener on compenentDidMount', () => {
-          const w = wrapper();
-          const g = {
-            on: jest.fn(),
-          };
-          select.mockReturnValue(g);
-          w.instance().componentDidMount();
-          expect(g.on).toHaveBeenCalledWith('mousemove', expect.any(Function));
+        it('adds mousemove listener on componentDidMount', () => {
+          render(<Root {...defaultProps}>hi</Root>);
+
+          // Verify that select was called with the g element
+          expect(select).toHaveBeenCalled();
+
+          // Verify that on() was called with 'mousemove' and a function
+          expect(mockOn).toHaveBeenCalledWith('mousemove', expect.any(Function));
         });
-        it('unsets mousemove listener on componentWillUnmount', () => {
-          const w = wrapper();
-          const g = {
-            on: jest.fn(),
-          };
-          select.mockReturnValue(g);
-          w.instance().componentWillUnmount();
-          expect(g.on).toHaveBeenCalledWith('mousemove', null);
+
+        it('removes mousemove listener on componentWillUnmount', () => {
+          const { unmount } = render(<Root {...defaultProps}>hi</Root>);
+
+          // Clear previous calls to isolate unmount behavior
+          mockOn.mockClear();
+          select.mockClear();
+
+          unmount();
+
+          // Verify that select was called during unmount
+          expect(select).toHaveBeenCalled();
+
+          // Verify that on() was called with 'mousemove' and null to remove the listener
+          expect(mockOn).toHaveBeenCalledWith('mousemove', null);
         });
       });
 
       describe('mouseMove function', () => {
-        let onMouseMove, w, gp;
-        beforeEach(() => {
-          onMouseMove = jest.fn();
-          gp = graphProps();
-          w = wrapper({
+        it('calls mouse with correct arguments', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
             onMouseMove,
             graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          // Mock select to return our mockSelection
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              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();
+              }
+            },
           });
-          mouse.mockReturnValue([0, 0]);
-          const g = { _groups: [[[0, 0]]] };
-          w.instance().mouseMove(g);
-        });
-        it('calls mouse', () => {
-          expect(mouse).toHaveBeenCalledWith([0, 0]);
-        });
-        it('calls, scale.x.invert', () => {
-          expect(gp.scale.x.invert).toHaveBeenCalledWith(0);
+
+          render(<Root {...props}>hi</Root>);
+
+          // Verify mouse was called with the correct node
+          expect(mouse).toHaveBeenCalledWith(mockNode);
         });
-        it('calls, scale.y.invert', () => {
-          expect(gp.scale.y.invert).toHaveBeenCalledWith(0);
+
+        it('calls scale.x.invert and scale.y.invert', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([15, 25]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(gp.scale.x.invert).toHaveBeenCalledWith(15);
+          expect(gp.scale.y.invert).toHaveBeenCalledWith(25);
         });
-        it('calls, snap.x', () => {
-          expect(gp.snap.x).toHaveBeenCalledWith(0);
+
+        it('calls snap.x and snap.y with inverted coordinates', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          gp.scale.x.invert = jest.fn().mockReturnValue(5);
+          gp.scale.y.invert = jest.fn().mockReturnValue(10);
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([15, 25]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(gp.snap.x).toHaveBeenCalledWith(5);
+          expect(gp.snap.y).toHaveBeenCalledWith(10);
         });
-        it('calls, snap.y', () => {
-          expect(gp.snap.y).toHaveBeenCalledWith(0);
+
+        it('calls onMouseMove handler with snapped coordinates', () => {
+          const onMouseMove = jest.fn();
+          const gp = graphProps();
+          gp.scale.x.invert = jest.fn().mockReturnValue(7);
+          gp.scale.y.invert = jest.fn().mockReturnValue(14);
+          gp.snap.x = jest.fn().mockReturnValue(10);
+          gp.snap.y = jest.fn().mockReturnValue(15);
+
+          const props = {
+            ...defaultProps,
+            onMouseMove,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([100, 200]);
+                handler();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          expect(onMouseMove).toHaveBeenCalledWith({ x: 10, y: 15 });
         });
 
-        it('calls handler', () => {
-          expect(onMouseMove).toHaveBeenCalledWith({ x: 0, y: 0 });
+        it('does not call onMouseMove when handler is not provided', () => {
+          const gp = graphProps();
+          const props = {
+            ...defaultProps,
+            graphProps: gp,
+          };
+
+          const mockNode = document.createElement('div');
+          const mockSelection = {
+            _groups: [[mockNode]],
+            node: () => mockNode,
+          };
+
+          select.mockReturnValue({
+            ...mockSelection,
+            on: (event, handler) => {
+              mockOn(event, handler);
+              if (event === 'mousemove' && handler) {
+                mouse.mockReturnValue([100, 200]);
+                // Should not throw error when onMouseMove is not provided
+                expect(() => handler()).not.toThrow();
+              }
+            },
+          });
+
+          render(<Root {...props}>hi</Root>);
+
+          // Verify scale methods were not called (early return in mouseMove)
+          expect(gp.scale.x.invert).not.toHaveBeenCalled();
+          expect(gp.scale.y.invert).not.toHaveBeenCalled();
         });
       });
     });

package/src/grid-draggable.jsx

@@ -38,6 +38,15 @@ export const gridDraggable = (opts) => (Comp) => {
       onMove: PropTypes.func,
       graphProps: GraphPropsType.isRequired,
     };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        startX: null,
+        startY: null,
+      };
+    }
+
     grid = () => {
       const { graphProps } = this.props;
       const { scale, domain, range } = graphProps;
@@ -87,10 +96,10 @@ export const gridDraggable = (opts) => (Comp) => {
       const grid = this.grid();
 
       const scaled = {
-        left: (bounds.left / grid.interval) * grid.x,
-        right: (bounds.right / grid.interval) * grid.x,
-        top: (bounds.top / grid.interval) * grid.y,
-        bottom: (bounds.bottom / grid.interval) * grid.y,
+        left: bounds.left * grid.x,
+        right: bounds.right * grid.x,
+        top: bounds.top * grid.y,
+        bottom: bounds.bottom * grid.y,
       };
       log('[getScaledBounds]: ', scaled);
       return scaled;

package/src/label.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Readable } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import PropTypes from 'prop-types';
 import { extractTextFromHTML, isEmptyString } from './utils';
 
@@ -66,29 +66,14 @@ const LabelComponent = (props) => {
 
   const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
 
-  const activePlugins = [
-    'bold',
-    'italic',
-    'underline',
-    'strikethrough',
-    'math',
-  ];
+  const activePlugins = ['bold', 'italic', 'underline', 'strikethrough', 'math'];
 
-  const isChart =
-    isChartBottomLabel ||
-    isChartLeftLabel ||
-    isDefineChartBottomLabel ||
-    isDefineChartLeftLabel;
+  const isChart = isChartBottomLabel || isChartLeftLabel || isDefineChartBottomLabel || isDefineChartLeftLabel;
 
-  const chartValue =
-    side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
+  const chartValue = side === 'left' && isDefineChartLeftLabel && graphHeight - 220;
 
   const defaultStyle = {
-    width:
-      chartValue ||
-      (side === 'left' || side === 'right'
-        ? graphHeight - 8
-        : graphWidth - 8),
+    width: chartValue || (side === 'left' || side === 'right' ? graphHeight - 8 : graphWidth - 8),
     top:
       chartValue ||
       (isChartLeftLabel && `${graphHeight - 70}px`) ||
@@ -115,6 +100,15 @@ const LabelComponent = (props) => {
     }
   };
 
+  const exitEditMode = () => {
+    setRotatedToHorizontal(false);
+
+    // blur active element because rotation is causing editing issues on exit
+    requestAnimationFrame(() => {
+      document.activeElement?.blur?.();
+    });
+  };
+
   return (
     <Readable false>
       <div
@@ -122,27 +116,15 @@ const LabelComponent = (props) => {
         style={{
           ...(rotatedToHorizontal ? rotatedStyle : defaultStyle),
           ...(isChart ? styles.chartLabel : styles.axisLabel),
-          ...(side === 'left' && !rotatedToHorizontal
-            ? styles.rotateLeftLabel
-            : {}),
-          ...(side === 'right' && !rotatedToHorizontal
-            ? styles.rotateRightLabel
-            : {}),
+          ...(side === 'left' && !rotatedToHorizontal ? styles.rotateLeftLabel : {}),
+          ...(side === 'right' && !rotatedToHorizontal ? styles.rotateRightLabel : {}),
           ...(rotatedToHorizontal ? styles.editLabel : {}),
-          ...((isChartBottomLabel || isDefineChartBottomLabel)
-            ? styles.customBottom
-            : {}),
-          ...((disabledLabel &&
-            !isChart &&
-            isEmptyString(extractTextFromHTML(text))) &&
-            styles.displayNone),
+          ...(isChartBottomLabel || isDefineChartBottomLabel ? styles.customBottom : {}),
+          ...(disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)) && styles.displayNone),
         }}
       >
         {disabledLabel ? (
-          <div
-            style={styles.disabledLabel}
-            dangerouslySetInnerHTML={{ __html: text || '' }}
-          />
+          <div style={styles.disabledLabel} dangerouslySetInnerHTML={{ __html: text || '' }} />
         ) : (
           <EditableHtml
             markup={text || ''}
@@ -155,7 +137,7 @@ const LabelComponent = (props) => {
             }}
             disableScrollbar
             activePlugins={activePlugins}
-            onDone={() => setRotatedToHorizontal(false)}
+            onDone={exitEditMode}
             mathMlOptions={mathMlOptions}
             charactersLimit={charactersLimit}
           />

package/src/root.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { select, mouse } from 'd3-selection';
 
 import { color, Readable } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
 import { ChildrenType } from './types';
 import { GraphPropsType } from './types';
 import Label from './label';
@@ -134,7 +134,7 @@ export class Root extends React.Component {
     }
 
     const { scale, snap } = graphProps;
-    const coords = mouse(g._groups[0][0]);
+    const coords = mouse(g.node());
     const x = scale.x.invert(coords[0]);
     const y = scale.y.invert(coords[1]);
 
@@ -282,7 +282,7 @@ export class Root extends React.Component {
     const nbOfHorizontalLines = parseInt(actualHeight / 100);
     const sideGridlinesPadding = parseInt(actualHeight % 100);
     const { titleHeight } = this.state;
-    
+
     return (
       <StyledRoot>
         {showPixelGuides && (
@@ -325,7 +325,8 @@ export class Root extends React.Component {
                     markup={title || ''}
                     onChange={onChangeTitle}
                     placeholder={
-                      (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
+                      (defineChart && titlePlaceholder) ||
+                      (!disabledTitle && 'Click here to add a title for this graph')
                     }
                     toolbarOpts={{ noPadding: true, noBorder: true }}
                     activePlugins={activeTitlePlugins}
@@ -344,7 +345,8 @@ export class Root extends React.Component {
                     markup={title || ''}
                     onChange={onChangeTitle}
                     placeholder={
-                      (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
+                      (defineChart && titlePlaceholder) ||
+                      (!disabledTitle && 'Click here to add a title for this graph')
                     }
                     toolbarOpts={{ noPadding: true, noBorder: true }}
                     activePlugins={activeTitlePlugins}

package/src/__tests__/__snapshots__/grid-draggable.test.jsx.snap

@@ -1,185 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`gridDraggable snapshot render with decimals 1`] = `
-<mockConstructor
-  axis="both"
-  grid={
-    Array [
-      1,
-      1,
-    ]
-  }
-  onDrag={[Function]}
-  onMouseDown={[Function]}
-  onStart={[Function]}
-  onStop={[Function]}
->
-  <Component
-    domain={
-      Object {
-        "max": 1.6,
-        "min": -1.5,
-        "step": 0.3,
-      }
-    }
-    graphProps={
-      Object {
-        "domain": Object {
-          "max": 1,
-          "min": 0,
-          "step": 1,
-        },
-        "getRootNode": [Function],
-        "range": Object {
-          "max": 1,
-          "min": 0,
-          "step": 1,
-        },
-        "scale": Object {
-          "x": [MockFunction] {
-            "calls": Array [
-              Array [
-                1,
-              ],
-              Array [
-                0,
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": 1,
-              },
-              Object {
-                "type": "return",
-                "value": 0,
-              },
-            ],
-          },
-          "y": [MockFunction] {
-            "calls": Array [
-              Array [
-                1,
-              ],
-              Array [
-                0,
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": 1,
-              },
-              Object {
-                "type": "return",
-                "value": 0,
-              },
-            ],
-          },
-        },
-        "size": Object {
-          "height": 500,
-          "width": 500,
-        },
-        "snap": Object {
-          "x": [MockFunction],
-          "y": [MockFunction],
-        },
-      }
-    }
-    isDragging={false}
-    range={
-      Object {
-        "max": 3,
-        "min": -2,
-        "step": 0.2,
-      }
-    }
-  />
-</mockConstructor>
-`;
-
-exports[`gridDraggable snapshot reqular 1`] = `
-<mockConstructor
-  axis="both"
-  grid={
-    Array [
-      1,
-      1,
-    ]
-  }
-  onDrag={[Function]}
-  onMouseDown={[Function]}
-  onStart={[Function]}
-  onStop={[Function]}
->
-  <Component
-    graphProps={
-      Object {
-        "domain": Object {
-          "max": 1,
-          "min": 0,
-          "step": 1,
-        },
-        "getRootNode": [Function],
-        "range": Object {
-          "max": 1,
-          "min": 0,
-          "step": 1,
-        },
-        "scale": Object {
-          "x": [MockFunction] {
-            "calls": Array [
-              Array [
-                1,
-              ],
-              Array [
-                0,
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": 1,
-              },
-              Object {
-                "type": "return",
-                "value": 0,
-              },
-            ],
-          },
-          "y": [MockFunction] {
-            "calls": Array [
-              Array [
-                1,
-              ],
-              Array [
-                0,
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": 1,
-              },
-              Object {
-                "type": "return",
-                "value": 0,
-              },
-            ],
-          },
-        },
-        "size": Object {
-          "height": 500,
-          "width": 500,
-        },
-        "snap": Object {
-          "x": [MockFunction],
-          "y": [MockFunction],
-        },
-      }
-    }
-    isDragging={false}
-  />
-</mockConstructor>
-`;

package/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`root snapshot matches 1`] = `
-<div>
-  <div>
-    <svg
-      height={480}
-      width={540}
-    >
-      <g
-        transform="translate(70, 40)"
-      >
-        hi
-      </g>
-    </svg>
-  </div>
-</div>
-`;