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

package/dist/delivery/data-converter.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/data-converter.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 lineIsSwitched: (line: any) => boolean;
+export declare const switchGraphLine: (line: any) => any;
+export declare const switchPosition: (p: any) => {
+    left: any;
+    right: any;
+};
+export declare const toSessionFormat: (gf: any) => {
+    type: string;
+    pointType: any;
+    domainPosition: any;
+    size?: undefined;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    size: number;
+    domainPosition: any;
+    leftPoint: any;
+    rightPoint: any;
+    pointType?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    domainPosition: any;
+    pointType: any;
+    direction: any;
+    size?: undefined;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+} | undefined;
+export declare const toGraphFormat: (sf: any) => {
+    type: string;
+    pointType: any;
+    position: any;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    position: {
+        left: any;
+        right: any;
+    };
+    leftPoint: any;
+    rightPoint: any;
+    pointType?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    position: any;
+    pointType: any;
+    direction: any;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+} | undefined;

package/dist/delivery/data-converter.js

@@ -0,0 +1,70 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
+//#region src/delivery/data-converter.ts
+var t = /* @__PURE__ */ e({
+	lineIsSwitched: () => n,
+	switchGraphLine: () => r,
+	switchPosition: () => i,
+	toGraphFormat: () => o,
+	toSessionFormat: () => a
+}), n = (e) => {
+	let { position: t } = e;
+	return t.left > t.right;
+}, r = (e) => {
+	let { position: t } = e;
+	if (t.left < t.right) return e;
+	let { leftPoint: n, rightPoint: r } = e;
+	return {
+		leftPoint: r,
+		rightPoint: n,
+		position: i(t),
+		type: "line"
+	};
+}, i = (e) => {
+	let { left: t, right: n } = e;
+	return {
+		left: n,
+		right: t
+	};
+}, a = (e) => {
+	if (e.type === "point") return {
+		type: "point",
+		pointType: e.pointType,
+		domainPosition: e.position
+	};
+	if (e.type === "line") return {
+		type: "line",
+		size: e.position.right - e.position.left,
+		domainPosition: e.position.left,
+		leftPoint: e.leftPoint,
+		rightPoint: e.rightPoint
+	};
+	if (e.type === "ray") return {
+		type: "ray",
+		domainPosition: e.position,
+		pointType: e.pointType,
+		direction: e.direction
+	};
+}, o = (e) => {
+	if (e.type === "point") return {
+		type: "point",
+		pointType: e.pointType,
+		position: e.domainPosition
+	};
+	if (e.type === "line") return {
+		type: "line",
+		position: {
+			left: e.domainPosition,
+			right: e.domainPosition + e.size
+		},
+		leftPoint: e.leftPoint,
+		rightPoint: e.rightPoint
+	};
+	if (e.type === "ray") return {
+		type: "ray",
+		position: e.domainPosition,
+		pointType: e.pointType,
+		direction: e.direction
+	};
+};
+//#endregion
+export { t as data_converter_exports, n as lineIsSwitched, r as switchGraphLine, o as toGraphFormat, a as toSessionFormat };

package/dist/delivery/draggable/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/draggable/index.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.
+ */
+/**
+ * Shared dnd-kit wrapper for Line + Point.
+ *
+ * Props:
+ *  - id: string (unique)
+ *  - disabled: boolean
+ *  - grid: [stepX] (like grid={[is]})
+ *  - bounds: { left: number, right: number } in px (like scaledLineBounds)
+ *  - onMouseDown: (event) => void
+ *  - onDragStart?: () => void
+ *  - onDragMove?: (deltaX: number) => void      // snapped + clamped
+ *  - onDragEnd?: (deltaX: number) => void       // snapped + clamped
+ *  - children: ({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown }) => ReactNode
+ */
+export declare function Draggable({ id, disabled, grid, bounds, onMouseDown, onDragStart, onDragMove, onDragEnd, children, }: {
+    id: any;
+    disabled: any;
+    grid: any;
+    bounds: any;
+    onMouseDown: any;
+    onDragStart: any;
+    onDragMove: any;
+    onDragEnd: any;
+    children: any;
+}): any;

package/dist/delivery/draggable/index.js

