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

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

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

@@ -1,12 +0,0 @@
-//#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

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

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

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

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

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

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

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

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

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

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

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