@pdfme/ui 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "author": "hand-dot",
   "license": "MIT",
   "keywords": [

package/src/components/CtlBar/Pager.tsx

@@ -21,13 +21,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
   const i18n = useContext(I18nContext);
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <button
         style={{
           paddingLeft: '0.5rem',
@@ -39,7 +33,7 @@ const Pager = ({ pageCursor, pageNum, setPageCursor }: Props) => {
       >
         <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
       </button>
-      <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
         {pageCursor + 1}/{pageNum}
       </strong>
       <button

package/src/components/CtlBar/Zoom.tsx

@@ -33,20 +33,22 @@ const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
           ...btnStyle,
           cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer',
         }}
-        onClick={() => setZoomLevel(nextZoomOut)}
         disabled={minZoom >= nextZoomOut}
+        onClick={() => setZoomLevel(nextZoomOut)}
       >
         <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
       </button>
-      <strong style={{ color: 'white', fontSize: '0.9rem' }}>{Math.round(zoomLevel * 100)}%</strong>
+      <strong style={{ color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' }}>
+        {Math.round(zoomLevel * 100)}%
+      </strong>
       <button
         style={{
           paddingRight: '0.5rem',
           ...btnStyle,
           cursor: maxZoom < nextZoomIn ? 'not-allowed' : 'pointer',
         }}
-        onClick={() => setZoomLevel(nextZoomIn)}
         disabled={maxZoom < nextZoomIn}
+        onClick={() => setZoomLevel(nextZoomIn)}
       >
         <img src={add} alt={i18n('zoomIn')} style={{ width: 20 }} />
       </button>

package/src/components/CtlBar/index.tsx

@@ -12,7 +12,7 @@ type Props = {
   setZoomLevel: (zoom: number) => void;
 };
 
-const barWidth = 220;
+const barWidth = 250;
 
 const CtlBar = (props: Props) => {
   const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;

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

@@ -277,10 +277,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
               }}
             />
             {pageCursor !== index ? (
-              <Mask
-                width={paperSize.width + RULER_HEIGHT}
-                height={paperSize.height + RULER_HEIGHT * scale}
-              />
+              <Mask width={paperSize.width + RULER_HEIGHT} height={paperSize.height} />
             ) : (
               !editing && (
                 <Moveable

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

@@ -52,7 +52,7 @@ const Sidebar = (props: SidebarProps) => {
         <button
           style={{
             position: 'absolute',
-            top: '1rem',
+            top: '1.75rem',
             right: '0.5rem',
             zIndex: 100,
             border: 'none',

package/src/components/Paper.tsx

@@ -56,7 +56,8 @@ const Paper = (porps: {
             }}
             style={{
               fontFamily: `'${getFallbackFontName(font)}'`,
-              margin: `${RULER_HEIGHT * scale}px auto`,
+              top: `${RULER_HEIGHT}px`,
+              margin: '0 auto',
               position: 'relative',
               backgroundImage: `url(${background})`,
               backgroundSize: `${paperSize.width}px ${paperSize.height}px`,

package/src/components/Preview.tsx

@@ -61,7 +61,10 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   return (
     <Root ref={rootRef} size={size} scale={scale}>
       <CtlBar
-        size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
+        size={{
+          height: Math.max(size.height, pageSizesHeightSum),
+          width: Math.max(size.width, pageSizesMaxWidth),
+        }}
         pageCursor={pageCursor}
         pageNum={schemasList.length}
         setPageCursor={(p) => {
@@ -78,7 +81,10 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
         }}
       />
       <UnitPager
-        size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
+        size={{
+          height: Math.max(size.height, pageSizesHeightSum),
+          width: Math.max(size.width, pageSizesMaxWidth),
+        }}
         unitCursor={unitCursor}
         unitNum={inputs.length}
         setUnitCursor={setUnitCursor}