@pdfme/schemas 3.1.5 → 3.2.0

package/src/graphics/helper.ts

@@ -0,0 +1,147 @@
+// ref: https://github.com/image-size/image-size ----------------------------
+// The following code is adapted from the image-size code. Unnecessary formats and dependencies on Node have been removed.
+type IImage = {
+  validate: (input: Uint8Array) => boolean;
+  calculate: (input: Uint8Array) => { width: number; height: number } | undefined;
+};
+
+const decoder = new TextDecoder();
+const toUTF8String = (input: Uint8Array, start = 0, end = input.length) =>
+  decoder.decode(input.slice(start, end));
+
+const toHexString = (input: Uint8Array, start = 0, end = input.length) =>
+  input.slice(start, end).reduce((memo, i) => memo + ('0' + i.toString(16)).slice(-2), '');
+
+const readUInt16BE = (input: Uint8Array, offset = 0) => input[offset] * 2 ** 8 + input[offset + 1];
+
+const readUInt32BE = (input: Uint8Array, offset = 0) =>
+  input[offset] * 2 ** 24 +
+  input[offset + 1] * 2 ** 16 +
+  input[offset + 2] * 2 ** 8 +
+  input[offset + 3];
+
+const extractSize = (input: Uint8Array, index: number) => {
+  return {
+    height: readUInt16BE(input, index),
+    width: readUInt16BE(input, index + 2),
+  };
+};
+
+const validateInput = (input: Uint8Array, index: number): void => {
+  // index should be within buffer limits
+  if (index > input.length) {
+    throw new TypeError('Corrupt JPG, exceeded buffer limits');
+  }
+  // Every JPEG block must begin with a 0xFF
+  if (input[index] !== 0xff) {
+    throw new TypeError('Invalid JPG, marker table corrupted');
+  }
+};
+
+const JPG: IImage = {
+  validate: (input) => toHexString(input, 0, 2) === 'ffd8',
+
+  calculate(input) {
+    // Skip 4 chars, they are for signature
+    input = input.slice(4);
+
+    let next: number;
+    while (input.length) {
+      // read length of the next block
+      const i = readUInt16BE(input, 0);
+
+      // ensure correct format
+      validateInput(input, i);
+
+      // 0xFFC0 is baseline standard(SOF)
+      // 0xFFC1 is baseline optimized(SOF)
+      // 0xFFC2 is progressive(SOF2)
+      next = input[i + 1];
+      if (next === 0xc0 || next === 0xc1 || next === 0xc2) {
+        const size = extractSize(input, i + 5);
+
+        return size;
+      }
+
+      // move to the next block
+      input = input.slice(i + 2);
+    }
+
+    throw new TypeError('Invalid JPG, no size found');
+  },
+};
+
+const pngSignature = 'PNG\r\n\x1a\n';
+const pngImageHeaderChunkName = 'IHDR';
+
+// Used to detect "fried" png's: http://www.jongware.com/pngdefry.html
+const pngFriedChunkName = 'CgBI';
+
+const PNG: IImage = {
+  validate(input) {
+    if (pngSignature === toUTF8String(input, 1, 8)) {
+      let chunkName = toUTF8String(input, 12, 16);
+      if (chunkName === pngFriedChunkName) {
+        chunkName = toUTF8String(input, 28, 32);
+      }
+      if (chunkName !== pngImageHeaderChunkName) {
+        throw new TypeError('Invalid PNG');
+      }
+      return true;
+    }
+    return false;
+  },
+
+  calculate(input) {
+    if (toUTF8String(input, 12, 16) === pngFriedChunkName) {
+      return {
+        height: readUInt32BE(input, 36),
+        width: readUInt32BE(input, 32),
+      };
+    }
+    return {
+      height: readUInt32BE(input, 20),
+      width: readUInt32BE(input, 16),
+    };
+  },
+};
+
+const typeHandlers = {
+  jpg: JPG,
+  png: PNG,
+};
+
+type imageType = keyof typeof typeHandlers;
+
+function detector(input: Uint8Array): imageType | undefined {
+  const firstBytes: { [byte: number]: imageType } = {
+    0x89: 'png',
+    0xff: 'jpg',
+  };
+  const byte = input[0];
+  if (byte in firstBytes) {
+    const type = firstBytes[byte];
+    if (type && typeHandlers[type].validate(input)) {
+      return type;
+    }
+  }
+
+  const keys = Object.keys(typeHandlers) as imageType[];
+  return keys.find((key: imageType) => typeHandlers[key].validate(input));
+}
+
+export const imageSize = (imgBuffer: Buffer): { height: number; width: number } => {
+  const type = detector(imgBuffer);
+
+  if (typeof type !== 'undefined' && type in typeHandlers) {
+    const size = typeHandlers[type].calculate(imgBuffer);
+    if (size !== undefined) {
+      return size;
+    }
+  }
+
+  throw new TypeError(
+    '[@pdfme/schemas/images] Unsupported file type: ' + (type === undefined ? 'undefined' : type)
+  );
+};
+// ----------------------------

