@pie-lib/tools 0.9.36 → 0.10.1-beta.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.9.36](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.35...@pie-lib/tools@0.9.36) (2023-06-24)
+## [0.10.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.10.1-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/tools
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.9.35](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.34...@pie-lib/tools@0.9.35) (2023-01-31)
+# [0.10.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.10.0-beta.0) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/tools
 
@@ -19,62 +19,50 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.9.34](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.33...@pie-lib/tools@0.9.34) (2023-01-31)
+# [0.11.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.11.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/tools
 
+# [0.10.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.36...@pie-lib/tools@0.10.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/tools
 
+## [0.9.36](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.35...@pie-lib/tools@0.9.36) (2023-06-24)
 
+**Note:** Version bump only for package @pie-lib/tools
 
-## [0.9.33](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.32...@pie-lib/tools@0.9.33) (2023-01-31)
+## [0.9.35](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.34...@pie-lib/tools@0.9.35) (2023-01-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
+## [0.9.34](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.33...@pie-lib/tools@0.9.34) (2023-01-31)
 
+**Note:** Version bump only for package @pie-lib/tools
 
+## [0.9.33](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.32...@pie-lib/tools@0.9.33) (2023-01-31)
 
+**Note:** Version bump only for package @pie-lib/tools
 
 ## [0.9.32](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.31...@pie-lib/tools@0.9.32) (2023-01-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 ## [0.9.31](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.29...@pie-lib/tools@0.9.31) (2023-01-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 ## [0.9.29](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.27...@pie-lib/tools@0.9.29) (2023-01-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 ## [0.9.27](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.25...@pie-lib/tools@0.9.27) (2023-01-31)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 ## [0.9.25](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.24...@pie-lib/tools@0.9.25) (2022-11-23)
 
 **Note:** Version bump only for package @pie-lib/tools
 
-
-
-
-
 ## [0.9.24](https://github.com/pie-framework/pie-lib/compare/@pie-lib/tools@0.9.22...@pie-lib/tools@0.9.24) (2021-06-25)
 
 **Note:** Version bump only for package @pie-lib/tools

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.9.36",
+  "version": "0.10.1-beta.0",
   "description": "Some interactive tools",
   "keywords": [
     "react",
@@ -18,12 +18,13 @@
   "license": "ISC",
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
-    "@pie-lib/style-utils": "^0.1.43",
+    "@pie-lib/style-utils": "^0.2.1-beta.0",
     "assert": "^1.4.1",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
     "react-portal": "^4.2.0",
     "trigonometry-calculator": "^2.0.0"
   },
