@pdfme/ui 0.0.0

package/src/components/Preview.tsx

@@ -0,0 +1,220 @@
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import {
+  Template,
+  SchemaForUI,
+  PreviewProps,
+  Size,
+  getDynamicTemplate,
+  replacePlaceholders,
+} from '@pdfme/common';
+import { getDynamicHeightsForTable } from '@pdfme/schemas/utils';
+import UnitPager from './UnitPager.js';
+import Root from './Root.js';
+import StaticSchema from './StaticSchema.js';
+import ErrorScreen from './ErrorScreen.js';
+import CtlBar from './CtlBar.js';
+import Paper from './Paper.js';
+import Renderer from './Renderer.js';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
+import { FontContext, OptionsContext } from '../contexts.js';
+import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
+import { theme } from 'antd';
+
+const _cache = new Map<string | number, unknown>();
+
+const Preview = ({
+  template,
+  inputs,
+  size,
+  onChangeInput,
+  onPageChange,
+}: Omit<PreviewProps, 'domContainer'> & {
+  onChangeInput?: (args: { index: number; value: string; name: string }) => void;
+  onPageChange?: (pageInfo: { currentPage: number; totalPages: number }) => void;
+  size: Size;
+}) => {
+  const { token } = theme.useToken();
+
+  const font = useContext(FontContext);
+  const options = useContext(OptionsContext);
+  const maxZoom = useMaxZoom();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const paperRefs = useRef<HTMLDivElement[]>([]);
+
+  const [unitCursor, setUnitCursor] = useState(0);
+  const [pageCursor, setPageCursor] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(options.zoomLevel ?? 1);
+  const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
+
+  const { backgrounds, pageSizes, scale, error, refresh } = useUIPreProcessor({
+    template,
+    size,
+    zoomLevel,
+    maxZoom,
+  });
+
+  const isForm = Boolean(onChangeInput);
+
+  const input = inputs[unitCursor];
+
+  const init = (template: Template) => {
+    const options = { font };
+    getDynamicTemplate({
+      template,
+      input,
+      options,
+      _cache,
+      getDynamicHeights: (value, args) => {
+        switch (args.schema.type) {
+          case 'table':
+            return getDynamicHeightsForTable(value, args);
+          default:
+            return Promise.resolve([args.schema.height]);
+        }
+      },
+    })
+      .then(async (dynamicTemplate) => {
+        const sl = await template2SchemasList(dynamicTemplate);
+        setSchemasList(sl);
+        await refresh(dynamicTemplate);
+      })
+      .catch((err) => console.error(`[@pdfme/ui] `, err));
+  };
+
+  // Update component state only when _options_ changes
+  // Ignore exhaustive useEffect dependency warnings here
+  useEffect(() => {
+    if (typeof options.zoomLevel === 'number' && options.zoomLevel !== zoomLevel) {
+      setZoomLevel(options.zoomLevel);
+    }
+    // eslint-disable-next-line
+  }, [options]);
+
+  useEffect(() => {
+    if (unitCursor > inputs.length - 1) {
+      setUnitCursor(inputs.length - 1);
+    }
+
+    init(template);
+  }, [template, inputs, size]);
+
+  useScrollPageCursor({
+    ref: containerRef,
+    pageSizes,
+    scale,
+    pageCursor,
+    onChangePageCursor: (p) => {
+      setPageCursor(p);
+      if (onPageChange) {
+        onPageChange({ currentPage: p, totalPages: schemasList.length });
+      }
+    },
+  });
+
+  const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
+    onChangeInput && onChangeInput({ index: unitCursor, name, value });
+
+  const handleOnChangeRenderer = (args: { key: string; value: unknown }[], schema: SchemaForUI) => {
+    let isNeedInit = false;
+    args.forEach(({ key: _key, value }) => {
+      if (_key === 'content') {
+        const newValue = value as string;
+        const oldValue = (input?.[schema.name] as string) || '';
+        if (newValue === oldValue) return;
+        handleChangeInput({ name: schema.name, value: newValue });
+        // TODO Improve this to allow schema types to determine whether the execution of getDynamicTemplate is required.
+        if (schema.type === 'table') isNeedInit = true;
+      } else {
+        const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
+        if (!targetSchema) return;
+
+        // @ts-expect-error Dynamic property assignment
+        targetSchema[_key] = value as string;
+      }
+    });
+    if (isNeedInit) {
+      init(template);
+    }
+    setSchemasList([...schemasList]);
+  };
+
+  if (error) {
+    return <ErrorScreen size={size} error={error} />;
+  }
+
+  return (
+    <Root size={size} scale={scale}>
+      <CtlBar
+        size={size}
+        pageCursor={pageCursor}
+        pageNum={schemasList.length}
+        setPageCursor={(p) => {
+          if (!containerRef.current) return;
+          containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          setPageCursor(p);
+          if (onPageChange) {
+            onPageChange({ currentPage: p, totalPages: schemasList.length });
+          }
+        }}
+        zoomLevel={zoomLevel}
+        setZoomLevel={setZoomLevel}
+      />
+      <UnitPager
+        size={size}
+        unitCursor={unitCursor}
+        unitNum={inputs.length}
+        setUnitCursor={setUnitCursor}
+      />
+      <div ref={containerRef} style={{ ...size, position: 'relative', overflow: 'auto' }}>
+        <Paper
+          paperRefs={paperRefs}
+          scale={scale}
+          size={size}
+          schemasList={schemasList}
+          pageSizes={pageSizes}
+          backgrounds={backgrounds}
+          renderSchema={({ schema, index }) => {
+            const value = schema.readOnly
+              ? replacePlaceholders({
+                  content: schema.content || '',
+                  variables: { ...input, totalPages: schemasList.length, currentPage: index + 1 },
+                  schemas: schemasList,
+                })
+              : String((input && input[schema.name]) || '');
+            return (
+              <Renderer
+                key={schema.id}
+                schema={schema}
+                basePdf={template.basePdf}
+                value={value}
+                mode={isForm ? 'form' : 'viewer'}
+                placeholder={schema.content}
+                tabIndex={index + 100}
+                onChange={(arg) => {
+                  const args = Array.isArray(arg) ? arg : [arg];
+                  handleOnChangeRenderer(args, schema);
+                }}
+                outline={
+                  isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : 'transparent'
+                }
+                scale={scale}
+              />
+            );
+          }}
+          renderPaper={({ index }) => (
+            <StaticSchema
+              template={template}
+              scale={scale}
+              input={input}
+              totalPages={schemasList.length}
+              currentPage={index + 1}
+            />
+          )}
+        />
+      </div>
+    </Root>
+  );
+};
+
+export default Preview;

