@pie-lib/tools 2.0.2-next.1 → 2.0.3-next.0

package/src/__tests__/rotatable.test.jsx

@@ -1,263 +0,0 @@
-import { render } from '@testing-library/react';
-import { Rotatable } from '../rotatable';
-import React from 'react';
-import { distanceBetween } from '../anchor-utils';
-
-import Point from '@mapbox/point-geometry';
-
-jest.mock('../anchor-utils', () => ({
-  distanceBetween: jest.fn(() => ({ x: 2, y: 2 })),
-  toPoint: jest.fn(() => ({ x: 0, y: 0 })),
-  getAnchor: jest.fn(() => ({ left: 0, top: 0 })),
-  toDegrees: jest.fn(() => 90),
-  arctangent: jest.fn(() => 90),
-}));
-
-const event = (x = 0, y = 0) => ({
-  pageX: x,
-  pageY: y,
-  clientX: x,
-  clientY: y,
-  preventDefault: jest.fn(),
-});
-
-describe('rotatable', () => {
-  describe('rendering', () => {
-    // Note: The Rotatable component has a bug where this.handles is undefined
-    // when no handle prop is provided, causing componentWillUnmount to crash.
-    // We patch the prototype to fix this for testing.
-    beforeAll(() => {
-      const originalInit = Rotatable.prototype.initHandles;
-      Rotatable.prototype.initHandles = function () {
-        this.handles = this.handles || [];
-        return originalInit.call(this);
-      };
-
-      const originalUnmount = Rotatable.prototype.componentWillUnmount;
-      Rotatable.prototype.componentWillUnmount = function () {
-        this.handles = this.handles || [];
-        return originalUnmount.call(this);
-      };
-    });
-
-    it('renders children', () => {
-      const { container } = render(<Rotatable classes={{}}>foo</Rotatable>);
-      expect(container).toHaveTextContent('foo');
-    });
-
-    it('renders with handle prop', () => {
-      const { container } = render(
-        <Rotatable handle={[{ class: 'handle', origin: 'bottom left' }]} classes={{}}>
-          <div className="handle">foo</div>
-        </Rotatable>,
-      );
-      expect(container).toHaveTextContent('foo');
-      expect(container.querySelector('.handle')).toBeInTheDocument();
-    });
-
-    it('renders with startPosition prop', () => {
-      const { container } = render(
-        <Rotatable classes={{}} startPosition={{ left: 50, top: 100 }}>
-          foo
-        </Rotatable>,
-      );
-      expect(container).toHaveTextContent('foo');
-    });
-  });
-
-  describe('logic', () => {
-    let el, instance, mockRef;
-
-    beforeEach(() => {
-      // Mock DOM elements
-      el = {
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-      };
-
-      mockRef = {
-        querySelector: jest.fn(() => el),
-        getBoundingClientRect: jest.fn(() => ({
-          left: 0,
-          top: 0,
-          width: 100,
-          height: 100,
-        })),
-      };
-
-      // Mock document methods
-      document.addEventListener = jest.fn();
-      document.removeEventListener = jest.fn();
-
-      // Create component instance directly
-      const props = {
-        handle: [{ class: 'foo', origin: 'bottom left' }],
-        classes: { rotatable: 'rotatable' },
-        children: <div className={'foo'}>foo</div>,
-        startPosition: { left: 0, top: 0 },
-      };
-
-      instance = new Rotatable(props);
-      instance.rotatable = mockRef;
-
-      // Mock clientWidth and clientHeight for originToXY
-      Object.defineProperty(instance.rotatable, 'clientWidth', { value: 100, writable: true });
-      Object.defineProperty(instance.rotatable, 'clientHeight', { value: 100, writable: true });
-
-      // Mock setState to be synchronous for testing
-      instance.setState = jest.fn((updater, callback) => {
-        if (typeof updater === 'function') {
-          instance.state = { ...instance.state, ...updater(instance.state) };
-        } else {
-          instance.state = { ...instance.state, ...updater };
-        }
-        if (callback) callback();
-      });
-
-      // Initialize the component
-      instance.componentDidMount();
-
-      // Manually set up handles array if it's still undefined after mount
-      if (!instance.handles) {
-        instance.handles = [{ el, mousedownHandler: jest.fn() }];
-      }
-    });
-
-    describe('rotate', () => {
-      describe('init', () => {
-        it('call el.addEventListener(mousedown)', () => {
-          expect(el.addEventListener).toBeCalledWith('mousedown', expect.anything());
-        });
-        it('call el.addEventListener(mouseup)', () => {
-          expect(el.addEventListener).toBeCalledWith('mouseup', instance.rotateStop);
-        });
-      });
-
-      describe('rotateStart', () => {
-        let e;
-        beforeEach(() => {
-          e = event();
-
-          distanceBetween.mockReturnValue({
-            x: 22,
-            y: 4,
-          });
-          instance.state.origin = 'bottom right';
-
-          instance.state.position = {
-            left: 0,
-            top: 0,
-          };
-
-          instance.rotateStart('bottom left')(e);
-        });
-
-        it('calls event.preventDefault()', () => {
-          instance.rotateStart('bottom left')(e);
-          expect(e.preventDefault).toBeCalled();
-        });
-
-        it('updates the position if origin has change', () => {
-          expect(instance.state.position).toMatchObject({
-            left: 22,
-            top: 4,
-          });
-        });
-
-        it('updates the startAngle', () => {
-          expect(instance.state.startAngle).toEqual(90);
-        });
-
-        it('updates the anchor', () => {
-          expect(instance.state.anchor).toMatchObject({
-            left: 0,
-            top: 0,
-          });
-        });
-      });
-
-      describe('rotate', () => {
-        let e;
-        beforeEach(() => {
-          e = event();
-
-          instance.state.anchor = {
-            left: 0,
-            top: 0,
-          };
-
-          instance.state.isRotating = true;
-          instance.rotate(e);
-        });
-        it('calls event.preventDefault()', () => {
-          expect(e.preventDefault).toBeCalled();
-        });
-      });
-
-      describe('rotateStop', () => {
-        let e;
-
-        beforeEach(() => {
-          e = event();
-          instance.state.isRotating = true;
-          instance.rotateStop(e);
-        });
-
-        it('unsets the anchor', () => {
-          expect(instance.state.anchor).toEqual(null);
-        });
-        it('unsets the anchor', () => {
-          expect(instance.state.anchor).toEqual(null);
-        });
-        it('sets the isRotating to false', () => {
-          expect(instance.state.isRotating).toEqual(false);
-        });
-
-        it('calls document.removeEventListener(mousemove, rotate)', () => {
-          expect(document.removeEventListener).toBeCalledWith('mousemove', instance.rotate);
-        });
-        it('calls document.removeEventListener(mousemove), drag', () => {
-          expect(document.removeEventListener).toBeCalledWith('mousemove', instance.drag);
-        });
-      });
-    });
-
-    describe('drag', () => {
-      describe('mouseDown', () => {
-        it('calls document.addEventListener(mousemove)', () => {
-          instance.mouseDown(event());
-
-          expect(document.addEventListener).toBeCalledWith('mousemove', instance.drag);
-        });
-      });
-
-      describe('mouseup', () => {
-        it('calls document.removeEventListener(mousemove)', () => {
-          instance.state.translate = { x: 10, y: 10 };
-          instance.mouseUp({});
-
-          expect(document.removeEventListener).toBeCalledWith('mousemove', instance.drag);
-        });
-
-        it('updates the state', () => {
-          instance.state.translate = { x: 10, y: 10 };
-          instance.state.position = { left: 0, top: 0 };
-          instance.mouseUp({});
-
-          expect(instance.state.position).toEqual({
-            left: 10,
-            top: 10,
-          });
-        });
-      });
-
-      describe('drag', () => {
-        it('updates translate', () => {
-          instance.state.dragPoint = new Point(100, 100);
-          instance.drag(event(101, 101));
-          expect(instance.state.translate).toEqual({ x: 1, y: 1 });
-        });
-      });
-    });
-  });
-});

