@pie-element/drawing-response 12.1.0-next.28 → 12.1.1-next.0

package/dist/delivery/drawing-response/drawable-rectangle.js

@@ -0,0 +1,49 @@
+import e from "./drawable-helper.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Rect as n } from "react-konva";
+//#region src/delivery/drawing-response/drawable-rectangle.tsx
+function r(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function i(e, t) {
+	return !e || r(e) ? e : r(e.default) ? e.default : t && r(e[t]) ? e[t] : t && r(e[t]?.default) ? e[t].default : e;
+}
+var a = i(n, "Rect"), o = class n extends e {
+	static TYPE = "RectangleDrawable";
+	constructor(e) {
+		super(e, n.TYPE);
+		let { startx: t, starty: r, x: i, y: a } = e;
+		this.startx = t, this.starty = r, this.x = i || t, this.y = a || r, this.width = i - t || 0, this.height = a - r || 0;
+	}
+	registerMovement(e, t) {
+		this.x = e, this.y = t, this.width = this.x - this.startx, this.height = this.y - this.starty;
+	}
+	handleOnClick(e) {
+		let { paint: t, paintColor: n, forceUpdate: r } = e;
+		t && (this.paintColor = n, r());
+	}
+	handleDragEnd = (e, t) => {
+		let n = this.startx - t.target.getX(), r = this.starty - t.target.getY();
+		this.startx = t.target.getX(), this.starty = t.target.getY(), this.x -= n, this.y -= r, e.handleSessionChange();
+	};
+	render(e) {
+		let { draggable: n, key: r, onMouseOverElement: i, onMouseOutElement: o } = e;
+		return /* @__PURE__ */ t(a, {
+			height: this.height,
+			width: this.width,
+			fill: this.paintColor || this.fillColor,
+			onClick: () => this.handleOnClick(e),
+			onDragEnd: this.handleDragEnd.bind(this, e),
+			onMouseEnter: i,
+			onMouseLeave: o,
+			stroke: this.outlineColor,
+			draggable: n,
+			strokeWidth: 2,
+			x: this.startx,
+			y: this.starty
+		}, r);
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/drawing-response/drawable-text.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-text.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.
+ */
+export declare const generateId: () => string;
+export default class TextDrawable {
+    static getTextareaNode(id: any): string;
+    static getTextNode(id: any): string;
+    static getTransformerNode(id: any): string;
+    constructor(props: any);
+    removeEventListeners: () => any;
+    setAll: any;
+    addNewTextEntry: any;
+    showOnlyTextNodes(): void;
+    toggleTextarea(id: any, value: any): void;
+    initializeDefault(id: any, isDefault: any): void;
+    saveValue(id: any, textareaNode: any): void;
+    handleMouseDown: () => any;
+    handleMouseUp: () => any;
+    handleClick: any;
+    handleDblClick: any;
+    handleTransform: any;
+    renderTextareas(): any;
+    setInitialProps(props: any): void;
+    render(props: any): any;
+}

package/dist/delivery/drawing-response/drawable-text.js

@@ -0,0 +1,189 @@
+import e from "./drawable-transformer.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@pie-lib/translator";
+import { Text as r } from "react-konva";
+//#region src/delivery/drawing-response/drawable-text.tsx
+function i(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function a(e, t) {
+	return !e || i(e) ? e : i(e.default) ? e.default : t && i(e[t]) ? e[t] : t && i(e[t]?.default) ? e[t].default : e;
+}
+var o = a(r, "Text"), { translator: s } = n, c = () => Math.random().toString(36).substring(2) + (/* @__PURE__ */ new Date()).getTime().toString(36), l = class n {
+	static getTextareaNode(e) {
+		return `textarea_${e}`;
+	}
+	static getTextNode(e) {
+		return `text_${e}`;
+	}
+	static getTransformerNode(e) {
+		return `transformer_${e}`;
+	}
+	constructor(e) {
+		this.all = e && e.all || [], this.eventListenersDetachArray = [];
+	}
+	removeEventListeners = () => this.eventListenersDetachArray.forEach((e) => e());
+	setAll = (e) => {
+		this.all = e, this.props.forceUpdate();
+	};
+	addNewTextEntry = (e) => {
+		let t = this.all, n = c();
+		t.push({
+			id: n,
+			text: "",
+			isDefault: !0,
+			label: s.t("drawingResponse.onDoubleClick", { lng: e }),
+			width: 200,
+			x: (t.length + 1) * 5 + 50,
+			y: (t.length + 1) * 5 + 50,
+			textVisible: !0,
+			transformerVisible: !0,
+			textareaVisible: !1,
+			createdAt: /* @__PURE__ */ new Date(),
+			type: "text-entry"
+		}), this.props.handleSessionChange();
+	};
+	showOnlyTextNodes() {
+		this.all.map((e) => {
+			e.textVisible = !0, e.transformerVisible = !1, e.textareaVisible = !1;
+		});
+	}
+	toggleTextarea(e, t) {
+		this.all = this.all.map((n) => n.id === e ? {
+			...n,
+			textVisible: !t,
+			transformerVisible: !t,
+			textareaVisible: t
+		} : n), this.props.forceUpdate();
+	}
+	initializeDefault(e, t) {
+		if (t) {
+			let t = this.all.filter((t) => t.id === e)[0];
+			t.isDefault = !1;
+		}
+	}
+	saveValue(e, t) {
+		let n = t.value;
+		this.all = this.all.map((t) => t.id === e ? {
+			...t,
+			text: n
+		} : t), n || (this.all = this.all.filter((t) => t.id !== e)), this.toggleTextarea(e, !1), this.props.handleSessionChange(), this.props.forceUpdate();
+	}
+	handleMouseDown = () => this.props.toggleTextSelected(!0);
+	handleMouseUp = () => this.props.toggleTextSelected(!1);
+	handleClick = (e, t) => {
+		let n = this.all.filter((e) => e.id === t)[0];
+		n.transformerVisible = !0, this.props.forceUpdate();
+	};
+	handleDblClick = (e, t) => {
+		let { id: r, isDefault: i } = t;
+		this.toggleTextarea(r, !0);
+		let a = this[n.getTextNode(r)], o = this[n.getTextareaNode(r)];
+		if (!a || !o) return;
+		let s = a.getAbsolutePosition();
+		o.value = t.text || "", o.style.position = "absolute", o.style.top = s.y + "px", o.style.left = s.x + "px", o.style.width = a.width() - a.padding() * 2 + "px", o.style.height = a.height() - a.padding() * 2 + 5 + "px", o.style.fontSize = a.fontSize() + "px", o.style.border = "none", o.style.padding = "0px", o.style.margin = "0px", o.style.overflow = "hidden", o.style.background = "none", o.style.outline = "none", o.style.resize = "none", o.style.lineHeight = a.lineHeight(), o.style.fontFamily = a.fontFamily(), o.style.transformOrigin = "left top", o.style.textAlign = a.align(), o.style.color = a.fill(), o.style.display = "block";
+		let c = a.rotation();
+		o.style.transform = c ? `rotateZ(${c}deg)` : "", o.focus();
+		let l = (e) => {
+			e.key === "Enter" && !e.shiftKey && this.saveValue(r, o), e.key === "Escape" && this.toggleTextarea(r, !1);
+		}, u = () => {
+			this.showOnlyTextNodes(), this.saveValue(r, o);
+		};
+		o.addEventListener("keydown", l), o.addEventListener("blur", u), this.eventListenersDetachArray.push(() => {
+			o.removeEventListener("keydown", l), o.removeEventListener("blur", u);
+		}), this.initializeDefault(r, i), this.props.forceUpdate();
+	};
+	handleTransform = (e, t) => {
+		this[t].setAttrs({
+			width: this[t].width() * this[t].scaleX(),
+			scaleX: this.props.scale
+		});
+	};
+	renderTextareas() {
+		return this.all.map((e) => {
+			let { id: n, textareaVisible: r } = e, i = `textarea_${n}`;
+			return /* @__PURE__ */ t("textarea", {
+				ref: (e) => {
+					this[i] = e;
+				},
+				style: { display: `${r ? "block" : "none"}` }
+			}, i);
+		});
+	}
+	setInitialProps(e) {
+		this.props ||= e;
+	}
+	render(n) {
+		if (this.setInitialProps(n), n.stage) {
+			let e = n.stage;
+			if (e !== this.stage) {
+				let t = (e) => {
+					e.target === this.stage && (this.showOnlyTextNodes(), this.props.forceUpdate());
+				};
+				e.on("click", t), this.eventListenersDetachArray.push(() => e.off("click", t));
+			}
+			this.stage = e;
+		}
+		return this.all.map((r) => {
+			let { id: i, label: a, x: s, y: c, width: l, textVisible: u, rotation: d, transformerVisible: f } = r, p = `text_${i}`, m = `transformer_${i}`, h = {};
+			return n.disabled || (h = {
+				onClick: (e) => this.handleClick(e, i),
+				onTap: (e) => this.handleClick(e, i),
+				onDblClick: (e) => this.handleDblClick(e, r),
+				onDblTap: (e) => this.handleDblClick(e, r),
+				onTransform: (e) => this.handleTransform(e, p),
+				onTransformEnd: this.props.handleSessionChange,
+				onMouseDown: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!0);
+				},
+				onTouchStart: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!0);
+				},
+				onDragStart: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!0);
+				},
+				onDragMove: (e) => {
+					e.cancelBubble = !0;
+				},
+				onDragEnd: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!1), this.props.handleSessionChange();
+				},
+				onMouseUp: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!1);
+				},
+				onTouchEnd: (e) => {
+					e.cancelBubble = !0, this.props.toggleTextSelected(!1);
+				},
+				onMouseEnter: this.props.onMouseOverElement,
+				onMouseLeave: this.props.onMouseOutElement
+			}), d && (h.rotation = d), [/* @__PURE__ */ t(o, {
+				bubbles: !0,
+				id: i,
+				ref: (e) => {
+					this[p] = e;
+				},
+				text: r.text || a,
+				name: p,
+				x: s,
+				y: c,
+				width: l,
+				draggable: !n.disabled,
+				visible: u,
+				fontSize: 16,
+				...h
+			}, i), f && /* @__PURE__ */ t(e, {
+				ref: (e) => {
+					this[m] = e;
+				},
+				selectedShapeName: p,
+				onMouseDown: this.handleMouseDown,
+				onTouchStart: this.handleMouseDown,
+				onMouseUp: this.handleMouseUp,
+				onTouchEnd: this.handleMouseUp
+			}, `transformer_${i}`)];
+		});
+	}
+};
+//#endregion
+export { l as default };

