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

package/dist/author/hotspot-circle.js

@@ -0,0 +1,124 @@
+import e from "./DeleteWidget.js";
+import t from "react";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Circle as a, Group as o, Transformer as s } from "react-konva";
+//#region src/author/hotspot-circle.tsx
+function c(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function l(e, t) {
+	return !e || c(e) ? e : c(e.default) ? e.default : t && c(e[t]) ? e[t] : t && c(e[t]?.default) ? e[t].default : e;
+}
+var u = l(s, "Transformer"), d = l(o, "Group"), f = l(a, "Circle"), p = class extends t.Component {
+	constructor(e) {
+		super(e), this.state = {
+			hovered: !1,
+			isDragging: !1
+		}, this.shapeRef = t.createRef(), this.trRef = t.createRef();
+	}
+	handleClick = (e) => {
+		let { radius: t, isDrawing: n, onClick: r, id: i } = this.props;
+		t <= 0 && n || (e.cancelBubble = !0, r(i));
+	};
+	handleMouseEnter = () => {
+		document.body.style.cursor = "pointer", this.setState({ hovered: !0 }), this.trRef.current.setNode(this.shapeRef.current), this.trRef.current.getLayer().batchDraw();
+	};
+	handleMouseLeave = () => {
+		this.state.isDragging || this.setState({ hovered: !1 }), document.body.style.cursor = "default";
+	};
+	handleOnDragEnd = (e) => {
+		let { onDragEnd: t, id: n } = this.props;
+		this.setState({ isDragging: !1 }), t(n, {
+			x: e.target.x(),
+			y: e.target.y()
+		});
+	};
+	onResizeEnd = () => {
+		let { onDragEnd: e, id: t } = this.props, n = this.shapeRef.current, r = n.scaleX() === 1 ? n.scaleY() : n.scaleX(), i = Math.max(n.radius() * r, 5);
+		this.setState({ isDragging: !1 }), e(t, {
+			x: n.x(),
+			y: n.y(),
+			radius: i
+		}), n.scaleX(1), n.scaleY(1);
+	};
+	handleDelete = (e) => {
+		let { onDeleteShape: t } = this.props;
+		t(e);
+	};
+	onTransform = () => {
+		let e = this.shapeRef.current, t = (e.scaleX() + e.scaleY()) / 2;
+		e.scaleX(t), e.scaleY(t);
+	};
+	render() {
+		let { correct: t, radius: n, hotspotColor: a, id: o, outlineColor: s, x: c, y: l, strokeWidth: p = 5, selectedHotspotColor: m, hoverOutlineColor: h } = this.props, { hovered: g, isDragging: _ } = this.state, v = isNaN(n) || n <= 0 ? 5 : n;
+		return /* @__PURE__ */ i(d, {
+			onMouseLeave: this.handleMouseLeave,
+			onMouseEnter: this.handleMouseEnter,
+			padding: 12,
+			children: [
+				/* @__PURE__ */ r(f, {
+					ref: this.shapeRef,
+					radius: v,
+					fill: t && m ? m : a,
+					onClick: this.handleClick,
+					onTap: this.handleClick,
+					draggable: !0,
+					stroke: s,
+					strokeWidth: t ? p : 0,
+					onDragStart: () => this.setState({ isDragging: !0 }),
+					onDragEnd: this.handleOnDragEnd,
+					onTransformStart: () => this.setState({ isDragging: !0 }),
+					onTransformEnd: this.onResizeEnd,
+					x: c,
+					y: l,
+					cursor: "pointer"
+				}),
+				!_ && g && /* @__PURE__ */ r(e, {
+					id: o,
+					radius: v,
+					x: c,
+					y: l,
+					handleWidgetClick: this.handleDelete,
+					isCircle: !0
+				}),
+				this.state.hovered && /* @__PURE__ */ r(u, {
+					borderStroke: h || null,
+					ref: this.trRef,
+					rotateEnabled: !1,
+					keepRatio: !0,
+					onTransform: this.onTransform,
+					enabledAnchors: [
+						"middle-left",
+						"middle-right",
+						"top-center",
+						"bottom-center"
+					],
+					boundBoxFunc: (e, t) => {
+						if (t.width < 10 || t.height < 10) return e;
+						let n = e.x + e.width / 2, r = e.y + e.height / 2, i = t.x + t.width / 2, a = t.y + t.height / 2, o = n - i, s = r - a;
+						return t.x += o, t.y += s, t;
+					}
+				})
+			]
+		});
+	}
+};
+p.propTypes = {
+	correct: n.bool,
+	isDrawing: n.bool.isRequired,
+	id: n.string.isRequired,
+	radius: n.number.isRequired,
+	hotspotColor: n.string.isRequired,
+	selectedHotspotColor: n.string,
+	hoverOutlineColor: n.string,
+	onClick: n.func.isRequired,
+	onDeleteShape: n.func.isRequired,
+	onDragEnd: n.func.isRequired,
+	outlineColor: n.string.isRequired,
+	x: n.number.isRequired,
+	y: n.number.isRequired,
+	strokeWidth: n.number
+}, p.defaultProps = { correct: !1 };
+//#endregion
+export { p as default };

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

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-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';
+export declare class Container extends Component {
+    static getDerivedStateFromProps(nextProps: any, prevState: any): any;
+    constructor(props: any);
+    handleFileRead: any;
+    enableDropzone: () => void;
+    disableDropzone: () => void;
+    handleOnPaste: any;
+    handleOnDrop: any;
+    handleOnDragOver: any;
+    handleOnDragExit: any;
+    onUpdateShapes: any;
+    onDeleteShape: any;
+    handleClearAll: () => any;
+    handleEnableDrag: () => void;
+    handleDisableDrag: () => void;
+    handleInputClick: any;
+    handleFinishDrawing: any;
+    render(): React.JSX.Element;
+}
+export default Container;

package/dist/author/hotspot-container.js

@@ -0,0 +1,210 @@
+import e from "./button.js";
+import { CircleButton as t } from "./buttons/circle.js";
+import { PolygonButton as n } from "./buttons/polygon.js";
+import { RectangleButton as r } from "./buttons/rectangle.js";
+import { SUPPORTED_SHAPES as i } from "./shapes/utils.js";
+import { getAllShapes as a, groupShapes as o } from "./utils.js";
+import s from "./hotspot-drawable.js";
+import c from "./upload-control.js";
+import { Component as l } from "react";
+import u from "prop-types";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { styled as p } from "@mui/material/styles";
+//#region src/author/hotspot-container.tsx
+var m = p("div")(({ theme: e }) => ({
+	marginTop: e.spacing(1.5),
+	marginBottom: e.spacing(2.5)
+})), h = p("div")(({ theme: e, hasErrors: t, dropzoneActive: n }) => ({
+	border: "1px solid #E0E1E6",
+	borderRadius: "5px",
+	...n && { border: "1px solid #0032C2" },
+	...t && !n && { border: `1px solid ${e.palette.error.main}` }
+})), g = p("div")({
+	marginRight: "5px",
+	"&:hover": { cursor: "pointer" }
+}), _ = p("div")({
+	alignItems: "center",
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "center"
+}), v = p("div")(({ theme: e }) => ({
+	minHeight: 350,
+	paddingBottom: e.spacing(5),
+	paddingRight: e.spacing(5)
+})), y = p("div")(({ theme: e }) => ({
+	backgroundColor: "#FFF",
+	borderBottom: "1px solid #E0E1E6",
+	borderTopLeftRadius: "5px",
+	borderTopRightRadius: "5px",
+	display: "flex",
+	justifyContent: "flex-end",
+	padding: e.spacing(1)
+})), b = p("div")({ marginRight: "auto" }), x = (e) => e.type.match(/image.*/), S = class extends l {
+	static getDerivedStateFromProps(e, t) {
+		return {
+			...t,
+			shapes: a(e.shapes)
+		};
+	}
+	constructor(e) {
+		super(e), this.state = {
+			dragEnabled: !0,
+			shapes: a(e.shapes),
+			selectedShape: i.NONE
+		}, this.fakeImageHandler = {
+			cancel: () => {},
+			done: (e, t) => this.props.onImageUpload(t),
+			fileChosen: () => {},
+			progress: () => {}
+		};
+	}
+	handleFileRead = (e) => {
+		if (e instanceof Blob) {
+			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
+			});
+		}
+	};
+	enableDropzone = () => this.setState({ dropzoneActive: !0 });
+	disableDropzone = () => this.setState({ dropzoneActive: !1 });
+	handleOnPaste = (e) => {
+		let { files: t } = e.clipboardData;
+		t && x(t[0]) && this.handleFileRead(t[0]);
+	};
+	handleOnDrop = (e) => {
+		e.preventDefault();
+		let { items: t, files: n } = e.dataTransfer;
+		if (t && t[0].kind === "file") {
+			let e = t[0].getAsFile();
+			x(e) && this.handleFileRead(e);
+		} else x(n[0]) && this.handleFileRead(n[0]);
+		this.disableDropzone();
+	};
+	handleOnDragOver = (e) => {
+		e.preventDefault();
+		let { dropzoneActive: t } = this.state;
+		t || this.enableDropzone();
+	};
+	handleOnDragExit = (e) => {
+		e.preventDefault(), this.disableDropzone();
+	};
+	onUpdateShapes = (e) => {
+		let { onUpdateShapes: t } = this.props;
+		this.setState({ shapes: e }, () => t(o(e)));
+	};
+	onDeleteShape = (e) => {
+		let { shapes: t } = this.state;
+		if (t && t.length) {
+			let n = t.filter((t) => t.id !== e);
+			this.onUpdateShapes(n);
+		}
+	};
+	handleClearAll = () => this.onUpdateShapes([]);
+	handleEnableDrag = () => this.setState({ dragEnabled: !0 });
+	handleDisableDrag = () => this.setState({ dragEnabled: !1 });
+	handleInputClick = () => {
+		let { insertImage: e } = this.props;
+		e && e(this.fakeImageHandler);
+	};
+	handleFinishDrawing = () => {
+		this.setState({ selectedShape: i.NONE });
+	};
+	render() {
+		let { dimensions: a, hasErrors: o, hotspotColor: l, imageUrl: u, multipleCorrect: p, onUpdateImageDimension: x, outlineColor: S, strokeWidth: C, preserveAspectRatioEnabled: w, hoverOutlineColor: T, selectedHotspotColor: E } = this.props, { dropzoneActive: D, dragEnabled: O } = this.state, { shapes: k, selectedShape: A } = this.state;
+		return /* @__PURE__ */ d(m, { children: /* @__PURE__ */ f(h, {
+			hasErrors: o,
+			dropzoneActive: D,
+			...O ? {
+				onDragExit: this.handleOnDragExit,
+				onDragLeave: this.handleOnDragExit,
+				onDragOver: this.handleOnDragOver,
+				onDrop: this.handleOnDrop,
+				onPaste: this.handleOnPaste
+			} : {},
+			children: [/* @__PURE__ */ f(y, { children: [
+				/* @__PURE__ */ d(g, {
+					onClick: () => this.setState({ selectedShape: A === i.RECTANGLE ? i.NONE : i.RECTANGLE }),
+					children: /* @__PURE__ */ d(r, { isActive: A === i.RECTANGLE })
+				}),
+				/* @__PURE__ */ d(g, {
+					onClick: () => this.setState({ selectedShape: A === i.POLYGON ? i.NONE : i.POLYGON }),
+					children: /* @__PURE__ */ d(n, { isActive: A === i.POLYGON })
+				}),
+				/* @__PURE__ */ d(g, {
+					onClick: () => this.setState({ selectedShape: A === i.CIRCLE ? i.NONE : i.CIRCLE }),
+					children: /* @__PURE__ */ d(t, { isActive: A === i.CIRCLE })
+				}),
+				u && /* @__PURE__ */ d(b, { children: /* @__PURE__ */ d(c, {
+					label: "Replace Image",
+					onInputClick: this.handleInputClick,
+					setRef: (e) => {
+						this.input = e;
+					}
+				}) }),
+				/* @__PURE__ */ d(e, {
+					disabled: !(k && k.length),
+					onClick: this.handleClearAll,
+					label: "Clear all"
+				})
+			] }), /* @__PURE__ */ d(v, {
+				ref: (e) => {
+					this.imageSection = e;
+				},
+				children: u ? /* @__PURE__ */ d(s, {
+					dimensions: a,
+					disableDrag: this.handleDisableDrag,
+					enableDrag: this.handleEnableDrag,
+					shapeType: this.state.selectedShape,
+					handleFinishDrawing: this.handleFinishDrawing,
+					imageUrl: u,
+					hotspotColor: l,
+					selectedHotspotColor: E,
+					hoverOutlineColor: T,
+					multipleCorrect: p,
+					onUpdateImageDimension: x,
+					onUpdateShapes: this.onUpdateShapes,
+					onDeleteShape: this.onDeleteShape,
+					outlineColor: S,
+					shapes: k,
+					strokeWidth: C,
+					preserveAspectRatioEnabled: w
+				}) : /* @__PURE__ */ f(_, { children: [
+					/* @__PURE__ */ d("label", { children: "Drag and drop or upload image from computer" }),
+					/* @__PURE__ */ d("br", {}),
+					/* @__PURE__ */ d(c, {
+						label: "Upload Image",
+						onInputClick: this.handleInputClick,
+						setRef: (e) => {
+							this.input = e;
+						}
+					})
+				] })
+			})]
+		}) });
+	}
+};
+S.propTypes = {
+	dimensions: u.object.isRequired,
+	imageUrl: u.string.isRequired,
+	hotspotColor: u.string.isRequired,
+	selectedHotspotColor: u.string,
+	hoverOutlineColor: u.string,
+	multipleCorrect: u.bool.isRequired,
+	onImageUpload: u.func.isRequired,
+	onUpdateImageDimension: u.func.isRequired,
+	insertImage: u.func,
+	onUpdateShapes: u.func.isRequired,
+	outlineColor: u.string.isRequired,
+	shapes: u.shape({
+		rectangles: u.array,
+		polygons: u.array
+	}).isRequired,
+	strokeWidth: u.number,
+	preserveAspectRatioEnabled: u.bool,
+	hasErrors: u.bool
+}, S.defaultProps = { strokeWidth: 5 };
+//#endregion
+export { S as default };

