@1urso/generic-editor 0.1.60 → 0.1.62

package/dist/generic-editor.js

@@ -12346,64 +12346,65 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	}), nM = useRef({
 		x: 0,
 		y: 0
-	}), rM = useRef([]), oM = (E) => {
-		if (E.button === 1 || E.button === 0 && eM.current) {
-			E.preventDefault(), Zj.current = !0, nM.current = {
-				x: E.clientX,
-				y: E.clientY
-			};
-			return;
-		}
-		Xj.current = !0;
-		let O = G.current?.getBoundingClientRect();
-		if (!O) return;
-		let A = O.left, j = O.top;
-		tM.current = {
-			x: (E.clientX - A - n.pan.x) / n.zoom,
-			y: (E.clientY - j - n.pan.y) / n.zoom
-		}, rM.current = n.selectedElementIds, E.shiftKey || (_(null), rM.current = []), window.addEventListener("mousemove", sM), window.addEventListener("mouseup", cM);
-	}, sM = useCallback((_) => {
+	}), rM = useRef([]), oM = useRef([]), sM = useRef(n), cM = useRef(0);
+	useEffect(() => {
+		sM.current = n;
+	}, [n]);
+	let lM = useCallback((n) => {
 		if (!G.current) return;
+		let _ = sM.current;
 		if (Zj.current) {
-			let E = _.clientX - nM.current.x, O = _.clientY - nM.current.y;
+			let E = n.clientX - nM.current.x, O = n.clientY - nM.current.y;
 			j({
-				x: n.pan.x + E,
-				y: n.pan.y + O
+				x: _.pan.x + E,
+				y: _.pan.y + O
 			}), nM.current = {
-				x: _.clientX,
-				y: _.clientY
+				x: n.clientX,
+				y: n.clientY
 			};
 			return;
 		}
 		if (!Xj.current) return;
-		let O = G.current.getBoundingClientRect(), A = (_.clientX - O.left - n.pan.x) / n.zoom, M = (_.clientY - O.top - n.pan.y) / n.zoom, N = Math.min(tM.current.x, A), P = Math.min(tM.current.y, M), z = Math.abs(A - tM.current.x), B = Math.abs(M - tM.current.y);
-		if (Yj({
+		let O = G.current.getBoundingClientRect(), A = (n.clientX - O.left - _.pan.x) / _.zoom, M = (n.clientY - O.top - _.pan.y) / _.zoom, N = Math.min(tM.current.x, A), P = Math.min(tM.current.y, M), z = Math.abs(A - tM.current.x), B = Math.abs(M - tM.current.y);
+		Yj({
 			x: N,
 			y: P,
 			width: z,
 			height: B
-		}), z > 2 || B > 2) {
-			let _ = [];
-			n.elements.forEach((n) => {
-				let E = n.x ?? 0, O = n.y ?? 0, A = n.width ?? 100, j = n.height ?? 100, M = E + A, H = O + j, U = N + z, W = P + B;
-				E < U && M > N && O < W && H > P && _.push(n.id);
-			}), E(Array.from(new Set([...rM.current, ..._])));
+		});
+		let H = Date.now();
+		if (!(H - cM.current < 50) && (z > 0 || B > 0)) {
+			let n = [];
+			_.elements.forEach((_) => {
+				let E = _.x ?? 0, O = _.y ?? 0, A = _.width ?? 100, j = _.height ?? 100, M = E + A, H = O + j, U = N + z, W = P + B;
+				E < U && M > N && O < W && H > P && n.push(_.id);
+			});
+			let O = Array.from(new Set([...rM.current, ...n])), A = oM.current;
+			A.length === O.length && A.every((n) => O.includes(n)) || (E(O), oM.current = O, cM.current = H);
 		}
-	}, [
-		n.elements,
-		n.pan,
-		n.zoom,
-		E,
-		j
-	]), cM = useCallback(() => {
-		Xj.current = !1, Zj.current = !1, Yj(null), window.removeEventListener("mousemove", sM), window.removeEventListener("mouseup", cM);
-	}, [sM]), lM = useRef(n);
+	}, [E, j]), uM = useCallback((n) => {
+		(Xj.current || Zj.current) && n.target.releasePointerCapture(n.pointerId), Xj.current = !1, Zj.current = !1, Yj(null);
+	}, []), dM = (E) => {
+		if (E.currentTarget.setPointerCapture(E.pointerId), E.button === 1 || E.button === 0 && eM.current) {
+			E.preventDefault(), Zj.current = !0, nM.current = {
+				x: E.clientX,
+				y: E.clientY
+			};
+			return;
+		}
+		Xj.current = !0;
+		let O = G.current?.getBoundingClientRect();
+		if (!O) return;
+		let A = O.left, j = O.top;
+		tM.current = {
+			x: (E.clientX - A - n.pan.x) / n.zoom,
+			y: (E.clientY - j - n.pan.y) / n.zoom
+		}, rM.current = n.selectedElementIds, oM.current = n.selectedElementIds, E.shiftKey || (_(null), rM.current = [], oM.current = []);
+	};
 	useEffect(() => {
-		lM.current = n;
-	}, [n]), useEffect(() => {
 		let n = (n) => {
 			n.preventDefault();
-			let _ = lM.current;
+			let _ = sM.current;
 			if (n.ctrlKey || n.metaKey) A(Math.min(Math.max(.1, _.zoom - n.deltaY * .001), 5));
 			else {
 				let E = n.shiftKey ? n.deltaY : n.deltaX, O = n.shiftKey ? n.deltaX : n.deltaY;
@@ -12449,7 +12450,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			n.code === "Space" && (eM.current = !1, G.current && !Zj.current && (G.current.style.cursor = "default"));
 		};
 		return window.addEventListener("keydown", _), window.addEventListener("keyup", E), () => {
-			window.removeEventListener("keydown", _), window.removeEventListener("keyup", E), window.removeEventListener("mousemove", sM), window.removeEventListener("mouseup", cM);
+			window.removeEventListener("keydown", _), window.removeEventListener("keyup", E);
 		};
 	}, [
 		M,
@@ -12459,25 +12460,23 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		B,
 		U,
 		n.selectedElementIds,
-		n.elements,
-		sM,
-		cM
+		n.elements
 	]);
-	let uM = useRef(!1), { setCanvasHeight: dM } = useEditor(), fM = (n) => {
-		n.stopPropagation(), n.preventDefault(), uM.current = !0, window.addEventListener("mousemove", pM), window.addEventListener("mouseup", mM);
-	}, pM = useCallback((n) => {
-		if (!uM.current || !G.current) return;
+	let fM = useRef(!1), { setCanvasHeight: pM } = useEditor(), mM = (n) => {
+		n.stopPropagation(), n.preventDefault(), fM.current = !0, window.addEventListener("mousemove", hM), window.addEventListener("mouseup", gM);
+	}, hM = useCallback((n) => {
+		if (!fM.current || !G.current) return;
 		let _ = G.current.getBoundingClientRect(), E = n.clientY - _.top, O = Math.max(50, Math.min(E, 2e3));
-		dM(Math.round(O));
-	}, [dM]), mM = useCallback(() => {
-		uM.current = !1, window.removeEventListener("mousemove", pM), window.removeEventListener("mouseup", mM);
-	}, [pM]);
+		pM(Math.round(O));
+	}, [pM]), gM = useCallback(() => {
+		fM.current = !1, window.removeEventListener("mousemove", hM), window.removeEventListener("mouseup", gM);
+	}, [hM]);
 	useEffect(() => () => {
-		window.removeEventListener("mousemove", pM), window.removeEventListener("mouseup", mM);
-	}, [pM, mM]);
-	let hM = (n) => {
+		window.removeEventListener("mousemove", hM), window.removeEventListener("mouseup", gM);
+	}, [hM, gM]);
+	let _M = (n) => {
 		n.preventDefault(), n.dataTransfer.dropEffect = "copy";
-	}, gM = (n) => {
+	}, vM = (n) => {
 		n.preventDefault();
 		let _ = n.dataTransfer.getData("application/x-editor-prop");
 		if (_) {
@@ -12492,12 +12491,18 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				dataBinding: _
 			});
 		}
