75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
HTML
<div class="graph-page">
|
|
|
|
<div class="page-header">
|
|
<div>
|
|
<h1>{{ chapter?.name || 'Chapitre' }} — Carte</h1>
|
|
<p class="subtitle">Organigramme des scènes et de leurs branches narratives</p>
|
|
</div>
|
|
<button type="button" class="btn-secondary" (click)="back()">
|
|
<lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
|
|
Retour au chapitre
|
|
</button>
|
|
</div>
|
|
|
|
<div class="graph-empty" *ngIf="scenes.length === 0">
|
|
<p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
|
|
</div>
|
|
|
|
<div class="graph-container" *ngIf="scenes.length > 0">
|
|
<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">
|
|
<g class="edge" *ngFor="let edge of edges">
|
|
<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)" />
|
|
<text *ngIf="edge.label"
|
|
[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">
|
|
<g class="node"
|
|
[class.dragging]="draggingId === node.id"
|
|
*ngFor="let node of nodes"
|
|
(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">
|
|
💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|