@pdfme/ui 1.0.3 → 1.0.6

package/src/components/{Preview/Pager/Unit.tsx → UnitPager.tsx}

@@ -1,9 +1,9 @@
 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';
+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',
@@ -14,7 +14,8 @@ const buttonWrapStyle: React.CSSProperties = {
   padding: '0.5rem',
   display: 'flex',
   alignItems: 'center',
-  width: 100,
+  justifyContent: 'space-around',
+  width: 110,
 };
 
 const btnStyle: React.CSSProperties = {
@@ -37,7 +38,16 @@ const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
   if (unitNum <= 1) return <></>;
 
   return (
-    <>
+    <div
+      style={{
+        position: 'fixed',
+        width: '100%',
+        zIndex: 1,
+        top: '50%',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       {unitCursor > 0 && (
         <div style={{ marginLeft: '1rem', ...buttonWrapStyle }}>
           <button
@@ -54,14 +64,14 @@ const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
           >
             <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
           </button>
-          <strong style={{ color: 'white' }}>
+          <strong style={{ color: 'white', fontSize: '0.9rem' }}>
             {unitCursor + 1}/{unitNum}
           </strong>
         </div>
       )}
       {unitCursor + 1 < unitNum && (
         <div style={{ marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}>
-          <strong style={{ color: 'white' }}>
+          <strong style={{ color: 'white', fontSize: '0.9rem' }}>
             {unitCursor + 1}/{unitNum}
           </strong>
           <button
@@ -80,7 +90,7 @@ const UnitPager = ({ unitCursor, unitNum, setUnitCursor }: Props) => {
           </button>
         </div>
       )}
-    </>
+    </div>
   );
 };
 

package/src/helper.ts

@@ -15,6 +15,7 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_LINE_HEIGHT,
 } from '@pdfme/common';
+import { ZOOM, RULER_HEIGHT } from './constants';
 
 export const uuid = () =>
   'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -233,6 +234,13 @@ const pt2mm = (pt: number) => {
   return parseFloat(String(pt)) * mmRatio;
 };
 
+export const px2mm = (px: number) => {
+  // http://www.unitconversion.org/typography/millimeters-to-pixels-y-conversion.html
+  const mmRatio = 0.264583333;
+
+  return parseFloat(String(px)) * mmRatio;
+};
+
 export const getPdfPageSizes = async (pdfBlob: Blob) => {
   const url = URL.createObjectURL(pdfBlob);
   const pdfDoc = await getDocument({ url }).promise;
@@ -520,3 +528,16 @@ export const moveCommandToChangeSchemasArg = (props: {
     return { key: `position.${key}`, value, schemaId: as.id };
   });
 };
+
+export const getPagesScrollTopByIndex = (
+  pageSizes: {
+    width: number;
+    height: number;
+  }[],
+  index: number,
+  scale: number
+) => {
+  return pageSizes
+    .slice(0, index)
+    .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale, 0);
+};

package/src/hooks.ts

@@ -14,9 +14,9 @@ export const usePrevious = <T>(value: T) => {
 
 const getScale = (n: number, paper: number) => (n / paper > 1 ? 1 : n / paper);
 
-type UIPreProcessorProps = { template: Template; size: Size; offset?: number };
+type UIPreProcessorProps = { template: Template; size: Size; zoomLevel: number };
 
-export const useUIPreProcessor = ({ template, size, offset = 0 }: UIPreProcessorProps) => {
+export const useUIPreProcessor = ({ template, size, zoomLevel }: UIPreProcessorProps) => {
   const [backgrounds, setBackgrounds] = useState<string[]>([]);
   const [pageSizes, setPageSizes] = useState<Size[]>([]);
   const [scale, setScale] = useState(0);
@@ -32,18 +32,16 @@ export const useUIPreProcessor = ({ template, size, offset = 0 }: UIPreProcessor
 
     const _scale = Math.min(
       getScale(size.width, paperWidth),
-      getScale(size.height - offset, paperHeight)
+      getScale(size.height - RULER_HEIGHT, paperHeight)
     );
 
     return { backgrounds: _backgrounds, pageSizes: _pageSizes, scale: _scale };
-  }, [template, size, offset]);
+  }, [template, size]);
 
   useEffect(() => {
     init()
-      .then((data) => {
-        setPageSizes(data.pageSizes);
-        setScale(data.scale);
-        setBackgrounds(data.backgrounds);
+      .then(({ pageSizes, scale, backgrounds }) => {
+        setPageSizes(pageSizes), setScale(scale), setBackgrounds(backgrounds);
       })
       .catch((e: Error) => {
         console.error(e);
@@ -51,11 +49,11 @@ export const useUIPreProcessor = ({ template, size, offset = 0 }: UIPreProcessor
       });
   }, [init]);
 
-  return { backgrounds, pageSizes, scale, error };
+  return { backgrounds, pageSizes, scale: scale * zoomLevel, error };
 };
 
 type ScrollPageCursorProps = {
-  rootRef: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement>;
   pageSizes: Size[];
   scale: number;
   pageCursor: number;
@@ -63,19 +61,19 @@ type ScrollPageCursorProps = {
 };
 
 export const useScrollPageCursor = ({
-  rootRef,
+  ref,
   pageSizes,
   scale,
   pageCursor,
   onChangePageCursor,
 }: ScrollPageCursorProps) => {
   const onScroll = useCallback(() => {
-    if (!pageSizes[0] || !rootRef.current) {
+    if (!pageSizes[0] || !ref.current) {
       return;
     }
 
-    const scroll = rootRef.current.scrollTop;
-    const { top } = rootRef.current.getBoundingClientRect();
+    const scroll = ref.current.scrollTop;
+    const { top } = ref.current.getBoundingClientRect();
     const pageHeights = pageSizes.reduce((acc, cur, i) => {
       let value = (cur.height * ZOOM + RULER_HEIGHT) * scale;
       if (i === 0) {
@@ -95,15 +93,15 @@ export const useScrollPageCursor = ({
     if (_pageCursor !== pageCursor) {
       onChangePageCursor(_pageCursor);
     }
-  }, [onChangePageCursor, pageCursor, pageSizes, rootRef, scale]);
+  }, [onChangePageCursor, pageCursor, pageSizes, ref, scale]);
 
   useEffect(() => {
-    rootRef.current?.addEventListener('scroll', onScroll);
+    ref.current?.addEventListener('scroll', onScroll);
 
     return () => {
-      rootRef.current?.removeEventListener('scroll', onScroll);
+      ref.current?.removeEventListener('scroll', onScroll);
     };
-  }, [rootRef, onScroll]);
+  }, [ref, onScroll]);
 };
 
 export const useMountStatus = () => {

package/src/i18n.ts

@@ -26,6 +26,8 @@ const dictEn = {
   goToNext: 'Next',
   goToEnd: 'Go to end',
   select: 'Select',
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out',
   errorOccurred: 'An error occurred',
   errorBulkUpdateFieldName:
     'Cannot commit the change because the number of items has been changed.',
@@ -56,6 +58,8 @@ const dictJa: { [key in keyof DictEn]: string } = {
   goToNext: '1つ進む',
   goToEnd: '最後に進む',
   select: '選択',
+  zoomIn: '拡大',
+  zoomOut: '縮小',
   errorOccurred: 'エラーが発生しました',
   errorBulkUpdateFieldName: '項目数が変更されているため変更をコミットできません。',
   commitBulkUpdateFieldName: '変更を反映',

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

@@ -1,85 +0,0 @@
-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: 2,
-          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;