@pie-element/number-line 13.1.1 → 13.1.2-next.1

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

@@ -0,0 +1,188 @@
+import { Draggable as e } from "../../../draggable/index.js";
+import 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 = i("g")(({ $disabled: e, $selected: t, $correct: n }) => ({
+	"& .line-handle": {
+		stroke: u.primary(),
+		cursor: "pointer",
+		strokeWidth: "5px",
+		transition: `opacity ${d} linear, 
+    stroke-width ${d} linear,
+    stroke ${d} linear`
+	},
+	"&.dnd-kit-dragging": {
+		opacity: .6,
+		"& .line-handle": {
+			opacity: 1,
+			strokeWidth: "12px"
+		}
+	},
+	...e && {
+		cursor: "not-allowed",
+		opacity: .8
+	},
+	...t && { "& .line-handle": { stroke: u.primaryDark() } },
+	...n === !0 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.correct()
+	} },
+	...n === !1 && { "& .line-handle": {
+		cursor: "inherit",
+		stroke: u.incorrect()
+	} }
+})), p = class extends r.Component {
+	static propTypes = {
+		...n(),
+		empty: a.shape({
+			left: a.bool.isRequired,
+			right: a.bool.isRequired
+		}).isRequired,
+		position: a.shape({
+			left: a.number.isRequired,
+			right: a.number.isRequired
+		}).isRequired,
+		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,
+		y: 0,
+		disabled: !1,
+		correct: void 0
+	};
+	static contextTypes = {
+		xScale: a.func.isRequired,
+		snapValue: a.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			left: null,
+			right: null
+		};
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		if (e) {
+			let { position: t } = e;
+			this.setState({
+				left: t.left,
+				right: t.right
+			});
+		}
+	}
+	onDrag(e, t) {
+		let { domain: n } = this.props;
+		if (t >= n.min && t <= n.max) {
+			let n = {};
+			n[e] = t, this.setState(n);
+		}
+	}
+	onMove(e, t) {
+		let { position: n } = this.props, r = {
+			left: n.left,
+			right: n.right
+		};
+		r[e] = t, this.props.onMoveLine(r);
+	}
+	render() {
+		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 = (e) => {
+			if (Math.abs(e) < w / 10) {
+				this.props.onToggleSelect();
+				return;
+			}
+			let t = h.invert(e + h(0)), n = {
+				left: i.left + t,
+				right: i.right + t
+			};
+			c(n, this.props.position) || this.props.onMoveLine(n);
+		}, k = {
+			left: (a.min - i.left) / n * w,
+			right: (a.max - i.right) / n * w
+		}, A = {
+			interval: n,
+			selected: d,
+			disabled: p,
+			correct: m
+		};
+		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: 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: _,
+				...n,
+				children: /* @__PURE__ */ s("g", {
+					transform: `translate(${l}, ${u})`,
+					children: [
+						/* @__PURE__ */ o("rect", {
+							x: h(S),
+							width: Math.abs(h(C) - h(S)),
+							fill: "red",
+							fillOpacity: "0.0",
+							y: "-8",
+							height: 16,
+							onClick: D
+						}),
+						/* @__PURE__ */ o("line", {
+							className: "line-handle",
+							x1: h(S),
+							x2: h(C),
+							onClick: E,
+							...c
+						}),
+						/* @__PURE__ */ o(t, {
+							...A,
+							empty: r.left,
+							bounds: {
+								left: a.min - i.left,
+								right: a.max - i.left
+							},
+							position: i.left,
+							onDrag: b,
+							onMove: v,
+							onClick: D
+						}),
+						/* @__PURE__ */ o(t, {
+							...A,
+							empty: r.right,
+							bounds: {
+								left: a.min - i.right,
+								right: a.max - i.right
+							},
+							position: i.right,
+							onDrag: x,
+							onMove: y,
+							onClick: D
+						})
+					]
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { p as default };

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

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/point.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 Point extends React.Component {
+    static defaultProps: {
+        y: number;
+        selected: boolean;
+        empty: boolean;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static propTypes: {
+        interval: PropTypes.Validator<number>;
+        position: PropTypes.Validator<number>;
+        bounds: PropTypes.Requireable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        y: PropTypes.Requireable<number>;
+        onMove: PropTypes.Validator<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrag: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    render(): React.JSX.Element;
+}
+export default Point;

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

@@ -0,0 +1,127 @@
+import { Draggable as e } from "../../../draggable/index.js";
+import t from "react";
+import { styled as n } from "@mui/material/styles";
+import r from "prop-types";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { color as o } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/elements/point.tsx
+var s = "150ms", c = n("circle")(({ $selected: e, $disabled: t, $correct: n, $empty: r }) => ({
+	cursor: "pointer",
+	transition: `r ${s} linear,  
+  opacity ${s} linear, 
+  fill ${s} linear,
+  stroke ${s} linear`,
+	stroke: o.primary(),
+	fill: o.primary(),
+	"&.dnd-kit-dragging": {
+		opacity: .25,
+		r: "10px"
+	},
+	"&:hover": { stroke: o.primaryDark() },
+	...e && { stroke: o.primaryDark() },
+	...t && {
+		cursor: "not-allowed",
+		opacity: .8
+	},
+	...n === !0 && {
+		cursor: "inherit",
+		stroke: o.correct(),
+		fill: o.correct()
+	},
+	...n === !1 && {
+		cursor: "inherit",
+		stroke: o.incorrect(),
+		fill: o.incorrect()
+	},
+	...r && { fill: "white" }
+})), l = class extends t.Component {
+	static defaultProps = {
+		y: 0,
+		selected: !1,
+		empty: !1,
+		disabled: !1,
+		correct: void 0
+	};
+	static propTypes = {
+		interval: r.number.isRequired,
+		position: r.number.isRequired,
+		bounds: r.shape({
+			left: r.number.isRequired,
+			right: r.number.isRequired
+		}),
+		selected: r.bool,
+		disabled: r.bool,
+		correct: r.bool,
+		empty: r.bool,
+		y: r.number,
+		onMove: r.func.isRequired,
+		onClick: r.func,
+		onDrag: r.func,
+		onDragStop: r.func,
+		onDragStart: r.func
+	};
+	static contextTypes = {
+		xScale: r.func.isRequired,
+		snapValue: r.func.isRequired
+	};
+	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));
+		}, S = f ? {
+			left: f.left / u * b,
+			right: f.right / u * b
+		} : null;
+		return /* @__PURE__ */ i(e, {
+			id: `point-${m}-${d}`,
+			disabled: h,
+			grid: [b],
+			bounds: S,
+			onMouseDown: (e) => e.nativeEvent.preventDefault(),
+			onDragStart: () => {
+				n && n();
+			},
+			onDragMove: (e) => {
+				let t = x(e);
+				r && r(t);
+			},
+			onDragEnd: (e) => {
+				if (t && t(), Math.abs(e) < b / 10) {
+					s && s();
+					return;
+				}
+				l(x(e));
+			},
+			children: ({ setNodeRef: e, attributes: t, listeners: n, translateX: r, isDragging: s, onMouseDown: l }) => /* @__PURE__ */ a("g", {
+				ref: e,
+				onMouseDown: l,
+				transform: `translate(${r}, 0)`,
+				...t,
+				...n,
+				children: [/* @__PURE__ */ i("circle", {
+					r: "20",
+					strokeWidth: "3",
+					style: {
+						fill: "transparent",
+						pointerEvents: "visibleStroke"
+					},
+					cx: y(m),
+					cy: d,
+					stroke: p ? o.primaryDark() : "none"
+				}), /* @__PURE__ */ i(c, {
+					r: "5",
+					strokeWidth: "3",
+					cx: y(m),
+					cy: d,
+					$selected: p,
+					$disabled: h,
+					$correct: g,
+					$empty: _,
+					className: s ? "dnd-kit-dragging" : void 0
+				})]
+			})
+		});
+	}
+};
+//#endregion
+export { l as default };

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

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/ray.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 Ray extends React.Component {
+    static propTypes: {
+        width: PropTypes.Validator<number>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        direction: PropTypes.Requireable<string>;
+        y: PropTypes.Requireable<number>;
+        position: PropTypes.Validator<number>;
+        onMove: PropTypes.Validator<(...args: any[]) => any>;
+        onToggleSelect: PropTypes.Validator<(...args: any[]) => any>;
+        interval: PropTypes.Validator<number>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>;
+    };
+    static defaultProps: {
+        selected: boolean;
+        direction: string;
+        y: number;
+        disabled: boolean;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    drag(p: any): void;
+    stopDrag(): void;
+    render(): React.JSX.Element;
+}
+export default Ray;

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

@@ -0,0 +1,130 @@
+import 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 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 = s("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: i },
+		"& .arrow": {
+			fill: i,
+			strokeWidth: "1px",
+			stroke: i
+		}
+	},
+	...t === !0 && {
+		"& line": { stroke: n },
+		"& .arrow": {
+			fill: n,
+			strokeWidth: "1px",
+			stroke: n
+		}
+	},
+	...t === !1 && {
+		"& line": { stroke: r },
+		"& .arrow": {
+			fill: r,
+			strokeWidth: "1px",
+			stroke: r
+		}
+	}
+})), m = s(a)(({ $correct: e, $selected: t }) => ({
+	fill: f.primary(),
+	...e === !0 && {
+		fill: n,
+		"--arrow-color": n
+	},
+	...e === !1 && {
+		fill: r,
+		"--arrow-color": r
+	},
+	...t && {
+		fill: i,
+		"--arrow-color": i
+	}
+})), h = class extends o.Component {
+	static propTypes = {
+		...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,
+		direction: "positive",
+		y: 0,
+		disabled: !1
+	};
+	static contextTypes = {
+		xScale: c.func.isRequired,
+		snapValue: c.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: 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, ${o})`,
+			children: [
+				/* @__PURE__ */ l("line", {
+					onClick: c ? () => {} : this.props.onToggleSelect,
+					className: "line-handle",
+					x1: C,
+					x2: w
+				}),
+				/* @__PURE__ */ l(e, {
+					disabled: c,
+					correct: h,
+					selected: s,
+					empty: n,
+					interval: t,
+					bounds: {
+						left: a.min - r,
+						right: a.max - r
+					},
+					position: r,
+					onDrag: _,
+					onDragStop: v,
+					onMove: this.props.onMove,
+					onClick: this.props.onToggleSelect
+				}),
+				/* @__PURE__ */ l(m, {
+					x: T,
+					$correct: h,
+					$selected: s,
+					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) => number;
+    getChildContext(): {
+        xScale: any;
+        snapValue: (value: any) => number;
+    };
+    /**
+     * 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;