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

package/dist/delivery/hotspot/container.js

@@ -19,118 +19,185 @@ var f = d(l, "Stage"), p = d(c, "Layer"), m = s("div")(({ theme: e }) => ({
 	position: "relative",
 	background: e.palette.common.white,
 	border: `${e.spacing(1)} solid ${e.palette.common.white}`,
-	width: "fit-content"
-})), h = s("div")({
+	width: "fit-content",
+	maxWidth: "100%",
+	overflowX: "auto"
+})), h = s("span")({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap"
+}), g = s("div")({
 	position: "relative",
 	width: "fit-content"
-}), g = s("img")({
+}), _ = s("img")({
 	alignItems: "center",
 	display: "flex",
 	justifyContent: "center"
-}), _ = s(f)({
+}), v = s(f)({
 	left: 0,
 	top: 0,
 	position: "absolute"
-}), v = class extends r.Component {
+}), y = class extends r.Component {
+	constructor(e) {
+		super(e), this.state = { focusedShapeId: null };
+	}
 	isSelected(e) {
 		return !!this.props.session.answers.filter((t) => t.id === e.id)[0];
 	}
 	correctness = (e, t) => e ? t : !t;
 	getEvaluateText = (e, t) => t && e ? "Correctly\nselected" : t && !e ? "Should not have\nbeen selected" : !t && e ? "Should have\nbeen selected" : null;
+	getAllShapesSorted = () => {
+		let { shapes: { rectangles: e = [], polygons: t = [], circles: n = [] } } = this.props, r = [
+			...e.map((e) => ({
+				...e,
+				type: "rectangle"
+			})),
+			...t.map((e) => ({
+				...e,
+				type: "polygon"
+			})),
+			...n.map((e) => ({
+				...e,
+				type: "circle"
+			}))
+		];
+		return r.sort((e, t) => String(e.id).localeCompare(String(t.id), void 0, { numeric: !0 })), r;
+	};
+	handleShapeFocus = (e) => {
+		this.setState({ focusedShapeId: e });
+	};
+	handleShapeBlur = () => {
+		this.setState({ focusedShapeId: null });
+	};
+	handleShapeKeyDown = (e, t) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			let { onSelectChoice: n, disabled: r } = this.props;
+			if (!r) {
+				let e = this.getAllShapesSorted().find((e) => e.id === t);
+				e && n({
+					id: t,
+					selected: !this.isSelected(e),
+					selector: "Keyboard"
+				});
+			}
+		}
+	};
 	render() {
-		let { dimensions: { width: r, height: i }, disabled: s, hotspotColor: c, hoverOutlineColor: l, selectedHotspotColor: u, imageUrl: d, isEvaluateMode: f, outlineColor: v, onSelectChoice: y, shapes: { rectangles: b = [], polygons: x = [], circles: S = [] }, scale: C, strokeWidth: w, showCorrect: T } = this.props, E = r * C, D = i * C;
+		let { dimensions: { width: r, height: i }, disabled: s, hotspotColor: c, hoverOutlineColor: l, selectedHotspotColor: u, imageUrl: d, isEvaluateMode: f, outlineColor: y, onSelectChoice: b, shapes: { rectangles: x = [], polygons: S = [], circles: C = [] }, scale: w, strokeWidth: T, showCorrect: E } = this.props, { focusedShapeId: D } = this.state, O = r * w, k = i * w, A = this.getAllShapesSorted();
 		return /* @__PURE__ */ o(m, {
-			style: { padding: w / 2 },
-			children: [d ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(g, {
-				alt: "hotspot-image",
-				height: "auto",
-				src: d,
-				style: {
-					width: E,
-					height: D,
-					maxWidth: E,
-					maxHeight: D
-				}
-			}) }) : null, /* @__PURE__ */ a(_, {
-				height: D + w,
-				width: E + w,
-				x: w / 2,
-				y: w / 2,
-				children: /* @__PURE__ */ o(p, { children: [
-					b.map((t) => {
-						let n = this.isSelected(t), r = f ? this.correctness(t.correct, n) : void 0, i = f ? this.getEvaluateText(t.correct, n) : null, o = !!(f && T && t.correct);
-						return /* @__PURE__ */ a(e, {
-							scale: C,
-							isEvaluateMode: f,
-							isCorrect: r,
-							evaluateText: i,
-							disabled: s,
-							selected: n,
-							height: t.height,
-							hotspotColor: c,
-							hoverOutlineColor: l,
-							selectedHotspotColor: u,
-							id: t.id,
-							onClick: y,
-							outlineColor: v,
-							width: t.width,
-							x: t.x,
-							y: t.y,
-							strokeWidth: w,
-							markAsCorrect: o,
-							showCorrectEnabled: T
-						}, t.id);
-					}),
-					x.map((e) => {
-						let n = this.isSelected(e), r = f ? this.correctness(e.correct, n) : void 0, i = f ? this.getEvaluateText(e.correct, n) : null, o = !!(f && T && e.correct);
-						return /* @__PURE__ */ a(t, {
-							scale: C,
-							isEvaluateMode: f,
-							isCorrect: !!r,
-							evaluateText: i,
-							disabled: s,
-							selected: n,
-							hotspotColor: c,
-							id: e.id,
-							onClick: y,
-							outlineColor: v,
-							points: e.points,
-							strokeWidth: w,
-							markAsCorrect: o,
-							selectedHotspotColor: u,
-							hoverOutlineColor: l,
-							showCorrectEnabled: T
-						}, e.id);
-					}),
-					S.map((e) => {
-						let t = this.isSelected(e), r = f ? this.correctness(e.correct, t) : void 0, i = f ? this.getEvaluateText(e.correct, t) : null, o = !!(f && T && e.correct);
-						return /* @__PURE__ */ a(n, {
-							scale: C,
-							isEvaluateMode: f,
-							isCorrect: r,
-							evaluateText: i,
-							disabled: s,
-							selected: t,
-							radius: e.radius,
-							hotspotColor: c,
-							id: e.id,
-							onClick: y,
-							outlineColor: v,
-							x: e.x,
-							y: e.y,
-							strokeWidth: w,
-							markAsCorrect: o,
-							selectedHotspotColor: u,
-							hoverOutlineColor: l,
-							showCorrectEnabled: T
-						}, e.id);
-					})
-				] })
-			})]
+			style: { padding: T / 2 },
+			children: [
+				d ? /* @__PURE__ */ a(g, { children: /* @__PURE__ */ a(_, {
+					alt: "hotspot-image",
+					height: "auto",
+					src: d,
+					style: {
+						width: O,
+						height: k,
+						maxWidth: O,
+						maxHeight: k
+					}
+				}) }) : null,
+				/* @__PURE__ */ a(v, {
+					height: k + T,
+					width: O + T,
+					x: T / 2,
+					y: T / 2,
+					children: /* @__PURE__ */ o(p, { children: [
+						x.map((t) => {
+							let n = this.isSelected(t), r = f ? this.correctness(t.correct, n) : void 0, i = f ? this.getEvaluateText(t.correct, n) : null, o = !!(f && E && t.correct);
+							return /* @__PURE__ */ a(e, {
+								scale: w,
+								isEvaluateMode: f,
+								isCorrect: r,
+								evaluateText: i,
+								disabled: s,
+								selected: n,
+								height: t.height,
+								hotspotColor: c,
+								hoverOutlineColor: l,
+								selectedHotspotColor: u,
+								id: t.id,
+								onClick: b,
+								outlineColor: y,
+								width: t.width,
+								x: t.x,
+								y: t.y,
+								strokeWidth: T,
+								markAsCorrect: o,
+								showCorrectEnabled: E,
+								focused: D === t.id
+							}, t.id);
+						}),
+						S.map((e) => {
+							let n = this.isSelected(e), r = f ? this.correctness(e.correct, n) : void 0, i = f ? this.getEvaluateText(e.correct, n) : null, o = !!(f && E && e.correct);
+							return /* @__PURE__ */ a(t, {
+								scale: w,
+								isEvaluateMode: f,
+								isCorrect: !!r,
+								evaluateText: i,
+								disabled: s,
+								selected: n,
+								hotspotColor: c,
+								id: e.id,
+								onClick: b,
+								outlineColor: y,
+								points: e.points,
+								strokeWidth: T,
+								markAsCorrect: o,
+								selectedHotspotColor: u,
+								hoverOutlineColor: l,
+								showCorrectEnabled: E,
+								focused: D === e.id
+							}, e.id);
+						}),
+						C.map((e) => {
+							let t = this.isSelected(e), r = f ? this.correctness(e.correct, t) : void 0, i = f ? this.getEvaluateText(e.correct, t) : null, o = !!(f && E && e.correct);
+							return /* @__PURE__ */ a(n, {
+								scale: w,
+								isEvaluateMode: f,
+								isCorrect: r,
+								evaluateText: i,
+								disabled: s,
+								selected: t,
+								radius: e.radius,
+								hotspotColor: c,
+								id: e.id,
+								onClick: b,
+								outlineColor: y,
+								x: e.x,
+								y: e.y,
+								strokeWidth: T,
+								markAsCorrect: o,
+								selectedHotspotColor: u,
+								hoverOutlineColor: l,
+								showCorrectEnabled: E,
+								focused: D === e.id
+							}, e.id);
+						})
+					] })
+				}),
+				A.map((e) => {
+					let t = this.isSelected(e);
+					return /* @__PURE__ */ a(h, {
+						tabIndex: s ? -1 : 0,
+						role: "button",
+						"aria-label": e.ariaLabel || "",
+						"aria-pressed": t,
+						onFocus: () => this.handleShapeFocus(e.id),
+						onBlur: this.handleShapeBlur,
+						onKeyDown: (t) => this.handleShapeKeyDown(t, e.id)
+					}, `focus-${e.id}`);
+				})
+			]
 		});
 	}
 };
