@pdfme/ui 5.4.6-dev.31 → 5.4.6-dev.33

package/dist/types/src/components/Designer/RightSidebar/DetailView/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
-type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'schemasList' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
+type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'schemasList' | 'pageSize' | 'basePdf' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
 };
 declare const _default: React.MemoExoticComponent<(props: DetailViewProps) => React.JSX.Element>;

package/dist/types/src/types.d.ts

@@ -1,10 +1,11 @@
-import type { SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import type { SchemaForUI, Size, ChangeSchemas, BasePdf } from '@pdfme/common';
 export type SidebarProps = {
     height: number;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;
     size: Size;
     pageSize: Size;
+    basePdf: BasePdf;
     activeElements: HTMLElement[];
     schemas: SchemaForUI[];
     schemasList: SchemaForUI[][];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.4.6-dev.31",
+  "version": "5.4.6-dev.33",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -8,6 +8,7 @@ import type {
   PropPanelSchema,
   Schema,
 } from '@pdfme/common';
+import { isBlankPdf } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types.js';
 import { Menu } from 'lucide-react';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts.js';
@@ -29,6 +30,7 @@ type DetailViewProps = Pick<
   | 'schemas'
   | 'schemasList'
   | 'pageSize'
+  | 'basePdf'
   | 'changeSchemas'
   | 'activeElements'
   | 'deselectSchema'
@@ -39,7 +41,8 @@ type DetailViewProps = Pick<
 const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, schemasList, changeSchemas, deselectSchema, activeSchema } = props;
+  const { size, schemasList, changeSchemas, deselectSchema, activeSchema, pageSize, basePdf } =
+    props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
@@ -116,6 +119,37 @@ const DetailView = (props: DetailViewProps) => {
   const validateUniqueSchemaName = (_: unknown, value: string): boolean =>
     uniqueSchemaName.current(value);
 
+  // Calculate padding values once
+  const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(basePdf)
+    ? basePdf.padding
+    : [0, 0, 0, 0];
+
+  // Cross-field validation: only checks when both fields are individually valid
+  const validatePosition = (_: unknown, value: number, fieldName: string): boolean => {
+    const formValues = form.getValues() as Record<string, unknown>;
+    const position = formValues.position as { x: number; y: number } | undefined;
+    const width = formValues.width as number | undefined;
+    const height = formValues.height as number | undefined;
+
+    if (!position || width === undefined || height === undefined) return true;
+
+    if (fieldName === 'x') {
+      if (value < paddingLeft || value > pageSize.width - paddingRight) return true;
+      if (width > 0 && value + width > pageSize.width - paddingRight) return false;
+    } else if (fieldName === 'y') {
+      if (value < paddingTop || value > pageSize.height - paddingBottom) return true;
+      if (height > 0 && value + height > pageSize.height - paddingBottom) return false;
+    } else if (fieldName === 'width') {
+      if (position.x < paddingLeft || position.x > pageSize.width - paddingRight) return true;
+      if (value > 0 && position.x + value > pageSize.width - paddingRight) return false;
+    } else if (fieldName === 'height') {
+      if (position.y < paddingTop || position.y > pageSize.height - paddingBottom) return true;
+      if (value > 0 && position.y + value > pageSize.height - paddingBottom) return false;
+    }
+
+    return true;
+  };
+
   // Use explicit type for debounce function that matches the expected signature
   const handleWatch = debounce(function (...args: unknown[]) {
     const formSchema = args[0] as Record<string, unknown>;
@@ -203,6 +237,10 @@ const DetailView = (props: DetailViewProps) => {
       })()
     : emptySchema;
 
+  // Calculate max values considering padding
+  const maxWidth = pageSize.width - paddingLeft - paddingRight;
+  const maxHeight = pageSize.height - paddingTop - paddingBottom;
+
   // Create a type-safe schema object
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
@@ -247,8 +285,36 @@ const DetailView = (props: DetailViewProps) => {
         type: 'object',
         widget: 'card',
         properties: {
-          x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
-          y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
+          x: {
+            title: 'X',
+            type: 'number',
+            widget: 'inputNumber',
+            required: true,
+            span: 8,
+            min: paddingLeft,
+            max: pageSize.width - paddingRight,
+            rules: [
+              {
+                validator: (_: unknown, value: number) => validatePosition(_, value, 'x'),
+                message: typedI18n('validation.outOfBounds'),
+              },
+            ],
+          },
+          y: {
+            title: 'Y',
+            type: 'number',
+            widget: 'inputNumber',
+            required: true,
+            span: 8,
+            min: paddingTop,
+            max: pageSize.height - paddingBottom,
+            rules: [
+              {
+                validator: (_: unknown, value: number) => validatePosition(_, value, 'y'),
+                message: typedI18n('validation.outOfBounds'),
+              },
+            ],
+          },
         },
       },
       width: {
@@ -257,7 +323,13 @@ const DetailView = (props: DetailViewProps) => {
         widget: 'inputNumber',
         required: true,
         span: 6,
-        props: { min: 0 },
+        props: { min: 0, max: maxWidth },
+        rules: [
+          {
+            validator: (_: unknown, value: number) => validatePosition(_, value, 'width'),
+            message: typedI18n('validation.outOfBounds'),
+          },
+        ],
       },
       height: {
         title: typedI18n('height'),
@@ -265,7 +337,13 @@ const DetailView = (props: DetailViewProps) => {
         widget: 'inputNumber',
         required: true,
         span: 6,
-        props: { min: 0 },
+        props: { min: 0, max: maxHeight },
+        rules: [
+          {
+            validator: (_: unknown, value: number) => validatePosition(_, value, 'height'),
+            message: typedI18n('validation.outOfBounds'),
+          },
+        ],
       },
       rotate: {
         title: typedI18n('rotate'),

package/src/components/Designer/index.tsx

@@ -339,6 +339,7 @@ const TemplateEditor = ({
             height={canvasRef.current ? canvasRef.current.clientHeight : 0}
             size={size}
             pageSize={pageSizes[pageCursor] ?? []}
+            basePdf={template.basePdf}
             activeElements={activeElements}
             schemasList={schemasList}
             schemas={schemasList[pageCursor] ?? []}

package/src/i18n.ts

@@ -34,6 +34,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Please enter a valid hex color code.',
   'validation.uniqueName': 'Please enter a unique name.',
   'validation.dateTimeFormat': 'Invalid date time format.',
+  'validation.outOfBounds': 'Exceeds page boundaries.',
   'schemas.color': 'Color',
   'schemas.borderWidth': 'Border Width',
   'schemas.borderColor': 'Border Color',
@@ -112,6 +113,7 @@ const dictZh: { [key in keyof Dict]: string } = {
   'validation.hexColor': '请输入有效的十六进制颜色代码。',
   'validation.uniqueName': '请输入一个唯一的名称。',
   'validation.dateTimeFormat': '日期时间格式无效。',
+  'validation.outOfBounds': '超出页面边界。',
   'schemas.color': '颜色',
   'schemas.borderWidth': '边框宽度',
   'schemas.borderColor': '边框颜色',
@@ -189,6 +191,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   'validation.hexColor': '有効な16進数のカラーコードを入力してください。',
   'validation.uniqueName': '一意の名前を入力してください。',
   'validation.dateTimeFormat': '日付と時刻のフォーマットが無効です。',
+  'validation.outOfBounds': 'ページ境界を超えています。',
   'schemas.color': '色',
   'schemas.borderWidth': '枠線の太さ',
   'schemas.borderColor': '枠線の色',
@@ -266,6 +269,7 @@ const dictKo: { [key in keyof Dict]: string } = {
   'validation.hexColor': '유효한 16진수 색상 코드를 입력하세요.',
   'validation.uniqueName': '고유한 이름을 입력하세요.',
   'validation.dateTimeFormat': '날짜/시간 형식이 잘못되었습니다.',
+  'validation.outOfBounds': '페이지 경계를 초과합니다.',
   'schemas.color': '색상',
   'schemas.borderWidth': '테두리 너비',
   'schemas.borderColor': '테두리 색상',
@@ -343,6 +347,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'الرجاء إدخال رمز لون سداسي عشري صالح.',
   'validation.uniqueName': 'الرجاء إدخال اسم فريد.',
   'validation.dateTimeFormat': 'تنسيق التاريخ والوقت غير صالح.',
+  'validation.outOfBounds': 'يتجاوز حدود الصفحة.',
   'schemas.color': 'اللون',
   'schemas.borderWidth': 'عرض الحدود',
   'schemas.borderColor': 'لون الحدود',
@@ -421,6 +426,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'กรุณาใส่รหัสสีแบบฐานสิบหกที่ถูกต้อง',
   'validation.uniqueName': 'กรุณาระบุชื่อที่ไม่ซ้ำ',
   'validation.dateTimeFormat': 'รูปแบบวันที่และเวลาไม่ถูกต้อง',
+  'validation.outOfBounds': 'เกินขอบเขตหน้า',
   'schemas.color': 'สี',
   'schemas.borderWidth': 'ความกว้างของเส้นขอบ',
   'schemas.borderColor': 'สีขอบ',
@@ -500,6 +506,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Inserisci un codice colore esadecimale valido.',
   'validation.uniqueName': 'Inserisci un nome univoco.',
   'validation.dateTimeFormat': 'Formato data-ora non valido.',
+  'validation.outOfBounds': 'Supera i limiti della pagina.',
   'schemas.color': 'Colore',
   'schemas.borderWidth': 'Spessore bordo',
   'schemas.borderColor': 'Colore bordo',
@@ -578,6 +585,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Wprowadź poprawny kod koloru szesnastkowego.',
   'validation.uniqueName': 'Proszę wpisać unikalną nazwę.',
   'validation.dateTimeFormat': 'Nieprawidłowy format daty i godziny.',
+  'validation.outOfBounds': 'Przekracza granice strony.',
   'schemas.color': 'Kolor',
   'schemas.borderWidth': 'Szerokość obramowania',
   'schemas.borderColor': 'Kolor obramowania',
@@ -657,6 +665,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Bitte geben Sie einen gültigen Hex-Farbcode ein.',
   'validation.uniqueName': 'Bitte geben Sie einen eindeutigen Namen ein.',
   'validation.dateTimeFormat': 'Ungültiges Datums- und Zeitformat.',
+  'validation.outOfBounds': 'Überschreitet die Seitengrenzen.',
   'schemas.color': 'Farbe',
   'schemas.borderWidth': 'Rahmenbreite',
   'schemas.borderColor': 'Rahmenfarbe',
@@ -737,6 +746,7 @@ const dictEs: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Introduce un código de color hexadecimal válido.',
   'validation.uniqueName': 'Por favor, introduzca un nombre único.',
   'validation.dateTimeFormat': 'Formato de fecha y hora no válido.',
+  'validation.outOfBounds': 'Excede los límites de la página.',
   'schemas.color': 'Color',
   'schemas.borderWidth': 'Ancho del borde',
   'schemas.borderColor': 'Color del borde',
@@ -816,6 +826,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   'validation.hexColor': 'Veuillez entrer un code couleur hexadécimal valide.',
   'validation.uniqueName': 'Veuillez saisir un nom unique.',
   'validation.dateTimeFormat': "Format de date et d'heure non valide.",
+  'validation.outOfBounds': 'Dépasse les limites de la page.',
   'schemas.color': 'Couleur',
   'schemas.borderWidth': 'Largeur de la bordure',
   'schemas.borderColor': 'Couleur de la bordure',

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import type { SchemaForUI, Size, ChangeSchemas, BasePdf } from '@pdfme/common';
 
 export type SidebarProps = {
   height: number;
@@ -6,6 +6,7 @@ export type SidebarProps = {
   onChangeHoveringSchemaId: (id: string | null) => void;
   size: Size;
   pageSize: Size;
+  basePdf: BasePdf;
   activeElements: HTMLElement[];
   schemas: SchemaForUI[];
   schemasList: SchemaForUI[][];