@pdfme/ui 1.0.0-beta.3 → 1.0.0-beta.8

package/src/components/Designer/Sidebar/ListView.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { I18nContext } from '../../../contexts';
 import Divider from '../../Divider';
 import dragIcon from '../../../assets/icons/drag.svg';
@@ -73,6 +73,7 @@ const SortableItem = SortableElement(
             style={{
               marginRight: '1rem',
               width: 180,
+              color: '#333',
               overflow: 'hidden',
               whiteSpace: 'nowrap',
               textOverflow: 'ellipsis',
@@ -101,23 +102,29 @@ const SortableItem = SortableElement(
 
 const SortableList = SortableContainer(
   (props: {
+    scale: number;
     schemas: SchemaForUI[];
     onEdit: (id: string) => void;
     size: Size;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;
   }) => {
-    const { schemas, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+    const { scale, schemas, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
     const i18n = useContext(I18nContext);
 
     return (
-      <div style={{ maxHeight: size.height - RULER_HEIGHT * ZOOM - 125, overflowY: 'auto' }}>
+      <div style={{ height: size.height - RULER_HEIGHT * ZOOM - 125, overflowY: 'auto' }}>
         {schemas.length > 0 ? (
           schemas.map((s, i) => (
             <div
               key={s.id}
               style={{
                 border: `1px solid ${s.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
+                // Reasons for adapting transform
+                // https://github.com/clauderic/react-sortable-hoc/issues/386
+                width: SIDEBAR_WIDTH * scale,
+                transform: `scale(${1 - scale + 1})`,
+                transformOrigin: 'top left',
               }}
               onMouseEnter={() => onChangeHoveringSchemaId(s.id)}
               onMouseLeave={() => onChangeHoveringSchemaId(null)}
@@ -142,38 +149,53 @@ const SortableList = SortableContainer(
 const ListView = (
   props: Pick<
     SidebarProps,
-    'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
+    | 'scale'
+    | 'schemas'
+    | 'onSortEnd'
+    | 'onEdit'
+    | 'size'
+    | 'hoveringSchemaId'
+    | 'onChangeHoveringSchemaId'
   >
 ) => {
-  const { schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+  const { scale, schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId } =
+    props;
   const i18n = useContext(I18nContext);
+  const [sorting, setSorting] = useState(false);
 
   return (
-    <aside>
+    <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
         <p style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
           {i18n('fieldsList')}
         </p>
       </div>
       <Divider />
-      <SortableList
-        size={size}
-        hoveringSchemaId={hoveringSchemaId}
-        onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-        updateBeforeSortStart={(node: any) => {
-          if (node.node.style) {
-            node.node.style.zIndex = '9999';
-          }
-        }}
-        useDragHandle
-        axis="y"
-        lockAxis="y"
-        schemas={schemas}
-        onSortEnd={onSortEnd}
-        onEdit={onEdit}
-      />
-      <Divider />
-    </aside>
+      <div style={{ fontSize: '0.9rem' }}>
+        <SortableList
+          scale={scale}
+          size={size}
+          hoveringSchemaId={sorting ? null : hoveringSchemaId}
+          onChangeHoveringSchemaId={(arg) => !sorting && onChangeHoveringSchemaId(arg)}
+          updateBeforeSortStart={(node: any) => {
+            if (node.node.style) {
+              node.node.style.zIndex = '9999';
+            }
+          }}
+          useDragHandle
+          axis="y"
+          lockAxis="y"
+          schemas={schemas}
+          onSortStart={() => setSorting(true)}
+          onSortEnd={(arg) => {
+            setSorting(false);
+            onSortEnd(arg);
+          }}
+          onEdit={onEdit}
+        />
+        <Divider />
+      </div>
+    </div>
   );
 };
 

package/src/components/Designer/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { ZOOM, RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { I18nContext } from '../../../contexts';
 import backIcon from '../../../assets/icons/back.svg';
 import forwardIcon from '../../../assets/icons/forward.svg';
@@ -8,6 +8,7 @@ import ListView from './ListView';
 import DetailView from './DetailView';
 
 export type SidebarProps = {
+  scale: number;
   height: number;
   hoveringSchemaId: string | null;
   onChangeHoveringSchemaId: (id: string | null) => void;
@@ -28,12 +29,13 @@ const Sidebar = (props: SidebarProps) => {
 
   const i18n = useContext(I18nContext);
   const [open, setOpen] = useState(true);
-  const sidebarWidth = 300;
   const top = 0;
 
   return (
-    <div style={{ position: 'absolute', height, width: '100%' }}>
-      <div style={{ position: 'sticky', top, zIndex: 29 }}>
+    <div
+      style={{ position: 'absolute', right: 0, zIndex: 1, height, width: open ? SIDEBAR_WIDTH : 0 }}
+    >
+      <div style={{ position: 'sticky', top, zIndex: 1, fontSize: '1rem' }}>
         <button
           style={{
             position: 'absolute',
@@ -41,7 +43,7 @@ const Sidebar = (props: SidebarProps) => {
             right: '0.5rem',
             zIndex: 100,
             border: 'none',
-            borderRadius: 3,
+            borderRadius: 2,
             padding: '0.5rem',
             cursor: 'pointer',
             background: '#eee',
@@ -52,7 +54,7 @@ const Sidebar = (props: SidebarProps) => {
         </button>
         <div
           style={{
-            width: sidebarWidth,
+            width: SIDEBAR_WIDTH,
             height: size.height - RULER_HEIGHT * ZOOM,
             display: open ? 'block' : 'none',
             top,
@@ -85,7 +87,7 @@ const Sidebar = (props: SidebarProps) => {
                 color: '#fff',
                 background: '#18a0fb',
                 border: 'none',
-                borderRadius: 3,
+                borderRadius: 2,
                 cursor: 'pointer',
               }}
               onClick={addSchema}

package/src/components/Designer/index.tsx

@@ -99,11 +99,12 @@ const TemplateEditor = ({
         // Assign to reference
         set(tgt, key, value);
         if (key === 'type') {
+          const type = String(value);
           // set default value, text or barcode
-          set(tgt, 'data', value === 'text' ? 'text' : getSampleByType(String(value)));
+          set(tgt, 'data', getSampleByType(type));
           // For barcodes, adjust the height to get the correct ratio.
-          if (value !== 'text' && value !== 'image') {
-            set(tgt, 'height', getKeepRatioHeightByWidth(String(value), tgt.width));
+          if (value !== 'text') {
+            set(tgt, 'height', getKeepRatioHeightByWidth(type, tgt.width));
           }
         }
 
@@ -240,6 +241,7 @@ const TemplateEditor = ({
   return (
     <Root ref={rootRef} size={size} scale={scale}>
       <Sidebar
+        scale={scale}
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
         height={mainRef.current ? mainRef.current.scrollHeight : 0}

package/src/components/Paper.tsx

@@ -47,9 +47,7 @@ const Paper = (porps: {
               margin: `${RULER_HEIGHT * scale}px auto`,
               position: 'relative',
               backgroundImage: `url(${background})`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
+              backgroundSize: `${paperSize.width}px ${paperSize.height}px`,
               ...paperSize,
             }}
           >

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

@@ -42,7 +42,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
           alignItems: 'center',
           justifyContent: 'center',
           background: '#777777e6',
-          borderRadius: 3,
+          borderRadius: 2,
           padding: '0.5rem',
         }}
       >

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

@@ -10,7 +10,7 @@ const buttonWrapStyle: React.CSSProperties = {
   top: '45%',
   zIndex: 1,
   backgroundColor: '#777777bd',
-  borderRadius: 3,
+  borderRadius: 2,
   padding: '0.5rem',
   display: 'flex',
   alignItems: 'center',

package/src/components/Preview/index.tsx

@@ -80,12 +80,11 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         backgrounds={backgrounds}
         renderSchema={({ schema, index }) => {
           const { key } = schema;
-          const data = input[key] ? input[key] : '';
-
+          const data = input[key] || '';
           return (
             <SchemaUI
-              key={key}
-              schema={Object.assign(schema, { key, id: key, data })}
+              key={schema.id}
+              schema={Object.assign(schema, { data })}
               editable={editable}
               placeholder={template.sampledata ? template.sampledata[0][key] : ''}
               tabIndex={index + 100}

package/src/components/Root.tsx

@@ -29,16 +29,11 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   return (
     <div
       ref={ref}
-      style={{
-        fontFamily: 'Arial, Helvetica, sans-serif',
-        position: 'relative',
-        background: 'rgb(74, 74, 74)',
-        overflowY: 'auto',
-        ...size,
-      }}
+      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflowY: 'auto', ...size }}
     >
       <div
         style={{
+          margin: '0 auto',
           width: size.width - RULER_HEIGHT * scale,
           height: size.height - RULER_HEIGHT * scale,
         }}

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,
@@ -50,7 +48,7 @@ const ErrorBarcode = () => (
         padding: '0.25rem',
         fontSize: '12pt',
         fontWeight: 'bold',
-        borderRadius: 3,
+        borderRadius: 2,
       }}
     >
       ERROR
@@ -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={{
@@ -81,28 +97,27 @@ const BarcodeSchemaUI = (
         justifyContent: 'center',
       }}
     >
-      <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

@@ -30,7 +30,7 @@ const TextSchemaUI = (
     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

@@ -225,33 +225,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 +289,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);
@@ -400,6 +400,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 +420,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,

package/src/i18n.ts

@@ -27,7 +27,6 @@ const dictEn = {
   goToPrevious: 'Back',
   goToNext: 'Next',
   goToEnd: 'Go to end',
-  select: 'Select',
   errorOccurred: 'An error occurred.',
 };
 
@@ -55,7 +54,6 @@ const dictJa: { [key in keyof DictEn]: string } = {
   goToPrevious: '1つ戻る',
   goToNext: '1つ進む',
   goToEnd: '最後に進む',
-  select: '選択',
   errorOccurred: 'エラーが発生しました',
 };