@pdfme/schemas 0.0.0

package/src/shapes/line.ts

@@ -0,0 +1,94 @@
+import type { Schema, Plugin } from '@pdfme/common';
+import {
+  rotatePoint,
+  convertForPdfLayoutProps,
+  hex2PrintingColor,
+  createSvgStr,
+} from '../utils.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { Minus } from 'lucide';
+
+const DEFAULT_LINE_COLOR = '#000000';
+const HIT_POINT_HEIGHT = 16;
+
+interface LineSchema extends Schema {
+  color: string;
+}
+
+const lineSchema: Plugin<LineSchema> = {
+  pdf: (arg) => {
+    const { page, schema, options } = arg;
+    if (schema.width === 0 || schema.height === 0 || !schema.color) return;
+    const { colorType } = options;
+    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: hex2PrintingColor(schema.color ?? DEFAULT_LINE_COLOR, colorType),
+      opacity: opacity,
+    });
+  },
+  ui: (arg) => {
+    const { schema, rootElement } = arg;
+    Object.assign(rootElement.style, { position: 'relative', overflow: 'visible' });
+
+    const baseStyles = {
+      position: 'absolute',
+      top: '50%',
+      left: '0',
+      transform: 'translateY(-50%)',
+      width: '100%',
+    } as const;
+
+    const hitArea = document.createElement('div');
+    Object.assign(hitArea.style, baseStyles, {
+      height: `${HIT_POINT_HEIGHT}px`,
+      backgroundColor: 'transparent',
+    });
+
+    const div = document.createElement('div');
+    Object.assign(div.style, baseStyles, {
+      height: '100%',
+      backgroundColor: schema.color ?? 'transparent',
+      pointerEvents: 'none',
+    });
+
+    rootElement.append(hitArea, div);
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        props: {
+          disabledAlpha: true,
+        },
+        required: true,
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+      },
+    }),
+    defaultSchema: {
+      name: '',
+      type: 'line',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 0.5,
+      rotate: 0,
+      opacity: 1,
+      readOnly: true,
+      color: DEFAULT_LINE_COLOR,
+    },
+  },
+  icon: createSvgStr(Minus),
+};
+export default lineSchema;

package/src/shapes/rectAndEllipse.ts

@@ -0,0 +1,152 @@
+import { Plugin, Schema, mm2pt } from '@pdfme/common';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+import { hex2PrintingColor, convertForPdfLayoutProps, createSvgStr } from '../utils.js';
+import { toRadians } from '@pdfme/pdf-lib';
+import { Circle, Square } from 'lucide';
+
+interface ShapeSchema extends Schema {
+  type: 'ellipse' | 'rectangle';
+  borderWidth: number;
+  borderColor: string;
+  color: string;
+  radius?: number;
+}
+
+const shape: Plugin<ShapeSchema> = {
+  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%';
+    } else if (schema.radius && schema.radius > 0) {
+      div.style.borderRadius = `${schema.radius}mm`;
+    }
+    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, options } = arg;
+    if (!schema.color && !schema.borderColor) return;
+    const { colorType } = options;
+    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: hex2PrintingColor(schema.borderColor, colorType),
+      color: hex2PrintingColor(schema.color, colorType),
+      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') {
+      const radius = schema.radius ?? 0;
+
+      page.drawRectangle({
+        x:
+          position.x +
+          borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) +
+          Math.tan(toRadians(rotate)) * Math.PI ** 2,
+        y:
+          position.y +
+          borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) +
+          Math.tan(toRadians(rotate)) * Math.PI ** 2,
+        width: width - borderWidth,
+        height: height - borderWidth,
+        ...(radius ? { radius: mm2pt(radius) } : {}),
+        ...drawOptions,
+      });
+    }
+  },
+  propPanel: {
+    schema: ({ i18n }) => ({
+      borderWidth: {
+        title: i18n('schemas.borderWidth'),
+        type: 'number',
+        widget: 'inputNumber',
+        props: { min: 0, step: 1 },
+        span: 12,
+      },
+      borderColor: {
+        title: i18n('schemas.borderColor'),
+        type: 'string',
+        widget: 'color',
+        props: {
+          disabledAlpha: true,
+        },
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+        span: 12,
+      },
+      color: {
+        title: i18n('schemas.color'),
+        type: 'string',
+        widget: 'color',
+        props: {
+          disabledAlpha: true,
+        },
+        rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+      },
+      radius: {
+        title: i18n('schemas.radius'),
+        type: 'number',
+        widget: 'inputNumber',
+        props: { min: 0, step: 1 },
+        span: 12,
+      },
+    }),
+    defaultSchema: {
+      name: '',
+      type: 'rectangle',
+      position: { x: 0, y: 0 },
+      width: 62.5,
+      height: 37.5,
+      rotate: 0,
+      opacity: 1,
+      borderWidth: 1,
+      borderColor: '#000000',
+      color: '',
+      readOnly: true,
+      radius: 0,
+    },
+  },
+};
+
+const getPropPanelSchema = (type: 'rectangle' | 'ellipse') => ({
+  ...shape.propPanel,
+  defaultSchema: {
+    ...(shape.propPanel.defaultSchema as ShapeSchema),
+    type,
+  },
+});
+
+export const rectangle = {
+  ...shape,
+  propPanel: getPropPanelSchema('rectangle'),
+  icon: createSvgStr(Square),
+};
+
+export const ellipse = {
+  ...shape,
+  propPanel: getPropPanelSchema('ellipse'),
+  icon: createSvgStr(Circle),
+};

