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

package/dist/author/hotspot-container.js

@@ -4,7 +4,7 @@ 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 { Drawable as s } from "./hotspot-drawable.js";
 import c from "./upload-control.js";
 import { Component as l } from "react";
 import u from "prop-types";
@@ -207,4 +207,4 @@ S.propTypes = {
 	hasErrors: u.bool
 }, S.defaultProps = { strokeWidth: 5 };
 //#endregion
-export { S as default };
+export { S as Container, S as default };

package/dist/author/hotspot-drawable.js

@@ -1,17 +1,17 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import { CircleShape as t } from "./shapes/circle.js";
-import { RectangleShape as n } from "./shapes/rectagle.js";
-import { PolygonShape as r } from "./shapes/polygon.js";
-import { SHAPE_GROUPS as i, SUPPORTED_SHAPES as a } from "./shapes/utils.js";
-import { getUpdatedShapes as o, updateImageDimensions as s } from "./utils.js";
-import c from "./hotspot-rectangle.js";
-import l from "./hotspot-polygon.js";
-import u from "./hotspot-circle.js";
-import d, { createElement as f } from "react";
-import p from "prop-types";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { styled as g } from "@mui/material/styles";
-import { Layer as _, Stage as v } from "react-konva";
+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";
@@ -19,14 +19,14 @@ function y(e) {
 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(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" }), w = g("div")({
+var x = b(_, "Stage"), S = b(g, "Layer"), C = h("div")({ position: "relative" }), w = h("div")({
 	position: "relative",
 	width: "fit-content"
-}), T = g("img")({
+}), T = h("img")({
 	alignItems: "center",
 	display: "flex",
 	justifyContent: "center"
-}), E = g("div")({
+}), E = h("div")({
 	borderBottom: "1px solid #727272",
 	borderRight: "1px solid #727272",
 	bottom: "-10px",
@@ -35,11 +35,11 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 	position: "absolute",
 	right: "-10px",
 	width: "10px"
-}), D = g(x)({
+}), D = h(x)({
 	left: 0,
 	top: 0,
 	position: "absolute"
-}), O = 800, k = class extends d.Component {
+}), O = 800, k = class extends u.Component {
 	static getDerivedStateFromProps(e, t) {
 		return e.shapes === t.shapes ? null : { shapes: e.shapes };
 	}
@@ -56,25 +56,25 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 			}
 		};
 	}
