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

package/dist/protractor/graphic.js

@@ -0,0 +1,85 @@
+import { noSelect as e, strokeColor as t } from "../style-utils.js";
+import n from "react";
+import { styled as r } from "@mui/material/styles";
+import { range as i } from "@pie-element/shared-lodash";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/protractor/graphic.tsx
+var s = r("line")(({ theme: e }) => ({
+	strokeWidth: "0.2",
+	stroke: t(e)
+})), c = ({ angle: e, major: t, minor: n }) => /* @__PURE__ */ a(s, {
+	transform: `rotate(${e}, 50.5,50)`,
+	style: {},
+	x1: "1",
+	x2: t ? 10 : n ? 6 : 3,
+	y1: "50",
+	y2: "50"
+}), l = r("line")(({ theme: e }) => ({
+	strokeWidth: "0.2",
+	stroke: t(e)
+})), u = ({ angle: e }) => /* @__PURE__ */ a(l, {
+	transform: `rotate(${e}, 50.5,50)`,
+	style: {},
+	x1: "15",
+	x2: "46",
+	y1: "50",
+	y2: "50"
+}), d = r("text")(({ theme: n }) => ({
+	fontSize: "2.5px",
+	textAnchor: "middle",
+	fill: t(n),
+	...e()
+})), f = ({ angle: e }) => /* @__PURE__ */ a(d, {
+	transform: `rotate(${e - 90}, 50.5, 50)`,
+	x: "50",
+	y: "12.5",
+	children: e
+}), p = r("path")(({ theme: e }) => ({
+	strokeWidth: "0.2",
+	stroke: t(e)
+})), m = r("line")(({ theme: e }) => ({
+	strokeWidth: "0.2",
+	stroke: t(e)
+})), h = r("circle")(({ theme: e }) => ({
+	strokeWidth: "0.2",
+	stroke: t(e),
+	fill: "none"
+})), g = class extends n.PureComponent {
+	render() {
+		return /* @__PURE__ */ o("svg", {
+			viewBox: "0 0 102 61",
+			children: [
+				/* @__PURE__ */ a(p, {
+					d: "M 1,50 A 1,1 0 0 1 100,50 L 100,60 L 1,60 Z",
+					fill: "none"
+				}),
+				i(0, 181).map((e) => /* @__PURE__ */ a(c, {
+					minor: e % 5 == 0,
+					major: e % 10 == 0,
+					angle: e
+				}, e)),
+				i(0, 181, 10).map((e) => /* @__PURE__ */ o(n.Fragment, { children: [/* @__PURE__ */ a(u, { angle: e }), /* @__PURE__ */ a(f, { angle: e })] }, e)),
+				/* @__PURE__ */ a(h, {
+					r: "4",
+					cx: "50.5",
+					cy: "50"
+				}),
+				/* @__PURE__ */ a(m, {
+					x1: "48.5",
+					x2: "52.5",
+					y1: "50",
+					y2: "50"
+				}),
+				/* @__PURE__ */ a(m, {
+					transform: "rotate(90 50.5 50)",
+					x1: "48.5",
+					x2: "52.5",
+					y1: "50",
+					y2: "50"
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { g as default };

package/dist/protractor/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-lib/packages/tools/src/protractor/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Protractor extends React.Component {
+    static propTypes: {
+        width: PropTypes.Validator<number>;
+        className: PropTypes.Requireable<string>;
+        startPosition: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Requireable<number>;
+            top: PropTypes.Requireable<number>;
+        }>>;
+    };
+    static defaultProps: {
+        width: number;
+        startPosition: {
+            left: number;
+            top: number;
+        };
+    };
+    render(): React.JSX.Element;
+}
+export default Protractor;

package/dist/protractor/index.js

@@ -0,0 +1,56 @@
+import e from "./graphic.js";
+import t from "../anchor.js";
+import n from "../rotatable.js";
+import r from "react";
+import { styled as i } from "@mui/material/styles";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/protractor/index.tsx
+var c = i("div")(() => ({ position: "relative" })), l = i(t)(() => ({
+	position: "absolute",
+	left: 0,
+	bottom: 0
+})), u = i(t)(() => ({
+	position: "absolute",
+	right: 0,
+	bottom: 0
+})), d = class extends r.Component {
+	static propTypes = {
+		width: a.number.isRequired,
+		className: a.string,
+		startPosition: a.shape({
+			left: a.number,
+			top: a.number
+		})
+	};
+	static defaultProps = {
+		width: 450,
+		startPosition: {
+			left: 0,
+			top: 0
+		}
+	};
+	render() {
+		let { width: t, startPosition: r } = this.props;
+		return /* @__PURE__ */ o(n, {
+			startPosition: r,
+			handle: [{
+				class: "leftAnchor",
+				origin: `${t * .495}px ${t * .49}px`
+			}, {
+				class: "rightAnchor",
+				origin: `${t * .495}px ${t * .49}px`
+			}],
+			children: /* @__PURE__ */ s(c, {
+				style: { width: `${t}px` },
+				children: [
+					/* @__PURE__ */ o(e, {}),
+					/* @__PURE__ */ o(l, { className: "leftAnchor" }),
+					/* @__PURE__ */ o(u, { className: "rightAnchor" })
+				]
+			})
+		});
+	}
+};
+//#endregion
+export { d as default };

package/dist/rotatable.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @synced-from pie-lib/packages/tools/src/rotatable.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Rotatable extends React.Component {
+    static propTypes: {
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+        showAnchor: PropTypes.Requireable<boolean>;
+        handle: PropTypes.Requireable<(PropTypes.InferProps<{
+            class: PropTypes.Validator<string>;
+            origin: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        startPosition: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Requireable<number>;
+            top: PropTypes.Requireable<number>;
+        }>>;
+    };
+    static defaultProps: {
+        showAnchor: boolean;
+        startPosition: {
+            left: number;
+            top: number;
+        };
+    };
+    constructor(props: any);
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    initHandles: any;
+    addMouseUpHandler: any;
+    originToXY: any;
+    /**
+     * 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: any;
+    rotateStart: (origin: any) => (e: any) => void;
+    rotateStop: any;
+    getAngle(anchor: any, e: any): {
+        angle: number;
+        x: number;
+        y: number;
+    };
+    rotate: any;
+    mouseDown: any;
+    dragStart: any;
+    drag: any;
+    mouseUp: any;
+    render(): React.JSX.Element;
+}
+export default Rotatable;

package/dist/rotatable.js

@@ -0,0 +1,210 @@
+import { parse as e } from "./transform-origin.js";
+import { arctangent as t, distanceBetween as n, getAnchor as r } from "./anchor-utils.js";
+import i from "./node_modules/.bun/react-portal@4.3.0_6dbf9a050bc9aadb/node_modules/react-portal/es/PortalCompat.js";
+import a from "react";
+import { styled as o } from "@mui/material/styles";
+import s from "prop-types";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mapbox/point-geometry";
+//#region src/rotatable.tsx
+var d = o("svg")({
+	position: "absolute",
+	zIndex: 100,
+	width: "200px",
+	height: "80px"
+}), f = ({ left: e, top: t, color: n, fill: r }) => (n ||= "green", r ||= "white", /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(d, {
+	style: {
+		left: e - 10,
+		top: t - 10
+	},
+	children: /* @__PURE__ */ c("circle", {
+		cx: 10,
+		cy: 10,
+		r: 8,
+		strokeWidth: 1,
+		stroke: n,
+		fill: r
+	})
+}) })), p = o("div")({
+	position: "relative",
+	display: "inline-block",
+	cursor: "move"
+}), m = class extends a.Component {
+	static propTypes = {
+		children: s.oneOfType([s.arrayOf(s.node), s.node]).isRequired,
+		showAnchor: s.bool,
+		handle: s.arrayOf(s.shape({
+			class: s.string.isRequired,
+			origin: s.string
+		})),
+		startPosition: s.shape({
+			left: s.number,
+			top: s.number
+		})
+	};
+	static defaultProps = {
+		showAnchor: !1,
+		startPosition: {
+			left: 0,
+			top: 0
+		}
+	};
+	constructor(e) {
+		super(e), this.state = {
+			isRotating: !1,
+			rotation: 0,
+			startAngle: 0,
+			angle: 0,
+			position: {
+				left: e.startPosition.left,
+				top: e.startPosition.top
+			}
+		};
+	}
+	componentWillUnmount() {
+		document.removeEventListener("mouseup", this.rotateStop), document.removeEventListener("mousemove", this.drag), document.removeEventListener("mousemove", this.rotate), this.handles.forEach((e) => {
+			e.el.removeEventListener("mousedown", e.mousedownHandler), e.el.removeEventListener("mouseup", this.rotateStop);
+		});
+	}
+	componentDidMount() {
+		this.addMouseUpHandler(), this.initHandles();
+	}
+	initHandles = () => {
+		let { handle: e } = this.props;
+		Array.isArray(e) && (this.handles = [], e.forEach((e) => {
+			let t = this.rotatable.querySelector(`.${e.class}`);
+			if (t) {
+				let n = this.rotateStart(e.origin);
+				t.addEventListener("mousedown", n), t.addEventListener("mouseup", this.rotateStop), this.handles.push({
+					el: t,
+					mousedownHandler: n
+				});
+			}
+		}));
+	};
+	addMouseUpHandler = () => {
+		document.addEventListener("mouseup", this.rotateStop);
+	};
+	originToXY = (t) => {
+		let { clientWidth: n, clientHeight: r } = this.rotatable;
+		return e({
+			width: n,
+			height: r
+		}, t);
+	};
+	getAnchor = (e) => {
+		let { rotation: t } = this.state, { clientWidth: n, clientHeight: i } = this.rotatable, { top: a, left: o } = this.rotatable.getBoundingClientRect(), s = this.originToXY(e), { top: c, left: l } = r({
+			width: n,
+			height: i
+		}, s, t);
+		return {
+			top: a + c,
+			left: o + l
+		};
+	};
+	rotateStart = (e) => (t) => {
+		let { isRotating: r } = this.state;
+		if (r) return;
+		t.preventDefault();
+		let i = this.getAnchor(e), { rotation: a } = this.state, { angle: o } = this.getAngle(i, t), s = {
+			x: 0,
+			y: 0
+		};
+		if (e !== this.state.origin) {
+			let { clientWidth: t, clientHeight: r } = this.rotatable;
+			s = n({
+				width: t,
+				height: r
+			}, a, this.state.origin, e);
+		}
+		this.setState({
+			origin: e,
+			isRotating: !0,
+			startAngle: o,
+			anchor: i,
+			position: {
+				left: this.state.position.left + s.x,
+				top: this.state.position.top + s.y
+			}
+		}, () => {
+			document.addEventListener("mousemove", this.rotate);
+		});
+	};
+	rotateStop = (e) => {
+		let { isRotating: t } = this.state;
+		t && (e.preventDefault(), this.setState({
+			isRotating: !1,
+			angle: this.state.rotation,
+			anchor: null,
+			current: null
+		}, () => {
+			document.removeEventListener("mousemove", this.rotate), document.removeEventListener("mousemove", this.drag);
+		}));
+	};
+	getAngle(e, n) {
+		let r = n.clientX - e.left, i = (n.clientY - e.top) * -1;
+		return {
+			angle: t(r, i),
+			x: r,
+			y: i
+		};
+	}
+	rotate = (e) => {
+		let { isRotating: t } = this.state;
+		if (!t) return;
+		e.preventDefault();
+		let { startAngle: n, angle: r, anchor: i } = this.state, { angle: a, x: o, y: s } = this.getAngle(i, e), c = {
+			x: o,
+			y: s
+		}, l = a - n, u = r + l;
+		this.setState({
+			rotation: u,
+			diff: l,
+			current: a,
+			computedAnchor: c
+		});
+	};
+	mouseDown = (e) => {
+		this.handles.find((t) => t.el === e.target) || this.dragStart(e);
+	};
+	dragStart = (e) => {
+		let t = new u(e.pageX, e.pageY);
+		this.setState({ dragPoint: t }, () => {
+			document.addEventListener("mousemove", this.drag);
+		});
+	};
+	drag = (e) => {
+		e.preventDefault();
+		let t = new u(e.pageX, e.pageY).sub(this.state.dragPoint);
+		this.setState({ translate: t });
+	};
+	mouseUp = () => {
+		if (!this.state.translate) return;
+		let { position: e, translate: t } = this.state, n = {
+			left: e.left + t.x,
+			top: e.top + t.y
+		};
+		document.removeEventListener("mousemove", this.drag), this.setState({
+			position: n,
+			dragPoint: null,
+			translate: null
+		});
+	};
+	render() {
+		let { children: e, showAnchor: t } = this.props, { rotation: n, anchor: r, origin: i, translate: a, position: o } = this.state, s = a ? `translate(${a.x}px, ${a.y}px)` : "";
+		return /* @__PURE__ */ l(p, {
+			style: {
+				left: o.left,
+				top: o.top,
+				transformOrigin: i,
+				transform: `${s} rotate(${n}deg)`
+			},
+			ref: (e) => this.rotatable = e,
+			onMouseDown: this.mouseDown,
+			onMouseUp: this.mouseUp,
+			children: [r && t && /* @__PURE__ */ c(f, { ...r }), e]
+		});
+	}
+};
+//#endregion
+export { m as default };

package/dist/ruler/graphic.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-lib/packages/tools/src/ruler/graphic.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Graphic extends React.PureComponent {
+    static propTypes: {
+        width: PropTypes.Validator<number>;
+        height: PropTypes.Validator<number>;
+        units: PropTypes.Validator<number>;
+        unit: PropTypes.Validator<object>;
+    };
+    render(): React.JSX.Element;
+}
+export default Graphic;

package/dist/ruler/graphic.js

@@ -0,0 +1,53 @@
+import { fillColor as e, strokeColor as t } from "../style-utils.js";
+import n from "./unit-type.js";
+import r from "./unit.js";
+import i from "react";
+import { styled as a } from "@mui/material/styles";
+import o from "prop-types";
+import { range as s } from "@pie-element/shared-lodash";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/ruler/graphic.tsx
+var u = a("rect")(({ theme: n }) => ({
+	stroke: t(n),
+	strokeWidth: "2px",
+	fill: e(n)
+})), d = ({ width: e, height: t }) => /* @__PURE__ */ c(u, {
+	width: e,
+	height: t,
+	cx: 0,
+	cy: 0
+});
+d.propTypes = {
+	width: o.number.isRequired,
+	height: o.number.isRequired
+};
+var f = class extends i.PureComponent {
+	static propTypes = {
+		width: o.number.isRequired,
+		height: o.number.isRequired,
+		units: o.number.isRequired,
+		unit: o.object.isRequired
+	};
+	render() {
+		let { width: e, height: t, units: i, unit: a } = this.props, o = `0 0 ${e} ${t}`, u = e / i, f = t;
+		return /* @__PURE__ */ l("svg", {
+			viewBox: o,
+			children: [
+				/* @__PURE__ */ c(d, {
+					width: e,
+					height: t
+				}),
+				/* @__PURE__ */ c(n, { label: a.type }),
+				s(1, i + 1).map((e) => /* @__PURE__ */ c(r, {
+					width: u,
+					height: f,
+					index: e,
+					config: a,
+					last: e === i
+				}, e))
+			]
+		});
+	}
+};
+//#endregion
+export { f as default };

package/dist/ruler/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-lib/packages/tools/src/ruler/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Ruler extends React.Component {
+    static propTypes: {
+        width: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<number>;
+        units: PropTypes.Validator<number>;
+        measure: PropTypes.Validator<string>;
+        startPosition: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            top: PropTypes.Validator<number>;
+        }>>;
+        label: PropTypes.Requireable<string>;
+        tickCount: PropTypes.Requireable<number>;
+    };
+    static defaultProps: {
+        width: number;
+        height: number;
+        measure: string;
+        units: number;
+    };
+    render(): React.JSX.Element;
+}
+export default Ruler;

package/dist/ruler/index.js

@@ -0,0 +1,77 @@
+import e from "../anchor.js";
+import t from "../rotatable.js";
+import n from "./graphic.js";
+import r from "react";
+import { styled as i } from "@mui/material/styles";
+import a from "prop-types";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/ruler/index.tsx
+var c = i("div")(({ theme: e }) => ({
+	cursor: "move",
+	position: "relative",
+	backgroundColor: e.palette.secondary.light,
+	opacity: 1,
+	border: `solid 0px ${e.palette.primary.main}`
+})), l = i(e)(() => ({
+	left: "-10px",
+	top: "40%"
+})), u = i(e)(() => ({
+	right: "-10px",
+	top: "40%"
+})), d = class extends r.Component {
+	static propTypes = {
+		width: a.number,
+		height: a.number,
+		units: a.number.isRequired,
+		measure: a.oneOf(["imperial", "metric"]).isRequired,
+		startPosition: a.shape({
+			left: a.number.isRequired,
+			top: a.number.isRequired
+		}),
+		label: a.string,
+		tickCount: a.number
+	};
+	static defaultProps = {
+		width: 480,
+		height: 60,
+		measure: "imperial",
+		units: 12
+	};
+	render() {
+		let { width: e, height: r, units: i, measure: a, startPosition: d, label: f, tickCount: p } = this.props, m = a === "imperial" ? {
+			type: f,
+			ticks: p && p % 4 == 0 ? p : 16
+		} : {
+			type: f,
+			ticks: 10
+		};
+		return /* @__PURE__ */ o(t, {
+			startPosition: d,
+			handle: [{
+				class: "leftAnchor",
+				origin: "bottom right"
+			}, {
+				class: "rightAnchor",
+				origin: "bottom left"
+			}],
+			children: /* @__PURE__ */ s(c, {
+				style: {
+					width: `${e}px`,
+					height: `${r}px`
+				},
+				children: [
+					/* @__PURE__ */ o(n, {
+						width: e,
+						height: r,
+						units: i,
+						unit: m
+					}),
+					/* @__PURE__ */ o(l, { className: "leftAnchor" }),
+					/* @__PURE__ */ o(u, { className: "rightAnchor" })
+				]
+			})
+		});
+	}
+};
+//#endregion
+export { d as default };

package/dist/ruler/unit-type.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-lib/packages/tools/src/ruler/unit-type.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare const UnitType: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Validator<string>;
+        x: PropTypes.Requireable<number>;
+        y: PropTypes.Requireable<number>;
+        textAlign: PropTypes.Requireable<string>;
+        fill: PropTypes.Requireable<string>;
+        fontSize: PropTypes.Requireable<number>;
+        stroke: PropTypes.Requireable<string>;
+    };
+    defaultProps: {
+        textAnchor: string;
+        fontSize: number;
+        stroke: string;
+        x: number;
+        y: number;
+    };
+};
+export default UnitType;

package/dist/ruler/unit-type.js

@@ -0,0 +1,38 @@
+import { noSelect as e, strokeColor as t } from "../style-utils.js";
+import "react";
+import { styled as n } from "@mui/material/styles";
+import r from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ruler/unit-type.tsx
+var a = n("text")(({ theme: n }) => ({
+	...e(),
+	fill: t(n)
+})), o = (e) => {
+	let { label: t, x: n, y: r, textAlign: o, fill: s, fontSize: c, stroke: l } = e;
+	return /* @__PURE__ */ i(a, {
+		x: n,
+		y: r,
+		textAnchor: o,
+		stroke: l,
+		fill: s,
+		fontSize: c,
+		children: t
+	});
+};
+o.propTypes = {
+	label: r.string.isRequired,
+	x: r.number,
+	y: r.number,
+	textAlign: r.string,
+	fill: r.string,
+	fontSize: r.number,
+	stroke: r.string
+}, o.defaultProps = {
+	textAnchor: "start",
+	fontSize: 11,
+	stroke: "none",
+	x: 8,
+	y: 14
+};
+//#endregion
+export { o as default };