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