@@ -0,0 +1,39 @@
+import { useDndMonitor as e, useDraggable as t } from "@dnd-kit/core";
+//#region src/delivery/draggable/index.ts
+function n({ id: n, disabled: r, grid: i, bounds: a, onMouseDown: o, onDragStart: s, onDragMove: c, onDragEnd: l, children: u }) {
+	let { attributes: d, listeners: f, setNodeRef: p, transform: m } = t({
+		id: n,
+		disabled: r
+	}), h = i && i[0] ? i[0] : null, g = m?.x ?? 0;
+	h && (g = Math.round(g / h) * h), a && (typeof a.left == "number" && (g = Math.max(a.left, g)), typeof a.right == "number" && (g = Math.min(a.right, g)));
+	let _ = g, v = !!m, y = (e) => {
+		let t = e;
+		return h && (t = Math.round(t / h) * h), a && (typeof a.left == "number" && (t = Math.max(a.left, t)), typeof a.right == "number" && (t = Math.min(a.right, t))), t;
+	};
+	return e({
+		onDragStart(e) {
+			e.active.id !== n || r || s?.();
+		},
+		onDragMove(e) {
+			if (e.active.id !== n || r) return;
+			let t = e.delta.x || 0;
+			c?.(y(t));
+		},
+		onDragEnd(e) {
+			if (e.active.id !== n || r) return;
+			let t = e.delta.x || 0;
+			l?.(y(t));
+		}
+	}), u({
+		setNodeRef: p,
+		attributes: d,
+		listeners: f,
+		translateX: _,
+		isDragging: v,
+		onMouseDown: (e) => {
+			e.nativeEvent.preventDefault(), o?.(e);
+		}
+	});
+}
+//#endregion
+export { n as Draggable };

package/dist/delivery/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/index.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 * as dataConverter from './data-converter.js';
+import * as pointChooser from './number-line/point-chooser/index.js';
+import * as tickUtils from './number-line/graph/tick-utils.js';
+import Graph from './number-line/graph/index.js';
+import NumberLineComponent from './number-line/index.js';
+export { Graph, NumberLineComponent, tickUtils, dataConverter, pointChooser };
+export default class NumberLine extends HTMLElement {
+    constructor();
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    connectedCallback(): void;
+    isComplete(): boolean;
+    dispatch(type: any): void;
+    dispatchSessionChanged(): void;
+    addElement(data: any): void;
+    moveElement(index: any, el: any, position: any): void;
+    deleteElements(indices: any): void;
+    undoElement(): void;
+    clearElements(): void;
+    _applyInitialElements(): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,109 @@
+import { data_converter_exports as e, lineIsSwitched as t, switchGraphLine as n, toGraphFormat as r, toSessionFormat as i } from "./data-converter.js";
+import { point_chooser_exports as a } from "./number-line/point-chooser/index.js";
+import o from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import { tick_utils_exports as s } from "./number-line/graph/tick-utils.js";
+import c from "./number-line/graph/index.js";
+import l from "./number-line/index.js";
+import u from "react";
+import { createRoot as d } from "react-dom/client";
+import { renderMath as f } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var p = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), f(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0,
+					characterData: !1
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(() => {
+			this._scheduleMathRender();
+		}), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0,
+			characterData: !1
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	set model(e) {
+		this._model = e, this._applyInitialElements(), this._render(), this.dispatch("model-set");
+	}
+	set session(e) {
+		this._session = e, this._applyInitialElements(), this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	connectedCallback() {
+		this._initMathObserver(), this._render();
+	}
+	isComplete() {
+		return this._session ? (this._session.answer || []).length > 0 : !1;
+	}
+	dispatch(e) {
+		this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			detail: { complete: this.isComplete() }
+		}));
+	}
+	dispatchSessionChanged() {
+		this.dispatch("session-changed");
+	}
+	addElement(e) {
+		this._session && (this._session.answer = this._session.answer || [], this._session.answer.push(i(e)), this.dispatchSessionChanged(), this._render());
+	}
+	moveElement(e, r, a) {
+		if (!this._session.answer[e]) throw Error("cant find element at index: ", e);
+		if (r.type === "line" && a.left === a.right) {
+			this._render();
+			return;
+		}
+		r.position = a;
+		let o = r.type === "line" && t(r) ? n(r) : r;
+		this._session.answer.splice(e, 1, i(o)), this.dispatchSessionChanged(), this._render();
+	}
+	deleteElements(e) {
+		this._session.answer = this._session.answer.filter((t, n) => !e.some((e) => e === n)), this.dispatchSessionChanged(), this._render();
+	}
+	undoElement() {
+		this._session.answer.pop(), this.dispatchSessionChanged(), this._render();
+	}
+	clearElements() {
+		this._session.answer = [], this.dispatchSessionChanged(), this._render();
+	}
+	_applyInitialElements() {
+		this._model && this._model.graph && this._model.graph.initialElements && this._session && (!this._session.answer || !this._session.answer.length) && (this._session.answer = o(this._model.graph.initialElements));
+	}
+	_render() {
+		if (this._model && this._session) {
+			this._session.answer || this._applyInitialElements();
+			let e = (this._session.answer || []).map(r), t = o(this._model);
+			t.correctResponse = t.correctResponse && t.correctResponse.map(r);
+			let n = {
+				model: t,
+				answer: e,
+				onAddElement: this.addElement.bind(this),
+				onMoveElement: this.moveElement.bind(this),
+				onDeleteElements: this.deleteElements.bind(this),
+				onUndoElement: this.undoElement.bind(this),
+				onClearElements: this.clearElements.bind(this)
+			}, i = u.createElement(l, n);
+			this._root ||= d(this), this._root.render(i), this._scheduleMathRender();
+		}
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { c as Graph, l as NumberLineComponent, e as dataConverter, p as default, a as pointChooser, s as tickUtils };

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

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/colors.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 selected: any;
+export declare const correct: any;
+export declare const incorrect: any;

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

@@ -0,0 +1,5 @@
+import { color as e } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/colors.ts
+var t = e.primaryDark(), n = e.correct(), r = e.incorrect();
+//#endregion
+export { n as correct, r as incorrect, t as selected };

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

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/feedback.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 PropTypes from 'prop-types';
+import React from 'react';
+declare const Feedback: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        width: PropTypes.Requireable<number>;
+        message: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+    };
+};
+export default Feedback;

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

