@pdfme/ui 6.1.2-dev.25 → 6.1.2-dev.27

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

@@ -235269,6 +235269,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();
@@ -235544,7 +235619,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);
@@ -235567,10 +235642,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);
@@ -235916,7 +236040,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() {
@@ -235939,6 +236066,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;
 	}
@@ -235972,6 +236113,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
 			})
 		}));