package/src/__tests__/transform-origin.test.jsx

@@ -1,24 +0,0 @@
-import { parse } from '../transform-origin';
-
-describe('transform-origin', () => {
-  describe('parse', () => {
-    const assert = (origin, expected) => {
-      it(`${origin} => ${JSON.stringify(expected)}`, () => {
-        const out = parse({ width: 100, height: 100 }, origin);
-        expect(out).toEqual(expected);
-      });
-    };
-
-    assert(undefined, { x: 50, y: 50 });
-    assert('right', { x: 100, y: 50 });
-    assert('20%', { x: 20, y: 50 });
-    assert('left', { x: 0, y: 50 });
-    assert('top right', { x: 100, y: 0 });
-    assert('right top', { x: 100, y: 0 });
-    assert('bottom left', { x: 0, y: 100 });
-    assert('left bottom', { x: 0, y: 100 });
-    assert('0% 100%', { x: 0, y: 100 });
-    assert('100% 0%', { x: 100, y: 0 });
-    assert('10px 43px', { x: 10, y: 43 });
-  });
-});

package/src/anchor-utils.js

@@ -1,153 +0,0 @@
-import { trigCalculator } from 'trigonometry-calculator';
-import Point from '@mapbox/point-geometry';
-import debug from 'debug';
-import { parse as parseOrigin } from './transform-origin';
-
-const log = debug('@pie-lib:tools:anchor-utils');
-
-export const toDegrees = (radians) => radians * (180 / Math.PI);
-export const toRadians = (degrees) => degrees * (Math.PI / 180);
-
-export const normalizeAngle = (a) => {
-  if (a > 360) {
-    return a % 360;
-  } else if (a < 0) {
-    return 360 + (a % 360);
-  }
-  return a;
-};
-
-export const toPoint = (rect, edge) => {
-  const out = parseOrigin(rect, edge);
-  return new Point(out.x, out.y);
-};
-
-/**
- * Get the distance between to anchor points in a rect.
- * @param {{width: number, height: number}} rect - the rect
- * @param {number} degrees - the degrees
- * @param {string} from - from anchor
- * @param {string} to - to anchor
- * @returns {Point} point - the distance as a Point
- */
-export const distanceBetween = (rect, degrees, from, to) => {
-  const center = new Point(rect.width / 2, rect.height / 2);
-  const radians = toRadians(degrees);
-  const fromCenter = center.rotateAround(radians, toPoint(rect, from));
-  const toCenter = center.rotateAround(radians, toPoint(rect, to));
-  const diff = fromCenter.sub(toCenter);
-  return diff;
-};
-
-/**
- * For a corner string, a point and a rect, return a relative x,y from that point to a corner.
- * Note that the y value descends as it goes down (unlike for a screen's y value), so this is only really useful for math functions.
- * @example
- * ```
- * getXAndY('top-left', {width: 100, height: 100}, 10, 10) //=> {x:10, y: -90}
- * ```
- * @param {*} corner
- * @param {*} rect
- * @param {*} point
- */
-export const getXAndY = (corner, rect, point) => {
-  if (corner === 'top-left') {
-    const x = point.x * -1;
-    const y = point.y;
-    return { x, y };
-  } else if (corner === 'bottom-left') {
-    const x = point.x * -1;
-    const y = point.y - rect.height;
-    return { x, y };
-  } else if (corner === 'top-right') {
-    const x = rect.width - point.x;
-    const y = point.y;
-    return { x, y };
-  } else if (corner === 'bottom-right') {
-    const x = rect.width - point.x;
-    const y = point.y - rect.height;
-    return { x, y };
-  }
-};
-
-export const arctangent = (x, y) => toDegrees(Math.atan2(x, y));
-
-export const getAngleAndHypotenuse = (corner, rect, point) => {
-  const { x, y } = getXAndY(corner, rect, point);
-  const degrees = arctangent(x, y);
-  const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
-  return { x, y, degrees, hypotenuse };
-};
-
-const getPosition = (side, rect, point, angle, calcAngle) => {
-  if (angle === 0) {
-    return side === 'left' ? point.x : point.y;
-  }
-  const points = anglePoints(angle);
-  const key = points[side];
-
-  const { degrees, hypotenuse } = getAngleAndHypotenuse(key, rect, point);
-
-  const ra = calcAngle(degrees);
-
-  if (ra === 0) {
-    return hypotenuse;
-  }
-
-  const t = {
-    angles: { 0: ra, 1: 90 },
-    sides: { 1: hypotenuse },
-  };
-  const out = trigCalculator(t);
-  return out.sides[2];
-};
-
-export const getTop = (rect, point, angle) => {
-  return getPosition('top', rect, point, angle, (degrees) => {
-    return Math.abs(angle + degrees);
-  });
-};
-
-export const getLeft = (rect, point, angle) => {
-  return getPosition('left', rect, point, angle, (degrees) => {
-    return Math.abs(angle + degrees + 90);
-  });
-};
-
-/**
- * Calculate the position of an anchor within a bounding rect, if the source rect has been rotated by an angle.
- * It does this by finding the appropriate corner of the src rect, that touches the bounding rect, calculates
- * the hypotenuse (h) of that anchor to that point. Then using that plus the rotation it calculates
- * the sides of the triangle and returns the length of the side that touches the bounding rect.
- * @param {{width: number, height: number}} rect - the rect which contains the point
- * @param {{x:number, y: number}} point - the point within the rect
- * @param {number} angle - the angle in degrees that the rect has rotated.
- * @returns {{left: number, top: number}} position
- */
-export const getAnchor = (rect, point, angle) => {
-  log('[getAnchor] rect: ', rect, 'point:', point, 'angle: ', angle);
-  if (point.x > rect.width) {
-    throw new Error(`x: ${point.x} cannot be greater than width: ${rect.width}`);
-  }
-  if (point.y > rect.height) {
-    throw new Error(`y: ${point.y} cannot be greater than height: ${rect.height}`);
-  }
-  const a = normalizeAngle(angle);
-  const top = getTop(rect, point, a);
-  const left = getLeft(rect, point, a);
-
-  log('[getAnchor] top: ', top, 'left: ', left);
-  return { top, left };
-};
-
-const anglePoints = (angle) => {
-  if (angle <= 90) {
-    return { top: 'top-left', left: 'bottom-left' };
-  } else if (angle > 90 && angle <= 180) {
-    return { top: 'bottom-left', left: 'bottom-right' };
-  } else if (angle > 180 && angle <= 270) {
-    return { top: 'bottom-right', left: 'top-right' };
-  } else if (angle > 270 && angle < 360) {
-    return { top: 'top-right', left: 'top-left' };
-  }
-};

