@pdfme/schemas 0.0.0

package/src/tables/uiRender.ts

@@ -0,0 +1,436 @@
+import type { UIRenderProps, Mode } from '@pdfme/common';
+import type { TableSchema, CellStyle, Styles } from './types.js';
+import { px2mm, ZOOM } from '@pdfme/common';
+import { createSingleTable } from './tableHelper.js';
+import { getBody, getBodyWithRange } from './helper.js';
+import cell from './cell.js';
+import { Row } from './classes.js';
+
+const buttonSize = 30;
+
+function createButton(options: {
+  width: number;
+  height: number;
+  top: string;
+  left?: string;
+  right?: string;
+  text: string;
+  onClick: (e: MouseEvent) => void;
+}): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.style.width = `${options.width}px`;
+  button.style.height = `${options.height}px`;
+  button.style.position = 'absolute';
+  button.style.top = options.top;
+  if (options.left !== undefined) {
+    button.style.left = options.left;
+  }
+  if (options.right !== undefined) {
+    button.style.right = options.right;
+  }
+  button.innerText = options.text;
+  button.onclick = options.onClick;
+  return button;
+}
+
+type RowType = InstanceType<typeof Row>;
+
+const cellUiRender = cell.ui;
+
+const convertToCellStyle = (styles: Styles): CellStyle => ({
+  fontName: styles.fontName,
+  alignment: styles.alignment,
+  verticalAlignment: styles.verticalAlignment,
+  fontSize: styles.fontSize,
+  lineHeight: styles.lineHeight,
+  characterSpacing: styles.characterSpacing,
+  backgroundColor: styles.backgroundColor,
+  // ---
+  fontColor: styles.textColor,
+  borderColor: styles.lineColor,
+  borderWidth: styles.lineWidth,
+  padding: styles.cellPadding,
+});
+
+const calcResizedHeadWidthPercentages = (arg: {
+  currentHeadWidthPercentages: number[];
+  currentHeadWidths: number[];
+  changedHeadWidth: number;
+  changedHeadIndex: number;
+}) => {
+  const { currentHeadWidthPercentages, currentHeadWidths, changedHeadWidth, changedHeadIndex } =
+    arg;
+  const headWidthPercentages = [...currentHeadWidthPercentages];
+  const totalWidth = currentHeadWidths.reduce((a, b) => a + b, 0);
+  const changedWidthPercentage = (changedHeadWidth / totalWidth) * 100;
+  const originalNextWidthPercentage = headWidthPercentages[changedHeadIndex + 1] ?? 0;
+  const adjustment = headWidthPercentages[changedHeadIndex] - changedWidthPercentage;
+  headWidthPercentages[changedHeadIndex] = changedWidthPercentage;
+  if (changedHeadIndex + 1 < headWidthPercentages.length) {
+    headWidthPercentages[changedHeadIndex + 1] = originalNextWidthPercentage + adjustment;
+  }
+  return headWidthPercentages;
+};
+
+const setBorder = (
+  div: HTMLDivElement,
+  borderPosition: 'Top' | 'Left' | 'Right' | 'Bottom',
+  arg: UIRenderProps<TableSchema>,
+) => {
+  div.style[`border${borderPosition}`] = `${String(arg.schema.tableStyles.borderWidth)}mm solid ${
+    arg.schema.tableStyles.borderColor
+  }`;
+};
+
+const drawBorder = (
+  div: HTMLDivElement,
+  row: RowType,
+  colIndex: number,
+  rowIndex: number,
+  rowsLength: number,
+  arg: UIRenderProps<TableSchema>,
+) => {
+  const isFirstColumn = colIndex === 0;
+  const isLastColumn = colIndex === Object.values(row.cells).length - 1;
+  const isLastRow = rowIndex === rowsLength - 1;
+
+  if (row.section === 'head') {
+    setBorder(div, 'Top', arg);
+    if (isFirstColumn) setBorder(div, 'Left', arg);
+    if (isLastColumn) setBorder(div, 'Right', arg);
+    if ((JSON.parse(arg.value || '[]') as string[][]).length === 0) {
+      setBorder(div, 'Bottom', arg);
+    }
+  } else if (row.section === 'body') {
+    if (!arg.schema.showHead && rowIndex === 0) {
+      setBorder(div, 'Top', arg);
+    }
+    if (isFirstColumn) setBorder(div, 'Left', arg);
+    if (isLastColumn) setBorder(div, 'Right', arg);
+    if (isLastRow) setBorder(div, 'Bottom', arg);
+  }
+};
+
+const renderRowUi = (args: {
+  rows: RowType[];
+  arg: UIRenderProps<TableSchema>;
+  editingPosition: { rowIndex: number; colIndex: number };
+  onChangeEditingPosition: (position: { rowIndex: number; colIndex: number }) => void;
+  offsetY?: number;
+}) => {
+  const { rows, arg, onChangeEditingPosition, offsetY = 0, editingPosition } = args;
+  const value = JSON.parse(arg.value || '[]') as string[][];
+
+  let rowOffsetY = offsetY;
+  rows.forEach((row, rowIndex) => {
+    const { cells, height, section } = row;
+    let colOffsetX = 0;
+    Object.values(cells).forEach((cell, colIndex) => {
+      const div = document.createElement('div');
+      div.style.position = 'absolute';
+      div.style.top = `${rowOffsetY}mm`;
+      div.style.left = `${colOffsetX}mm`;
+      div.style.width = `${cell.width}mm`;
+      div.style.height = `${cell.height}mm`;
+      div.style.boxSizing = 'border-box';
+
+      drawBorder(div, row, colIndex, rowIndex, rows.length, arg);
+
+      div.style.cursor =
+        arg.mode === 'designer' || (arg.mode === 'form' && section === 'body') ? 'text' : 'default';
+
+      div.addEventListener('click', () => {
+        if (arg.mode === 'viewer') return;
+        onChangeEditingPosition({ rowIndex, colIndex });
+      });
+      arg.rootElement.appendChild(div);
+      const isEditing =
+        editingPosition.rowIndex === rowIndex && editingPosition.colIndex === colIndex;
+      let mode: Mode = 'viewer';
+      if (arg.mode === 'form') {
+        mode = section === 'body' && isEditing && !arg.schema.readOnly ? 'designer' : 'viewer';
+      } else if (arg.mode === 'designer') {
+        mode = isEditing ? 'designer' : 'form';
+      }
+
+      void cellUiRender({
+        ...arg,
+        stopEditing: () => {
+          if (arg.mode === 'form') {
+            resetEditingPosition();
+          }
+        },
+        mode,
+        onChange: (v) => {
+          if (!arg.onChange) return;
+          const newValue = (Array.isArray(v) ? v[0].value : v.value) as string;
+          if (section === 'body') {
+            const startRange = arg.schema.__bodyRange?.start ?? 0;
+            value[rowIndex + startRange][colIndex] = newValue;
+            arg.onChange({ key: 'content', value: JSON.stringify(value) });
+          } else {
+            const newHead = [...arg.schema.head];
+            newHead[colIndex] = newValue;
+            arg.onChange({ key: 'head', value: newHead });
+          }
+        },
+        value: cell.raw,
+        placeholder: '',
+        rootElement: div,
+        schema: {
+          name: '',
+          type: 'cell',
+          content: cell.raw,
+          position: { x: colOffsetX, y: rowOffsetY },
+          width: cell.width,
+          height: cell.height,
+          ...convertToCellStyle(cell.styles),
+        },
+      });
+      colOffsetX += cell.width;
+    });
+    rowOffsetY += height;
+  });
+};
+
+const headEditingPosition = { rowIndex: -1, colIndex: -1 };
+const bodyEditingPosition = { rowIndex: -1, colIndex: -1 };
+const resetEditingPosition = () => {
+  headEditingPosition.rowIndex = -1;
+  headEditingPosition.colIndex = -1;
+  bodyEditingPosition.rowIndex = -1;
+  bodyEditingPosition.colIndex = -1;
+};
+
+export const uiRender = async (arg: UIRenderProps<TableSchema>) => {
+  const { rootElement, onChange, schema, value, mode, scale} = arg;
+  const body = getBody(value);
+  const bodyWidthRange = getBodyWithRange(value, schema.__bodyRange);
+  const table = await createSingleTable(bodyWidthRange, arg);
+  const showHead = table.settings.showHead;
+
+  rootElement.innerHTML = '';
+
+  const handleChangeEditingPosition = (
+    newPosition: { rowIndex: number; colIndex: number },
+    editingPosition: { rowIndex: number; colIndex: number },
+  ) => {
+    resetEditingPosition();
+    editingPosition.rowIndex = newPosition.rowIndex;
+    editingPosition.colIndex = newPosition.colIndex;
+    void uiRender(arg);
+  };
+
+  if (showHead) {
+    renderRowUi({
+      rows: table.head,
+      arg,
+      editingPosition: headEditingPosition,
+      onChangeEditingPosition: (p) => handleChangeEditingPosition(p, headEditingPosition),
+    });
+  }
+
+  const offsetY = showHead ? table.getHeadHeight() : 0;
+  renderRowUi({
+    rows: table.body,
+    arg,
+    editingPosition: bodyEditingPosition,
+    onChangeEditingPosition: (p) => {
+      handleChangeEditingPosition(p, bodyEditingPosition);
+    },
+    offsetY,
+  });
+
+  const createAddRowButton = () =>
+    createButton({
+      width: buttonSize,
+      height: buttonSize,
+      top: `${table.getHeight()}mm`,
+      left: `calc(50% - ${buttonSize / 2}px)`,
+      text: '+',
+      onClick: () => {
+        const newRow = Array(schema.head.length).fill('') as string[];
+        if (onChange) onChange({ key: 'content', value: JSON.stringify(body.concat([newRow])) });
+      },
+    });
+
+  const createRemoveRowButtons = () => {
+    let offsetY = showHead ? table.getHeadHeight() : 0;
+    return table.body.map((row, i) => {
+      offsetY = offsetY + row.height;
+      const removeRowButton = createButton({
+        width: buttonSize,
+        height: buttonSize,
+        top: `${offsetY - px2mm(buttonSize)}mm`,
+        right: `-${buttonSize}px`,
+        text: '-',
+        onClick: () => {
+          const newTableBody = body.filter((_, j) => j !== i + (schema.__bodyRange?.start ?? 0));
+          if (onChange) onChange({ key: 'content', value: JSON.stringify(newTableBody) });
+        },
+      });
+      return removeRowButton;
+    });
+  };
+
+  if (mode === 'form' && onChange && !schema.readOnly) {
+    if (
+      schema.__bodyRange?.end === undefined ||
+      schema.__bodyRange.end >= (JSON.parse(value || '[]') as string[][]).length
+    ) {
+      rootElement.appendChild(createAddRowButton());
+    }
+
+    createRemoveRowButtons().forEach((button) => rootElement.appendChild(button));
+  }
+
+  if (mode === 'designer' && onChange) {
+    const addColumnButton = createButton({
+      width: buttonSize,
+      height: buttonSize,
+      top: `${(showHead ? table.getHeadHeight() : 0) - px2mm(buttonSize)}mm`,
+      right: `-${buttonSize}px`,
+      text: '+',
+      onClick: (e) => {
+        e.preventDefault();
+        const newColumnWidthPercentage = 25;
+        const totalCurrentWidth = schema.headWidthPercentages.reduce(
+          (acc, width) => acc + width,
+          0,
+        );
+        const scalingRatio = (100 - newColumnWidthPercentage) / totalCurrentWidth;
+        const scaledWidths = schema.headWidthPercentages.map((width) => width * scalingRatio);
+        onChange([
+          { key: 'head', value: schema.head.concat(`Head ${schema.head.length + 1}`) },
+          { key: 'headWidthPercentages', value: scaledWidths.concat(newColumnWidthPercentage) },
+          {
+            key: 'content',
+            value: JSON.stringify(bodyWidthRange.map((row, i) => row.concat(`Row ${i + 1}`))),
+          },
+        ]);
+      },
+    });
+    rootElement.appendChild(addColumnButton);
+
+    rootElement.appendChild(createAddRowButton());
+
+    createRemoveRowButtons().forEach((button) => rootElement.appendChild(button));
+
+    let offsetX = 0;
+    table.columns.forEach((column, i, columns) => {
+      if (columns.length === 1) return;
+      offsetX = offsetX + column.width;
+      const removeColumnButton = createButton({
+        width: buttonSize,
+        height: buttonSize,
+        top: `${-buttonSize}px`,
+        left: `${offsetX - px2mm(buttonSize)}mm`,
+        text: '-',
+        onClick: () => {
+          const totalWidthMinusRemoved = schema.headWidthPercentages.reduce(
+            (sum, width, j) => (j !== i ? sum + width : sum),
+            0,
+          );
+
+          // TODO Should also remove the deleted columnStyles when deleting
+          onChange([
+            { key: 'head', value: schema.head.filter((_, j) => j !== i) },
+            {
+              key: 'headWidthPercentages',
+              value: schema.headWidthPercentages
+                .filter((_, j) => j !== i)
+                .map((width) => (width / totalWidthMinusRemoved) * 100),
+            },
+            {
+              key: 'content',
+              value: JSON.stringify(bodyWidthRange.map((row) => row.filter((_, j) => j !== i))),
+            },
+          ]);
+        },
+      });
+      rootElement.appendChild(removeColumnButton);
+
+      if (i === table.columns.length - 1) return;
+
+      const dragHandle = document.createElement('div');
+      const lineWidth = 5;
+      dragHandle.style.width = `${lineWidth}px`;
+      dragHandle.style.height = '100%';
+      dragHandle.style.backgroundColor = '#eee';
+      dragHandle.style.opacity = '0.5';
+      dragHandle.style.cursor = 'col-resize';
+      dragHandle.style.position = 'absolute';
+      dragHandle.style.zIndex = '10';
+      dragHandle.style.left = `${offsetX - px2mm(lineWidth) / 2}mm`;
+      dragHandle.style.top = '0';
+      const setColor = (e: MouseEvent) => {
+        const handle = e.target as HTMLDivElement;
+        handle.style.backgroundColor = '#2196f3';
+      };
+      const resetColor = (e: MouseEvent) => {
+        const handle = e.target as HTMLDivElement;
+        handle.style.backgroundColor = '#eee';
+      };
+      dragHandle.addEventListener('mouseover', setColor);
+      dragHandle.addEventListener('mouseout', resetColor);
+
+      const prevColumnLeft = offsetX - column.width;
+      const nextColumnRight = offsetX - px2mm(lineWidth) + table.columns[i + 1].width;
+
+      dragHandle.addEventListener('mousedown', (e) => {
+        resetEditingPosition();
+        const handle = e.target as HTMLDivElement;
+        dragHandle.removeEventListener('mouseover', setColor);
+        dragHandle.removeEventListener('mouseout', resetColor);
+
+        const startClientX = e.clientX;
+        const startLeft = Number(handle.style.left.replace('mm', ''));
+
+        let move = 0;
+        const mouseMove = (e: MouseEvent) => {
+          const deltaX = e.clientX - startClientX;
+          const moveX = deltaX / ZOOM / scale;
+          let newLeft = startLeft + moveX;
+
+          if (newLeft < prevColumnLeft) {
+            newLeft = prevColumnLeft;
+          }
+          if (newLeft >= nextColumnRight) {
+            newLeft = nextColumnRight;
+          }
+          handle.style.left = `${newLeft}mm`;
+          move = newLeft - startLeft;
+        };
+        rootElement.addEventListener('mousemove', mouseMove);
+
+        const commitResize = () => {
+          if (move !== 0) {
+            const newHeadWidthPercentages = calcResizedHeadWidthPercentages({
+              currentHeadWidthPercentages: schema.headWidthPercentages,
+              currentHeadWidths: table.columns.map((column) => column.width),
+              changedHeadWidth: table.columns[i].width + move,
+              changedHeadIndex: i,
+            });
+            onChange({ key: 'headWidthPercentages', value: newHeadWidthPercentages });
+          }
+          move = 0;
+          dragHandle.addEventListener('mouseover', setColor);
+          dragHandle.addEventListener('mouseout', resetColor);
+          rootElement.removeEventListener('mousemove', mouseMove);
+          rootElement.removeEventListener('mouseup', commitResize);
+        };
+        rootElement.addEventListener('mouseup', commitResize);
+      });
+      rootElement.appendChild(dragHandle);
+    });
+  }
+
+  if (mode === 'viewer') {
+    resetEditingPosition();
+  }
+
+  const tableHeight = showHead ? table.getHeight() : table.getBodyHeight();
+  if (schema.height !== tableHeight && onChange) {
+    onChange({ key: 'height', value: tableHeight });
+  }
+};