package/src/graphics/image.ts

@@ -0,0 +1,207 @@
+import type { ChangeEvent } from 'react';
+import type { PDFImage } from '@pdfme/pdf-lib';
+import type { Plugin } from '@pdfme/common';
+import type { PDFRenderProps, Schema } from '@pdfme/common';
+import type * as CSS from 'csstype';
+import { Buffer } from 'buffer';
+import { UIRenderProps } from '@pdfme/common';
+import { convertForPdfLayoutProps, addAlphaToHex, isEditable, readFile } from '../utils.js';
+import { DEFAULT_OPACITY } from '../constants.js';
+import { imageSize } from './helper.js';
+
+const px2mm = (px: number): number => {
+  // http://www.endmemo.com/sconvert/millimeterpixel.php
+  const ratio = 0.26458333333333;
+  return parseFloat(String(px)) * ratio;
+};
+
+const getCacheKey = (schema: Schema, input: string) => `${schema.type}${input}`;
+const fullSize = { width: '100%', height: '100%' };
+const defaultValue =
+  'data:image/png;base64,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';
+
+interface ImageSchema extends Schema {}
+
+const imageSchema: Plugin<ImageSchema> = {
+  pdf: async (arg: PDFRenderProps<ImageSchema>) => {
+    const { value, schema, pdfDoc, page, _cache } = arg;
+    if (!value || !value.startsWith('data:image/')) return;
+
+    const inputImageCacheKey = getCacheKey(schema, value);
+    let image = _cache.get(inputImageCacheKey) as PDFImage;
+    if (!image) {
+      const isPng = value.startsWith('data:image/png;');
+      image = await (isPng ? pdfDoc.embedPng(value) : pdfDoc.embedJpg(value));
+      _cache.set(inputImageCacheKey, image);
+    }
+
+    const _schema = { ...schema, position: { ...schema.position } };
+    const dataUriPrefix = ';base64,';
+    const idx = value.indexOf(dataUriPrefix);
+    const imgBase64 = value.substring(idx + dataUriPrefix.length, value.length);
+    const dimension = imageSize(Buffer.from(imgBase64, 'base64'));
+
+    const imageWidth = px2mm(dimension.width);
+    const imageHeight = px2mm(dimension.height);
+    const boxWidth = _schema.width;
+    const boxHeight = _schema.height;
+
+    const imageRatio = imageWidth / imageHeight;
+    const boxRatio = boxWidth / boxHeight;
+
+    if (imageRatio > boxRatio) {
+      _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 pageHeight = page.getHeight();
+    const lProps = convertForPdfLayoutProps({ schema: _schema, pageHeight });
+    const { width, height, rotate, position, opacity } = lProps;
+    const { x, y } = position;
+    page.drawImage(image, { x, y, rotate, width, height, opacity });
+  },
+  ui: (arg: UIRenderProps<ImageSchema>) => {
+    const {
+      value,
+      rootElement,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      theme,
+      schema,
+    } = arg;
+    const editable = isEditable(mode, schema);
+    const isDefault = value === defaultValue;
+
+    const container = document.createElement('div');
+    const backgroundStyle = placeholder ? `url(${placeholder})` : 'none';
+    const containerStyle: CSS.Properties = {
+      ...fullSize,
+      backgroundImage: value ? 'none' : backgroundStyle,
+      backgroundSize: `contain`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+    };
+    Object.assign(container.style, containerStyle);
+    container.addEventListener('click', (e) => {
+      if (editable) {
+        e.stopPropagation();
+      }
+    });
+    rootElement.appendChild(container);
+
+    // image tag
+    if (value) {
+      const img = document.createElement('img');
+      const imgStyle: CSS.Properties = {
+        height: '100%',
+        width: '100%',
+        borderRadius: 0,
+        objectFit: 'contain',
+      };
+      Object.assign(img.style, imgStyle);
+      img.src = value;
+      container.appendChild(img);
+    }
+
+    // remove button
+    if (value && !isDefault && editable) {
+      const button = document.createElement('button');
+      button.textContent = 'x';
+      const buttonStyle: CSS.Properties = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        zIndex: 1,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: '#333',
+        background: '#f2f2f2',
+        borderRadius: '2px',
+        border: '1px solid #767676',
+        cursor: 'pointer',
+        height: '24px',
+        width: '24px',
+      };
+      Object.assign(button.style, buttonStyle);
+      button.addEventListener('click', () => {
+        onChange && onChange('');
+      });
+      container.appendChild(button);
+    }
+
+    // file input
+    if ((!value || isDefault) && editable) {
+      const label = document.createElement('label');
+      const labelStyle: CSS.Properties = {
+        ...fullSize,
+        display: editable ? 'flex' : 'none',
+        position: 'absolute',
+        top: 0,
+        backgroundColor: editable || value ? addAlphaToHex(theme.colorPrimaryBg, 30) : 'none',
+        cursor: 'pointer',
+      };
+      Object.assign(label.style, labelStyle);
+      container.appendChild(label);
+      const input = document.createElement('input');
+      const inputStyle: CSS.Properties = {
+        ...fullSize,
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        width: '180px',
+        height: '30px',
+        marginLeft: '-90px',
+        marginTop: '-15px',
+      };
+      Object.assign(input.style, inputStyle);
+      input.tabIndex = tabIndex || 0;
+      input.type = 'file';
+      input.accept = 'image/jpeg, image/png';
+      input.addEventListener('change', (event: Event) => {
+        const changeEvent = event as unknown as ChangeEvent<HTMLInputElement>;
+        readFile(changeEvent.target.files).then((result) => onChange && onChange(result as string));
+      });
+      input.addEventListener('blur', () => stopEditing && stopEditing());
+      label.appendChild(input);
+    }
+  },
+  propPanel: {
+    schema: {},
+    defaultValue,
+    defaultSchema: {
+      type: 'image',
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 40,
+      // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
+      // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+      rotate: 0,
+      opacity: DEFAULT_OPACITY,
+    },
+  },
+};
+
+export default imageSchema;
+
+export const readOnlyImage: Plugin<ImageSchema> = {
+  pdf: imageSchema.pdf,
+  ui: imageSchema.ui,
+  propPanel: {
+    ...imageSchema.propPanel,
+    defaultSchema: {
+      ...imageSchema.propPanel.defaultSchema,
+      type: 'readOnlyImage',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};

package/src/graphics/svg.ts

@@ -0,0 +1,98 @@
+import { Plugin, Schema } from '@pdfme/common';
+import { XMLValidator } from 'fast-xml-parser';
+import { convertForPdfLayoutProps, isEditable, addAlphaToHex, createErrorElm } from '../utils.js';
+
+const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
+
+const defaultValue = `<svg viewBox="0 0 488 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(1,0,0,1,-56,0)" fill="#000000" stroke="none">
+        <path d="M228.667,0L56,172.667L56.267,345.334L56.667,518L59.733,527.334C65.867,545.467 72.933,557.067 86,570.134C96.133,580.4 100,583.2 110.667,588.4C134.533,600.134 120,599.334 300,599.334C480,599.334 465.467,600.134 489.334,588.4C500,583.2 503.867,580.4 514,570.134C527.334,556.8 534.534,544.8 540.267,526.667L543.334,516.667L543.334,83.333L540.267,73.333C534.534,55.2 527.334,43.2 514,29.867C503.867,19.6 500,16.8 489.334,11.6C465.734,0 475.467,0.8 344.667,0.267L228.667,0ZM466.4,41.6C483.334,48.933 496.267,61.867 502.934,78.4L506,86L506,514L502.934,521.734C496,538.934 480.267,553.867 463.334,559.334C455.6,561.867 450.8,562 300,562C149.2,562 144.4,561.867 136.667,559.334C119.733,553.867 104,538.934 97.067,521.734L94,514L93.6,351.067L93.333,188.133L149.067,187.733L204.667,187.333L213.6,182.933C224.8,177.467 235.867,165.867 240.267,155.067C243.333,147.467 243.333,146.4 243.733,92.267L244.133,37.2L458,38L466.4,41.6ZM195.067,304C175.6,306.8 164,320.667 165.6,339.467C166,343.6 167.6,348.667 169.733,352.4C174.4,360.267 185.2,365.734 201.867,368.534C208.4,369.734 215.067,371.467 216.8,372.667C224,377.334 221.467,389.067 212.533,392C205.6,394.4 193.733,392.934 185.6,388.8C173.333,382.534 164,385.334 164,395.2C164,400.934 170.133,406.667 180.267,410.134C190.933,413.867 217.067,413.734 225.467,409.867C238.933,403.6 246.667,390 244.8,375.6C242.667,359.734 232.8,351.334 212.267,347.867C193.6,344.8 189.333,342.4 189.333,334.533C189.333,324.267 201.867,320.933 218.267,326.667C228.667,330.267 232.533,330.133 235.867,325.867C242.133,318 237.6,310.667 224.267,306.8C213.333,303.6 204.267,302.8 195.067,304ZM386,304.133C377.6,305.333 374,306.8 367.334,311.6C355.734,320.133 351.2,336.4 352.4,365.334C353.2,385.334 356,394.4 364.134,402.534C372.267,410.667 381.734,413.734 396.667,413.067C406.8,412.667 409.734,412 415.734,408.667C429.2,401.334 434.534,390.934 435.6,370.667C436.4,353.734 436,353.067 420.934,352.267C401.867,351.334 396,353.467 396,361.867C396,367.867 399.467,370.667 407.067,370.667C413.2,370.667 413.334,370.667 413.334,374.934C413.334,394 386.267,400.534 378.534,383.467C374.934,375.334 374.934,341.867 378.534,333.733C382,326.4 387.467,323.467 396.8,324.267C403.067,324.8 404.667,325.6 410.534,331.067C414.267,334.533 418.4,337.333 419.867,337.333C427.334,337.333 433.334,330.267 431.334,323.733C427.2,310.133 406.4,301.2 386,304.133ZM258.4,308C255.067,311.467 254.533,312.8 255.2,316.4C257.067,326.667 285.333,405.867 288.133,408.8C289.733,410.534 293.067,412.267 295.333,412.8C303.867,414.4 310.667,407.867 314.4,394.667C315.067,392.134 321.2,374.134 327.867,354.8C334.8,334.533 340,317.467 340,314.533C340,303.733 325.067,299.867 319.867,309.467C318.533,312.133 309.467,340.933 302.667,364C301.067,369.467 299.333,374.4 298.8,375.067C298.267,375.6 292.933,360.8 286.933,342C275.333,306 274.133,304 266.267,304C263.867,304 261.067,305.467 258.4,308Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>`;
+
+interface SVGSchema extends Schema {}
+
+const svgSchema: Plugin<SVGSchema> = {
+  ui: (arg) => {
+    const { rootElement, value, mode, onChange, theme, schema } = arg;
+    const container = document.createElement(isEditable(mode, schema) ? 'textarea' : 'div');
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.boxSizing = 'border-box';
+    if (isEditable(mode, schema)) {
+      const textarea = container as HTMLTextAreaElement;
+      textarea.value = value;
+      textarea.style.position = 'absolute';
+      textarea.style.backgroundColor = addAlphaToHex(theme.colorPrimaryBg, 30);
+
+      if (isValidSVG(value)) {
+        const svgElement = new DOMParser().parseFromString(value, 'text/xml').childNodes[0];
+        if (svgElement instanceof SVGElement) {
+          svgElement.setAttribute('width', '100%');
+          svgElement.setAttribute('height', '100%');
+          svgElement.style.position = 'absolute';
+        }
+        rootElement.appendChild(svgElement);
+      } else if (value) {
+        const errorElm = createErrorElm();
+        errorElm.style.position = 'absolute';
+        rootElement.appendChild(errorElm);
+      }
+
+      textarea.addEventListener('change', (e: Event) => {
+        const newValue = (e.target as HTMLTextAreaElement).value;
+        onChange && onChange(newValue);
+      });
+      rootElement.appendChild(container);
+      textarea.setSelectionRange(value.length, value.length);
+      textarea.focus();
+    } else {
+      if (!value) return;
+      if (!isValidSVG(value)) {
+        rootElement.appendChild(createErrorElm());
+        return;
+      }
+      container.innerHTML = value;
+      const svgElement = container.childNodes[0];
+      if (svgElement instanceof SVGElement) {
+        svgElement.setAttribute('width', '100%');
+        svgElement.setAttribute('height', '100%');
+        rootElement.appendChild(container);
+      }
+    }
+  },
+  pdf: async (arg) => {
+    const { page, schema, value } = arg;
+    if (!value || !isValidSVG(value)) return;
+    const pageHeight = page.getHeight();
+    const { width, height, position } = convertForPdfLayoutProps({ schema, pageHeight });
+    const { x, y } = position;
+    await page.drawSvg(value, { x, y: y + height, width, height });
+  },
+  propPanel: {
+    schema: {},
+    defaultValue,
+    defaultSchema: {
+      type: 'svg',
+      position: { x: 0, y: 0 },
+      width: 40,
+      height: 40,
+    },
+  },
+};
+
+export default svgSchema;
+
+export const readOnlySvg: Plugin<SVGSchema> = {
+  pdf: svgSchema.pdf,
+  ui: svgSchema.ui,
+  propPanel: {
+    ...svgSchema.propPanel,
+    defaultSchema: {
+      ...svgSchema.propPanel.defaultSchema,
+      type: 'readOnlySvg',
+      readOnly: true,
+      readOnlyValue: defaultValue,
+    },
+  },
+};

package/src/index.ts

@@ -1,8 +1,25 @@
-import text from './text/index.js';
-import image from './image/index.js';
+import text, { readOnlyText } from './text/index.js';
+import image, { readOnlyImage } from './graphics/image.js';
+import svg, { readOnlySvg } from './graphics/svg.js';
 import barcodes from './barcodes/index.js';
-import { convertForPdfLayoutProps, rotatePoint } from './renderUtils.js';
+import line from './shapes/line.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import { convertForPdfLayoutProps, rotatePoint } from './utils.js';
 
 const builtInPlugins = { Text: text };
 
-export { text, image, barcodes, builtInPlugins, convertForPdfLayoutProps, rotatePoint };
+export {
+  text,
+  readOnlyText,
+  image,
+  readOnlyImage,
+  svg,
+  readOnlySvg,
+  barcodes,
+  line,
+  rectangle,
+  ellipse,
+  builtInPlugins,
+  convertForPdfLayoutProps,
+  rotatePoint,
+};

package/src/shapes/line.ts

@@ -0,0 +1,67 @@
+import type { Schema, Plugin, PDFRenderProps, UIRenderProps } from '@pdfme/common';
+import { rotatePoint, convertForPdfLayoutProps, hex2RgbColor } from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+const DEFAULT_LINE_COLOR = '#000000';
+
+interface LineSchema extends Schema {
+  color: string;
+}
+
+const lineSchema: Plugin<LineSchema> = {
+  pdf: (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,
+    });
+  },
+  ui: (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);
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      color: {
+        title: i18n('schemas.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,
+    },
+  },
+};
+export default lineSchema;

