Files
xSaherelmWorkspace/Documents/Resources/Tools/Document/xUMLDrawer_Technical_Documentation.html
T
2026-09-12 23:04:57 +03:30

917 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مستند فنی پروژه | ابزار رسم نمودارهای UML</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
:root {
--primary: #1a365d;
--primary-light: #2c5282;
--accent: #c9a961;
--accent-dark: #a8893f;
--bg: #faf9f6;
--card-bg: #ffffff;
--text: #1a202c;
--text-muted: #4a5568;
--border: #e2e8f0;
--success: #38a169;
--danger: #e53e3e;
--warning: #dd6b20;
--shadow: 0 4px 6px rgba(0,0,0,0.05), 0 10px 30px rgba(26,54,93,0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Vazirmatn', Tahoma, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.9;
font-size: 15px;
padding: 30px 15px;
}
.document-container {
max-width: 950px;
margin: 0 auto;
background: var(--card-bg);
box-shadow: var(--shadow);
border-radius: 12px;
overflow: hidden;
}
.document-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
padding: 50px 40px 40px;
position: relative;
border-bottom: 4px solid var(--accent);
}
.document-header::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(201,169,97,0.15) 0%, transparent 70%);
border-radius: 50%;
transform: translate(50%, -50%);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.company-badge {
display: flex;
align-items: center;
gap: 12px;
}
.company-logo {
width: 60px; height: 60px;
background: var(--accent);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.doc-meta {
text-align: left;
font-size: 12px;
opacity: 0.9;
}
.doc-meta div { margin-bottom: 3px; }
.document-title {
text-align: center;
position: relative;
z-index: 1;
padding: 20px 0;
}
.document-title .label {
display: inline-block;
background: rgba(201,169,97,0.2);
color: var(--accent);
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
border: 1px solid rgba(201,169,97,0.4);
}
.document-title h1 {
font-size: 28px;
font-weight: 800;
margin-bottom: 10px;
letter-spacing: -0.5px;
}
.document-title h2 {
font-size: 16px;
font-weight: 400;
opacity: 0.9;
}
.document-body {
padding: 40px;
}
.intro-text {
background: linear-gradient(to left, #f7fafc, #edf2f7);
border-right: 4px solid var(--accent);
padding: 20px 25px;
border-radius: 8px;
margin-bottom: 35px;
font-size: 14px;
color: var(--text-muted);
}
.section {
margin-bottom: 40px;
page-break-inside: avoid;
}
.section-header {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
margin-bottom: 20px;
}
.section-number {
width: 50px; height: 50px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(26,54,93,0.2);
}
.section-title { flex: 1; }
.section-title h3 {
font-size: 19px;
font-weight: 700;
color: var(--primary);
margin-bottom: 2px;
}
.section-title .subtitle {
font-size: 12px;
color: var(--text-muted);
}
.section-content {
padding-right: 10px;
}
.section-content p {
margin-bottom: 12px;
text-align: justify;
text-indent: 20px;
}
.section-content p.no-indent { text-indent: 0; }
.highlight-box {
background: linear-gradient(to left, #fffaf0, #fef5e7);
border: 1px solid #f6e05e;
border-right: 4px solid var(--accent);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.highlight-box strong {
color: var(--accent-dark);
}
.info-box {
background: linear-gradient(to left, #ebf8ff, #e6f6ff);
border: 1px solid #90cdf4;
border-right: 4px solid var(--primary-light);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.success-box {
background: linear-gradient(to left, #f0fff4, #e6fffa);
border: 1px solid #9ae6b4;
border-right: 4px solid var(--success);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.warning-box {
background: linear-gradient(to left, #fffaf0, #fef5e7);
border: 1px solid #fbd38d;
border-right: 4px solid var(--warning);
padding: 18px 22px;
border-radius: 8px;
margin: 20px 0;
font-size: 14px;
}
.styled-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.styled-table thead {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
}
.styled-table th {
padding: 14px 16px;
text-align: right;
font-weight: 600;
font-size: 13px;
}
.styled-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.styled-table tbody tr:last-child td { border-bottom: none; }
.styled-table tbody tr:nth-child(even) { background: #f8fafc; }
.styled-table .highlight-row {
background: #fffaf0 !important;
font-weight: 600;
}
.code-block {
background: #1a202c;
color: #e2e8f0;
padding: 18px 22px;
border-radius: 8px;
margin: 15px 0;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 13px;
line-height: 1.7;
direction: ltr;
text-align: left;
overflow-x: auto;
border-right: 4px solid var(--accent);
}
.code-block .keyword { color: #f6ad55; }
.code-block .string { color: #9ae6b4; }
.code-block .comment { color: #718096; font-style: italic; }
.code-block .func { color: #90cdf4; }
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 25px 0;
}
.stat-card {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 12px rgba(26,54,93,0.2);
}
.stat-card .stat-value {
font-size: 24px;
font-weight: 800;
margin-bottom: 5px;
color: var(--accent);
line-height: 1.3;
}
.stat-card .stat-label {
font-size: 12px;
opacity: 0.9;
}
.diagram-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 25px 0;
}
.diagram-card {
background: #f8fafc;
border: 2px solid var(--border);
border-radius: 10px;
padding: 18px;
transition: all 0.2s;
}
.diagram-card:hover {
border-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(26,54,93,0.1);
}
.diagram-card .icon {
font-size: 28px;
margin-bottom: 8px;
}
.diagram-card h4 {
font-size: 15px;
font-weight: 700;
color: var(--primary);
margin-bottom: 6px;
}
.diagram-card p {
font-size: 12px;
color: var(--text-muted);
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.module-list {
list-style: none;
padding: 0;
margin: 15px 0;
}
.module-list li {
background: #f8fafc;
border-right: 3px solid var(--primary-light);
padding: 12px 18px;
margin-bottom: 10px;
border-radius: 6px;
font-size: 13px;
}
.module-list li strong {
color: var(--primary);
display: inline-block;
margin-left: 8px;
}
.conclusion-box {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
padding: 30px;
border-radius: 12px;
margin: 30px 0;
text-align: center;
box-shadow: 0 8px 20px rgba(26,54,93,0.3);
}
.conclusion-box h3 {
font-size: 22px;
font-weight: 800;
margin-bottom: 15px;
color: var(--accent);
}
.conclusion-box p {
font-size: 14px;
line-height: 1.8;
text-indent: 0 !important;
margin-bottom: 15px;
}
.conclusion-box .highlight {
background: rgba(201,169,97,0.2);
padding: 15px 20px;
border-radius: 8px;
margin-top: 20px;
border: 1px solid rgba(201,169,97,0.4);
}
.document-footer {
background: var(--primary);
color: white;
padding: 25px 40px;
text-align: center;
font-size: 12px;
margin-top: 40px;
}
.document-footer .footer-brand {
font-weight: 700;
color: var(--accent);
margin-bottom: 5px;
font-size: 14px;
}
.footer-divider {
width: 60px;
height: 2px;
background: var(--accent);
margin: 10px auto;
}
.page-info {
text-align: center;
padding: 15px;
font-size: 11px;
color: var(--text-muted);
border-top: 1px solid var(--border);
margin-top: 30px;
}
@media print {
body { background: white; padding: 0; }
.document-container { box-shadow: none; border-radius: 0; }
.section { page-break-inside: avoid; }
}
@media (max-width: 768px) {
.document-body { padding: 25px 20px; }
.document-header { padding: 30px 20px; }
.diagram-grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr; }
.header-top { flex-direction: column; gap: 15px; }
.doc-meta { text-align: center; }
}
</style>
</head>
<body>
<div class="document-container">
<header class="document-header">
<div class="header-top">
<div class="company-badge">
<div class="company-logo"></div>
</div>
<div class="doc-meta">
<div>شماره مستند: UML-TOOL-DOC-1405-001</div>
<div>نسخه: ۱.۰</div>
<div>تاریخ تهیه: ۱۶ شهریور ۱۴۰۵ — ساعت ۱۰:۳۰</div>
<div>طبقه‌بندی: محرمانه / فنی</div>
</div>
</div>
<div class="document-title">
<span class="label">TECHNICAL DOCUMENTATION</span>
<h1>مستند فنی پروژه ابزار رسم نمودارهای UML</h1>
<h2>تحلیل معماری، ماژول‌ها، موتور رسم و ساختار داده</h2>
</div>
</header>
<div class="document-body">
<div class="intro-text">
<strong>همکاران فنی و ذینفعان گرامی،</strong><br>
این مستند به‌عنوان مرجع فنی جامع پروژه «ابزار رسم نمودارهای UML» تهیه شده است. هدف از این مستند، تشریح دقیق معماری، ساختار کد، ماژول‌های کلیدی، الگوهای طراحی به‌کار رفته و قابلیت‌های فنی این ابزار می‌باشد تا تیم‌های توسعه و نگهداری بتوانند با دیدی کامل و یکپارچه، به تحلیل، توسعه و گسترش آن بپردازند.
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۱</div>
<div class="section-title">
<h3>خلاصه اجرایی پروژه</h3>
<div class="subtitle">Executive Summary</div>
</div>
</div>
<div class="section-content">
<p>پروژه «ابزار رسم نمودارهای UML» یک اپلیکیشن تحت وب کاملاً سمت کلاینت (Client-Side) است که با استفاده از تکنولوژی‌های HTML5، CSS3 و JavaScript خالص (Vanilla JS) توسعه یافته است. این ابزار بدون نیاز به هیچ‌گونه Backend یا فریم‌ورک خارجی، امکان رسم، ویرایش، ذخیره و بازیابی هشت نوع نمودار استاندارد UML را در محیطی تعاملی و حرفه‌ای فراهم می‌آورد.</p>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">۸</div>
<div class="stat-label">نوع نمودار UML پشتیبانی شده</div>
</div>
<div class="stat-card">
<div class="stat-value">۵۰+</div>
<div class="stat-label">المان و رابطه قابل رسم</div>
</div>
<div class="stat-card">
<div class="stat-value">۱۰۰٪</div>
<div class="stat-label">اجرا در سمت مرورگر (بدون Backend)</div>
</div>
</div>
<div class="highlight-box">
<strong>💎 ارزش کلیدی:</strong> این ابزار با تکیه بر HTML5 Canvas API و معماری ماژولار، یک محیط حرفه‌ای، سبک و کاملاً آفلاین برای مدل‌سازی سیستم‌های نرم‌افزاری در اختیار معماران و تحلیل‌گران قرار می‌دهد.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۲</div>
<div class="section-title">
<h3>معماری کلی سیستم</h3>
<div class="subtitle">System Architecture Overview</div>
</div>
</div>
<div class="section-content">
<p>معماری این پروژه بر پایه الگوی <strong>Single-Page Application (SPA)</strong> و با رویکرد <strong>State-Centric</strong> طراحی شده است. تمامی وضعیت‌های برنامه در یک آبجکت مرکزی <code>state</code> نگهداری می‌شوند و هر تغییر در state منجر به بازترسیم کامل (Redraw) بوم می‌گردد.</p>
<ul class="module-list">
<li><strong>🎨 Rendering Layer:</strong> موتور رسم مبتنی بر HTML5 Canvas 2D Context با قابلیت پشتیبانی از تم روشن و تاریک.</li>
<li><strong>🧠 State Management:</strong> یک آبجکت سراسری <code>state</code> که شامل لیست نمودارها، نمودار فعال، ابزار جاری، وضعیت Drag &amp; Draw و تنظیمات UI است.</li>
<li><strong>🖱️ Interaction Layer:</strong> مدیریت رویدادهای Mouse (mousedown, mousemove, mouseup, dblclick) و Keyboard برای تعامل با المان‌ها.</li>
<li><strong>💾 Persistence Layer:</strong> سیستم ذخیره‌سازی مبتنی بر JSON File API (بدون نیاز به LocalStorage یا Backend).</li>
<li><strong>🎛️ UI Layer:</strong> رابط کاربری مبتنی بر Sidebar، Tab Bar، Modal ها و Properties Panel.</li>
</ul>
<div class="code-block">
<span class="comment">// ساختار کلی State Object</span><br>
<span class="keyword">const</span> state = {<br>
&nbsp;&nbsp;diagrams: [],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// لیست همه نمودارها</span><br>
&nbsp;&nbsp;activeDiagramId: <span class="keyword">null</span>,&nbsp;&nbsp;<span class="comment">// شناسه نمودار فعال</span><br>
&nbsp;&nbsp;currentTool: <span class="string">'select'</span>,&nbsp;&nbsp;&nbsp;<span class="comment">// ابزار انتخاب‌شده</span><br>
&nbsp;&nbsp;selectedElement: <span class="keyword">null</span>,&nbsp;&nbsp;&nbsp;<span class="comment">// المان انتخاب‌شده</span><br>
&nbsp;&nbsp;isDragging: <span class="keyword">false</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// وضعیت Drag</span><br>
&nbsp;&nbsp;isDrawingRelationship: <span class="keyword">false</span>,<br>
&nbsp;&nbsp;darkMode: <span class="keyword">true</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// تم تاریک/روشن</span><br>
&nbsp;&nbsp;gridType: <span class="string">'lines'</span>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// نوع خط‌کشی بوم</span><br>
&nbsp;&nbsp;fileMetadata: { ... }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">// متادیتای پروژه</span><br>
};
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۳</div>
<div class="section-title">
<h3>تکنولوژی‌های به‌کار رفته</h3>
<div class="subtitle">Technology Stack</div>
</div>
</div>
<div class="section-content">
<table class="styled-table">
<thead>
<tr>
<th>لایه</th>
<th>تکنولوژی</th>
<th>نقش در پروژه</th>
</tr>
</thead>
<tbody>
<tr>
<td>ساختار</td>
<td>HTML5 Semantic</td>
<td>ساختار صفحه و المان‌های DOM</td>
</tr>
<tr>
<td>استایل</td>
<td>CSS3 + CSS Variables</td>
<td>طراحی RTL، تم داینامیک، گرادیانت‌ها</td>
</tr>
<tr>
<td>رسم گرافیکی</td>
<td>HTML5 Canvas 2D API</td>
<td>موتور رسم نمودارها، Grid و المان‌ها</td>
</tr>
<tr>
<td>منطق برنامه</td>
<td>Vanilla JavaScript (ES6+)</td>
<td>State Management، Event Handling، Drawing Engine</td>
</tr>
<tr>
<td>ذخیره‌سازی</td>
<td>File API + JSON</td>
<td>Export/Import پروژه به‌صورت فایل JSON</td>
</tr>
<tr>
<td>فونت</td>
<td>Vazirmatn (Google Fonts)</td>
<td>تایپوگرافی فارسی حرفه‌ای</td>
</tr>
<tr>
<td>استایل کمکی</td>
<td>Tailwind CSS (CDN)</td>
<td>Utility classes برای UI سریع</td>
</tr>
</tbody>
</table>
<div class="info-box">
<strong>💡 نکته معماری:</strong> انتخاب Vanilla JS به جای فریم‌ورک‌هایی مانند React یا Angular، باعث کاهش چشمگیر حجم نهایی (Bundle Size)، اجرای سریع‌تر و عدم وابستگی به ابزارهای Build شده است. این رویکرد برای ابزارهای تخصصی و آفلاین، انتخاب بهینه‌ای است.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۴</div>
<div class="section-title">
<h3>نمودارهای پشتیبانی‌شده</h3>
<div class="subtitle">Supported UML Diagrams</div>
</div>
</div>
<div class="section-content">
<p>این ابزار هشت نوع نمودار استاندارد UML را پشتیبانی می‌کند که هر کدام در رجیستری <code>DIAGRAM_TYPES</code> تعریف شده‌اند. این رجیستری به‌عنوان <strong>Single Source of Truth</strong> برای ابزارها، گروه‌ها و قابلیت‌های هر نمودار عمل می‌کند.</p>
<div class="diagram-grid">
<div class="diagram-card">
<div class="icon">⭕</div>
<h4>Use Case Diagram</h4>
<p>مدل‌سازی Actorها، Use Caseها، System Boundary و روابط Include/Extend/Generalization.</p>
</div>
<div class="diagram-card">
<div class="icon">🔄</div>
<h4>State Machine Diagram</h4>
<p>Initial/Final State، Stateها، Composite State و Transition با برچسب اختیاری.</p>
</div>
<div class="diagram-card">
<div class="icon">🔀</div>
<h4>Activity Diagram</h4>
<p>Action، Decision/Merge، Fork/Join و جریان‌های Control/Object Flow.</p>
</div>
<div class="diagram-card">
<div class="icon">🧩</div>
<h4>Component Diagram</h4>
<p>Component، Interface (Provided/Required)، Package و روابط Dependency/Connector.</p>
</div>
<div class="diagram-card">
<div class="icon">🖥️</div>
<h4>Deployment Diagram</h4>
<p>Node، Device، Execution Environment، Artifact و روابط Deploy/Manifest.</p>
</div>
<div class="diagram-card">
<div class="icon">🗂️</div>
<h4>Class Diagram</h4>
<p>Class، Interface، Abstract، Enumeration با Attributes/Methods و روابط کامل UML.</p>
</div>
<div class="diagram-card">
<div class="icon">🔢</div>
<h4>Sequence Diagram</h4>
<p>Participant، Activation، Combined Fragment و پیام‌های Sync/Async/Return/Self.</p>
</div>
<div class="diagram-card">
<div class="icon">▤</div>
<h4>Swimlane Diagram</h4>
<p>Swimlane افقی/عمودی با قابلیت Resize، Action، Decision و Fork/Join درون آن.</p>
</div>
</div>
<div class="code-block">
<span class="comment">// Registry الگوی طراحی - نمونه تعریف یک نمودار</span><br>
<span class="keyword">const</span> DIAGRAM_TYPES = {<br>
&nbsp;&nbsp;usecase: {<br>
&nbsp;&nbsp;&nbsp;&nbsp;id: <span class="string">'usecase'</span>,<br>
&nbsp;&nbsp;&nbsp;&nbsp;name: <span class="string">'نمودار مورد کاربرد (Use Case)'</span>,<br>
&nbsp;&nbsp;&nbsp;&nbsp;icon: <span class="string">'⭕'</span>,<br>
&nbsp;&nbsp;&nbsp;&nbsp;tools: [<span class="string">'select'</span>, <span class="string">'actor'</span>, <span class="string">'useCase'</span>, <span class="string">'boundary'</span>, ...],<br>
&nbsp;&nbsp;&nbsp;&nbsp;groups: [<span class="string">'selection'</span>, <span class="string">'uc-elements'</span>, <span class="string">'uc-relations'</span>, ...]<br>
&nbsp;&nbsp;},<br>
&nbsp;&nbsp;<span class="comment">// ... سایر نمودارها</span><br>
};
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۵</div>
<div class="section-title">
<h3>موتور رسم (Drawing Engine)</h3>
<div class="subtitle">Canvas Rendering Engine</div>
</div>
</div>
<div class="section-content">
<p>موتور رسم، قلب تپنده این پروژه است و بر پایه <strong>Immediate Mode Rendering</strong> طراحی شده است. در این رویکرد، در هر فریم (یا پس از هر تغییر state) کل بوم پاک‌سازی شده و تمامی المان‌ها از نو رسم می‌شوند. این رویکرد اگرچه در نگاه اول پرهزینه به نظر می‌رسد، اما به دلیل سادگی، قابلیت اطمینان بالا و عدم نیاز به مدیریت پیچیده Diff، برای این نوع ابزارها ایده‌آل است.</p>
<h4 style="margin-top: 20px; color: var(--primary); font-size: 16px;">چرخه رسم (Render Loop):</h4>
<ul class="module-list">
<li><strong>۱. پاک‌سازی بوم:</strong> <code>ctx.clearRect()</code> و رسم پس‌زمینه بر اساس تم.</li>
<li><strong>۲. رسم Grid:</strong> بر اساس نوع انتخابی (Lines/Dots/None) با استفاده از CSS Variables.</li>
<li><strong>۳. رسم المان‌ها:</strong> فراخوانی توابع اختصاصی هر نمودار (مانند <code>drawUseCase</code>, <code>drawClassDiagram</code>).</li>
<li><strong>۴. رسم روابط:</strong> پس از المان‌ها، روابط با محاسبه مرکز المان‌های مبدأ و مقصد رسم می‌شوند.</li>
<li><strong>۵. رسم Selection:</strong> المان انتخاب‌شده با خط‌چین آبی‌رنگ مشخص می‌شود.</li>
<li><strong>۶. رسم Relationship Preview:</strong> در حالت رسم رابطه، خط موقتی تا موقعیت ماوس نمایش داده می‌شود.</li>
</ul>
<div class="code-block">
<span class="comment">// چرخه اصلی رسم</span><br>
<span class="keyword">function</span> <span class="func">draw</span>() {<br>
&nbsp;&nbsp;<span class="keyword">const</span> d = <span class="func">getActive</span>(), tc = <span class="func">getTC</span>();<br>
&nbsp;&nbsp;ctx.<span class="func">clearRect</span>(0, 0, canvas.width, canvas.height);<br>
&nbsp;&nbsp;ctx.fillStyle = tc.canvasBg;<br>
&nbsp;&nbsp;ctx.<span class="func">fillRect</span>(0, 0, canvas.width, canvas.height);<br>
&nbsp;&nbsp;<span class="func">drawGrid</span>(ctx, canvas.width, canvas.height, tc, <span class="keyword">false</span>);<br>
&nbsp;&nbsp;<span class="keyword">if</span> (!d) <span class="keyword">return</span>;<br>
&nbsp;&nbsp;<span class="func">drawDiag</span>(ctx, d, tc);&nbsp;<span class="comment">// Dispatch به تابع اختصاصی</span><br>
}
</div>
<div class="info-box">
<strong>💡 بهینه‌سازی:</strong> برای جلوگیری از رسم‌های مکرر غیرضروری، از تکنیک <code>requestAnimationFrame</code> و <code>scheduleResize()</code> استفاده شده است تا Resize رویدادها به‌صورت هوشمند مدیریت شوند.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۶</div>
<div class="section-title">
<h3>سیستم مدیریت تم و رنگ</h3>
<div class="subtitle">Theme & Color System</div>
</div>
</div>
<div class="section-content">
<p>سیستم تم این پروژه بر پایه <strong>CSS Custom Properties (Variables)</strong> طراحی شده است. با تغییر کلاس <code>body.dark</code>، تمامی متغیرهای رنگی به‌صورت آنی تغییر می‌کنند و موتور رسم نیز از طریق تابع <code>getTC()</code> این مقادیر را در زمان اجرا (Runtime) از DOM استخراج می‌کند.</p>
<table class="styled-table">
<thead>
<tr>
<th>متغیر CSS</th>
<th>نقش</th>
<th>مثال مقدار (Dark Mode)</th>
</tr>
</thead>
<tbody>
<tr><td><code>--canvas-bg</code></td><td>پس‌زمینه بوم</td><td>#0f1724</td></tr>
<tr><td><code>--actor-stroke</code></td><td>رنگ خط Actor</td><td>#cbd5e0</td></tr>
<tr><td><code>--class-fill</code></td><td>رنگ زمینه Class</td><td>#1e2d40</td></tr>
<tr><td><code>--seq-msg</code></td><td>رنگ پیام‌های Sequence</td><td>#cbd5e0</td></tr>
<tr><td><code>--selected</code></td><td>رنگ المان انتخاب‌شده</td><td>#667eea</td></tr>
</tbody>
</table>
<div class="success-box">
<strong>✓ مزیت این رویکرد:</strong> افزودن یک تم جدید (مانند تم آبی، سبز یا High-Contrast) تنها با تغییر چند متغیر CSS امکان‌پذیر است و هیچ تغییری در منطق JavaScript نیاز نیست.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۷</div>
<div class="section-title">
<h3>سیستم تعامل و Hit Testing</h3>
<div class="subtitle">Interaction & Hit Testing System</div>
</div>
</div>
<div class="section-content">
<p>برای تشخیص اینکه ماوس روی کدام المان قرار دارد، از الگوی <strong>Hit Testing</strong> استفاده می‌شود. تابع <code>hitTest(x, y)</code> بر اساس نوع نمودار فعال، الگوریتم‌های متفاوتی را اجرا می‌کند:</p>
<ul class="module-list">
<li><strong>Actor:</strong> محاسبه فاصله اقلیتسی (Bounding Box 50×80 پیکسل).</li>
<li><strong>Use Case (بیضی):</strong> استفاده از معادله استاندارد بیضی <code>(x²/a²) + (y²/b²) ≤ 1</code>.</li>
<li><strong>State/Action/Component (مستطیل با گوشه گرد):</strong> بررسی Bounding Box.</li>
<li><strong>Decision (لوزی):</strong> استفاده از معادله لوزی <code>|x| + |y| ≤ size</code>.</li>
<li><strong>Class:</strong> بررسی بر اساس ارتفاع محاسبه‌شده داینامیک (<code>_computedH</code>).</li>
<li><strong>Swimlane:</strong> علاوه بر Hit Test بدنه، بررسی ۸ Handle برای Resize.</li>
</ul>
<div class="warning-box">
<strong>⚠️ چالش فنی:</strong> در نمودار Class، ارتفاع به‌صورت داینامیک بر اساس تعداد Attributes و Methods محاسبه می‌شود. این مقدار در هر Draw در <code>cls._computedH</code> ذخیره می‌گردد تا در Hit Test نیز قابل استفاده باشد.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۸</div>
<div class="section-title">
<h3>سیستم ذخیره‌سازی و بازیابی</h3>
<div class="subtitle">Persistence & File System</div>
</div>
</div>
<div class="section-content">
<p>سیستم Persistence این پروژه کاملاً مبتنی بر <strong>JSON File API</strong> است و از LocalStorage یا IndexedDB استفاده نمی‌کند. این تصمیم معماری، مزایای زیر را به همراه دارد:</p>
<ul class="module-list">
<li><strong>قابلیت اشتراک‌گذاری آسان:</strong> فایل JSON به‌راحتی قابل ارسال از طریق ایمیل، Git یا پیام‌رسان‌ها است.</li>
<li><strong>نسخه‌بندی (Versioning):</strong> فایل‌ها می‌توانند در Git نگهداری و Diff شوند.</li>
<li><strong>عدم وابستگی به مرورگر:</strong> با پاک‌سازی Cache مرورگر، داده‌ها از بین نمی‌روند.</li>
<li><strong>ساختار قابل توسعه:</strong> فرمت JSON به‌راحتی قابل گسترش است.</li>
</ul>
<div class="code-block">
<span class="comment">// ساختار فایل خروجی JSON</span><br>
{<br>
&nbsp;&nbsp;<span class="string">"version"</span>: <span class="string">"5.1"</span>,<br>
&nbsp;&nbsp;<span class="string">"fileTitle"</span>: <span class="string">"عنوان پروژه"</span>,<br>
&nbsp;&nbsp;<span class="string">"author"</span>: <span class="string">"هادی خزاعی اصل"</span>,<br>
&nbsp;&nbsp;<span class="string">"organization"</span>: <span class="string">"رایان پرداز کاوش"</span>,<br>
&nbsp;&nbsp;<span class="string">"createdAt"</span>: <span class="string">"2026-09-07T10:30:00.000Z"</span>,<br>
&nbsp;&nbsp;<span class="string">"preferences"</span>: { <span class="string">"gridType"</span>: <span class="string">"lines"</span>, <span class="string">"darkMode"</span>: <span class="keyword">true</span> },<br>
&nbsp;&nbsp;<span class="string">"diagrams"</span>: [ /* آرایه نمودارها */ ]<br>
}
</div>
<div class="info-box">
<strong>💡 Backward Compatibility:</strong> در هنگام Load فایل، کد با استفاده از <code>||</code> operator، فیلدهای اختیاری را مقداردهی پیش‌فرض می‌کند تا فایل‌های نسخه‌های قدیمی‌تر نیز بدون خطا بارگذاری شوند.
</div>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۹</div>
<div class="section-title">
<h3>الگوهای طراحی به‌کار رفته</h3>
<div class="subtitle">Design Patterns</div>
</div>
</div>
<div class="section-content">
<p>در این پروژه، چندین الگوی طراحی شناخته‌شده به‌صورت عملی پیاده‌سازی شده‌اند:</p>
<table class="styled-table">
<thead>
<tr>
<th>الگو</th>
<th>محل کاربرد</th>
<th>توضیح</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Registry Pattern</strong></td>
<td><code>DIAGRAM_TYPES</code></td>
<td>مرجع مرکزی تعریف انواع نمودار و قابلیت‌های آن‌ها</td>
</tr>
<tr>
<td><strong>State Pattern</strong></td>
<td>آبجکت <code>state</code></td>
<td>مدیریت وضعیت سراسری برنامه</td>
</tr>
<tr>
<td><strong>Strategy Pattern</strong></td>
<td>توابع <code>drawUseCase</code>, <code>drawClassDiagram</code>, ...</td>
<td>انتخاب استراتژی رسم بر اساس نوع نمودار</td>
</tr>
<tr>
<td><strong>Command Pattern</strong></td>
<td>مدیریت ابزارها (Tools)</td>
<td>هر ابزار یک رفتار مشخص را در mousedown/mouseup اجرا می‌کند</td>
</tr>
<tr>
<td><strong>Observer Pattern</strong></td>
<td>Event Listeners</td>
<td>واکنش به رویدادهای Mouse، Keyboard و UI</td>
</tr>
<tr>
<td><strong>Factory Pattern</strong></td>
<td><code>createNewDiagram()</code></td>
<td>ساخت ساختار اولیه نمودار بر اساس نوع</td>
</tr>
<tr>
<td><strong>Singleton Pattern</strong></td>
<td>Canvas Context، State Object</td>
<td>تنها یک نمونه از منابع حیاتی در طول اجرا</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۱۰</div>
<div class="section-title">
<h3>قابلیت‌های کلیدی و UX</h3>
<div class="subtitle">Key Features & UX</div>
</div>
</div>
<div class="section-content">
<ul class="module-list">
<li><strong>🗂️ مدیریت چند نمودار (Multi-Tab):</strong> امکان باز کردن هم‌زمان چندین نمودار در تب‌های مجزا با امکان سوئیچ سریع.</li>
<li><strong>🌙 تم تاریک/روشن:</strong> سوئیچ آنی با حفظ ترجیحات در فایل پروژه.</li>
<li><strong>⌨️ کلیدهای میانبر:</strong> Ctrl+S (ذخیره)، Ctrl+N (جدید)، Delete (حذف)، B (Sidebar)، G (Grid).</li>
<li><strong>🎨 Properties Panel:</strong> ویرایش زنده ویژگی‌های المان انتخاب‌شده در پایین صفحه.</li>
<li><strong>🗂️ Class Editor Modal:</strong> ویرایشگر پیشرفته Attributes و Methods با Visibility، Static و Type.</li>
<li><strong>📐 Resize Handles:</strong> قابلیت تغییر اندازه Swimlane با ۸ Handle در گوشه‌ها و اضلاع.</li>
<li><strong>🖼️ Export to PNG:</strong> خروجی با کیفیت از نمودار فعلی با قابلیت انتخاب رنگ پس‌زمینه یا شفافیت.</li>
<li><strong>📦 Grid System:</strong> سه حالت (Lines, Dots, None) برای کمک به چیدمان دقیق المان‌ها.</li>
<li><strong>🔗 Relationship Drawing:</strong> رسم روابط با Drag از مبدأ به مقصد و Prompt برای برچسب و Multiplicity.</li>
</ul>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۱۱</div>
<div class="section-title">
<h3>نقاط قوت و پیشنهادات بهبود</h3>
<div class="subtitle">Strengths & Recommendations</div>
</div>
</div>
<div class="section-content">
<table class="styled-table">
<thead>
<tr>
<th>دسته</th>
<th>نقاط قوت فعلی</th>
<th>پیشنهادات بهبود</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>معماری</strong></td>
<td>بدون وابستگی خارجی، سبک و سریع</td>
<td>ماژولار کردن کد با ES Modules برای نگهداری بهتر</td>
</tr>
<tr>
<td><strong>عملکرد</strong></td>
<td>اجرای روان در نمودارهای کوچک و متوسط</td>
<td>پیاده‌سازی Dirty Rectangle Rendering برای نمودارهای بزرگ</td>
</tr>
<tr>
<td><strong>UX</strong></td>
<td>رابط کاربری شهودی با RTL کامل</td>
<td>افزودن Undo/Redo با Command History</td>
</tr>
<tr>
<td><strong>ذخیره‌سازی</strong></td>
<td>خروجی JSON قابل اشتراک</td>
<td>افزودن Auto-Save در LocalStorage به‌عنوان Backup</td>
</tr>
<tr>
<td><strong>توسعه‌پذیری</strong></td>
<td>Registry Pattern برای افزودن نمودار جدید</td>
<td>افزودن نمودارهای Package و Communication</td>
</tr>
<tr>
<td><strong>خروجی</strong></td>
<td>PNG با کیفیت</td>
<td>افزودن Export به SVG، PDF و XMI استاندارد</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-header">
<div class="section-number">۱۲</div>
<div class="section-title">
<h3>جمع‌بندی نهایی</h3>
<div class="subtitle">Final Conclusion</div>
</div>
</div>
<div class="section-content">
<p>پروژه «ابزار رسم نمودارهای UML» یک نمونه موفق از توسعه یک اپلیکیشن تخصصی و حرفه‌ای با استفاده از تکنولوژی‌های پایه وب است. این ابزار با تکیه بر معماری State-Centric، موتور رسم مبتنی بر Canvas و سیستم Registry منعطف، توانایی مدل‌سازی کامل سیستم‌های نرم‌افزاری را در محیطی آفلاین و سبک فراهم می‌آورد.</p>
<div class="conclusion-box">
<h3>🎯 نتیجه‌گیری معماری</h3>
<p>این پروژه نشان می‌دهد که برای ساخت ابزارهای تخصصی، لزومی به استفاده از فریم‌ورک‌های سنگین نیست. با طراحی دقیق معماری، انتخاب الگوهای مناسب و تمرکز بر تجربه کاربری، می‌توان محصولی در سطح Enterprise تولید کرد که کاملاً مستقل، قابل نگهداری و توسعه‌پذیر باشد.</p>
<div class="highlight">
<strong>💎 ارزش نهایی:</strong> ابزاری کاملاً آفلاین، سبک، حرفه‌ای و مستقل که نیاز هر معمار و تحلیل‌گر نرم‌افزار را برای مدل‌سازی سریع و دقیق برطرف می‌سازد.
</div>
</div>
<div class="info-box">
<strong>📞 گام بعدی:</strong> برای توسعه نسخه‌های آتی، پیشنهاد می‌شود ماژول‌های Undo/Redo، Export به فرمت‌های استاندارد (XMI, SVG) و افزودن نمودارهای Interaction اضافه گردد.
</div>
</div>
</div>
<div class="page-info">
این مستند محرمانه بوده و صرفاً جهت استفاده داخلی تیم فنی تهیه شده است. هرگونه کپی‌برداری یا افشا بدون اجازه کتبی ممنوع است.
</div>
</div>
<footer class="document-footer">
<div class="footer-brand">طراحی، تحلیل و توسعه: هادی خزاعی اصل</div>
<div class="footer-divider"></div>
<div>تاریخ تهیه: ۱۶ شهریور ۱۴۰۵ — ساعت ۱۰:۳۰ &nbsp;|&nbsp; نسخه: ۱.۰ &nbsp;|&nbsp; طبقه‌بندی: محرمانه / فنی</div>
</footer>
</div>
</body>
</html>