@@ -36,5 +37,5 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "4043c98430c000ce3a25357d92845175b076ea21"
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
 }

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rotatable snapshot renders 1`] = `
+<div
+  className=""
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  style={
+    Object {
+      "left": 0,
+      "top": 0,
+      "transform": " rotate(0deg)",
+      "transformOrigin": undefined,
+    }
+  }
+>
+  foo
+</div>
+`;
+
+exports[`rotatable snapshot renders with transforms 1`] = `
+<div
+  className=""
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  style={
+    Object {
+      "left": 0,
+      "top": 0,
+      "transform": "translate(10px, 10px) rotate(10deg)",
+      "transformOrigin": "bottom left",
+    }
+  }
+>
+  foo
+</div>
+`;

package/src/__tests__/anchor-utils.test.js

@@ -0,0 +1,131 @@
+import { getAnchor, normalizeAngle, getAngleAndHypotenuse, getTranslateXY } from '../anchor-utils';
+
+const o = (strings, ...exp) => {
+  return strings.reduce((acc, v, index) => {
+    const e = exp[index];
+    const s = typeof e === 'object' ? JSON.stringify(e) : e;
+    return `${acc}${v}${s || ''}`;
+  }, '');
+};
+
+const rect = { width: 100, height: 100 };
+
+describe('getAngleAndHypotenuse', () => {
+  const assert = (corner, rect, point, expected) => {
+    it(o`${corner}, ${rect}, ${point} => ${expected}`, () => {
+      const result = getAngleAndHypotenuse(corner, rect, point);
+      expect(result).toMatchObject(expected);
+    });
+  };
+  assert('top-left', rect, { x: 50, y: 50 }, { degrees: -45 });
+  assert('bottom-left', rect, { x: 50, y: 50 }, { degrees: -135 });
+  assert('top-right', rect, { x: 50, y: 50 }, { degrees: 45 });
+  assert('bottom-right', rect, { x: 50, y: 50 }, { degrees: 135 });
+});
+
+describe('getAnchor', () => {
+  describe('rect', () => {
+    it('does this: ', () => {
+      const result = getAnchor(
+        {
+          width: 400,
+          height: 100,
+        },
+        { x: 0, y: 100 },
+        0,
+      );
+      expect(result.top).not.toBeUndefined();
+      expect(result.left).not.toBeUndefined();
+    });
+  });
+  describe('square', () => {
+    it('square @ 45', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 45);
+      expect(result.top).toBeCloseTo(70.71);
+      expect(result.left).toBeCloseTo(70.71);
+    });
+    it('square @ 90', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 90);
+      expect(result.top).toBeCloseTo(50);
+      expect(result.left).toBeCloseTo(50);
+    });
+
+    it('square @ 180', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 180);
+      expect(result.top).toBeCloseTo(50);
+      expect(result.left).toBeCloseTo(50);
+    });
+
+    it('square @ 270', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 180);
+      expect(result.top).toBeCloseTo(50);
+      expect(result.left).toBeCloseTo(50);
+    });
+
+    it('square @ -45 - bottom right anchor', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 100, y: 100 }, -45);
+      expect(result.left).toBeCloseTo(141.42);
+      expect(result.top).toBeCloseTo(70.71);
+    });
+
+    it('square @ 45 - bottom right anchor', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 100, y: 100 }, 45);
+      expect(result.top).toBeCloseTo(141.42);
+      expect(result.left).toBeCloseTo(70.71);
+    });
+
+    it('square @ 20 - bottom right anchor', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 100, y: 100 }, 20);
+
+      expect(result.top).toBeCloseTo(128.17);
+      expect(result.left).toBeCloseTo(93.969);
+    });
+
+    it('square @ 45, shifted center', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 25, y: 25 }, 45);
+      expect(result.top).toBeCloseTo(35.36);
+      expect(result.left).toBeCloseTo(70.71);
+    });
+
+    it('square @ 20, shifted center', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 25, y: 25 }, 20);
+      expect(result.top).toBeCloseTo(32.04);
+      expect(result.left).toBeCloseTo(49.14);
+    });
+
+    it('square @ 20', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 20);
+      expect(result.top).toBeCloseTo(64.085);
+      expect(result.left).toBeCloseTo(64.085);
+    });
+
+    it('square @ 135', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 135);
+      expect(result.top).toBeCloseTo(70.71);
+      expect(result.left).toBeCloseTo(70.71);
+    });
+    it('square @ 225', () => {
+      const result = getAnchor({ width: 100, height: 100 }, { x: 50, y: 50 }, 135);
+      expect(result.top).toBeCloseTo(70.71);
+      expect(result.left).toBeCloseTo(70.71);
+    });
+  });
+});
+
+describe('normalizeAngle', () => {
+  const assert = (a, expected) => {
+    it(`${a} -> ${expected}`, () => {
+      expect(normalizeAngle(a)).toEqual(expected);
+    });
+  };
+
+  assert(360, 360);
+  assert(0, 0);
+  assert(10, 10);
+  assert(361, 1);
+  assert(450, 90);
+  assert(721, 1);
+  assert(-1, 359);
+  assert(-361, 359);
+  assert(-721, 359);
+});

package/src/__tests__/rotatable.test.jsx

@@ -0,0 +1,220 @@
+import toJson from 'enzyme-to-json';
+import { shallow } from 'enzyme';
+import { Rotatable } from '../rotatable';
+import React from 'react';
+/** Note: we use the test renderer because we need to make use of ref mocking. */
+import TestRenderer from 'react-test-renderer'; // ES6
+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('snapshot', () => {
+    it('renders', () => {
+      const wrapper = shallow(<Rotatable classes={{}}>foo</Rotatable>);
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+
+    it('renders with transforms', () => {
+      const wrapper = shallow(<Rotatable classes={{}}>foo</Rotatable>);
+
+      wrapper.setState({
+        translate: {
+          x: 10,
+          y: 10,
+        },
+        rotation: 10,
+        origin: 'bottom left',
+      });
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    let wrapper, el, instance;
+
+    beforeEach(() => {
+      el = {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      };
+      wrapper = TestRenderer.create(
+        <Rotatable handle={[{ class: 'foo', origin: 'bottom left' }]} classes={{ rotatable: 'rotatable' }}>
+          <div className={'foo'}>foo</div>
+        </Rotatable>,
+        {
+          createNodeMock: (e) => {
+            if (e.props.className === 'rotatable') {
+              return {
+                querySelector: jest.fn(() => el),
+                getBoundingClientRect: jest.fn(() => ({
+                  left: 0,
+                  top: 0,
+                  width: 100,
+                  height: 100,
+                })),
+              };
+            }
+          },
+        },
+      );
+
+      document.addEventListener = jest.fn();
+      document.removeEventListener = jest.fn();
+      instance = wrapper.root.instance;
+    });
+
+    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

@@ -0,0 +1,24 @@
+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/index.js

@@ -2,4 +2,5 @@ import Protractor from './protractor';
 import Ruler from './ruler';
 import Rotatable from './rotatable';
 import * as utils from './anchor-utils';
+
 export { Protractor, Ruler, Rotatable, utils };