@pie-lib/tools 2.0.3-next.0 → 2.0.3-next.57

package/dist/rotatable.js

@@ -1,210 +0,0 @@
-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

@@ -1,20 +0,0 @@
-/**
- * @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

@@ -1,53 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/**
- * @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

@@ -1,77 +0,0 @@
-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

@@ -1,30 +0,0 @@
-/**
- * @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

@@ -1,38 +0,0 @@
-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 };

package/dist/ruler/unit.d.ts

@@ -1,21 +0,0 @@
-/**
- * @synced-from pie-lib/packages/tools/src/ruler/unit.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 Unit extends React.Component {
-    static propTypes: {
-        index: PropTypes.Validator<number>;
-        width: PropTypes.Validator<number>;
-        height: PropTypes.Validator<number>;
-        last: PropTypes.Validator<boolean>;
-        config: PropTypes.Validator<object>;
-    };
-    render(): React.JSX.Element;
-}
-export default Unit;

package/dist/ruler/unit.js

@@ -1,69 +0,0 @@
-import { noSelect as e, strokeColor as t } from "../style-utils.js";
-import n from "react";
-import { styled as r } from "@mui/material/styles";
-import i from "prop-types";
-import { range as a } from "@pie-element/shared-lodash";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/ruler/unit.tsx
-var c = r("line")(({ theme: e }) => ({ stroke: t(e) })), l = ({ x: e, height: t, bottom: n, major: r, minor: i }) => /* @__PURE__ */ o(c, {
-	y1: r ? n - t * 2 : i ? n - t * 1.5 : n - t,
-	y2: n,
-	x1: e,
-	x2: e
-}), u = ({ count: e, width: t, height: r }) => /* @__PURE__ */ o(n.Fragment, { children: a(1, e).map((n) => /* @__PURE__ */ o(l, {
-	value: n,
-	x: t / e * n,
-	major: n % (e / 2) == 0,
-	minor: n % (e / 4) == 0,
-	bottom: r,
-	height: 10
-}, n)) });
-u.propTypes = {
-	count: i.number.isRequired,
-	width: i.number.isRequired,
-	height: i.number.isRequired
-};
-var d = r("line")(({ theme: e }) => ({
-	stroke: t(e),
-	strokeWidth: 1
-})), f = r("text")(({ theme: n }) => ({
-	textAnchor: "end",
-	fontSize: "12px",
-	fill: t(n),
-	...e()
-})), p = class extends n.Component {
-	static propTypes = {
-		index: i.number.isRequired,
-		width: i.number.isRequired,
-		height: i.number.isRequired,
-		last: i.bool.isRequired,
-		config: i.object.isRequired
-	};
-	render() {
-		let { index: e, width: t, height: n, last: r, config: i } = this.props;
-		return /* @__PURE__ */ s("g", {
-			style: { transform: `translate(${t * (e - 1)}px, 0px)` },
-			children: [
-				!r && /* @__PURE__ */ o(d, {
-					x1: t,
-					y1: 0,
-					x2: t,
-					y2: n
-				}),
-				/* @__PURE__ */ o(u, {
-					count: i.ticks,
-					width: t,
-					height: n
-				}),
-				/* @__PURE__ */ o(f, {
-					width: t,
-					x: t - 5,
-					y: 15,
-					children: e
-				})
-			]
-		});
-	}
-};
-//#endregion
-export { p as default };

package/dist/style-utils.d.ts

@@ -1,12 +0,0 @@
-/**
- * @synced-from pie-lib/packages/tools/src/style-utils.js
- * @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 { noSelect } from '@pie-lib/style-utils';
-export { noSelect };
-export declare const strokeColor: (theme: any) => string;
-export declare const fillColor: (theme: any) => string;

package/dist/style-utils.js

@@ -1,5 +0,0 @@
-import { noSelect as e } from "@pie-lib/style-utils";
-//#region src/style-utils.ts
-var t = (e) => `var(--ruler-stroke, ${e.palette.primary.main})`, n = (e) => `var(--ruler-bg, ${e.palette.primary.contrastText})`;
-//#endregion
-export { n as fillColor, e as noSelect, t as strokeColor };

package/dist/transform-origin.d.ts

@@ -1,18 +0,0 @@
-/**
- * @synced-from pie-lib/packages/tools/src/transform-origin.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.
- */
-/**
- * Parse a transform origin string to x/y values.
- * @param {{width: number, height: number}} rect
- * @param {string} value
- * @returns {x:number, y:number}
- */
-export declare const parse: (rect: any, value: any) => {
-    x: number;
-    y: number;
-} | undefined;

package/dist/transform-origin.js

@@ -1,21 +0,0 @@
-//#region src/transform-origin.tsx
-var e = (e) => e === "left" || e === "top" ? 0 : e === "right" || e === "bottom" ? 100 : e === "center" ? 50 : e.endsWith("%") ? parseFloat(e) : e, t = (t, n) => t.endsWith("px") ? parseFloat(t) : (t = e(t), t / 100 * n), n = (e) => e[0] === "bottom" || e[0] === "top" || e[1] === "left" || e[1] === "right" ? [e[1], e[0]] : e, r = (e, r) => {
-	if (!r) return {
-		x: e.width / 2,
-		y: e.height / 2
-	};
-	let i = r.split(" ");
-	if (i.length === 1) return {
-		x: t(i[0], e.width),
-		y: t("50%", e.height)
-	};
-	if (i.length === 2) {
-		let r = n(i);
-		return {
-			x: t(r[0], e.width),
-			y: t(r[1], e.height)
-		};
-	} else if (i.length === 3) throw Error("transform-origin values with 3 fields not supported.");
-};
-//#endregion
-export { r as parse };