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

package/src/protractor/index.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import Graphic from './graphic';
-import Anchor from '../anchor';
-import Rotatable from '../rotatable';
-
-const StyledProtractor = styled('div')(() => ({
-  position: 'relative',
-}));
-
-const StyledLeftAnchor = styled(Anchor)(() => ({
-  position: 'absolute',
-  left: 0,
-  bottom: 0,
-}));
-
-const StyledRightAnchor = styled(Anchor)(() => ({
-  position: 'absolute',
-  right: 0,
-  bottom: 0,
-}));
-
-export class Protractor extends React.Component {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    className: PropTypes.string,
-    startPosition: PropTypes.shape({
-      left: PropTypes.number,
-      top: PropTypes.number,
-    }),
-  };
-
-  static defaultProps = {
-    width: 450,
-    startPosition: { left: 0, top: 0 },
-  };
-
-  render() {
-    const { width, startPosition } = this.props;
-
-    return (
-      <Rotatable
-        startPosition={startPosition}
-        handle={[
-          {
-            class: 'leftAnchor',
-            origin: `${width * 0.495}px ${width * 0.49}px`,
-          },
-          {
-            class: 'rightAnchor',
-            origin: `${width * 0.495}px ${width * 0.49}px`,
-          },
-        ]}
-      >
-        <StyledProtractor style={{ width: `${width}px` }}>
-          <Graphic />
-
-          <StyledLeftAnchor className="leftAnchor" />
-          <StyledRightAnchor className="rightAnchor" />
-        </StyledProtractor>
-      </Rotatable>
-    );
-  }
-}
-
-export default Protractor;

package/src/rotatable.jsx

