base load viewer

2026-01-07 09:25:59 +03:30
parent a4861eab9b
commit 9479a3425b
9 changed files with 1109 additions and 83 deletions
@@ -0,0 +1,118 @@
+import type { EditorObject } from '@/pages/editor/store/editorStore';
+import type { PageData } from '../types';
+
+type ViewerDataPage = {
+  id: string;
+  name: string;
+  objects: Array<{
+    id: string;
+    type: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    text?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    shapeType?: string;
+    imageUrl?: string;
+    videoUrl?: string;
+    linkUrl?: string;
+    rotation?: number;
+    opacity?: number;
+    letterSpacing?: number;
+    tableData?: any;
+  }>;
+};
+
+type ViewerData = {
+  pages: ViewerDataPage[];
+};
+
+/**
+ * تبدیل داده‌های viewer-data.json به فرمت PageData
+ */
+export function transformViewerDataToPages(data: ViewerData): PageData[] {
+  return data.pages.map((page, index) => {
+    const objects: EditorObject[] = page.objects.map((obj) => {
+      const baseObject: EditorObject = {
+        id: obj.id,
+        type: obj.type as EditorObject['type'],
+        x: obj.x,
+        y: obj.y,
+        opacity: obj.opacity ?? 1,
+        visible: true,
+      };
+
+      // برای line و arrow، width و height در viewer-data.json به عنوان اندازه هستند
+      // اما در EditorObject به عنوان مختصات انتهایی استفاده می‌شوند
+      if (obj.type === 'line' || obj.type === 'arrow') {
+        if (obj.width !== undefined) {
+          baseObject.width = obj.x + obj.width;
+        }
+        if (obj.height !== undefined) {
+          // برای line، height ممکن است ضخامت باشد، اما برای arrow طول عمودی است
+          baseObject.height = obj.y + obj.height;
+        }
+      } else {
+        if (obj.width !== undefined) baseObject.width = obj.width;
+        if (obj.height !== undefined) baseObject.height = obj.height;
+      }
+
+      // برای circle در viewer-data.json، x, y به عنوان گوشه بالا-چپ bounding box است
+      // اما در editor، circle با مرکز در x, y ذخیره می‌شود
+      // پس باید تبدیل کنیم
+      if (obj.type === 'rectangle' && obj.shapeType === 'circle') {
+        // تبدیل از گوشه بالا-چپ به مرکز
+        baseObject.x = obj.x + (obj.width || 100) / 2;
+        baseObject.y = obj.y + (obj.height || 100) / 2;
+      }
+      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.rotation !== undefined) baseObject.rotation = obj.rotation;
+
+      // ویژگی‌های متنی
+      if (obj.text !== undefined) baseObject.text = obj.text;
+      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;
+
+      // انواع خاص objectها
+      if (obj.type === 'rectangle' && obj.shapeType) {
+        baseObject.shapeType = obj.shapeType as EditorObject['shapeType'];
+      }
+
+      if (obj.type === 'image' && obj.imageUrl) {
+        baseObject.imageUrl = obj.imageUrl;
+      }
+
+      if (obj.type === 'video' && obj.videoUrl) {
+        baseObject.videoUrl = obj.videoUrl;
+      }
+
+      if (obj.type === 'link' && obj.linkUrl) {
+        baseObject.linkUrl = obj.linkUrl;
+      }
+
+      if (obj.type === 'grid' && obj.tableData) {
+        baseObject.tableData = obj.tableData;
+      }
+
+      return baseObject;
+    });
+
+    return {
+      id: index + 1,
+      width: 794,
+      height: 1123,
+      elements: objects,
+    };
+  });
+}
+