package/dist/delivery/drawing-response/drawable-transformer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-transformer.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';
+declare class TransformerComponent extends React.Component {
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    checkNode(): void;
+    render(): React.JSX.Element;
+}
+export default TransformerComponent;

package/dist/delivery/drawing-response/drawable-transformer.js

@@ -0,0 +1,35 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+import { Transformer as r } from "react-konva";
+//#region src/delivery/drawing-response/drawable-transformer.tsx
+function i(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function a(e, t) {
+	return !e || i(e) ? e : i(e.default) ? e.default : t && i(e[t]) ? e[t] : t && i(e[t]?.default) ? e[t].default : e;
+}
+var o = a(r, "Transformer"), s = class extends e.Component {
+	componentDidMount() {
+		this.checkNode();
+	}
+	componentDidUpdate() {
+		this.checkNode();
+	}
+	checkNode() {
+		let e = this.transformer.getStage(), { selectedShapeName: t } = this.props, n = e.findOne(`.${t}`);
+		n !== this.transformer.node() && (n ? this.transformer.attachTo(n) : this.transformer.detach(), this.transformer.getLayer().batchDraw());
+	}
+	render() {
+		return /* @__PURE__ */ n(o, {
+			ref: (e) => {
+				this.transformer = e;
+			},
+			enabledAnchors: ["middle-left", "middle-right"],
+			...this.props
+		});
+	}
+};
+s.propTypes = { selectedShapeName: t.string.isRequired };
+//#endregion
+export { s as default };

package/dist/delivery/drawing-response/factory.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/factory.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 EraserDrawable from './drawable-eraser.js';
+declare const _default: (type: any, props: any) => EraserDrawable;
+export default _default;

package/dist/delivery/drawing-response/factory.js

@@ -0,0 +1,19 @@
+import e from "./drawable-free-path.js";
+import t from "./drawable-line.js";
+import n from "./drawable-rectangle.js";
+import r from "./drawable-circle.js";
+import i from "./drawable-eraser.js";
+//#region src/delivery/drawing-response/factory.ts
+var a = [
+	e,
+	t,
+	n,
+	r,
+	i
+], o = (e, t) => {
+	let n = a.find((t) => t.TYPE === e);
+	if (n) return new n(t);
+	throw Error(`Can't find drawable for type: ${e} and props: ${JSON.stringify(t)}`);
+};
+//#endregion
+export { o as default };

package/dist/delivery/drawing-response/icon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/icon.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';
+declare const IconWrapper: {
+    ({ path }: {
+        path: any;
+    }): React.JSX.Element;
+    propTypes: {
+        path: PropTypes.Validator<string>;
+    };
+};
+export default IconWrapper;

package/dist/delivery/drawing-response/icon.js

@@ -0,0 +1,52 @@
+import "react";
+import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@mdi/react";
+import { mdiCircle as r, mdiCursorDefault as i, mdiEraser as a, mdiFormatColorFill as o, mdiFormatColorText as s, mdiMinus as c, mdiPencil as l, mdiRectangle as u } from "@mdi/js";
+//#region src/delivery/drawing-response/icon.tsx
+function d(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function f(e, t) {
+	return !e || d(e) ? e : d(e.default) ? e.default : t && d(e[t]) ? e[t] : t && d(e[t]?.default) ? e[t].default : e;
+}
+var p = f(n, "Icon"), m = ({ path: e }) => {
+	let n;
+	switch (e) {
+		case "mdiPencil":
+			n = l;
+			break;
+		case "mdiMinus":
+			n = c;
+			break;
+		case "mdiCircle":
+			n = r;
+			break;
+		case "mdiRectangle":
+			n = u;
+			break;
+		case "mdiFormatColorText":
+			n = s;
+			break;
+		case "mdiFormatColorFill":
+			n = o;
+			break;
+		case "mdiEraser":
+			n = a;
+			break;
+		default:
+			n = i;
+			break;
+	}
+	return /* @__PURE__ */ t(p, {
+		path: n,
+		size: .8,
+		rotate: 180,
+		horizontal: !0,
+		vertical: !0,
+		color: "#2B3963"
+	});
+};
+m.propTypes = { path: e.string.isRequired };
+//#endregion
+export { m as default };

package/dist/delivery/drawing-response/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/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';
+declare class DrawingResponseComponent extends React.Component {
+    constructor(props: any);
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+        errorMessage: any;
+    };
+    render(): React.JSX.Element;
+}
+export default DrawingResponseComponent;

package/dist/delivery/drawing-response/index.js

@@ -0,0 +1,70 @@
+import e from "./container.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, UiLayout as o, color as s } from "@pie-lib/render-ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+//#region src/delivery/drawing-response/index.tsx
+function d(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function f(e, t) {
+	return !e || d(e) ? e : d(e.default) ? e.default : t && d(e[t]) ? e[t] : t && d(e[t]?.default) ? e[t].default : e;
+}
+var p = f(o, "UiLayout") || f(v.UiLayout, "UiLayout"), m = f(a, "PreviewPrompt") || f(v.PreviewPrompt, "PreviewPrompt"), h = f(i, "Collapsible") || f(v.Collapsible, "Collapsible"), g = r, _ = g.default, v = _ && typeof _ == "object" ? _ : g, y = u(p)({
+	color: s.text(),
+	backgroundColor: s.background()
+}), b = u(h)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), x = u("div")({
+	color: s.text(),
+	backgroundColor: s.background()
+}), S = class extends t.Component {
+	constructor(e) {
+		super(e), this.state = {
+			showCorrect: !1,
+			hasError: !1
+		};
+	}
+	static getDerivedStateFromError(e) {
+		return {
+			hasError: !0,
+			errorMessage: e.message
+		};
+	}
+	render() {
+		let { model: { extraCSSRules: t, disabled: n, imageDimensions: r, imageUrl: i, prompt: a, mode: o, teacherInstructions: s, backgroundImageEnabled: u, language: d }, session: f, onSessionChange: p } = this.props, { hasError: h, errorMessage: g } = this.state;
+		return h ? /* @__PURE__ */ l(x, { children: ["An error occured: ", g] }) : /* @__PURE__ */ l(y, {
+			extraCSSRules: t,
+			children: [
+				s && /* @__PURE__ */ c(b, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ c(m, { prompt: s })
+				}),
+				a && /* @__PURE__ */ c(m, {
+					tagName: "span",
+					prompt: a
+				}),
+				/* @__PURE__ */ c(e, {
+					session: f,
+					onSessionChange: p,
+					isEvaluateMode: o === "evaluate",
+					imageDimensions: r,
+					imageUrl: i,
+					backgroundImageEnabled: u,
+					disabled: n,
+					language: d
+				})
+			]
+		});
+	}
+};
+S.propTypes = {
+	model: n.object.isRequired,
+	onSessionChange: n.func.isRequired,
+	session: n.object.isRequired
+};
+//#endregion
+export { S as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/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.
+ */
+export default class DrawingResponse extends HTMLElement {
+    constructor();
+    set model(m: any);
+    isComplete(): any;
+    sessionChanged: any;
+    set session(s: any);
+    get session(): any;
+    connectedCallback(): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,47 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "./drawing-response/index.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
+import { ModelSetEvent as a, SessionChangedEvent as o } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+var s = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null;
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new a(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._render();
+	}
+	isComplete() {
+		return this._session && (!e(this._session.drawables) || !e(this._session.texts));
+	}
+	sessionChanged = (e) => {
+		this._session.drawables = e.drawables, this._session.texts = e.texts, this._session.width = e.width, this.dispatchEvent(new o(this.tagName.toLowerCase(), this.isComplete())), this._render();
+	};
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	connectedCallback() {
+		this._render();
+	}
+	_render() {
+		if (this._model && this._session) {
+			let e = n.createElement(t, {
+				model: this._model,
+				session: this._session,
+				onSessionChange: this.sessionChanged
+			});
+			this._root ||= r(this), this._root.render(e), queueMicrotask(() => {
+				i(this);
+			});
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { s as default };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for drawing-response element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;