@@ -1,290 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { arctangent, distanceBetween, getAnchor as calcAnchor } from './anchor-utils';
-import { Portal } from 'react-portal';
-import Point from '@mapbox/point-geometry';
-import { parse as parseOrigin } from './transform-origin';
-
-const AnchorSvg = styled('svg')({
-  position: 'absolute',
-  zIndex: 100,
-  width: '200px',
-  height: '80px',
-});
-
-const Anchor = ({ left, top, color, fill }) => {
-  color = color || 'green';
-  fill = fill || 'white';
-  return (
-    <Portal>
-      <AnchorSvg
-        style={{
-          left: left - 10,
-          top: top - 10,
-        }}
-      >
-        <circle cx={10} cy={10} r={8} strokeWidth={1} stroke={color} fill={fill} />
-      </AnchorSvg>
-    </Portal>
-  );
-};
-
-/**
- * Tip o' the hat to:
- * https://bl.ocks.org/joyrexus/7207044
- */
-const RotatableContainer = styled('div')({
-  position: 'relative',
-  display: 'inline-block',
-  cursor: 'move',
-});
-
-export class Rotatable extends React.Component {
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    showAnchor: PropTypes.bool,
-    handle: PropTypes.arrayOf(
-      PropTypes.shape({
-        class: PropTypes.string.isRequired,
-        origin: PropTypes.string,
-      }),
-    ),
-    startPosition: PropTypes.shape({
-      left: PropTypes.number,
-      top: PropTypes.number,
-    }),
-  };
-
-  static defaultProps = {
-    showAnchor: false,
-    startPosition: { left: 0, top: 0 },
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isRotating: false,
-      rotation: 0,
-      startAngle: 0,
-      angle: 0,
-      position: {
-        left: props.startPosition.left,
-        top: props.startPosition.top,
-      },
-    };
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mouseup', this.rotateStop);
-    document.removeEventListener('mousemove', this.drag);
-    document.removeEventListener('mousemove', this.rotate);
-
-    this.handles.forEach((h) => {
-      h.el.removeEventListener('mousedown', h.mousedownHandler);
-      h.el.removeEventListener('mouseup', this.rotateStop);
-    });
-  }
-
-  componentDidMount() {
-    this.addMouseUpHandler();
-    this.initHandles();
-  }
-
-  initHandles = () => {
-    const { handle } = this.props;
-
-    if (Array.isArray(handle)) {
-      this.handles = [];
-      handle.forEach((h) => {
-        const el = this.rotatable.querySelector(`.${h.class}`);
-
-        if (el) {
-          const mousedownHandler = this.rotateStart(h.origin);
-          el.addEventListener('mousedown', mousedownHandler);
-          el.addEventListener('mouseup', this.rotateStop);
-          this.handles.push({ el, mousedownHandler });
-        }
-      });
-    }
-  };
-
-  addMouseUpHandler = () => {
-    document.addEventListener('mouseup', this.rotateStop);
-  };
-
-  originToXY = (origin) => {
-    const { clientWidth: width, clientHeight: height } = this.rotatable;
-    return parseOrigin({ width, height }, origin);
-  };
-
-  /**
-   * Get the anchor point for the given element, origin and rotation.
-   * @returns {{left:number, top: number}} - the co-ordinates of the anchor point relative to the whole page.
-   */
-  getAnchor = (origin) => {
-    const { rotation } = this.state;
-    const { clientWidth, clientHeight } = this.rotatable;
-    const { top, left } = this.rotatable.getBoundingClientRect();
-    const xy = this.originToXY(origin);
-    const { top: anchorTop, left: anchorLeft } = calcAnchor(
-      {
-        width: clientWidth,
-        height: clientHeight,
-      },
-      xy,
-      rotation,
-    );
-
-    return {
-      top: top + anchorTop,
-      left: left + anchorLeft,
-    };
-  };
-
-  rotateStart = (origin) => (e) => {
-    const { isRotating } = this.state;
-    if (isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    const anchor = this.getAnchor(origin);
-    const { rotation } = this.state;
-    const { angle: startAngle } = this.getAngle(anchor, e);
-
-    let diff = { x: 0, y: 0 };
-    if (origin !== this.state.origin) {
-      const { clientWidth: width, clientHeight: height } = this.rotatable;
-      diff = distanceBetween({ width, height }, rotation, this.state.origin, origin);
-    }
-
-    this.setState(
-      {
-        origin,
-        isRotating: true,
-        startAngle,
-        anchor,
-        position: {
-          left: this.state.position.left + diff.x,
-          top: this.state.position.top + diff.y,
-        },
-      },
-      () => {
-        document.addEventListener('mousemove', this.rotate);
-      },
-    );
-  };
-
-  rotateStop = (e) => {
-    const { isRotating } = this.state;
-
-    if (!isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    this.setState(
-      {
-        isRotating: false,
-        angle: this.state.rotation,
-        anchor: null,
-        current: null,
-      },
-      () => {
-        document.removeEventListener('mousemove', this.rotate);
-        document.removeEventListener('mousemove', this.drag);
-      },
-    );
-  };
-
-  getAngle(anchor, e) {
-    const x = e.clientX - anchor.left;
-    const y = (e.clientY - anchor.top) * -1;
-    return { angle: arctangent(x, y), x, y };
-  }
-
-  rotate = (e) => {
-    const { isRotating } = this.state;
-    if (!isRotating) {
-      return;
-    }
-
-    e.preventDefault();
-
-    const { startAngle, angle, anchor } = this.state;
-    const { angle: current, x, y } = this.getAngle(anchor, e);
-    const computedAnchor = { x, y };
-    const diff = current - startAngle;
-    const rotation = angle + diff;
-    this.setState({ rotation, diff, current, computedAnchor });
-  };
-
-  mouseDown = (e) => {
-    const handle = this.handles.find((h) => h.el === e.target);
-
-    if (!handle) {
-      this.dragStart(e);
-    }
-  };
-
-  dragStart = (e) => {
-    const dragPoint = new Point(e.pageX, e.pageY);
-    this.setState({ dragPoint }, () => {
-      document.addEventListener('mousemove', this.drag);
-    });
-  };
-
-  drag = (e) => {
-    e.preventDefault();
-    const current = new Point(e.pageX, e.pageY);
-    const translate = current.sub(this.state.dragPoint);
-    this.setState({ translate });
-  };
-
-  mouseUp = () => {
-    if (!this.state.translate) {
-      return;
-    }
-
-    const { position: lastPosition, translate } = this.state;
-
-    const position = {
-      left: lastPosition.left + translate.x,
-      top: lastPosition.top + translate.y,
-    };
-
-    document.removeEventListener('mousemove', this.drag);
-    this.setState({ position, dragPoint: null, translate: null });
-  };
-
-  render() {
-    const { children, showAnchor } = this.props;
-    const { rotation, anchor, origin, translate, position } = this.state;
-
-    const t = translate ? `translate(${translate.x}px, ${translate.y}px)` : '';
-
-    const style = {
-      left: position.left,
-      top: position.top,
-      transformOrigin: origin,
-      transform: `${t} rotate(${rotation}deg)`,
-    };
-
-    return (
-      <RotatableContainer
-        style={style}
-        ref={(r) => (this.rotatable = r)}
-        onMouseDown={this.mouseDown}
-        onMouseUp={this.mouseUp}
-      >
-        {anchor && showAnchor && <Anchor {...anchor} />}
-        {children}
-      </RotatableContainer>
-    );
-  }
-}
-
-export default Rotatable;

package/src/ruler/__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 = {}) => {
-    const defaultProps = {
-      width: 300,
-      height: 100,
-      units: 12,
-      unit: {
-        type: 'in',
-        ticks: 16,
-      },
-      ...props,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <Graphic {...defaultProps} />
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders svg with correct viewBox', () => {
-      const { container } = renderComponent({ width: 300, height: 100 });
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-      expect(svg).toHaveAttribute('viewBox', '0 0 300 100');
-    });
-
-    it('renders background rect with correct dimensions', () => {
-      const { container } = renderComponent({ width: 300, height: 100 });
-      const rect = container.querySelector('rect');
-      expect(rect).toBeInTheDocument();
-      expect(rect).toHaveAttribute('width', '300');
-      expect(rect).toHaveAttribute('height', '100');
-    });
-
-    it('renders correct number of unit markers', () => {
-      const { container } = renderComponent({ units: 12 });
-      const svg = container.querySelector('svg');
-      // Each unit renders as a group element with a specific structure
-      const groups = svg.querySelectorAll('g');
-      expect(groups.length).toBeGreaterThan(0);
-    });
-
-    it('renders with different unit types', () => {
-      const { container } = renderComponent({ unit: { type: 'cm', ticks: 10 } });
-      const svg = container.querySelector('svg');
-      expect(svg).toBeInTheDocument();
-    });
-
-    it('renders with custom dimensions', () => {
-      const { container } = renderComponent({ width: 480, height: 60, units: 10 });
-      const svg = container.querySelector('svg');
-      expect(svg).toHaveAttribute('viewBox', '0 0 480 60');
-    });
-  });
-});

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

