@pie-element/hotspot 11.1.1 → 11.1.2-next.0

package/dist/author/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/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 HotspotConfigure extends HTMLElement {
+    static createDefaultModel: (model?: {}) => {
+        hotspotList: any;
+        outlineList: any;
+        shapes: any;
+        dimensions: {
+            height: number;
+            width: number;
+        };
+        hotspotColor: string;
+        imageUrl: string;
+        multipleCorrect: boolean;
+        outlineColor: string;
+        partialScoring: boolean;
+        prompt: string;
+        promptEnabled: boolean;
+        rationaleEnabled: boolean;
+        strokeWidth: number;
+        studentInstructionsEnabled: boolean;
+        teacherInstructions: string;
+        teacherInstructionsEnabled: boolean;
+        toolbarEditorPosition: string;
+    };
+    constructor();
+    set model(s: any);
+    set configuration(c: any);
+    dispatchModelUpdated(reset: any): void;
+    onModelChanged(m: any, reset: any): void;
+    onConfigurationChanged: any;
+    onModelChangedByConfig: any;
+    onColorChanged: any;
+    onPromptChanged: any;
+    onRationaleChanged: any;
+    onTeacherInstructionsChanged: any;
+    onUpdateImageDimension: any;
+    onUpdateShapes: any;
+    onImageUpload: 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,143 @@
+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 = {}) => ({
+		...t.model,
+		...e,
+		hotspotList: e.hotspotList || [e.hotspotColor],
+		outlineList: e.outlineList || [e.outlineColor],
+		shapes: e.shapes || t.model.shapes || {}
+	});
+	constructor() {
+		super(), this._root = null, this._model = i.createDefaultModel(), this._configuration = t.configuration, this.onModelChanged = this.onModelChanged.bind(this);
+	}
+	set model(e) {
+		this._model = i.createDefaultModel(e), this._render();
+	}
+	set configuration(e) {
+		let n = {
+			...t.configuration,
+			...e
+		};
+		this._configuration = n, 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();
+	};
+	onModelChangedByConfig = (e, t) => {
+		let n = e;
+		if (t === "multipleCorrect") {
+			let { rectangles: e = [], polygons: t = [], circles: r = [] } = n.shapes || {};
+			n.shapes.rectangles = e.map((e) => ({
+				...e,
+				correct: !1
+			})), n.shapes.polygons = t.map((e) => ({
+				...e,
+				correct: !1
+			})), n.shapes.circles = r.map((e) => ({
+				...e,
+				correct: !1
+			}));
+		}
+		this.onModelChanged(n);
+	};
+	onColorChanged = (e, t) => {
+		this.onModelChanged({
+			...this._model,
+			[e]: t
+		});
+	};
+	onPromptChanged = (e) => {
+		this.onModelChanged({
+			...this._model,
+			prompt: e
+		});
+	};
+	onRationaleChanged = (e) => {
+		this.onModelChanged({
+			...this._model,
+			rationale: e
+		});
+	};
+	onTeacherInstructionsChanged = (e) => {
+		this.onModelChanged({
+			...this._model,
+			teacherInstructions: e
+		});
+	};
+	onUpdateImageDimension = (e) => {
+		this.onModelChanged({
+			...this._model,
+			dimensions: e
+		});
+	};
+	onUpdateShapes = (e) => {
+		this.onModelChanged({
+			...this._model,
+			shapes: e
+		});
+	};
+	onImageUpload = (e) => {
+		this.onModelChanged({
+			...this._model,
+			imageUrl: e
+		});
+	};
+	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, {
+			configuration: this._configuration,
+			model: this._model,
+			onColorChanged: this.onColorChanged,
+			onImageUpload: this.onImageUpload,
+			onRationaleChanged: this.onRationaleChanged,
+			onConfigurationChanged: this.onConfigurationChanged,
+			onPromptChanged: this.onPromptChanged,
+			onUpdateImageDimension: this.onUpdateImageDimension,
+			imageSupport: {
+				add: this.insertImage,
+				delete: this.onDeleteImage
+			},
+			uploadSoundSupport: {
+				add: this.insertSound.bind(this),
+				delete: this.onDeleteSound.bind(this)
+			},
+			onUpdateShapes: this.onUpdateShapes,
+			onModelChangedByConfig: this.onModelChangedByConfig,
+			onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+		});
+		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,15 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/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 {
+    handleColorChange: any;
+    handleOnUpdateImageDimensions: any;
+    render(): React.JSX.Element;
+}
+export default Root;