package/src/anchor.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-const StyledAnchor = styled('div')(({ theme }) => ({
-  cursor: 'pointer',
-  width: '20px',
-  height: '20px',
-  position: 'absolute',
-  borderRadius: '10px',
-  backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,
-  transition: 'background-color 200ms ease-in',
-  border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,
-  '&:hover': {
-    backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,
-  },
-}));
-
-const Anchor = ({ ...props }) => <StyledAnchor {...props} />;
-
-export default Anchor;

package/src/index.js

@@ -1,6 +0,0 @@
-import Protractor from './protractor';
-import Ruler from './ruler';
-import Rotatable from './rotatable';
-import * as utils from './anchor-utils';
-
-export { Protractor, Ruler, Rotatable, utils };

package/src/protractor/__tests__/graphic.test.jsx

@@ -1,64 +0,0 @@
-import { render } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { Graphic } from '../graphic';
-import React from 'react';
-
-describe('graphic', () => {
-  const theme = createTheme();
-
-  const renderComponent = (props = {}) => {
-    return render(
-      <ThemeProvider theme={theme}>
-        <Graphic {...props} />
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders svg with correct viewBox', () => {
-      const { container } = renderComponent();
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-      expect(svg).toHaveAttribute('viewBox', '0 0 102 61');
-    });
-
-    it('renders path element', () => {
-      const { container } = renderComponent();
-      const path = container.querySelector('path');
-      expect(path).toBeInTheDocument();
-      expect(path).toHaveAttribute('d', 'M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z');
-    });
-
-    it('renders circle element', () => {
-      const { container } = renderComponent();
-      const circle = container.querySelector('circle');
-      expect(circle).toBeInTheDocument();
-      expect(circle).toHaveAttribute('r', '4');
-      expect(circle).toHaveAttribute('cx', '50.5');
-      expect(circle).toHaveAttribute('cy', '50');
-    });
-
-    it('renders multiple line elements', () => {
-      const { container } = renderComponent();
-      const lines = container.querySelectorAll('line');
-      // Should render 181 angle lines + 2 crosshair lines = 183+ lines
-      expect(lines.length).toBeGreaterThan(180);
-    });
-
-    it('renders text elements for angles', () => {
-      const { container } = renderComponent();
-      const texts = container.querySelectorAll('text');
-      // Should render text for angles 0, 10, 20, ..., 180 (19 texts)
-      expect(texts.length).toBeGreaterThan(15);
-    });
-
-    it('renders correct angle labels', () => {
-      const { container } = renderComponent();
-      const texts = container.querySelectorAll('text');
-      const textContents = Array.from(texts).map((t) => t.textContent);
-      expect(textContents).toContain('0');
-      expect(textContents).toContain('90');
-      expect(textContents).toContain('180');
-    });
-  });
-});

