@pdfme/ui 1.0.5 → 1.0.8

package/src/components/UnitPager.tsx

@@ -0,0 +1,105 @@
+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 { Size } from '@pdfme/common';
+
+const buttonHeight = 38;
+const buttonWrapStyle: React.CSSProperties = {
+  position: 'sticky',
+  zIndex: 1,
+  backgroundColor: '#777777bd',
+  borderRadius: 2,
+  padding: '0.5rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-around',
+  boxSizing: 'border-box',
+  width: 110,
+  height: buttonHeight,
+};
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+type Props = {
+  size: Size;
+  unitCursor: number;
+  unitNum: number;
+  setUnitCursor: (page: number) => void;
+};
+
+const UnitPager = ({ size, unitCursor, unitNum, setUnitCursor }: Props) => {
+  const i18n = useContext(I18nContext);
+
+  if (unitNum <= 1) return <></>;
+
+  return (
+    <div style={{ position: 'absolute', ...size }}>
+      <div
+        style={{
+          position: 'sticky',
+          width: '100%',
+          zIndex: 1,
+          top: `calc(50% - ${buttonHeight / 2}px)`,
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        {unitCursor > 0 && (
+          <div style={{ left: '1rem', 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', fontSize: '0.9rem' }}>
+              {unitCursor + 1}/{unitNum}
+            </strong>
+          </div>
+        )}
+        {unitCursor + 1 < unitNum && (
+          <div
+            style={{ right: '1rem', marginLeft: 'auto', marginRight: '1rem', ...buttonWrapStyle }}
+          >
+            <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+              {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>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UnitPager;

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) => {
@@ -527,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/dist/types/components/Preview/Pager/Unit.d.ts

@@ -1,7 +0,0 @@
-declare type Props = {
-    unitCursor: number;
-    unitNum: number;
-    setUnitCursor: (page: number) => void;
-};
-declare const UnitPager: ({ unitCursor, unitNum, setUnitCursor }: Props) => JSX.Element;
-export default UnitPager;

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;

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

@@ -1,87 +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 buttonWrapStyle: React.CSSProperties = {
-  position: 'sticky',
-  top: '45%',
-  zIndex: 1,
-  backgroundColor: '#777777bd',
-  borderRadius: 2,
-  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;