package/dist/author/root.js

@@ -0,0 +1,215 @@
+import e from "./hotspot-palette.js";
+import { generateValidationMessage as t, getAllShapes as n, getUpdatedShapes as r, groupShapes as i, updateImageDimensions as a } from "./utils.js";
+import o from "./hotspot-container.js";
+import s from "react";
+import c from "prop-types";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { styled as d } from "@mui/material/styles";
+import { InputContainer as f, NumberTextField as p, layout as m, settings as h } from "@pie-lib/config-ui";
+import g from "@pie-lib/editable-html-tip-tap";
+import _ from "@mui/material/Typography";
+import v from "@mui/icons-material/Info";
+import y from "@mui/material/Tooltip";
+//#region src/author/root.tsx
+var { Panel: ee, toggle: b, dropdown: te } = h, ne = d("div")(({ theme: e }) => ({
+	display: "flex",
+	marginBottom: e.spacing(1.5)
+})), x = d("div")({
+	flex: 1,
+	width: "90%"
+}), S = d(f)(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	width: "100%"
+})), C = d(_)(({ theme: e }) => ({ marginRight: e.spacing(1) })), re = d("div")({
+	display: "flex",
+	alignItems: "center"
+}), ie = d(y)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), w = d("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), T = class extends s.Component {
+	handleColorChange = (e, t) => {
+		let { onColorChanged: n } = this.props;
+		n(`${e}Color`, t);
+	};
+	handleOnUpdateImageDimensions = (e, t) => {
+		let { model: { dimensions: o, shapes: s }, configuration: { preserveAspectRatio: c = {} }, onUpdateImageDimension: l, onUpdateShapes: u } = this.props, d = a(o, {
+			...o,
+			[t]: e
+		}, c.enabled, t);
+		u(i(r(o, d, n(s)))), l(d);
+	};
+	render() {
+		let { configuration: n, model: r, imageSupport: i, uploadSoundSupport: a, onConfigurationChanged: c, onImageUpload: d, onModelChangedByConfig: f, onPromptChanged: h, onRationaleChanged: y, onUpdateImageDimension: T, onTeacherInstructionsChanged: ae, onUpdateShapes: E } = this.props, { baseInputConfiguration: oe = {}, contentDimensions: se = {}, maxImageWidth: D = {}, maxImageHeight: O = {}, multipleCorrect: k = {}, partialScoring: A = {}, preserveAspectRatio: j = {}, prompt: M = {}, rationale: N = {}, settingsPanelDisabled: ce, spellCheck: P = {}, teacherInstructions: F = {}, withRubric: I = {}, mathMlOptions: L = {}, language: R = {}, languageChoices: z = {} } = n || {}, { errors: B, extraCSSRules: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: le, toolbarEditorPosition: ue } = r || {}, { prompt: G, rationale: K, shapes: q, selections: J, teacherInstructions: Y } = B || {}, de = t(n), X = D && D.prompt, Z = O && O.prompt, Q = { position: ue === "top" ? "top" : "bottom" }, fe = {
+			multipleCorrect: k.settings && b(k.label),
+			partialScoring: A.settings && b(A.label),
+			promptEnabled: M.settings && b(M.label),
+			"language.enabled": R.settings && b(R.label, !0),
+			language: R.settings && R.enabled && te(z.label, z.options)
+		}, pe = {
+			teacherInstructionsEnabled: F.settings && b(F.label),
+			rationaleEnabled: N.settings && b(N.label),
+			spellCheckEnabled: P.settings && b(P.label),
+			rubricEnabled: I?.settings && b(I?.label)
+		}, $ = (e = {}) => ({
+			...oe,
+			...e
+		});
+		return /* @__PURE__ */ u(m.ConfigLayout, {
+			extraCSSRules: V,
+			dimensions: se,
+			hideSettings: ce,
+			settings: /* @__PURE__ */ l(ee, {
+				model: r,
+				onChangeModel: f,
+				configuration: n,
+				onChangeConfiguration: c,
+				groups: {
+					Settings: fe,
+					Properties: pe
+				}
+			}),
+			children: [
+				le && /* @__PURE__ */ u(S, {
+					label: F.label,
+					children: [/* @__PURE__ */ l(g, {
+						markup: r.teacherInstructions || "",
+						onChange: ae,
+						imageSupport: i,
+						nonEmpty: !1,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(F?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: D && D.teacherInstructions || X,
+						maxImageHeight: O && O.teacherInstructions || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), Y && /* @__PURE__ */ l(w, { children: Y })]
+				}),
+				H && /* @__PURE__ */ u(S, {
+					label: M.label,
+					children: [/* @__PURE__ */ l(g, {
+						markup: r.prompt || "",
+						onChange: h,
+						imageSupport: i,
+						nonEmpty: !1,
+						error: G,
+						toolbarOpts: Q,
+						pluginProps: $(M?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: X,
+						maxImageHeight: Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), G && /* @__PURE__ */ l(w, { children: G })]
+				}),
+				/* @__PURE__ */ u(re, { children: [/* @__PURE__ */ l(C, {
+					variant: "h6",
+					children: "Define Hotspot"
+				}), /* @__PURE__ */ l(ie, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "left",
+					title: de,
+					children: /* @__PURE__ */ l(v, {
+						fontSize: "small",
+						color: "primary",
+						style: { float: "right" }
+					})
+				})] }),
+				/* @__PURE__ */ l(e, {
+					hotspotColor: r.hotspotColor,
+					hotspotList: r.hotspotList,
+					outlineColor: r.outlineColor,
+					outlineList: r.outlineList,
+					onHotspotColorChange: (e) => this.handleColorChange("hotspot", e),
+					onOutlineColorChange: (e) => this.handleColorChange("outline", e)
+				}),
+				/* @__PURE__ */ l(o, {
+					dimensions: r.dimensions,
+					imageUrl: r.imageUrl,
+					multipleCorrect: r.multipleCorrect,
+					hasErrors: !!q || !!J,
+					hotspotColor: r.hotspotColor,
+					outlineColor: r.outlineColor,
+					selectedHotspotColor: r.selectedHotspotColor,
+					hoverOutlineColor: r.hoverOutlineColor,
+					onUpdateImageDimension: T,
+					onUpdateShapes: E,
+					onImageUpload: d,
+					shapes: r.shapes,
+					strokeWidth: r.strokeWidth,
+					preserveAspectRatioEnabled: j.enabled,
+					insertImage: i && i.add
+				}),
+				q && /* @__PURE__ */ l(w, { children: q }),
+				J && /* @__PURE__ */ l(w, { children: J }),
+				r.imageUrl && /* @__PURE__ */ u(s.Fragment, { children: [/* @__PURE__ */ l(_, {
+					variant: "h6",
+					children: "Image Dimensions"
+				}), /* @__PURE__ */ u(ne, { children: [/* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
+					label: "Width",
+					value: r.dimensions.width,
+					min: 0,
+					onChange: (e, t) => this.handleOnUpdateImageDimensions(t, "width"),
+					showErrorWhenOutsideRange: !0
+				}, "hotspot-manual-width") }), /* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
+					label: "Height",
+					value: r.dimensions.height,
+					min: 0,
+					onChange: (e, t) => this.handleOnUpdateImageDimensions(t, "height"),
+					showErrorWhenOutsideRange: !0
+				}, "hotspot-manual-height") })] })] }),
+				U && /* @__PURE__ */ u(S, {
+					label: N.label,
+					children: [/* @__PURE__ */ l(g, {
+						markup: r.rationale || "",
+						onChange: y,
+						imageSupport: i,
+						error: K,
+						toolbarOpts: Q,
+						pluginProps: $(N?.inputConfiguration),
+						spellCheck: W,
+						maxImageWidth: D && D.rationale || X,
+						maxImageHeight: O && O.rationale || Z,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: L
+					}), K && /* @__PURE__ */ l(w, { children: K })]
+				})
+			]
+		});
+	}
+};
+T.propTypes = {
+	configuration: c.object,
+	model: c.object.isRequired,
+	imageSupport: c.shape({
+		add: c.func,
+		delete: c.func
+	}),
+	uploadSoundSupport: c.shape({
+		add: c.func,
+		delete: c.func
+	}),
+	onImageUpload: c.func.isRequired,
+	onColorChanged: c.func.isRequired,
+	onPromptChanged: c.func.isRequired,
+	onUpdateImageDimension: c.func.isRequired,
+	onUpdateShapes: c.func.isRequired,
+	onModelChangedByConfig: c.func.isRequired,
+	onRationaleChanged: c.func.isRequired,
+	onConfigurationChanged: c.func.isRequired,
+	onTeacherInstructionsChanged: c.func.isRequired
+};
+//#endregion
+export { T as default };

package/dist/author/shapes/circle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/shapes/circle.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 class CircleShape {
+    static name: string;
+    static create(shapes: any, e: any): {
+        shapes: any[];
+        isDrawing: boolean;
+        isDrawingShapeId: string;
+    };
+    static finalizeCreation(state: any, props: any): any;
+    static handleMouseMove(state: any, e: any): any;
+}

package/dist/author/shapes/circle.js

@@ -0,0 +1,47 @@
+//#region src/author/shapes/circle.ts
+var e = class {
+	static name = "circle";
+	static create(e, t) {
+		let n = [...e], r = {
+			id: `${Math.max(...n.map((e) => parseInt(e.id)), 0) + 1}`,
+			radius: 0,
+			x: t.evt.layerX,
+			y: t.evt.layerY,
+			group: "circles",
+			index: n.length
+		};
+		return n.push(r), {
+			shapes: n,
+			isDrawing: !0,
+			isDrawingShapeId: r.id
+		};
+	}
+	static finalizeCreation(e, t) {
+		let n = e.shapes.findIndex((t) => t.id === e.isDrawingShapeId);
+		return n === -1 || e.shapes[n].radius > 0 ? {
+			...e,
+			isDrawing: !1,
+			stateShapes: !1,
+			isDrawingShapeId: void 0
+		} : {
+			...e,
+			isDrawing: !1,
+			stateShapes: !1,
+			isDrawingShapeId: void 0,
+			shapes: e.shapes.filter((t) => t.id !== e.isDrawingShapeId)
+		};
+	}
+	static handleMouseMove(e, t) {
+		let { isDrawing: n, isDrawingShapeId: r, shapes: i } = e;
+		if (n) {
+			let e = [...i], n = e.findIndex((e) => e.id === r);
+			if (n !== -1) {
+				let r = e[n], i = t.evt.layerX - r.x, a = t.evt.layerY - r.y;
+				return r.radius = Math.sqrt(i * i + a * a), { shapes: e };
+			}
+		}
+		return e;
+	}
+};
+//#endregion
+export { e as CircleShape };

package/dist/author/shapes/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/shapes/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 * from './circle.js';
+export * from './rectagle.js';
+export * from './polygon.js';
+export * from './utils.js';

package/dist/author/shapes/polygon.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/shapes/polygon.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 class PolygonShape {
+    static name: string;
+    static create(shapes: any, e: any): {
+        shapes: any[];
+        isDrawing: boolean;
+        isDrawingShapeId: string;
+    };
+    static addPoint(state: any, e: any, onPolygonComplete: any): any;
+    static finalizeCreation(state: any, onPolygonComplete: any): any;
+    static handleMouseMove(state: any, e: any): any;
+}

package/dist/author/shapes/polygon.js

@@ -0,0 +1,51 @@
+//#region src/author/shapes/polygon.ts
+var e = class e {
+	static name = "polygon";
+	static create(e, t) {
+		let n = [...e], r = {
+			id: "newPolygon",
+			points: [{
+				x: t.evt.layerX,
+				y: t.evt.layerY
+			}],
+			group: "polygons",
+			index: n.length
+		};
+		return n.push(r), {
+			shapes: n,
+			isDrawing: !0,
+			isDrawingShapeId: r.id
+		};
+	}
+	static addPoint(t, n, r) {
+		let i = JSON.parse(JSON.stringify(t.shapes)), a = i.findIndex((e) => e.id === t.isDrawingShapeId);
+		if (a !== -1) {
+			let o = i[a];
+			if (o.points && Array.isArray(o.points)) {
+				let s = o.points[0];
+				return Math.abs(s.x - n.evt.layerX) <= 5 && Math.abs(s.y - n.evt.layerY) <= 5 ? e.finalizeCreation(t, r) : (o.points.push({
+					x: n.evt.layerX,
+					y: n.evt.layerY
+				}), i[a] = o, { shapes: i });
+			}
+		}
+		return t;
+	}
+	static finalizeCreation(e, t) {
+		let { shapes: n } = e, r = [...n], i = Math.max(...e.shapes.map((e) => parseInt(e.id) || 0), 0), a = r.findIndex((t) => t.id === e.isDrawingShapeId);
+		if (a !== -1 && r[a].points.length > 2) {
+			let e = r[a];
+			return e.id = `${i + 1}`, t(r), {
+				isDrawing: !1,
+				shapes: r,
+				isDrawingShapeId: void 0
+			};
+		}
+		return e;
+	}
+	static handleMouseMove(e, t) {
+		return e;
+	}
+};
+//#endregion
+export { e as PolygonShape };

package/dist/author/shapes/rectagle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/shapes/rectagle.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 class RectangleShape {
+    static name: string;
+    static create(shapes: any, e: any): {
+        shapes: any[];
+        isDrawing: boolean;
+        isDrawingShapeId: string;
+    };
+    static finalizeCreation(state: any, props: any): any;
+    static handleMouseMove(state: any, e: any): any;
+}

package/dist/author/shapes/rectagle.js

@@ -0,0 +1,57 @@
+//#region src/author/shapes/rectagle.ts
+var e = class {
+	static name = "rectangle";
+	static create(e, t) {
+		let n = [...e], r = {
+			id: `${(Math.max(...n.map((e) => parseInt(e.id)), 0) || 0) + 1}`,
+			height: 0,
+			width: 0,
+			x: t.evt.layerX,
+			y: t.evt.layerY,
+			group: "rectangles",
+			index: n.length
+		};
+		return n.push(r), {
+			shapes: n,
+			isDrawing: !0,
+			isDrawingShapeId: r.id
+		};
+	}
+	static finalizeCreation(e, t) {
+		let n = e.shapes.findIndex((t) => t.id === e.isDrawingShapeId);
+		if (n !== -1) {
+			let t = e.shapes[n];
+			return t.width > 0 && t.height > 0 ? {
+				...e,
+				isDrawing: !1,
+				stateShapes: !1,
+				isDrawingShapeId: void 0
+			} : {
+				...e,
+				isDrawing: !1,
+				stateShapes: !1,
+				isDrawingShapeId: void 0,
+				shapes: e.shapes.filter((t) => t.id !== e.isDrawingShapeId)
+			};
+		}
+		return {
+			...e,
+			isDrawing: !1,
+			stateShapes: !1,
+			isDrawingShapeId: void 0
+		};
+	}
+	static handleMouseMove(e, t) {
+		let { isDrawing: n, isDrawingShapeId: r, shapes: i } = e;
+		if (n) {
+			let e = [...i], n = e.findIndex((e) => e.id === r);
+			if (n !== -1) {
+				let r = e[n];
+				return r.width = t.evt.layerX - r.x, r.height = t.evt.layerY - r.y, { shapes: e };
+			}
+		}
+		return e;
+	}
+};
+//#endregion
+export { e as RectangleShape };

package/dist/author/shapes/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/shapes/utils.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 SUPPORTED_SHAPES: {
+    CIRCLE: string;
+    POLYGON: string;
+    RECTANGLE: string;
+    NONE: string;
+};
+export declare const SHAPE_GROUPS: {
+    CIRCLES: string;
+    POLYGONS: string;
+    RECTANGLES: string;
+};

package/dist/author/shapes/utils.js

@@ -0,0 +1,16 @@
+import { CircleShape as e } from "./circle.js";
+import { RectangleShape as t } from "./rectagle.js";
+import { PolygonShape as n } from "./polygon.js";
+//#region src/author/shapes/utils.ts
+var r = {
+	CIRCLE: e.name,
+	POLYGON: n.name,
+	RECTANGLE: t.name,
+	NONE: "none"
+}, i = {
+	CIRCLES: "circles",
+	POLYGONS: "polygons",
+	RECTANGLES: "rectangles"
+};
+//#endregion
+export { i as SHAPE_GROUPS, r as SUPPORTED_SHAPES };