@@ -1,85 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { Ruler } 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 RulerGraphic component to verify props
-jest.mock('../graphic', () => {
-  return function MockRulerGraphic(props) {
-    return <div data-testid="ruler-graphic" data-unit={JSON.stringify(props.unit)} />;
-  };
-});
-
-describe('ruler', () => {
-  const theme = createTheme();
-
-  const renderComponent = (props = {}) => {
-    const defaultProps = {
-      units: 12,
-      measure: 'imperial',
-      ...props,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <Ruler {...defaultProps} />
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders ruler component', () => {
-      renderComponent();
-      expect(screen.getByTestId('rotatable')).toBeInTheDocument();
-      expect(screen.getByTestId('ruler-graphic')).toBeInTheDocument();
-    });
-
-    it('renders with default props', () => {
-      renderComponent();
-      const graphic = screen.getByTestId('ruler-graphic');
-      expect(graphic).toBeInTheDocument();
-    });
-
-    it('renders with custom startPosition', () => {
-      renderComponent({ startPosition: { left: 100, top: 200 } });
-      expect(screen.getByTestId('ruler-graphic')).toBeInTheDocument();
-    });
-  });
-
-  describe('logic', () => {
-    it('sets unit for imperial', () => {
-      renderComponent({ measure: 'imperial', label: 'in' });
-      const graphic = screen.getByTestId('ruler-graphic');
-      const unit = JSON.parse(graphic.getAttribute('data-unit'));
-      expect(unit).toEqual({ ticks: 16, type: 'in' });
-    });
-
-    it('sets unit for metric', () => {
-      renderComponent({ measure: 'metric', label: 'cm' });
-      const graphic = screen.getByTestId('ruler-graphic');
-      const unit = JSON.parse(graphic.getAttribute('data-unit'));
-      expect(unit).toEqual({ ticks: 10, type: 'cm' });
-    });
-
-    it('sets custom tick count for imperial when divisible by 4', () => {
-      renderComponent({ measure: 'imperial', label: 'in', tickCount: 8 });
-      const graphic = screen.getByTestId('ruler-graphic');
-      const unit = JSON.parse(graphic.getAttribute('data-unit'));
-      expect(unit).toEqual({ ticks: 8, type: 'in' });
-    });
-
-    it('defaults to 16 ticks for imperial when tickCount not divisible by 4', () => {
-      renderComponent({ measure: 'imperial', label: 'in', tickCount: 7 });
-      const graphic = screen.getByTestId('ruler-graphic');
-      const unit = JSON.parse(graphic.getAttribute('data-unit'));
-      expect(unit).toEqual({ ticks: 16, type: 'in' });
-    });
-  });
-});

package/src/ruler/__tests__/unit-type.test.jsx

