@pdfme/ui 1.0.2 → 1.0.5

package/dist/types/helper.d.ts

@@ -19,6 +19,7 @@ export declare const initShortCuts: (arg: {
 }) => void;
 export declare const destroyShortCuts: () => void;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
+export declare const px2mm: (px: number) => number;
 export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
     height: number;
     width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "author": "hand-dot",
   "license": "MIT",
   "description": "TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!",

package/src/components/Paper.tsx

@@ -36,6 +36,7 @@ const Paper = (porps: {
 
         return (
           <div
+            id={`@pdfme/ui-paper${paperIndex}`}
             key={paperIndex + JSON.stringify(paperSize)}
             ref={(e) => {
               if (e && paperRefs) {

package/src/components/Preview/index.tsx

@@ -8,7 +8,7 @@ import Error from '../Error';
 import Paper from '../Paper';
 import SchemaUI from '../Schemas/SchemaUI';
 import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
-import { templateSchemas2SchemasList } from '../../helper';
+import { templateSchemas2SchemasList, px2mm } from '../../helper';
 
 const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
   const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({
@@ -54,8 +54,11 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
     <Root ref={rootRef} size={size} scale={scale}>
       <div
         style={{
-          height: pageSizes.reduce((acc, cur) => acc + cur.height * ZOOM, 0),
+          height:
+            pageSizes.reduce((acc, cur) => acc + (cur.height + px2mm(RULER_HEIGHT)) * scale, 0) +
+            'mm',
           width: '100%',
+          top: 0,
           position: 'absolute',
         }}
       >

package/src/components/Root.tsx

@@ -34,7 +34,6 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
       <div
         style={{
           margin: '0 auto',
-          width: size.width - RULER_HEIGHT * scale,
           height: size.height - RULER_HEIGHT * scale,
         }}
       >

package/src/components/Schemas/SchemaUI.tsx

@@ -18,9 +18,6 @@ type Props = SchemaUIProps & {
   onChangeHoveringSchemaId?: (id: string | null) => void;
 };
 
-const getBgc = (schema: SchemaForUI) =>
-  schema.type === 'text' && schema.backgroundColor ? schema.backgroundColor : 'transparent';
-
 const Wrapper = ({
   children,
   border,
@@ -35,12 +32,12 @@ const Wrapper = ({
     id={schema.id}
     style={{
       position: 'absolute',
+      cursor: 'pointer',
       height: schema.height * ZOOM,
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
       border,
-      backgroundColor: getBgc(schema),
     }}
   >
     {children}

package/src/components/Schemas/TextSchema.tsx

@@ -32,8 +32,8 @@ const TextSchemaUI = (
     wordBreak: 'break-all',
     background: 'transparent',
     border: 'none',
-    outline: 'none',
     color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
+    backgroundColor: schema.data && schema.backgroundColor ? schema.backgroundColor : 'transparent',
   };
 
   return editable ? (

package/src/helper.ts

@@ -233,6 +233,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;