@pie-element/number-line 13.1.0-next.28 → 13.1.1-next.0

package/dist/delivery/number-line/graph/elements/ray.js

@@ -0,0 +1,130 @@
+import e from "../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js";
+import t from "./point.js";
+import { basePropTypes as n } from "./base.js";
+import { correct as r, incorrect as i, selected as a } from "../../colors.js";
+import o from "../arrow.js";
+import s from "react";
+import { styled as c } from "@mui/material/styles";
+import l from "prop-types";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { color as f } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/elements/ray.tsx
+var p = c("g")(({ $selected: e, $correct: t }) => ({
+	"& line": {
+		cursor: "pointer",
+		strokeWidth: "5px",
+		stroke: f.primary()
+	},
+	"& line, & .arrow": { transition: "stroke 150ms linear, fill 150ms linear" },
+	...e && {
+		"& line": { stroke: a },
+		"& .arrow": {
+			fill: a,
+			strokeWidth: "1px",
+			stroke: a
+		}
+	},
+	...t === !0 && {
+		"& line": { stroke: r },
+		"& .arrow": {
+			fill: r,
+			strokeWidth: "1px",
+			stroke: r
+		}
+	},
+	...t === !1 && {
+		"& line": { stroke: i },
+		"& .arrow": {
+			fill: i,
+			strokeWidth: "1px",
+			stroke: i
+		}
+	}
+})), m = c(o)(({ $correct: e, $selected: t }) => ({
+	fill: f.primary(),
+	...e === !0 && {
+		fill: r,
+		"--arrow-color": r
+	},
+	...e === !1 && {
+		fill: i,
+		"--arrow-color": i
+	},
+	...t && {
+		fill: a,
+		"--arrow-color": a
+	}
+})), h = class extends s.Component {
+	static propTypes = {
+		...n(),
+		width: l.number.isRequired,
+		selected: l.bool,
+		disabled: l.bool,
+		empty: l.bool,
+		direction: l.oneOf(["positive", "negative"]),
+		y: l.number,
+		position: l.number.isRequired,
+		onMove: l.func.isRequired,
+		onToggleSelect: l.func.isRequired
+	};
+	static defaultProps = {
+		selected: !1,
+		direction: "positive",
+		y: 0,
+		disabled: !1
+	};
+	static contextTypes = {
+		xScale: l.func.isRequired,
+		snapValue: l.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = { dragPosition: null };
+	}
+	drag(e) {
+		let { domain: t } = this.props;
+		e >= t.min && e <= t.max && this.setState({ dragPosition: e });
+	}
+	stopDrag() {
+		this.setState({ dragPosition: null });
+	}
+	render() {
+		let { interval: n, empty: r, position: i, direction: a, domain: o, y: s, selected: c, disabled: l, width: f, correct: h } = this.props, { xScale: g } = this.context, _ = this.drag.bind(this), v = this.stopDrag.bind(this), y = e(this.state.dragPosition) ? this.state.dragPosition : i, b = a === "positive", x = b ? y : o.min, S = b ? o.max : y, C = b ? g(x) : 8, w = b ? f - 8 : g(S), T = b ? f : 0, E = b ? "right" : "left";
+		return /* @__PURE__ */ d(p, {
+			$selected: c,
+			$correct: h,
+			transform: `translate(0, ${s})`,
+			children: [
+				/* @__PURE__ */ u("line", {
+					onClick: l ? () => {} : this.props.onToggleSelect,
+					className: "line-handle",
+					x1: C,
+					x2: w
+				}),
+				/* @__PURE__ */ u(t, {
+					disabled: l,
+					correct: h,
+					selected: c,
+					empty: r,
+					interval: n,
+					bounds: {
+						left: o.min - i,
+						right: o.max - i
+					},
+					position: i,
+					onDrag: _,
+					onDragStop: v,
+					onMove: this.props.onMove,
+					onClick: this.props.onToggleSelect
+				}),
+				/* @__PURE__ */ u(m, {
+					x: T,
+					$correct: h,
+					$selected: c,
+					direction: E
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { h as default };

package/dist/delivery/number-line/graph/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/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 NumberLineGraph extends React.Component {
+    static childContextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    static propTypes: {
+        domain: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>>;
+        ticks: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            minor: PropTypes.Requireable<number>;
+            major: PropTypes.Requireable<number>;
+        }>>>;
+        fraction: PropTypes.Requireable<boolean>;
+        width: PropTypes.Validator<number>;
+        height: PropTypes.Validator<number>;
+        onToggleElement: PropTypes.Validator<(...args: any[]) => any>;
+        onMoveElement: PropTypes.Validator<(...args: any[]) => any>;
+        onAddElement: PropTypes.Validator<(...args: any[]) => any>;
+        debug: PropTypes.Requireable<boolean>;
+        elements: PropTypes.Requireable<any[]>;
+        disabled: PropTypes.Requireable<boolean>;
+        onDeselectElements: PropTypes.Requireable<(...args: any[]) => any>;
+        arrows: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Requireable<boolean>;
+            right: PropTypes.Requireable<boolean>;
+        }>>;
+    };
+    static defaultProps: {
+        debug: boolean;
+    };
+    constructor(props: any);
+    xScaleFn(): any;
+    snapValueFn(): (value: any) => any;
+    getChildContext(): {
+        xScale: any;
+        snapValue: (value: any) => any;
+    };
+    /**
+     * Note: we use d3 click + pointer to give us domain values directly.
+     * Saves us having to calculate them ourselves from a MouseEvent.
+     */
+    onRectClick(event: any): void;
+    componentDidMount(): void;
+    addElement(x: any): void;
+    render(): React.JSX.Element;
+}
+export default NumberLineGraph;

package/dist/delivery/number-line/graph/index.js

@@ -0,0 +1,196 @@
+import { snapTo as e } from "./tick-utils.js";
+import t from "./elements/point.js";
+import n from "./elements/line.js";
+import r from "./arrow.js";
+import i from "./elements/ray.js";
+import a from "./line.js";
+import o from "./ticks.js";
+import s from "./stacks.js";
+import c from "../transitions/fade.js";
+import l, { createElement as u } from "react";
+import d from "prop-types";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { scaleLinear as m } from "d3-scale";
+import { pointer as h, select as g } from "d3-selection";
+import { color as _ } from "@pie-lib/render-ui";
+import { DndContext as v } from "@dnd-kit/core";
+import { TransitionGroup as y } from "react-transition-group";
+//#region src/delivery/number-line/graph/index.tsx
+var b = (e, t, n, r) => {
+	if (e === void 0 || t === void 0 || n === void 0) throw Error("missing min/max/width");
+	return m().domain([e, t]).range([r, n - r]);
+}, x = class extends l.Component {
+	static childContextTypes = {
+		xScale: d.func.isRequired,
+		snapValue: d.func.isRequired
+	};
+	static propTypes = {
+		domain: d.shape({
+			min: d.number.isRequired,
+			max: d.number.isRequired
+		}).isRequired,
+		ticks: d.shape({
+			minor: d.number,
+			major: d.number
+		}).isRequired,
+		fraction: d.bool,
+		width: d.number.isRequired,
+		height: d.number.isRequired,
+		onToggleElement: d.func.isRequired,
+		onMoveElement: d.func.isRequired,
+		onAddElement: d.func.isRequired,
+		debug: d.bool,
+		elements: d.array,
+		disabled: d.bool,
+		onDeselectElements: d.func,
+		arrows: d.shape({
+			left: d.bool,
+			right: d.bool
+		})
+	};
+	static defaultProps = { debug: !1 };
+	constructor(e) {
+		super(e), this.state = {};
+	}
+	xScaleFn() {
+		let { domain: e, width: t } = this.props, { max: n, min: r } = e || {}, i = 20;
+		return n && (i = n.toString().length * 4 + 15), b(r, n, t, i);
+	}
+	snapValueFn() {
+		let { domain: t, ticks: n } = this.props;
+		return e.bind(null, t.min, t.max, n.minor);
+	}
+	getChildContext() {
+		return {
+			xScale: this.xScaleFn(),
+			snapValue: this.snapValueFn()
+		};
+	}
+	onRectClick(e) {
+		let { elements: t, disabled: n } = this.props;
+		if (!n) if (t.some((e) => e.selected)) this.props.onDeselectElements();
+		else {
+			let t = h(e, this.rect), n = this.xScaleFn().invert(t[0]);
+			this.addElement(n);
+		}
+	}
+	componentDidMount() {
+		g(this.rect).on("click", this.onRectClick.bind(this));
+	}
+	addElement(e) {
+		let t = this.snapValueFn()(e);
+		this.props.onAddElement(t);
+	}
+	render() {
+		let { domain: e, width: l, ticks: d, height: m, onToggleElement: h, onMoveElement: g, disabled: b, fraction: x } = this.props, { arrows: S } = this.props;
+		S ||= {
+			left: !0,
+			right: !0
+		};
+		let { min: C, max: w } = e;
+		if (e.max <= e.min) return /* @__PURE__ */ p("div", { children: [
+			e.max,
+			" is less than or equal to ",
+			e.min
+		] });
+		{
+			let T = m - 30, E = new s(e), D = this.props.elements.map((e, r) => {
+				let a = E.add(e);
+				if (a === -1) throw Error("stack index is -1, cant add element");
+				let o = {
+					key: r,
+					y: T - a * 25,
+					selected: e.selected && !b,
+					interval: d.minor,
+					disabled: b,
+					correct: e.correct
+				}, s = h.bind(null, r, e), c = g.bind(null, r, e);
+				if (e.type === "line") {
+					let t = {
+						left: e.leftPoint === "empty",
+						right: e.rightPoint === "empty"
+					};
+					return /* @__PURE__ */ u(n, {
+						...o,
+						domain: {
+							min: C,
+							max: w
+						},
+						onMoveLine: c,
+						onToggleSelect: s,
+						position: e.position,
+						empty: t,
+						key: r
+					});
+				} else if (e.type === "point") {
+					let n = {
+						left: C - e.position,
+						right: w - e.position
+					};
+					return /* @__PURE__ */ u(t, {
+						...o,
+						empty: e.pointType === "empty",
+						position: e.position,
+						bounds: n,
+						onClick: s,
+						onMove: c,
+						key: r
+					});
+				} else if (e.type === "ray") return /* @__PURE__ */ u(i, {
+					...o,
+					domain: {
+						min: C,
+						max: w
+					},
+					direction: e.direction,
+					position: e.position,
+					onMove: c,
+					onToggleSelect: s,
+					width: l,
+					empty: e.pointType === "empty",
+					key: r
+				});
+			});
+			return /* @__PURE__ */ f(v, { children: /* @__PURE__ */ f("div", {
+				style: { display: "inline-block" },
+				children: /* @__PURE__ */ p("svg", {
+					width: l,
+					height: x ? m + 20 : m,
+					children: [
+						!1,
+						/* @__PURE__ */ f(a, {
+							y: T,
+							width: l
+						}),
+						S.left && /* @__PURE__ */ f(r, { y: T }),
+						S.right && /* @__PURE__ */ f(r, {
+							x: l,
+							y: T,
+							direction: "right"
+						}),
+						/* @__PURE__ */ f(o, {
+							y: T,
+							domain: e,
+							width: l,
+							ticks: d,
+							fraction: x
+						}),
+						/* @__PURE__ */ f("rect", {
+							ref: (e) => this.rect = e,
+							fill: _.primary(),
+							fillOpacity: "0.0",
+							width: l,
+							height: m
+						}),
+						/* @__PURE__ */ f(y, {
+							component: "g",
+							children: D.map((e, t) => /* @__PURE__ */ f(c, { children: e }, t))
+						})
+					]
+				})
+			}) });
+		}
+	}
+};
+//#endregion
+export { x as default };

package/dist/delivery/number-line/graph/line.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/line.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 function Line({ y, width, classes }: {
+    y: any;
+    width: any;
+    classes: any;
+}): React.JSX.Element;
+export declare namespace Line {
+    var propTypes: {
+        y: PropTypes.Validator<number>;
+        width: PropTypes.Validator<number>;
+        classes: PropTypes.Validator<object>;
+    };
+}
+declare const _default: React.ComponentType<Pick<Omit<{
+    y: any;
+    width: any;
+    classes: any;
+}, "classes"> & {
+    classes?: Partial<{
+        root: string;
+    }> | undefined;
+    innerRef?: React.RefObject<any> | ((instance: any) => void);
+}, "classes" | "innerRef"> & Pick<PropTypes.InferProps<{
+    y: PropTypes.Validator<number>;
+    width: PropTypes.Validator<number>;
+    classes: PropTypes.Validator<object>;
+}>, "y" | "width"> & Pick<Omit<{
+    y: any;
+    width: any;
+    classes: any;
+}, "classes"> & {
+    classes?: Partial<{
+        root: string;
+    }> | undefined;
+    innerRef?: React.RefObject<any> | ((instance: any) => void);
+}, "innerRef">>;
+export default _default;

package/dist/delivery/number-line/graph/line.js

@@ -0,0 +1,27 @@
+import "react";
+import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import { color as n } from "@pie-lib/render-ui";
+import r from "react-jss";
+//#region src/delivery/number-line/graph/line.tsx
+var i = { root: {
+	strokeWidth: 2,
+	stroke: n.primary()
+} };
+function a({ y: e, width: n, classes: r }) {
+	return /* @__PURE__ */ t("line", {
+		x1: 0,
+		y1: e,
+		x2: n,
+		y2: e,
+		className: r.root
+	});
+}
+a.propTypes = {
+	y: e.number.isRequired,
+	width: e.number.isRequired,
+	classes: e.object.isRequired
+};
+var o = r(i)(a);
+//#endregion
+export { o as default };

package/dist/delivery/number-line/graph/stacks.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/stacks.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.
+ */
+export default function Stacks(domain: any): void;
+export declare function Stack(domain: any): void;

package/dist/delivery/number-line/graph/stacks.js

@@ -0,0 +1,40 @@
+//#region src/delivery/number-line/graph/stacks.ts
+function e(e) {
+	let n = [new t(e)];
+	this.add = function(r) {
+		let i = n.find((e) => e.add(r));
+		return n.indexOf(i) === -1 && (i = new t(e), n.push(i), i.add(r)), n.indexOf(i);
+	};
+}
+function t(e) {
+	let t = [];
+	this.add = function(i) {
+		let a = r(i);
+		return a.left < e.min || a.right > e.max || t.some((e) => n(e, a)) ? !1 : (t.push(i), !0);
+	}, this.elements = function() {
+		return t;
+	};
+	let n = (e, t) => {
+		let n = r(e), i = t.left < n.left && t.right < n.left, a = t.left > n.right && t.right > n.right;
+		return !(i || a);
+	}, r = (t) => {
+		let { type: n, position: r } = t;
+		switch (n) {
+			case "point": return {
+				left: r,
+				right: r
+			};
+			case "line": return r;
+			case "ray": return t.direction === "positive" ? {
+				left: r,
+				right: e.max
+			} : {
+				left: e.min,
+				right: r
+			};
+			default: return null;
+		}
+	};
+}
+//#endregion
+export { e as default };

package/dist/delivery/number-line/graph/tick-utils.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/tick-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.
+ */
+export declare const decimalTickValues: number[];
+export declare const fractionTickValues: string[];
+export declare const labelMultiplier: {
+    1: number[];
+    2: number[];
+    3: number[];
+    4: number[];
+    5: number[];
+    6: number[];
+    7: number[];
+    8: number[];
+    9: number[];
+    10: number[];
+    12: number[];
+    15: number[];
+    16: number[];
+    20: number[];
+    25: number[];
+    32: number[];
+    50: number[];
+    64: number[];
+    100: number[];
+    1000: number[];
+};
+export declare const fractionRange: (start: any, end: any, interval: any) => any[];
+export declare const zbrErrorMessage: (start: any, end: any) => string;
+export declare const zeroBasedRange: (start: any, end: any, interval: any) => any[];
+/**
+ * the lodash range was causing too much variance in the rounding errors
+ * such that it was hard to round the numbers.
+ * This is a more simplistic version but makes rounding work.
+ */
+export declare const simpleRange: (start: any, end: any, interval: any) => any;
+export declare const closeTo: (a: any, b: any, precision: any) => boolean;
+export declare const getMinorLimits: (domain: any, width: any) => {
+    min: any;
+    max: any;
+};
+export declare const isMultiple: (multiple: any, src: any) => any;
+/**
+ * Accepts a fraction object {n,d,s} or number.
+ * @param {*} v
+ * @return mathjs.fraction
+ */
+export declare const fraction: (v: any) => any;
+export declare const normalizeTicks: (domain: any, width: any, ticks: any, opts: any) => {
+    minor: any;
+    major: any;
+};
+/**
+ * Build ticks as an array of mathjs Fractions
+ */
+export declare const buildTickDataAsFractions: (domain: any, width: any, ticks: any, opts: any) => any;
+export declare const generateMinorValues: (minorLimits: any) => {
+    fraction: never[];
+    decimal: never[];
+};
+export declare const generateMajorValuesForMinor: (minor: any, domain: any, width: any) => {
+    decimal: never[];
+    fraction: never[];
+};
+export declare const buildTickData: (domain: any, width: any, ticks: any, opts: any) => any;
+export declare const fractionSnapTo: (min: any, max: any, interval: any, value: any) => any;
+export declare const snapTo: (min: any, max: any, interval: any, value: any) => any;
+export declare const snapElements: (domain: any, ticks: any, elements: any) => any;