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

package/dist/author/defaults.d.ts

@@ -1,157 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/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: {
-    model: {
-        dimensions: {
-            height: number;
-            width: number;
-        };
-        hotspotColor: string;
-        hotspotList: string[];
-        imageUrl: string;
-        multipleCorrect: boolean;
-        outlineColor: string;
-        outlineList: string[];
-        partialScoring: boolean;
-        prompt: string;
-        promptEnabled: boolean;
-        rationaleEnabled: boolean;
-        shapes: {
-            rectangles: never[];
-            polygons: never[];
-            circles: never[];
-        };
-        strokeWidth: number;
-        studentInstructionsEnabled: boolean;
-        teacherInstructions: string;
-        teacherInstructionsEnabled: boolean;
-        toolbarEditorPosition: string;
-    };
-    configuration: {
-        baseInputConfiguration: {
-            h3: {
-                disabled: boolean;
-            };
-            audio: {
-                disabled: boolean;
-            };
-            video: {
-                disabled: boolean;
-            };
-            image: {
-                disabled: boolean;
-            };
-            textAlign: {
-                disabled: boolean;
-            };
-            showParagraphs: {
-                disabled: boolean;
-            };
-            separateParagraphs: {
-                disabled: boolean;
-            };
-        };
-        multipleCorrect: {
-            settings: boolean;
-            label: string;
-        };
-        partialScoring: {
-            settings: boolean;
-            label: string;
-        };
-        rationale: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        prompt: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        settingsPanelDisabled: boolean;
-        spellCheck: {
-            label: string;
-            settings: boolean;
-            enabled: boolean;
-        };
-        teacherInstructions: {
-            settings: boolean;
-            label: string;
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-            required: boolean;
-        };
-        preserveAspectRatio: {
-            settings: boolean;
-            enabled: boolean;
-            label: string;
-        };
-        minShapes: number;
-        maxImageWidth: {
-            teacherInstructions: number;
-            prompt: number;
-            rationale: number;
-        };
-        maxImageHeight: {
-            teacherInstructions: number;
-            prompt: number;
-            rationale: number;
-        };
-        withRubric: {
-            settings: boolean;
-            label: string;
-        };
-        mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
-        };
-        language: {
-            settings: boolean;
-            label: string;
-            enabled: boolean;
-        };
-        languageChoices: {
-            label: string;
-            options: never[];
-        };
-    };
-};
-export default _default;

package/dist/author/defaults.js

@@ -1,119 +0,0 @@
-//#region src/author/defaults.ts
-var e = {
-	model: {
-		dimensions: {
-			height: 0,
-			width: 0
-		},
-		hotspotColor: "rgba(137, 183, 244, 0.25)",
-		hotspotList: ["rgba(137, 183, 244, 0.25)"],
-		imageUrl: "",
-		multipleCorrect: !0,
-		outlineColor: "blue",
-		outlineList: ["blue"],
-		partialScoring: !1,
-		prompt: "",
-		promptEnabled: !0,
-		rationaleEnabled: !0,
-		shapes: {
-			rectangles: [],
-			polygons: [],
-			circles: []
-		},
-		strokeWidth: 5,
-		studentInstructionsEnabled: !0,
-		teacherInstructions: "",
-		teacherInstructionsEnabled: !0,
-		toolbarEditorPosition: "bottom"
-	},
-	configuration: {
-		baseInputConfiguration: {
-			h3: { disabled: !0 },
-			audio: { disabled: !1 },
-			video: { disabled: !1 },
-			image: { disabled: !1 },
-			textAlign: { disabled: !0 },
-			showParagraphs: { disabled: !1 },
-			separateParagraphs: { disabled: !0 }
-		},
-		multipleCorrect: {
-			settings: !0,
-			label: "Multiple Correct Responses"
-		},
-		partialScoring: {
-			settings: !1,
-			label: "Allow Partial Scoring"
-		},
-		rationale: {
-			settings: !0,
-			label: "Rationale",
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 }
-			},
-			required: !1
-		},
-		prompt: {
-			settings: !0,
-			label: "Prompt",
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 }
-			},
-			required: !1
-		},
-		settingsPanelDisabled: !1,
-		spellCheck: {
-			label: "Spellcheck",
-			settings: !1,
-			enabled: !0
-		},
-		teacherInstructions: {
-			settings: !0,
-			label: "Teacher Instructions",
-			inputConfiguration: {
-				audio: { disabled: !1 },
-				video: { disabled: !1 },
-				image: { disabled: !1 }
-			},
-			required: !1
-		},
-		preserveAspectRatio: {
-			settings: !1,
-			enabled: !0,
-			label: "Preserve aspect ratio"
-		},
-		minShapes: 2,
-		maxImageWidth: {
-			teacherInstructions: 300,
-			prompt: 300,
-			rationale: 300
-		},
-		maxImageHeight: {
-			teacherInstructions: 300,
-			prompt: 300,
-			rationale: 300
-		},
-		withRubric: {
-			settings: !1,
-			label: "Add Rubric"
-		},
-		mathMlOptions: {
-			mmlOutput: !1,
-			mmlEditing: !1
-		},
-		language: {
-			settings: !1,
-			label: "Specify Language",
-			enabled: !1
-		},
-		languageChoices: {
-			label: "Language Choices",
-			options: []
-		}
-	}
-};
-//#endregion
-export { e as default };

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

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

package/dist/author/hotspot-circle.js

@@ -1,124 +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, 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

@@ -1,29 +0,0 @@
-/**
- * @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

@@ -1,210 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/**
- * @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;