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

package/dist/author/button.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/configure/src/button.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 CustomButton: {
+    ({ label, onClick, disabled }: {
+        label: any;
+        onClick: any;
+        disabled: any;
+    }): React.JSX.Element;
+    propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        label: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        className: string;
+        disabled: boolean;
+        label: string;
+        onClick: () => void;
+    };
+};
+export default CustomButton;

package/dist/author/button.js

@@ -0,0 +1,25 @@
+import "react";
+import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import { styled as n } from "@mui/material/styles";
+import r from "@mui/material/Button";
+//#region src/author/button.tsx
+var i = n(r)({ marginLeft: 8 }), a = ({ label: e, onClick: n, disabled: r }) => /* @__PURE__ */ t(i, {
+	onClick: n,
+	disabled: r,
+	size: "small",
+	variant: "contained",
+	children: e
+});
+a.propTypes = {
+	disabled: e.bool,
+	label: e.string,
+	onClick: e.func
+}, a.defaultProps = {
+	className: "",
+	disabled: !1,
+	label: "Add",
+	onClick: () => {}
+};
+//#endregion
+export { a as default };

package/dist/author/defaults.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/configure/src/defaults.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.
+ */
+declare const _default: {
+    model: {
+        backgroundImageEnabled: boolean;
+        imageDimensions: {
+            height: number;
+            width: number;
+        };
+        imageUrl: string;
+        prompt: string;
+        promptEnabled: boolean;
+        spellCheckEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    configuration: {
+        baseInputConfiguration: {
+            h3: {
+                disabled: boolean;
+            };
+            audio: {
+                disabled: boolean;
+            };
+            video: {
+                disabled: boolean;
+            };
+            image: {
+                disabled: boolean;
+            };
+            textAlign: {
+                disabled: boolean;
+            };
+            showParagraphs: {
+                disabled: boolean;
+            };
+            separateParagraphs: {
+                disabled: boolean;
+            };
+        };
+        spellCheck: {
+            label: string;
+            settings: boolean;
+            enabled: boolean;
+        };
+        backgroundImage: {
+            settings: boolean;
+            label: string;
+        };
+        prompt: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        settingsPanelDisabled: boolean;
+        teacherInstructions: {
+            settings: boolean;
+            label: string;
+            inputConfiguration: {
+                audio: {
+                    disabled: boolean;
+                };
+                video: {
+                    disabled: boolean;
+                };
+                image: {
+                    disabled: boolean;
+                };
+            };
+            required: boolean;
+        };
+        maxImageWidth: {
+            teacherInstructions: number;
+            prompt: number;
+        };
+        maxImageHeight: {
+            teacherInstructions: number;
+            prompt: number;
+        };
+        withRubric: {
+            settings: boolean;
+            label: string;
+        };
+        mathMlOptions: {
+            mmlOutput: boolean;
+            mmlEditing: boolean;
+        };
+        language: {
+            settings: boolean;
+            label: string;
+            enabled: boolean;
+        };
+        languageChoices: {
+            label: string;
+            options: never[];
+        };
+    };
+};
+export default _default;

package/dist/author/defaults.js

@@ -0,0 +1,86 @@
+//#region src/author/defaults.ts
+var e = {
+	model: {
+		backgroundImageEnabled: !0,
+		imageDimensions: {
+			height: 0,
+			width: 0
+		},
+		imageUrl: "",
+		prompt: "",
+		promptEnabled: !0,
+		spellCheckEnabled: !0,
+		studentInstructionsEnabled: !0,
+		teacherInstructions: "",
+		teacherInstructionsEnabled: !0,
+		toolbarEditorPosition: "bottom"
+	},
+	configuration: {
+		baseInputConfiguration: {
+			h3: { disabled: !0 },
+			audio: { disabled: !1 },
+			video: { disabled: !1 },
+			image: { disabled: !1 },
+			textAlign: { disabled: !0 },
+			showParagraphs: { disabled: !1 },
+			separateParagraphs: { disabled: !0 }
+		},
+		spellCheck: {
+			label: "Spellcheck",
+			settings: !1,
+			enabled: !0
+		},
+		backgroundImage: {
+			settings: !0,
+			label: "Background Image"
+		},
+		prompt: {
+			settings: !0,
+			label: "Prompt",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		settingsPanelDisabled: !1,
+		teacherInstructions: {
+			settings: !0,
+			label: "Teacher Instructions",
+			inputConfiguration: {
+				audio: { disabled: !1 },
+				video: { disabled: !1 },
+				image: { disabled: !1 }
+			},
+			required: !1
+		},
+		maxImageWidth: {
+			teacherInstructions: 300,
+			prompt: 300
+		},
+		maxImageHeight: {
+			teacherInstructions: 300,
+			prompt: 300
+		},
+		withRubric: {
+			settings: !1,
+			label: "Add Rubric"
+		},
+		mathMlOptions: {
+			mmlOutput: !1,
+			mmlEditing: !1
+		},
+		language: {
+			settings: !1,
+			label: "Specify Language",
+			enabled: !1
+		},
+		languageChoices: {
+			label: "Language Choices",
+			options: []
+		}
+	}
+};
+//#endregion
+export { e as default };

package/dist/author/image-container.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/configure/src/image-container.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, { Component } from 'react';
+import PropTypes from 'prop-types';
+export declare class ImageContainer extends Component {
+    static propTypes: {
+        imageDimensions: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {};
+    constructor(props: any);
+    componentDidMount(): void;
+    handleFileRead: any;
+    handleUploadImage: any;
+    makeDropzoneActive: () => void;
+    makeDropzoneInactive: () => void;
+    handleOnDrop: any;
+    handleOnDragOver: any;
+    handleOnDragExit: any;
+    handleEnableDrag: () => void;
+    handleDisableDrag: () => void;
+    handleInputClick: any;
+    handleOnImageLoad: ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }: {
+        target: {
+            offsetHeight: any;
+            offsetWidth: any;
+            naturalHeight: any;
+            naturalWidth: any;
+        };
+    }) => void;
+    initialiseResize: any;
+    stopResizing: any;
+    startResizing: any;
+    renderUploadControl(label: any): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ImageContainer;

package/dist/author/image-container.js

@@ -0,0 +1,183 @@
+import e from "./button.js";
+import { Component as t } from "react";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+//#region src/author/image-container.tsx
+var o = (e) => e.type.match(/image.*/), s = a("div")(({ theme: e }) => ({ marginTop: e.spacing(1) })), c = a("div")(({ active: e }) => ({
+	border: e ? "1px solid #0032C2" : "1px solid #E0E1E6",
+	borderRadius: "5px"
+})), l = a("div")({
+	alignItems: "center",
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center"
+}), u = a("div")({ minHeight: 350 }), d = a("img")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), f = a("div")({
+	position: "relative",
+	width: "fit-content"
+}), p = a("div")({
+	borderBottom: "1px solid #727272",
+	borderRight: "1px solid #727272",
+	bottom: "-10px",
+	cursor: "se-resize",
+	height: "10px",
+	position: "absolute",
+	right: "-10px",
+	width: "10px"
+}), m = a("input")({ display: "none" }), h = a("div")({
+	backgroundColor: "#ECEDF1",
+	borderBottom: "1px solid #E0E1E6",
+	borderTopLeftRadius: "5px",
+	borderTopRightRadius: "5px",
+	display: "flex",
+	padding: "12px 8px"
+}), g = class extends t {
+	static propTypes = { imageDimensions: n.object };
+	static defaultProps = {};
+	constructor(e) {
+		super(e), this.state = {
+			maxImageWidth: "100%",
+			maxImageHeight: "auto",
+			dragEnabled: !0,
+			dropzoneActive: !1
+		}, this.fakeImageHandler = {
+			cancel: () => {},
+			done: (e, t) => this.props.onImageUpload(t),
+			fileChosen: () => {},
+			progress: () => {}
+		};
+	}
+	componentDidMount() {
+		if (this.imageSection) {
+			let { height: e, width: t } = this.imageSection.getBoundingClientRect();
+			this.setState({
+				maxImageWidth: t,
+				maxImageHeight: e
+			});
+		}
+	}
+	handleFileRead = (e) => {
+		let { onImageUpload: t, insertImage: n } = this.props, r = new FileReader();
+		r.onloadend = () => t(r.result), r.readAsDataURL(e), n && n({
+			...this.fakeImageHandler,
+			getChosenFile: () => e,
+			isPasted: !0
+		});
+	};
+	handleUploadImage = (e) => {
+		e.preventDefault();
+		let t = e.target.files[0];
+		this.handleFileRead(t);
+	};
+	makeDropzoneActive = () => this.setState({ dropzoneActive: !0 });
+	makeDropzoneInactive = () => this.setState({ dropzoneActive: !1 });
+	handleOnDrop = (e) => {
+		e.preventDefault();
+		let { items: t, files: n } = e.dataTransfer;
+		if (t && t[0].kind === "file") {
+			let e = t[0].getAsFile();
+			o(e) && this.handleFileRead(e);
+		} else o(n[0]) && this.handleFileRead(n[0]);
+		this.makeDropzoneInactive();
+	};
+	handleOnDragOver = (e) => {
+		e.preventDefault();
+		let { dropzoneActive: t } = this.state;
+		t || this.makeDropzoneActive();
+	};
+	handleOnDragExit = (e) => {
+		e.preventDefault(), this.makeDropzoneInactive();
+	};
+	handleEnableDrag = () => this.setState({ dragEnabled: !0 });
+	handleDisableDrag = () => this.setState({ dragEnabled: !1 });
+	handleInputClick = () => {
+		let { insertImage: e } = this.props;
+		e && e(this.fakeImageHandler);
+	};
+	handleOnImageLoad = ({ target: { offsetHeight: e, offsetWidth: t, naturalHeight: n, naturalWidth: r } }) => {
+		let { onUpdateImageDimension: i, imageDimensions: a } = this.props, o = this.resize, s = {
+			height: a && a.height || e || n,
+			width: a && a.width || t || r
+		}, c = r / n;
+		s.width !== s.height * c && (s.width = s.height * c), this.setState({ dimensions: s }), i(s), o.addEventListener("mousedown", this.initialiseResize, !1);
+	};
+	initialiseResize = () => {
+		window.addEventListener("mousemove", this.startResizing, !1), window.addEventListener("mouseup", this.stopResizing, !1);
+	};
+	stopResizing = () => {
+		let { onUpdateImageDimension: e } = this.props, { dimensions: t } = this.state;
+		this.handleEnableDrag(), e(t), window.removeEventListener("mousemove", this.startResizing, !1), window.removeEventListener("mouseup", this.stopResizing, !1);
+	};
+	startResizing = (e) => {
+		let t = this.image, { maxImageWidth: n, maxImageHeight: r, dimensions: i } = this.state, a = e.target.getBoundingClientRect(), o = e.clientX - a.left, s = e.clientY - a.top, c = i.width / i.height;
+		o <= n + 5 && o / c <= r + 5 && o > 150 && s > 150 && t && (t.style.width = `${o}px`, t.style.height = `${o / c}px`, this.setState({ dimensions: {
+			width: o,
+			height: o / c
+		} })), this.handleDisableDrag();
+	};
+	renderUploadControl(t) {
+		return /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(e, {
+			label: t,
+			onClick: this.handleInputClick
+		}), /* @__PURE__ */ r(m, {
+			accept: "image/*",
+			onChange: this.handleUploadImage,
+			ref: (e) => {
+				this.input = e;
+			},
+			type: "file"
+		})] });
+	}
+	render() {
+		let { imageUrl: e, imageDimensions: t } = this.props, { dropzoneActive: n, dragEnabled: a, maxImageHeight: o, maxImageWidth: m } = this.state;
+		return /* @__PURE__ */ r(s, { children: /* @__PURE__ */ i(c, {
+			active: n,
+			...a ? {
+				onDragExit: this.handleOnDragExit,
+				onDragLeave: this.handleOnDragExit,
+				onDragOver: this.handleOnDragOver,
+				onDrop: this.handleOnDrop
+			} : {},
+			children: [/* @__PURE__ */ r(h, { children: this.renderUploadControl(e ? "Replace Image" : "Upload Image") }), /* @__PURE__ */ r(u, {
+				ref: (e) => {
+					this.imageSection = e;
+				},
+				children: e ? /* @__PURE__ */ i(f, { children: [/* @__PURE__ */ r(d, {
+					height: "auto",
+					onLoad: this.handleOnImageLoad,
+					ref: (e) => {
+						this.image = e;
+					},
+					src: e,
+					style: {
+						width: t && t.width ? t.width : void 0,
+						maxWidth: m,
+						maxHeight: o
+					},
+					alt: ""
+				}), /* @__PURE__ */ r(p, { ref: (e) => {
+					this.resize = e;
+				} })] }) : /* @__PURE__ */ i(u, {
+					as: l,
+					children: [
+						/* @__PURE__ */ r("label", { children: "Drag and drop or upload image from computer" }),
+						/* @__PURE__ */ r("br", {}),
+						this.renderUploadControl("Upload Image")
+					]
+				})
+			})]
+		}) });
+	}
+};
+g.propTypes = {
+	imageUrl: n.string.isRequired,
+	onImageUpload: n.func.isRequired,
+	onUpdateImageDimension: n.func.isRequired,
+	insertImage: n.func
+};
+//#endregion
+export { g as default };

