didier/PWCC_2_TP2
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code Refact,populateTable,onclickPaintWithColor

Browse Source
This commit is contained in:
Annie Rheaume committed 2024-01-14 22:19:01 -05:00
1 parent 1bd694d199
commit 489245d8ee
3 files changed
+154 -68
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/index.html
+4 -5
View File
@@ -96,7 +96,7 @@
<label class="label">Coin X du Rectangle</label> <label class="label">Coin X du Rectangle</label>
<div class="control"> <div class="control">
<input class="input" <input class="input"
id="x" id="rx"
max="500" max="500"
min="1" min="1"
placeholder="250" placeholder="250"
@@ -109,7 +109,7 @@
<label class="label">Coin Y du Rectangle</label> <label class="label">Coin Y du Rectangle</label>
<div class="control"> <div class="control">
<input class="input" <input class="input"
id="y" id="ry"
max="500" max="500"
min="1" min="1"
placeholder="250" placeholder="250"
@@ -162,7 +162,7 @@
<label class="label">Coin X Boîte texte</label> <label class="label">Coin X Boîte texte</label>
<div class="control"> <div class="control">
<input class="input" <input class="input"
id="x" id="tx"
max="500" max="500"
min="1" min="1"
placeholder="250" placeholder="250"
@@ -175,7 +175,7 @@
<label class="label">Centre Y Boîte texte</label> <label class="label">Centre Y Boîte texte</label>
<div class="control"> <div class="control">
<input class="input" <input class="input"
id="y" id="ty"
max="500" max="500"
min="1" min="1"
placeholder="250" placeholder="250"
@@ -230,6 +230,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>
src/main.js
+76 -22
View File
@@ -5,19 +5,70 @@ import {
Circle, Circle,
Rectangle, Rectangle,
Text, Text,
drawFigures} from "./tp1.js"; drawFigures,
populateTable,
randomColor} from "./tp1.js";
const figures = [] const figures = []
/*
function getCircleById(circleId){ function getFigureById(figureId){
for(const circle of circles){ for(const figure of figures){
if(circle.getId() === circleId){ if(figure.getId() === figureId){
return circle; return figure;
} }
} }
} }
*/
function onClickUp(figureId){
const figure = getFigureById(figureId);
const pos = figure.getPosition();
const newPos = new Point(pos.getX(), pos.getY() - 10);
figure.setPosition(newPos);
renderFigures();
}
function onClickDown(figureId){
const figure = getFigureById(figureId);
const pos = figure.getPosition();
const newPos = new Point(pos.getX(), pos.getY() + 10);
figure.setPosition(newPos);
renderFigures();
}
function onClickLeft(figureId){
const figure = getFigureById(figureId);
const pos = figure.getPosition();
const newPos = new Point(pos.getX() - 10, pos.getY());
figure.setPosition(newPos);
renderFigures();
}
function onClickRight(figureId){
const figure = getFigureById(figureId);
const pos = figure.getPosition();
const newPos = new Point(pos.getX() + 10, pos.getY());
figure.setPosition(newPos);
renderFigures();
}
function onClickPaint(figureId){
const figure = getFigureById(figureId);
figure.setColor(randomColor(Date.now()))
renderFigures();
}
function onClickPaintWithColor(figureId, color){
const figure = getFigureById(figureId);
figure.setColor(color.slice(1))
renderFigures();
}
function onClickErase(figureId){
console.log(figureId);
// TODO
}
function pointToString(point){ function pointToString(point){
return `(${point.getX()}, ${point.getY()})`; return `(${point.getX()}, ${point.getY()})`;
@@ -31,6 +82,7 @@ function drawNewCircle(){
const r = parseInt(document.getElementById("cr").value) const r = parseInt(document.getElementById("cr").value)
const p = new Point(x, y); const p = new Point(x, y);
const circle = new Circle(p, r, Date.now()); const circle = new Circle(p, r, Date.now());
console.log(circle);
figures.push(circle); figures.push(circle);
renderFigures(); renderFigures();
} }
@@ -39,24 +91,26 @@ function drawNewCircle(){
// Sur le bouton 'Ajouter un rectangle' // Sur le bouton 'Ajouter un rectangle'
function drawNewRectangle(){ function drawNewRectangle(){
console.log('Nouveau rectangle'); console.log('Nouveau rectangle');
const x = parseInt(document.getElementById("x").value) const x = parseInt(document.getElementById("rx").value)
const y = parseInt(document.getElementById("y").value) const y = parseInt(document.getElementById("ry").value)
const w = parseInt(document.getElementById("width").value) const w = parseInt(document.getElementById("width").value)
const h = parseInt(document.getElementById("height").value) const h = parseInt(document.getElementById("height").value)
const p = new Point(x, y); const p = new Point(x, y);
const rectangle = new Rectangle(p, w, h, Date.now()); const rectangle = new Rectangle(p, w, h, Date.now());
console.log(rectangle);
figures.push(rectangle); figures.push(rectangle);
renderFigures(); renderFigures();
} }
// Sur le bouton 'Ajouter un cercle' // Sur le bouton 'Ajouter un texte'
function drawNewText(){ function drawNewText(){
console.log('Nouveau texte') console.log('Nouveau texte')
const x = parseInt(document.getElementById("x").value); const x = parseInt(document.getElementById("tx").value);
const y = parseInt(document.getElementById("y").value); const y = parseInt(document.getElementById("ty").value);
const t = document.getElementById("text").value; const t = document.getElementById("text").value;
const p = new Point(x, y); const p = new Point(x, y);
const text = new Text(p, t, Date.now()); const text = new Text(p, t, Date.now());
console.log(text);
figures.push(text); figures.push(text);
renderFigures(); renderFigures();
} }
@@ -71,19 +125,19 @@ function clearAllFigures(){
function renderFigures(){ function renderFigures(){
drawFigures(document.getElementById("canvas"), figures); drawFigures(document.getElementById("canvas"), figures);
/* populateTable(
populateTable(document.getElementById("table-body"), document.getElementById("table-body"),
circles, figures,
onClickUp, onClickUp,
onClickDown, onClickDown,
onClickLeft, onClickLeft,
onClickRight, onClickRight,
onClickPaint);*/ onClickPaint,
onClickPaintWithColor,
onClickErase);
} }
document.getElementById("draw-circle").addEventListener("click", drawNewCircle); document.getElementById("draw-circle").addEventListener("click", drawNewCircle);
document.getElementById("draw-rectangle").addEventListener("click", drawNewRectangle); document.getElementById("draw-rectangle").addEventListener("click", drawNewRectangle);
document.getElementById("draw-text").addEventListener("click", drawNewText); document.getElementById("draw-text").addEventListener("click", drawNewText);
src/tp1.js
+74 -41
View File
@@ -56,7 +56,7 @@ export class Circle{
/** /**
* @returns {Point} le point au centre au cercle * @returns {Point} le point au centre au cercle
*/ */
getCenter(){ getPosition(){
return this.#center; return this.#center;
} }
@@ -86,7 +86,7 @@ export class Circle{
/** /**
* @param {Point} center la nouvelle position du centre du cercle * @param {Point} center la nouvelle position du centre du cercle
*/ */
setCenter(center){ setPosition(center){
this.#center = center; this.#center = center;
} }
@@ -100,18 +100,19 @@ export class Circle{
/** /**
* @return {Object} balise HTML <circle> (clé) et attributs (valeur) * @return {Object} balise HTML <circle> (clé) et attributs (valeur)
*/ */
getHtmlTag(){ getHtmlStructure(){
const attr = { const attr = {
cx: this.#center.getX(), cx: this.#center.getX(),
cy: this.#center.getY(), cy: this.#center.getY(),
r: this.#radius, r: this.#radius,
fill: `#${this.#color}`, fill: `#${this.#color}`,
}; };
return {"circle": attr}; return {"tag": "circle",
"attributes" : attr};
} }
toString(){ toString(){
return `Cercle(${ this.#radius }, ${ this.getCenter().getX() }, ${ this.getCenter().getY() })`; return `Cercle(${ this.#radius }, ${ this.#center.getX() }, ${ this.#center.getY() })`;
} }
} }
@@ -131,7 +132,7 @@ export class Rectangle{
/** /**
* *
* @param {Point} corner le point du coin supérieur du rectangle * @param {Point} corner le point du coin supérieur gauche du rectangle
* @param {number} width la largeur du rectangle * @param {number} width la largeur du rectangle
* @param {number} height la hauteur du rectangle * @param {number} height la hauteur du rectangle
* @param {number} id l'id unique du rectangle. C'est au * @param {number} id l'id unique du rectangle. C'est au
@@ -149,7 +150,7 @@ export class Rectangle{
/** /**
* @returns {Point} le point au coin supérieur gauche du rectangle * @returns {Point} le point au coin supérieur gauche du rectangle
*/ */
getCorner(){ getPosition(){
return this.#corner; return this.#corner;
} }
@@ -187,7 +188,7 @@ export class Rectangle{
/** /**
* @param {Point} corner la nouvelle position du coin supérieur gauche du rectangle * @param {Point} corner la nouvelle position du coin supérieur gauche du rectangle
*/ */
setCorner(corner){ setPosition(corner){
this.#corner = corner; this.#corner = corner;
} }
@@ -201,7 +202,7 @@ export class Rectangle{
/** /**
* @return {Object} balise HTML <rect> (clé) et attributs (valeur) * @return {Object} balise HTML <rect> (clé) et attributs (valeur)
*/ */
getHtmlTag(){ getHtmlStructure(){
const attr = { const attr = {
x: this.#corner.getX(), x: this.#corner.getX(),
y: this.#corner.getY(), y: this.#corner.getY(),
@@ -209,11 +210,12 @@ export class Rectangle{
height: this.#height, height: this.#height,
fill: `#${this.#color}`, fill: `#${this.#color}`,
}; };
return {"rect": attr}; return {"tag": "rect",
"attributes": attr};
} }
toString(){ toString(){
return `Rectangle(${ this.#width }, ${ this.#height }, ${ this.getCorner().getX() }, ${ this.getCorner().getY() })`; return `Rectangle(${ this.#width }, ${ this.#height }, ${ this.#corner.getX() }, ${ this.#corner.getY() })`;
} }
} }
@@ -226,11 +228,12 @@ export class Rectangle{
export class Text{ export class Text{
#corner; #corner;
#text; #text;
#color;
#id; #id;
/** /**
* *
* @param {Point} corner le point du coin supérieur de la boîte de teste * @param {Point} corner le point du coin inférieur gauche de la boîte de texte
* @param {string} text le libellé du texte * @param {string} text le libellé du texte
* @param {number} id l'id unique du texte. C'est au * @param {number} id l'id unique du texte. C'est au
* créateur de l'instance de s'assurer de l'unicité * créateur de l'instance de s'assurer de l'unicité
@@ -239,23 +242,39 @@ export class Text{
constructor(corner, text, id) { constructor(corner, text, id) {
this.#corner = corner; this.#corner = corner;
this.#text = text; this.#text = text;
this.#color = BLACK;
this.#id = id; this.#id = id;
} }
/** /**
* @returns {Point} le point au coin supérieur gauche du texte * @returns {Point} le point au coin inférieur gauche du texte
*/ */
getCorner(){ getPosition(){
return this.#corner; return this.#corner;
} }
/** /**
* @param {Point} corner la nouvelle position du coin supérieur gauche du texte * @param {Point} corner la nouvelle position du coin supérieur gauche du texte
*/ */
setCorner(corner){ setPosition(corner){
this.#corner = corner; this.#corner = corner;
} }
/**
*
* @returns {string} la couleur (hexadécimal) du rectangle
*/
getColor(){
return this.#color;
}
/**
* @param {String} color la nouvelle couleur du rectangle
*/
setColor(color){
this.#color = color;
}
/** /**
* *
* @returns {string} le libellé du texte * @returns {string} le libellé du texte
@@ -274,24 +293,27 @@ export class Text{
/** /**
* @return {Object} balise HTML <text> (clé) et attributs (valeur) * @return {Object} balise HTML <text> (clé) et attributs (valeur)
*/ */
getHtmlTag(){ getHtmlStructure(){
const attr = { const attr = {
x: this.#corner.getX(), x: this.#corner.getX(),
y: this.#corner.getY(), y: this.#corner.getY(),
fill: `#${this.#color}` // change couleur du texte
}; };
return {"text": attr, "fragment" : this.#text}; return {"tag": "text",
"attributes": attr,
"fragment" : this.#text};
} }
toString(){ toString(){
return `Text(${ this.#text }, ${ this.getCorner().getX() }, ${ this.getCorner().getY() })`; return `Text(${ this.#text }, ${ this.#corner.getX() }, ${ this.#corner.getY() })`;
} }
} }
// CRÉER LES ÉLÉMENTS HTML <circle>, <rectangle> et <text> // CRÉER LES ÉLÉMENTS HTML <circle>, <rectangle> et <text>
/** /**
* Dessine tous les cercles dans un svg. Cette fonction * Dessine toutes les figures dans un svg. Cette fonction
* nettoye le svg avant d'ajouter les cercles. * nettoye le svg avant d'ajouter les figures.
* *
* @param node {HTMLElement} un element svg * @param node {HTMLElement} un element svg
* @param figures {Array[]} Les formes à dessiner * @param figures {Array[]} Les formes à dessiner
@@ -303,12 +325,12 @@ export function drawFigures(node, figures){
let svgfig = []; let svgfig = [];
for(const figure of figures){ for(const figure of figures){
let figTag = Object.keys(figure.getHtmlTag())[0]; let tag = Object.values(figure.getHtmlStructure())[0];
let attr = Object.values(figure.getHtmlTag())[0]; let attr = Object.values(figure.getHtmlStructure())[1];
let frag = Object.values(figure.getHtmlTag())[1]; let frag = Object.values(figure.getHtmlStructure())[2];
// ajouter une balise <cercle>, <rect> à la liste des enfants // ajouter une balise <cercle>, <rect> ou <text> à la liste des enfants
svgfig.push(m(figTag, attr, frag)); svgfig.push(m(tag, attr, frag));
} }
m.render(node, svgfig); m.render(node, svgfig);
@@ -328,24 +350,31 @@ function functionOrDefault(fn){
return identity; return identity;
} }
function drawIcons(circle, function drawIcons(figure,
onClickUp, onClickUp,
onClickDown, onClickDown,
onClickLeft, onClickLeft,
onClickRight, onClickRight,
onClickPaint){ onClickPaint,
onClickPaintWithColor,
onClickErase){
return [ return [
m("i.fa-solid.fa-arrow-up.is-clickable", {onclick: () => onClickUp(circle.getId())}), m("i.fa-solid.fa-arrow-up.is-clickable", {onclick: () => onClickUp(figure.getId())}),
m("i.fa-solid.fa-arrow-down.is-clickable", {onclick: () => onClickDown(circle.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(circle.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(circle.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(circle.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('input', {
type: "color",
onchange: e => { onClickPaintWithColor(figure.getId(), e.target.value) }
})]
} }
/** /**
* @param node {HTMLElement} un element tbody * @param node {HTMLElement} un element tbody
* @param circles {Circle[]} Les cercles * @param figures {[]} Les figures géométriques
* @param pointToString Argument optionnel qui doit être une fonction * @param pointToString Argument optionnel qui doit être une fonction
* qui prend en paramêtre un Point et retourne un String qui * qui prend en paramêtre un Point et retourne un String qui
* représente le point. * représente le point.
@@ -371,22 +400,26 @@ function drawIcons(circle,
* la fonction. * la fonction.
*/ */
export function populateTable(node, export function populateTable(node,
circles, figures,
onClickUp=undefined, onClickUp=undefined,
onClickDown=undefined, onClickDown=undefined,
onClickLeft=undefined, onClickLeft=undefined,
onClickRight=undefined, onClickRight=undefined,
onClickPaint=undefined){ onClickPaint=undefined,
onClickPaintWithColor=undefined,
onClickErase){
const rows = []; const rows = [];
for(const circle of circles){ for(const figure of figures){
const row =[m("td", circle.getId()), const row =[m("td", figure.getId()),
m("td", circle.toString()), m("td", figure.toString()),
m("td", drawIcons(circle, m("td", drawIcons(figure,
functionOrDefault(onClickUp), functionOrDefault(onClickUp),
functionOrDefault(onClickDown), functionOrDefault(onClickDown),
functionOrDefault(onClickLeft), functionOrDefault(onClickLeft),
functionOrDefault(onClickRight), functionOrDefault(onClickRight),
functionOrDefault(onClickPaint)))]; functionOrDefault(onClickPaint),
functionOrDefault(onClickPaintWithColor),
functionOrDefault(onClickErase)))];
rows.push(m("tr", row)) rows.push(m("tr", row))
} }
m.render(node, rows); m.render(node, rows);