@@ -1,66 +0,0 @@
-import { render } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { UnitType } from '../unit-type';
-import React from 'react';
-
-describe('unit-type', () => {
-  const theme = createTheme();
-
-  const renderComponent = (props = {}) => {
-    const defaultProps = {
-      label: 'cm',
-      ...props,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <UnitType {...defaultProps} />
-        </svg>
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders text element with label', () => {
-      const { container } = renderComponent({ label: 'cm' });
-      const text = container.querySelector('text');
-      expect(text).toBeInTheDocument();
-      expect(text).toHaveTextContent('cm');
-    });
-
-    it('renders with default position', () => {
-      const { container } = renderComponent();
-      const text = container.querySelector('text');
-      expect(text).toHaveAttribute('x', '8');
-      expect(text).toHaveAttribute('y', '14');
-    });
-
-    it('renders with custom position', () => {
-      const { container } = renderComponent({ x: 20, y: 30 });
-      const text = container.querySelector('text');
-      expect(text).toHaveAttribute('x', '20');
-      expect(text).toHaveAttribute('y', '30');
-    });
-
-    it('renders with custom fontSize', () => {
-      const { container } = renderComponent({ fontSize: 16 });
-      const text = container.querySelector('text');
-      expect(text).toBeInTheDocument();
-    });
-
-    it('renders with different labels', () => {
-      const { container, rerender } = renderComponent({ label: 'in' });
-      expect(container.querySelector('text')).toHaveTextContent('in');
-
-      rerender(
-        <ThemeProvider theme={theme}>
-          <svg>
-            <UnitType label="mm" />
-          </svg>
-        </ThemeProvider>,
-      );
-      expect(container.querySelector('text')).toHaveTextContent('mm');
-    });
-  });
-});

package/src/ruler/__tests__/unit.test.jsx

@@ -1,68 +0,0 @@
-import { render } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { Unit } from '../unit';
-import React from 'react';
-
-describe('unit', () => {
-  const theme = createTheme();
-
-  const renderComponent = (props = {}) => {
-    const defaultProps = {
-      index: 2,
-      width: 30,
-      height: 20,
-      last: false,
-      config: { ticks: 10 },
-      ...props,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <svg>
-          <Unit {...defaultProps} />
-        </svg>
-      </ThemeProvider>,
-    );
-  };
-
-  describe('rendering', () => {
-    it('renders group element with correct transform', () => {
-      const { container } = renderComponent({ index: 2, width: 30 });
-      const group = container.querySelector('g');
-      expect(group).toBeInTheDocument();
-      expect(group).toHaveStyle({ transform: 'translate(30px, 0px)' });
-    });
-
-    it('renders label with index value', () => {
-      const { container } = renderComponent({ index: 5 });
-      const text = container.querySelector('text');
-      expect(text).toHaveTextContent('5');
-    });
-
-    it('renders end tick when not last unit', () => {
-      const { container } = renderComponent({ last: false });
-      const lines = container.querySelectorAll('line');
-      // Should have end tick plus ticks based on config
-      expect(lines.length).toBeGreaterThan(0);
-    });
-
-    it('does not render end tick when last unit', () => {
-      const { container } = renderComponent({ last: true });
-      const group = container.querySelector('g');
-      expect(group).toBeInTheDocument();
-    });
-
-    it('renders correct number of tick marks', () => {
-      const { container } = renderComponent({ config: { ticks: 16 } });
-      const lines = container.querySelectorAll('line');
-      // Should render ticks based on config (16 ticks - 1 for range + 1 end tick = 16 total)
-      expect(lines.length).toBeGreaterThan(10);
-    });
-
-    it('renders with different width', () => {
-      const { container } = renderComponent({ index: 3, width: 40 });
-      const group = container.querySelector('g');
-      expect(group).toHaveStyle({ transform: 'translate(80px, 0px)' });
-    });
-  });
-});

package/src/ruler/graphic.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import UnitType from './unit-type';
-import { range } from 'lodash-es';
-import Unit from './unit';
-import { fillColor, strokeColor } from '../style-utils';
-
-const StyledBg = styled('rect')(({ theme }) => ({
-  stroke: strokeColor(theme),
-  strokeWidth: '2px',
-  fill: fillColor(theme),
-}));
-
-const Bg = ({ width, height }) => <StyledBg width={width} height={height} cx={0} cy={0} />;
-
-Bg.propTypes = {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
-
-export class Graphic extends React.PureComponent {
-  static propTypes = {
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    units: PropTypes.number.isRequired,
-    unit: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { width, height, units, unit } = this.props;
-    const viewBox = `0 0 ${width} ${height}`;
-    const unitWidth = width / units;
-    const unitHeight = height;
-
-    return (
-      <svg viewBox={viewBox}>
-        <Bg width={width} height={height} />
-        <UnitType label={unit.type} />
-        {range(1, units + 1).map((r) => (
-          <Unit width={unitWidth} height={unitHeight} key={r} index={r} config={unit} last={r === units} />
-        ))}
-      </svg>
-    );
-  }
-}
-
-export default Graphic;