@pdfme/schemas 3.1.5-dev.1 → 3.1.5-dev.11

package/src/image/uiRender.ts

@@ -2,7 +2,8 @@ import type { ChangeEvent } from 'react';
 import type * as CSS from 'csstype';
 import type { ImageSchema } from './types';
 import { UIRenderProps, ZOOM } from '@pdfme/common';
-import { addAlphaToHex } from '../renderUtils.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
+import { propPanel } from "./propPanel";
 
 const fullSize = { width: '100%', height: '100%' };
 
@@ -37,16 +38,17 @@ const readFile = (input: File | FileList | null): Promise<string | ArrayBuffer>
 export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   const { value, rootElement, mode, onChange, stopEditing, tabIndex, placeholder, schema, theme } =
     arg;
-  const editable = mode === 'form' || mode === 'designer';
+  const editable = isEditable(mode);
+  const isDefault = value === propPanel.defaultValue;
 
   const size = { width: schema.width * ZOOM, height: schema.height * ZOOM };
 
   const container = document.createElement('div');
+  const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
   const containerStyle: CSS.Properties = {
     ...fullSize,
-    backgroundImage: value ? 'none' : `url(${placeholder})`,
+    backgroundImage: value ? 'none' : backgroundStyle,
     backgroundSize: `${size.width}px ${size.height}px`,
-    opacity: schema.opacity,
   };
   Object.assign(container.style, containerStyle);
   container.addEventListener('click', (e) => {
@@ -66,7 +68,7 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   }
 
   // remove button
-  if (value && editable) {
+  if (value && !isDefault && editable) {
     const button = document.createElement('button');
     button.textContent = 'x';
     const buttonStyle: CSS.Properties = {
@@ -93,7 +95,7 @@ export const uiRender = async (arg: UIRenderProps<ImageSchema>) => {
   }
 
   // file input
-  if (!value && editable) {
+  if ((!value || isDefault) && editable) {
     const label = document.createElement('label');
     const labelStyle: CSS.Properties = {
       ...fullSize,

package/src/index.ts

@@ -1,8 +1,9 @@
 import text from './text/index.js';
 import image from './image/index.js';
 import barcodes from './barcodes/index.js';
+import line from './line/index.js';
 import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
 
 const builtInPlugins = { Text: text };
 
-export { text, image, barcodes, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export { text, image, barcodes, line, builtInPlugins, convertForPdfLayoutProps, rotatePoint };

package/src/line/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LINE_COLOR = '#000000';

package/src/line/index.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '@pdfme/common';
+import { pdfRender } from './pdfRender.js';
+import { propPanel } from './propPanel.js';
+import { uiRender } from './uiRender.js';
+import type { LineSchema } from './types.js';
+
+const schema: Plugin<LineSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
+export default schema;

package/src/line/pdfRender.ts

@@ -0,0 +1,24 @@
+import type { PDFRenderProps } from '@pdfme/common';
+import type { LineSchema } from './types';
+import { rotatePoint, convertForPdfLayoutProps, hex2RgbColor } from '../renderUtils.js';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const pdfRender = (arg: PDFRenderProps<LineSchema>) => {
+  const { page, schema } = arg;
+  const pageHeight = page.getHeight();
+  const {
+    width,
+    height,
+    rotate,
+    position: { x, y },
+    opacity,
+  } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
+  const pivot = { x: x + width / 2, y: y + height / 2 };
+  page.drawLine({
+    start: rotatePoint({ x, y: y + height / 2 }, pivot, rotate.angle),
+    end: rotatePoint({ x: x + width, y: y + height / 2 }, pivot, rotate.angle),
+    thickness: height,
+    color: hex2RgbColor(schema.color ?? DEFAULT_LINE_COLOR),
+    opacity: opacity,
+  });
+};

package/src/line/propPanel.ts

@@ -0,0 +1,34 @@
+import { PropPanel } from '@pdfme/common';
+import type { LineSchema } from './types';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const propPanel: PropPanel<LineSchema> = {
+  schema: ({ i18n }) => {
+    return {
+      color: {
+        title: i18n('schemas.line.color'),
+        type: 'string',
+        widget: 'color',
+        required: true,
+        rules: [
+          {
+            pattern: HEX_COLOR_PATTERN,
+            message: i18n('hexColorPrompt'),
+          },
+        ],
+      },
+    };
+  },
+  defaultValue: '',
+  defaultSchema: {
+    type: 'line',
+    position: { x: 0, y: 0 },
+    width: 50,
+    height: 1,
+    rotate: 0,
+    opacity: 1,
+    readOnly: true,
+    color: DEFAULT_LINE_COLOR,
+  },
+};

package/src/line/types.ts

@@ -0,0 +1,5 @@
+import { Schema } from '@pdfme/common';
+
+export interface LineSchema extends Schema {
+  color: string;
+}

package/src/line/uiRender.ts

@@ -0,0 +1,12 @@
+import type { LineSchema } from './types';
+import { UIRenderProps } from '@pdfme/common';
+import { DEFAULT_LINE_COLOR } from './constants.js';
+
+export const uiRender = (arg: UIRenderProps<LineSchema>) => {
+  const { schema, rootElement } = arg;
+  const div = document.createElement('div');
+  div.style.backgroundColor = schema.color ?? DEFAULT_LINE_COLOR;
+  div.style.width = '100%';
+  div.style.height = '100%';
+  rootElement.appendChild(div);
+};

package/src/renderUtils.ts

@@ -1,5 +1,5 @@
-import { degrees, degreesToRadians } from '@pdfme/pdf-lib';
-import { Schema, mm2pt } from '@pdfme/common';
+import { degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
+import { Schema, mm2pt, Mode, isHexValid } from '@pdfme/common';
 
 export const convertForPdfLayoutProps = ({
   schema,
@@ -71,3 +71,35 @@ export const addAlphaToHex = (hex: string, alphaPercentage: number) => {
   if (alphaHex.length === 1) alphaHex = '0' + alphaHex;
   return hex + alphaHex;
 };
+
+export const isEditable = (mode: Mode) => mode === 'form' || mode === 'designer';
+
+const hex2rgb = (hex: string) => {
+  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
+  if (hex.length === 3)
+    hex =
+      hex.slice(0, 1) +
+      hex.slice(0, 1) +
+      hex.slice(1, 2) +
+      hex.slice(1, 2) +
+      hex.slice(2, 3) +
+      hex.slice(2, 3);
+
+  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
+};
+
+export const hex2RgbColor = (hexString: string | undefined) => {
+  if (hexString) {
+    const isValid = isHexValid(hexString);
+
+    if (!isValid) {
+      throw new Error(`Invalid hex color value ${hexString}`);
+    }
+
+    const [r, g, b] = hex2rgb(hexString);
+
+    return rgb(r / 255, g / 255, b / 255);
+  }
+
+  return undefined;
+};

package/src/text/index.ts

@@ -5,5 +5,4 @@ import { uiRender } from './uiRender.js';
 import type { TextSchema } from './types';
 
 const schema: Plugin<TextSchema> = { pdf: pdfRender, ui: uiRender, propPanel };
-
 export default schema;

package/src/text/pdfRender.ts

@@ -1,12 +1,5 @@
-import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
-import {
-  PDFRenderProps,
-  Font,
-  getDefaultFont,
-  getFallbackFontName,
-  mm2pt,
-  isHexValid,
-} from '@pdfme/common';
+import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import type { TextSchema, FontWidthCalcValues } from './types';
 import {
   VERTICAL_ALIGN_TOP,
@@ -27,37 +20,7 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper.js';
-import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils.js';
-
-const hex2rgb = (hex: string) => {
-  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
-  if (hex.length === 3)
-    hex =
-      hex.slice(0, 1) +
-      hex.slice(0, 1) +
-      hex.slice(1, 2) +
-      hex.slice(1, 2) +
-      hex.slice(2, 3) +
-      hex.slice(2, 3);
-
-  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
-};
-
-const hex2RgbColor = (hexString: string | undefined) => {
-  if (hexString) {
-    const isValid = isHexValid(hexString);
-
-    if (!isValid) {
-      throw new Error(`Invalid hex color value ${hexString}`);
-    }
-
-    const [r, g, b] = hex2rgb(hexString);
-
-    return rgb(r / 255, g / 255, b / 255);
-  }
-
-  return undefined;
-};
+import { convertForPdfLayoutProps, rotatePoint, hex2RgbColor } from '../renderUtils.js';
 
 const embedAndGetFontObj = async (arg: {
   pdfDoc: PDFDocument;
@@ -118,6 +81,7 @@ const getFontProp = async ({
 
 export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const { value, pdfDoc, pdfLib, page, options, schema, _cache } = arg;
+  if (!value) return;
 
   const { font = getDefaultFont() } = options;
 
@@ -132,7 +96,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   const fontName = (
     schema.fontName ? schema.fontName : getFallbackFontName(font)
   ) as keyof typeof pdfFontObj;
-  const pdfFontValue = pdfFontObj[fontName];
+  const pdfFontValue = pdfFontObj && pdfFontObj[fontName];
 
   const pageHeight = page.getHeight();
   const {
@@ -162,7 +126,7 @@ export const pdfRender = async (arg: PDFRenderProps<TextSchema>) => {
   };
 
   let lines: string[] = [];
-  value.split(/\r|\n|\r\n/g).forEach((line: string) => {
+  value.split(/\r\n|\r|\n/g).forEach((line: string) => {
     lines = lines.concat(getSplittedLines(line, fontWidthCalcValues));
   });
 

package/src/text/propPanel.ts

@@ -153,7 +153,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },
@@ -164,7 +164,7 @@ export const propPanel: PropPanel<TextSchema> = {
         rules: [
           {
             pattern: HEX_COLOR_PATTERN,
-            message: 'Please enter a valid hex color code.',
+            message: i18n('hexColorPrompt'),
           },
         ],
       },

package/src/text/uiRender.ts

@@ -18,8 +18,7 @@ import {
   getFontKitFont,
   getBrowserVerticalFontAdjustments,
 } from './helper.js';
-import { addAlphaToHex } from '../renderUtils.js';
-import { DEFAULT_OPACITY } from '../constants.js';
+import { addAlphaToHex, isEditable } from '../renderUtils.js';
 
 const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   switch (verticalAlignmentValue) {
@@ -33,19 +32,10 @@ const mapVerticalAlignToFlex = (verticalAlignmentValue: string | undefined) => {
   return 'flex-start';
 };
 
-const getBackgroundColor = (
-  mode: 'form' | 'viewer' | 'designer',
-  value: string,
-  schema: Schema,
-  defaultBackgroundColor: string
-) => {
-  if ((mode === 'form' || mode === 'designer') && value && schema.backgroundColor) {
-    return schema.backgroundColor as string;
-  } else if (mode === 'viewer') {
-    return (schema.backgroundColor as string) ?? 'transparent';
-  } else {
-    return defaultBackgroundColor;
-  }
+const getBackgroundColor = (value: string, schema: Schema, defaultBackgroundColor: string) => {
+  if (!value) return 'transparent';
+  if (schema.backgroundColor) return schema.backgroundColor as string;
+  return defaultBackgroundColor;
 };
 
 export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
@@ -94,19 +84,13 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
   const containerStyle: CSS.Properties = {
     padding: 0,
     resize: 'none',
-    backgroundColor: getBackgroundColor(
-      mode,
-      value,
-      schema,
-      addAlphaToHex(theme.colorPrimaryBg, 30)
-    ),
+    backgroundColor: getBackgroundColor(value, schema, addAlphaToHex(theme.colorPrimaryBg, 30)),
     border: 'none',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
     width: '100%',
     height: '100%',
-    opacity: schema.opacity ?? DEFAULT_OPACITY,
   };
   Object.assign(container.style, containerStyle);
   rootElement.innerHTML = '';
@@ -126,14 +110,14 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
     resize: 'none',
     border: 'none',
     outline: 'none',
-    marginBottom: bottomAdjustment + 'px',
-    paddingTop: topAdjustment + 'px',
+    marginBottom: `${bottomAdjustment}px`,
+    paddingTop: `${topAdjustment}px`,
     backgroundColor: 'transparent',
   };
   const textBlock = document.createElement('div');
   Object.assign(textBlock.style, textBlockStyle);
 
-  if (mode === 'form' || mode === 'designer') {
+  if (isEditable(mode)) {
     textBlock.contentEditable = 'plaintext-only';
     textBlock.tabIndex = tabIndex || 0;
     textBlock.innerText = value;
@@ -157,8 +141,8 @@ export const uiRender = async (arg: UIRenderProps<TextSchema>) => {
                 schema.lineHeight ?? DEFAULT_LINE_HEIGHT,
                 schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT
               );
-            textBlock.style.paddingTop = newTopAdj.toString() + 'px';
-            textBlock.style.marginBottom = newBottomAdj.toString() + 'px';
+            textBlock.style.paddingTop = `${newTopAdj}px`;
+            textBlock.style.marginBottom = `${newBottomAdj}px`;
           })();
         }, 0);
       });