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

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

@@ -1,49 +0,0 @@
-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

@@ -1,30 +0,0 @@
-/**
- * @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

@@ -1,189 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/**
- * @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

@@ -1,35 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/**
- * @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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,52 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/**
- * @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

@@ -1,70 +0,0 @@
-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

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,47 +0,0 @@
-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

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

package/dist/index.iife.d.ts

@@ -1,8 +0,0 @@
-/**
- * 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;