diff --git a/src/index.html b/src/index.html index 64a36f1..70fab50 100644 --- a/src/index.html +++ b/src/index.html @@ -96,7 +96,7 @@
Coin Y du Rectangle
Coin X Boîte texte
Centre Y Boîte texte
- \ No newline at end of file diff --git a/src/main.js b/src/main.js index 6b41952..3d96ec4 100644 --- a/src/main.js +++ b/src/main.js @@ -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); diff --git a/src/tp1.js b/src/tp1.js index 7f2ed87..7a5f39a 100644 --- a/src/tp1.js +++ b/src/tp1.js @@ -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 (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 (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 (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 , et /** - * 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 , à la liste des enfants - svgfig.push(m(figTag, attr, frag)); + // ajouter une balise , ou à 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);