@pie-element/drawing-response 12.1.1 → 12.1.2-next.1

package/dist/delivery/drawing-response/drawable-helper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-helper.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.
+ */
+/**
+ * Not using React in order to avoid performance issues.
+ * If you switch this class to a React one make sure that
+ * this interaction will not have performance leaks in pie-website nor in pits.
+ */
+export default class DrawableHelper {
+    constructor(props: any, type: any);
+    toJson(): any;
+}

package/dist/delivery/drawing-response/drawable-helper.js

@@ -0,0 +1,12 @@
+//#region src/delivery/drawing-response/drawable-helper.tsx
+var e = class {
+	constructor(e, t) {
+		let { startx: n, starty: r, fillColor: i, outlineColor: a, createdAt: o } = e;
+		this.startx = n, this.starty = r, this.createdAt = o, this.fillColor = i, this.outlineColor = a, this.type = t;
+	}
+	toJson() {
+		return JSON.parse(JSON.stringify(this));
+	}
+};
+//#endregion
+export { e as default };

package/dist/delivery/drawing-response/drawable-image.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-image.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';
+import PropTypes from 'prop-types';
+declare const DrawableImage: {
+    ({ url, dimensions: { height, width } }: {
+        url: any;
+        dimensions: {
+            height: any;
+            width: any;
+        };
+    }): React.JSX.Element;
+    propTypes: {
+        dimensions: PropTypes.Validator<object>;
+        url: PropTypes.Validator<string>;
+    };
+};
+export default DrawableImage;

package/dist/delivery/drawing-response/drawable-image.js

@@ -0,0 +1,28 @@
+import "react";
+import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import { styled as n } from "@mui/material/styles";
+//#region src/delivery/drawing-response/drawable-image.tsx
+var r = n("div")({
+	position: "relative",
+	width: "fit-content"
+}), i = n("img")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center"
+}), a = ({ url: e, dimensions: { height: n, width: a } }) => /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(i, {
+	alt: "drawing-response-image",
+	src: e,
+	style: {
+		height: n,
+		maxWidth: a,
+		maxHeight: 350,
+		width: a
+	}
+}) });
+a.propTypes = {
+	dimensions: e.object.isRequired,
+	url: e.string.isRequired
+};
+//#endregion
+export { a as default };

package/dist/delivery/drawing-response/drawable-line.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-line.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';
+import DrawableHelper from './drawable-helper.js';
+export default class LineDrawable extends DrawableHelper {
+    static TYPE: string;
+    constructor(props: any);
+    registerMovement(x: any, y: any): void;
+    handleOnClick(props: any): void;
+    handleDragEnd: any;
+    render(props: any): React.JSX.Element;
+}

package/dist/delivery/drawing-response/drawable-line.js

