@pie-element/number-line 13.1.2-next.0 → 13.1.2-next.10

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

@@ -1,15 +1,14 @@
-import e from "../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import t from "../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isNumber.js";
-import { Draggable as n } from "../../../draggable/index.js";
-import r from "./point.js";
-import { basePropTypes as i } from "./base.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 { Draggable as e } from "../../../draggable/index.js";
+import { Point as t } from "./point.js";
+import { basePropTypes as n } from "./base.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";
+import { isEqual as c, isNumber as l } from "@pie-element/shared-lodash";
 import { color as u } from "@pie-lib/render-ui";
 //#region src/delivery/number-line/graph/elements/line.tsx
-var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
+var d = "150ms", f = i("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 	"& .line-handle": {
 		stroke: u.primary(),
 		cursor: "pointer",
@@ -38,25 +37,25 @@ var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 		cursor: "inherit",
 		stroke: u.incorrect()
 	} }
-})), p = class extends a.Component {
+})), p = class extends r.Component {
 	static propTypes = {
-		...i(),
-		empty: s.shape({
-			left: s.bool.isRequired,
-			right: s.bool.isRequired
+		...n(),
+		empty: a.shape({
+			left: a.bool.isRequired,
+			right: a.bool.isRequired
 		}).isRequired,
-		position: s.shape({
-			left: s.number.isRequired,
-			right: s.number.isRequired
+		position: a.shape({
+			left: a.number.isRequired,
+			right: a.number.isRequired
 		}).isRequired,
-		y: s.number,
-		selected: s.bool,
-		disabled: s.bool,
-		correct: s.bool,
-		onMoveLine: s.func.isRequired,
-		onToggleSelect: s.func.isRequired,
-		onDragStart: s.func,
-		onDragStop: s.func
+		y: a.number,
+		selected: a.bool,
+		disabled: a.bool,
+		correct: a.bool,
+		onMoveLine: a.func.isRequired,
+		onToggleSelect: a.func.isRequired,
+		onDragStart: a.func,
+		onDragStop: a.func
 	};
 	static defaultProps = {
 		selected: !1,
@@ -65,8 +64,8 @@ var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 		correct: void 0
 	};
 	static contextTypes = {
-		xScale: s.func.isRequired,
-		snapValue: s.func.isRequired
+		xScale: a.func.isRequired,
+		snapValue: a.func.isRequired
 	};
 	constructor(e) {
 		super(e), this.state = {
@@ -98,48 +97,48 @@ var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 		r[e] = t, this.props.onMoveLine(r);
 	}
 	render() {
-		let { interval: i, empty: a, position: o, domain: s, y: u, selected: d, disabled: p, correct: m } = this.props, { xScale: h } = this.context, { onDrag: g, onMove: _ } = this, v = _.bind(this, "left"), y = _.bind(this, "right"), b = g.bind(this, "left"), x = g.bind(this, "right"), S = t(this.state.left) ? this.state.left : o.left, C = t(this.state.right) ? this.state.right : o.right, w = h(i) - h(0), T = (e) => e.nativeEvent.preventDefault(), E = () => {
+		let { interval: n, empty: r, position: i, domain: a, y: u, selected: d, disabled: p, correct: m } = this.props, { xScale: h } = this.context, { onDrag: g, onMove: _ } = this, v = _.bind(this, "left"), y = _.bind(this, "right"), b = g.bind(this, "left"), x = g.bind(this, "right"), S = l(this.state.left) ? this.state.left : i.left, C = l(this.state.right) ? this.state.right : i.right, w = h(n) - h(0), T = (e) => e.nativeEvent.preventDefault(), E = () => {
 			this.props.onToggleSelect();
 		}, D = () => {
 			this.props.onToggleSelect();
-		}, O = (t) => {
-			if (Math.abs(t) < w / 10) {
+		}, O = (e) => {
+			if (Math.abs(e) < w / 10) {
 				this.props.onToggleSelect();
 				return;
 			}
-			let n = h.invert(t + h(0)), r = {
-				left: o.left + n,
-				right: o.right + n
+			let t = h.invert(e + h(0)), n = {
+				left: i.left + t,
+				right: i.right + t
 			};
-			e(r, this.props.position) || this.props.onMoveLine(r);
+			c(n, this.props.position) || this.props.onMoveLine(n);
 		}, k = {
-			left: (s.min - o.left) / i * w,
-			right: (s.max - o.right) / i * w
+			left: (a.min - i.left) / n * w,
+			right: (a.max - i.right) / n * w
 		}, A = {
-			interval: i,
+			interval: n,
 			selected: d,
 			disabled: p,
 			correct: m
 		};
-		return /* @__PURE__ */ c(n, {
-			id: `line-${o.left}-${o.right}-${u}`,
+		return /* @__PURE__ */ o(e, {
+			id: `line-${i.left}-${i.right}-${u}`,
 			disabled: p,
 			grid: [w],
 			bounds: k,
 			onMouseDown: T,
 			onDragEnd: O,
-			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: i, isDragging: g, onMouseDown: _ }) => /* @__PURE__ */ c(f, {
+			children: ({ setNodeRef: e, attributes: n, listeners: c, translateX: l, isDragging: g, onMouseDown: _ }) => /* @__PURE__ */ o(f, {
 				ref: e,
 				$disabled: p,
 				$selected: d,
 				$correct: m,
 				className: g ? "dnd-kit-dragging" : void 0,
 				onMouseDown: _,
-				...t,
-				children: /* @__PURE__ */ l("g", {
-					transform: `translate(${i}, ${u})`,
+				...n,
+				children: /* @__PURE__ */ s("g", {
+					transform: `translate(${l}, ${u})`,
 					children: [
-						/* @__PURE__ */ c("rect", {
+						/* @__PURE__ */ o("rect", {
 							x: h(S),
 							width: Math.abs(h(C) - h(S)),
 							fill: "red",
@@ -148,33 +147,33 @@ var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 							height: 16,
 							onClick: D
 						}),
-						/* @__PURE__ */ c("line", {
+						/* @__PURE__ */ o("line", {
 							className: "line-handle",
 							x1: h(S),
 							x2: h(C),
 							onClick: E,
-							...n
+							...c
 						}),
-						/* @__PURE__ */ c(r, {
+						/* @__PURE__ */ o(t, {
 							...A,
-							empty: a.left,
+							empty: r.left,
 							bounds: {
-								left: s.min - o.left,
-								right: s.max - o.left
+								left: a.min - i.left,
+								right: a.max - i.left
 							},
-							position: o.left,
+							position: i.left,
 							onDrag: b,
 							onMove: v,
 							onClick: D
 						}),
-						/* @__PURE__ */ c(r, {
+						/* @__PURE__ */ o(t, {
 							...A,
-							empty: a.right,
+							empty: r.right,
 							bounds: {
-								left: s.min - o.right,
-								right: s.max - o.right
+								left: a.min - i.right,
+								right: a.max - i.right
 							},
-							position: o.right,
+							position: i.right,
 							onDrag: x,
 							onMove: y,
 							onClick: D
@@ -186,4 +185,4 @@ var d = "150ms", f = o("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
 	}
 };
 //#endregion
-export { p as default };
+export { p as Line, p as default };

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

@@ -66,8 +66,8 @@ var s = "150ms", c = n("circle")(({ $selected: e, $disabled: t, $correct: n, $em
 	};
 	render() {
 		let { onDragStop: t, onDragStart: n, onDrag: r, onClick: s, onMove: l, interval: u, y: d, bounds: f, selected: p, position: m, disabled: h, correct: g, empty: _ } = this.props, { snapValue: v, xScale: y } = this.context, b = y(u) - y(0), x = (e) => {
-			let t = e + y(0);
-			return v(m + y.invert(t));
+			let t = e + y(0), n = y.invert(t);
+			return v(m + n);
 		}, S = f ? {
 			left: f.left / u * b,
 			right: f.right / u * b
@@ -90,7 +90,8 @@ var s = "150ms", c = n("circle")(({ $selected: e, $disabled: t, $correct: n, $em
 					s && s();
 					return;
 				}
-				l(x(e));
+				let n = x(e);
+				l(n);
 			},
 			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: r, isDragging: s, onMouseDown: l }) => /* @__PURE__ */ a("g", {
 				ref: e,
@@ -124,4 +125,4 @@ var s = "150ms", c = n("circle")(({ $selected: e, $disabled: t, $correct: n, $em
 	}
 };
 //#endregion
-export { l as default };
+export { l as Point, l as default };

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

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

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

@@ -42,10 +42,10 @@ export declare class NumberLineGraph extends React.Component {
     };
     constructor(props: any);
     xScaleFn(): any;
-    snapValueFn(): (value: any) => any;
+    snapValueFn(): (value: any) => number;
     getChildContext(): {
         xScale: any;
-        snapValue: (value: any) => any;
+        snapValue: (value: any) => number;
     };
     /**
      * Note: we use d3 click + pointer to give us domain values directly.

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

@@ -1,10 +1,10 @@
 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 { Point as t } from "./elements/point.js";
+import { Line as n } from "./elements/line.js";
+import { Arrow as r } from "./arrow.js";
+import { Ray as i } from "./elements/ray.js";
 import a from "./line.js";
-import o from "./ticks.js";
+import { Ticks as o } from "./ticks.js";
 import s from "./stacks.js";
 import c from "../transitions/fade.js";
 import l, { createElement as u } from "react";
@@ -193,4 +193,4 @@ var b = (e, t, n, r) => {
 	}
 };
 //#endregion
-export { x as default };
+export { x as NumberLineGraph, x as default };

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

@@ -24,4 +24,4 @@ a.propTypes = {
 };
 var o = r(i)(a);
 //#endregion
-export { o as default };
+export { a as Line, o as default };

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

@@ -37,4 +37,4 @@ function t(e) {
 	};
 }
 //#endregion
-export { e as default };
+export { t as Stack, e as default };

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

@@ -6,6 +6,7 @@
  * Manual edits will be overwritten on next sync.
  * To make changes, edit the upstream JavaScript file and run sync again.
  */
+import * as math from 'mathjs';
 export declare const decimalTickValues: number[];
 export declare const fractionTickValues: string[];
 export declare const labelMultiplier: {
@@ -38,27 +39,30 @@ export declare const zeroBasedRange: (start: any, end: any, interval: any) => an
  * 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 simpleRange: (start: any, end: any, interval: any) => (string | math.MathType)[];
 export declare const closeTo: (a: any, b: any, precision: any) => boolean;
 export declare const getMinorLimits: (domain: any, width: any) => {
-    min: any;
-    max: any;
+    min: number & (number | math.MathCollection);
+    max: number;
 };
-export declare const isMultiple: (multiple: any, src: any) => any;
+export declare const isMultiple: (multiple: any, src: any) => boolean | math.MathCollection;
 /**
  * Accepts a fraction object {n,d,s} or number.
  * @param {*} v
  * @return mathjs.fraction
  */
-export declare const fraction: (v: any) => any;
+export declare const fraction: (v: any) => math.Fraction | undefined;
 export declare const normalizeTicks: (domain: any, width: any, ticks: any, opts: any) => {
-    minor: any;
     major: any;
+    minor: 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 buildTickDataAsFractions: (domain: any, width: any, ticks: any, opts: any) => {
+    x: string | math.MathType;
+    type: string;
+}[];
 export declare const generateMinorValues: (minorLimits: any) => {
     fraction: never[];
     decimal: never[];
@@ -67,7 +71,10 @@ export declare const generateMajorValuesForMinor: (minor: any, domain: any, widt
     decimal: never[];
     fraction: never[];
 };
-export declare const buildTickData: (domain: any, width: any, ticks: any, opts: any) => any;
+export declare const buildTickData: (domain: any, width: any, ticks: any, opts: any) => {
+    x: string | math.MathType;
+    type: string;
+}[];
 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 snapTo: (min: any, max: any, interval: any, value: any) => number;
 export declare const snapElements: (domain: any, ticks: any, elements: any) => any;