-v.propTypes = {
+y.propTypes = {
 	dimensions: i.object.isRequired,
 	disabled: i.bool.isRequired,
 	hotspotColor: i.string.isRequired,
@@ -145,6 +212,6 @@ v.propTypes = {
 	strokeWidth: i.number,
 	scale: i.number,
 	showCorrect: i.bool
-}, v.defaultProps = { scale: 1 };
+}, y.defaultProps = { scale: 1 };
 //#endregion
-export { v as default };
+export { y as Container, y as default };

package/dist/delivery/hotspot/index.d.ts

@@ -10,6 +10,7 @@ import React from 'react';
 declare class HotspotComponent extends React.Component {
     constructor(props: any);
     componentDidMount(): void;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
     onToggle: any;
     render(): React.JSX.Element;

package/dist/delivery/hotspot/index.js

@@ -1,23 +1,25 @@
-import e from "./container.js";
+import { Container as e } from "./container.js";
 import t from "react";
-import * as n from "@pie-lib/render-ui";
-import { Collapsible as r, PreviewPrompt as i, UiLayout as a, color as o, hasMedia as s, hasText as c } from "@pie-lib/render-ui";
-import l from "prop-types";
-import u from "@pie-lib/correct-answer-toggle";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { styled as p } from "@mui/material/styles";
+import { renderMath as n } from "@pie-element/shared-math-rendering-mathjax";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, UiLayout as o, color as s, hasMedia as c, hasText as l } from "@pie-lib/render-ui";
+import u from "react-dom";
+import d from "prop-types";
+import f from "@pie-lib/correct-answer-toggle";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { styled as h } from "@mui/material/styles";
 //#region src/delivery/hotspot/index.tsx
-function m(e) {
+function g(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function h(e, t) {
-	return !e || m(e) ? e : m(e.default) ? e.default : t && m(e[t]) ? e[t] : t && m(e[t]?.default) ? e[t].default : e;
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
 }
-var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt") || h(x.PreviewPrompt, "PreviewPrompt"), v = h(r, "Collapsible") || h(x.Collapsible, "Collapsible"), y = n, b = y.default, x = b && typeof b == "object" ? b : y, S = p(g)({
-	color: o.text(),
-	backgroundColor: o.background(),
+var v = _(o, "UiLayout") || _(C.UiLayout, "UiLayout"), y = _(a, "PreviewPrompt") || _(C.PreviewPrompt, "PreviewPrompt"), b = _(i, "Collapsible") || _(C.Collapsible, "Collapsible"), x = r, S = x.default, C = S && typeof S == "object" ? S : x, w = h(v)({
+	color: s.text(),
+	backgroundColor: s.background(),
 	position: "relative"
-}), C = p(v)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), w = class extends t.Component {
+}), T = h(b)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = class extends t.Component {
 	constructor(e) {
 		super(e), this.state = {
 			showCorrect: !1,
@@ -36,7 +38,10 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		e && this.observer.observe(e, {
 			attributes: !0,
 			attributeFilter: ["style"]
-		});
+		}), n(u.findDOMNode(this));
+	}
+	componentDidUpdate() {
+		n(u.findDOMNode(this));
 	}
 	componentWillUnmount() {
 		this.observer?.disconnect();
@@ -46,57 +51,57 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		this.setState({ showCorrect: !e });
 	};
 	render() {
-		let { session: t, model: { disabled: n, extraCSSRules: r, imageUrl: i, prompt: a, mode: o, multipleCorrect: l, shapes: p, outlineColor: m, hotspotColor: h, hoverOutlineColor: g, selectedHotspotColor: y, dimensions: b, rationale: x, teacherInstructions: w, strokeWidth: T, responseCorrect: E, language: D, fontSizeFactor: O, autoplayAudioEnabled: k, customAudioButton: A }, onSelectChoice: j } = this.props, { showCorrect: M } = this.state, N = o === "evaluate", P = o === "gather", F = N && !E, I = x && (c(x) || s(x));
-		return /* @__PURE__ */ f(S, {
+		let { session: t, model: { disabled: n, extraCSSRules: r, imageUrl: i, prompt: a, mode: o, multipleCorrect: s, shapes: u, outlineColor: d, hotspotColor: h, hoverOutlineColor: g, selectedHotspotColor: _, dimensions: v, rationale: x, teacherInstructions: S, strokeWidth: C, responseCorrect: E, language: D, fontSizeFactor: O, autoplayAudioEnabled: k, customAudioButton: A }, onSelectChoice: j } = this.props, { showCorrect: M } = this.state, N = o === "evaluate", P = o === "gather", F = N && !E, I = x && (l(x) || c(x));
+		return /* @__PURE__ */ m(w, {
 			extraCSSRules: r,
 			id: "main-container",
 			fontSizeFactor: O,
 			children: [
-				w && (c(w) || s(w)) && /* @__PURE__ */ d(C, {
+				S && (l(S) || c(S)) && /* @__PURE__ */ p(T, {
 					labels: {
 						hidden: "Show Teacher Instructions",
 						visible: "Hide Teacher Instructions"
 					},
-					children: /* @__PURE__ */ d(_, {
+					children: /* @__PURE__ */ p(y, {
 						className: "prompt",
-						prompt: w
+						prompt: S
 					})
 				}),
-				a && /* @__PURE__ */ d(_, {
+				a && /* @__PURE__ */ p(y, {
 					className: "prompt",
 					prompt: a,
 					autoplayAudioEnabled: k,
 					customAudioButton: A
 				}),
-				F && /* @__PURE__ */ d(u, {
+				F && /* @__PURE__ */ p(f, {
 					show: F,
 					toggled: M,
 					onToggle: this.onToggle.bind(this),
 					language: D
 				}),
-				i ? /* @__PURE__ */ d(e, {
+				i ? /* @__PURE__ */ p(e, {
 					isEvaluateMode: N,
 					session: t,
-					dimensions: b,
+					dimensions: v,
 					imageUrl: i,
 					hotspotColor: h,
 					hoverOutlineColor: P ? g : void 0,
-					selectedHotspotColor: y,
-					multipleCorrect: l,
-					outlineColor: m,
+					selectedHotspotColor: _,
+					multipleCorrect: s,
+					outlineColor: d,
 					onSelectChoice: j,
-					shapes: p,
+					shapes: u,
 					disabled: n,
-					strokeWidth: T,
+					strokeWidth: C,
 					scale: this.state.scale,
 					showCorrect: M
 				}) : null,
-				I && /* @__PURE__ */ d(v, {
+				I && /* @__PURE__ */ p(b, {
 					labels: {
 						hidden: "Show Rationale",
 						visible: "Hide Rationale"
 					},
-					children: /* @__PURE__ */ d(_, {
+					children: /* @__PURE__ */ p(y, {
 						className: "prompt",
 						prompt: x
 					})
@@ -105,10 +110,10 @@ var g = h(a, "UiLayout") || h(x.UiLayout, "UiLayout"), _ = h(i, "PreviewPrompt")
 		});
 	}
 };
-w.propTypes = {
-	model: l.object.isRequired,
-	onSelectChoice: l.func.isRequired,
-	session: l.object.isRequired
+E.propTypes = {
+	model: d.object.isRequired,
+	onSelectChoice: d.func.isRequired,
+	session: d.object.isRequired
 };
 //#endregion
-export { w as default };
+export { E as default };

package/dist/delivery/hotspot/polygon.d.ts

@@ -9,6 +9,9 @@
 import React from 'react';
 declare class PolygonComponent extends React.Component {
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
     getPolygonCenter: any;
     parsePointsForKonva: any;
     handleClick: any;

package/dist/delivery/hotspot/polygon.js

@@ -13,8 +13,17 @@ function d(e, t) {
 }
 var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.Component {
 	constructor(e) {
-		super(e), this.state = { hovered: !1 };
+		super(e), this.state = { hovered: !1 }, this.groupRef = r.createRef();
 	}
+	componentDidMount() {
+		this.props.focused && this.moveGroupToTop();
+	}
+	componentDidUpdate(e) {
+		!e.focused && this.props.focused && this.moveGroupToTop();
+	}
+	moveGroupToTop = () => {
+		this.groupRef.current && this.groupRef.current.moveToTop();
+	};
 	getPolygonCenter = (e) => {
 		let t = e.map(({ x: e }) => e), n = e.map(({ y: e }) => e), r = Math.min.apply(null, t), i = Math.max.apply(null, t), a = Math.min.apply(null, n), o = Math.max.apply(null, n);
 		return [(r + i) / 2, (a + o) / 2];
@@ -35,7 +44,7 @@ var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.C
 	};
 	handleMouseEnter = () => {
 		let { disabled: e } = this.props;
-		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 }), this.moveGroupToTop();
 	};
 	handleMouseLeave = () => {
 		document.body.style.cursor = "default", this.setState({ hovered: !1 });
@@ -43,40 +52,42 @@ var f = d(l, "Rect"), p = d(s, "Group"), m = d(c, "Line"), h = class extends r.C
 	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
 	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
 	render() {
-		let { hotspotColor: r, isCorrect: i, isEvaluateMode: s, hoverOutlineColor: c, outlineColor: l, selected: u, points: d, evaluateText: h, strokeWidth: g, scale: _, markAsCorrect: v, selectedHotspotColor: y, showCorrectEnabled: b } = this.props, { hovered: x } = this.state, S = s ? this.getEvaluateOutlineColor(i, v, l) : l, C = this.getOutlineWidth(b, u, v, g), w = this.parsePointsForKonva(d), T = this.getPolygonCenter(d), E = T[0], D = T[1], O;
-		b ? (u && i || !u && !i) && (O = t) : u ? O = i ? t : n : i || (O = n);
-		let k = x && c, A = w.filter((e, t) => t % 2 == 0), j = w.filter((e, t) => t % 2 != 0), M = Math.min(...A), N = Math.max(...A), P = Math.min(...j), F = Math.max(...j), I = M, L = P, R = N - M, z = F - P;
+		let { hotspotColor: r, isCorrect: i, isEvaluateMode: s, hoverOutlineColor: c, outlineColor: l, selected: u, focused: d, points: h, evaluateText: g, strokeWidth: _, scale: v, markAsCorrect: y, selectedHotspotColor: b, showCorrectEnabled: x } = this.props, { hovered: S } = this.state, C = s ? this.getEvaluateOutlineColor(i, y, l) : l, w = this.getOutlineWidth(x, u, y, _), T = this.parsePointsForKonva(h), E = this.getPolygonCenter(h), D = E[0], O = E[1], k;
+		x ? (u && i || !u && !i) && (k = t) : u ? k = i ? t : n : i || (k = n);
+		let A = (S || d) && c, j = T.filter((e, t) => t % 2 == 0), M = T.filter((e, t) => t % 2 != 0), N = Math.min(...j), P = Math.max(...j), F = Math.min(...M), I = Math.max(...M), L = N, R = F, z = P - N, B = I - F;
 		return /* @__PURE__ */ o(p, {
-			scaleX: _,
-			scaleY: _,
+			ref: this.groupRef,
+			scaleX: v,
+			scaleY: v,
+			onMouseEnter: this.handleMouseEnter,
+			onMouseLeave: this.handleMouseLeave,
 			children: [
-				k && /* @__PURE__ */ a(f, {
-					x: I,
-					y: L,
-					width: R,
-					height: z,
-					stroke: u ? "transparent" : c,
-					strokeWidth: g
-				}),
 				/* @__PURE__ */ a(m, {
-					points: w,
+					points: T,
 					closed: !0,
-					fill: u && y ? y : r,
+					fill: u && b ? b : r,
 					onClick: this.handleClick,
 					onTap: this.handleClick,
 					draggable: !1,
-					stroke: k && !u ? "transparent" : S,
-					strokeWidth: k && !u ? 0 : C,
-					onMouseLeave: this.handleMouseLeave,
-					onMouseEnter: this.handleMouseEnter,
+					stroke: A && !u ? "transparent" : C,
+					strokeWidth: A && !u ? 0 : w,
 					cursor: "pointer",
 					position: "relative"
 				}),
-				s && O ? /* @__PURE__ */ a(e, {
-					src: O,
-					x: E,
-					y: D,
-					tooltip: h
+				A && /* @__PURE__ */ a(f, {
+					x: L,
+					y: R,
+					width: z,
+					height: B,
+					stroke: c,
+					strokeWidth: _,
+					listening: !1
+				}),
+				s && k ? /* @__PURE__ */ a(e, {
+					src: k,
+					x: D,
+					y: O,
+					tooltip: g
 				}) : null
 			]
 		});
@@ -89,6 +100,7 @@ h.propTypes = {
 	isEvaluateMode: i.bool.isRequired,
 	hoverOutlineColor: i.string,
 	disabled: i.bool.isRequired,
+	focused: i.bool,
 	onClick: i.func.isRequired,
 	outlineColor: i.string.isRequired,
 	points: i.array.isRequired,
@@ -101,6 +113,7 @@ h.propTypes = {
 	showCorrectEnabled: i.bool.isRequired
 }, h.defaultProps = {
 	evaluateText: null,
+	focused: !1,
 	strokeWidth: 5,
 	scale: 1
 };

package/dist/delivery/hotspot/rectangle.d.ts

@@ -9,6 +9,9 @@
 import React from 'react';
 declare class RectComponent extends React.Component {
     constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    moveGroupToTop: any;
     handleClick: any;
     handleMouseEnter: any;
     handleMouseLeave: any;