@pdfme/ui 6.1.2-dev.3 → 6.1.2-dev.31

package/dist/Designer.d.ts

@@ -1,10 +1,14 @@
 import { Template, DesignerProps } from '@pdfme/common';
 import { BaseUIClass } from './class.js';
+import { type DesignerSelectSchemasOptions, type DesignerSchemaSelectionTarget, type DesignerSelectedSchema, type DesignerSelection, type DesignerSelectionChangeCallback } from './designerSelection.js';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;
     private onPageChangeCallback?;
+    private onChangeSelectionCallback?;
     private pageCursor;
+    private selection;
+    private selectSchemasHandler;
     constructor(props: DesignerProps);
     saveTemplate(): void;
     updateTemplate(template: Template): void;
@@ -14,6 +18,10 @@ declare class Designer extends BaseUIClass {
         currentPage: number;
         totalPages: number;
     }) => void): void;
+    onChangeSelection(cb: DesignerSelectionChangeCallback): void;
+    getSelection(): DesignerSelection;
+    getSelectedSchemas(): DesignerSelectedSchema[];
+    selectSchemas(targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[], options?: DesignerSelectSchemasOptions): void;
     getPageCursor(): number;
     getTotalPages(): number;
     protected render(): void;

package/dist/components/Designer/index.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { Template, DesignerProps, Size } from '@pdfme/common';
-declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, }: Omit<DesignerProps, "domContainer"> & {
+import { type DesignerSelectSchemas, type DesignerSelection } from '../../designerSelection.js';
+declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, onChangeSelection, onRegisterSchemaSelectionHandler, }: Omit<DesignerProps, "domContainer"> & {
     size: Size;
     onSaveTemplate: (t: Template) => void;
     onChangeTemplate: (t: Template) => void;
+    onChangeSelection?: (selection: DesignerSelection) => void;
+    onRegisterSchemaSelectionHandler?: (handler: DesignerSelectSchemas | null) => void;
 } & {
     onChangeTemplate: (t: Template) => void;
     onPageCursorChange: (newPageCursor: number, totalPages: number) => void;

package/dist/designerSelection.d.ts

@@ -0,0 +1,45 @@
+import { type Schema, type SchemaForUI } from '@pdfme/common';
+export type DesignerSelectionBounds = {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+};
+export type DesignerSelectedSchema = {
+    name: string;
+    pageIndex: number;
+    schema: Schema;
+    schemaId: string;
+    schemaIndex: number;
+    type: string;
+};
+export type DesignerSelection = {
+    bounds: DesignerSelectionBounds | null;
+    pageIndex: number;
+    schemas: DesignerSelectedSchema[];
+};
+export type DesignerSelectionChangeCallback = (selection: DesignerSelection) => void;
+export type DesignerSchemaSelectionTarget = string | {
+    name?: string;
+    pageIndex?: number;
+    schemaId?: string;
+    schemaIndex?: number;
+};
+export type DesignerSelectSchemasOptions = {
+    pageIndex?: number;
+    scroll?: boolean;
+};
+export type DesignerSelectSchemas = (targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[], options?: DesignerSelectSchemasOptions) => void;
+export declare const EMPTY_DESIGNER_SELECTION: DesignerSelection;
+export declare const createDesignerSelection: ({ activeSchemaIds, pageIndex, schemasList, }: {
+    activeSchemaIds: string[];
+    pageIndex: number;
+    schemasList: SchemaForUI[][];
+}) => DesignerSelection;
+export declare const normalizeDesignerSchemaSelectionTargets: (targets: DesignerSchemaSelectionTarget | DesignerSchemaSelectionTarget[]) => DesignerSchemaSelectionTarget[];
+export declare const getDesignerSelectionPageIndex: (targets: DesignerSchemaSelectionTarget[], fallbackPageIndex: number, options?: DesignerSelectSchemasOptions) => number;
+export declare const getSelectedSchemaIds: ({ pageIndex, schemas, targets, }: {
+    pageIndex: number;
+    schemas: SchemaForUI[];
+    targets: DesignerSchemaSelectionTarget[];
+}) => string[];

package/dist/index.d.ts

@@ -2,3 +2,4 @@ import Designer from './Designer.js';
 import Form from './Form.js';
 import Viewer from './Viewer.js';
 export { Designer, Viewer, Form };
+export type { DesignerSchemaSelectionTarget, DesignerSelectSchemas, DesignerSelectSchemasOptions, DesignerSelectedSchema, DesignerSelection, DesignerSelectionBounds, DesignerSelectionChangeCallback, } from './designerSelection.js';

package/dist/index.js

@@ -45966,7 +45966,7 @@ var UIProps = CommonProps.extend({
 });
 var PreviewProps = UIProps.extend({ inputs: Inputs }).strict();
 var DesignerProps = UIProps.extend({}).strict();
-var cloneDeep$1 = structuredClone;
+var cloneDeep$1 = (value) => structuredClone(value);
 var uniq = (array) => Array.from(new Set(array));
 var getFallbackFontName = (font) => {
 	const initial = "";
@@ -46665,6 +46665,10 @@ var getDynamicTemplate = async (arg) => {
 	const PARALLEL_LIMIT = 10;
 	for (let pageIndex = 0; pageIndex < template.schemas.length; pageIndex++) {
 		const pageSchemas = template.schemas[pageIndex];
+		if (pageSchemas.length === 0) {
+			resultPages.push([]);
+			continue;
+		}
 		const { items, orderMap } = normalizePageSchemas(pageSchemas, paddingTop);
 		for (let i = 0; i < items.length; i += PARALLEL_LIMIT) {
 			const chunk = items.slice(i, i + PARALLEL_LIMIT);
@@ -46681,7 +46685,6 @@ var getDynamicTemplate = async (arg) => {
 		const processedPages = processDynamicPage(items, orderMap, contentHeight, paddingTop);
 		resultPages.push(...processedPages);
 	}
-	removeTrailingEmptyPages(resultPages);
 	if (resultPages.length === template.schemas.length) {
 		let unchanged = true;
 		for (let i = 0; i < resultPages.length && unchanged; i++) {
@@ -100555,7 +100558,7 @@ var Underline = [["path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }], ["line", {
 	y2: "20"
 }]];
 //#endregion
-//#region ../schemas/dist/builtins-BB2DHceW.js
+//#region ../schemas/dist/builtins-D9sJvrz9.js
 var addUriLinkAnnotation = (arg) => {
 	const { pdfDoc, page, uri, rect, borderWidth = 0 } = arg;
 	const safeUri = normalizeSafeLinkUri(uri);
@@ -101738,6 +101741,8 @@ var getRangedPlainTextValue = (arg) => {
 var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize) => {
 	const { schema, rootElement, mode } = arg;
 	let dynamicFontSize = resolvedDynamicFontSize;
+	const characterSpacing = schema.characterSpacing ?? 0;
+	const editable = isEditable(mode, schema);
 	if (dynamicFontSize === void 0 && shouldUseDynamicFontSize(schema, arg.basePdf) && value) dynamicFontSize = calculateDynamicFontSize({
 		textSchema: schema,
 		fontKitFont,
@@ -101772,7 +101777,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		justifyContent: mapVerticalAlignToFlex(verticalAlignment),
 		width: "100%",
 		height: "100%",
-		cursor: isEditable(mode, schema) ? "text" : "default"
+		cursor: editable ? "text" : "default"
 	};
 	Object.assign(container.style, containerStyle);
 	rootElement.innerHTML = "";
@@ -101784,7 +101789,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		fontFamily: schema.fontName ? `'${schema.fontName}'` : "inherit",
 		color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
 		fontSize: `${dynamicFontSize ?? schema.fontSize ?? 13}pt`,
-		letterSpacing: `${schema.characterSpacing ?? 0}pt`,
+		letterSpacing: `${characterSpacing}pt`,
 		lineHeight: `${schema.lineHeight ?? 1}em`,
 		textAlign: schema.alignment ?? "left",
 		whiteSpace: "pre-wrap",
@@ -101796,6 +101801,7 @@ var buildStyledTextContainer = (arg, fontKitFont, value, resolvedDynamicFontSize
 		paddingTop: `${topAdjustment}px`,
 		backgroundColor: "transparent",
 		textDecoration: textDecorations.join(" "),
+		...editable && characterSpacing > 0 ? { width: `calc(100% + ${characterSpacing}pt)` } : {},
 		...isTopAligned ? { height: "100%" } : {}
 	};
 	const textBlock = document.createElement("div");
@@ -213907,7 +213913,7 @@ withProvider(FormCore, { Html: html });
 //#region ../../node_modules/form-render/es/index.js
 var es_default = withProvider(FormCore, widgets_exports);
 //#endregion
-//#region ../schemas/dist/helper-CEme39Uo.js
+//#region ../schemas/dist/helper-Doen9Okh.js
 var substituteVariables = (text, variablesIn, valueMapper = (value) => value) => {
 	if (!text) return "";
 	let substitutedText = text;
@@ -213936,14 +213942,14 @@ var validateVariables = (value, schema) => {
 	} catch {
 		throw new SyntaxError(`[@pdfme/generator] invalid JSON string '${value}' for variables in field ${schema.name}`);
 	}
-	for (const variable of schema.variables) if (!values[variable]) {
+	for (const variable of schema.variables) if (!Object.prototype.hasOwnProperty.call(values, variable) || values[variable] === null || values[variable] === void 0) {
 		if (schema.required) throw new Error(`[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`);
 		return false;
 	}
 	return true;
 };
 //#endregion
-//#region ../schemas/dist/dynamicTemplate-C7MdZxPm.js
+//#region ../schemas/dist/dynamicTemplate-CRjx4Mjc.js
 var getDynamicLayoutForMultiVariableText = async (value, args) => {
 	if (args.schema.type !== "multiVariableText") return { heights: [args.schema.height] };
 	const schema = args.schema;
@@ -235266,6 +235272,81 @@ var Canvas = (props, ref) => {
 };
 var Canvas_default = (0, import_react$9.forwardRef)(Canvas);
 //#endregion
+//#region src/designerSelection.ts
+var EMPTY_DESIGNER_SELECTION = {
+	bounds: null,
+	pageIndex: 0,
+	schemas: []
+};
+var toPersistedSchema = (schema) => {
+	const cloned = cloneDeep$1(schema);
+	delete cloned.id;
+	return cloned;
+};
+var getSelectionBounds = (schemas) => {
+	if (schemas.length === 0) return null;
+	const left = Math.min(...schemas.map(({ schema }) => schema.position.x));
+	const top = Math.min(...schemas.map(({ schema }) => schema.position.y));
+	const right = Math.max(...schemas.map(({ schema }) => schema.position.x + schema.width));
+	return {
+		height: Math.max(...schemas.map(({ schema }) => schema.position.y + schema.height)) - top,
+		width: right - left,
+		x: left,
+		y: top
+	};
+};
+var createDesignerSelection = ({ activeSchemaIds, pageIndex, schemasList }) => {
+	const pageSchemas = schemasList[pageIndex] ?? [];
+	const selectedSchemas = activeSchemaIds.flatMap((schemaId) => {
+		const schemaIndex = pageSchemas.findIndex((schema) => schema.id === schemaId);
+		const schema = pageSchemas[schemaIndex];
+		if (schemaIndex === -1 || !schema) return [];
+		return [{
+			name: schema.name,
+			pageIndex,
+			schema: toPersistedSchema(schema),
+			schemaId: schema.id,
+			schemaIndex,
+			type: schema.type
+		}];
+	});
+	return {
+		bounds: getSelectionBounds(selectedSchemas),
+		pageIndex,
+		schemas: selectedSchemas
+	};
+};
+var normalizeDesignerSchemaSelectionTargets = (targets) => Array.isArray(targets) ? targets : [targets];
+var getDesignerSelectionPageIndex = (targets, fallbackPageIndex, options = {}) => {
+	const optionPageIndex = options.pageIndex;
+	if (Number.isInteger(optionPageIndex) && optionPageIndex !== void 0 && optionPageIndex >= 0) return optionPageIndex;
+	const targetPageIndex = targets.find((target) => typeof target === "object" && target !== null)?.pageIndex;
+	return Number.isInteger(targetPageIndex) && targetPageIndex !== void 0 && targetPageIndex >= 0 ? targetPageIndex : fallbackPageIndex;
+};
+var getSelectedSchemaIds = ({ pageIndex, schemas, targets }) => {
+	const selectedIds = /* @__PURE__ */ new Set();
+	targets.forEach((target) => {
+		schemas.forEach((schema, schemaIndex) => {
+			if (typeof target === "string") {
+				if (schema.id === target || schema.name === target) selectedIds.add(schema.id);
+				return;
+			}
+			if (Number.isInteger(target.pageIndex) && target.pageIndex !== void 0 && target.pageIndex !== pageIndex) return;
+			if (!(target.schemaId !== void 0 || target.schemaIndex !== void 0 || target.name !== void 0)) return;
+			if (target.schemaId !== void 0 && target.schemaId === schema.id) {
+				selectedIds.add(schema.id);
+				return;
+			}
+			if (target.schemaIndex !== void 0 && target.schemaIndex === schemaIndex) {
+				selectedIds.add(schema.id);
+				return;
+			}
+			if (target.name !== void 0 && target.name === schema.name) selectedIds.add(schema.id);
+		});
+	});
+	return [...selectedIds];
+};
+//#endregion
 //#region src/components/Spinner.tsx
 var Spinner = () => {
 	const { token } = theme_default.useToken();
@@ -235541,7 +235622,7 @@ var scaleDragPosAdjustment = (adjustment, scale) => {
 	if (scale < 1) return adjustment * -(1 - scale);
 	return 0;
 };
-var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange }) => {
+var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPageCursorChange, onChangeSelection, onRegisterSchemaSelectionHandler }) => {
 	const past = (0, import_react$9.useRef)([]);
 	const future = (0, import_react$9.useRef)([]);
 	const canvasRef = (0, import_react$9.useRef)(null);
@@ -235564,10 +235645,59 @@ var TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, onPage
 		zoomLevel,
 		maxZoom
 	});
+	const getElementsByIds = (ids) => ids.map((id) => document.getElementById(id)).filter((element) => element instanceof HTMLElement);
 	const onEdit = (targets) => {
 		setActiveElements(targets.filter((target) => target instanceof HTMLElement));
 		setHoveringSchemaId(null);
 	};
+	const selectSchemas = (0, import_react$9.useCallback)((targets, options = {}) => {
+		const normalizedTargets = normalizeDesignerSchemaSelectionTargets(targets);
+		if (normalizedTargets.length === 0) {
+			onEditEnd();
+			return;
+		}
+		const targetPageIndex = getDesignerSelectionPageIndex(normalizedTargets, pageCursor, options);
+		const selectedSchemaIds = getSelectedSchemaIds({
+			pageIndex: targetPageIndex,
+			schemas: schemasList[targetPageIndex] ?? [],
+			targets: normalizedTargets
+		});
+		const editSelectedSchemas = () => onEdit(getElementsByIds(selectedSchemaIds));
+		if (selectedSchemaIds.length === 0) {
+			onEditEnd();
+			return;
+		}
+		if (targetPageIndex !== pageCursor) {
+			setPageCursor(targetPageIndex);
+			onPageCursorChange(targetPageIndex, schemasList.length);
+			if (options.scroll !== false && canvasRef.current) canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, targetPageIndex, scale);
+			setTimeout(editSelectedSchemas);
+			return;
+		}
+		editSelectedSchemas();
+	}, [
+		pageCursor,
+		pageSizes,
+		scale,
+		schemasList,
+		onPageCursorChange
+	]);
+	(0, import_react$9.useEffect)(() => {
+		onRegisterSchemaSelectionHandler?.(selectSchemas);
+		return () => onRegisterSchemaSelectionHandler?.(null);
+	}, [onRegisterSchemaSelectionHandler, selectSchemas]);
+	(0, import_react$9.useEffect)(() => {
+		onChangeSelection?.(createDesignerSelection({
+			activeSchemaIds: activeElements.map((element) => element.id),
+			pageIndex: pageCursor,
+			schemasList
+		}));
+	}, [
+		activeElements,
+		onChangeSelection,
+		pageCursor,
+		schemasList
+	]);
 	const onEditEnd = () => {
 		setActiveElements([]);
 		setHoveringSchemaId(null);
@@ -235913,7 +236043,10 @@ var Designer = class extends BaseUIClass {
 		_defineProperty$14(this, "onSaveTemplateCallback", void 0);
 		_defineProperty$14(this, "onChangeTemplateCallback", void 0);
 		_defineProperty$14(this, "onPageChangeCallback", void 0);
+		_defineProperty$14(this, "onChangeSelectionCallback", void 0);
 		_defineProperty$14(this, "pageCursor", 0);
+		_defineProperty$14(this, "selection", EMPTY_DESIGNER_SELECTION);
+		_defineProperty$14(this, "selectSchemasHandler", null);
 		checkDesignerProps(props);
 	}
 	saveTemplate() {
@@ -235936,6 +236069,20 @@ var Designer = class extends BaseUIClass {
 	onPageChange(cb) {
 		this.onPageChangeCallback = cb;
 	}
+	onChangeSelection(cb) {
+		this.onChangeSelectionCallback = cb;
+	}
+	getSelection() {
+		if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+		return cloneDeep$1(this.selection);
+	}
+	getSelectedSchemas() {
+		return this.getSelection().schemas;
+	}
+	selectSchemas(targets, options) {
+		if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
+		this.selectSchemasHandler?.(targets, options);
+	}
 	getPageCursor() {
 		return this.pageCursor;
 	}
@@ -235969,6 +236116,13 @@ var Designer = class extends BaseUIClass {
 						totalPages
 					});
 				},
+				onChangeSelection: (selection) => {
+					this.selection = cloneDeep$1(selection);
+					if (this.onChangeSelectionCallback) this.onChangeSelectionCallback(cloneDeep$1(selection));
+				},
+				onRegisterSchemaSelectionHandler: (handler) => {
+					this.selectSchemasHandler = handler;
+				},
 				size: this.size
 			})
 		}));