Skip to content

Mamadf/Web-HW2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

پروژه‌ی React

این پروژه با استفاده از کتابخانه‌ی React پیاده‌سازی شده است.

✍️ توضیح کلی پروژه

در این پروژه، کاربر می‌تواند از طریق ابزارهای مختلف روی بوم (Canvas) تغییراتی اعمال کرده و اطلاعات مربوط به آن را در پنل‌های کناری مشاهده کند. این سیستم به‌صورت ماژولار طراحی شده و از کامپوننت‌های مستقل استفاده می‌کند تا قابلیت توسعه و نگهداری آسان‌تری داشته باشد. پیاده‌سازی به گونه‌ای انجام شده که از معماری component-based استفاده شود. برای هر بخش از رابط کاربری یک کامپوننت جداگانه تعریف شده است. ارتباط بین این کامپوننت‌ها از طریق props و state مدیریت می‌شود.

🧩 کامپوننت‌ها

  • Header: .این بخش شامل عنوان نقاشی و دکمه های ایمپورت و اکسپورت برای دریافت و بارگزاری نقاشی داخل بوم است
Screenshot (118)
  • Canvas: .بوم یا فضای کاری اصلی که کاربر روی آن عملیات انجام می‌دهد
Screenshot (122)
  • InfoPanel: .نمایش اطلاعات مربوط به وضعیت فعلی بوم و تعداد آیتم های انتخاب‌شده
Screenshot (121)
  • ToolsPanel: .شکل های قابل استفاده برای تعامل با بوم
Screenshot (120)

⚙️ برنامه

  • هدر:
Screenshot (123)

می توان نام نقاشی داخل کادر نوشت. برای ایمپورت و اکسپورت نیز دکمه قرار داده شده است.

  • پنل ابزار:
Screenshot (125)

برای درج شکل از این بخش به صورت drag and drop شکل به بوم اضافه می شود. برای حذف شکل نیز کافی است 2 بار روی شکل مورد نظر کلیک شود.

  • پنل اطلاعات:
Screenshot (124) در این بخش تعداد هر شکل نوشته شده است.
  • نمونه خروجی:
Screenshot (126)

🚀 اجرا

برای اجرای پروژه، مراحل زیر را انجام دهید:

git clone https://github.com/Mamadf/Web-HW2.git
cd Web-HW2
npm install #if it's not installed
npm start

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published