danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cover

Browse Source
This commit is contained in:
hamid zarghami
2026-03-14 15:25:25 +03:30
parent 703ed374f4
commit 67b5944ddb
6 changed files with 90 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/catalogue/components/CatalogPreview.tsx
+16 -12
View File
@@ -1,18 +1,12 @@
import { type FC, useMemo } from 'react'
import BookPage from '@/pages/viewer/components/BookPage'
import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer'
import { getPaperDimensions } from '@/config/paperSizes'
import type { CatalogItemType } from '../types/Types'
import type { PageData } from '@/pages/viewer/types'
const PREVIEW_WIDTH = 64
const PREVIEW_HEIGHT = 89
const PAGE_BASE_WIDTH = 794
const PAGE_BASE_HEIGHT = 1123
const PREVIEW_SCALE = Math.min(
PREVIEW_WIDTH / PAGE_BASE_WIDTH,
PREVIEW_HEIGHT / PAGE_BASE_HEIGHT
)
function getFirstPageFromContent(content: string | undefined): PageData | null {
if (!content) return null
@@ -36,6 +30,16 @@ const CatalogPreview: FC<Props> = ({ item }) => {
[item.content]
)
const { pageWidth, pageHeight, previewScale } = useMemo(() => {
const { width, height } = getPaperDimensions(item.size ?? 'a4')
const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height)
return {
pageWidth: width,
pageHeight: height,
previewScale: scale,
}
}, [item.size])
if (!firstPage) {
return (
<div
@@ -58,17 +62,17 @@ const CatalogPreview: FC<Props> = ({ item }) => {
style={{
top: 0,
right: 0,
transform: `scale(${PREVIEW_SCALE})`,
transform: `scale(${previewScale})`,
transformOrigin: 'top right',
width: PAGE_BASE_WIDTH,
height: PAGE_BASE_HEIGHT,
width: pageWidth,
height: pageHeight,
}}
>
<BookPage
page={firstPage}
scale={1}
pageWidth={PAGE_BASE_WIDTH}
pageHeight={PAGE_BASE_HEIGHT}
pageWidth={pageWidth}
pageHeight={pageHeight}
/>
</div>
</div>
src/pages/home/hooks/useHomeData.ts
+3 -6
View File
@@ -31,10 +31,7 @@ export const useUpdateCatalog = () => {
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const scheduleUpdate = useCallback(
(
params: Parameters<typeof api.updateCatalog>[0],
delayMs = 3000
) => {
(params: Parameters<typeof api.updateCatalog>[0], delayMs = 3000) => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
@@ -43,7 +40,7 @@ export const useUpdateCatalog = () => {
mutation.mutate(params);
}, delayMs);
},
[mutation]
[mutation],
);
useEffect(
@@ -52,7 +49,7 @@ export const useUpdateCatalog = () => {
clearTimeout(timeoutRef.current);
}
},
[]
[],
);
return {
src/pages/viewer/components/BookViewer.tsx
+5 -11
View File
@@ -7,9 +7,6 @@ import { getPaperDimensions } from '@/config/paperSizes';
const VIEWER_SCALE = 0.5;
// سایز کتاب همیشه A4 است (ثابت)
const BOOK_PAPER_SIZE = 'a4';
export type BookViewerProps = {
pages: PageData[];
catalogSize?: string;
@@ -38,19 +35,16 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize }) => {
const bookRef = useRef<FlipBookInstance | null>(null);
const [currentPage, setCurrentPage] = useState(0);
// سایز کتاب ثابت (همیشه A4)
// سایز کتاب بر اساس catalogSize (A3/A4/A5)
const { width: bookWidth, height: bookHeight } = useMemo(
() => getPaperDimensions(BOOK_PAPER_SIZE),
[]
() => getPaperDimensions(catalogSize ?? 'a4'),
[catalogSize]
);
const displayWidth = Math.round(bookWidth * VIEWER_SCALE);
const displayHeight = Math.round(bookHeight * VIEWER_SCALE);
// نسبت محتوا بر اساس catalogSize (A3/A4/A5)
const contentScale = useMemo(() => {
const { width: contentWidth } = getPaperDimensions(catalogSize ?? 'a4');
return VIEWER_SCALE * (bookWidth / contentWidth);
}, [catalogSize]);
// scale محتوا همان VIEWER_SCALE است چون سایز کتاب با سایز محتوا یکی است
const contentScale = VIEWER_SCALE;
// اطمینان از اینکه currentPage همیشه در محدوده معتبر است
useEffect(() => {
src/pages/viewer/utils/dataTransformer.ts
+15 -14
View File
@@ -1,5 +1,5 @@
import type { EditorObject } from '@/pages/editor/store/editorStore';
import type { PageData } from '../types';
import type { EditorObject, TableData } from "@/pages/editor/store/editorStore";
import type { PageData } from "../types";
type ViewerDataPage = {
id: string;
@@ -25,7 +25,7 @@ type ViewerDataPage = {
rotation?: number;
opacity?: number;
letterSpacing?: number;
tableData?: any;
tableData?: TableData;
}>;
};
@@ -41,7 +41,7 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
const objects: EditorObject[] = page.objects.map((obj) => {
const baseObject: EditorObject = {
id: obj.id,
type: obj.type as EditorObject['type'],
type: obj.type as EditorObject["type"],
x: obj.x,
y: obj.y,
// در JSON، opacity به صورت 0-100 است (درصد)
@@ -53,7 +53,7 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
// برای line و arrow، width و height در viewer-data.json به عنوان مختصات انتهایی هستند
// در EditorObject هم به عنوان مختصات انتهایی ذخیره می‌شوند
if (obj.type === 'line' || obj.type === 'arrow') {
if (obj.type === "line" || obj.type === "arrow") {
// width و height مستقیماً مختصات نقطه پایان هستند
if (obj.width !== undefined) {
baseObject.width = obj.width;
@@ -77,7 +77,8 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
// اما فعلاً JSON به صورت مرکز است، پس تبدیل نمی‌کنیم
if (obj.fill !== undefined) baseObject.fill = obj.fill;
if (obj.stroke !== undefined) baseObject.stroke = obj.stroke;
if (obj.strokeWidth !== undefined) baseObject.strokeWidth = obj.strokeWidth;
if (obj.strokeWidth !== undefined)
baseObject.strokeWidth = obj.strokeWidth;
if (obj.rotation !== undefined) baseObject.rotation = obj.rotation;
// ویژگی‌های متنی
@@ -85,26 +86,27 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
if (obj.fontSize !== undefined) baseObject.fontSize = obj.fontSize;
if (obj.fontFamily !== undefined) baseObject.fontFamily = obj.fontFamily;
if (obj.fontWeight !== undefined) baseObject.fontWeight = obj.fontWeight;
if (obj.letterSpacing !== undefined) baseObject.letterSpacing = obj.letterSpacing;
if (obj.letterSpacing !== undefined)
baseObject.letterSpacing = obj.letterSpacing;
// انواع خاص objectها
if (obj.type === 'rectangle' && obj.shapeType) {
baseObject.shapeType = obj.shapeType as EditorObject['shapeType'];
if (obj.type === "rectangle" && obj.shapeType) {
baseObject.shapeType = obj.shapeType as EditorObject["shapeType"];
}
if (obj.type === 'image' && obj.imageUrl) {
if (obj.type === "image" && obj.imageUrl) {
baseObject.imageUrl = obj.imageUrl;
}
if (obj.type === 'video' && obj.videoUrl) {
if (obj.type === "video" && obj.videoUrl) {
baseObject.videoUrl = obj.videoUrl;
}
if (obj.type === 'link' && obj.linkUrl) {
if (obj.type === "link" && obj.linkUrl) {
baseObject.linkUrl = obj.linkUrl;
}
if (obj.type === 'grid' && obj.tableData) {
if (obj.type === "grid" && obj.tableData) {
baseObject.tableData = obj.tableData;
}
@@ -119,4 +121,3 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
};
});
}