@pdfme/ui 1.0.0-beta.1

package/src/components/Designer/index.tsx

@@ -0,0 +1,283 @@
+import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
+import { DesignerReactProps, Template, SchemaForUI } from '@pdfme/common';
+import Sidebar from './Sidebar';
+import Main from './Main';
+import { ZOOM, RULER_HEIGHT } from '../../constants';
+import { I18nContext } from '../../contexts';
+import {
+  uuid,
+  set,
+  arrayMove,
+  cloneDeep,
+  initShortCuts,
+  destroyShortCuts,
+  templateSchemas2SchemasList,
+  fmtTemplate,
+  getInitialSchema,
+  getSampleByType,
+  getKeepRatioHeightByWidth,
+  getUniqSchemaKey,
+  moveCommandToChangeSchemasArg,
+} from '../../helper';
+import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
+import Root from '../Root';
+import Error from '../Error';
+
+const TemplateEditor = ({
+  template,
+  size,
+  onSaveTemplate,
+  onChangeTemplate,
+}: DesignerReactProps & { onChangeTemplate: (t: Template) => void }) => {
+  const copiedSchemas = useRef<SchemaForUI[] | null>(null);
+  const past = useRef<SchemaForUI[][]>([]);
+  const future = useRef<SchemaForUI[][]>([]);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const mainRef = useRef<HTMLDivElement>(null);
+  const paperRefs = useRef<HTMLDivElement[]>([]);
+
+  const i18n = useContext(I18nContext);
+
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
+    template,
+    size,
+    offset: RULER_HEIGHT,
+  });
+
+  const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
+  const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
+  const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
+  const [pageCursor, setPageCursor] = useState(0);
+
+  const onEdit = (targets: HTMLElement[]) => {
+    setActiveElements(targets);
+    setHoveringSchemaId(null);
+  };
+
+  const onEditEnd = () => {
+    setActiveElements([]);
+    setHoveringSchemaId(null);
+  };
+
+  useScrollPageCursor({
+    rootRef,
+    pageSizes,
+    scale,
+    pageCursor,
+    onChangePageCursor: (p) => {
+      setPageCursor(p);
+      onEditEnd();
+    },
+  });
+
+  const modifiedTemplate = fmtTemplate(template, schemasList);
+
+  const commitSchemas = useCallback(
+    (newSchemas: SchemaForUI[]) => {
+      future.current = [];
+      past.current.push(cloneDeep(schemasList[pageCursor]));
+      const _schemasList = cloneDeep(schemasList);
+      _schemasList[pageCursor] = newSchemas;
+      setSchemasList(_schemasList);
+      onChangeTemplate(fmtTemplate(template, _schemasList));
+    },
+    [template, schemasList, pageCursor, onChangeTemplate]
+  );
+
+  const removeSchemas = useCallback(
+    (ids: string[]) => {
+      commitSchemas(schemasList[pageCursor].filter((schema) => !ids.includes(schema.id)));
+      onEditEnd();
+    },
+    [schemasList, pageCursor, commitSchemas]
+  );
+
+  const changeSchemas = useCallback(
+    (objs: { key: string; value: string | number; schemaId: string }[]) => {
+      const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
+        const tgt = acc.find((s) => s.id === schemaId)!;
+        // Assign to reference
+        set(tgt, key, value);
+        if (key === 'type') {
+          // set default value, text or barcode
+          set(tgt, 'data', value === 'text' ? 'text' : getSampleByType(String(value)));
+          // For barcodes, adjust the height to get the correct ratio.
+          if (value !== 'text' && value !== 'image') {
+            set(tgt, 'height', getKeepRatioHeightByWidth(String(value), tgt.width));
+          }
+        }
+
+        return acc;
+      }, cloneDeep(schemasList[pageCursor]));
+      commitSchemas(newSchemas);
+    },
+    [commitSchemas, pageCursor, schemasList]
+  );
+
+  const initEvents = useCallback(() => {
+    const getActiveSchemas = () => {
+      const ids = activeElements.map((ae) => ae.id);
+
+      return schemasList[pageCursor].filter((s) => ids.includes(s.id));
+    };
+    const timeTavel = (mode: 'undo' | 'redo') => {
+      const isUndo = mode === 'undo';
+      if ((isUndo ? past : future).current.length <= 0) return;
+      (isUndo ? future : past).current.push(cloneDeep(schemasList[pageCursor]));
+      const s = cloneDeep(schemasList);
+      s[pageCursor] = (isUndo ? past : future).current.pop()!;
+      setSchemasList(s);
+      onEditEnd();
+    };
+    initShortCuts({
+      move: (command, isShift) => {
+        const pageSize = pageSizes[pageCursor];
+        const activeSchemas = getActiveSchemas();
+        const arg = moveCommandToChangeSchemasArg({ command, activeSchemas, pageSize, isShift });
+        changeSchemas(arg);
+      },
+
+      copy: () => {
+        const activeSchemas = getActiveSchemas();
+        if (activeSchemas.length === 0) return;
+        copiedSchemas.current = activeSchemas;
+      },
+      paste: () => {
+        if (!copiedSchemas.current || copiedSchemas.current.length === 0) return;
+        const schema = schemasList[pageCursor];
+        const stackUniqSchemaKeys: string[] = [];
+        const pasteSchemas = copiedSchemas.current.map((cs) => {
+          const id = uuid();
+          const key = getUniqSchemaKey({ copiedSchemaKey: cs.key, schema, stackUniqSchemaKeys });
+          const { height, width, position: p } = cs;
+          const ps = pageSizes[pageCursor];
+          const position = {
+            x: p.x + 10 > ps.width - width ? ps.width - width : p.x + 10,
+            y: p.y + 10 > ps.height - height ? ps.height - height : p.y + 10,
+          };
+
+          return Object.assign(cloneDeep(cs), { id, key, position });
+        });
+        commitSchemas(schemasList[pageCursor].concat(pasteSchemas));
+        onEdit(pasteSchemas.map((s) => document.getElementById(s.id)!));
+        copiedSchemas.current = pasteSchemas;
+      },
+      redo: () => timeTavel('redo'),
+      undo: () => timeTavel('undo'),
+      save: () => onSaveTemplate && onSaveTemplate(modifiedTemplate),
+      remove: () => removeSchemas(getActiveSchemas().map((s) => s.id)),
+      esc: onEditEnd,
+    });
+  }, [
+    activeElements,
+    changeSchemas,
+    commitSchemas,
+    modifiedTemplate,
+    pageCursor,
+    pageSizes,
+    removeSchemas,
+    onSaveTemplate,
+    schemasList,
+  ]);
+
+  const destroyEvents = useCallback(() => {
+    destroyShortCuts();
+  }, []);
+
+  const updateTemplate = useCallback(async (newTemplate: Template) => {
+    const sl = await templateSchemas2SchemasList(newTemplate);
+    setSchemasList(sl);
+    onEditEnd();
+    setPageCursor(0);
+    if (rootRef.current?.scroll) {
+      rootRef.current.scroll({ top: 0, behavior: 'smooth' });
+    }
+  }, []);
+
+  useEffect(() => {
+    updateTemplate(template);
+  }, [template, updateTemplate]);
+
+  useEffect(() => {
+    initEvents();
+
+    return destroyEvents;
+  }, [initEvents, destroyEvents]);
+
+  const addSchema = () => {
+    const s = getInitialSchema();
+    const paper = paperRefs.current[pageCursor];
+    const rectTop = paper ? paper.getBoundingClientRect().top : 0;
+    s.position.y = rectTop > 0 ? 0 : pageSizes[pageCursor].height / 2;
+    s.data = 'text';
+    s.key = `${i18n('field')}${schemasList[pageCursor].length + 1}`;
+    commitSchemas(schemasList[pageCursor].concat(s));
+    setTimeout(() => onEdit([document.getElementById(s.id)!]));
+  };
+
+  const onSortEnd = (arg: { oldIndex: number; newIndex: number }) => {
+    const movedSchema = arrayMove(cloneDeep(schemasList[pageCursor]), arg.oldIndex, arg.newIndex);
+    commitSchemas(movedSchema);
+  };
+
+  const onChangeHoveringSchemaId = (id: string | null) => {
+    setHoveringSchemaId(id);
+  };
+
+  const getLastActiveSchema = () => {
+    if (activeElements.length === 0) return getInitialSchema();
+    const last = activeElements[activeElements.length - 1];
+
+    return schemasList[pageCursor].find((s) => s.id === last.id) || getInitialSchema();
+  };
+
+  const activeSchema = getLastActiveSchema();
+
+  if (error) {
+    return <Error size={size} error={error} />;
+  }
+
+  return (
+    <Root ref={rootRef} size={size} scale={scale}>
+      <Sidebar
+        hoveringSchemaId={hoveringSchemaId}
+        onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+        height={mainRef.current ? mainRef.current.scrollHeight : 0}
+        size={size}
+        pageSize={pageSizes[pageCursor]}
+        activeElement={activeElements[activeElements.length - 1]}
+        schemas={schemasList[pageCursor]}
+        activeSchema={activeSchema}
+        changeSchemas={changeSchemas}
+        onSortEnd={onSortEnd}
+        onEdit={(id: string) => {
+          const editingElem = document.getElementById(id);
+          if (editingElem) {
+            onEdit([editingElem]);
+          }
+        }}
+        onEditEnd={onEditEnd}
+        addSchema={addSchema}
+      />
+      <Main
+        ref={mainRef}
+        paperRefs={paperRefs}
+        hoveringSchemaId={hoveringSchemaId}
+        onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+        height={size.height - RULER_HEIGHT * ZOOM}
+        pageCursor={pageCursor}
+        scale={scale}
+        size={size}
+        pageSizes={pageSizes}
+        backgrounds={backgrounds}
+        activeElements={activeElements}
+        schemasList={schemasList}
+        changeSchemas={changeSchemas}
+        removeSchemas={removeSchemas}
+        onEdit={onEdit}
+      />
+    </Root>
+  );
+};
+
+export default TemplateEditor;

