@pdfme/schemas 6.1.13-dev.46 → 6.1.13-dev.55

package/dist/graphics/image.d.ts

@@ -1,5 +1,30 @@
 import type { Plugin } from '@pdfme/common';
 import type { Schema } from '@pdfme/common';
-export type ImageSchema = Schema;
+export declare const IMAGE_OBJECT_FITS: readonly ['contain', 'cover'];
+export type ImageObjectFit = (typeof IMAGE_OBJECT_FITS)[number];
+export declare const IMAGE_OBJECT_POSITIONS: readonly ['left top', 'center top', 'right top', 'left center', 'center center', 'right center', 'left bottom', 'center bottom', 'right bottom'];
+export type ImageObjectPosition = (typeof IMAGE_OBJECT_POSITIONS)[number];
+export declare const DEFAULT_IMAGE_OBJECT_FIT: ImageObjectFit;
+export declare const DEFAULT_IMAGE_OBJECT_POSITION: ImageObjectPosition;
+export declare const getEffectiveObjectPosition: (schema: ImageSchema) => ImageObjectPosition;
+export declare const getImageFitLayout: (arg: {
+    sourceWidth: number;
+    sourceHeight: number;
+    boxWidth: number;
+    boxHeight: number;
+    objectFit?: unknown;
+    objectPosition?: unknown;
+}) => {
+    objectFit: "contain" | "cover";
+    objectPosition: "center bottom" | "center center" | "center top" | "left bottom" | "left center" | "left top" | "right bottom" | "right center" | "right top";
+    width: number;
+    height: number;
+    offsetX: number;
+    offsetY: number;
+};
+export type ImageSchema = Schema & {
+    objectFit?: ImageObjectFit;
+    objectPosition?: ImageObjectPosition;
+};
 declare const imageSchema: Plugin<ImageSchema>;
 export default imageSchema;

package/dist/index.js

@@ -1650,10 +1650,121 @@ var fullSize$1 = {
 	width: "100%",
 	height: "100%"
 };
+var IMAGE_OBJECT_FITS = ["contain", "cover"];
+var IMAGE_OBJECT_POSITIONS = [
+	"left top",
+	"center top",
+	"right top",
+	"left center",
+	"center center",
+	"right center",
+	"left bottom",
+	"center bottom",
+	"right bottom"
+];
+var DEFAULT_IMAGE_OBJECT_FIT = "contain";
+var DEFAULT_IMAGE_OBJECT_POSITION = "center center";
+var imageObjectFitSet = new Set(IMAGE_OBJECT_FITS);
+var imageObjectPositionSet = new Set(IMAGE_OBJECT_POSITIONS);
+var normalizeObjectFit = (value) => typeof value === "string" && imageObjectFitSet.has(value) ? value : DEFAULT_IMAGE_OBJECT_FIT;
+var normalizeObjectPosition = (value) => typeof value === "string" && imageObjectPositionSet.has(value) ? value : DEFAULT_IMAGE_OBJECT_POSITION;
+var getEffectiveObjectPosition = (schema) => {
+	return normalizeObjectFit(schema.objectFit) === "cover" ? DEFAULT_IMAGE_OBJECT_POSITION : normalizeObjectPosition(schema.objectPosition);
+};
+var alignOffset = (space, position) => {
+	if (position === "right" || position === "bottom") return space;
+	if (position === "center") return space / 2;
+	return 0;
+};
+var getImageFitLayout = (arg) => {
+	const { sourceWidth, sourceHeight, boxWidth, boxHeight } = arg;
+	const objectFit = normalizeObjectFit(arg.objectFit);
+	const objectPosition = objectFit === "cover" ? DEFAULT_IMAGE_OBJECT_POSITION : normalizeObjectPosition(arg.objectPosition);
+	const scale = objectFit === "cover" ? Math.max(boxWidth / sourceWidth, boxHeight / sourceHeight) : Math.min(boxWidth / sourceWidth, boxHeight / sourceHeight);
+	const width = sourceWidth * scale;
+	const height = sourceHeight * scale;
+	const [horizontal, vertical] = objectPosition.split(" ");
+	return {
+		objectFit,
+		objectPosition,
+		width,
+		height,
+		offsetX: alignOffset(boxWidth - width, horizontal),
+		offsetY: alignOffset(boxHeight - height, vertical)
+	};
+};
+var getClipPathCorners = (arg) => {
+	const { schema, pageHeight } = arg;
+	const clippingBox = convertForPdfLayoutProps({
+		schema,
+		pageHeight,
+		applyRotateTranslate: false
+	});
+	const { x, y } = clippingBox.position;
+	const width = clippingBox.width;
+	const height = clippingBox.height;
+	const rotateDegrees = schema.rotate ? -schema.rotate : 0;
+	const corners = [
+		{
+			x,
+			y
+		},
+		{
+			x,
+			y: y + height
+		},
+		{
+			x: x + width,
+			y: y + height
+		},
+		{
+			x: x + width,
+			y
+		}
+	];
+	if (!rotateDegrees) return corners;
+	const pivot = {
+		x: x + width / 2,
+		y: y + height / 2
+	};
+	return corners.map((corner) => rotatePoint(corner, pivot, rotateDegrees));
+};
 var defaultValue = "data:image/png;base64,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";
