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

package/dist/author/root.js

@@ -0,0 +1,142 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import t from "./image-container.js";
+import n from "react";
+import r from "prop-types";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+import { InputContainer as s, layout as c, settings as l } from "@pie-lib/config-ui";
+import u from "@pie-lib/editable-html-tip-tap";
+import d from "@mui/material/Typography";
+//#region src/author/root.tsx
+var { Panel: f, toggle: p, dropdown: m } = l, h = o(s)(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(1),
+	width: "100%"
+})), g = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), _ = class extends n.Component {
+	onPromptChanged = (t) => {
+		let { model: n, onModelChanged: r } = this.props;
+		r({
+			...e(n),
+			prompt: t
+		});
+	};
+	onTeacherInstructionsChanged = (e) => {
+		let { model: t, onModelChanged: n } = this.props;
+		n({
+			...t,
+			teacherInstructions: e
+		});
+	};
+	onUpdateImageDimension = (e) => {
+		let { model: t, onModelChanged: n } = this.props;
+		n({
+			...t,
+			imageDimensions: e
+		});
+	};
+	onImageUpload = (e) => {
+		let { model: t, onModelChanged: n } = this.props;
+		n({
+			...t,
+			imageUrl: e
+		});
+	};
+	render() {
+		let { configuration: e, imageSupport: r, model: o, onConfigurationChanged: s, onModelChanged: l, uploadSoundSupport: _ } = this.props, { baseInputConfiguration: v = {}, backgroundImage: y = {}, contentDimensions: b = {}, maxImageWidth: x = {}, maxImageHeight: S = {}, prompt: C = {}, settingsPanelDisabled: w, spellCheck: T = {}, teacherInstructions: E = {}, withRubric: D = {}, language: O = {}, languageChoices: k = {}, mathMlOptions: A = {} } = e || {}, { backgroundImageEnabled: j, errors: M = {}, extraCSSRules: N, promptEnabled: P, spellCheckEnabled: F, teacherInstructionsEnabled: I, toolbarEditorPosition: L } = o || {}, { prompt: R, teacherInstructions: z } = M, B = x && x.prompt, V = S && S.prompt, H = { position: L === "top" ? "top" : "bottom" }, U = {
+			backgroundImageEnabled: y.settings && p(y.label),
+			promptEnabled: C.settings && p(C.label),
+			"language.enabled": O.settings && p(O.label, !0),
+			language: O.settings && O.enabled && m(k.label, k.options)
+		}, W = {
+			teacherInstructionsEnabled: E.settings && p(E.label),
+			spellCheckEnabled: T.settings && p(T.label),
+			rubricEnabled: D?.settings && p(D?.label)
+		}, G = (e = {}) => ({
+			...v,
+			...e
+		});
+		return /* @__PURE__ */ a(c.ConfigLayout, {
+			extraCSSRules: N,
+			dimensions: b,
+			hideSettings: w,
+			settings: /* @__PURE__ */ i(f, {
+				model: o,
+				onChangeModel: l,
+				configuration: e,
+				onChangeConfiguration: s,
+				groups: {
+					Settings: U,
+					Properties: W
+				}
+			}),
+			children: [
+				I && /* @__PURE__ */ a(h, {
+					label: E.label,
+					children: [/* @__PURE__ */ i(u, {
+						markup: o.teacherInstructions || "",
+						onChange: this.onTeacherInstructionsChanged,
+						imageSupport: r,
+						nonEmpty: !1,
+						error: z,
+						toolbarOpts: H,
+						pluginProps: G(E?.inputConfiguration),
+						spellCheck: F,
+						maxImageWidth: x && x.teacherInstructions || B,
+						maxImageHeight: S && S.teacherInstructions || V,
+						uploadSoundSupport: _,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: A
+					}), z && /* @__PURE__ */ i(g, { children: z })]
+				}),
+				P && /* @__PURE__ */ a(h, {
+					label: "Item Stem",
+					children: [/* @__PURE__ */ i(u, {
+						markup: o.prompt,
+						onChange: this.onPromptChanged,
+						error: R,
+						toolbarOpts: H,
+						spellCheck: F,
+						pluginProps: G(C?.inputConfiguration),
+						imageSupport: r,
+						maxImageWidth: B,
+						maxImageHeight: V,
+						uploadSoundSupport: _,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: A
+					}), R && /* @__PURE__ */ i(g, { children: R })]
+				}),
+				j && /* @__PURE__ */ a(n.Fragment, { children: [/* @__PURE__ */ i(d, {
+					variant: "h6",
+					children: "Define Background Image"
+				}), /* @__PURE__ */ i(t, {
+					imageUrl: o.imageUrl,
+					onUpdateImageDimension: this.onUpdateImageDimension,
+					onImageUpload: this.onImageUpload,
+					imageDimensions: o.imageDimensions,
+					insertImage: r && r.add
+				})] })
+			]
+		});
+	}
+};
+_.propTypes = {
+	configuration: r.object,
+	model: r.object.isRequired,
+	imageSupport: r.shape({
+		add: r.func,
+		delete: r.func
+	}),
+	uploadSoundSupport: r.shape({
+		add: r.func,
+		delete: r.func
+	}),
+	onModelChanged: r.func.isRequired,
+	onConfigurationChanged: r.func.isRequired
+};
+//#endregion
+export { _ as default };

