@pdfme/ui 1.1.6 → 1.1.7

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -1,11 +1,5 @@
 import React from 'react';
-import { OnDrag, OnDragEnd, OnDragGroupEnd, OnResize, OnResizeEnd, OnResizeGroupEnd, OnRotate, OnRotateEnd, OnRotateGroupEnd, OnClick } from 'react-moveable';
-declare type tgtFunc = ({ target }: {
-    target: HTMLElement | SVGElement;
-}) => void;
-declare type tgtsFunc = ({ targets }: {
-    targets: (HTMLElement | SVGElement)[];
-}) => void;
+import { OnDrag, OnResize, OnDragEnd, OnDragGroupEnd, OnResizeEnd, OnResizeGroupEnd, OnClick } from 'react-moveable';
 declare type Props = {
     target: HTMLElement[];
     bounds: {
@@ -18,14 +12,19 @@ declare type Props = {
     verticalGuidelines: number[];
     keepRatio: boolean;
     onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-    onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
-    onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
+    onDragEnd: ((e: OnDragEnd) => void) & (({ target }: {
+        target: HTMLElement | SVGElement;
+    }) => void);
+    onDragGroupEnd: ((e: OnDragGroupEnd) => void) & (({ targets }: {
+        targets: (HTMLElement | SVGElement)[];
+    }) => void);
     onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-    onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
-    onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
-    onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
-    onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
-    onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
+    onResizeEnd: ((e: OnResizeEnd) => void) & (({ target }: {
+        target: HTMLElement | SVGElement;
+    }) => void);
+    onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & (({ targets }: {
+        targets: (HTMLElement | SVGElement)[];
+    }) => void);
     onClick: (e: OnClick) => void;
 };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;

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.1.6",
+  "version": "1.1.7",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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

@@ -1,20 +1,14 @@
 import React, { forwardRef, Ref } from 'react';
 import Moveable, {
   OnDrag,
+  OnResize,
   OnDragEnd,
   OnDragGroupEnd,
-  OnResize,
   OnResizeEnd,
   OnResizeGroupEnd,
-  OnRotate,
-  OnRotateEnd,
-  OnRotateGroupEnd,
   OnClick,
 } from 'react-moveable';
 
-type tgtFunc = ({ target }: { target: HTMLElement | SVGElement }) => void;
-type tgtsFunc = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void;
-
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -22,15 +16,15 @@ type Props = {
   verticalGuidelines: number[];
   keepRatio: boolean;
   onDrag: ((e: OnDrag) => void) & (({ target, left, top }: OnDrag) => void);
-  onDragEnd: ((e: OnDragEnd) => void) & tgtFunc;
-  onDragGroupEnd: ((e: OnDragGroupEnd) => void) & tgtsFunc;
+  onDragEnd: ((e: OnDragEnd) => void) &
+    (({ target }: { target: HTMLElement | SVGElement }) => void);
+  onDragGroupEnd: ((e: OnDragGroupEnd) => void) &
+    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
   onResize: ((e: OnResize) => void) & (({ target, width, height, direction }: OnResize) => void);
-  onResizeEnd: ((e: OnResizeEnd) => void) & tgtFunc;
-  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) & tgtsFunc;
-  onRotate: ((e: OnRotate) => void) & (({ target, rotate }: OnRotate) => void);
-  onRotateEnd: ((e: OnRotateEnd) => void) & tgtFunc;
-  onRotateGroupEnd: ((e: OnRotateGroupEnd) => void) & tgtsFunc;
-
+  onResizeEnd: ((e: OnResizeEnd) => void) &
+    (({ target }: { target: HTMLElement | SVGElement }) => void);
+  onResizeGroupEnd: ((e: OnResizeGroupEnd) => void) &
+    (({ targets }: { targets: (HTMLElement | SVGElement)[] }) => void);
   onClick: (e: OnClick) => void;
 };
 
@@ -47,9 +41,6 @@ const _Moveable = (
     onResize,
     onResizeEnd,
     onResizeGroupEnd,
-    onRotate,
-    onRotateEnd,
-    onRotateGroupEnd,
     onClick,
   }: Props,
   ref: Ref<any>
@@ -61,9 +52,6 @@ const _Moveable = (
     snapCenter
     draggable
     resizable
-    rotatable
-    throttleRotate={0}
-    rotationPosition="top"
     throttleDrag={1}
     throttleResize={1}
     ref={ref}
@@ -73,17 +61,17 @@ const _Moveable = (
     verticalGuidelines={verticalGuidelines}
     keepRatio={keepRatio}
     onDrag={onDrag}
-    onDragGroup={({ events }) => events.forEach(onDrag)}
+    onDragGroup={({ events }) => {
+      events.forEach(onDrag);
+    }}
     onDragEnd={onDragEnd}
     onDragGroupEnd={onDragGroupEnd}
     onResize={onResize}
-    onResizeGroup={({ events }) => events.forEach(onResize)}
+    onResizeGroup={({ events }) => {
+      events.forEach(onResize);
+    }}
     onResizeEnd={onResizeEnd}
     onResizeGroupEnd={onResizeGroupEnd}
-    onRotate={onRotate}
-    onRotateEnd={onRotateEnd}
-    onRotateGroup={({ events }) => events.forEach(onRotate)}
-    onRotateGroupEnd={onRotateGroupEnd}
     onClick={onClick}
   />
 );

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

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
-import { OnDrag, OnResize, OnRotate, OnClick } from 'react-moveable';
+import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ZOOM, RULER_HEIGHT } from '../../../constants';
@@ -21,16 +21,13 @@ import Guides from './Guides';
 import Mask from './Mask';
 
 const DELETE_BTN_ID = uuid();
-const px2Num = (prop: string) => Number(prop.replace('px', ''));
-const transformRotate2Num = (transform: string) =>
-  Number(transform.match(/rotate\(([^deg)]*)deg\)/)?.[1]) || 0;
-const fmtPx = (prop: string) => round(px2Num(prop) / ZOOM, 2);
-const fmtDeg = (prop: string) => round(transformRotate2Num(prop), 2);
+const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
+const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
 const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0,-1';
 
 const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
