diff --git a/src/main.js b/src/main.js
index 3d96ec4..b246cbb 100644
--- a/src/main.js
+++ b/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();
}
diff --git a/src/tp1.js b/src/tp1.js
index 7a5f39a..e296512 100644
--- a/src/tp1.js
+++ b/src/tp1.js
@@ -98,17 +98,17 @@ export class Circle{
}
/**
- * @return {Object} balise HTML (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 (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
- * définie par un Point, un texte et un id.
- *
- * Par défaut, la boîte texte est sans couleur de remplissage.
+ * Classe qui représente un texte. La boîte de texte est
+ * définie par un Point, un texte et un id.
*/
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 (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 , ou à la liste des enfants
- svgfig.push(m(tag, attr, frag));
+ // ajouter une balise , ou 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);