package/src/components/Renderer.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useContext, ReactNode, useRef, useMemo } from 'react';
+import {
+  Mode,
+  ZOOM,
+  UIRenderProps,
+  SchemaForUI,
+  BasePdf,
+  Schema,
+  Plugin,
+  UIOptions,
+  cloneDeep,
+} from '@pdfme/common';
+import { theme as antdTheme } from 'antd';
+import { SELECTABLE_CLASSNAME } from '../constants.js';
+import { PluginsRegistry, OptionsContext, I18nContext, CacheContext } from '../contexts.js';
+
+type RendererProps = Omit<
+  UIRenderProps<Schema>,
+  'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
+> & {
+  basePdf: BasePdf;
+  schema: SchemaForUI;
+  value: string;
+  outline: string;
+  onChangeHoveringSchemaId?: (id: string | null) => void;
+  scale: number;
+  selectable?: boolean;
+};
+
+type ReRenderCheckProps = {
+  plugin?: Plugin<Schema>;
+  value: string;
+  mode: Mode;
+  scale: number;
+  schema: SchemaForUI;
+  options: UIOptions;
+};
+
+const useRerenderDependencies = (arg: ReRenderCheckProps) => {
+  const { plugin, value, mode, scale, schema, options } = arg;
+  const _options = cloneDeep(options);
+  if (_options.font) {
+    Object.values(_options.font).forEach((fontObj) => {
+      (fontObj as { data: string }).data = '...';
+    });
+  }
+  const optionStr = JSON.stringify(_options);
+
+  return useMemo(() => {
+    if (plugin?.uninterruptedEditMode && mode === 'designer') {
+      return [mode];
+    } else {
+      return [value, mode, scale, JSON.stringify(schema), optionStr];
+    }
+  }, [value, mode, scale, schema, optionStr, plugin]);
+};
+
+const Wrapper = ({
+  children,
+  outline,
+  onChangeHoveringSchemaId,
+  schema,
+  selectable = true,
+}: RendererProps & { children: ReactNode }) => (
+  <div
+    title={schema.name}
+    onMouseEnter={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(schema.id)}
+    onMouseLeave={() => onChangeHoveringSchemaId && onChangeHoveringSchemaId(null)}
+    className={selectable ? SELECTABLE_CLASSNAME : ''}
+    id={schema.id}
+    style={{
+      position: 'absolute',
+      cursor: schema.readOnly ? 'initial' : 'pointer',
+      height: schema.height * ZOOM,
+      width: schema.width * ZOOM,
+      top: schema.position.y * ZOOM,
+      left: schema.position.x * ZOOM,
+      transform: `rotate(${schema.rotate ?? 0}deg)`,
+      opacity: schema.opacity ?? 1,
+      outline,
+    }}
+  >
+    {schema.required && (
+      <span
+        style={{
+          color: 'red',
+          position: 'absolute',
+          top: -12,
+          left: -12,
+          fontSize: 18,
+          fontWeight: 700,
+        }}
+      >
+        *
+      </span>
+    )}
+    {children}
+  </div>
+);
+
+const Renderer = (props: RendererProps) => {
+  const { schema, basePdf, value, mode, onChange, stopEditing, tabIndex, placeholder, scale } =
+    props;
+
+  const pluginsRegistry = useContext(PluginsRegistry);
+  const options = useContext(OptionsContext);
+  const i18n = useContext(I18nContext) as (key: string) => string;
+  const { token: theme } = antdTheme.useToken();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const _cache = useContext(CacheContext);
+  const plugin = pluginsRegistry.findByType(schema.type);
+
+  const reRenderDependencies = useRerenderDependencies({
+    plugin,
+    value,
+    mode,
+    scale,
+    schema,
+    options,
+  });
+
+  useEffect(() => {
+    if (!plugin?.ui || !ref.current || !schema.type) return;
+
+    ref.current.innerHTML = '';
+    const render = plugin.ui;
+
+    void render({
+      value,
+      schema,
+      basePdf,
+      rootElement: ref.current,
+      mode,
+      onChange,
+      stopEditing,
+      tabIndex,
+      placeholder,
+      options,
+      theme,
+      i18n,
+      scale,
+      _cache,
+    });
+
+    return () => {
+      if (ref.current) {
+        ref.current.innerHTML = '';
+      }
+    };
+  }, reRenderDependencies);
+
+  if (!plugin) {
+    console.error(`[@pdfme/ui] Renderer for type ${schema.type} not found. 
+Check this document: https://pdfme.com/docs/custom-schemas`);
+    return <></>;
+  }
+
+  return (
+    <Wrapper {...props}>
+      <div style={{ height: '100%', width: '100%' }} ref={ref} />
+    </Wrapper>
+  );
+};
+export default Renderer;