-	handleOnMouseDown = (e) => {
-		let { shapeType: i, onUpdateShapes: o, shapes: s } = this.props, c, l;
-		if (e.target === e.currentTarget && Object.values(a).includes(i)) {
-			switch (i) {
-				case a.RECTANGLE:
-					c = n.create(s, e);
+	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 a.CIRCLE:
-					c = t.create(s, e);
+				case i.CIRCLE:
+					c = e.create(s, r);
 					break;
-				case a.POLYGON:
+				case i.POLYGON:
 					if (l = this.state.isDrawingShapeId, l) {
-						let t = this.addPolygonPoint(e);
+						let e = this.addPolygonPoint(r);
 						c = {
 							isDrawing: !0,
 							isDrawingShapeId: l,
-							shapes: t
+							shapes: e
 						};
-					} else c = r.create(s, e);
+					} else c = n.create(s, r);
 					break;
 				default: return;
 			}
@@ -82,7 +82,7 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 		}
 	};
 	addPolygonPoint(e) {
-		let { shapes: t } = r.addPoint(this.state, e, (e) => {
+		let { shapes: t } = n.addPoint(this.state, e, (e) => {
 			this.setState({
 				isDrawing: !1,
 				shapes: e,
@@ -92,35 +92,35 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 		return t;
 	}
 	handleOnMouseUp = () => {
-		let { shapeType: e, onUpdateShapes: r } = this.props, i;
-		if (e !== a.POLYGON) {
-			switch (e) {
-				case a.RECTANGLE:
-					i = n.finalizeCreation(this.state, this.props);
+		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 a.CIRCLE:
-					i = t.finalizeCreation(this.state, this.props);
+				case i.CIRCLE:
+					a = e.finalizeCreation(this.state, this.props);
 					break;
 				default: return;
 			}
 			this.setState({
-				...i,
+				...a,
 				isDrawing: !1
-			}), r(i.shapes);
+			}), r(a.shapes);
 		}
 	};
-	handleMouseMove = (e) => {
-		let { shapeType: i, onUpdateShapes: o } = this.props, s;
-		if (!(!this.state.isDrawing || !Object.values(a).includes(i))) {
-			switch (i) {
-				case a.RECTANGLE:
-					s = n.handleMouseMove(this.state, e);
+	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 a.CIRCLE:
-					s = t.handleMouseMove(this.state, e);
+				case i.CIRCLE:
+					s = e.handleMouseMove(this.state, r);
 					break;
-				case a.POLYGON:
-					s = r.handleMouseMove(this.state, e);
+				case i.POLYGON:
+					s = n.handleMouseMove(this.state, r);
 					break;
 				default: return;
 			}
@@ -130,45 +130,45 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 	handleOnMouseOutOrLeave = (e) => {
 		this.state.isDrawing && this.handleOnMouseUp(e);
 	};
-	handleOnDragEnd = (t, n) => {
-		let { shapes: r, onUpdateShapes: i, dimensions: a } = this.props, { width: o, height: s } = a;
-		i(e(r.map((e) => {
-			if (e.id !== t) return e;
-			let r = n.x, i = n.y;
-			if (e.group === "rectangles") return r + e.width < 0 || r > o || i + e.height < 0 || i > s ? null : {
-				...e,
-				...n
+	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 (e.group === "circles") {
-				let t = e.radius;
-				return r + t < 0 || r - t > o || i + t < 0 || i - t > s ? null : {
-					...e,
-					...n
+			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 (e.group === "polygons") {
-				let t = e.points, r = t.map((e) => e.x), i = t.map((e) => e.y), a = Math.min(...r), c = Math.min(...i), l = Math.max(...r), u = Math.max(...i), d = n.points[0].x - t[0].x, f = n.points[0].y - t[0].y;
-				return a += d, l += d, c += f, u += f, l < 0 || a > o || u < 0 || c > s ? null : {
-					...e,
-					...n
+			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 e;
+			return n;
 		}).filter((e) => e !== null)));
 	};
-	closeInProgressPolygons = (t) => {
-		let { shapes: n, onUpdateShapes: i } = this.props, a = (n || []).find((e) => e.id === "newPolygon");
-		(t === "newPolygon" || a && this.state.isDrawing) && r.finalizeCreation(this.state, (t) => {
+	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: t,
+				shapes: e,
 				isDrawingShapeId: void 0
-			}), i(e(t));
+			}), r(v(e));
 		});
 	};
-	handleOnSetAsCorrect = (t) => {
-		let { id: n } = t, { multipleCorrect: r, shapes: i, onUpdateShapes: a } = this.props, o;
-		o = r ? i.map((e) => (e.id === n && (e.correct = !e.correct), e)) : i.map((e) => (e.correct = e.id === n, e)), a(e(o)), this.closeInProgressPolygons(n);
+	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 ? {
@@ -191,7 +191,7 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 		}), r;
 	}
 	startResizing = (e) => {
-		let t = e.target.getBoundingClientRect(), n = this.image, { disableDrag: r, preserveAspectRatioEnabled: i, dimensions: a, shapes: c } = this.props, { width: l, height: u } = s(a, {
+		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);
@@ -201,15 +201,15 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 				height: u,
 				width: l
 			},
-			stateShapes: o(a, {
+			stateShapes: a(s, {
 				width: l,
 				height: u
 			}, c)
 		})), r();
 	};
 	stopResizing = () => {
-		let { enableDrag: t, onUpdateImageDimension: n, onUpdateShapes: r } = this.props, { dimensions: i, stateShapes: a } = this.state;
-		t(), a && r(e(a)), n(i), window.removeEventListener("mousemove", this.startResizing, !1), window.removeEventListener("mouseup", this.stopResizing, !1), this.setState({
+		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
 		});
@@ -221,8 +221,8 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 		}), this.props.onDeleteShape(e);
 	};
 	render() {
-		let { imageUrl: e, dimensions: { height: t, width: n }, hotspotColor: r, outlineColor: a, shapes: o, strokeWidth: s, hoverOutlineColor: d, selectedHotspotColor: p } = this.props, { stateShapes: g, isDrawing: _, dimensions: { height: v, width: y } } = this.state, b = g || o;
-		return /* @__PURE__ */ h(C, { children: [e && /* @__PURE__ */ h(w, { children: [/* @__PURE__ */ m(T, {
+		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;
@@ -232,9 +232,9 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 				height: t,
 				width: n
 			} } : {}
-		}), /* @__PURE__ */ m(E, { ref: (e) => {
+		}), /* @__PURE__ */ p(E, { ref: (e) => {
 			this.resize = e;
-		} })] }), /* @__PURE__ */ m(D, {
+		} })] }), /* @__PURE__ */ p(D, {
 			height: v || t,
 			width: y || n,
 			onMouseDown: this.handleOnMouseDown,
@@ -242,35 +242,35 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 			onMouseMove: this.handleMouseMove,
 			onContentMouseOut: this.handleOnMouseOutOrLeave,
 			onContentMouseLeave: this.handleOnMouseOutOrLeave,
-			children: /* @__PURE__ */ m(S, { children: b.map((e, o) => {
-				let m;
+			children: /* @__PURE__ */ p(S, { children: b.map((e, o) => {
+				let p;
 				switch (e.group) {
-					case i.RECTANGLES:
-						m = c;
+					case r.RECTANGLES:
+						p = s;
 						break;
-					case i.CIRCLES:
-						m = u;
+					case r.CIRCLES:
+						p = l;
 						break;
-					case i.POLYGONS:
-						m = l;
+					case r.POLYGONS:
+						p = c;
 						break;
 					default: return null;
 				}
-				return /* @__PURE__ */ f(m, {
-					...e.group === i.CIRCLES ? { radius: e.radius } : {},
-					...e.group === i.RECTANGLES ? {
+				return /* @__PURE__ */ d(p, {
+					...e.group === r.CIRCLES ? { radius: e.radius } : {},
+					...e.group === r.RECTANGLES ? {
 						height: e.height,
 						width: e.width
 					} : {},
-					...e.group === i.POLYGONS ? {
+					...e.group === r.POLYGONS ? {
 						points: e.points,
 						addPolygonPoint: (e) => this.addPolygonPoint(e)
 					} : {},
 					correct: e.correct,
 					isDrawing: _,
-					hotspotColor: r,
-					hoverOutlineColor: d,
-					selectedHotspotColor: p,
+					hotspotColor: i,
+					hoverOutlineColor: f,
+					selectedHotspotColor: h,
 					id: e.id,
 					key: o,
 					onClick: () => this.handleOnSetAsCorrect(e),
@@ -280,7 +280,7 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 					width: e.width,
 					x: e.x,
 					y: e.y,
-					strokeWidth: s,
+					strokeWidth: u,
 					imageHeight: v || t,
 					imageWidth: y || n,
 					...e.group === "polygons" ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {}
@@ -290,23 +290,23 @@ var x = b(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" })
 	}
 };
 k.propTypes = {
-	disableDrag: p.func.isRequired,
-	dimensions: p.object.isRequired,
-	enableDrag: p.func.isRequired,
-	shapeType: p.oneOf(Object.values(a)),
-	imageUrl: p.string.isRequired,
-	handleFinishDrawing: p.func.isRequired,
-	hotspotColor: p.string.isRequired,
-	selectedHotspotColor: p.string,
-	hoverOutlineColor: p.string,
-	multipleCorrect: p.bool.isRequired,
-	onUpdateImageDimension: p.func.isRequired,
-	onUpdateShapes: p.func.isRequired,
-	onDeleteShape: p.func.isRequired,
-	outlineColor: p.string.isRequired,
-	shapes: p.array.isRequired,
-	strokeWidth: p.number,
-	preserveAspectRatioEnabled: p.bool
+	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 };
+export { k as Drawable, k as default };

package/dist/author/hotspot-polygon.js

@@ -87,7 +87,7 @@ var d = u(a, "Circle"), f = u(s, "Line"), p = u(o, "Group"), m = "#00BFFF", h =
 		this.setState({
 			points: a,
 			...this.getOffset(a),
-			isDragging: t ? !1 : this.state.isDragging
+			isDragging: !t && this.state.isDragging
 		}), t && n(r, { points: a });
 	};
 	handleOnDragVertex = (e, t, n) => {
@@ -98,7 +98,7 @@ var d = u(a, "Circle"), f = u(s, "Line"), p = u(o, "Group"), m = "#00BFFF", h =
 		this.setState({
 			points: o,
 			...this.getOffset(o),
-			isDragging: n ? !1 : this.state.isDragging
+			isDragging: !n && this.state.isDragging
 		}), n && r(i, { points: o });
 	};
 	onDragStart = () => {

package/dist/author/index.d.ts

@@ -48,5 +48,6 @@ export default class HotspotConfigure extends HTMLElement {
     insertSound(handler: any): void;
     onDeleteSound(src: any, done: any): void;
     _render(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/dist/author/index.js

@@ -1,4 +1,4 @@
-import e from "./root.js";
+import { Root as e } from "./root.js";
 import t from "./defaults.js";
 import n from "react";
 import { createRoot as r } from "react-dom/client";
@@ -135,8 +135,11 @@ var u = i("hotspot:configure"), d = class i extends HTMLElement {
 		});
 		this._root ||= r(this), this._root.render(t);
 	}
+	connectedCallback() {
+		this._render();
+	}
 	disconnectedCallback() {
-		this._root && this._root.unmount();
+		this._root &&= (this._root.unmount(), null);
 	}
 };
 //#endregion