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/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[] {
};
});
}