package/src/text/constants.ts

@@ -0,0 +1,104 @@
+import { ALIGNMENT, VERTICAL_ALIGNMENT, DYNAMIC_FONT_SIZE_FIT } from './types.js';
+
+export const DEFAULT_FONT_SIZE = 13;
+
+export const ALIGN_LEFT = 'left' as ALIGNMENT;
+export const ALIGN_CENTER = 'center' as ALIGNMENT;
+export const ALIGN_RIGHT = 'right' as ALIGNMENT;
+export const ALIGN_JUSTIFY = 'justify' as ALIGNMENT;
+export const DEFAULT_ALIGNMENT = ALIGN_LEFT;
+export const VERTICAL_ALIGN_TOP = 'top' as VERTICAL_ALIGNMENT;
+export const VERTICAL_ALIGN_MIDDLE = 'middle' as VERTICAL_ALIGNMENT;
+export const VERTICAL_ALIGN_BOTTOM = 'bottom' as VERTICAL_ALIGNMENT;
+export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGN_TOP;
+export const DEFAULT_LINE_HEIGHT = 1;
+export const DEFAULT_CHARACTER_SPACING = 0;
+export const DEFAULT_FONT_COLOR = '#000000';
+export const PLACEHOLDER_FONT_COLOR = '#A0A0A0';
+export const DYNAMIC_FIT_VERTICAL = 'vertical' as DYNAMIC_FONT_SIZE_FIT;
+export const DYNAMIC_FIT_HORIZONTAL = 'horizontal' as DYNAMIC_FONT_SIZE_FIT;
+export const DEFAULT_DYNAMIC_FIT = DYNAMIC_FIT_VERTICAL;
+export const DEFAULT_DYNAMIC_MIN_FONT_SIZE = 4;
+
+export const DEFAULT_DYNAMIC_MAX_FONT_SIZE = 72;
+export const FONT_SIZE_ADJUSTMENT = 0.25;
+
+export const LINE_START_FORBIDDEN_CHARS = [
+  // 句読点
+  '、',
+  '。',
+  ',',
+  '.',
+
+  // 閉じカッコ類
+  '」',
+  '』',
+  ')',
+  '}',
+  '】',
+  '>',
+  '≫',
+  ']',
+
+  // 記号
+  '・',
+  'ー',
+  '―',
+  '-',
+
+  // 約物
+  '!',
+  '！',
+  '?',
+  '？',
+  ':',
+  '：',
+  ';',
+  '；',
+  '/',
+  '／',
+
+  // 繰り返し記号
+  'ゝ',
+  '々',
+  '〃',
+
+  // 拗音・促音（小書きのかな）
+  'ぁ',
+  'ぃ',
+  'ぅ',
+  'ぇ',
+  'ぉ',
+  'っ',
+  'ゃ',
+  'ゅ',
+  'ょ',
+  'ァ',
+  'ィ',
+  'ゥ',
+  'ェ',
+  'ォ',
+  'ッ',
+  'ャ',
+  'ュ',
+  'ョ',
+];
+
+export const LINE_END_FORBIDDEN_CHARS = [
+  // 始め括弧類
+  '「',
+  '『',
+  '（',
+  '｛',
+  '【',
+  '＜',
+  '≪',
+  '［',
+  '〘',
+  '〖',
+  '〝',
+  '‘',
+  '“',
+  '｟',
+  '«',
+];