package/dist/author/hotspot-drawable.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-drawable.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 Drawable extends React.Component {
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        shapes: any;
+    } | null;
+    constructor(props: any);
+    handleOnMouseDown: any;
+    addPolygonPoint(e: any): any;
+    handleOnMouseUp: any;
+    handleMouseMove: any;
+    handleOnMouseOutOrLeave: any;
+    handleOnDragEnd: any;
+    closeInProgressPolygons: any;
+    handleOnSetAsCorrect: any;
+    handleOnImageLoad: any;
+    initialiseResize: any;
+    checkIfResizeValid(x: any, y: any): boolean;
+    startResizing: any;
+    stopResizing: any;
+    deleteShape: any;
+    render(): React.JSX.Element;
+}
+export default Drawable;

package/dist/author/hotspot-drawable.js

@@ -0,0 +1,312 @@
+import { CircleShape as e } from "./shapes/circle.js";
+import { RectangleShape as t } from "./shapes/rectagle.js";
+import { PolygonShape as n } from "./shapes/polygon.js";
+import { SHAPE_GROUPS as r, SUPPORTED_SHAPES as i } from "./shapes/utils.js";
+import { getUpdatedShapes as a, updateImageDimensions as o } from "./utils.js";
+import s from "./hotspot-rectangle.js";
+import c from "./hotspot-polygon.js";
+import l from "./hotspot-circle.js";
+import u, { createElement as d } from "react";
+import f from "prop-types";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { styled as h } from "@mui/material/styles";
+import { Layer as g, Stage as _ } from "react-konva";
+import { cloneDeep as v } from "@pie-element/shared-lodash";
+//#region src/author/hotspot-drawable.tsx
+function y(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function b(e, t) {
+	return !e || y(e) ? e : y(e.default) ? e.default : t && y(e[t]) ? e[t] : t && y(e[t]?.default) ? e[t].default : e;
+}
+var x = b(_, "Stage"), S = b(g, "Layer"), C = h("div")({ position: "relative" }), w = h("div")({
+	position: "relative",
+	width: "fit-content"
+}), T = h("img")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), E = h("div")({
+	borderBottom: "1px solid #727272",
+	borderRight: "1px solid #727272",
+	bottom: "-10px",
+	cursor: "se-resize",
+	height: "10px",
+	position: "absolute",
+	right: "-10px",
+	width: "10px"
+}), D = h(x)({
+	left: 0,
+	top: 0,
+	position: "absolute"
+}), O = 800, k = class extends u.Component {
+	static getDerivedStateFromProps(e, t) {
+		return e.shapes === t.shapes ? null : { shapes: e.shapes };
+	}
+	constructor(e) {
+		super(e), this.state = {
+			isDrawing: !1,
+			stateShapes: !1,
+			resizing: !1,
+			temporaryPolygon: null,
+			shapes: [],
+			dimensions: {
+				height: 0,
+				width: 0
+			}
+		};
+	}
+	handleOnMouseDown = (r) => {
+		let { shapeType: a, onUpdateShapes: o, shapes: s } = this.props, c, l;
+		if (r.target === r.currentTarget && Object.values(i).includes(a)) {
+			switch (a) {
+				case i.RECTANGLE:
+					c = t.create(s, r);
+					break;
+				case i.CIRCLE:
+					c = e.create(s, r);
+					break;
+				case i.POLYGON:
+					if (l = this.state.isDrawingShapeId, l) {
+						let e = this.addPolygonPoint(r);
+						c = {
+							isDrawing: !0,
+							isDrawingShapeId: l,
+							shapes: e
+						};
+					} else c = n.create(s, r);
+					break;
+				default: return;
+			}
+			this.setState({ ...c }), o(c.shapes);
+		}
+	};
+	addPolygonPoint(e) {
+		let { shapes: t } = n.addPoint(this.state, e, (e) => {
+			this.setState({
+				isDrawing: !1,
+				shapes: e,
+				isDrawingShapeId: void 0
+			}), this.props.onUpdateShapes(e);
+		});
+		return t;
+	}
+	handleOnMouseUp = () => {
+		let { shapeType: n, onUpdateShapes: r } = this.props, a;
+		if (n !== i.POLYGON) {
+			switch (n) {
+				case i.RECTANGLE:
+					a = t.finalizeCreation(this.state, this.props);
+					break;
+				case i.CIRCLE:
+					a = e.finalizeCreation(this.state, this.props);
+					break;
+				default: return;
+			}
+			this.setState({
+				...a,
+				isDrawing: !1
+			}), r(a.shapes);
+		}
+	};
+	handleMouseMove = (r) => {
+		let { shapeType: a, onUpdateShapes: o } = this.props, s;
+		if (!(!this.state.isDrawing || !Object.values(i).includes(a))) {
+			switch (a) {
+				case i.RECTANGLE:
+					s = t.handleMouseMove(this.state, r);
+					break;
+				case i.CIRCLE:
+					s = e.handleMouseMove(this.state, r);
+					break;
+				case i.POLYGON:
+					s = n.handleMouseMove(this.state, r);
+					break;
+				default: return;
+			}
+			this.setState(s), o(s.shapes);
+		}
+	};
+	handleOnMouseOutOrLeave = (e) => {
+		this.state.isDrawing && this.handleOnMouseUp(e);
+	};
+	handleOnDragEnd = (e, t) => {
+		let { shapes: n, onUpdateShapes: r, dimensions: i } = this.props, { width: a, height: o } = i;
+		r(v(n.map((n) => {
+			if (n.id !== e) return n;
+			let r = t.x, i = t.y;
+			if (n.group === "rectangles") return r + n.width < 0 || r > a || i + n.height < 0 || i > o ? null : {
+				...n,
+				...t
+			};
+			if (n.group === "circles") {
+				let e = n.radius;
+				return r + e < 0 || r - e > a || i + e < 0 || i - e > o ? null : {
+					...n,
+					...t
+				};
+			}
+			if (n.group === "polygons") {
+				let e = n.points, r = e.map((e) => e.x), i = e.map((e) => e.y), s = Math.min(...r), c = Math.min(...i), l = Math.max(...r), u = Math.max(...i), d = t.points[0].x - e[0].x, f = t.points[0].y - e[0].y;
+				return s += d, l += d, c += f, u += f, l < 0 || s > a || u < 0 || c > o ? null : {
+					...n,
+					...t
+				};
+			}
+			return n;
+		}).filter((e) => e !== null)));
+	};
+	closeInProgressPolygons = (e) => {
+		let { shapes: t, onUpdateShapes: r } = this.props, i = (t || []).find((e) => e.id === "newPolygon");
+		(e === "newPolygon" || i && this.state.isDrawing) && n.finalizeCreation(this.state, (e) => {
+			this.setState({
+				isDrawing: !1,
+				shapes: e,
+				isDrawingShapeId: void 0
+			}), r(v(e));
+		});
+	};
+	handleOnSetAsCorrect = (e) => {
+		let { id: t } = e, { multipleCorrect: n, shapes: r, onUpdateShapes: i } = this.props, a;
+		a = n ? r.map((e) => (e.id === t && (e.correct = !e.correct), e)) : r.map((e) => (e.correct = e.id === t, e)), i(v(a)), this.closeInProgressPolygons(t);
+	};
+	handleOnImageLoad = ({ target: e }) => {
+		let { onUpdateImageDimension: t } = this.props, n = this.resize, r = getComputedStyle(e), i = parseFloat(r.height), a = parseFloat(r.width), o = a / O, s = a > O ? {
+			height: i / o,
+			width: O
+		} : {
+			height: i,
+			width: a
+		};
+		this.setState({ dimensions: s }, () => t(s)), n.addEventListener("mousedown", this.initialiseResize, !1);
+	};
+	initialiseResize = () => {
+		window.addEventListener("mousemove", this.startResizing, !1), window.addEventListener("mouseup", this.stopResizing, !1);
+	};
+	checkIfResizeValid(e, t) {
+		let { shapes: n } = this.state, r = !0;
+		return n && n.forEach((n) => {
+			let i = n.x + n.width + 5, a = n.y + n.height + 5;
+			(e <= i || t <= a) && (r = !1);
+		}), r;
+	}
+	startResizing = (e) => {
+		let t = e.target.getBoundingClientRect(), n = this.image, { disableDrag: r, preserveAspectRatioEnabled: i, dimensions: s, shapes: c } = this.props, { width: l, height: u } = o(s, {
+			width: e.clientX - t.left,
+			height: e.clientY - t.top
+		}, i);
+		this.checkIfResizeValid(l, u) && l > 150 && u > 150 && n && (n.style.width = `${l}px`, n.style.height = `${u}px`, this.setState({
+			resizing: !0,
+			dimensions: {
+				height: u,
+				width: l
+			},
+			stateShapes: a(s, {
+				width: l,
+				height: u
+			}, c)
+		})), r();
+	};
+	stopResizing = () => {
+		let { enableDrag: e, onUpdateImageDimension: t, onUpdateShapes: n } = this.props, { dimensions: r, stateShapes: i } = this.state;
+		e(), i && n(v(i)), t(r), window.removeEventListener("mousemove", this.startResizing, !1), window.removeEventListener("mouseup", this.stopResizing, !1), this.setState({
+			resizing: !1,
+			stateShapes: !1
+		});
+	};
+	deleteShape = (e) => {
+		this.setState({
+			isDrawing: !1,
+			isDrawingShapeId: void 0
+		}), this.props.onDeleteShape(e);
+	};
+	render() {
+		let { imageUrl: e, dimensions: { height: t, width: n }, hotspotColor: i, outlineColor: a, shapes: o, strokeWidth: u, hoverOutlineColor: f, selectedHotspotColor: h } = this.props, { stateShapes: g, isDrawing: _, dimensions: { height: v, width: y } } = this.state, b = g || o;
+		return /* @__PURE__ */ m(C, { children: [e && /* @__PURE__ */ m(w, { children: [/* @__PURE__ */ p(T, {
+			onLoad: this.handleOnImageLoad,
+			ref: (e) => {
+				this.image = e;
+			},
+			src: e,
+			...t && n ? { style: {
+				height: t,
+				width: n
+			} } : {}
+		}), /* @__PURE__ */ p(E, { ref: (e) => {
+			this.resize = e;
+		} })] }), /* @__PURE__ */ p(D, {
+			height: v || t,
+			width: y || n,
+			onMouseDown: this.handleOnMouseDown,
+			onMouseUp: this.handleOnMouseUp,
+			onMouseMove: this.handleMouseMove,
+			onContentMouseOut: this.handleOnMouseOutOrLeave,
+			onContentMouseLeave: this.handleOnMouseOutOrLeave,
+			children: /* @__PURE__ */ p(S, { children: b.map((e, o) => {
+				let p;
+				switch (e.group) {
+					case r.RECTANGLES:
+						p = s;
+						break;
+					case r.CIRCLES:
+						p = l;
+						break;
+					case r.POLYGONS:
+						p = c;
+						break;
+					default: return null;
+				}
+				return /* @__PURE__ */ d(p, {
+					...e.group === r.CIRCLES ? { radius: e.radius } : {},
+					...e.group === r.RECTANGLES ? {
+						height: e.height,
+						width: e.width
+					} : {},
+					...e.group === r.POLYGONS ? {
+						points: e.points,
+						addPolygonPoint: (e) => this.addPolygonPoint(e)
+					} : {},
+					correct: e.correct,
+					isDrawing: _,
+					hotspotColor: i,
+					hoverOutlineColor: f,
+					selectedHotspotColor: h,
+					id: e.id,
+					key: o,
+					onClick: () => this.handleOnSetAsCorrect(e),
+					onDragEnd: this.handleOnDragEnd,
+					onDeleteShape: this.deleteShape,
+					outlineColor: a,
+					width: e.width,
+					x: e.x,
+					y: e.y,
+					strokeWidth: u,
+					imageHeight: v || t,
+					imageWidth: y || n,
+					...e.group === "polygons" ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {}
+				});
+			}) })
+		})] });
+	}
+};
+k.propTypes = {
+	disableDrag: f.func.isRequired,
+	dimensions: f.object.isRequired,
+	enableDrag: f.func.isRequired,
+	shapeType: f.oneOf(Object.values(i)),
+	imageUrl: f.string.isRequired,
+	handleFinishDrawing: f.func.isRequired,
+	hotspotColor: f.string.isRequired,
+	selectedHotspotColor: f.string,
+	hoverOutlineColor: f.string,
+	multipleCorrect: f.bool.isRequired,
+	onUpdateImageDimension: f.func.isRequired,
+	onUpdateShapes: f.func.isRequired,
+	onDeleteShape: f.func.isRequired,
+	outlineColor: f.string.isRequired,
+	shapes: f.array.isRequired,
+	strokeWidth: f.number,
+	preserveAspectRatioEnabled: f.bool
+};
+//#endregion
+export { k as default };