package/src/shapes/rectAndEllipse.ts

@@ -0,0 +1,110 @@
+import { Plugin, Schema, mm2pt } from '@pdfme/common';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { hex2RgbColor, convertForPdfLayoutProps } from '../utils.js';
+
+interface Shape extends Schema {
+  type: 'ellipse' | 'rectangle';
+  borderWidth: number;
+  borderColor: string;
+  color: string;
+}
+
+const shape: Plugin<Shape> = {
+  ui: (arg) => {
+    const { schema, rootElement } = arg;
+    const div = document.createElement('div');
+    div.style.width = '100%';
+    div.style.height = '100%';
+    div.style.boxSizing = 'border-box';
+    if (schema.type === 'ellipse') {
+      div.style.borderRadius = '50%';
+    }
+    div.style.borderWidth = `${schema.borderWidth ?? 0}mm`;
+    div.style.borderStyle = schema.borderWidth && schema.borderColor ? 'solid' : 'none';
+    div.style.borderColor = schema.borderColor ?? 'transparent';
+    div.style.backgroundColor = schema.color ?? 'transparent';
+
+    rootElement.appendChild(div);
+  },
+  pdf: (arg) => {
+    const { schema, page } = arg;
+    const pageHeight = page.getHeight();
+    const cArg = { schema, pageHeight };
+    const { position, width, height, rotate, opacity } = convertForPdfLayoutProps(cArg);
+    const {
+      position: { x: x4Ellipse, y: y4Ellipse },
+    } = convertForPdfLayoutProps({ ...cArg, applyRotateTranslate: false });
+    const borderWidth = schema.borderWidth ? mm2pt(schema.borderWidth) : 0;
+
+    const drawOptions = {
+      rotate,
+      borderWidth,
+      borderColor: hex2RgbColor(schema.borderColor),
+      color: hex2RgbColor(schema.color),
+      opacity,
+      borderOpacity: opacity,
+    };
+    if (schema.type === 'ellipse') {
+      page.drawEllipse({
+        x: x4Ellipse + width / 2,
+        y: y4Ellipse + height / 2,
+        xScale: width / 2 - borderWidth / 2,
+        yScale: height / 2 - borderWidth / 2,
+        ...drawOptions,
+      });
+    } else if (schema.type === 'rectangle') {
+      page.drawRectangle({
+        x: position.x + borderWidth / 2,
+        y: position.y + borderWidth / 2,
+        width: width - borderWidth,
+        height: height - borderWidth,
+        ...drawOptions,
+      });
+    }
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      borderWidth: {
+        title: i18n('schemas.borderWidth'),
+        type: 'number',
+        widget: 'inputNumber',
+        min: 0,
+        step: 1,
+      },
+      borderColor: {
+        title: i18n('schemas.borderColor'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('hexColorPrompt') }],
+      },
+    }),
+    defaultValue: '',
+    defaultSchema: {
+      type: 'rectangle',
+      position: { x: 0, y: 0 },
+      width: 62.5,
+      height: 37.5,
+      rotate: 0,
+      opacity: 1,
+      borderWidth: 5,
+      borderColor: '#000000',
+      color: '#ffffff',
+      readOnly: true,
+    },
+  },
+};
+
+const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
+  ...shape.propPanel,
+  defaultSchema: { ...shape.propPanel.defaultSchema, type },
+});
+
+export const rectangle = { ...shape, propPanel: getPropPanelSchema('rectangle') };
+
+export const ellipse = { ...shape, propPanel: getPropPanelSchema('ellipse') };

package/src/text/helper.ts

@@ -5,7 +5,6 @@ import {
   mm2pt,
   pt2mm,
   pt2px,
-  Schema,
   Font,
   getFallbackFontName,
   getDefaultFont,