81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<div class="graph-page">
|
|
|
|
<div class="page-header">
|
|
<div>
|
|
<h1>{{ 'chapterGraph.title' | translate:{ name: chapter?.name || ('chapterGraph.chapter' | translate) } }}</h1>
|
|
<p class="subtitle">{{ 'chapterGraph.subtitle' | translate }}</p>
|
|
</div>
|
|
<button type="button" class="btn-secondary" (click)="back()">
|
|
<lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
|
|
{{ 'chapterGraph.back' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
@if (scenes.length === 0) {
|
|
<div class="graph-empty">
|
|
<p>{{ 'chapterGraph.empty' | translate }}</p>
|
|
</div>
|
|
}
|
|
|
|
@if (scenes.length > 0) {
|
|
<div class="graph-container">
|
|
<svg #svgEl
|
|
[attr.width]="svgWidth" [attr.height]="svgHeight"
|
|
class="graph-svg"
|
|
(pointermove)="onPointerMove($event)"
|
|
(pointerup)="onPointerUp($event)"
|
|
(pointercancel)="onPointerUp($event)">
|
|
<defs>
|
|
<marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
|
|
markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
|
|
</marker>
|
|
</defs>
|
|
<g class="edges">
|
|
@for (edge of edges; track edge) {
|
|
<g class="edge">
|
|
<line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
|
|
[attr.x2]="edge.x2" [attr.y2]="edge.y2"
|
|
stroke="#b8c0cc" stroke-width="2"
|
|
marker-end="url(#arrowhead)" />
|
|
@if (edge.label) {
|
|
<text
|
|
[attr.x]="edge.labelX"
|
|
[attr.y]="edge.labelY"
|
|
text-anchor="middle"
|
|
class="edge-label"
|
|
[class.dragging]="draggingLabelKey === edge.key"
|
|
(pointerdown)="onLabelPointerDown($event, edge)">
|
|
{{ edge.label }}
|
|
</text>
|
|
}
|
|
</g>
|
|
}
|
|
</g>
|
|
<g class="nodes">
|
|
@for (node of nodes; track node) {
|
|
<g class="node"
|
|
[class.dragging]="draggingId === node.id"
|
|
(pointerdown)="onPointerDown($event, node)">
|
|
<title>{{ node.name }}</title>
|
|
<rect [attr.x]="node.x" [attr.y]="node.y"
|
|
[attr.width]="NODE_WIDTH" [attr.height]="NODE_HEIGHT"
|
|
rx="8" ry="8" class="node-box" />
|
|
<text [attr.x]="node.x + NODE_WIDTH / 2"
|
|
[attr.y]="node.y + NODE_HEIGHT / 2 + 5"
|
|
text-anchor="middle"
|
|
class="node-label">
|
|
{{ node.displayName }}
|
|
</text>
|
|
</g>
|
|
}
|
|
</g>
|
|
</svg>
|
|
<small class="graph-hint">
|
|
{{ 'chapterGraph.hint' | translate }}
|
|
</small>
|
|
</div>
|
|
}
|
|
|
|
</div>
|