@pdfme/ui 1.0.0-beta.1 → 1.0.0-beta.10

package/src/components/Schemas/BarcodeSchema.tsx

@@ -13,8 +13,6 @@ import qrcode from '../../assets/barcodeExamples/qrcode.png';
 import upca from '../../assets/barcodeExamples/upca.png';
 import upce from '../../assets/barcodeExamples/upce.png';
 
-type Props = SchemaUIProps & { schema: BarcodeSchema };
-
 const barcodeExampleImageObj: { [key: string]: string } = {
   qrcode,
   japanpost,
@@ -43,18 +41,18 @@ const SampleBarcode = ({ schema }: { schema: BarcodeSchema }) => (
 
 const ErrorBarcode = () => (
   <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-    <p
+    <span
       style={{
         color: 'white',
         background: 'red',
         padding: '0.25rem',
         fontSize: '12pt',
         fontWeight: 'bold',
-        borderRadius: 3,
+        borderRadius: 2,
       }}
     >
       ERROR
-    </p>
+    </span>
   </div>
 );
 
@@ -65,12 +63,30 @@ const ErrorOrSampleBarcode = ({ schema, value }: { schema: BarcodeSchema; value:
     <ErrorBarcode />
   );
 
+type Props = SchemaUIProps & { schema: BarcodeSchema };
+
 const BarcodeSchemaUI = (
   { schema, editable, placeholder, tabIndex, onChange }: Props,
   ref: Ref<HTMLInputElement>
 ) => {
   const value = schema.data;
 
+  const style: React.CSSProperties = {
+    textAlign: 'center',
+    position: 'absolute',
+    zIndex: 2,
+    fontSize: '1rem',
+    color: '#000',
+    height: Number(schema.height) * ZOOM,
+    width: Number(schema.width) * ZOOM,
+    background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'auto',
+  };
+
   return (
     <div
       style={{
@@ -79,30 +95,30 @@ const BarcodeSchemaUI = (
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        fontFamily: "'Open Sans', sans-serif",
       }}
     >
-      <input
-        ref={ref}
-        disabled={!editable}
-        tabIndex={tabIndex}
-        placeholder={placeholder}
-        style={{
-          textAlign: 'center',
-          position: 'absolute',
-          zIndex: 2,
-          fontSize: 'inherit',
-          height: Number(schema.height) * ZOOM,
-          width: Number(schema.width) * ZOOM,
-          background: editable || value ? 'rgba(255, 255, 255, 0.8)' : 'none',
-          border: 'none',
-        }}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
+      {editable ? (
+        <input
+          ref={ref}
+          tabIndex={tabIndex}
+          placeholder={placeholder}
+          style={style}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      ) : (
+        <div style={style}>
+          <span>{value}</span>
+        </div>
+      )}
+
       {value ? (
         <ErrorOrSampleBarcode value={value} schema={schema} />
-      ) : (
+      ) : editable ? (
         <SampleBarcode schema={schema} />
+      ) : (
+        <ErrorBarcode />
       )}
     </div>
   );

package/src/components/Schemas/ImageSchema.tsx

@@ -1,81 +1,86 @@
-import React, { forwardRef, ChangeEvent, useContext, Ref } from 'react';
+import React, { useState, forwardRef, ChangeEvent, useContext, Ref } from 'react';
 import { ImageSchema } from '@pdfme/common';
 import { SchemaUIProps } from './SchemaUI';
 import { readFiles } from '../../helper';
-import { I18nContext } from '../../contexts';
 import { ZOOM } from '../../constants';
-import imageExample from '../../assets/imageExample.png';
+import closeIcon from '../../assets/icons/close.svg';
 
 type Props = SchemaUIProps & { schema: ImageSchema };
 
-const FilledImage = ({ editable, tabIndex, schema, onChange }: Omit<Props, 'placeholder'>) => (
-  <div style={{ margin: '0 auto' }}>
-    {editable && (
-      <button
-        tabIndex={tabIndex}
+const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
+  const { editable, placeholder, tabIndex, schema, onChange } = props;
+  const [fileName, setFileName] = useState<string>('');
+  const hasData = Boolean(schema.data);
+
+  const size: React.CSSProperties = { width: schema.width * ZOOM, height: schema.height * ZOOM };
+
+  return (
+    <>
+      <div
         style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
+          ...size,
+          opacity: hasData ? 1 : 0.5,
+          backgroundImage: hasData || !editable ? 'none' : `url(${placeholder})`,
+          backgroundSize: `${size.width}px ${size.height}px`,
+        }}
+        onClick={(e) => {
+          if (editable) {
+            e.stopPropagation();
+          }
         }}
-        onClick={() => onChange('')}
       >
-        x
-      </button>
-    )}
-    <img
-      style={{ width: schema.width * ZOOM, height: schema.height * ZOOM, borderRadius: 0 }}
-      src={schema.data}
-    />
-  </div>
-);
-
-const BlankImage = (props: Props & { inputRef: Ref<HTMLInputElement> }) => {
-  const { editable, placeholder, tabIndex, schema, onChange, inputRef } = props;
-  const i18n = useContext(I18nContext);
-
-  return editable ? (
-    <label
-      style={{
-        height: Number(schema.height) * ZOOM,
-        width: Number(schema.width) * ZOOM,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <input
-        ref={inputRef}
-        tabIndex={tabIndex}
-        style={{ display: 'none' }}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          const { files } = event.target;
-          readFiles(files, 'dataURL').then((result) => onChange(result as string));
+        {hasData && <img style={{ ...size, borderRadius: 0 }} src={schema.data} />}
+        {hasData && editable && (
+          <button
+            tabIndex={tabIndex}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              zIndex: 1,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              color: '#333',
+              background: '#f2f2f2',
+              borderRadius: 2,
+              border: '1px solid #767676',
+              cursor: 'pointer',
+              height: 20,
+              width: 20,
+            }}
+            aria-label="close"
+            onClick={() => {
+              setFileName('');
+              onChange('');
+            }}
+          >
+            <img src={closeIcon} alt="Close icon" width={10} />
+          </button>
+        )}
+      </div>
+      <label
+        style={{
+          display: editable ? 'flex' : 'none',
+          position: 'absolute',
+          top: '50%',
+          width: '100%',
+          cursor: 'pointer',
         }}
-        type="file"
-        accept="image/jpeg, image/png"
-      />
-      <span style={{ zIndex: 1 }}>{i18n('select')}</span>
-    </label>
-  ) : (
-    <div
-      style={{
-        position: 'absolute',
-        opacity: 0.5,
-        top: 0,
-        left: 0,
-        width: schema.width * ZOOM,
-        height: schema.height * ZOOM,
-        backgroundImage: `url(${placeholder || imageExample})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-      }}
-    ></div>
+      >
+        <input
+          ref={ref}
+          tabIndex={tabIndex}
+          value={fileName}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            readFiles(event.target.files, 'dataURL').then((result) => onChange(result as string))
+          }
+          type="file"
+          accept="image/jpeg, image/png"
+        />
+      </label>
+    </>
   );
 };
 
-const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) =>
-  props.schema.data ? <FilledImage {...props} /> : <BlankImage {...props} inputRef={ref} />;
-
 export default forwardRef<HTMLInputElement, Props>(ImageSchemaUI);

package/src/components/Schemas/TextSchema.tsx

@@ -24,13 +24,12 @@ const TextSchemaUI = (
     textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
     fontSize: `${schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
     letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-    fontFeatureSettings: `"palt"`,
     lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
     whiteSpace: 'pre-line',
     wordBreak: 'break-all',
     background: 'transparent',
     border: 'none',
-    color: schema.fontColor ?? DEFAULT_FONT_COLOR,
+    color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
   };
 
   return editable ? (

package/src/constants.ts

@@ -7,3 +7,5 @@ export const ZOOM = 3.7795275591;
 export const SELECTABLE_CLASSNAME = 'selectable';
 
 export const RULER_HEIGHT = 30;
+
+export const SIDEBAR_WIDTH = 300;

package/src/helper.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry';
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
 GlobalWorkerOptions.workerSrc = PDFJSWorker;
 import hotkeys from 'hotkeys-js';
 import {
@@ -61,15 +61,6 @@ export const round = (number: number, precision: number) => {
   return shift(Math.round(shift(number, precision, false)), precision, true);
 };
 
-export const arrayMove = <T>(array: T[], from: number, to: number): T[] => {
-  array = array.slice();
-  const startIndex = to < 0 ? array.length + to : to;
-  const [item] = array.splice(from, 1);
-  array.splice(startIndex, 0, item);
-
-  return array;
-};
-
 export const cloneDeep = <T>(value: T): T => JSON.parse(JSON.stringify(value));
 
 export const flatten = <T>(arr: T[][]): T[] => ([] as T[]).concat(...arr);
@@ -96,6 +87,8 @@ const undoWin = 'ctrl+z';
 const undoMac = 'command+z';
 const saveWin = 'ctrl+s';
 const saveMac = 'command+s';
+const selectAllWin = 'ctrl+a';
+const selectAllMac = 'command+a';
 
 const keys = [
   up,
@@ -119,6 +112,8 @@ const keys = [
   undoMac,
   saveWin,
   saveMac,
+  selectAllWin,
+  selectAllMac,
 ];
 
 export const initShortCuts = (arg: {
@@ -130,6 +125,7 @@ export const initShortCuts = (arg: {
   redo: () => void;
   undo: () => void;
   save: () => void;
+  selectAll: () => void;
 }) => {
   hotkeys(keys.join(), (e, handler) => {
     switch (handler.shortcut) {
@@ -181,6 +177,11 @@ export const initShortCuts = (arg: {
         e.preventDefault();
         arg.save();
         break;
+      case selectAllWin:
+      case selectAllMac:
+        e.preventDefault();
+        arg.selectAll();
+        break;
       default:
         break;
     }
@@ -225,33 +226,6 @@ export const readFiles = (files: FileList | null, type: 'text' | 'dataURL' | 'ar
   });
 };
 
-const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =>
-  new Array(pageNum).fill('').reduce((acc, _, i) => {
-    acc.push(
-      template.schemas[i]
-        ? Object.entries(template.schemas[i])
-            .sort((a, b) => {
-              const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
-              const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
-
-              return aIndex > bIndex ? 1 : -1;
-            })
-            .map((e) => {
-              const [key, value] = e;
-              const data = template.sampledata ? template.sampledata[0][key] : '';
-
-              return Object.assign(value, {
-                key,
-                data,
-                id: uuid(),
-              });
-            })
-        : []
-    );
-
-    return acc;
-  }, [] as SchemaForUI[][]);
-
 const pt2mm = (pt: number) => {
   // https://www.ddc.co.jp/words/archives/20090701114500.html
   const mmRatio = 0.3527;
@@ -316,6 +290,33 @@ export const b64toBlob = (base64: string) => {
   return new Blob([uniy8Array.buffer], { type: mimeType });
 };
 
+const sortSchemasList = (template: Template, pageNum: number): SchemaForUI[][] =>
+  new Array(pageNum).fill('').reduce((acc, _, i) => {
+    acc.push(
+      template.schemas[i]
+        ? Object.entries(template.schemas[i])
+            .sort((a, b) => {
+              const aIndex = (template.columns ?? []).findIndex((c) => c === a[0]);
+              const bIndex = (template.columns ?? []).findIndex((c) => c === b[0]);
+
+              return aIndex > bIndex ? 1 : -1;
+            })
+            .map((e) => {
+              const [key, value] = e;
+              const data = template.sampledata ? template.sampledata[0][key] : '';
+
+              return Object.assign(value, {
+                key,
+                data,
+                id: uuid(),
+              });
+            })
+        : []
+    );
+
+    return acc;
+  }, [] as SchemaForUI[][]);
+
 export const templateSchemas2SchemasList = async (_template: Template) => {
   const template = cloneDeep(_template);
   const sortedSchemasList = sortSchemasList(template, template.schemas.length);
@@ -351,6 +352,7 @@ export const templateSchemas2SchemasList = async (_template: Template) => {
 
 export const fmtTemplate = (template: Template, schemasList: SchemaForUI[][]): Template => {
   const schemaAddedTemplate: Template = {
+    ...template,
     schemas: cloneDeep(schemasList).map((schema) =>
       schema.reduce((acc, cur) => {
         const k = cur.key;
@@ -400,6 +402,9 @@ export const getInitialSchema = (): SchemaForUI => ({
 
 export const getSampleByType = (type: string) => {
   const defaultValue: { [key: string]: string } = {
+    text: 'text',
+    image:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAALuAQMAAADL0wGJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURbzAw+rv8fKruy0AAAPoSURBVHja7dwxbtwwEEBRCkKwRQodYftcYk+ROkcJz5NTsEuZK/AIKlIQAUEnke0VqQ0pA5zxWvFnZcD2s0CNuENxPOZBc0QDDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PD/+P8bkxvnTzzjTG0M2b5rh08rHNT518aPOnTt63+aGTd23edPJ2h//ax+/oO6Gzx6c78+cuPu7x01vmwx5/6uLnO/PjO+b/rGifvtWH3VnT9vmh/e3eqx/bc9d79af2YwEPDw8P/6r8r1GVt5VcUoZPtXxGhp9rGYEM72vbEBne1hJ5Gb6ayIvwqZppi/CxmgqL8KGaTIrwc3WDfATeV/ffIryr7r+PwNvq/vsIfH17D5/qbw/gb/mLKp/OqnycFPj14yqcJPm4vfp5VJ0cP6jyzqjy9rr2q/Dr4qzBp3V5E1wxp/V3rl8LXn32qF6fAY31Psv2NXi/5lQaH+Vuzak0eLsmPRppVPa3FPiU3QiFFDZmD4FCAh6yxV+Bn7O9isLmx2d/TGHr5rI7obDxtFkcKWyb89M2+U1/sX7Kv7Io8gaxFy5l2D/faRk++3x6PgsalV52+fwUW4j/+eGhDPuneyH/otHmp9jyfHHMLM6n4phZnI/FObA4H4qDWnF+Lo46xXlflG+I864o3xDnbVG+Ic6X9RXSfCrrK6T5WBZASPOhrFCQ5ufyjF+a92XdkjTvyrolad6WdUvS/KawSI7/sQn7JfDl+O+bsF8CX44fN2FvHnNnIT4Nm7BfAl+ON5uwXwJfjA/LCuk2BXvCvN0U7InxflmAtxV1gvx0U2N3luPtdZOlwj/FoR5vbuq85Pi48F6LD0scOk3+sq1cleP9ohlNfkpq/N9pGaMuH7T4ZVqGWYt/nBavyxstftblfaVIWJU/y72yODCfzJH5oMvPh+adLm+PzCdzZD5U/61ClT9Lnvyo8e7QvFHlE3ydj0zOu5ucickhcpgcJofJedUVk8j5b/nGgIeHh4d/I3x/RwLlhgfNH3DavSwGXf7YjT76uqCEQ/P37p9z7uKVmwspd17S7hul3PXK6fbsmnvWhO6GZlMnn3ri8gXN5GzHnX0B35ydj91814CHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHl+d/A9cKjmiL040TAAAAAElFTkSuQmCC',
     qrcode: 'https://pdfme.com/',
     japanpost: '6540123789-A-K-Z',
     ean13: '2112345678900',
@@ -417,6 +422,7 @@ export const getSampleByType = (type: string) => {
 
 export const getKeepRatioHeightByWidth = (type: string, width: number) => {
   const raito: { [key: string]: number } = {
+    image: 1,
     qrcode: 1,
     japanpost: 0.09,
     ean13: 0.4,
@@ -499,7 +505,7 @@ export const moveCommandToChangeSchemasArg = (props: {
         break;
     }
 
-    return value;
+    return value > 0 ? value : 0;
   };
 
   return activeSchemas.map((as) => {

package/src/hooks.ts

@@ -105,3 +105,14 @@ export const useScrollPageCursor = ({
     };
   }, [rootRef, onScroll]);
 };
+
+export const useMountStatus = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsMounted(true), 500);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return isMounted;
+};

package/src/i18n.ts

@@ -4,6 +4,7 @@ import { DEFAULT_LANG } from './constants';
 type DictEn = typeof dictEn;
 
 const dictEn = {
+  cancel: 'Cancel',
   field: 'field',
   fieldName: 'Name',
   require: 'Required',
@@ -20,18 +21,20 @@ const dictEn = {
   addNewField: 'Add new field',
   editField: 'Edit Field',
   type: 'Type',
-  previewWarnMsg: 'Preview is not available on iOS devices.',
-  previewErrMsg:
-    'An error occurred during the PDF creation process. (Characters that are not in the Helvetica font are not available)',
   goToFirst: 'Go to first',
   goToPrevious: 'Back',
   goToNext: 'Next',
   goToEnd: 'Go to end',
   select: 'Select',
-  errorOccurred: 'An error occurred.',
+  errorOccurred: 'An error occurred',
+  errorBulkUpdateFieldName:
+    'Cannot commit the change because the number of items has been changed.',
+  commitBulkUpdateFieldName: 'Commit Changes',
+  bulkUpdateFieldName: 'Bulk update field names',
 };
 
 const dictJa: { [key in keyof DictEn]: string } = {
+  cancel: 'キャンセル',
   field: '入力項目',
   fieldName: '項目名',
   require: '必須',
@@ -48,15 +51,15 @@ const dictJa: { [key in keyof DictEn]: string } = {
   addNewField: '入力項目を追加',
   editField: '入力項目を編集',
   type: 'タイプ',
-  previewWarnMsg: 'iOS端末ではプレビューができません。',
-  previewErrMsg:
-    'PDF作成処理でエラーが発生しました。お手数ですがコンタクトからお問い合わせください。',
   goToFirst: '最初に戻る',
   goToPrevious: '1つ戻る',
   goToNext: '1つ進む',
   goToEnd: '最後に進む',
   select: '選択',
   errorOccurred: 'エラーが発生しました',
+  errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
+  commitBulkUpdateFieldName: '変更を反映',
+  bulkUpdateFieldName: '項目名を一括変更',
 };
 
 const i18n = (lang: Lang, key: keyof DictEn) => (lang === DEFAULT_LANG ? dictEn[key] : dictJa[key]);

package/src/index.ts

@@ -1,20 +1,18 @@
 import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
-import {
-  BLANK_PDF,
+
+export { Designer, Viewer, Form };
+
+export type {
   Lang,
   Size,
   Alignment,
   SchemaType,
-  schemaTypes,
   BarCodeType,
   TextSchema,
-  isTextSchema,
   ImageSchema,
-  isImageSchema,
   BarcodeSchema,
-  isBarcodeSchema,
   Schema,
   SchemaForUI,
   Font,
@@ -26,52 +24,18 @@ import {
   UIOptions,
   UIProps,
   PreviewProps,
-  PreviewReactProps,
   DesignerProps,
-  DesignerReactProps,
-  checkTemplate,
-  checkUIProps,
-  checkPreviewProps,
-  checkDesignerProps,
-  checkGenerateProps,
-  validateBarcodeInput,
 } from '@pdfme/common';
 
 export {
-  Designer,
-  Viewer,
-  Form,
   BLANK_PDF,
-  Lang,
-  Size,
-  Alignment,
-  SchemaType,
-  schemaTypes,
-  BarCodeType,
-  TextSchema,
   isTextSchema,
-  ImageSchema,
   isImageSchema,
-  BarcodeSchema,
   isBarcodeSchema,
-  Schema,
-  SchemaForUI,
-  Font,
-  BasePdf,
-  Template,
-  CommonProps,
-  GeneratorOptions,
-  GenerateProps,
-  UIOptions,
-  UIProps,
-  PreviewProps,
-  PreviewReactProps,
-  DesignerProps,
-  DesignerReactProps,
   checkTemplate,
   checkUIProps,
   checkPreviewProps,
   checkDesignerProps,
   checkGenerateProps,
   validateBarcodeInput,
-};
+} from '@pdfme/common';

package/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
     "noImplicitAny": true,
-    "target": "es5",
+    "target": "ES2015",
     "jsx": "react",
     "esModuleInterop": true,
+    "isolatedModules": true,
     "declaration": true,
     "declarationDir": "dist/types",
     "module": "ES2015",

package/webpack.config.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const pkg = require('./package.json');
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -28,32 +27,14 @@ const config = {
       banner: BANNER,
       entryOnly: true,
     }),
-    new HtmlWebpackPlugin({
-      template: './public/Designer.html',
-      filename: 'Designer.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: './public/Viewer.html',
-      filename: 'Viewer.html',
-    }),
-    new HtmlWebpackPlugin({
-      template: './public/Form.html',
-      filename: 'Form.html',
-    }),
   ],
   devtool: 'source-map',
-  devServer: {
-    historyApiFallback: false,
-    host: '0.0.0.0',
-  },
   entry: './src/index.ts',
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: `${pkg.name}.js`,
-    libraryTarget: 'umd',
+    filename: 'index.js',
     globalObject: 'this',
     library: {
-      name: pkg.name,
       type: 'umd',
     },
   },