@pie-element/drawing-response 12.1.2-next.0 → 12.1.2-next.2

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

@@ -1,10 +1,8 @@
-import e from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
-import t from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
-import n from "../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/omit.js";
-import r from "./button.js";
-import i from "./drawable-image.js";
-import a from "./factory.js";
-import o from "react";
+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";
@@ -28,7 +26,7 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 	marginTop: -43,
 	marginRight: 10,
 	position: "absolute"
-}), S = class extends o.Component {
+}), S = class extends r.Component {
 	constructor(e) {
 		super(e), this.state = {
 			drawables: [],
@@ -39,35 +37,35 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 	componentWillUnmount() {
 		this.stage = null, this.layer = null;
 	}
-	UNSAFE_componentWillReceiveProps(r) {
-		if (r.session) {
-			let { TextEntry: i } = r, { drawables: o } = this.state;
-			if (r.session.drawables) {
-				let s = e(r.session.drawables);
-				if (JSON.stringify(o) !== JSON.stringify((s || []).map((e) => n(e, "type")))) {
-					let e = r.session.drawables;
-					this.setState({ drawables: e.map((e) => a(e.type, e)) });
+	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)) });
 				}
-				t(i.all.map((e) => ({
+				a(t.all.map((e) => ({
 					...e,
-					...i[`text_${e.id}`] && i[`text_${e.id}`].attrs,
-					value: i[`textarea_${e.id}`] && i[`textarea_${e.id}`].value
-				})), r.session.texts) || i.setAll(r.session.texts || []);
+					...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: n, TextEntry: r, drawableDimensions: i } = this.props, { drawables: a } = this.state, o = {
-			width: i.width,
-			drawables: a.map((e) => e.toJson()),
-			texts: r.all.map((e) => ({
+		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,
-				...r[`text_${e.id}`] && r[`text_${e.id}`].attrs,
-				value: r[`textarea_${e.id}`] && r[`textarea_${e.id}`].value
+				...n[`text_${e.id}`] && n[`text_${e.id}`].attrs,
+				value: n[`textarea_${e.id}`] && n[`textarea_${e.id}`].value
 			}))
 		};
-		t(o, n) || e({
-			...n,
+		a(o, t) || e({
+			...t,
 			...o
 		});
 	};
@@ -75,14 +73,14 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 	onMouseOutElement = () => this.setState({ isOver: !1 });
 	handleMouseDown = (e) => {
 		document.body.style.overflow = "hidden";
-		let { newDrawable: t, textIsSelected: n } = this.state, { toolActive: r, fillColor: i, outlineColor: o, scale: s } = this.props;
-		if (t.length === 0 && !n) {
+		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: n, y: c } = t.getPointerPosition(), l = a(r.type, {
-				startx: n / s,
+			let { x: r, y: c } = t.getPointerPosition(), l = n(i.type, {
+				startx: r / s,
 				starty: c / s,
-				fillColor: i,
+				fillColor: a,
 				outlineColor: o,
 				createdAt: /* @__PURE__ */ new Date()
 			});
@@ -126,11 +124,11 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 	};
 	toggleTextSelected = (e) => this.setState({ textIsSelected: e });
 	render() {
-		let { disabled: e, drawableDimensions: t, fillColor: n, 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 && !e,
-			disabled: e,
+		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: n,
+			fillColor: i,
 			forceUpdate: () => this.setState({ updatedAt: /* @__PURE__ */ new Date() }),
 			paintColor: s,
 			outlineColor: u,
@@ -141,23 +139,23 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 			onMouseOutElement: this.onMouseOutElement,
 			scale: m
 		}, O = {};
-		e || (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(r, {
-			disabled: e,
+		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(r, {
-			disabled: e,
+		}), /* @__PURE__ */ c(e, {
+			disabled: n,
 			onClick: this.handleClearAll,
 			label: v.t("common:clearAll", { lng: h })
 		})] }), /* @__PURE__ */ l(b, { children: [
-			f && o && /* @__PURE__ */ c(i, {
+			f && o && /* @__PURE__ */ c(t, {
 				dimensions: {
 					height: k,
 					width: A
@@ -177,8 +175,8 @@ var g = h(p, "Stage"), _ = h(f, "Layer"), { translator: v } = d, y = u("div")({
 					scaleX: m,
 					scaleY: m,
 					ref: (e) => this.stage = e,
-					height: t.height,
-					width: t.width,
+					height: r.height,
+					width: r.width,
 					...O,
 					children: /* @__PURE__ */ l(_, {
 						ref: (e) => this.layer = e,

package/dist/delivery/index.js

@@ -1,7 +1,7 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import t from "./drawing-response/index.js";
-import n from "react";
-import { createRoot as r } from "react-dom/client";
+import e from "./drawing-response/index.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { isEmpty as r } from "@pie-element/shared-lodash";
 import { renderMath as i } from "@pie-element/shared-math-rendering-mathjax";
 import { ModelSetEvent as a, SessionChangedEvent as o } from "@pie-element/shared-player-events";
 //#region src/delivery/index.ts
@@ -13,7 +13,7 @@ var s = class extends HTMLElement {
 		this._model = e, this.dispatchEvent(new a(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._render();
 	}
 	isComplete() {
-		return this._session && (!e(this._session.drawables) || !e(this._session.texts));
+		return this._session && (!r(this._session.drawables) || !r(this._session.texts));
 	}
 	sessionChanged = (e) => {
 		this._session.drawables = e.drawables, this._session.texts = e.texts, this._session.width = e.width, this.dispatchEvent(new o(this.tagName.toLowerCase(), this.isComplete())), this._render();
@@ -29,12 +29,12 @@ var s = class extends HTMLElement {
 	}
 	_render() {
 		if (this._model && this._session) {
-			let e = n.createElement(t, {
+			let r = t.createElement(e, {
 				model: this._model,
 				session: this._session,
 				onSessionChange: this.sessionChanged
 			});
-			this._root ||= r(this), this._root.render(e), queueMicrotask(() => {
+			this._root ||= n(this), this._root.render(r), queueMicrotask(() => {
 				i(this);
 			});
 		}