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

package/dist/author/hotspot-drawable.js

@@ -1,312 +0,0 @@
-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";
-//#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(v, "Stage"), S = b(_, "Layer"), C = g("div")({ position: "relative" }), w = g("div")({
-	position: "relative",
-	width: "fit-content"
-}), T = g("img")({
-	alignItems: "center",
-	display: "flex",
-	justifyContent: "center"
-}), E = g("div")({
-	borderBottom: "1px solid #727272",
-	borderRight: "1px solid #727272",
-	bottom: "-10px",
-	cursor: "se-resize",
-	height: "10px",
-	position: "absolute",
-	right: "-10px",
-	width: "10px"
-}), D = g(x)({
-	left: 0,
-	top: 0,
-	position: "absolute"
-}), O = 800, k = class extends d.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 = (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);
-					break;
-				case a.CIRCLE:
-					c = t.create(s, e);
-					break;
-				case a.POLYGON:
-					if (l = this.state.isDrawingShapeId, l) {
-						let t = this.addPolygonPoint(e);
-						c = {
-							isDrawing: !0,
-							isDrawingShapeId: l,
-							shapes: t
-						};
-					} else c = r.create(s, e);
-					break;
-				default: return;
-			}
-			this.setState({ ...c }), o(c.shapes);
-		}
-	};
-	addPolygonPoint(e) {
-		let { shapes: t } = r.addPoint(this.state, e, (e) => {
-			this.setState({
-				isDrawing: !1,
-				shapes: e,
-				isDrawingShapeId: void 0
-			}), this.props.onUpdateShapes(e);
-		});
-		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);
-					break;
-				case a.CIRCLE:
-					i = t.finalizeCreation(this.state, this.props);
-					break;
-				default: return;
-			}
-			this.setState({
-				...i,
-				isDrawing: !1
-			}), r(i.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);
-					break;
-				case a.CIRCLE:
-					s = t.handleMouseMove(this.state, e);
-					break;
-				case a.POLYGON:
-					s = r.handleMouseMove(this.state, e);
-					break;
-				default: return;
-			}
-			this.setState(s), o(s.shapes);
-		}
-	};
-	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
-			};
-			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 (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
-				};
-			}
-			return e;
-		}).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) => {
-			this.setState({
-				isDrawing: !1,
-				shapes: t,
-				isDrawingShapeId: void 0
-			}), i(e(t));
-		});
-	};
-	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);
-	};
-	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: a, shapes: c } = this.props, { width: l, height: u } = s(a, {
-			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: o(a, {
-				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({
-			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: 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, {
-			onLoad: this.handleOnImageLoad,
-			ref: (e) => {
-				this.image = e;
-			},
-			src: e,
-			...t && n ? { style: {
-				height: t,
-				width: n
-			} } : {}
-		}), /* @__PURE__ */ m(E, { ref: (e) => {
-			this.resize = e;
-		} })] }), /* @__PURE__ */ m(D, {
-			height: v || t,
-			width: y || n,
-			onMouseDown: this.handleOnMouseDown,
-			onMouseUp: this.handleOnMouseUp,
-			onMouseMove: this.handleMouseMove,
-			onContentMouseOut: this.handleOnMouseOutOrLeave,
-			onContentMouseLeave: this.handleOnMouseOutOrLeave,
-			children: /* @__PURE__ */ m(S, { children: b.map((e, o) => {
-				let m;
-				switch (e.group) {
-					case i.RECTANGLES:
-						m = c;
-						break;
-					case i.CIRCLES:
-						m = u;
-						break;
-					case i.POLYGONS:
-						m = l;
-						break;
-					default: return null;
-				}
-				return /* @__PURE__ */ f(m, {
-					...e.group === i.CIRCLES ? { radius: e.radius } : {},
-					...e.group === i.RECTANGLES ? {
-						height: e.height,
-						width: e.width
-					} : {},
-					...e.group === i.POLYGONS ? {
-						points: e.points,
-						addPolygonPoint: (e) => this.addPolygonPoint(e)
-					} : {},
-					correct: e.correct,
-					isDrawing: _,
-					hotspotColor: r,
-					hoverOutlineColor: d,
-					selectedHotspotColor: p,
-					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: s,
-					imageHeight: v || t,
-					imageWidth: y || n,
-					...e.group === "polygons" ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {}
-				});
-			}) })
-		})] });
-	}
-};
-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
-};
-//#endregion
-export { k as default };

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