package/dist/controller/defaults.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/controller/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: {
+    backgroundImageEnabled: boolean;
+    imageDimensions: {
+        height: number;
+        width: number;
+    };
+    imageUrl: string;
+    prompt: string;
+    promptEnabled: boolean;
+    spellCheckEnabled: boolean;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,18 @@
+//#region src/controller/defaults.ts
+var e = {
+	backgroundImageEnabled: !0,
+	imageDimensions: {
+		height: 0,
+		width: 0
+	},
+	imageUrl: "",
+	prompt: "",
+	promptEnabled: !0,
+	spellCheckEnabled: !0,
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	toolbarEditorPosition: "bottom"
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/controller/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 declare const normalize: (question: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<unknown>;
+export declare const createDefaultModel: (model?: {}) => Promise<unknown>;
+export declare function outcome(): Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,46 @@
+import e from "./defaults.js";
+import t from "debug";
+//#region src/controller/index.ts
+var n = t("pie-elements:drawing-response:controller"), r = (t) => ({
+	...e,
+	...t
+});
+function i(e, t, n) {
+	let i = r(e), { extraCSSRules: a, imageUrl: o, imageDimensions: s, prompt: c, promptEnabled: l, backgroundImageEnabled: u, language: d } = i;
+	return new Promise((e) => {
+		let t = {
+			disabled: n.mode !== "gather",
+			mode: n.mode,
+			imageDimensions: s,
+			imageUrl: o,
+			prompt: l ? c : null,
+			backgroundImageEnabled: u,
+			language: d,
+			extraCSSRules: a
+		};
+		n.role === "instructor" && (n.mode === "view" || n.mode === "evaluate") ? t.teacherInstructions = i.teacherInstructionsEnabled ? i.teacherInstructions : null : t.teacherInstructions = null, e(t);
+	});
+}
+var a = (t = {}) => new Promise((n) => {
+	n({
+		...e,
+		...t
+	});
+});
+function o() {
+	return new Promise((e) => {
+		n("outcome..."), e({
+			score: 0,
+			completed: "n/a",
+			note: "Requires manual scoring"
+		});
+	});
+}
+var s = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), c = (e = {}, t = {}) => {
+	let n = {};
+	return ["teacherInstructions", "prompt"].forEach((r) => {
+		t[r]?.required && !s(e[r]) && (n[r] = "This field is required.");
+	}), n;
+};
+//#endregion
+export { a as createDefaultModel, i as model, r as normalize, o as outcome, c as validate };

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

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

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

@@ -0,0 +1,36 @@
+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/delivery/drawing-response/button.tsx
+var i = n(r)({
+	fontSize: "0.9em",
+	marginLeft: 8,
+	minWidth: 32,
+	height: 32,
+	"& span": { "& svg": {
+		width: "1.3em !important",
+		height: "1.3em !important"
+	} }
+}), a = ({ label: e, onClick: n, disabled: r, title: a }) => /* @__PURE__ */ t(i, {
+	title: a,
+	onClick: n,
+	disabled: r,
+	size: "small",
+	variant: "contained",
+	children: e
+});
+a.propTypes = {
+	disabled: e.bool,
+	label: e.oneOfType([e.string, e.object]),
+	onClick: e.func,
+	title: e.string
+}, a.defaultProps = {
+	disabled: !1,
+	label: "Add",
+	onClick: () => {},
+	title: ""
+};
+//#endregion
+export { a as default };

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

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/constants.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: {
+    tools: {
+        type: string;
+        label: string;
+        icon: string;
+    }[];
+};
+export default _default;

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

@@ -0,0 +1,40 @@
+//#region src/delivery/drawing-response/constants.ts
+var e = { tools: [
+	{
+		type: "Select",
+		label: "Select",
+		icon: "mdiCursorDefault"
+	},
+	{
+		type: "FreePathDrawable",
+		label: "Free Draw",
+		icon: "mdiPencil"
+	},
+	{
+		type: "LineDrawable",
+		label: "Line",
+		icon: "mdiMinus"
+	},
+	{
+		type: "RectangleDrawable",
+		label: "Rectangle",
+		icon: "mdiRectangle"
+	},
+	{
+		type: "CircleDrawable",
+		label: "Circle",
+		icon: "mdiCircle"
+	},
+	{
+		type: "Text",
+		label: "Text Entry",
+		icon: "mdiFormatColorText"
+	},
+	{
+		type: "EraserDrawable",
+		label: "Eraser",
+		icon: "mdiEraser"
+	}
+] };
+//#endregion
+export { e as default };

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

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/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 Container extends Component {
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        session: PropTypes.Validator<object>;
+        onSessionChange: PropTypes.Validator<(...args: any[]) => any>;
+        imageDimensions: PropTypes.Validator<object>;
+        imageUrl: PropTypes.Validator<string>;
+        backgroundImageEnabled: PropTypes.Validator<boolean>;
+        language: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    setTranslatedState(language: any): void;
+    UNSAFE_componentWillReceiveProps(props: any): void;
+    setDimensions(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleMakeToolActive(tool: any): void;
+    checkIfToolIsDisabled: any;
+    handleColorChange(type: any, color: any): void;
+    render(): React.JSX.Element;
+}
+export default Container;

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

@@ -0,0 +1,212 @@
+import e from "./constants.js";
+import t from "./button.js";
+import n from "./drawable-palette.js";
+import r from "./drawable-main.js";
+import i from "./drawable-text.js";
+import a from "./icon.js";
+import { Component as o } from "react";
+import s from "prop-types";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+import d from "@pie-lib/translator";
+//#region src/delivery/drawing-response/container.tsx
+var { tools: f } = e, { translator: p } = d, m = u("div")(({ theme: e }) => ({ marginTop: e.spacing(2) })), h = u("div")(({ theme: e }) => ({
+	border: "1px solid #E0E1E6",
+	borderRadius: "5px",
+	marginTop: e.spacing(2),
+	backgroundColor: "#ECEDF1"
+})), g = u("div")({
+	minHeight: 350,
+	backgroundColor: "#fff"
+}), _ = u("div")(({ theme: e }) => ({
+	borderBottom: "1px solid #E0E1E6",
+	borderTopLeftRadius: "5px",
+	borderTopRightRadius: "5px",
+	padding: "12px 8px 4px",
+	boxSizing: "border-box",
+	maxWidth: "calc(100% - 163px)",
+	"& button": { marginBottom: e.spacing(1) }
+})), v = [
+	"red",
+	"orange",
+	"yellow",
+	"violet",
+	"blue",
+	"green",
+	"white",
+	"black"
+].map((e) => ({
+	value: e,
+	label: e
+})), y = class extends o {
+	static propTypes = {
+		disabled: s.bool,
+		session: s.object.isRequired,
+		onSessionChange: s.func.isRequired,
+		imageDimensions: s.object.isRequired,
+		imageUrl: s.string.isRequired,
+		backgroundImageEnabled: s.bool.isRequired,
+		language: s.string
+	};
+	constructor(e) {
+		super(e);
+		let t = new i();
+		this.state = {
+			scale: 1,
+			drawableDimensions: {
+				height: 0,
+				width: 0
+			},
+			toolActive: f[0],
+			fillColor: "white",
+			fillColorList: [
+				{
+					value: "transparent",
+					label: "no fill"
+				},
+				{
+					value: "lightblue",
+					label: "light blue"
+				},
+				{
+					value: "lightyellow",
+					label: "light yellow"
+				},
+				...v
+			],
+			outlineColor: "black",
+			outlineColorList: v,
+			paintColor: "red",
+			paintColorList: v,
+			TextEntry: t
+		};
+	}
+	setTranslatedState(e) {
+		let t = v.map((t) => ({
+			value: t.value,
+			label: p.t(`drawingResponse.${t.label}`, { lng: e })
+		}));
+		this.setState({
+			fillColorList: [
+				{
+					value: "transparent",
+					label: p.t("drawingResponse.noFill", { lng: e })
+				},
+				{
+					value: "lightblue",
+					label: p.t("drawingResponse.lightblue", { lng: e })
+				},
+				{
+					value: "lightyellow",
+					label: p.t("drawingResponse.lightyellow", { lng: e })
+				},
+				...t
+			],
+			paintColor: p.t("drawingResponse.red", { lng: e }),
+			outlineColorList: t,
+			paintColorList: t
+		});
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { language: t } = e;
+		this.setTranslatedState(t);
+	}
+	setDimensions() {
+		let e = setInterval(() => {
+			try {
+				let { height: e, width: t } = this.drawable.getBoundingClientRect(), n = this.props.session.width || t;
+				e !== 0 && t !== 0 && this.setState({ drawableDimensions: {
+					height: e,
+					width: n
+				} });
+			} catch (e) {
+				console.warn("setDimensions Error: ", e);
+			} finally {
+				clearInterval(e);
+			}
+		}, 100);
+	}
+	componentDidMount() {
+		let { language: e } = this.props;
+		this.setTranslatedState(e), this.setDimensions(), this.observer = new MutationObserver((e) => {
+			e.forEach(() => {
+				let e = document.getElementById("question-container")?.style?.cssText, t = (e?.substring(e.indexOf("--pie-zoom") + 11, e.lastIndexOf("%")))?.replace(/\s/g, "");
+				t ? parseFloat(t) / 100 !== this.state.scale && this.setState({ scale: parseFloat(t) / 100 }) : !t && this.state.scale !== 1 && this.setState({ scale: 1 });
+			});
+		}), this.resizeObserver = new ResizeObserver(() => {
+			this.setDimensions();
+		}), this.drawable && this.resizeObserver.observe(this.drawable);
+		let t = document.getElementById("question-container");
+		t && this.observer.observe(t, {
+			attributes: !0,
+			attributeFilter: ["style"]
+		});
+	}
+	componentWillUnmount() {
+		let { TextEntry: e } = this.state;
+		e.removeEventListeners(), this.observer?.disconnect(), this.resizeObserver?.disconnect();
+	}
+	handleMakeToolActive(e) {
+		let { TextEntry: t } = this.state, { type: n } = e, { language: r } = this.props;
+		n === "Text" ? (t.addNewTextEntry(r), this.setState({ updatedAt: /* @__PURE__ */ new Date() })) : this.setState({ toolActive: e });
+	}
+	checkIfToolIsDisabled = (e) => {
+		if (this.props.disabled) return !0;
+		let { toolActive: t } = this.state;
+		return e === "Text" ? !1 : e === t.type;
+	};
+	handleColorChange(e, t) {
+		let n = `${e}Color`;
+		this.setState({ [n]: t });
+	}
+	render() {
+		let { disabled: e, imageUrl: i, imageDimensions: o, onSessionChange: s, session: u, backgroundImageEnabled: d, language: p } = this.props, { drawableDimensions: v, toolActive: y, fillColor: b, fillColorList: x, outlineColor: S, outlineColorList: C, paintColor: w, paintColorList: T, TextEntry: E } = this.state, D = v.height * this.state.scale;
+		return /* @__PURE__ */ l(m, { children: [!e && /* @__PURE__ */ c(n, {
+			fillColor: b,
+			fillList: x,
+			outlineColor: S,
+			outlineList: C,
+			paintColor: w,
+			paintList: T,
+			onFillColorChange: (e) => this.handleColorChange("fill", e),
+			onOutlineColorChange: (e) => this.handleColorChange("outline", e),
+			onPaintColorChange: (e) => this.handleColorChange("paint", e),
+			language: p
+		}), /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(_, { children: f.map((e) => {
+			let { type: n, label: r, icon: i } = e;
+			return /* @__PURE__ */ c(t, {
+				title: r,
+				disabled: this.checkIfToolIsDisabled(n),
+				onClick: () => this.handleMakeToolActive(e),
+				label: /* @__PURE__ */ c(a, { path: i })
+			}, n);
+		}) }), /* @__PURE__ */ c(g, {
+			ref: (e) => {
+				this.drawable = e;
+			},
+			style: {
+				height: D,
+				maxHeight: D,
+				overflow: "scroll"
+			},
+			children: /* @__PURE__ */ c(r, {
+				scale: this.state.scale,
+				session: u,
+				disabled: e,
+				onSessionChange: s,
+				fillColor: b,
+				outlineColor: S,
+				paintColor: w,
+				imageUrl: i,
+				drawableDimensions: v,
+				imageDimensions: o,
+				toolActive: y,
+				TextEntry: E,
+				backgroundImageEnabled: d,
+				language: p
+			})
+		})] })] });
+	}
+};
+//#endregion
+export { y as default };

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

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-circle.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 DrawableHelper from './drawable-helper.js';
+export default class CircleDrawable extends DrawableHelper {
+    static TYPE: string;
+    constructor(props: any);
+    registerMovement(x: any, y: any): void;
+    handleOnClick(props: any): void;
+    handleDragEnd: any;
+    render(props: any): React.JSX.Element;
+}

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

@@ -0,0 +1,51 @@
+import e from "./drawable-helper.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Circle as n } from "react-konva";
+//#region src/delivery/drawing-response/drawable-circle.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, "Circle"), o = class n extends e {
+	static TYPE = "CircleDrawable";
+	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;
+		let o = this.startx - this.x, s = this.starty - this.y;
+		this.radius = Math.sqrt(o * o + s * s);
+	}
+	registerMovement(e, t) {
+		this.x = e, this.y = t;
+		let n = this.startx - this.x, r = this.starty - this.y;
+		this.radius = Math.sqrt(n * n + r * r);
+	}
+	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, {
+			draggable: n,
+			radius: this.radius,
+			x: this.startx,
+			y: this.starty,
+			fill: this.paintColor || this.fillColor,
+			onClick: () => this.handleOnClick(e),
+			onDragEnd: this.handleDragEnd.bind(this, e),
+			onMouseEnter: i,
+			onMouseLeave: o,
+			stroke: this.outlineColor
+		}, r);
+	}
+};
+//#endregion
+export { o as default };