-	}, _M = n.canvasHeight || 150;
+	}, yM = n.canvasHeight || 150;
 	return /* @__PURE__ */ jsxs(p, {
 		ref: G,
-		onMouseDown: oM,
-		onDragOver: hM,
-		onDrop: gM,
+		onPointerDown: dM,
+		onPointerMove: (n) => {
+			(Xj.current || Zj.current) && lM(n.nativeEvent);
+		},
+		onPointerUp: (n) => {
+			(Xj.current || Zj.current) && uM(n.nativeEvent);
+		},
+		onDragOver: _M,
+		onDrop: vM,
 		style: {
 			width: "100%",
 			height: "100%",
@@ -12509,187 +12514,191 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			backgroundSize: `${20 * n.zoom}px ${20 * n.zoom}px`,
 			backgroundPosition: `${n.pan.x}px ${n.pan.y}px`
 		},
-		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				transform: `translate(${n.pan.x}px, ${n.pan.y}px) scale(${n.zoom})`,
-				transformOrigin: "0 0",
-				width: "100%",
-				height: "100%",
-				position: "absolute",
-				top: 0,
-				left: 0,
-				pointerEvents: "none"
-			},
-			children: [
-				/* @__PURE__ */ jsx("div", { style: {
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					transform: `translate(${n.pan.x}px, ${n.pan.y}px) scale(${n.zoom})`,
+					transformOrigin: "0 0",
 					width: "100%",
 					height: "100%",
 					position: "absolute",
-					left: 0,
 					top: 0,
-					pointerEvents: "auto"
-				} }),
-				Z && /* @__PURE__ */ jsx("div", { style: {
-					position: "absolute",
-					left: Z.x,
-					top: Z.y,
-					width: Z.width,
-					height: Z.height,
-					backgroundColor: "rgba(0, 120, 255, 0.1)",
-					border: "1px solid rgba(0, 120, 255, 0.5)",
-					pointerEvents: "none",
-					zIndex: 9999
-				} }),
-				n.snapLines.map((n, _) => /* @__PURE__ */ jsx("div", { style: {
-					position: "absolute",
-					left: n.orientation === "vertical" ? n.position : 0,
-					top: n.orientation === "horizontal" ? n.position : 0,
-					width: n.orientation === "vertical" ? "1px" : "100%",
-					height: n.orientation === "horizontal" ? "1px" : "100%",
-					backgroundColor: "red",
-					zIndex: 9999,
+					left: 0,
 					pointerEvents: "none"
-				} }, _)),
-				/* @__PURE__ */ jsx("div", {
-					style: {
+				},
+				children: [
+					n.snapLines.map((n, _) => /* @__PURE__ */ jsx("div", { style: {
 						position: "absolute",
-						top: 0,
-						left: 0,
-						width: "100%",
-						height: "1px",
-						borderTop: "1px dashed var(--accent-9)",
-						opacity: .6,
-						zIndex: 5,
+						left: n.orientation === "vertical" ? n.position : 0,
+						top: n.orientation === "horizontal" ? n.position : 0,
+						width: n.orientation === "vertical" ? "1px" : "100%",
+						height: n.orientation === "horizontal" ? "1px" : "100%",
+						backgroundColor: "red",
+						zIndex: 9999,
 						pointerEvents: "none"
-					},
-					children: /* @__PURE__ */ jsx("span", {
+					} }, _)),
+					/* @__PURE__ */ jsx("div", {
 						style: {
 							position: "absolute",
-							top: -16,
-							left: 4,
-							fontSize: "10px",
-							color: "var(--accent-9)",
-							fontWeight: 500
+							top: 0,
+							left: 0,
+							width: "100%",
+							height: "1px",
+							borderTop: "1px dashed var(--accent-9)",
+							opacity: .6,
+							zIndex: 5,
+							pointerEvents: "none"
 						},
-						children: "Início (0px)"
-					})
-				}),
-				n.isList && /* @__PURE__ */ jsxs("div", {
-					style: {
+						children: /* @__PURE__ */ jsx("span", {
+							style: {
+								position: "absolute",
+								top: -16,
+								left: 4,
+								fontSize: "10px",
+								color: "var(--accent-9)",
+								fontWeight: 500
+							},
+							children: "Início (0px)"
+						})
+					}),
+					n.elements.map((_) => /* @__PURE__ */ jsx("div", {
+						style: { pointerEvents: "auto" },
+						children: /* @__PURE__ */ jsx(DraggableElement, {
+							element: _,
+							isSelected: n.selectedElementIds.includes(_.id)
+						})
+					}, _.id)),
+					Z && /* @__PURE__ */ jsx("div", { style: {
 						position: "absolute",
-						top: _M,
-						left: 0,
-						right: 0,
-						height: "10px",
-						marginTop: "-5px",
-						cursor: "ns-resize",
-						zIndex: 100,
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						group: "resize-handle"
-					},
-					onMouseDown: fM,
-					children: [/* @__PURE__ */ jsx("div", { style: {
-						width: "100%",
-						height: "2px",
-						backgroundColor: "var(--accent-9)",
-						borderBottom: "none",
-						opacity: .8,
-						boxShadow: "0 1px 4px rgba(0,0,0,0.2)"
-					} }), /* @__PURE__ */ jsxs("div", {
+						left: Z.x,
+						top: Z.y,
+						width: Z.width,
+						height: Z.height,
+						backgroundColor: "rgba(0, 120, 255, 0.2)",
+						border: "1px solid rgba(0, 120, 255, 0.8)",
+						pointerEvents: "none",
+						zIndex: 999999
+					} }),
+					n.isList && /* @__PURE__ */ jsxs("div", {
 						style: {
 							position: "absolute",
-							right: 10,
-							top: -20,
+							top: yM,
+							left: 0,
+							right: 0,
+							height: "10px",
+							marginTop: "-5px",
+							cursor: "ns-resize",
+							zIndex: 100,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							group: "resize-handle"
+						},
+						onMouseDown: mM,
+						children: [/* @__PURE__ */ jsx("div", { style: {
+							width: "100%",
+							height: "2px",
 							backgroundColor: "var(--accent-9)",
-							color: "white",
-							fontSize: "11px",
-							padding: "2px 6px",
-							borderRadius: "4px",
-							fontWeight: 500,
+							borderBottom: "none",
+							opacity: .8,
+							boxShadow: "0 1px 4px rgba(0,0,0,0.2)"
+						} }), /* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								right: 10,
+								top: -20,
+								backgroundColor: "var(--accent-9)",
+								color: "white",
+								fontSize: "11px",
+								padding: "2px 6px",
+								borderRadius: "4px",
+								fontWeight: 500,
+								pointerEvents: "none",
+								boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+							},
+							children: [
+								"Altura do Item: ",
+								yM,
+								"px"
+							]
+						})]
+					}),
+					n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
+						align: "center",
+						justify: "center",
+						style: {
+							height: "100%",
+							color: "var(--gray-8)",
 							pointerEvents: "none",
-							boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+							transform: `scale(${1 / n.zoom})`
 						},
-						children: [
-							"Altura do Item: ",
-							_M,
-							"px"
-						]
-					})]
-				}),
-				n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
-					align: "center",
-					justify: "center",
-					style: {
-						height: "100%",
-						color: "var(--gray-8)",
-						pointerEvents: "none",
-						transform: `scale(${1 / n.zoom})`
-					},
-					children: /* @__PURE__ */ jsx(p$2, { children: "Adicione elementos e arraste livremente" })
-				}),
-				n.elements.map((_) => /* @__PURE__ */ jsx("div", {
-					style: { pointerEvents: "auto" },
-					children: /* @__PURE__ */ jsx(DraggableElement, {
-						element: _,
-						isSelected: n.selectedElementIds.includes(_.id)
+						children: /* @__PURE__ */ jsx(p$2, { children: "Adicione elementos e arraste livremente" })
 					})
-				}, _.id))
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
+				]
+			}),
+			Z && /* @__PURE__ */ jsx("div", { style: {
 				position: "absolute",
-				bottom: 20,
-				right: 20,
-				display: "flex",
-				gap: "8px",
-				backgroundColor: "var(--color-panel-solid)",
-				padding: "4px",
-				borderRadius: "8px",
-				boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
-				zIndex: 1e3
-			},
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					onClick: () => A(Math.max(.1, n.zoom - .1)),
-					style: {
-						padding: "4px 8px",
-						cursor: "pointer"
-					},
-					children: "-"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					style: {
-						padding: "4px 8px",
-						minWidth: "50px",
-						textAlign: "center"
-					},
-					children: [Math.round(n.zoom * 100), "%"]
-				}),
-				/* @__PURE__ */ jsx("button", {
-					onClick: () => A(Math.min(5, n.zoom + .1)),
-					style: {
-						padding: "4px 8px",
-						cursor: "pointer"
-					},
-					children: "+"
-				}),
-				/* @__PURE__ */ jsx("button", {
-					onClick: () => {
-						A(1), j({
-							x: 0,
-							y: 0
-						});
-					},
-					style: {
-						padding: "4px 8px",
-						cursor: "pointer"
-					},
-					children: "Reset"
-				})
-			]
-		})]
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				zIndex: 999995,
+				pointerEvents: "auto"
+			} }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					bottom: 20,
+					right: 20,
+					display: "flex",
+					gap: "8px",
+					backgroundColor: "var(--color-panel-solid)",
+					padding: "4px",
+					borderRadius: "8px",
+					boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+					zIndex: 1e3
+				},
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => A(Math.max(.1, n.zoom - .1)),
+						style: {
+							padding: "4px 8px",
+							cursor: "pointer"
+						},
+						children: "-"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							padding: "4px 8px",
+							minWidth: "50px",
+							textAlign: "center"
+						},
+						children: [Math.round(n.zoom * 100), "%"]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => A(Math.min(5, n.zoom + .1)),
+						style: {
+							padding: "4px 8px",
+							cursor: "pointer"
+						},
+						children: "+"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						onClick: () => {
+							A(1), j({
+								x: 0,
+								y: 0
+							});
+						},
+						style: {
+							padding: "4px 8px",
+							cursor: "pointer"
+						},
+						children: "Reset"
+					})
+				]
+			})
+		]
 	});
 }, EditorSettings = () => {
 	let { state: n, updateListSettings: _, setCanvasHeight: E, setGridSize: O } = useEditor(), [A, j] = useState(!1), [M, N] = useState(""), [P, z] = useState("asc"), [B, H] = useState("bottom"), [U, G] = useState("down"), [Z, Yj] = useState("150"), [Xj, Zj] = useState(""), [Qj, eM] = useState("0"), [tM, nM] = useState("slideIn"), [rM, oM] = useState(.3), [sM, cM] = useState("ease-out");
@@ -18666,26 +18675,28 @@ var camelToKebab = (n) => n.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toL
 			}
 		} catch {}
 		else {
-			let _ = 0, N = /<([a-z]+)([^>]*?)>/i.exec(A);
-			if (N) {
-				let E = N[2], O = /height=["']?(\d+)["']?/i.exec(E), P = /height:\s*(\d+)px/i.exec(E);
-				_ = O ? parseInt(O[1]) : P ? parseInt(P[1]) : measureTextHeight(A, n.width, M, j);
-			} else _ = measureTextHeight(A, n.width, M, j);
-			let P = parseInt(String(n.style && n.style.minHeight || 0)), z = Math.max(_, P), B = n.height, H = z - B;
-			if (H > 0) {
-				let _ = n.y + B, A = {
+			let _ = 0, N = parseInt(String(n.style && n.style.padding || 0)), P = Math.max(1, n.width - N * 2), z = /<([a-z]+)([^>]*?)>/i.exec(A);
+			if (z) {
+				let n = z[2], E = /height=["']?(\d+)["']?/i.exec(n), O = /height:\s*(\d+)px/i.exec(n);
+				_ = E ? parseInt(E[1]) : O ? parseInt(O[1]) : measureTextHeight(A, P, M, j);
+			} else _ = measureTextHeight(A, P, M, j);
+			let B = _ + N * 2;
+			(!z || z && !_) && (B += 4);
+			let H = parseInt(String(n.style && n.style.minHeight || 0)), U = Math.max(B, H), W = n.height, G = U - W;
+			if (G > 0) {
+				let _ = n.y + W, A = {
 					x: n.x,
 					y: n.y,
 					width: n.width,
-					height: B
+					height: W
 				};
-				n.height = z, E.forEach((E) => {
+				n.height = U, E.forEach((E) => {
 					if (E.id !== n.id) {
 						if (O(A, E)) {
-							E.height += H;
+							E.height += G;
 							return;
 						}
-						E.y >= _ && Math.max(0, Math.min(n.x + n.width, E.x + E.width) - Math.max(n.x, E.x)) > 0 && (E.y += H);
+						E.y >= _ && Math.max(0, Math.min(n.x + n.width, E.x + E.width) - Math.max(n.x, E.x)) > 0 && (E.y += G);
 					}
 				});
 			}