package/src/protractor/__tests__/index.test.jsx

@@ -1,65 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { Protractor } from '../index';
-import React from 'react';
-
-// Mock the Rotatable component to avoid complex DOM interactions
-jest.mock('../../rotatable', () => {
-  return function MockRotatable({ children }) {
-    return <div data-testid="rotatable">{children}</div>;
-  };
-});
-
-// Mock the Graphic component
-jest.mock('../graphic', () => {
-  return function MockGraphic() {
-    return <div data-testid="protractor-graphic" />;
-  };
-});
-
-describe('protractor', () => {
-  const theme = createTheme();
-
-  const renderComponent = (props = {}) => {
-    const defaultProps = {
-      width: 450,
-      ...props,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <Protractor {...defaultProps} />
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders protractor component', () => {
-      renderComponent();
-      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
-      expect(screen.getByTestId('protractor-graphic')).toBeInTheDocument();
-    });
-
-    it('renders with default width', () => {
-      const { container } = renderComponent();
-      const protractorDiv = container.querySelector('div[style*="width"]');
-      expect(protractorDiv).toHaveStyle({ width: '450px' });
-    });
-
-    it('renders with custom width', () => {
-      const { container } = renderComponent({ width: 600 });
-      const protractorDiv = container.querySelector('div[style*="width"]');
-      expect(protractorDiv).toHaveStyle({ width: '600px' });
-    });
-
-    it('renders with custom startPosition', () => {
-      renderComponent({ startPosition: { left: 100, top: 200 } });
-      expect(screen.getByTestId('protractor-graphic')).toBeInTheDocument();
-    });
-
-    it('renders with className', () => {
-      const { container } = renderComponent({ className: 'custom-class' });
-      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
-    });
-  });
-});