package/src/text/extraFormatter.ts

@@ -0,0 +1,83 @@
+// No imports needed from @pdfme/common
+import {
+  TextAlignCenterIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
+  TextAlignJustifyIcon,
+  TextStrikethroughIcon,
+  TextUnderlineIcon,
+  TextVerticalAlignBottomIcon,
+  TextVerticalAlignMiddleIcon,
+  TextVerticalAlignTopIcon,
+} from './icons/index.js';
+import {
+  ALIGN_CENTER,
+  ALIGN_RIGHT,
+  DEFAULT_ALIGNMENT,
+  DEFAULT_VERTICAL_ALIGNMENT,
+  VERTICAL_ALIGN_BOTTOM,
+  VERTICAL_ALIGN_MIDDLE,
+  ALIGN_JUSTIFY,
+} from './constants.js';
+
+export enum Formatter {
+  STRIKETHROUGH = 'strikethrough',
+  UNDERLINE = 'underline',
+  ALIGNMENT = 'alignment',
+  VERTICAL_ALIGNMENT = 'verticalAlignment',
+}
+
+interface GroupButtonBoolean {
+  key: Formatter;
+  icon: string;
+  type: 'boolean';
+}
+
+interface GroupButtonString {
+  key: Formatter;
+  icon: string;
+  type: 'select';
+  value: string;
+}
+
+type GroupButton = GroupButtonBoolean | GroupButtonString;
+
+export function getExtraFormatterSchema(i18n: (key: string) => string): {
+  title: string;
+  widget: string;
+  buttons: GroupButton[];
+  span: number;
+} {
+  const buttons: GroupButton[] = [
+    { key: Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: 'boolean' },
+    { key: Formatter.UNDERLINE, icon: TextUnderlineIcon, type: 'boolean' },
+    { key: Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: 'select', value: DEFAULT_ALIGNMENT },
+    { key: Formatter.ALIGNMENT, icon: TextAlignCenterIcon, type: 'select', value: ALIGN_CENTER },
+    { key: Formatter.ALIGNMENT, icon: TextAlignRightIcon, type: 'select', value: ALIGN_RIGHT },
+    { key: Formatter.ALIGNMENT, icon: TextAlignJustifyIcon, type: 'select', value: ALIGN_JUSTIFY },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignTopIcon,
+      type: 'select',
+      value: DEFAULT_VERTICAL_ALIGNMENT,
+    },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignMiddleIcon,
+      type: 'select',
+      value: VERTICAL_ALIGN_MIDDLE,
+    },
+    {
+      key: Formatter.VERTICAL_ALIGNMENT,
+      icon: TextVerticalAlignBottomIcon,
+      type: 'select',
+      value: VERTICAL_ALIGN_BOTTOM,
+    },
+  ];
+  return {
+    title: i18n('schemas.text.format'),
+    widget: 'ButtonGroup',
+    buttons,
+    span: 24,
+  };
+}