-  const top = Math.min(...aes.map(({ style }) => px2Num(style.top)));
-  const left = Math.max(...aes.map(({ style }) => px2Num(style.left) + px2Num(style.width))) + 10;
+  const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
+  const left = Math.max(...aes.map(({ style }) => fmt4Num(style.left) + fmt4Num(style.width))) + 10;
 
   return (
     <button
@@ -152,15 +149,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
     const { top, left } = target.style;
     changeSchemas([
-      { key: 'position.y', value: fmtPx(top), schemaId: target.id },
-      { key: 'position.x', value: fmtPx(left), schemaId: target.id },
+      { key: 'position.y', value: fmt(top), schemaId: target.id },
+      { key: 'position.x', value: fmt(left), schemaId: target.id },
     ]);
   };
 
   const onDragEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { top, left }, id }) => [
-      { key: 'position.y', value: fmtPx(top), schemaId: id },
-      { key: 'position.x', value: fmtPx(left), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -169,19 +166,19 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
-      { key: 'width', value: fmtPx(width), schemaId: id },
-      { key: 'height', value: fmtPx(height), schemaId: id },
-      { key: 'position.y', value: fmtPx(top), schemaId: id },
-      { key: 'position.x', value: fmtPx(left), schemaId: id },
+      { key: 'width', value: fmt(width), schemaId: id },
+      { key: 'height', value: fmt(height), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { width, height, top, left }, id }) => [
-      { key: 'width', value: fmtPx(width), schemaId: id },
-      { key: 'height', value: fmtPx(height), schemaId: id },
-      { key: 'position.y', value: fmtPx(top), schemaId: id },
-      { key: 'position.x', value: fmtPx(left), schemaId: id },
+      { key: 'width', value: fmt(width), schemaId: id },
+      { key: 'height', value: fmt(height), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
+      { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -189,8 +186,8 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
     const s = target.style;
-    const newLeft = px2Num(s.left) + (px2Num(s.width) - width);
-    const newTop = px2Num(s.top) + (px2Num(s.height) - height);
+    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
+    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
     const obj: { top?: string; left?: string; width: string; height: string } = {
       width: `${width}px`,
       height: `${height}px`,
@@ -207,25 +204,6 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     Object.assign(s, obj);
   };
 
-  const onRotate = ({ target, rotate }: OnRotate) => {
-    if (!target) return;
-    target.style.transform = `rotate(${rotate}deg)`;
-  };
-
-  const onRotateEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
-    const { id, style } = target;
-    const { transform } = style;
-    changeSchemas([{ key: 'rotate', value: fmtDeg(transform), schemaId: id }]);
-  };
-
-  const onRotateEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
-    const arg = targets.map(({ style: { transform }, id }) => [
-      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
-      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
-    ]);
-    changeSchemas(flatten(arg));
-  };
-
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
@@ -322,9 +300,6 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
                   onResize={onResize}
                   onResizeEnd={onResizeEnd}
                   onResizeGroupEnd={onResizeEnds}
-                  onRotate={onRotate}
-                  onRotateEnd={onRotateEnd}
-                  onRotateGroupEnd={onRotateEnds}
                   onClick={onClickMoveable}
                 />
               )

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -258,19 +258,6 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
-      <div style={inputSetStyle}>
-        <label style={{ width: 44 }}>Rotate</label>
-        <input
-          style={inputStyle}
-          type="number"
-          onChange={(e) => {
-            const value = Number(e.target.value || 0);
-            changeSchemas([{ key: 'rotate', value, schemaId: activeSchema.id }]);
-          }}
-          value={activeSchema.rotate || 0}
-        />
-        <span style={{ fontSize: '0.6rem' }}>deg</span>
-      </div>
     </div>
   );
 };

package/src/components/Schemas/SchemaUI.tsx

@@ -37,7 +37,6 @@ const Wrapper = ({
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
-      transform: `rotate(${schema.rotate || 0}deg)`,
       border,
     }}
   >

package/src/helper.ts

@@ -1,3 +1,6 @@
+// TODO そもそもこのpdfjs-distはtscでビルドできない
+// 昔のpdfmeのソースからwebpackのビルドに戻す
+// 多分tree-shakingは動かないかもしれないけど、とりあえず動くようにするべき
 // @ts-ignore
 import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.entry.js';
 import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.js';
@@ -234,6 +237,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;