code refact + review + onclickRemove - VF

src/index.html

@@ -11,7 +11,6 @@
           referrerpolicy="no-referrer" rel="stylesheet"/>
     <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
     <script src="main.js" type="module"></script>
-    <script type="module" src="tests.js"></script>
 </head>
 <body>
 
@@ -40,7 +39,7 @@
         <div class="columns">
             <div class="column">
                 <div class="field">
-                    <label class="label">Centre X du Cercle</label>
+                    <label class="label">Position en X</label>
                     <div class="control">
                         <input class="input"
                                id="cx"
@@ -53,7 +52,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Centre Y du Cercle</label>
+                    <label class="label">Position en y</label>
                     <div class="control">
                         <input class="input"
                                id="cy"
@@ -66,7 +65,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Rayon du Cercle</label>
+                    <label class="label">Rayon</label>
                     <div class="control">
                         <input class="input"
                                id="cr"
@@ -93,7 +92,7 @@
         <div class="columns">
             <div class="column">
                 <div class="field">
-                    <label class="label">Coin X du Rectangle</label>
+                    <label class="label">Position en X</label>
                     <div class="control">
                         <input class="input"
                                id="rx"
@@ -106,7 +105,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Coin Y du Rectangle</label>
+                    <label class="label">Position en Y</label>
                     <div class="control">
                         <input class="input"
                                id="ry"
@@ -119,7 +118,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Largeur du Rectangle</label>
+                    <label class="label">Largeur</label>
                     <div class="control">
                         <input class="input"
                                id="width"
@@ -132,7 +131,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Hauteur du Rectangle</label>
+                    <label class="label">Hauteur</label>
                     <div class="control">
                         <input class="input"
                                id="height"
@@ -159,7 +158,7 @@
         <div class="columns">
             <div class="column">
                 <div class="field">
-                    <label class="label">Coin X Boîte texte</label>
+                    <label class="label">Position en X</label>
                     <div class="control">
                         <input class="input"
                                id="tx"
@@ -172,7 +171,7 @@
             </div>
             <div class="column">
                 <div class="field">
-                    <label class="label">Centre Y Boîte texte</label>
+                    <label class="label">Position en Y</label>
                     <div class="control">
                         <input class="input"
                                id="ty"
@@ -223,7 +222,7 @@
     </div>
 </div>
 
-
+<!-- BOUTON TOUT EFFACER -->
 <div class="columns is-centered">
     <div class="column is-two-thirds">
         <button class="button mt-2" id="clear-drawing">Tout Effacer</button>

src/main.js