package/src/components/Root.tsx

@@ -0,0 +1,38 @@
+import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
+import { Size } from '@pdfme/common';
+import { FontContext } from '../contexts.js';
+import { BACKGROUND_COLOR, DESIGNER_CLASSNAME } from '../constants.js';
+import Spinner from './Spinner.js';
+
+type Props = { size: Size; scale: number; children: ReactNode };
+
+const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
+  const font = useContext(FontContext);
+
+  useEffect(() => {
+    if (!document || !document.fonts) return;
+    const fontFaces = Object.entries(font).map(
+      ([key, { data }]) =>
+        new FontFace(key, typeof data === 'string' ? `url(${data})` : (data as BufferSource), {
+          display: 'swap',
+        }),
+    );
+    const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
+
+    void Promise.allSettled(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
+      loadedFontFaces.forEach((loadedFontFace) => {
+        if (loadedFontFace.status === 'fulfilled') {
+          document.fonts.add(loadedFontFace.value);
+        }
+      });
+    });
+  }, [font]);
+
+  return (
+    <div className={DESIGNER_CLASSNAME + 'root'} ref={ref} style={{ position: 'relative', background: BACKGROUND_COLOR, ...size }}>
+      <div className={DESIGNER_CLASSNAME + 'background'} style={{ margin: '0 auto', ...size }}>{scale === 0 ? <Spinner /> : children}</div>
+    </div>
+  );
+};
+
+export default forwardRef<HTMLDivElement, Props>(Root);

