65 lines
3.5 KiB
Plaintext
65 lines
3.5 KiB
Plaintext
@model GanjooRazor.Pages._PersonGraphPartialModel
|
|
|
|
@if (Model.Graph == null || Model.Graph.Nodes == null || Model.Graph.Nodes.Count == 0)
|
|
{
|
|
<p>برای این بخش هنوز شخصیتی برچسب‌گذاری نشده است.</p>
|
|
}
|
|
else
|
|
{
|
|
<div id="pg-cat-section">
|
|
<p class="up-hint"><small>
|
|
روی هر گره کلیک کنید تا فقط ارتباط‌های همان شخص برجسته شود (کلیک دوباره برای بازگشت)؛ برای جابه‌جایی یک گره آن را بکشید (برای رها کردنش دوبار کلیک کنید).
|
|
برای پیمایش نمودار آن را با ماوس بکشید و با غلتک ماوس بزرگ/کوچک کنید.
|
|
@if (Model.HasSecondaryNodes)
|
|
{
|
|
<text> گره‌های نقطه‌چین/کم‌رنگ، خویشاوندان یا وابستگانی هستند که در متن این بخش نامشان نیامده، اما برای آشنایی بیشتر با داستان نشان داده شده‌اند.</text>
|
|
}
|
|
</small></p>
|
|
|
|
<div style="margin-bottom:10px;">
|
|
<input type="text" id="pg-cat-search" placeholder="جستجوی نام شخصیت..." style="width:240px;" />
|
|
<a role="button" id="pg-cat-reset" class="up-btn up-btn--ghost up-btn--sm">نمایش همه</a>
|
|
<a role="button" href="/PeopleGraph" class="up-btn up-btn--ghost up-btn--sm">نمایش شبکهٔ کامل شخصیت‌ها</a>
|
|
</div>
|
|
|
|
<div id="pg-cat-legend" class="pg-legend"></div>
|
|
|
|
<div id="pg-cat-container" style="position:relative;width:100%;height:55vh;border:1px solid #d8cdb8;border-radius:6px;overflow:hidden;background:#faf7f0;">
|
|
<svg id="pg-cat-svg" width="100%" height="100%"></svg>
|
|
</div>
|
|
|
|
<div class="spacer"> </div>
|
|
|
|
<div style="max-height:30vh;overflow:auto;">
|
|
<table class="up-table">
|
|
<thead>
|
|
<tr>
|
|
<th>شخص اول</th>
|
|
<th>نوع ارتباط</th>
|
|
<th>شخص دوم</th>
|
|
<th>یادداشت</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="pg-cat-table-body"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<style>
|
|
.pg-circle { fill: #fdf6e6; stroke: #8b6b4a; stroke-width: 1.5; }
|
|
.pg-circle-tree { fill: #f3e2b8; stroke: #7a4a2a; stroke-width: 2; }
|
|
.pg-circle-secondary { stroke-dasharray: 3,2; opacity: 0.7; }
|
|
.pg-label { font-size: 11px; fill: #4a3520; font-family: inherit; }
|
|
.pg-label-secondary { opacity: 0.7; font-style: italic; }
|
|
.pg-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
|
|
.pg-legend-item { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
|
|
.pg-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
|
|
</style>
|
|
|
|
@* not an executable script - just a data holder, parsed and rendered explicitly by
|
|
loadPersonGraph() in bk.js once this fragment has been appended to the page, same
|
|
convention used for the JSON blob is deliberately not the ajax response's inline <script>
|
|
since script tags injected via $(data).appendTo(...) don't reliably auto-execute *@
|
|
<script type="application/json" id="pg-cat-data">@Html.Raw(Model.GraphDataJson)</script>
|
|
</div>
|
|
}
|