package/src/components/Divider.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Divider = () => (
+  <div style={{ marginTop: '0.5rem', marginBottom: '0.5rem', borderBottom: '1px solid #e5e5e5' }} />
+);
+
+export default Divider;

package/src/components/Error.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { Size } from '@pdfme/common';
+import { I18nContext } from '../contexts';
+
+const Error = ({ size, error }: { size: Size; error: Error }) => {
+  const i18n = useContext(I18nContext);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        background: 'rgb(74, 74, 74)',
+        overflowY: 'auto',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...size,
+      }}
+    >
+      <p style={{ color: '#fff', textAlign: 'center' }}>
+        <span style={{ fontSize: 'large', fontWeight: 'bold', borderBottom: '1px solid #fff' }}>
+          ERROR: {i18n('errorOccurred')}
+        </span>
+        <br />
+        <span style={{ fontSize: 'small' }}>*{error.message}</span>
+      </p>
+    </div>
+  );
+};
+
+export default Error;

package/src/components/Paper.tsx

@@ -0,0 +1,77 @@
+import React, { MutableRefObject, ReactNode, useContext } from 'react';
+import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
+import { FontContext } from '../contexts';
+import { ZOOM, RULER_HEIGHT } from '../constants';
+
+const Paper = (porps: {
+  paperRefs?: MutableRefObject<HTMLDivElement[]>;
+  scale: number;
+  size: Size;
+  schemasList: SchemaForUI[][];
+  pageSizes: Size[];
+  backgrounds: string[];
+  renderPaper?: (arg: { index: number; paperSize: Size }) => ReactNode;
+  renderSchema: (arg: { index: number; schema: SchemaForUI }) => ReactNode;
+}) => {
+  const { paperRefs, scale, size, schemasList, pageSizes, backgrounds, renderPaper, renderSchema } =
+    porps;
+  const font = useContext(FontContext);
+
+  if (pageSizes.length !== backgrounds.length || pageSizes.length !== schemasList.length) {
+    return null;
+  }
+
+  const topPageWidth = pageSizes[0].width;
+
+  return (
+    <div
+      style={{
+        transform: `scale(${scale})`,
+        transformOrigin: size.width <= topPageWidth * ZOOM * scale ? `left top` : `center top`,
+      }}
+    >
+      {backgrounds.map((background, paperIndex) => {
+        const pageSize = pageSizes[paperIndex];
+        const paperSize = { width: pageSize.width * ZOOM, height: pageSize.height * ZOOM };
+
+        return (
+          <div
+            key={paperIndex + JSON.stringify(paperSize)}
+            ref={(e) => {
+              if (e && paperRefs) {
+                paperRefs.current[paperIndex] = e;
+              }
+            }}
+            style={{
+              fontFamily: `'${getFallbackFontName(font)}'`,
+              margin: `${RULER_HEIGHT * scale}px auto`,
+              position: 'relative',
+              backgroundImage: `url(${background})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundRepeat: 'no-repeat',
+              ...paperSize,
+            }}
+          >
+            {renderPaper && renderPaper({ paperSize, index: paperIndex })}
+            {schemasList[paperIndex].map((schema, schemaIndex) => {
+              return (
+                <div key={schema.id}>
+                  {renderSchema({
+                    schema,
+                    index:
+                      paperIndex === 0
+                        ? schemaIndex
+                        : schemaIndex + schemasList[paperIndex - 1].length,
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Paper;

package/src/components/Preview/Pager/Page.tsx

@@ -0,0 +1,85 @@
+import React, { useContext } from 'react';
+import left from '../../../assets/icons/left.svg';
+import right from '../../../assets/icons/right.svg';
+import doubleLeft from '../../../assets/icons/double-left.svg';
+import doubleRight from '../../../assets/icons/double-right.svg';
+import { I18nContext } from '../../../contexts';
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+type Props = {
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+};
+
+const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
+  const i18n = useContext(I18nContext);
+
+  if (pageNum <= 1) return <></>;
+
+  return (
+    <div
+      style={{
+        position: 'sticky',
+        top: '90%',
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#777777e6',
+          borderRadius: 3,
+          padding: '0.5rem',
+        }}
+      >
+        <button
+          style={{ paddingLeft: '0.5rem', ...btnStyle }}
+          disabled={pageCursor <= 0}
+          onClick={() => setPageCursor(0)}
+        >
+          <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
+        </button>
+        <button
+          style={{ paddingLeft: '0.5rem', ...btnStyle }}
+          disabled={pageCursor <= 0}
+          onClick={() => setPageCursor(pageCursor - 1)}
+        >
+          <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+        </button>
+        <strong style={{ color: 'white' }}>
+          {pageCursor + 1}/{pageNum}
+        </strong>
+        <button
+          style={{ paddingRight: '0.5rem', ...btnStyle }}
+          disabled={pageCursor + 1 >= pageNum}
+          onClick={() => setPageCursor(pageCursor + 1)}
+        >
+          <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+        </button>
+        <button
+          style={{ paddingRight: '0.5rem', ...btnStyle }}
+          disabled={pageCursor + 1 >= pageNum}
+          onClick={() => setPageCursor(pageNum - 1)}
+        >
+          <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pager;

package/src/components/Preview/Pager/Unit.tsx

@@ -0,0 +1,87 @@
+import React, { useContext } from 'react';
+import left from '../../../assets/icons/left.svg';
+import right from '../../../assets/icons/right.svg';
+import doubleLeft from '../../../assets/icons/double-left.svg';
+import doubleRight from '../../../assets/icons/double-right.svg';
+import { I18nContext } from '../../../contexts';
+
+const buttonWrapStyle: React.CSSProperties = {
+  position: 'sticky',
+  top: '45%',
+  zIndex: 1,
+  backgroundColor: '#777777bd',
+  borderRadius: 3,
+  padding: '0.5rem',
+  display: 'flex',
+  alignItems: 'center',
+  width: 100,
+};
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+type Props = {
+  unitCursor: number;
+  unitNum: number;
+  setUnitCursor: (page: number) => void;
+};
+
+const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
+  const i18n = useContext(I18nContext);
+
+  if (unitNum <= 1) return <></>;
+
+  return (
+    <>
+      {unitCursor > 0 && (
+        <div style={{ marginLeft: '1rem', ...buttonWrapStyle }}>
+          <button
+            style={{ paddingLeft: '0.5rem', ...btnStyle }}
+            disabled={unitCursor <= 0}
+            onClick={() => setUnitCursor(0)}
+          >
+            <img src={doubleLeft} alt={i18n('goToFirst')} style={{ width: 20 }} />
+          </button>
+          <button
+            style={{ paddingLeft: '0.5rem', ...btnStyle }}
+            disabled={unitCursor <= 0}
+            onClick={() => setUnitCursor(unitCursor - 1)}
+          >
+            <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+          </button>
+          <strong style={{ color: 'white' }}>
+            {unitCursor + 1}/{unitNum}
+          </strong>
+        </div>
+      )}
+      {unitCursor + 1 < unitNum && (
+        <div style={{ marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}>
+          <strong style={{ color: 'white' }}>
+            {unitCursor + 1}/{unitNum}
+          </strong>
+          <button
+            style={{ paddingRight: '0.5rem', ...btnStyle }}
+            disabled={unitCursor + 1 >= unitNum}
+            onClick={() => setUnitCursor(unitCursor + 1)}
+          >
+            <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+          </button>
+          <button
+            style={{ paddingRight: '0.5rem', ...btnStyle }}
+            disabled={unitCursor + 1 >= unitNum}
+            onClick={() => setUnitCursor(unitNum - 1)}
+          >
+            <img src={doubleRight} alt={i18n('goToFirst')} style={{ width: 20 }} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default UnitPager;

package/src/components/Preview/index.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
+import { ZOOM, RULER_HEIGHT } from '../../constants';
+import PagePager from './Pager/Page';
+import UnitPager from './Pager/Unit';
+import Root from '../Root';
+import Error from '../Error';
+import Paper from '../Paper';
+import SchemaUI from '../Schemas/SchemaUI';
+import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
+import { templateSchemas2SchemasList } from '../../helper';
+
+const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
+    template,
+    size,
+    offset: RULER_HEIGHT,
+  });
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const [unitCursor, setUnitCursor] = useState(0);
+  const [pageCursor, setPageCursor] = useState(0);
+  const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
+
+  const init = useCallback(async () => {
+    const sl = await templateSchemas2SchemasList(template);
+    setSchemasList(sl);
+  }, [template]);
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  useScrollPageCursor({
+    rootRef,
+    pageSizes,
+    scale,
+    pageCursor,
+    onChangePageCursor: (p) => setPageCursor(p),
+  });
+
+  const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
+    onChangeInput && onChangeInput({ index: unitCursor, key, value });
+
+  const editable = Boolean(onChangeInput);
+  const input = inputs[unitCursor];
+
+  if (error) {
+    return <Error size={size} error={error} />;
+  }
+
+  return (
+    <Root ref={rootRef} size={size} scale={scale}>
+      <div
+        style={{
+          height: pageSizes.reduce((acc, cur) => acc + cur.height * ZOOM, 0),
+          width: '100%',
+          position: 'absolute',
+        }}
+      >
+        <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
+        <PagePager
+          pageCursor={pageCursor}
+          pageNum={schemasList.length}
+          setPageCursor={(p) => {
+            if (!rootRef.current) return;
+            rootRef.current.scrollTop = pageSizes
+              .slice(0, p)
+              .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT) * scale, 0);
+            setPageCursor(p);
+          }}
+        />
+      </div>
+      <Paper
+        scale={scale}
+        size={size}
+        schemasList={schemasList}
+        pageSizes={pageSizes}
+        backgrounds={backgrounds}
+        renderSchema={({ schema, index }) => {
+          const { key } = schema;
+          const data = input[key] ? input[key] : '';
+
+          return (
+            <SchemaUI
+              key={key}
+              schema={Object.assign(schema, { key, id: key, data })}
+              editable={editable}
+              placeholder={template.sampledata ? template.sampledata[0][key] : ''}
+              tabIndex={index + 100}
+              onChange={(value) => handleChangeInput({ key, value })}
+              border={editable ? '1px dashed #4af' : 'transparent'}
+            />
+          );
+        }}
+      />
+    </Root>
+  );
+};
+
+export default Preview;