@@ -1,14 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-palette.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';
-declare class Palette extends React.Component {
-    onChange: (name: any) => (event: any) => void;
-    render(): React.JSX.Element;
-}
-export default Palette;

package/dist/author/hotspot-palette.js

@@ -1,72 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { styled as i } from "@mui/material/styles";
-import { InputContainer as a } from "@pie-lib/config-ui";
-import o from "@mui/material/Select";
-import s from "@mui/material/MenuItem";
-//#region src/author/hotspot-palette.tsx
-var c = i("div")(({ theme: e }) => ({
-	marginTop: e.spacing(2),
-	display: "flex"
-})), l = i(a)({
-	flex: 1,
-	width: "90%"
-}), u = i(s)(({ theme: e }) => ({
-	borderRadius: "2px",
-	height: "22px",
-	marginLeft: e.spacing(2),
-	marginRight: e.spacing(2),
-	marginTop: e.spacing(2)
-})), d = class extends e.Component {
-	onChange = (e) => (t) => {
-		let { value: n } = t.target, { onHotspotColorChange: r, onOutlineColorChange: i } = this.props;
-		e === "hotspot" ? r(n) : i(n);
-	};
-	render() {
-		let { hotspotColor: e, outlineColor: t, hotspotList: i, outlineList: a } = this.props;
-		return /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(l, {
-			label: "Hot Spot",
-			children: /* @__PURE__ */ n(o, {
-				onChange: this.onChange("hotspot"),
-				value: e,
-				variant: "standard",
-				MenuProps: { transitionDuration: {
-					enter: 225,
-					exit: 195
-				} },
-				children: i.map((e) => /* @__PURE__ */ n(u, {
-					value: e,
-					style: { backgroundColor: e },
-					children: e
-				}, e))
-			})
-		}), /* @__PURE__ */ n(l, {
-			label: "Response Outline",
-			children: /* @__PURE__ */ n(o, {
-				onChange: this.onChange("outline"),
-				value: t,
-				variant: "standard",
-				MenuProps: { transitionDuration: {
-					enter: 225,
-					exit: 195
-				} },
-				children: a.map((e) => /* @__PURE__ */ n(u, {
-					value: e,
-					style: { border: `2px solid ${e}` },
-					children: e
-				}, e))
-			})
-		})] });
-	}
-};
-d.propTypes = {
-	hotspotColor: t.string.isRequired,
-	hotspotList: t.array.isRequired,
-	onHotspotColorChange: t.func.isRequired,
-	onOutlineColorChange: t.func.isRequired,
-	outlineColor: t.string.isRequired,
-	outlineList: t.array.isRequired
-};
-//#endregion
-export { d as default };

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

@@ -1,38 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-polygon.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';
-declare class PolComponent extends React.Component {
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        id: any;
-        x: number;
-        y: number;
-        points: any;
-        imageHeight: any;
-        imageWidth: any;
-    } | null;
-    getOffset: any;
-    serialize: any;
-    getInitialState: any;
-    state: any;
-    handleClick: any;
-    handleMouseEnter: any;
-    handleMouseLeave: any;
-    handleOnDragEnd: any;
-    handleOnDragVertex: any;
-    onDragStart: any;
-    handleDelete: any;
-    getBoundingBox(points: any): {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    render(): React.JSX.Element;
-}
-export default PolComponent;