package/src/protractor/graphic.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import { range } from 'lodash-es';
-import { noSelect, strokeColor } from '../style-utils';
-
-const StyledLine = styled('line')(({ theme }) => ({
-  strokeWidth: '0.2',
-  stroke: strokeColor(theme),
-}));
-
-const Line = ({ angle, major, minor }) => (
-  <StyledLine
-    transform={`rotate(${angle}, 50.5,50)`}
-    style={{}}
-    x1="1"
-    x2={major ? 10 : minor ? 6 : 3}
-    y1="50"
-    y2="50"
-  />
-);
-
-const StyledSpikeLine = styled('line')(({ theme }) => ({
-  strokeWidth: '0.2',
-  stroke: strokeColor(theme),
-}));
-
-const Spike = ({ angle }) => (
-  <StyledSpikeLine transform={`rotate(${angle}, 50.5,50)`} style={{}} x1="15" x2={'46'} y1="50" y2="50" />
-);
-
-const StyledText = styled('text')(({ theme }) => ({
-  fontSize: '2.5px',
-  textAnchor: 'middle',
-  fill: strokeColor(theme),
-  ...noSelect(),
-}));
-
-const Text = ({ angle }) => (
-  <StyledText transform={`rotate(${angle - 90}, 50.5, 50)`} x="50" y="12.5">
-    {angle}
-  </StyledText>
-);
-
-const StyledPath = styled('path')(({ theme }) => ({
-  strokeWidth: '0.2',
-  stroke: strokeColor(theme),
-}));
-
-const StyledGraphicLine = styled('line')(({ theme }) => ({
-  strokeWidth: '0.2',
-  stroke: strokeColor(theme),
-}));
-
-const StyledCircle = styled('circle')(({ theme }) => ({
-  strokeWidth: '0.2',
-  stroke: strokeColor(theme),
-  fill: 'none',
-}));
-
-export class Graphic extends React.PureComponent {
-  render() {
-    return (
-      <svg viewBox="0 0 102 61">
-        <StyledPath d="M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z" fill="none" />
-        {range(0, 181).map((r) => (
-          <Line minor={r % 5 === 0} major={r % 10 === 0} angle={r} key={r} />
-        ))}
-        {range(0, 181, 10).map((r) => (
-          <React.Fragment key={r}>
-            <Spike angle={r} />
-            <Text angle={r} />
-          </React.Fragment>
-        ))}
-        <StyledCircle r="4" cx="50.5" cy="50" />
-        <StyledGraphicLine x1="48.5" x2="52.5" y1="50" y2="50" />
-        <StyledGraphicLine transform={'rotate(90 50.5 50)'} x1="48.5" x2="52.5" y1="50" y2="50" />
-      </svg>
-    );
-  }
-}
-
-export default Graphic;