@pdfme/ui 1.0.5 → 1.0.8

package/dist/types/class.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseUIClass {
     private font;
     private readonly setSize;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;

package/dist/types/components/CtlBar/Zoom.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    zoomLevel: number;
+    setZoomLevel: (zoom: number) => void;
+};
+declare const Pager: ({ zoomLevel, setZoomLevel }: Props) => JSX.Element;
+export default Pager;

package/dist/types/components/CtlBar/index.d.ts

@@ -0,0 +1,11 @@
+import { Size } from '@pdfme/common';
+declare type Props = {
+    size: Size;
+    pageCursor: number;
+    pageNum: number;
+    setPageCursor: (page: number) => void;
+    zoomLevel: number;
+    setZoomLevel: (zoom: number) => void;
+};
+declare const CtlBar: (props: Props) => JSX.Element;
+export default CtlBar;

package/dist/types/components/Paper.d.ts

@@ -1,7 +1,7 @@
-import React, { MutableRefObject, ReactNode } from 'react';
+import { MutableRefObject, ReactNode } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
 declare const Paper: (porps: {
-    paperRefs?: React.MutableRefObject<HTMLDivElement[]> | undefined;
+    paperRefs: MutableRefObject<HTMLDivElement[]>;
     scale: number;
     size: Size;
     schemasList: SchemaForUI[][];

package/dist/types/components/UnitPager.d.ts

@@ -0,0 +1,9 @@
+import { Size } from '@pdfme/common';
+declare type Props = {
+    size: Size;
+    unitCursor: number;
+    unitNum: number;
+    setUnitCursor: (page: number) => void;
+};
+declare const UnitPager: ({ size, unitCursor, unitNum, setUnitCursor }: Props) => JSX.Element;
+export default UnitPager;

package/dist/types/contexts.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsSelect" | "plsInputName" | "plsAddNewField" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "goToFirst" | "goToPrevious" | "goToNext" | "goToEnd" | "select" | "zoomIn" | "zoomOut" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;

package/dist/types/helper.d.ts

@@ -89,4 +89,8 @@ export declare const moveCommandToChangeSchemasArg: (props: {
     value: number;
     schemaId: string;
 }[];
+export declare const getPagesScrollTopByIndex: (pageSizes: {
+    width: number;
+    height: number;
+}[], index: number, scale: number) => number;
 export {};

package/dist/types/hooks.d.ts

@@ -4,9 +4,9 @@ export declare const usePrevious: <T>(value: T) => T | null;
 declare type UIPreProcessorProps = {
     template: Template;
     size: Size;
-    offset?: number;
+    zoomLevel: number;
 };
-export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProcessorProps) => {
+export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPreProcessorProps) => {
     backgrounds: string[];
     pageSizes: {
         width: number;
@@ -16,12 +16,12 @@ export declare const useUIPreProcessor: ({ template, size, offset }: UIPreProces
     error: Error | null;
 };
 declare type ScrollPageCursorProps = {
-    rootRef: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement>;
     pageSizes: Size[];
     scale: number;
     pageCursor: number;
     onChangePageCursor: (page: number) => void;
 };
-export declare const useScrollPageCursor: ({ rootRef, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
+export declare const useScrollPageCursor: ({ ref, pageSizes, scale, pageCursor, onChangePageCursor, }: ScrollPageCursorProps) => void;
 export declare const useMountStatus: () => boolean;
 export {};

package/dist/types/i18n.d.ts

@@ -23,6 +23,8 @@ declare const dictEn: {
     goToNext: string;
     goToEnd: string;
     select: string;
+    zoomIn: string;
+    zoomOut: string;
     errorOccurred: string;
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "author": "hand-dot",
   "license": "MIT",
+  "keywords": [
+    "pdf",
+    "pdf-generation",
+    "pdf-designer",
+    "pdf-viewer",
+    "typescript",
+    "react"
+  ],
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",
   "homepage": "https://pdfme.com",
   "repository": {

package/src/assets/icons/add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <path d="M22.5 38V25.5H10V22.5H22.5V10H25.5V22.5H38V25.5H25.5V38Z" fill="#ffffff" />
+</svg>

package/src/assets/icons/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+    <path d="M10 25.5V22.5H38V25.5Z" fill="#ffffff" />
+</svg>

package/src/components/CtlBar/Pager.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import left from '../../assets/icons/left.svg';
+import right from '../../assets/icons/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);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <button
+        style={{
+          paddingLeft: '0.5rem',
+          ...btnStyle,
+          cursor: pageCursor <= 0 ? 'not-allowed' : 'pointer',
+        }}
+        disabled={pageCursor <= 0}
+        onClick={() => setPageCursor(pageCursor - 1)}
+      >
+        <img src={left} alt={i18n('goToPrevious')} style={{ width: 20 }} />
+      </button>
+      <strong style={{ color: 'white', fontSize: '0.9rem' }}>
+        {pageCursor + 1}/{pageNum}
+      </strong>
+      <button
+        style={{
+          paddingRight: '0.5rem',
+          ...btnStyle,
+          cursor: pageCursor + 1 >= pageNum ? 'not-allowed' : 'pointer',
+        }}
+        disabled={pageCursor + 1 >= pageNum}
+        onClick={() => setPageCursor(pageCursor + 1)}
+      >
+        <img src={right} alt={i18n('goToNext')} style={{ width: 20 }} />
+      </button>
+    </div>
+  );
+};
+
+export default Pager;

package/src/components/CtlBar/Zoom.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import { I18nContext } from '../../contexts';
+import add from '../../assets/icons/add.svg';
+import remove from '../../assets/icons/remove.svg';
+
+const btnStyle: React.CSSProperties = {
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const zoomStep = 0.25;
+const maxZoom = 2;
+const minZoom = 0.25;
+
+type Props = {
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+};
+
+const Pager = ({ zoomLevel, setZoomLevel }: Props) => {
+  const i18n = useContext(I18nContext);
+  const nextZoomOut = zoomLevel - zoomStep;
+  const nextZoomIn = zoomLevel + zoomStep;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <button
+        style={{
+          paddingRight: '0.5rem',
+          ...btnStyle,
+          cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer',
+        }}
+        onClick={() => setZoomLevel(nextZoomOut)}
+        disabled={minZoom >= nextZoomOut}
+      >
+        <img src={remove} alt={i18n('zoomOut')} style={{ width: 20 }} />
+      </button>
+      <strong style={{ color: 'white', fontSize: '0.9rem' }}>{Math.round(zoomLevel * 100)}%</strong>
+      <button
+        style={{
+          paddingRight: '0.5rem',
+          ...btnStyle,
+          cursor: maxZoom < nextZoomIn ? 'not-allowed' : 'pointer',
+        }}
+        onClick={() => setZoomLevel(nextZoomIn)}
+        disabled={maxZoom < nextZoomIn}
+      >
+        <img src={add} alt={i18n('zoomIn')} style={{ width: 20 }} />
+      </button>
+    </div>
+  );
+};
+
+export default Pager;

package/src/components/CtlBar/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Pager from './Pager';
+import Zoom from './Zoom';
+import { Size } from '@pdfme/common';
+
+type Props = {
+  size: Size;
+  pageCursor: number;
+  pageNum: number;
+  setPageCursor: (page: number) => void;
+  zoomLevel: number;
+  setZoomLevel: (zoom: number) => void;
+};
+
+const barWidth = 220;
+
+const CtlBar = (props: Props) => {
+  const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
+  const width = pageNum > 1 ? barWidth : barWidth / 2;
+  return (
+    <div style={{ position: 'absolute', ...size }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'sticky',
+          zIndex: 1,
+          top: '90%',
+          left: `calc(50% - ${width / 2}px)`,
+          width,
+          background: '#777777e6',
+          borderRadius: 2,
+          padding: '0.5rem',
+        }}
+      >
+        {pageNum > 1 && (
+          <>
+            <Pager pageCursor={pageCursor} pageNum={pageNum} setPageCursor={setPageCursor} />
+            <strong style={{ color: 'white', fontSize: '0.9rem', padding: 0 }}>|</strong>
+          </>
+        )}
+        <Zoom zoomLevel={zoomLevel} setZoomLevel={setZoomLevel} />
+      </div>
+    </div>
+  );
+};
+
+export default CtlBar;

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

@@ -218,7 +218,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
         e.stopPropagation();
         setEditing(false);
       }}
-      style={{ height: props.height }}
+      style={{ overflowX: 'auto' }}
     >
       <Selecto
         container={paperRefs.current[pageCursor]}
@@ -279,7 +279,7 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
             {pageCursor !== index ? (
               <Mask
                 width={paperSize.width + RULER_HEIGHT}
-                height={paperSize.height + RULER_HEIGHT}
+                height={paperSize.height + RULER_HEIGHT * scale}
               />
             ) : (
               !editing && (

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

@@ -27,7 +27,6 @@ const Sidebar = (props: SidebarProps) => {
 
   const i18n = useContext(I18nContext);
   const [open, setOpen] = useState(true);
-  const top = 0;
 
   const getActiveSchemas = () => {
     const ids = activeElements.map((ae) => ae.id);
@@ -41,9 +40,15 @@ const Sidebar = (props: SidebarProps) => {
 
   return (
     <div
-      style={{ position: 'absolute', right: 0, zIndex: 1, height, width: open ? SIDEBAR_WIDTH : 0 }}
+      style={{
+        position: 'absolute',
+        right: 0,
+        zIndex: 1,
+        height: height ? height : '100%',
+        width: open ? SIDEBAR_WIDTH : 0,
+      }}
     >
-      <div style={{ position: 'sticky', top, zIndex: 1, fontSize: '1rem' }}>
+      <div style={{ position: 'sticky', top: 0, zIndex: 1, fontSize: '1rem' }}>
         <button
           style={{
             position: 'absolute',
@@ -66,7 +71,7 @@ const Sidebar = (props: SidebarProps) => {
             width: SIDEBAR_WIDTH,
             height: size.height - RULER_HEIGHT * ZOOM,
             display: open ? 'block' : 'none',
-            top,
+            top: RULER_HEIGHT / 2,
             right: 0,
             position: 'absolute',
             background: '#ffffffed',

package/src/components/Designer/index.tsx

@@ -17,10 +17,12 @@ import {
   getKeepRatioHeightByWidth,
   getUniqSchemaKey,
   moveCommandToChangeSchemasArg,
+  getPagesScrollTopByIndex,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
 import Root from '../Root';
 import Error from '../Error';
+import CtlBar from '../CtlBar';
 
 const TemplateEditor = ({
   template,
@@ -31,22 +33,18 @@ const TemplateEditor = ({
   const copiedSchemas = useRef<SchemaForUI[] | null>(null);
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
-  const rootRef = useRef<HTMLDivElement>(null);
   const mainRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const i18n = useContext(I18nContext);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
-    template,
-    size,
-    offset: RULER_HEIGHT,
-  });
-
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
   const [pageCursor, setPageCursor] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -59,7 +57,7 @@ const TemplateEditor = ({
   };
 
   useScrollPageCursor({
-    rootRef,
+    ref: mainRef,
     pageSizes,
     scale,
     pageCursor,
@@ -190,8 +188,8 @@ const TemplateEditor = ({
     setSchemasList(sl);
     onEditEnd();
     setPageCursor(0);
-    if (rootRef.current?.scroll) {
-      rootRef.current.scroll({ top: 0, behavior: 'smooth' });
+    if (mainRef.current?.scroll) {
+      mainRef.current.scroll({ top: 0, behavior: 'smooth' });
     }
   }, []);
 
@@ -229,11 +227,29 @@ const TemplateEditor = ({
   }
 
   return (
-    <Root ref={rootRef} size={size} scale={scale}>
+    <Root size={size} scale={scale}>
+      <CtlBar
+        size={{ ...size }}
+        pageCursor={pageCursor}
+        pageNum={schemasList.length}
+        setPageCursor={(p) => {
+          if (!mainRef.current) return;
+          mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          setPageCursor(p);
+          onEditEnd();
+        }}
+        zoomLevel={zoomLevel}
+        setZoomLevel={(zoom) => {
+          if (mainRef.current) {
+            mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
+          }
+          setZoomLevel(zoom);
+        }}
+      />
       <Sidebar
         hoveringSchemaId={hoveringSchemaId}
         onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-        height={mainRef.current ? mainRef.current.scrollHeight : 0}
+        height={mainRef.current ? mainRef.current.clientHeight : 0}
         size={size}
         pageSize={pageSizes[pageCursor]}
         activeElements={activeElements}

package/src/components/Error.tsx

@@ -10,7 +10,7 @@ const Error = ({ size, error }: { size: Size; error: Error }) => {
       style={{
         position: 'relative',
         background: 'rgb(74, 74, 74)',
-        overflowY: 'auto',
+        overflow: 'auto',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/Paper.tsx

@@ -4,7 +4,7 @@ import { FontContext } from '../contexts';
 import { ZOOM, RULER_HEIGHT } from '../constants';
 
 const Paper = (porps: {
-  paperRefs?: MutableRefObject<HTMLDivElement[]>;
+  paperRefs: MutableRefObject<HTMLDivElement[]>;
   scale: number;
   size: Size;
   schemasList: SchemaForUI[][];
@@ -28,6 +28,7 @@ const Paper = (porps: {
       style={{
         transform: `scale(${scale})`,
         transformOrigin: size.width <= topPageWidth * ZOOM * scale ? `left top` : `center top`,
+        ...size,
       }}
     >
       {backgrounds.map((background, paperIndex) => {
@@ -39,7 +40,7 @@ const Paper = (porps: {
             id={`@pdfme/ui-paper${paperIndex}`}
             key={paperIndex + JSON.stringify(paperSize)}
             ref={(e) => {
-              if (e && paperRefs) {
+              if (e) {
                 paperRefs.current[paperIndex] = e;
               }
             }}

package/src/components/{Preview/index.tsx → Preview.tsx}

@@ -1,28 +1,26 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../constants';
-import PagePager from './Pager/Page';
-import UnitPager from './Pager/Unit';
-import Root from '../Root';
-import Error from '../Error';
-import Paper from '../Paper';
-import SchemaUI from '../Schemas/SchemaUI';
-import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
-import { templateSchemas2SchemasList, px2mm } from '../../helper';
+import { ZOOM, RULER_HEIGHT } from '../constants';
+import UnitPager from './UnitPager';
+import Root from './Root';
+import Error from './Error';
+import CtlBar from './CtlBar';
+import Paper from './Paper';
+import SchemaUI from './Schemas/SchemaUI';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
+import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
 const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
-    template,
-    size,
-    offset: RULER_HEIGHT,
-  });
-
   const rootRef = useRef<HTMLDivElement>(null);
+  const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const [unitCursor, setUnitCursor] = useState(0);
   const [pageCursor, setPageCursor] = useState(0);
+  const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
+  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+
   const init = useCallback(async () => {
     const sl = await templateSchemas2SchemasList(template);
     setSchemasList(sl);
@@ -33,7 +31,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   }, [init]);
 
   useScrollPageCursor({
-    rootRef,
+    ref: rootRef,
     pageSizes,
     scale,
     pageCursor,
@@ -50,32 +48,44 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
     return <Error size={size} error={error} />;
   }
 
+  const pageSizesHeightSum = pageSizes.reduce(
+    (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
+    0
+  );
+
+  const pageSizesMaxWidth = pageSizes.reduce(
+    (acc, cur) => Math.max(acc, cur.height * ZOOM * scale),
+    0
+  );
+
   return (
     <Root ref={rootRef} size={size} scale={scale}>
-      <div
-        style={{
-          height:
-            pageSizes.reduce((acc, cur) => acc + (cur.height + px2mm(RULER_HEIGHT)) * scale, 0) +
-            'mm',
-          width: '100%',
-          top: 0,
-          position: 'absolute',
+      <CtlBar
+        size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
+        pageCursor={pageCursor}
+        pageNum={schemasList.length}
+        setPageCursor={(p) => {
+          if (!rootRef.current) return;
+          rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          setPageCursor(p);
+        }}
+        zoomLevel={zoomLevel}
+        setZoomLevel={(zoom) => {
+          if (rootRef.current) {
+            rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
+          }
+          setZoomLevel(zoom);
         }}
-      >
-        <UnitPager unitCursor={unitCursor} unitNum={inputs.length} setUnitCursor={setUnitCursor} />
-        <PagePager
-          pageCursor={pageCursor}
-          pageNum={schemasList.length}
-          setPageCursor={(p) => {
-            if (!rootRef.current) return;
-            rootRef.current.scrollTop = pageSizes
-              .slice(0, p)
-              .reduce((acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT) * scale, 0);
-            setPageCursor(p);
-          }}
-        />
-      </div>
+      />
+      <UnitPager
+        size={{ height: pageSizesHeightSum, width: Math.max(size.width, pageSizesMaxWidth) }}
+        unitCursor={unitCursor}
+        unitNum={inputs.length}
+        setUnitCursor={setUnitCursor}
+      />
+
       <Paper
+        paperRefs={paperRefs}
         scale={scale}
         size={size}
         schemasList={schemasList}

package/src/components/Root.tsx

@@ -29,7 +29,7 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   return (
     <div
       ref={ref}
-      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflowY: 'auto', ...size }}
+      style={{ position: 'relative', background: 'rgb(74, 74, 74)', overflow: 'auto', ...size }}
     >
       <div
         style={{