@@ -11,7 +11,6 @@ import {
 
 const figures = []
 
-
 function getFigureById(figureId){
     for(const figure of figures){
         if(figure.getId() === figureId){
@@ -20,6 +19,10 @@ function getFigureById(figureId){
     }
 }
 
+function pointToString(point){
+    return `(${point.getX()}, ${point.getY()})`;
+}
+
 function onClickUp(figureId){
     const figure = getFigureById(figureId);
     const pos = figure.getPosition();
@@ -58,67 +61,25 @@ function onClickPaint(figureId){
     renderFigures();
 }
 
+/**
+ * Fonction qui modifie la couleur d'une forme selon
+ * la couleur sélectionnée à l'aide du color-picker HTML
+ * @param {string} figureId : id de la forme
+ * @param {string} color : couleur sélectionnée
+ */
 function onClickPaintWithColor(figureId, color){
     const figure = getFigureById(figureId);
-    figure.setColor(color.slice(1))
-    renderFigures();
-
-}
-
-function onClickErase(figureId){
-    console.log(figureId);
-    // TODO
-}
-
-function pointToString(point){
-    return `(${point.getX()}, ${point.getY()})`;
-}
-
-// Sur le bouton 'Ajouter un cercle'
-function drawNewCircle(){
-    console.log('Nouveau cercle')
-    const x = parseInt(document.getElementById("cx").value);
-    const y = parseInt(document.getElementById("cy").value)
-    const r = parseInt(document.getElementById("cr").value)
-    const p = new Point(x, y);
-    const circle = new Circle(p, r, Date.now());
-    console.log(circle);
-    figures.push(circle);
+    figure.setColor(color.slice(1));
     renderFigures();
 }
 
-
-// Sur le bouton 'Ajouter un rectangle'
-function drawNewRectangle(){
-    console.log('Nouveau rectangle');
-    const x = parseInt(document.getElementById("rx").value)
-    const y = parseInt(document.getElementById("ry").value)
-    const w = parseInt(document.getElementById("width").value)
-    const h = parseInt(document.getElementById("height").value)
-    const p = new Point(x, y);
-    const rectangle = new Rectangle(p, w, h, Date.now());
-    console.log(rectangle);
-    figures.push(rectangle);
-    renderFigures();
-}
-
-// Sur le bouton 'Ajouter un texte'
-function drawNewText(){
-    console.log('Nouveau texte')
-    const x = parseInt(document.getElementById("tx").value);
-    const y = parseInt(document.getElementById("ty").value);
-    const t = document.getElementById("text").value;
-    const p = new Point(x, y);
-    const text = new Text(p, t, Date.now());
-    console.log(text);
-    figures.push(text);
-    renderFigures();
-}
-
-
-// Sur le bouton 'Tout effacer'
-function clearAllFigures(){
-    figures.length = 0;
+/**
+ * Fonction qui supprime une forme affichée sur le canevas.
+ * @param {string} figureId : id de la forme
+ */
+function onClickRemove(figureId){
+    const objIndex = figures.findIndex((obj) => obj.getId() === figureId);
+    figures.splice(objIndex, 1);
     renderFigures();
 }
 
@@ -134,7 +95,66 @@ function renderFigures(){
             onClickRight,
             onClickPaint,
             onClickPaintWithColor,
-            onClickErase);        
+            onClickRemove);        
+}
+
+
+// Sur le bouton 'Ajouter Cercle'
+function drawNewCircle(){
+    console.log('Nouveau cercle')
+    const x = parseInt(document.getElementById("cx").value);
+    const y = parseInt(document.getElementById("cy").value)
+    const r = parseInt(document.getElementById("cr").value)
+    if(! isNaN(x) && ! isNaN(y) && ! isNaN(r)){
+        const p = new Point(x, y);
+        const circle = new Circle(p, r, Date.now());
+        console.log(circle);
+        figures.push(circle);
+        renderFigures();
+    } else {
+        alert("Entrez des valeurs pour créer un cercle.");
+    }
+}
+
+// Sur le bouton 'Ajouter Rectangle'
+function drawNewRectangle(){
+    console.log('Nouveau rectangle');
+    const x = parseInt(document.getElementById("rx").value)
+    const y = parseInt(document.getElementById("ry").value)
+    const w = parseInt(document.getElementById("width").value)
+    const h = parseInt(document.getElementById("height").value)
+    if(! isNaN(x) && ! isNaN(y) && ! isNaN(w) && ! isNaN(h)){
+        const p = new Point(x, y);
+        const rectangle = new Rectangle(p, w, h, Date.now());
+        console.log(rectangle);
+        figures.push(rectangle);
+        renderFigures();
+    } else {
+        alert("Entrez des valeurs pour créer un rectangle.");
+    }
+}
+
+// Sur le bouton 'Ajouter Texte'
+function drawNewText(){
+    console.log('Nouveau texte')
+    const x = parseInt(document.getElementById("tx").value);
+    const y = parseInt(document.getElementById("ty").value);
+    const t = document.getElementById("text").value;
+    if(! isNaN(x) && ! isNaN(y) && t !== ''){
+        const p = new Point(x, y);
+        const text = new Text(p, t, Date.now());
+        console.log(text);
+        figures.push(text);
+        renderFigures();
+    } else {
+        alert("Entrez des valeurs et du texte pour créer un texte.")
+    }
+}
+
+// Sur le bouton 'Tout Effacer'
+function clearAllFigures(){
+    figures.length = 0;
+    renderFigures();
 }
 
 

src/tp1.js

@@ -98,17 +98,17 @@ export class Circle{
     }
 
     /**
-     * @return {Object} balise HTML <circle> (clé) et attributs (valeur)
+     * @return {Object} Paramètres pour créer une vue Mithril.js (HTML Element)
      */
     getHtmlStructure(){
-        const attr = {
+        const attributes = {
             cx: this.#center.getX(),
             cy: this.#center.getY(),
             r:  this.#radius,
             fill: `#${this.#color}`,
         };
-        return {"tag": "circle",
-                "attributes" : attr};
+        return {"selector": "circle",
+                "attrs" : attributes};
     }
 
     toString(){
@@ -200,18 +200,18 @@ export class Rectangle{
     }
 
     /**
- * @return {Object} balise HTML <rect> (clé) et attributs (valeur)
+ * @return {Object} Paramètres pour créer une vue Mithril.js (HTML Element)
  */
     getHtmlStructure(){
-        const attr = {
+        const attributes = {
             x: this.#corner.getX(),
             y: this.#corner.getY(),
             width: this.#width,
             height: this.#height,
             fill: `#${this.#color}`,
         };
-        return {"tag": "rect",
-                "attributes": attr};
+        return {"selector": "rect",
+                "attrs": attributes};
     }
 
     toString(){
@@ -220,10 +220,8 @@ export class Rectangle{
 }
 
 /**
- * Classe qui représente une boîte de texte.  La boîte de texte est
+ * Classe qui représente un texte.  La boîte de texte est
  * définie par un Point, un texte et un id. 
- *
- * Par défaut, la boîte texte est sans couleur de remplissage. 
  */
 export class Text{
     #corner;
@@ -254,7 +252,7 @@ export class Text{
     }
 
     /**
-    * @param {Point} corner la nouvelle position du coin supérieur gauche du texte
+    * @param {Point} corner la nouvelle position du coin inférieur gauche du texte
     */
     setPosition(corner){
         this.#corner = corner;
@@ -262,14 +260,14 @@ export class Text{
 
     /**
      *
-     * @returns {string} la couleur (hexadécimal) du rectangle
+     * @returns {string} la couleur (hexadécimal) du texte
      */
     getColor(){
         return this.#color;
     }
 
     /**
-     * @param {String} color la nouvelle couleur du rectangle
+     * @param {String} color la nouvelle couleur du texte
      */
     setColor(color){
         this.#color = color;
@@ -291,17 +289,17 @@ export class Text{
     }
 
     /**
- * @return {Object} balise HTML <text> (clé) et attributs (valeur)
+ * @return {Object} Paramètres pour créer une vue Mithril.js (HTML Element)
  */
     getHtmlStructure(){
-        const attr = {
+        const attributes = {
             x: this.#corner.getX(),
             y: this.#corner.getY(),
             fill: `#${this.#color}` // change couleur du texte
         };
-        return {"tag": "text",
-                "attributes": attr, 
-                "fragment" : this.#text};
+        return {"selector": "text",
+                "attrs": attributes, 
+                "children" : this.#text};
     }
 
     toString(){
@@ -321,16 +319,16 @@ export class Text{
 export function drawFigures(node, figures){
     //console.log(figures.toString())
 
-    // Liste de vnodes à ajouter comme enfants au SVG (id='canvas')
+    // vnodes à ajouter comme enfants au SVG (id='canvas')
     let svgfig = [];
 
     for(const figure of figures){
-        let tag = Object.values(figure.getHtmlStructure())[0];
-        let attr = Object.values(figure.getHtmlStructure())[1];
-        let frag = Object.values(figure.getHtmlStructure())[2];
+        let selector = Object.values(figure.getHtmlStructure())[0];
+        let attrs = Object.values(figure.getHtmlStructure())[1];
+        let children = Object.values(figure.getHtmlStructure())[2];
 
-        // ajouter une balise <cercle>, <rect> ou <text> à la liste des enfants
-        svgfig.push(m(tag, attr, frag));        
+        // ajouter une balise <cercle>, <rect> ou <text> au SVG
+        svgfig.push(m(selector, attrs, children));        
     }
 
     m.render(node, svgfig);
@@ -357,47 +355,55 @@ function drawIcons(figure,
                    onClickRight,
                    onClickPaint,
                    onClickPaintWithColor,
-                   onClickErase){
+                   onClickRemove){
     return [
         m("i.fa-solid.fa-arrow-up.is-clickable", {onclick: () => onClickUp(figure.getId())}),
         m("i.fa-solid.fa-arrow-down.is-clickable", {onclick: () => onClickDown(figure.getId())}),
         m("i.fa-solid.fa-arrow-left.is-clickable", {onclick: () => onClickLeft(figure.getId())}),
         m("i.fa-solid.fa-arrow-right.is-clickable", {onclick: () => onClickRight(figure.getId())}),
         m("i.fa-solid.fa-paint-roller.is-clickable", {onclick: () => onClickPaint(figure.getId())}),
-        m("i.fa-solid.fa-trash.is-clickable", {onclick: () => onClickErase(figure.getId())}),
+        m("i.fa-solid.fa-trash.is-clickable", {onclick: () => onClickRemove(figure.getId())}),
         m('input', {
             type: "color",
-            onchange: e => { onClickPaintWithColor(figure.getId(), e.target.value) }
+            value:"",
+            onchange: (e) => { onClickPaintWithColor(figure.getId(), e.target.value) }
         })]
 
 }
 
 /**
  * @param node {HTMLElement} un element tbody
- * @param figures {[]} Les figures géométriques
+ * @param figures {Array[]} Les formes géométriques
  * @param pointToString Argument optionnel qui doit être une fonction
  *        qui prend en paramêtre un Point et retourne un String qui
  *        représente le point.
  * @param onClickUp Argument optionnel qui doit être une fonction
  *        qui sera appelée lorsque la flèche pointant vers le haut
- *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        sera cliquée.  L'id de la forme sera passé en argument de
  *        la fonction.
  * @param onClickDown Argument optionnel qui doit être une fonction
  *        qui sera appelée lorsque la flèche pointant vers le bas
- *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        sera cliquée.  L'id de la forme sera passé en argument de
  *        la fonction.
  * @param onClickLeft Argument optionnel qui doit être une fonction
  *        qui sera appelée lorsque la flèche pointant vers la gauche
- *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        sera cliquée.  L'id de la forme sera passé en argument de
  *        la fonction.
  * @param onClickRight Argument optionnel qui doit être une fonction
  *        qui sera appelée lorsque la flèche pointant vers la droite
- *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        sera cliquée.  L'id de la forme sera passé en argument de
  *        la fonction.
  * @param onClickPaint Argument optionnel qui doit être une fonction
  *        qui sera appelée lorsque l'icone peinture
- *        sera cliquée.  L'id du cercle sera passé en argument de
+ *        sera cliquée.  L'id de la forme sera passé en argument de
  *        la fonction.
+ * @param onClickPaintWithColor Argument optionnel qui doit être une fonction
+ *        qui sera appelée lorsque le color picker sera sélectionné par clic
+ *        de la souris. L'id de la forme et la couleur sélectionnée sont passés 
+ *        comme arguments à la fonction.
+ * @param onClickRemove Argument optionnel qui doit être une fonction 
+ *        qui sera appelée lorsque l'icone de la poubelle sera cliqué. L'id
+ *        de la forme sera passé comme argument de la fonction.
  */
 export function populateTable(node,
                               figures,
@@ -407,7 +413,7 @@ export function populateTable(node,
                               onClickRight=undefined,
                               onClickPaint=undefined,
                               onClickPaintWithColor=undefined,
-                              onClickErase){
+                              onClickRemove=undefined){
     const rows = [];
     for(const figure of figures){
         const row =[m("td", figure.getId()),
@@ -419,7 +425,7 @@ export function populateTable(node,
                 functionOrDefault(onClickRight),
                 functionOrDefault(onClickPaint),
                 functionOrDefault(onClickPaintWithColor),
-                functionOrDefault(onClickErase)))];
+                functionOrDefault(onClickRemove)))];
         rows.push(m("tr", row))
     }
     m.render(node, rows);