+var getImagePropPanelSchema = ({ i18n, activeSchema }) => {
+	const objectFit = normalizeObjectFit(activeSchema.objectFit);
+	const positionOptions = IMAGE_OBJECT_POSITIONS.map((value) => ({
+		value,
+		label: i18n(`schemas.image.position.${value.replace(" ", ".")}`)
+	}));
+	return {
+		objectFit: {
+			title: i18n("schemas.image.objectFit"),
+			type: "string",
+			widget: "select",
+			default: DEFAULT_IMAGE_OBJECT_FIT,
+			props: { options: [{
+				label: i18n("schemas.image.fit.contain"),
+				value: "contain"
+			}, {
+				label: i18n("schemas.image.fit.cover"),
+				value: "cover"
+			}] },
+			span: 8
+		},
+		objectPosition: {
+			title: i18n("schemas.image.objectPosition"),
+			type: "string",
+			widget: "select",
+			default: DEFAULT_IMAGE_OBJECT_POSITION,
+			hidden: objectFit === "cover",
+			props: { options: positionOptions },
+			span: 16
+		}
+	};
+};
 var imageSchema = {
 	pdf: async (arg) => {
-		const { value, schema, pdfDoc, page, _cache } = arg;
+		const { value, schema, pdfDoc, page, pdfLib, _cache } = arg;
 		if (!value) return;
 		const inputImageCacheKey = getCacheKey(schema, value);
 		let image = _cache.get(inputImageCacheKey);
@@ -1678,16 +1789,18 @@ var imageSchema = {
 		const imageHeight = px2mm(image.height);
 		const boxWidth = _schema.width;
 		const boxHeight = _schema.height;
-		const imageRatio = imageWidth / imageHeight;
-		if (imageRatio > boxWidth / boxHeight) {
-			_schema.width = boxWidth;
-			_schema.height = boxWidth / imageRatio;
-			_schema.position.y += (boxHeight - _schema.height) / 2;
-		} else {
-			_schema.width = boxHeight * imageRatio;
-			_schema.height = boxHeight;
-			_schema.position.x += (boxWidth - _schema.width) / 2;
-		}
+		const fitLayout = getImageFitLayout({
+			sourceWidth: imageWidth,
+			sourceHeight: imageHeight,
+			boxWidth,
+			boxHeight,
+			objectFit: _schema.objectFit,
+			objectPosition: _schema.objectPosition
+		});
+		_schema.width = fitLayout.width;
+		_schema.height = fitLayout.height;
+		_schema.position.x += fitLayout.offsetX;
+		_schema.position.y += fitLayout.offsetY;
 		const pageHeight = page.getHeight();
 		const { width, height, rotate, position, opacity } = convertForPdfLayoutProps({
 			schema: _schema,
@@ -1702,20 +1815,30 @@ var imageSchema = {
 			height,
 			opacity
 		};
+		if (fitLayout.objectFit === "cover") {
+			const [firstCorner, ...corners] = getClipPathCorners({
+				schema,
+				pageHeight
+			});
+			page.pushOperators(pdfLib.pushGraphicsState(), pdfLib.moveTo(firstCorner.x, firstCorner.y), ...corners.map((corner) => pdfLib.lineTo(corner.x, corner.y)), pdfLib.closePath(), pdfLib.clip(), pdfLib.endPath());
+		}
 		page.drawImage(image, drawOptions);
+		if (fitLayout.objectFit === "cover") page.pushOperators(pdfLib.popGraphicsState());
 	},
 	ui: (arg) => {
 		const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, theme, schema } = arg;
 		const editable = isEditable(mode, schema);
 		const isDefault = value === defaultValue;
+		const objectFit = normalizeObjectFit(schema.objectFit);
+		const objectPosition = getEffectiveObjectPosition(schema);
 		const container = document.createElement("div");
 		const backgroundStyle = placeholder ? `url(${placeholder})` : "none";
 		const containerStyle = {
 			...fullSize$1,
 			backgroundImage: value ? "none" : backgroundStyle,
-			backgroundSize: `contain`,
+			backgroundSize: objectFit,
 			backgroundRepeat: "no-repeat",
-			backgroundPosition: "center"
+			backgroundPosition: objectPosition
 		};
 		Object.assign(container.style, containerStyle);
 		container.addEventListener("click", (e) => {
@@ -1724,12 +1847,14 @@ var imageSchema = {
 		rootElement.appendChild(container);
 		if (value) {
 			const img = document.createElement("img");
-			Object.assign(img.style, {
+			const imgStyle = {
 				height: "100%",
 				width: "100%",
 				borderRadius: 0,
-				objectFit: "contain"
-			});
+				objectFit,
+				...objectPosition === "center center" ? {} : { objectPosition }
+			};
+			Object.assign(img.style, imgStyle);
 			img.src = value;
 			container.appendChild(img);
 		}
@@ -1806,7 +1931,10 @@ var imageSchema = {
 		}
 	},
 	propPanel: {
-		schema: {},
+		schema: ({ i18n, activeSchema }) => getImagePropPanelSchema({
+			i18n,
+			activeSchema
+		}),
 		defaultSchema: {
 			name: "",
 			type: "image",
@@ -1817,6 +1945,8 @@ var imageSchema = {
 			},
 			width: 40,
 			height: 40,
+			objectFit: DEFAULT_IMAGE_OBJECT_FIT,
+			objectPosition: DEFAULT_IMAGE_OBJECT_POSITION,
 			rotate: 0,
 			opacity: 1
 		}