Many updates, bug fix, and new features. v1.40

.env

@@ -1,11 +1,12 @@
 VITE_APP_BASE="/"
 VITE_APP_URL="http://localhost:5173"
+VITE_APP_VERSION_RANGE=">1.3.0"
 
 VITE_DEFAULT_STEPSIZE=18
 VITE_DEFAULT_STEPSPERROW=13
 VITE_DEFAULT_ROWS=4
 VITE_DEFAULT_ROWHEIGHT=30
-VITE_DEFAULT_ID="Q?"
+VITE_DEFAULT_ID="Q"
 VITE_DEFAULT_ICON=""
 VITE_DEFAULT_TEXT=""
 VITE_DEFAULT_SHOWID="true"

.env.production

@@ -1,11 +1,12 @@
 VITE_APP_BASE="/Tiquettes/"
 VITE_APP_URL="https://pantaflex44.github.io/Tiquettes/"
+VITE_APP_VERSION_RANGE=">1.3.0"
 
 VITE_DEFAULT_STEPSIZE=18
 VITE_DEFAULT_STEPSPERROW=13
 VITE_DEFAULT_ROWS=4
 VITE_DEFAULT_ROWHEIGHT=30
-VITE_DEFAULT_ID="Q?"
+VITE_DEFAULT_ID="Q"
 VITE_DEFAULT_ICON=""
 VITE_DEFAULT_TEXT=""
 VITE_DEFAULT_SHOWID="true"

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.4.0] - 2024-06-02
+
+### Améliorations
+
+- Auto identification des modules libres
+- Affichage de l'identifiant du module précédent lors de l'édition d'un module
+
+### Ajouts
+
+- Ajout, insertion, et suppression de rangées au cours du déroulement d'un projet
+
+
 ## [1.3.4] - 2024-06-02
 
 ### Modifications

README.md

@@ -45,26 +45,55 @@ Pour importer un projet, cliquez sur le bouton ```Choisir un fichier``` puis cha
 
 ## Utilisation
 
+### Descriptif
+
 Un tableau peut comporter de 1 à 15 rangées, 13, 18 ou 24 modules par rangée.
 
 Chaque module peut avoir une largeur et/ou une position réglable en fonction de la place disponible autour de lui. Vous pourrez l'étendre jusqu'à rencontrer, soit le bout de la rangée, soit un autre module déja défini. Vous devrez libérer celui-ci pour pousuivre son expansion. Idem pour le déplacer, seulement possible dans les espaces libres.
 
+### Menu contextuel du haut
+
 ![Menu contextuel du haut](docs/_top.png)
 
-Le symbole ```+``` (ou la touche ```+``` du clavier) vous permet d'agrandir le module d'une largeur sur sa droite.
+Le symbole ```+``` vous permet d'agrandir le module d'une largeur sur sa droite.
 
-Le symbole ```-``` (ou la touche ```-``` du clavier) vous permet de réduire le module d'une largeur.
+Le symbole ```-``` vous permet de réduire le module d'une largeur.
 
-Le symbole ```←``` (ou la ```flèche gauche``` du clavier) vous permet de déplacer le module d'une position sur la gauche.
+Le symbole ```←``` vous permet de déplacer le module d'une position sur la gauche.
 
-Le symbole ```→``` (ou la ```flèche droite``` du clavier) vous permet de déplacer le module d'une position sur la droite.
+Le symbole ```→``` vous permet de déplacer le module d'une position sur la droite.
+
+### Menu contextuel du bas
 
 ![Menu contextuel du bas](docs/_bottom.png)
 
 Le symbole ```Corbeille``` (ou la touche ```Suppr``` du clavier) permet de libérer le module. Il perdra son identifiant, son icône, et sa définition mais conservera sa taille. Il pourra donc de nouveau être englobé dans l'agrandissement des modules précédents.
 
 Le symbole ```Crayon``` (ou la touche ```Entrée``` du clavier) permet d'éditer le module en question.
 
+### Manipuler les rangées
+
+Au cours de l'édition de votre planche d'étiquette, il peut parfois être utile d'insérer et/ou de supprimer une rangée.
+
+Pour insérer une rangée, cliquez sur le raccourci présent entre chacune des rangées éxistantes:
+
+![Insérer une rangée](docs/_add_row.png)
+
+Pour supprimer une rangée, cliquez sur l'icone ```corbeille```, à gauche du nom de la rangée souhaitée:
+
+![Supprimer une rangée](docs/_delete_row.png)
+
+
+### Raccourcies claviers / souris
+
+Lors de la définition de votre planche d'étiquettes, vous pouvez utiliser votre clavier pour interagir sur les rangées et les modules.
+
+- Pour faire défiler les rangées verticalement, vous pouvez utiliser les flèches ```haut``` et ```bas``` de votre clavier, l'ascenseur de la fenètre ou la roulette de votre souris.
+- Pour faire défiler les rangées horizontalement, vous pouvez utiliser l'ascenseur de la fenètre ou la roulette de votre souris (en appuyant simultanement sur une des touches ```shift``` de votre clavier).
+- Pour déplacer un module horizontalement, sélectionnez le avec votre souris, puis appuyez sur les flèches ```gauche``` et ```droite``` de votre clavier.
+- Pour redimensionner un module, sélectionnez le avec votre souris, puis appuyez sur les touches ```+``` et ```-``` de votre clavier.
+
+
 ## Edition d'un module
 
 Après avoir cliqué sur le symbole d'édition d'un module, une fenêtre popup s'ouvre et vous offre la possibilité d'affiner sa définition.
