doc-survival-kit 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +248 -0
- package/admin.html +329 -0
- package/bin/cli.js +77 -0
- package/diagram.html +234 -0
- package/diagram.js +1572 -0
- package/diagrammes.js +231 -0
- package/i18n/en.js +186 -0
- package/i18n/fr.js +187 -0
- package/i18n/i18n.js +27 -0
- package/images/diagram-overview.png +0 -0
- package/images/img_1774270331723.png +0 -0
- package/index.html +340 -0
- package/liens.js +391 -0
- package/mesLiens.js +66 -0
- package/mesNotes.js +90 -0
- package/notes.js +561 -0
- package/package.json +42 -0
- package/style.css +1460 -0
- package/taches.js +96 -0
package/diagram.html
ADDED
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="fr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title data-i18n="diag_page_title">Diagrammes</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body class="diagram-page">
|
|
10
|
+
|
|
11
|
+
<!-- Bouton retour — fixe en haut à droite (comme ⚙ sur index.html) -->
|
|
12
|
+
<a href="index.html" class="diagram-topbar-back" title="Retour">←</a>
|
|
13
|
+
|
|
14
|
+
<!-- Barre d'outils -->
|
|
15
|
+
<div class="diagram-topbar">
|
|
16
|
+
|
|
17
|
+
<!-- ☰ Liste des diagrammes — premier à gauche -->
|
|
18
|
+
<button class="diagram-tool" onclick="toggleDiagramList()" data-i18n-title="diag_my_diagrams">☰</button>
|
|
19
|
+
<span class="diagram-sep">|</span>
|
|
20
|
+
|
|
21
|
+
<!-- Outils formes -->
|
|
22
|
+
<button class="diagram-tool active" id="toolSelect" onclick="setTool('select')" data-i18n-title="diag_tool_select">
|
|
23
|
+
<svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor" stroke="none">
|
|
24
|
+
<path d="M1 1 L1 13 L4.5 9.5 L7 14 L9 13 L6.5 8.5 L11 8.5 Z"/>
|
|
25
|
+
</svg>
|
|
26
|
+
</button>
|
|
27
|
+
<button class="diagram-tool" id="toolRect" onclick="setTool('rect')" data-i18n-title="diag_tool_rect">
|
|
28
|
+
<svg width="18" height="11" viewBox="0 0 18 11" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
29
|
+
<rect x="1" y="1" width="16" height="9" rx="1"/>
|
|
30
|
+
</svg>
|
|
31
|
+
</button>
|
|
32
|
+
<button class="diagram-tool" id="toolRounded" onclick="setTool('rounded')" data-i18n-title="diag_tool_rounded">
|
|
33
|
+
<svg width="18" height="11" viewBox="0 0 18 11" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
34
|
+
<rect x="1" y="1" width="16" height="9" rx="4.5"/>
|
|
35
|
+
</svg>
|
|
36
|
+
</button>
|
|
37
|
+
<button class="diagram-tool" id="toolDb" onclick="setTool('db')" data-i18n-title="diag_tool_db">
|
|
38
|
+
<svg width="14" height="17" viewBox="0 0 14 17" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
39
|
+
<ellipse cx="7" cy="3.5" rx="5.5" ry="2.5"/>
|
|
40
|
+
<path d="M1.5 3.5v10c0 1.4 2.5 2.5 5.5 2.5s5.5-1.1 5.5-2.5V3.5"/>
|
|
41
|
+
<path d="M12.5 8.5c0 1.4-2.5 2.5-5.5 2.5S1.5 9.9 1.5 8.5"/>
|
|
42
|
+
</svg>
|
|
43
|
+
</button>
|
|
44
|
+
<button class="diagram-tool" id="toolCloud" onclick="setTool('cloud')" data-i18n-title="diag_tool_cloud">
|
|
45
|
+
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
46
|
+
<ellipse cx="8" cy="7" rx="7" ry="6"/>
|
|
47
|
+
</svg>
|
|
48
|
+
</button>
|
|
49
|
+
<button class="diagram-tool" id="toolText" onclick="setTool('text')" data-i18n-title="diag_tool_text">T</button>
|
|
50
|
+
<button class="diagram-tool" id="toolPostit" onclick="setTool('postit')" data-i18n-title="diag_tool_postit">
|
|
51
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
|
|
52
|
+
<path d="M1 1 L9 1 L13 5 L13 13 L1 13 Z"/>
|
|
53
|
+
<path d="M9 1 L9 5 L13 5" stroke-opacity="0.5"/>
|
|
54
|
+
</svg>
|
|
55
|
+
</button>
|
|
56
|
+
<span class="diagram-sep">|</span>
|
|
57
|
+
|
|
58
|
+
<!-- Outil flèche -->
|
|
59
|
+
<button class="diagram-tool" id="toolArrow" onclick="setTool('arrow')" data-i18n-title="diag_tool_arrow">→</button>
|
|
60
|
+
<span class="diagram-sep">|</span>
|
|
61
|
+
|
|
62
|
+
<!-- Supprimer -->
|
|
63
|
+
<button class="diagram-tool" id="btnDelSelected" onclick="deleteSelected()" data-i18n-title="diag_tool_delete">✕</button>
|
|
64
|
+
<span class="diagram-sep">|</span>
|
|
65
|
+
|
|
66
|
+
<!-- Verrouiller -->
|
|
67
|
+
<button class="diagram-tool" id="btnLock" onclick="toggleBoardLock()" title="Verrouiller le diagramme">
|
|
68
|
+
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
69
|
+
<rect x="1" y="7" width="12" height="8" rx="2"/>
|
|
70
|
+
<path d="M4 7V4.5a3 3 0 0 1 6 0"/>
|
|
71
|
+
</svg>
|
|
72
|
+
</button>
|
|
73
|
+
<span class="diagram-sep">|</span>
|
|
74
|
+
|
|
75
|
+
<!-- Titre (prend l'espace restant) -->
|
|
76
|
+
<input type="text" id="diagramTitle" class="diagram-title-input" />
|
|
77
|
+
|
|
78
|
+
<span class="diagram-sep">|</span>
|
|
79
|
+
|
|
80
|
+
<!-- Zoom -->
|
|
81
|
+
<button class="diagram-tool" onclick="zoomOut()" title="−">−</button>
|
|
82
|
+
<span id="zoomLevel" class="zoom-level">100%</span>
|
|
83
|
+
<button class="diagram-tool" onclick="zoomIn()" title="+">+</button>
|
|
84
|
+
<button class="diagram-tool" onclick="resetZoom()" title="⊡">⊡</button>
|
|
85
|
+
<span class="diagram-sep">|</span>
|
|
86
|
+
|
|
87
|
+
<!-- Enregistrer -->
|
|
88
|
+
<button class="btn-save diagram-btn-save" id="btnSaveDiagram" style="display:none" onclick="enregistrerDiagrammes()" data-i18n="diag_btn_save">enregistrer</button>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Panneau liste des diagrammes -->
|
|
92
|
+
<div id="diagramListPanel" class="diagram-list-panel">
|
|
93
|
+
<div class="diagram-list-header">
|
|
94
|
+
<span data-i18n="diag_my_diagrams">Mes diagrammes</span>
|
|
95
|
+
<button onclick="creerDiagramme()" data-i18n="diag_btn_new">+ Nouveau</button>
|
|
96
|
+
</div>
|
|
97
|
+
<div id="diagramList"></div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Palette de couleurs (visible quand forme sélectionnée) -->
|
|
101
|
+
<div id="colorPanel" class="diagram-color-panel" style="display:none">
|
|
102
|
+
<button class="color-dot t-green" onclick="setShapeColor('t-green')"></button>
|
|
103
|
+
<button class="color-dot t-violet" onclick="setShapeColor('t-violet')"></button>
|
|
104
|
+
<button class="color-dot t-amber" onclick="setShapeColor('t-amber')"></button>
|
|
105
|
+
<button class="color-dot t-sky" onclick="setShapeColor('t-sky')"></button>
|
|
106
|
+
<button class="color-dot t-rose" onclick="setShapeColor('t-rose')"></button>
|
|
107
|
+
<button class="color-dot t-teal" onclick="setShapeColor('t-teal')"></button>
|
|
108
|
+
<span style="width:1px;background:#e7e5e4;margin:0 4px;align-self:stretch;"></span>
|
|
109
|
+
<button class="diagram-color-edit" onclick="startTextEdit(selectedId)" data-i18n-title="diag_edit_text">✎</button>
|
|
110
|
+
<span style="width:1px;background:#e7e5e4;margin:0 4px;align-self:stretch;"></span>
|
|
111
|
+
<button class="diagram-color-edit diagram-color-font" onclick="changeShapeFontSize(1)" title="Agrandir la police">Aa+</button>
|
|
112
|
+
<button class="diagram-color-edit diagram-color-font" onclick="changeShapeFontSize(-1)" title="Réduire la police">Aa−</button>
|
|
113
|
+
<span style="width:1px;background:#e7e5e4;margin:0 4px;align-self:stretch;"></span>
|
|
114
|
+
<button class="diagram-color-edit" onclick="setShapeTextAlign('left')" title="Aligner à gauche">
|
|
115
|
+
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
|
116
|
+
<line x1="1" y1="2" x2="12" y2="2"/>
|
|
117
|
+
<line x1="1" y1="5.5" x2="8" y2="5.5"/>
|
|
118
|
+
<line x1="1" y1="9" x2="10" y2="9"/>
|
|
119
|
+
</svg>
|
|
120
|
+
</button>
|
|
121
|
+
<button class="diagram-color-edit" onclick="setShapeTextAlign('center')" title="Centrer">
|
|
122
|
+
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
|
123
|
+
<line x1="1" y1="2" x2="12" y2="2"/>
|
|
124
|
+
<line x1="2.5" y1="5.5" x2="10.5" y2="5.5"/>
|
|
125
|
+
<line x1="1.5" y1="9" x2="11.5" y2="9"/>
|
|
126
|
+
</svg>
|
|
127
|
+
</button>
|
|
128
|
+
<button class="diagram-color-edit" onclick="setShapeTextAlign('right')" title="Aligner à droite">
|
|
129
|
+
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
|
130
|
+
<line x1="1" y1="2" x2="12" y2="2"/>
|
|
131
|
+
<line x1="5" y1="5.5" x2="12" y2="5.5"/>
|
|
132
|
+
<line x1="3" y1="9" x2="12" y2="9"/>
|
|
133
|
+
</svg>
|
|
134
|
+
</button>
|
|
135
|
+
<span style="width:1px;background:#e7e5e4;margin:0 4px;align-self:stretch;"></span>
|
|
136
|
+
<button class="diagram-color-edit" onclick="setShapeTextValign('top')" title="Aligner en haut">
|
|
137
|
+
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-linecap="round">
|
|
138
|
+
<line x1="1" y1="1.5" x2="11" y2="1.5" stroke-width="2"/>
|
|
139
|
+
<line x1="1" y1="5.5" x2="10" y2="5.5" stroke-width="1.3"/>
|
|
140
|
+
<line x1="1" y1="9" x2="8" y2="9" stroke-width="1.3"/>
|
|
141
|
+
</svg>
|
|
142
|
+
</button>
|
|
143
|
+
<button class="diagram-color-edit" onclick="setShapeTextValign('middle')" title="Centrer verticalement">
|
|
144
|
+
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-linecap="round">
|
|
145
|
+
<line x1="1" y1="3" x2="10" y2="3" stroke-width="1.3"/>
|
|
146
|
+
<line x1="1" y1="6.5" x2="11" y2="6.5" stroke-width="2"/>
|
|
147
|
+
<line x1="1" y1="10" x2="8" y2="10" stroke-width="1.3"/>
|
|
148
|
+
</svg>
|
|
149
|
+
</button>
|
|
150
|
+
<button class="diagram-color-edit" onclick="setShapeTextValign('bottom')" title="Aligner en bas">
|
|
151
|
+
<svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-linecap="round">
|
|
152
|
+
<line x1="1" y1="4" x2="10" y2="4" stroke-width="1.3"/>
|
|
153
|
+
<line x1="1" y1="7.5" x2="8" y2="7.5" stroke-width="1.3"/>
|
|
154
|
+
<line x1="1" y1="11.5" x2="11" y2="11.5" stroke-width="2"/>
|
|
155
|
+
</svg>
|
|
156
|
+
</button>
|
|
157
|
+
<span style="width:1px;background:#e7e5e4;margin:0 4px;align-self:stretch;"></span>
|
|
158
|
+
<button class="diagram-color-edit" id="btnPickFont" onclick="startPickMode('fontSize')" title="Copier la taille de police d'un autre composant">
|
|
159
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
|
160
|
+
<path d="M7 2 Q11 6 11 9 A4 4 0 0 1 3 9 Q3 6 7 2 Z"/>
|
|
161
|
+
</svg>
|
|
162
|
+
</button>
|
|
163
|
+
<button class="diagram-color-edit" id="btnPickStyle" onclick="startPickMode('fullStyle')" title="Copier le style complet d'un autre composant (police + couleur)">
|
|
164
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
|
|
165
|
+
<path d="M7 2 Q11 6 11 9 A4 4 0 0 1 3 9 Q3 6 7 2 Z"/>
|
|
166
|
+
</svg>
|
|
167
|
+
</button>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<!-- Canvas SVG -->
|
|
171
|
+
<svg id="canvas" class="diagram-canvas">
|
|
172
|
+
<defs>
|
|
173
|
+
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
174
|
+
<polygon points="0 0, 10 3.5, 0 7" fill="#a8a29e" />
|
|
175
|
+
</marker>
|
|
176
|
+
<marker id="arrowhead-sel" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
|
|
177
|
+
<polygon points="0 0, 10 3.5, 0 7" fill="#f97316" />
|
|
178
|
+
</marker>
|
|
179
|
+
</defs>
|
|
180
|
+
<g id="viewport">
|
|
181
|
+
<g id="arrowsLayer"></g>
|
|
182
|
+
<g id="shapesLayer"></g>
|
|
183
|
+
<rect id="rubberBand" style="display:none" fill="rgba(249,115,22,0.08)"
|
|
184
|
+
stroke="#f97316" stroke-width="1" stroke-dasharray="4,3" pointer-events="none"/>
|
|
185
|
+
<line id="tempArrow" style="display:none" stroke="#f97316" stroke-width="1.5"
|
|
186
|
+
stroke-dasharray="6,4" marker-end="url(#arrowhead-sel)" />
|
|
187
|
+
</g>
|
|
188
|
+
</svg>
|
|
189
|
+
|
|
190
|
+
<!-- Éditeur de texte inline -->
|
|
191
|
+
<div id="textOverlay" style="display:none;position:fixed;inset:0;z-index:200;pointer-events:none;">
|
|
192
|
+
<input id="shapeTextInput" type="text" style="position:absolute;pointer-events:auto;
|
|
193
|
+
background:rgba(255,255,255,0.92);border:1.5px solid #f97316;border-radius:5px;
|
|
194
|
+
outline:none;text-align:center;font-family:'Segoe UI',system-ui,sans-serif;
|
|
195
|
+
font-weight:600;padding:2px 6px;" />
|
|
196
|
+
<textarea id="postitTextInput" style="position:absolute;pointer-events:auto;display:none;
|
|
197
|
+
background:rgba(255,255,255,0.0);border:1.5px solid #f97316;border-radius:3px;
|
|
198
|
+
outline:none;text-align:center;font-family:'Segoe UI',system-ui,sans-serif;
|
|
199
|
+
font-weight:600;padding:6px;resize:none;overflow:hidden;line-height:1.4;"></textarea>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<!-- Modale première sauvegarde -->
|
|
203
|
+
<div class="modal-backdrop" id="modalPremiereSauvegardeDiag">
|
|
204
|
+
<div class="modal">
|
|
205
|
+
<h3 data-i18n="modal_first_save_title">Première sauvegarde</h3>
|
|
206
|
+
<p style="font-size:.875rem;color:#78716c;margin-bottom:12px;" data-i18n="modal_first_save_intro">
|
|
207
|
+
Une boîte de dialogue va s'ouvrir pour sélectionner le dossier du projet.
|
|
208
|
+
</p>
|
|
209
|
+
<p style="font-size:.875rem;color:#292524;margin-bottom:8px;" data-i18n="modal_first_save_navigate">
|
|
210
|
+
Navigue jusqu'au dossier contenant le fichier :
|
|
211
|
+
</p>
|
|
212
|
+
<p style="font-family:'Cascadia Code',monospace;font-size:.8rem;background:#f5f5f4;padding:8px 12px;border-radius:6px;margin-bottom:24px;color:#059669;">
|
|
213
|
+
diagrammes.js
|
|
214
|
+
</p>
|
|
215
|
+
<p style="font-size:.8rem;color:#a8a29e;margin-bottom:24px;" data-i18n="modal_first_save_once">
|
|
216
|
+
Cette étape n'aura lieu qu'une seule fois.
|
|
217
|
+
</p>
|
|
218
|
+
<p id="erreurFichierDiag" style="display:none;font-size:.8rem;color:#ef4444;background:#fef2f2;padding:8px 12px;border-radius:6px;margin-bottom:16px;" data-i18n-html="diag_first_save_error">
|
|
219
|
+
Fichier introuvable. Sélectionne le dossier contenant <strong>diagrammes.js</strong>.
|
|
220
|
+
</p>
|
|
221
|
+
<div class="modal-actions">
|
|
222
|
+
<button class="btn-cancel" onclick="fermerModalSauvegardeDiag()" data-i18n="cancel">Annuler</button>
|
|
223
|
+
<button class="btn-confirm" onclick="ouvrirSelecteurFichierDiag()" data-i18n="modal_first_save_btn_choose">Choisir le dossier</button>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<script src="i18n/fr.js"></script>
|
|
229
|
+
<script src="i18n/en.js"></script>
|
|
230
|
+
<script src="i18n/i18n.js"></script>
|
|
231
|
+
<script src="diagrammes.js"></script>
|
|
232
|
+
<script src="diagram.js"></script>
|
|
233
|
+
</body>
|
|
234
|
+
</html>
|