@pdfme/ui 6.1.8 → 6.1.9

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);
@@ -212003,6 +212019,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 +212093,9 @@ var Preview = ({ template, inputs, size, onChangeInput, onPageChange }) => {
 		template,
 		unitCursor
 	]);
+	(0, import_react$9.useEffect)(() => {
+		setActiveSchemaId(null);
+	}, [unitCursor]);
 	useScrollPageCursor({
 		ref: containerRef,
 		paperRefs,
@@ -212172,6 +212192,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 +212231,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, {