package/src/components/Spinner.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { LoaderCircle } from 'lucide-react';
+import { theme } from 'antd';
+
+const Spinner: React.FC = () => {
+  const { token } = theme.useToken();
+
+  const containerStyle: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    color: token.colorPrimary,
+  };
+
+  const loaderStyle: React.CSSProperties = {
+    animation: 'spin 1s linear infinite',
+  };
+
+  const keyframes = `
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+
+  return (
+    <>
+      <style>{keyframes}</style>
+      <div style={containerStyle}>
+        <LoaderCircle size={50} style={loaderStyle} />
+      </div>
+    </>
+  );
+};
+
+export default Spinner;

package/src/components/StaticSchema.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { isBlankPdf, replacePlaceholders, Template } from '@pdfme/common';
+import Renderer from './Renderer.js';
+import { uuid } from '../helper.js';
+
+const StaticSchema = (props: {
+  template: Template;
+  input: Record<string, string>;
+  scale: number;
+  totalPages: number;
+  currentPage: number;
+}) => {
+  const {
+    template: { schemas, basePdf },
+    input,
+    scale,
+    totalPages,
+    currentPage,
+  } = props;
+  if (!isBlankPdf(basePdf) || !basePdf.staticSchema) return null;
+  return (
+    <>
+      {basePdf.staticSchema.map((schema) => (
+        <Renderer
+          key={schema.name}
+          schema={{ ...schema, id: uuid() }}
+          basePdf={basePdf}
+          value={
+            schema.readOnly
+              ? replacePlaceholders({
+                  content: schema.content || '',
+                  variables: { ...input, totalPages, currentPage },
+                  schemas,
+                })
+              : schema.content || ''
+          }
+          onChangeHoveringSchemaId={() => {
+            void 0;
+          }}
+          mode={'viewer'}
+          outline={`none`}
+          scale={scale}
+          selectable={false}
+        />
+      ))}
+    </>
+  );
+};
+
+export default StaticSchema;

package/src/components/UnitPager.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Size } from '@pdfme/common';
+import { theme, Typography, Button } from 'antd';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+const { Text } = Typography;
+
+type UnitButtonProps = {
+  type: 'left' | 'right' | 'doubleLeft' | 'doubleRight';
+  onClick: () => void;
+  disabled: boolean;
+  textStyle: { color: string; fontSize: number; margin: number };
+};
+
+const icons = {
+  left: ChevronLeft,
+  right: ChevronRight,
+  doubleLeft: ChevronsLeft,
+  doubleRight: ChevronsRight,
+};
+
+const UnitButton: React.FC<UnitButtonProps> = ({ type, onClick, disabled, textStyle }) => {
+  const Icon = icons[type];
+
+  return (
+    <Button type="text" onClick={onClick} disabled={disabled}>
+      <Icon style={{ color: textStyle.color }} />
+    </Button>
+  );
+};
+
+type Props = {
+  size: Size;
+  unitCursor: number;
+  unitNum: number;
+  setUnitCursor: (page: number) => void;
+};
+
+const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
+  if (unitNum <= 1) return null;
+
+  const { token } = theme.useToken();
+
+  const buttonWrapStyle: React.CSSProperties = {
+    pointerEvents: 'initial',
+    position: 'sticky',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 40,
+    padding: token.paddingSM,
+    borderRadius: token.borderRadius,
+    backgroundColor: token.colorBgMask,
+  };
+  const textStyle = {
+    color: token.colorWhite,
+    fontSize: token.fontSize,
+    margin: token.marginXS,
+  };
+
+  return (
+    <div style={{ position: 'absolute', ...size }}>
+      <div
+        style={{
+          position: 'sticky',
+          width: '100%',
+          zIndex: 1,
+          top: `calc(50% - ${(buttonWrapStyle.height as number) / 2}px)`,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        {unitCursor > 0 && (
+          <div style={{ left: '1rem', marginLeft: '1rem', ...buttonWrapStyle }}>
+            <UnitButton
+              type="doubleLeft"
+              onClick={() => setUnitCursor(0)}
+              disabled={unitCursor <= 0}
+              textStyle={textStyle}
+            />
+            <UnitButton
+              type="left"
+              onClick={() => setUnitCursor(unitCursor - 1)}
+              disabled={unitCursor <= 0}
+              textStyle={textStyle}
+            />
+            <Text strong style={textStyle}>
+              {unitCursor + 1}/{unitNum}
+            </Text>
+          </div>
+        )}
+        {unitCursor + 1 < unitNum && (
+          <div
+            style={{ right: '1rem', marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}
+          >
+            <Text strong style={textStyle}>
+              {unitCursor + 1}/{unitNum}
+            </Text>
+            <UnitButton
+              type="right"
+              onClick={() => setUnitCursor(unitCursor + 1)}
+              disabled={unitCursor + 1 >= unitNum}
+              textStyle={textStyle}
+            />
+            <UnitButton
+              type="doubleRight"
+              onClick={() => setUnitCursor(unitNum - 1)}
+              disabled={unitCursor + 1 >= unitNum}
+              textStyle={textStyle}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UnitPager;

package/src/constants.ts

@@ -0,0 +1,21 @@
+export const DEFAULT_LANG = 'en';
+
+export const DESTROYED_ERR_MSG = '[@pdfme/ui] this instance is already destroyed';
+
+export const SELECTABLE_CLASSNAME = 'selectable';
+
+export const RULER_HEIGHT = 30;
+
+export const PAGE_GAP = 10;
+
+export const LEFT_SIDEBAR_WIDTH = 45;
+
+export const RIGHT_SIDEBAR_WIDTH = 400;
+
+export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';
+
+export const DEFAULT_MAX_ZOOM = 2;
+
+export const DESIGNER_CLASSNAME = 'pdfme-designer-';
+
+export const UI_CLASSNAME = 'pdfme-ui-';

package/src/contexts.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { i18n } from './i18n.js';
+import { getDefaultFont, PluginRegistry, pluginRegistry, UIOptions } from '@pdfme/common';
+import { builtInPlugins } from '@pdfme/schemas';
+
+export const I18nContext = createContext(i18n);
+
+export const FontContext = createContext(getDefaultFont());
+
+export const PluginsRegistry = createContext<PluginRegistry>(pluginRegistry(builtInPlugins));
+
+export const OptionsContext = createContext<UIOptions>({});
+
+export const CacheContext = createContext<Map<string | number, unknown>>(new Map());