package/dist/author/hotspot-polygon.js

@@ -1,200 +0,0 @@
-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, Line as s } from "react-konva";
-import { Rect as c } from "react-konva/lib/ReactKonvaCore.js";
-//#region src/author/hotspot-polygon.tsx
-function l(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function u(e, t) {
-	return !e || l(e) ? e : l(e.default) ? e.default : t && l(e[t]) ? e[t] : t && l(e[t]?.default) ? e[t].default : e;
-}
-var d = u(a, "Circle"), f = u(s, "Line"), p = u(o, "Group"), m = "#00BFFF", h = class extends t.Component {
-	static getDerivedStateFromProps(e, t) {
-		let { id: n, points: r, imageHeight: i, imageWidth: a } = e;
-		if (t.imageHeight !== i || t.imageWidth !== a || t.id !== e.id || JSON.stringify(t.points) !== JSON.stringify(r)) {
-			let e = r.map((e) => e.x), t = r.map((e) => e.y);
-			return {
-				id: n,
-				x: Math.min(...e),
-				y: Math.max(...t),
-				points: r,
-				imageHeight: i,
-				imageWidth: a
-			};
-		}
-		return null;
-	}
-	getOffset = (e) => {
-		let t = e.map((e) => e.x), n = e.map((e) => e.y);
-		return {
-			x: Math.min(...t),
-			y: Math.max(...n)
-		};
-	};
-	serialize = (e) => {
-		let { x: t, y: n } = this.getOffset(e);
-		return e.reduce((e, r) => [
-			...e,
-			r.x - t,
-			r.y - n
-		], []);
-	};
-	getInitialState = (e) => {
-		if (e.length) {
-			let { x: t, y: n } = this.getOffset(e);
-			return {
-				x: t,
-				y: n,
-				points: e
-			};
-		}
-		return {
-			id: "",
-			x: 0,
-			y: 0,
-			points: []
-		};
-	};
-	state = {
-		hovered: !1,
-		isDragging: !1,
-		...this.getInitialState(this.props.points)
-	};
-	handleClick = (e) => {
-		let { points: t } = this.props, n = t.map((e) => e.x), r = t.map((e) => e.y), i = Math.max(...n) - Math.min(...n), a = Math.max(...r) - Math.min(...r), { isDrawing: o, onClick: s, id: c } = this.props;
-		if (!(i < 0 && a < 0 && o)) {
-			if (o && c === "newPolygon") {
-				this.props.addPolygonPoint(e);
-				return;
-			}
-			e.cancelBubble = !0, s(c);
-		}
-	};
-	handleMouseEnter = () => {
-		this.setState({ hovered: !0 }), document.body.style.cursor = "pointer";
-	};
-	handleMouseLeave = () => {
-		this.setState({ hovered: !1 }), document.body.style.cursor = "default";
-	};
-	handleOnDragEnd = (e, t = !1) => {
-		let { onDragEnd: n, id: r } = this.props, i = e.target.points() || this.serialize(this.state.points), a = i.reduce((t, n, r) => r % 2 == 0 && r + 1 < i.length ? [...t, {
-			x: n + e.target.x(),
-			y: i[r + 1] + e.target.y()
-		}] : t, []);
-		this.setState({
-			points: a,
-			...this.getOffset(a),
-			isDragging: t ? !1 : this.state.isDragging
-		}), t && n(r, { points: a });
-	};
-	handleOnDragVertex = (e, t, n) => {
-		let { onDragEnd: r, id: i } = this.props, { points: a } = this.state, o = a.map((n, r) => r === t ? {
-			x: e.target.x(),
-			y: e.target.y()
-		} : n);
-		this.setState({
-			points: o,
-			...this.getOffset(o),
-			isDragging: n ? !1 : this.state.isDragging
-		}), n && r(i, { points: o });
-	};
-	onDragStart = () => {
-		this.setState({ isDragging: !0 });
-	};
-	handleDelete = (e) => {
-		let { onDeleteShape: t } = this.props;
-		t(e);
-	};
-	getBoundingBox(e) {
-		let t = e.map((e) => e.x), n = e.map((e) => e.y), r = Math.min(...t), i = Math.max(...t), a = Math.min(...n), o = Math.max(...n);
-		return {
-			x: r,
-			y: a,
-			width: i - r,
-			height: o - a
-		};
-	}
-	render() {
-		let { correct: t, id: n, hotspotColor: a, outlineColor: o, selectedHotspotColor: s, hoverOutlineColor: l, strokeWidth: u = 5 } = this.props, { points: h, x: g, y: _, hovered: v } = this.state, y = n === "newPolygon", b = v || n === "newPolygon", x = t ? u : +!!v, S = t ? o : v ? m : "", C = this.getBoundingBox(h), w = t && s ? s : a;
-		return /* @__PURE__ */ i(p, {
-			onMouseLeave: this.handleMouseLeave,
-			onMouseEnter: this.handleMouseEnter,
-			children: [
-				l && v && /* @__PURE__ */ r(c, {
-					x: C.x,
-					y: C.y,
-					width: C.width,
-					height: C.height,
-					stroke: l,
-					strokeWidth: 2,
-					listening: !1
-				}),
-				/* @__PURE__ */ r(f, {
-					points: this.serialize(h),
-					closed: !y,
-					fill: y ? "transparent" : w,
-					onClick: this.handleClick,
-					onTap: this.handleClick,
-					draggable: !0,
-					stroke: y ? o : S,
-					strokeWidth: y ? 1 : x,
-					onDragStart: this.onDragStart,
-					onDragMove: this.handleOnDragEnd,
-					onDragEnd: (e) => this.handleOnDragEnd(e, !0),
-					x: g,
-					y: _
-				}),
-				b && h.map((e, t) => /* @__PURE__ */ r(d, {
-					x: e.x,
-					y: e.y,
-					radius: 5,
-					fill: t === 0 && n === "newPolygon" ? "blue" : "white",
-					stroke: m,
-					strokeWidth: 1,
-					onClick: this.handleClick,
-					onDragStart: this.onDragStart,
-					onDragMove: (e) => {
-						this.handleOnDragVertex(e, t);
-					},
-					onDragEnd: (e) => {
-						this.handleOnDragVertex(e, t, !0);
-					},
-					draggable: !0,
-					opacity: 4
-				}, t)),
-				!this.state.isDragging && this.state.hovered && /* @__PURE__ */ r(e, {
-					x: g,
-					y: _,
-					id: n,
-					handleWidgetClick: this.handleDelete,
-					points: h
-				})
-			]
-		});
-	}
-};
-h.propTypes = {
-	correct: n.bool,
-	isDrawing: n.bool.isRequired,
-	id: n.string.isRequired,
-	imageHeight: n.number,
-	imageWidth: n.number,
-	hotspotColor: n.string.isRequired,
-	selectedHotspotColor: n.string,
-	hoverOutlineColor: n.string,
-	onClick: n.func.isRequired,
-	addPolygonPoint: n.func.isRequired,
-	onDeleteShape: n.func.isRequired,
-	onDragEnd: n.func.isRequired,
-	outlineColor: n.string.isRequired,
-	points: n.arrayOf(n.shape({
-		x: n.number,
-		y: n.number
-	})).isRequired,
-	strokeWidth: n.number
-}, h.defaultProps = { correct: !1 };
-//#endregion
-export { h as default };

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

@@ -1,20 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-rectangle.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';
-declare class RectComponent extends React.Component {
-    constructor(props: any);
-    handleClick: any;
-    handleMouseEnter: any;
-    handleMouseLeave: any;
-    handleOnDragEnd: any;
-    onResizeEnd: any;
-    handleDelete: any;
-    render(): React.JSX.Element;
-}
-export default RectComponent;