@@ -0,0 +1,57 @@
+import { useRef as e } from "react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { color as a } from "@pie-lib/render-ui";
+import { CSSTransition as o, TransitionGroup as s } from "react-transition-group";
+import { Correct as c, Incorrect as l, NothingSubmitted as u, PartiallyCorrect as d, ShowRationale as f } from "@pie-lib/icons";
+//#region src/delivery/number-line/feedback.tsx
+var p = (e) => {
+	switch (e) {
+		case "unanswered": return u;
+		case "correct": return c;
+		case "incorrect": return l;
+		case "partial": return d;
+		case "info": return f;
+		default: return;
+	}
+}, m = t("div")(({ $type: e }) => ({
+	marginTop: "10px",
+	backgroundColor: "#dddddd",
+	padding: "10px",
+	display: "flex",
+	alignItems: "center",
+	...e === "correct" && { backgroundColor: a.correct() },
+	...e === "incorrect" && { backgroundColor: a.incorrect() },
+	"& svg": { height: "30px" },
+	"& h1": {
+		padding: "0px",
+		margin: "0px"
+	}
+})), h = t("span")({
+	paddingLeft: "5px",
+	userSelect: "none"
+}), g = (t) => {
+	let { type: n, width: a, message: c } = t, l = p(n), u = e(null);
+	return /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(o, {
+		classNames: "fb",
+		timeout: 300,
+		nodeRef: u,
+		children: /* @__PURE__ */ i(m, {
+			ref: u,
+			$type: n,
+			style: { width: a },
+			children: [/* @__PURE__ */ r(l, {
+				iconSet: "emoji",
+				shape: "square"
+			}), /* @__PURE__ */ r(h, { dangerouslySetInnerHTML: { __html: c } })]
+		}, "panel")
+	}, "fb") });
+};
+g.propTypes = {
+	width: n.number,
+	message: n.string,
+	type: n.string
+};
+//#endregion
+export { g as default };

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

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/arrow.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 Arrow({ x, y, direction, className }: {
+    x: any;
+    y: any;
+    direction: any;
+    className: any;
+}): React.JSX.Element;
+export declare namespace Arrow {
+    var propTypes: {
+        y: PropTypes.Requireable<number>;
+        x: PropTypes.Requireable<number>;
+        direction: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        y: number;
+        x: number;
+        direction: string;
+    };
+}
+export default Arrow;

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