package/src/tables/cell.ts

@@ -0,0 +1,152 @@
+import { DEFAULT_FONT_NAME, Plugin, PDFRenderProps, getFallbackFontName } from '@pdfme/common';
+import { uiRender as textUiRender } from '../text/uiRender.js';
+import { pdfRender as textPdfRender } from '../text/pdfRender.js';
+import line from '../shapes/line.js';
+import { rectangle } from '../shapes/rectAndEllipse.js';
+import type { CellSchema } from './types.js';
+import { getCellPropPanelSchema, getDefaultCellStyles } from './helper.js';
+const linePdfRender = line.pdf;
+const rectanglePdfRender = rectangle.pdf;
+
+const renderLine = async (
+  arg: PDFRenderProps<CellSchema>,
+  schema: CellSchema,
+  position: { x: number; y: number },
+  width: number,
+  height: number,
+) =>
+  linePdfRender({
+    ...arg,
+    schema: { ...schema, type: 'line', position, width, height, color: schema.borderColor },
+  });
+
+const createTextDiv = (schema: CellSchema) => {
+  const { borderWidth: bw, width, height, padding: pd } = schema;
+  const textDiv = document.createElement('div');
+  textDiv.style.position = 'absolute';
+  textDiv.style.zIndex = '1';
+  textDiv.style.width = `${width - bw.left - bw.right - pd.left - pd.right}mm`;
+  textDiv.style.height = `${height - bw.top - bw.bottom - pd.top - pd.bottom}mm`;
+  textDiv.style.top = `${bw.top + pd.top}mm`;
+  textDiv.style.left = `${bw.left + pd.left}mm`;
+  return textDiv;
+};
+
+const createLineDiv = (
+  width: string,
+  height: string,
+  top: string | null,
+  right: string | null,
+  bottom: string | null,
+  left: string | null,
+  borderColor: string,
+) => {
+  const div = document.createElement('div');
+  div.style.width = width;
+  div.style.height = height;
+  div.style.position = 'absolute';
+  if (top !== null) div.style.top = top;
+  if (right !== null) div.style.right = right;
+  if (bottom !== null) div.style.bottom = bottom;
+  if (left !== null) div.style.left = left;
+  div.style.backgroundColor = borderColor;
+  return div;
+};
+
+const cellSchema: Plugin<CellSchema> = {
+  pdf: async (arg) => {
+    const { schema } = arg;
+    const { position, width, height, borderWidth, padding } = schema;
+
+    await Promise.all([
+      // BACKGROUND
+      rectanglePdfRender({
+        ...arg,
+        schema: {
+          ...schema,
+          type: 'rectangle',
+          width: schema.width,
+          height: schema.height,
+          borderWidth: 0,
+          borderColor: '',
+          color: schema.backgroundColor,
+        },
+      }),
+      // TOP
+      renderLine(arg, schema, { x: position.x, y: position.y }, width, borderWidth.top),
+      // RIGHT
+      renderLine(
+        arg,
+        schema,
+        { x: position.x + width - borderWidth.right, y: position.y },
+        borderWidth.right,
+        height,
+      ),
+      // BOTTOM
+      renderLine(
+        arg,
+        schema,
+        { x: position.x, y: position.y + height - borderWidth.bottom },
+        width,
+        borderWidth.bottom,
+      ),
+      // LEFT
+      renderLine(arg, schema, { x: position.x, y: position.y }, borderWidth.left, height),
+    ]);
+    // TEXT
+    await textPdfRender({
+      ...arg,
+      schema: {
+        ...schema,
+        type: 'text',
+        backgroundColor: '',
+        position: {
+          x: position.x + borderWidth.left + padding.left,
+          y: position.y + borderWidth.top + padding.top,
+        },
+        width: width - borderWidth.left - borderWidth.right - padding.left - padding.right,
+        height: height - borderWidth.top - borderWidth.bottom - padding.top - padding.bottom,
+      },
+    });
+  },
+  ui: async (arg) => {
+    const { schema, rootElement } = arg;
+    const { borderWidth, width, height, borderColor, backgroundColor } = schema;
+    rootElement.style.backgroundColor = backgroundColor;
+
+    const textDiv = createTextDiv(schema);
+    await textUiRender({
+      ...arg,
+      schema: { ...schema, backgroundColor: '' },
+      rootElement: textDiv,
+    });
+    rootElement.appendChild(textDiv);
+
+    const lines = [
+      createLineDiv(`${width}mm`, `${borderWidth.top}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${width}mm`, `${borderWidth.bottom}mm`, null, null, '0mm', '0mm', borderColor),
+      createLineDiv(`${borderWidth.left}mm`, `${height}mm`, '0mm', null, null, '0mm', borderColor),
+      createLineDiv(`${borderWidth.right}mm`, `${height}mm`, '0mm', '0mm', null, null, borderColor),
+    ];
+
+    lines.forEach((line) => rootElement.appendChild(line));
+  },
+  propPanel: {
+    schema: ({ options, i18n }) => {
+      const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+      const fontNames = Object.keys(font);
+      const fallbackFontName = getFallbackFontName(font);
+      return getCellPropPanelSchema({ i18n, fontNames, fallbackFontName });
+    },
+    defaultSchema: {
+      name: '',
+      type: 'cell',
+      content: 'Type Something...',
+      position: { x: 0, y: 0 },
+      width: 50,
+      height: 15,
+      ...getDefaultCellStyles(),
+    },
+  },
+};
+export default cellSchema;