موتور رسم، قلب تپنده این پروژه است و بر پایه Immediate Mode Rendering طراحی شده است. در این رویکرد، در هر فریم (یا پس از هر تغییر state) کل بوم پاک‌سازی شده و تمامی المان‌ها از نو رسم می‌شوند. این رویکرد اگرچه در نگاه اول پرهزینه به نظر می‌رسد، اما به دلیل سادگی، قابلیت اطمینان بالا و عدم نیاز به مدیریت پیچیده Diff، برای این نوع ابزارها ایده‌آل است.
چرخه رسم (Render Loop):
- ۱. پاک‌سازی بوم:
ctx.clearRect() و رسم پس‌زمینه بر اساس تم.
- ۲. رسم Grid: بر اساس نوع انتخابی (Lines/Dots/None) با استفاده از CSS Variables.
- ۳. رسم المان‌ها: فراخوانی توابع اختصاصی هر نمودار (مانند
drawUseCase, drawClassDiagram).
- ۴. رسم روابط: پس از المان‌ها، روابط با محاسبه مرکز المان‌های مبدأ و مقصد رسم می‌شوند.
- ۵. رسم Selection: المان انتخاب‌شده با خط‌چین آبی‌رنگ مشخص می‌شود.
- ۶. رسم Relationship Preview: در حالت رسم رابطه، خط موقتی تا موقعیت ماوس نمایش داده می‌شود.
function draw() {
const d = getActive(), tc = getTC();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = tc.canvasBg;
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawGrid(ctx, canvas.width, canvas.height, tc, false);
if (!d) return;
drawDiag(ctx, d, tc);
}
💡 بهینه‌سازی: برای جلوگیری از رسم‌های مکرر غیرضروری، از تکنیک requestAnimationFrame و scheduleResize() استفاده شده است تا Resize رویدادها به‌صورت هوشمند مدیریت شوند.