@pdfme/ui 6.1.8 → 6.1.9-dev.1

package/dist/components/Renderer.d.ts

@@ -6,7 +6,9 @@ type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'opt
     value: string;
     outline: string;
     onChangeHoveringSchemaId?: (id: string | null) => void;
+    onChangeActiveSchemaId?: (id: string | null) => void;
     scale: number;
+    isActive?: boolean;
     selectable?: boolean;
 };
 declare const Renderer: (props: RendererProps) => React.JSX.Element;

package/dist/index.js

@@ -44411,7 +44411,7 @@ pp$3.currentThisScope = function() {
 		if (scope.flags & (SCOPE_VAR | SCOPE_CLASS_FIELD_INIT | SCOPE_CLASS_STATIC_BLOCK) && !(scope.flags & SCOPE_ARROW)) return scope;
 	}
 };
-var Node = function Node(parser, pos, loc) {
+var Node$1 = function Node(parser, pos, loc) {
 	this.type = "";
 	this.start = pos;
 	this.end = 0;
@@ -44421,10 +44421,10 @@ var Node = function Node(parser, pos, loc) {
 };
 var pp$2 = Parser.prototype;
 pp$2.startNode = function() {
-	return new Node(this, this.start, this.startLoc);
+	return new Node$1(this, this.start, this.startLoc);
 };
 pp$2.startNodeAt = function(pos, loc) {
-	return new Node(this, pos, loc);
+	return new Node$1(this, pos, loc);
 };
 function finishNodeAt(node, type, pos, loc) {
 	node.type = type;
@@ -44440,7 +44440,7 @@ pp$2.finishNodeAt = function(node, type, pos, loc) {
 	return finishNodeAt.call(this, node, type, pos, loc);
 };
 pp$2.copyNode = function(node) {
-	var newNode = new Node(this, node.start, this.startLoc);
+	var newNode = new Node$1(this, node.start, this.startLoc);
 	for (var prop in node) newNode[prop] = node[prop];
 	return newNode;
 };
@@ -46006,7 +46006,7 @@ Parser.acorn = {
 	Position,
 	SourceLocation,
 	getLineInfo,
-	Node,
+	Node: Node$1,
 	TokenType,
 	tokTypes: types$1,
 	keywordTypes: keywords,
@@ -46025,7 +46025,7 @@ function parseExpressionAt(input, pos, options) {
 }
 //#endregion
 //#region ../common/dist/index.js
-var PDFME_VERSION = "6.1.8";
+var PDFME_VERSION = "6.1.9";
 var PAGE_SIZE_PRESETS = {
 	A3: {
 		width: 297,
@@ -190243,35 +190243,51 @@ var useRenderKey = (arg) => {
 		plugin
 	]);
 };
-var Wrapper = ({ children, outline, onChangeHoveringSchemaId, schema, selectable = true }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-	title: schema.name,
-	onMouseEnter: () => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id),
-	onMouseLeave: () => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null),
-	className: selectable ? SELECTABLE_CLASSNAME : "",
-	id: schema.id,
-	style: {
-		position: "absolute",
-		cursor: schema.readOnly ? "initial" : "pointer",
-		height: schema.height * ZOOM,
-		width: schema.width * ZOOM,
-		top: schema.position.y * ZOOM,
-		left: schema.position.x * ZOOM,
-		transform: `rotate(${schema.rotate ?? 0}deg)`,
-		opacity: schema.opacity ?? 1,
-		outline
-	},
-	children: [schema.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+var Wrapper = ({ children, outline, onChangeHoveringSchemaId, onChangeActiveSchemaId, schema, mode, isActive = false, selectable = true }) => {
+	const { token } = theme_default.useToken();
+	const isFormEditable = mode === "form" && !schema.readOnly;
+	const activateSchema = () => {
+		if (isFormEditable) onChangeActiveSchemaId?.(schema.id);
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		title: schema.name,
+		onMouseEnter: () => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id),
+		onMouseLeave: () => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null),
+		onPointerDownCapture: activateSchema,
+		onClickCapture: activateSchema,
+		onFocusCapture: activateSchema,
+		onBlurCapture: (event) => {
+			const nextTarget = event.relatedTarget;
+			if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) onChangeActiveSchemaId?.(null);
+		},
+		className: selectable ? SELECTABLE_CLASSNAME : "",
+		id: schema.id,
 		style: {
-			color: "red",
 			position: "absolute",
-			top: -12,
-			left: -12,
-			fontSize: 18,
-			fontWeight: 700
-		},
-		children: "*"
-	}), children]
-});
+			cursor: schema.readOnly ? "initial" : "pointer",
+			height: schema.height * ZOOM,
+			width: schema.width * ZOOM,
+			top: schema.position.y * ZOOM,
+			left: schema.position.x * ZOOM,
+			transform: `rotate(${schema.rotate ?? 0}deg)`,
+			opacity: schema.opacity ?? 1,
+			outline,
+			boxShadow: isActive ? `0 0 0 2px ${token.colorPrimary}, 0 0 0 4px ${token.colorPrimaryBg}` : void 0,
+			zIndex: isActive ? 1 : void 0
+		},
+		children: [schema.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			style: {
+				color: "red",
+				position: "absolute",
+				top: -12,
+				left: -12,
+				fontSize: 18,
+				fontWeight: 700
+			},
+			children: "*"
+		}), children]
+	});
+};
 var Renderer = (props) => {
 	const { schema, basePdf, value, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
 	const pluginsRegistry = (0, import_react$9.useContext)(PluginsRegistry);
@@ -211005,6 +211021,14 @@ var ErrorScreen = ({ size, error }) => {
 //#endregion
 //#region src/components/CtlBar.tsx
 var { Text: Text$1 } = Typography;
+var CONTROL_BUTTON_SIZE = 32;
+var getControlButtonStyle = (active) => ({
+	width: CONTROL_BUTTON_SIZE,
+	minWidth: CONTROL_BUTTON_SIZE,
+	height: CONTROL_BUTTON_SIZE,
+	padding: 0,
+	...active ? { backgroundColor: "rgba(255, 255, 255, 0.18)" } : {}
+});
 var ToolbarButton = ({ className, label, disabled, active, onClick, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip$2, {
 	title: label,
 	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
@@ -211014,7 +211038,7 @@ var ToolbarButton = ({ className, label, disabled, active, onClick, children })
 		title: label,
 		disabled,
 		onClick,
-		style: active ? { backgroundColor: "rgba(255, 255, 255, 0.18)" } : void 0,
+		style: getControlButtonStyle(active),
 		children
 	})
 });
@@ -211037,7 +211061,10 @@ var Zoom = ({ zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, style, lab
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		style: {
 			display: "flex",
-			alignItems: "center"
+			alignItems: "center",
+			justifyContent: "center",
+			flexWrap: "wrap",
+			rowGap: 0
 		},
 		children: [
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
@@ -211049,7 +211076,12 @@ var Zoom = ({ zoomLevel, setZoomLevel, zoomMode, fitWidth, fitHeight, style, lab
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text$1, {
 				strong: true,
-				style: style.textStyle,
+				style: {
+					...style.textStyle,
+					minWidth: 44,
+					textAlign: "center",
+					whiteSpace: "nowrap"
+				},
 				children: [Math.round(zoomLevel * 100), "%"]
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarButton, {
@@ -211089,6 +211121,7 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 				type: "text",
 				disabled: pageCursor <= 0,
 				onClick: () => setPageCursor(pageCursor - 1),
+				style: getControlButtonStyle(),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, {
 					size: 16,
 					color: style.textStyle.color
@@ -211096,7 +211129,12 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text$1, {
 				strong: true,
-				style: style.textStyle,
+				style: {
+					...style.textStyle,
+					minWidth: 36,
+					textAlign: "center",
+					whiteSpace: "nowrap"
+				},
 				children: [
 					pageCursor + 1,
 					"/",
@@ -211108,6 +211146,7 @@ var Pager = ({ pageCursor, pageNum, setPageCursor, style }) => {
 				type: "text",
 				disabled: pageCursor + 1 >= pageNum,
 				onClick: () => setPageCursor(pageCursor + 1),
+				style: getControlButtonStyle(),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {
 					size: 16,
 					color: style.textStyle.color
@@ -211124,6 +211163,7 @@ var ContextMenu = ({ items, style }) => /* @__PURE__ */ (0, import_jsx_runtime.j
 	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(button_default$1, {
 		className: UI_CLASSNAME + "context-menu",
 		type: "text",
+		style: getControlButtonStyle(),
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ellipsis, {
 			size: 16,
 			color: style.textStyle.color
@@ -211162,6 +211202,8 @@ var CtlBar = (props) => {
 			width: size.width,
 			display: "flex",
 			justifyContent: "center",
+			boxSizing: "border-box",
+			padding: `0 ${token.paddingXS}px`,
 			pointerEvents: "none"
 		},
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -211172,10 +211214,13 @@ var CtlBar = (props) => {
 				justifyContent: "center",
 				position: "relative",
 				zIndex: 1,
-				height: 40,
+				minHeight: 40,
+				maxWidth: "100%",
 				boxSizing: "border-box",
-				padding: token.paddingSM,
-				gap: token.marginXS,
+				padding: `${token.paddingXXS}px ${token.paddingSM}px`,
+				columnGap: token.marginXS,
+				rowGap: token.marginXXS,
+				flexWrap: "wrap",
 				borderRadius: token.borderRadius,
 				backgroundColor: token.colorBgMask,
 				pointerEvents: "auto"
@@ -211183,6 +211228,7 @@ var CtlBar = (props) => {
 			children: [
 				pageNum > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "pdfme-ui-pager",
+					style: { flexShrink: 0 },
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pager, {
 						style: { textStyle },
 						pageCursor,
@@ -211192,6 +211238,7 @@ var CtlBar = (props) => {
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: UI_CLASSNAME + "zoom",
+					style: { minWidth: 0 },
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zoom, {
 						style: { textStyle },
 						zoomLevel,
@@ -212003,6 +212050,7 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 	const paperRefs = (0, import_react$9.useRef)([]);
 	const [unitCursor, setUnitCursor] = (0, import_react$9.useState)(0);
 	const [pageCursor, setPageCursor] = (0, import_react$9.useState)(0);
+	const [activeSchemaId, setActiveSchemaId] = (0, import_react$9.useState)(null);
 	const [schemasList, setSchemasList] = (0, import_react$9.useState)([[]]);
 	const { backgrounds, pageSizes, baseScale, error, refresh } = useUIPreProcessor({
 		template,
@@ -212076,6 +212124,9 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 		template,
 		unitCursor
 	]);
+	(0, import_react$9.useEffect)(() => {
+		setActiveSchemaId(null);
+	}, [unitCursor]);
 	useScrollPageCursor({
 		ref: containerRef,
 		paperRefs,
@@ -212172,6 +212223,11 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 				ref: containerRef,
+				onPointerDown: (event) => {
+					if (!isForm) return;
+					const target = event.target;
+					if (!(target instanceof Element) || !target.closest(`.selectable`)) setActiveSchemaId(null);
+				},
 				style: {
 					...size,
 					position: "relative",
@@ -212206,7 +212262,9 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 								handleOnChangeRenderer(Array.isArray(arg) ? arg : [arg], schema);
 							},
 							outline: isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : "transparent",
-							scale: renderScale
+							scale: renderScale,
+							isActive: isForm && activeSchemaId === schema.id,
+							onChangeActiveSchemaId: isForm ? setActiveSchemaId : void 0
 						}, schema.id);
 					},
 					renderPaper: ({ index }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticSchema, {