@@ -0,0 +1,27 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+//#region src/delivery/number-line/graph/arrow.tsx
+var i = e("path")({ fill: r.primary() });
+function a({ x: e, y: t, direction: r, className: a }) {
+	let o = `translate(${e || 0},${t})`;
+	return r && r === "right" && (o += " rotate(180)"), /* @__PURE__ */ n(i, {
+		d: "m 0,0 8,-5 0,10 -8,-5",
+		transform: o,
+		className: a
+	});
+}
+a.propTypes = {
+	y: t.number,
+	x: t.number,
+	direction: t.oneOf(["left", "right"]),
+	className: t.string
+}, a.defaultProps = {
+	y: 0,
+	x: 0,
+	direction: "left"
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/base.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 PropTypes from 'prop-types';
+export declare const basePropTypes: () => {
+    interval: PropTypes.Validator<number>;
+    domain: PropTypes.Requireable<PropTypes.InferProps<{
+        min: PropTypes.Validator<number>;
+        max: PropTypes.Validator<number>;
+    }>>;
+};

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

@@ -0,0 +1,11 @@
+import e from "prop-types";
+//#region src/delivery/number-line/graph/elements/base.ts
+var t = () => ({
+	interval: e.number.isRequired,
+	domain: e.shape({
+		min: e.number.isRequired,
+		max: e.number.isRequired
+	})
+});
+//#endregion
+export { t as basePropTypes };

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

@@ -0,0 +1,33 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/builder.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 function buildElementModel(position: any, elementType: any, domain: any, interval: any): {
+    position: any;
+    type: string;
+    pointType: string;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    leftPoint: string;
+    rightPoint: string;
+    position: {
+        left: any;
+        right: any;
+    };
+    pointType?: undefined;
+    direction?: undefined;
+} | {
+    type: string;
+    direction: string;
+    pointType: string;
+    position: any;
+    leftPoint?: undefined;
+    rightPoint?: undefined;
+} | undefined;

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

@@ -0,0 +1,30 @@
+//#region src/delivery/number-line/graph/elements/builder.ts
+function e(e, t, n, r) {
+	if (t.startsWith("p")) return {
+		position: e,
+		type: "point",
+		pointType: t.endsWith("e") ? "empty" : "full"
+	};
+	if (t.startsWith("l")) {
+		let i = e + r <= n.max ? e : e - r, a = i + r;
+		return {
+			type: "line",
+			leftPoint: t.charAt(1) === "e" ? "empty" : "full",
+			rightPoint: t.charAt(2) === "e" ? "empty" : "full",
+			position: {
+				left: i,
+				right: a
+			}
+		};
+	} else if (t.startsWith("r")) {
+		let n = t.charAt(1) === "f";
+		return {
+			type: "ray",
+			direction: t.charAt(2) === "p" ? "positive" : "negative",
+			pointType: n ? "full" : "empty",
+			position: e
+		};
+	}
+}
+//#endregion
+export { e as buildElementModel };

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

@@ -0,0 +1,51 @@
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/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 class Line extends React.Component {
+    static propTypes: {
+        empty: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<boolean>;
+            right: PropTypes.Validator<boolean>;
+        }>>>;
+        position: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            left: PropTypes.Validator<number>;
+            right: PropTypes.Validator<number>;
+        }>>>;
+        y: PropTypes.Requireable<number>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+        onMoveLine: PropTypes.Validator<(...args: any[]) => any>;
+        onToggleSelect: PropTypes.Validator<(...args: any[]) => any>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        interval: PropTypes.Validator<number>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            min: PropTypes.Validator<number>;
+            max: PropTypes.Validator<number>;
+        }>>;
+    };
+    static defaultProps: {
+        selected: boolean;
+        y: number;
+        disabled: boolean;
+        correct: undefined;
+    };
+    static contextTypes: {
+        xScale: PropTypes.Validator<(...args: any[]) => any>;
+        snapValue: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onDrag(side: any, p: any): void;
+    onMove(side: any, d: any): void;
+    render(): React.JSX.Element;
+}
+export default Line;