@@ -74,11 +103,6 @@ Après avoir cliqué sur le symbole d'édition d'un module, une fenêtre popup s
 - *Identifiant* : Identifiant technique du module. Seules les lettres, chiffres et le caractère point son acceptés.
 - *Description* : Une très courte description du module. Les retours à la ligne sont pris en compte.
 - *Pictogramme* : Une petite image illustrant l'environement du module.
-- *Afficher l'identifiant* : Affiche ou non l'identifiant.
-- *Afficher le pictogramme* : Affiche ou non le pictogramme.
-- *Afficher la description* : Affiche ou non la description.
-- *Couleur de fond* : Couleur de fond de la description.
-- *Couleur du texte*: Couleur du texte de la description.
 
 ## Décorer ses étiquettes
 

index.html

@@ -5,12 +5,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</title>
+    <title>Tiquettes - Générateur d'étiquettes pour tableaux et armoires électriques.</title>
     <meta name="description" content="Générateur d'étiquettes pour tableaux / armoires électriques." />
     <meta name="author" content="Christophe LEMOINE" />
     <meta name="robots" content="index,follow" />
 
     <link rel="icon" type="image/svg+xml" href="https://pantaflex44.github.io/Tiquettes/favicon.svg" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
 
     <!-- Google Tag Manager -->
     <script>(function (w, d, s, l, i) {
@@ -40,14 +41,45 @@
         gtag('config', 'G-378MBJK77W');
     </script>
 
-    <h1 style="display: none;">Tiquettes - Générateur d'étiquettes pour tableaux / armoires électriques.</h1>
-    <p style="display: none;">Tiquettes est une application web permettant de créer facilement de belles étiquettes pour
-        les tableaux et armoires électriques.</p>
+    <nav>
+        <ul>
+            <li><a href="https://github.com/pantaflex44/Tiquettes/blob/main/README.md" target="_blank" rel="noopener">
+                <img src="/doc.svg" width="16" height="16" alt="Documentation" />
+                <span>Documentation</span>
+            </a></li>
+            <li><a href="https://github.com/pantaflex44/Tiquettes" target="_blank" rel="noopener">
+                <img src="/src.svg" width="16" height="16" alt="Sources" />
+                <span>Sources</span>
+            </a></li>
+            <li><a href="https://github.com/pantaflex44/Tiquettes/blob/main/LICENSE" target="_blank" rel="noopener">
+                <img src="/license.svg" width="16" height="16" alt="Licence" />
+                <span>Licence</span>
+            </a></li>
+            <li><a href="https://github.com/pantaflex44/Tiquettes/blob/main/CHANGELOG.md" target="_blank" rel="noopener">
+                <img src="/changelog.svg" width="16" height="16" alt="Changelog" />
+                <span>Changelog</span>
+            </a></li>
+            <li><a href="#partenariats">
+                <img src="/partners.svg" width="16" height="16" alt="Partenariats" />
+                <span>Partenariats</span>
+            </a></li>
+            <li><a href="#ressources">
+                <img src="/ressources.svg" width="16" height="16" alt="Ressources" />
+                <span>Ressources</span>
+            </a></li>
+        </ul>
+    </nav>
 
     <div id="content">
-        <div id="root"></div>
+        <main>
+            <h1><img src="./favicon.svg" width="32" height="32" alt="Tiquettes" /><span>Tiquettes</span><sup class="version"></sup></h1>
+            <div class="by">by pantaflex44</div>
+            <div class="description">Générateur d'étiquettes pour tableaux et armoires électriques.</div>
 
-        <div class="box">
+            <div id="root"></div>
+        </main>
+
+        <div class="box" id="partenariats">
             <h4>
                 <img src="./network.svg" width="20" height="20" alt="Un domaine, un réseau, des partenaires" />
                 <span>Un domaine, un réseau, des partenaires</span>
@@ -84,7 +116,7 @@ <h4>
             </ul>
         </div>
 
-        <div class="box">
+        <div class="box" id="ressources">
             <h4>
                 <img src="./resources.svg" width="20" height="20" alt="Ressources utiles" />
                 <span>Ressources utiles</span>
@@ -113,12 +145,11 @@ <h4>
                 <li>
                     <div class="box_list_title">NFC 18-510 (France)</div>
                     <div class="box_list_description">
-                        La norme propose des mesuresde prévention en vue d'assurer la sécurité des personnes contre les
+                        La norme propose des mesures de prévention en vue d'assurer la sécurité des personnes contre les
                         dangers d'origine électrique, lorsqu'elles effectuent un travail ou une intervention dans un
                         environement électrique.
                     </div>
-                    <a class="box_list_link"
-                        href="https://www.upf.pf/sites/default/files/inrs_electricitenorme_2.pdf"
+                    <a class="box_list_link" href="https://www.upf.pf/sites/default/files/inrs_electricitenorme_2.pdf"
                         target="_blank" rel="noopener">
                         Le livret (pdf)
                     </a>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiquettes",
   "title": "Tiquettes",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "Générateur d'étiquettes pour tableaux et armoires électriques.",
   "keywords": [
     "tableau",
@@ -30,6 +30,7 @@
     "preview": "vite preview --port 8080"
   },
   "dependencies": {
+    "compare-versions": "^6.1.0",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /Tiquettes/