package/dist/author/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/configure/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 DrawableResponseConfigure extends HTMLElement {
+    static createDefaultModel: (model: {} | undefined, config: any) => {
+        backgroundImageEnabled: boolean;
+        imageDimensions: {
+            height: number;
+            width: number;
+        };
+        imageUrl: string;
+        prompt: string;
+        promptEnabled: boolean;
+        spellCheckEnabled: boolean;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    constructor();
+    set model(s: any);
+    set configuration(c: any);
+    dispatchModelUpdated(reset: any): void;
+    onModelChanged: any;
+    onConfigurationChanged: any;
+    insertImage: any;
+    onDeleteImage: any;
+    insertSound(handler: any): void;
+    onDeleteSound(src: any, done: any): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/author/index.js

@@ -0,0 +1,79 @@
+import e from "./root.js";
+import t from "./defaults.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import i from "debug";
+import { DeleteImageEvent as a, DeleteSoundEvent as o, InsertImageEvent as s, InsertSoundEvent as c, ModelUpdatedEvent as l } from "@pie-element/shared-configure-events";
+//#region src/author/index.ts
+var u = i("hotspot:configure"), d = class i extends HTMLElement {
+	static createDefaultModel = (e = {}, n) => {
+		let r = {
+			...t.model,
+			...e
+		};
+		return n?.withRubric?.forceEnabled && !r.rubricEnabled && (r.rubricEnabled = !0), r;
+	};
+	constructor() {
+		super(), this._root = null, this._configuration = t.configuration, this._configuration.withRubric?.forceEnabled && (this._configuration.withRubric.settings = !1), this._model = i.createDefaultModel({}, this._configuration), this.onModelChanged = this.onModelChanged.bind(this);
+	}
+	set model(e) {
+		this._model = i.createDefaultModel(e, this._configuration), this._render();
+	}
+	set configuration(e) {
+		let n = {
+			...t.configuration,
+			...e
+		};
+		this._configuration = n;
+		let { withRubric: r = {} } = e || {};
+		r?.forceEnabled && (this._configuration.withRubric.settings = !1, this._model.rubricEnabled || (this._model.rubricEnabled = !0)), n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
+			value: this._model.language,
+			label: this._model.language
+		})) : delete this._model.language, this._render();
+	}
+	dispatchModelUpdated(e) {
+		let t = !!e;
+		this.dispatchEvent(new l(this._model, t));
+	}
+	onModelChanged = (e, t) => {
+		this._model = e, this.dispatchModelUpdated(t), this._render();
+	};
+	onConfigurationChanged = (e) => {
+		this._configuration = e, this._render();
+	};
+	insertImage = (e) => {
+		this.dispatchEvent(new s(e));
+	};
+	onDeleteImage = (e, t) => {
+		this.dispatchEvent(new a(e, t));
+	};
+	insertSound(e) {
+		this.dispatchEvent(new c(e));
+	}
+	onDeleteSound(e, t) {
+		this.dispatchEvent(new o(e, t));
+	}
+	_render() {
+		u("_render");
+		let t = n.createElement(e, {
+			model: this._model,
+			configuration: this._configuration,
+			onModelChanged: this.onModelChanged,
+			onConfigurationChanged: this.onConfigurationChanged,
+			imageSupport: {
+				add: this.insertImage,
+				delete: this.onDeleteImage
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			}
+		});
+		this._root ||= r(this), this._root.render(t);
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { d as default };

package/dist/author/root.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/configure/src/root.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';
+export declare class Root extends React.Component {
+    onPromptChanged: any;
+    onTeacherInstructionsChanged: any;
+    onUpdateImageDimension: any;
+    onImageUpload: any;
+    render(): React.JSX.Element;
+}
+export default Root;