Fix UI Rotate bug

packages/schemas/src/renderUtils.ts

@@ -1,31 +1,6 @@
-import { degrees, degreesToRadians, rgb } from '@pdfme/pdf-lib';
+import { degrees, degreesToRadians } from '@pdfme/pdf-lib';
 import { Schema, mm2pt } from '@pdfme/common';
 
-const hex2rgb = (hex: string) => {
-  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
-  if (hex.length === 3)
-    hex =
-      hex.slice(0, 1) +
-      hex.slice(0, 1) +
-      hex.slice(1, 2) +
-      hex.slice(1, 2) +
-      hex.slice(2, 3) +
-      hex.slice(2, 3);
-
-  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
-};
-
-export const hex2RgbColor = (hexString: string | undefined) => {
-  if (hexString) {
-    const [r, g, b] = hex2rgb(hexString);
-
-    return rgb(r / 255, g / 255, b / 255);
-  }
-
-  // eslint-disable-next-line no-undefined
-  return undefined;
-};
-
 export const convertForPdfLayoutProps = ({
   schema,
   pageHeight,

packages/schemas/src/text/pdfRender.ts

@@ -1,4 +1,4 @@
-import { PDFFont, PDFDocument } from '@pdfme/pdf-lib';
+import { PDFFont, PDFDocument, rgb } from '@pdfme/pdf-lib';
 import { PDFRenderProps, Font, getDefaultFont, getFallbackFontName, mm2pt } from '@pdfme/common';
 import type { TextSchema, FontWidthCalcValues } from './types';
 import {
@@ -20,7 +20,31 @@ import {
   getSplittedLines,
   widthOfTextAtSize,
 } from './helper';
-import { convertForPdfLayoutProps, hex2RgbColor, rotatePoint } from '../renderUtils';
+import { convertForPdfLayoutProps, rotatePoint } from '../renderUtils';
+
+const hex2rgb = (hex: string) => {
+  if (hex.slice(0, 1) === '#') hex = hex.slice(1);
+  if (hex.length === 3)
+    hex =
+      hex.slice(0, 1) +
+      hex.slice(0, 1) +
+      hex.slice(1, 2) +
+      hex.slice(1, 2) +
+      hex.slice(2, 3) +
+      hex.slice(2, 3);
+
+  return [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)].map((str) => parseInt(str, 16));
+};
+
+const hex2RgbColor = (hexString: string | undefined) => {
+  if (hexString) {
+    const [r, g, b] = hex2rgb(hexString);
+
+    return rgb(r / 255, g / 255, b / 255);
+  }
+
+  return undefined;
+};
 
 const embedAndGetFontObjCache = new WeakMap();
 const embedAndGetFontObj = async (arg: { pdfDoc: PDFDocument; font: Font }) => {

packages/ui/src/components/Designer/Canvas/index.tsx

@@ -1,5 +1,7 @@
 import React, {
   Ref,
+  useMemo,
+  useContext,
   MutableRefObject,
   useRef,
   useState,
@@ -9,6 +11,7 @@ import React, {
 } from 'react';
 import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
 import { ZOOM, SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import { PropPanelRegistry } from '../../../contexts';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { usePrevious } from '../../../hooks';
@@ -100,6 +103,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     paperRefs,
     sidebarOpen,
   } = props;
+  const propPanelRegistry = useContext(PropPanelRegistry);
 
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
@@ -248,9 +252,16 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     setEditing(true);
   };
 
-  const rotatable = schemasList[pageCursor]
-    .filter((s) => activeElements.map((ae) => ae.id).includes(s.id))
-    .every((schema) => schema.rotate !== undefined);
+  const rotatable = useMemo(() => {
+    const selectedSchemas = schemasList[pageCursor].filter((s) =>
+      activeElements.map((ae) => ae.id).includes(s.id)
+    );
+    const schemaTypes = selectedSchemas.map((s) => s.type);
+    const uniqueSchemaTypes = [...new Set(schemaTypes)];
+    return uniqueSchemaTypes.every(
+      (type) => propPanelRegistry[type]?.defaultSchema?.rotate !== undefined
+    );
+  }, [activeElements, pageCursor, schemasList]);
 
   return (
     <div
@@ -315,14 +326,10 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             <Guides
               paperSize={paperSize}
               horizontalRef={(e) => {
-                if (e) {
-                  horizontalGuides.current[index] = e;
-                }
+                if (e) horizontalGuides.current[index] = e;
               }}
               verticalRef={(e) => {
-                if (e) {
-                  verticalGuides.current[index] = e;
-                }
+                if (e) verticalGuides.current[index] = e;
               }}
             />
             {pageCursor !== index ? (

packages/ui/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -98,7 +98,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: 'number',
         widget: 'inputNumber',
         span: 8,
-        disabled: activeSchema.rotate === undefined,
+        disabled: activePropPanelRegistry?.defaultSchema?.rotate === undefined,
         max: 360,
         min: 0,
       },

packages/ui/src/components/Designer/Sidebar/index.tsx

@@ -10,7 +10,8 @@ const Sidebar = (props: SidebarProps) => {
   const { sidebarOpen, setSidebarOpen, activeElements, schemas, addSchema } = props;
 
   const i18n = useContext(I18nContext);
-  const getActiveSchemas = () => schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id))
+  const getActiveSchemas = () =>
+    schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id));
   const getLastActiveSchema = () => {
     const activeSchemas = getActiveSchemas();
     return activeSchemas[activeSchemas.length - 1];

packages/ui/src/components/Designer/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
-import { ZOOM, Template, SchemaForUI, ChangeSchemas } from '@pdfme/common';
-import { DesignerReactProps } from '../../types';
+import { ZOOM, Template, SchemaForUI, ChangeSchemas, DesignerProps, Size } from '@pdfme/common';
 import Sidebar from './Sidebar/index';
 import Canvas from './Canvas/index';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../constants';
@@ -27,7 +26,10 @@ const TemplateEditor = ({
   size,
   onSaveTemplate,
   onChangeTemplate,
-}: DesignerReactProps & { onChangeTemplate: (t: Template) => void }) => {
+}: Omit<DesignerProps, 'domContainer'> & {
+  onSaveTemplate: (t: Template) => void;
+  size: Size;
+} & { onChangeTemplate: (t: Template) => void }) => {
   const copiedSchemas = useRef<SchemaForUI[] | null>(null);
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);

packages/ui/src/components/Preview.tsx

@@ -1,7 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
-import { ZOOM, SchemaForUI } from '@pdfme/common';
-import { PreviewReactProps } from '../types';
-import { RULER_HEIGHT } from '../constants';
+import type { SchemaForUI, PreviewProps, Size } from '@pdfme/common';
 import UnitPager from './UnitPager';
 import Root from './Root';
 import ErrorScreen from './ErrorScreen';
@@ -11,7 +9,15 @@ import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
 import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
-const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
+const Preview = ({
+  template,
+  inputs,
+  size,
+  onChangeInput,
+}: Omit<PreviewProps, 'domContainer'> & {
+  onChangeInput?: (args: { index: number; value: string; key: string }) => void;
+  size: Size;
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
@@ -56,11 +62,6 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
     return <ErrorScreen size={size} error={error} />;
   }
 
-  const pageSizesHeightSum = pageSizes.reduce(
-    (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
-    0
-  );
-
   return (
     <Root size={size} scale={scale}>
       <CtlBar

packages/ui/src/components/Renderer.tsx

@@ -1,8 +1,17 @@
 import React, { useEffect, useContext, ReactNode, useRef } from 'react';
-import { ZOOM } from '@pdfme/common';
+import { ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { RendererRegistry, OptionsContext } from '../contexts';
-import { RendererProps } from '../types';
+
+type RendererProps = Omit<
+  UIRenderProps<Schema>,
+  'value' | 'schema' | 'onChange' | 'rootElement' | 'options'
+> & {
+  schema: SchemaForUI;
+  onChange: (value: string) => void;
+  outline: string;
+  onChangeHoveringSchemaId?: (id: string | null) => void;
+};
 
 const Wrapper = ({
   children,

packages/ui/src/types.ts

@@ -1,25 +1,12 @@
 import type {
-  DesignerProps,
-  PreviewProps,
   UIRenderProps,
   SchemaForUI,
-  Template,
   Size,
   Schema,
   ChangeSchemas,
   PropPanel,
 } from '@pdfme/common';
 
-export type RendererProps = Omit<
-  UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options'
-> & {
-  schema: SchemaForUI;
-  onChange: (value: string) => void;
-  outline: string;
-  onChangeHoveringSchemaId?: (id: string | null) => void;
-};
-
 export type SidebarProps = {
   height: number;
   hoveringSchemaId: string | null;
@@ -47,13 +34,3 @@ export interface UIRenderer {
 export interface PropPanelObject {
   [key: string]: PropPanel<Schema> | undefined;
 }
-
-export type DesignerReactProps = Omit<DesignerProps, 'domContainer'> & {
-  onSaveTemplate: (t: Template) => void;
-  size: Size;
-};
-
-export type PreviewReactProps = Omit<PreviewProps, 'domContainer'> & {
-  onChangeInput?: (args: { index: number; value: string; key: string }) => void;
-  size: Size;
-};