@@ -0,0 +1,53 @@
+import e from "./drawable-helper.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Arrow as n } from "react-konva";
+//#region src/delivery/drawing-response/drawable-line.tsx
+function r(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function i(e, t) {
+	return !e || r(e) ? e : r(e.default) ? e.default : t && r(e[t]) ? e[t] : t && r(e[t]?.default) ? e[t].default : e;
+}
+var a = i(n, "Arrow"), o = class n extends e {
+	static TYPE = "LineDrawable";
+	constructor(e) {
+		super(e, n.TYPE);
+		let { startx: t, starty: r, x: i, y: a, posX: o, posY: s } = e;
+		this.x = i || t, this.y = a || r, this.posX = o || 0, this.posY = s || 0;
+	}
+	registerMovement(e, t) {
+		this.x = e, this.y = t;
+	}
+	handleOnClick(e) {
+		let { paint: t, paintColor: n, forceUpdate: r } = e;
+		t && (this.paintColor = n, r());
+	}
+	handleDragEnd = (e, t) => {
+		this.posX = t.target.getX(), this.posY = t.target.getY(), e.handleSessionChange();
+	};
+	render(e) {
+		let { draggable: n, key: r, onMouseOverElement: i, onMouseOutElement: o } = e;
+		return /* @__PURE__ */ t(a, {
+			draggable: n,
+			points: [
+				this.startx,
+				this.starty,
+				this.x,
+				this.y
+			],
+			fill: this.paintColor || this.outlineColor,
+			onClick: () => this.handleOnClick(e),
+			stroke: this.paintColor || this.outlineColor,
+			onDragEnd: this.handleDragEnd.bind(this, e),
+			onMouseEnter: i,
+			onMouseLeave: o,
+			x: this.posX,
+			y: this.posY,
+			pointerWidth: 0,
+			pointerLength: 0
+		}, r);
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/drawing-response/drawable-main.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-main.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 DrawableMain extends React.Component {
+    constructor(props: any);
+    componentWillUnmount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    handleSessionChange: any;
+    onMouseOverElement: () => void;
+    onMouseOutElement: () => void;
+    handleMouseDown: any;
+    handleMouseUp: any;
+    handleMouseMove: any;
+    handleUndo: any;
+    handleClearAll: any;
+    toggleTextSelected: (textIsSelected: any) => void;
+    render(): React.JSX.Element;
+}
+export default DrawableMain;

package/dist/delivery/drawing-response/drawable-main.js

@@ -0,0 +1,210 @@
+import e from "./button.js";
+import t from "./drawable-image.js";
+import n from "./factory.js";
+import r from "react";
+import { cloneDeep as i, isEqual as a, omit as o } from "@pie-element/shared-lodash";
+import s from "prop-types";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+import d from "@pie-lib/translator";
+import { Layer as f, Stage as p } from "react-konva";
+//#region src/delivery/drawing-response/drawable-main.tsx
+function m(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;
+}
+var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
+	display: "flex",
+	flexWrap: "wrap",
+	justifyContent: "flex-end"
+}), b = u("div")({
+	position: "relative",
+	width: "100%"
+}), x = u("div")({
+	marginTop: -43,
+	marginRight: 10,
+	position: "absolute"
+}), S = class extends r.Component {
+	constructor(e) {
+		super(e), this.state = {
+			drawables: [],
+			newDrawable: [],
+			textIsSelected: !1
+		}, this.stage = null, this.layer = null;
+	}
+	componentWillUnmount() {
+		this.stage = null, this.layer = null;
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		if (e.session) {
+			let { TextEntry: t } = e, { drawables: r } = this.state;
+			if (e.session.drawables) {
+				let s = i(e.session.drawables);
+				if (JSON.stringify(r) !== JSON.stringify((s || []).map((e) => o(e, "type")))) {
+					let t = e.session.drawables;
+					this.setState({ drawables: t.map((e) => n(e.type, e)) });
+				}
+				a(t.all.map((e) => ({
+					...e,
+					...t[`text_${e.id}`] && t[`text_${e.id}`].attrs,
+					value: t[`textarea_${e.id}`] && t[`textarea_${e.id}`].value
+				})), e.session.texts) || t.setAll(e.session.texts || []);
+			}
+		} else this.handleSessionChange();
+	}
+	handleSessionChange = () => {
+		let { onSessionChange: e, session: t, TextEntry: n, drawableDimensions: r } = this.props, { drawables: i } = this.state, o = {
+			width: r.width,
+			drawables: i.map((e) => e.toJson()),
+			texts: n.all.map((e) => ({
+				...e,
+				...n[`text_${e.id}`] && n[`text_${e.id}`].attrs,
+				value: n[`textarea_${e.id}`] && n[`textarea_${e.id}`].value
+			}))
+		};
+		a(o, t) || e({
+			...t,
+			...o
+		});
+	};
+	onMouseOverElement = () => this.setState({ isOver: !0 });
+	onMouseOutElement = () => this.setState({ isOver: !1 });
+	handleMouseDown = (e) => {
+		document.body.style.overflow = "hidden";
+		let { newDrawable: t, textIsSelected: r } = this.state, { toolActive: i, fillColor: a, outlineColor: o, scale: s } = this.props;
+		if (t.length === 0 && !r) {
+			let t = e.target.getStage();
+			if (!t) return;
+			let { x: r, y: c } = t.getPointerPosition(), l = n(i.type, {
+				startx: r / s,
+				starty: c / s,
+				fillColor: a,
+				outlineColor: o,
+				createdAt: /* @__PURE__ */ new Date()
+			});
+			this.setState({ newDrawable: [l] });
+		}
+	};
+	handleMouseUp = (e) => {
+		document.body.style.overflow = "initial";
+		let { newDrawable: t, drawables: n } = this.state, { scale: r } = this.props;
+		if (t.length === 1) {
+			let i = e.target.getStage();
+			if (!i) return;
+			let { x: a, y: o } = i.getPointerPosition(), s = t[0];
+			s.registerMovement(a / r, o / r), n.push(s), this.setState({
+				newDrawable: [],
+				drawables: n
+			}, this.handleSessionChange.bind(this, s));
+		}
+	};
+	handleMouseMove = (e) => {
+		let { newDrawable: t } = this.state, { scale: n } = this.props;
+		if (t.length === 1) {
+			let r = e.target.getStage();
+			if (!r) return;
+			let { x: i, y: a } = r.getPointerPosition(), o = t[0];
+			o.registerMovement(i / n, a / n), this.setState({ newDrawable: [o] });
+		}
+	};
+	handleUndo = () => {
+		let { drawables: e } = this.state, { TextEntry: t } = this.props, n = [...e], r = [...e, ...t.all];
+		r.sort((e, t) => new Date(e.createdAt) - new Date(t.createdAt));
+		let i = r[r.length - 1];
+		i && i.type === "text-entry" ? (t.all.pop(), this.setState({ updatedAt: /* @__PURE__ */ new Date() }, this.handleSessionChange)) : (n.pop(), this.setState({ drawables: n }, this.handleSessionChange));
+	};
+	handleClearAll = () => {
+		let { TextEntry: e } = this.props;
+		e.all = [], this.setState({
+			drawables: [],
+			updatedAt: /* @__PURE__ */ new Date()
+		}, this.handleSessionChange);
+	};
+	toggleTextSelected = (e) => this.setState({ textIsSelected: e });
+	render() {
+		let { disabled: n, drawableDimensions: r, fillColor: i, imageDimensions: a, imageUrl: o, paintColor: s, outlineColor: u, TextEntry: d, backgroundImageEnabled: f = !0, toolActive: { type: p }, scale: m, language: h } = this.props, { isOver: S, newDrawable: C } = this.state, w = p === "Select", T = p === "PaintBucket", E = [...this.state.drawables, ...this.state.newDrawable], D = {
+			draggable: w && !n,
+			disabled: n,
+			paint: T,
+			fillColor: i,
+			forceUpdate: () => this.setState({ updatedAt: /* @__PURE__ */ new Date() }),
+			paintColor: s,
+			outlineColor: u,
+			toggleTextSelected: this.toggleTextSelected,
+			handleSessionChange: this.handleSessionChange,
+			stage: this.stage,
+			onMouseOverElement: this.onMouseOverElement,
+			onMouseOutElement: this.onMouseOutElement,
+			scale: m
+		}, O = {};
+		n || (O = {
+			onMouseUp: this.handleMouseUp,
+			onTouchEnd: this.handleMouseUp,
+			onMouseMove: this.handleMouseMove,
+			onTouchMove: this.handleMouseMove
+		}, w || (O.onMouseDown = this.handleMouseDown, O.onTouchStart = this.handleMouseDown));
+		let k = a?.height * m, A = a?.width * m;
+		return /* @__PURE__ */ l(y, { children: [/* @__PURE__ */ l(x, { children: [/* @__PURE__ */ c(e, {
+			disabled: n,
+			onClick: this.handleUndo,
+			label: v.t("common:undo", { lng: h })
+		}), /* @__PURE__ */ c(e, {
+			disabled: n,
+			onClick: this.handleClearAll,
+			label: v.t("common:clearAll", { lng: h })
+		})] }), /* @__PURE__ */ l(b, { children: [
+			f && o && /* @__PURE__ */ c(t, {
+				dimensions: {
+					height: k,
+					width: A
+				},
+				url: o
+			}),
+			d.renderTextareas(),
+			/* @__PURE__ */ c("div", {
+				style: {
+					position: "absolute",
+					left: 0,
+					top: 0,
+					touchAction: "none",
+					cursor: w && (S || C.length === 1) ? "pointer" : "default"
+				},
+				children: /* @__PURE__ */ c(g, {
+					scaleX: m,
+					scaleY: m,
+					ref: (e) => this.stage = e,
+					height: r.height,
+					width: r.width,
+					...O,
+					children: /* @__PURE__ */ l(_, {
+						ref: (e) => this.layer = e,
+						children: [E.map((e, t) => e.render({
+							...D,
+							key: t
+						})), d.render(D)]
+					})
+				}, "drawing-stage")
+			})
+		] })] });
+	}
+};
+S.propTypes = {
+	disabled: s.bool,
+	drawableDimensions: s.object.isRequired,
+	imageDimensions: s.object.isRequired,
+	fillColor: s.string.isRequired,
+	onSessionChange: s.func.isRequired,
+	paintColor: s.string.isRequired,
+	outlineColor: s.string.isRequired,
+	imageUrl: s.string.isRequired,
+	TextEntry: s.object.isRequired,
+	toolActive: s.object.isRequired,
+	session: s.object.isRequired,
+	backgroundImageEnabled: s.bool.isRequired,
+	scale: s.number.isRequired,
+	language: s.string
+};
+//#endregion
+export { S as default };

package/dist/delivery/drawing-response/drawable-palette.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-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/delivery/drawing-response/drawable-palette.js

@@ -0,0 +1,89 @@
+import e from "react";
+import t from "prop-types";
+import * as n from "@pie-lib/render-ui";
+import { InputContainer as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+import s from "@pie-lib/translator";
+import c from "@mui/material/Select";
+import l from "@mui/material/MenuItem";
+//#region src/delivery/drawing-response/drawable-palette.tsx
+function u(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function d(e, t) {
+	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
+}
+var f = d(r, "InputContainer") || d(h.InputContainer, "InputContainer"), p = n, m = p.default, h = m && typeof m == "object" ? m : p, { translator: g } = s, _ = o("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	display: "flex"
+})), v = o(f)({
+	flex: 1,
+	fontSize: "inherit",
+	width: "90%"
+}), y = o(l)(({ theme: e, isBlackColor: t }) => ({
+	borderRadius: "2px",
+	fontSize: "inherit",
+	height: "22px",
+	marginLeft: e.spacing(2),
+	marginRight: e.spacing(2),
+	marginTop: e.spacing(2),
+	...t && { color: e.palette.background.paper }
+})), b = o(c)({
+	fontSize: "inherit",
+	transform: "translate(0%, 40%)"
+}), x = class extends e.Component {
+	onChange = (e) => (t) => {
+		let { value: n } = t.target, { onFillColorChange: r, onOutlineColorChange: i, onPaintColorChange: a } = this.props;
+		e === "fill" ? r(n) : e === "outline" ? i(n) : a(n);
+	};
+	render() {
+		let { fillColor: e, outlineColor: t, fillList: n, outlineList: r, language: o } = this.props;
+		return /* @__PURE__ */ a(_, { children: [/* @__PURE__ */ i(v, {
+			label: g.t("drawingResponse.fillColor", { lng: o }),
+			children: /* @__PURE__ */ i(b, {
+				onChange: this.onChange("fill"),
+				value: e,
+				variant: "standard",
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: n.map(({ value: e, label: t }) => /* @__PURE__ */ i(y, {
+					value: e,
+					isBlackColor: e === "black",
+					style: { backgroundColor: e },
+					children: t
+				}, e))
+			})
+		}), /* @__PURE__ */ i(v, {
+			label: g.t("drawingResponse.outlineColor", { lng: o }),
+			children: /* @__PURE__ */ i(b, {
+				onChange: this.onChange("outline"),
+				value: t,
+				variant: "standard",
+				MenuProps: { transitionDuration: {
+					enter: 225,
+					exit: 195
+				} },
+				children: r.map(({ value: e, label: t }) => /* @__PURE__ */ i(y, {
+					value: e,
+					style: { border: `2px solid ${e}` },
+					children: t
+				}, e))
+			})
+		})] });
+	}
+};
+x.propTypes = {
+	fillColor: t.string.isRequired,
+	fillList: t.array.isRequired,
+	onFillColorChange: t.func.isRequired,
+	onOutlineColorChange: t.func.isRequired,
+	onPaintColorChange: t.func.isRequired,
+	outlineColor: t.string.isRequired,
+	outlineList: t.array.isRequired,
+	language: t.string
+};
+//#endregion
+export { x as default };

package/dist/delivery/drawing-response/drawable-rectangle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-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';
+import DrawableHelper from './drawable-helper.js';
+export default class RectangleDrawable extends DrawableHelper {
+    static TYPE: string;
+    constructor(props: any);
+    registerMovement(x: any, y: any): void;
+    handleOnClick(props: any): void;
+    handleDragEnd: any;
+    render(props: any): React.JSX.Element;
+}

package/dist/delivery/drawing-response/drawable-rectangle.js

@@ -0,0 +1,49 @@
+import e from "./drawable-helper.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Rect as n } from "react-konva";
+//#region src/delivery/drawing-response/drawable-rectangle.tsx
+function r(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function i(e, t) {
+	return !e || r(e) ? e : r(e.default) ? e.default : t && r(e[t]) ? e[t] : t && r(e[t]?.default) ? e[t].default : e;
+}
+var a = i(n, "Rect"), o = class n extends e {
+	static TYPE = "RectangleDrawable";
+	constructor(e) {
+		super(e, n.TYPE);
+		let { startx: t, starty: r, x: i, y: a } = e;
+		this.startx = t, this.starty = r, this.x = i || t, this.y = a || r, this.width = i - t || 0, this.height = a - r || 0;
+	}
+	registerMovement(e, t) {
+		this.x = e, this.y = t, this.width = this.x - this.startx, this.height = this.y - this.starty;
+	}
+	handleOnClick(e) {
+		let { paint: t, paintColor: n, forceUpdate: r } = e;
+		t && (this.paintColor = n, r());
+	}
+	handleDragEnd = (e, t) => {
+		let n = this.startx - t.target.getX(), r = this.starty - t.target.getY();
+		this.startx = t.target.getX(), this.starty = t.target.getY(), this.x -= n, this.y -= r, e.handleSessionChange();
+	};
+	render(e) {
+		let { draggable: n, key: r, onMouseOverElement: i, onMouseOutElement: o } = e;
+		return /* @__PURE__ */ t(a, {
+			height: this.height,
+			width: this.width,
+			fill: this.paintColor || this.fillColor,
+			onClick: () => this.handleOnClick(e),
+			onDragEnd: this.handleDragEnd.bind(this, e),
+			onMouseEnter: i,
+			onMouseLeave: o,
+			stroke: this.outlineColor,
+			draggable: n,
+			strokeWidth: 2,
+			x: this.startx,
+			y: this.starty
+		}, r);
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/drawing-response/drawable-text.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @synced-from pie-elements/packages/drawing-response/src/drawing-response/drawable-text.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.
+ */
+export declare const generateId: () => string;
+export default class TextDrawable {
+    static getTextareaNode(id: any): string;
+    static getTextNode(id: any): string;
+    static getTransformerNode(id: any): string;
+    constructor(props: any);
+    removeEventListeners: () => any;
+    setAll: any;
+    addNewTextEntry: any;
+    showOnlyTextNodes(): void;
+    toggleTextarea(id: any, value: any): void;
+    initializeDefault(id: any, isDefault: any): void;
+    saveValue(id: any, textareaNode: any): void;
+    handleMouseDown: () => any;
+    handleMouseUp: () => any;
+    handleClick: any;
+    handleDblClick: any;
+    handleTransform: any;
+    renderTextareas(): any;
+    setInitialProps(props: any): void;
+    render(props: any): any;
+}