# ماژول طراحی کارت پیشرفته V2

## معرفی

ماژول طراحی کارت پیشرفته V2 یک نسخه بهبود یافته و بهینه‌شده از طراح کارت ویزیت است که با تمرکز بر تجربه کاربری بهتر، خصوصاً در دستگاه‌های موبایل، طراحی شده است.

## ویژگی‌های جدید

### 1. Undo/Redo (بازگردانی/انجام مجدد)

– امکان بازگردانی و انجام مجدد تغییرات

– تاریخچه تا 50 تغییر اخیر

– دسترسی از طریق Toolbar یا کلیدهای میانبر (Ctrl+Z, Ctrl+Y)

### 2. Layers Panel (پنل لایه‌ها)

– نمایش تمام لایه‌های طراحی

– امکان انتخاب لایه با کلیک

– نمایش/مخفی کردن لایه‌ها

– تفکیک لایه‌های پیش‌زمینه و پس‌زمینه

### 3. Snap to Grid (چسبیدن به شبکه)

– فعال/غیرفعال کردن چسبیدن به شبکه

– تنظیم اندازه شبکه

– کمک به تراز کردن عناصر

### 4. Alignment Guides (راهنمای تراز)

– نمایش راهنماهای تراز هنگام جابجایی عناصر

– کمک به تراز کردن دقیق عناصر

### 5. بهینه‌سازی موبایل

– رابط کاربری بهینه شده برای موبایل

– کنترل‌های لمسی بهتر

– دکمه‌های بزرگ‌تر برای لمس راحت‌تر

– نوار ابزار قابل اسکرول

– تب‌های موبایل برای دسترسی آسان‌تر

### 6. Toolbar پیشرفته

– دسترسی سریع به Undo/Redo

– دکمه حذف

– کنترل Snap to Grid

– کنترل Alignment Guides

## نحوه استفاده

### نصب و Build

1. Build کردن React application:

“`bash

cd /home/admin/domains/cartfa.com/public_html/wp-content/plugins/vcardi

npm run build

“`

2. این دستور دو فایل ایجاد می‌کند:

-`assets/js/react-frontend.js` (برای طراح قدیمی)

-`assets/js/react-frontend-v2.js` (برای طراح جدید)

### استفاده در وردپرس

برای استفاده از طراح جدید، shortcode زیر را در صفحه مورد نظر قرار دهید:

“`

“`

برای استفاده از طراح قدیمی (همچنان موجود است):

“`

[vcardi_designer]

“`

## ساختار فایل‌ها

“`

src/

├── components-v2/ # کامپوننت‌های جدید

│ ├── App.js # کامپوننت اصلی

│ ├── App.css # استایل اصلی

│ ├── Canvas/ # کامپوننت Canvas

│ │ ├── Canvas.js

│ │ └── Canvas.css

│ ├── Sidebar/ # کامپوننت Sidebar

│ │ ├── Sidebar.js

│ │ ├── Sidebar.css

│ │ ├── ToolsSection.js

│ │ ├── ControlsSection.js

│ │ ├── SaveSection.js

│ │ └── LayersPanel.js # پنل لایه‌ها (جدید)

│ └── Toolbar/ # نوار ابزار (جدید)

│ ├── Toolbar.js

│ └── Toolbar.css

├── context/

│ └── CanvasContextV2.js # Context جدید با Undo/Redo

└── index-v2.js # Entry point جدید

templates/

└── designer-v2.php # Template جدید

includes/

└── class-vcardi-frontend.php # متد designer_v2_shortcode اضافه شده

“`

## تفاوت‌های کلیدی با نسخه قدیمی

1. **Context جدید**: `CanvasContextV2` با قابلیت Undo/Redo و مدیریت تاریخچه

2. **Toolbar**: نوار ابزار جدید در بالای صفحه

3. **Layers Panel**: پنل مدیریت لایه‌ها

4. **Snap to Grid**: چسبیدن به شبکه

5. **بهینه‌سازی موبایل**: رابط کاربری بهتر برای موبایل

6. **بهبود عملکرد**: بهینه‌سازی رندرینگ و مدیریت state

## ویژگی‌های حفظ شده

تمام ویژگی‌های نسخه قدیمی حفظ شده‌اند:

– اضافه کردن متن، شکل، تصویر، آیکون

– انتخاب رنگ و گرادیان

– الگوهای پس‌زمینه

– ذخیره و بارگذاری کارت

– قالب‌های آماده

– تمام ابزارهای موجود

## نکات مهم

1. **Build ضروری**: قبل از استفاده، باید React application را build کنید

2. **سازگاری**: نسخه قدیمی همچنان کار می‌کند و می‌توانید از هر دو استفاده کنید

3. **Auto-save**: طراحی به صورت خودکار در localStorage ذخیره می‌شود

4. **Mobile-first**: طراحی با اولویت موبایل انجام شده است

## توسعه و سفارشی‌سازی

برای اضافه کردن ویژگی‌های جدید:

1. کامپوننت‌های جدید را در `src/components-v2/` اضافه کنید

2. Context را در `src/context/CanvasContextV2.js` به‌روزرسانی کنید

3. Build را اجرا کنید: `npm run build`

## پشتیبانی

در صورت بروز مشکل:

1. مطمئن شوید که build انجام شده است

2. Console مرورگر را بررسی کنید

3. فایل‌های JavaScript در `assets/js/` موجود باشند