diff --git a/src/index.html b/src/index.html index b73799e..2c73fbe 100644 --- a/src/index.html +++ b/src/index.html @@ -80,6 +80,114 @@ + + +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ + +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+
+ + + diff --git a/src/main.js b/src/main.js index 9407b9d..12d7604 100644 --- a/src/main.js +++ b/src/main.js @@ -1,58 +1,63 @@ -import {drawCircles, populateTable, Circle, Point, randomColor} from "./tp1.js"; +import {drawShapes, populateTable, Circle, Point, Text, Rectangle, randomColor} from "./tp1.js"; -const circles = [] +const shapes = [] -function getCircleById(circleId){ - for(const circle of circles){ - if(circle.getId() === circleId){ - return circle; +function getShapeById(shapeId){ + for(const shape of shapes){ + if(shape.getId() === shapeId){ + return shape; } } } -function onClickUp(circleId){ - const circle = getCircleById(circleId); - const center = circle.getCenter(); - const newCenter = new Point(center.getX(), center.getY() - 10); - circle.setCenter(newCenter); - renderCircles(); +function getShapeIndexById(shapeId){ + let i = 0; + for(const shape of shapes){ + if(shape.getId() === shapeId){ + return i; + } + i ++; + } + return -1; } -function onClickDown(circleId){ - const circle = getCircleById(circleId); - const center = circle.getCenter(); - const newCenter = new Point(center.getX(), center.getY() + 10); - circle.setCenter(newCenter); - renderCircles(); +function onClickUp(shapeId){ + const shape = getShapeById(shapeId); + shape.bouger(0, 10); + renderShapes(); } -function onClickLeft(circleId){ - const circle = getCircleById(circleId); - const center = circle.getCenter(); - const newCenter = new Point(center.getX() - 10, center.getY()); - circle.setCenter(newCenter); - renderCircles(); +function onClickDown(shapeId){ + const shape = getShapeById(shapeId); + shape.bouger(0, -10); + renderShapes(); } -function onClickRight(circleId){ - const circle = getCircleById(circleId); - const center = circle.getCenter(); - const newCenter = new Point(center.getX() + 10, center.getY()); - circle.setCenter(newCenter); - renderCircles(); +function onClickLeft(shapeId){ + const shape = getShapeById(shapeId); + shape.bouger(-10, 0); + renderShapes(); +} + +function onClickRight(shapeId){ + const shape = getShapeById(shapeId); + shape.bouger(10, 0); + renderShapes(); } -function onClickPaint(circleId){ - const circle = getCircleById(circleId); - circle.setColor(randomColor(Date.now())) - renderCircles(); +function onClickPaint(shapeId, color){ + const shape = getShapeById(shapeId); + shape.setColor(color) + renderShapes(); } -function pointToString(point){ - return `(${point.getX()}, ${point.getY()})`; +function onClickTrash(circleId){ + const index = getShapeIndexById(circleId); + shapes.splice(index, 1) + renderShapes(); } function drawNewCircle(){ @@ -61,29 +66,62 @@ function drawNewCircle(){ const r = parseInt(document.getElementById("cr").value) const p = new Point(x, y); const circle = new Circle(p, r, Date.now()); - circles.push(circle); - renderCircles(); + shapes.push(circle); + renderShapes(); } + +function drawNewRectangle() { + const x = parseInt(document.getElementById("rect-top-left-x").value) + const y = parseInt(document.getElementById("rect-top-left-y").value) + const width = parseInt(document.getElementById("rect-width").value) + const height = parseInt(document.getElementById("rect-height").value) + + const p = new Point(x, y); + const rectangle = new Rectangle(p, width, height, Date.now()); + shapes.push(rectangle); + renderShapes(); + +} + +function drawNewText() { + const x = parseInt(document.getElementById("text-top-left-x").value) + const y = parseInt(document.getElementById("text-top-left-y").value) + const text = document.getElementById("text-value").value + + const p = new Point(x, y); + const rectangle = new Text(p, text, Date.now()); + shapes.push(rectangle); + renderShapes(); + +} + + + function clearCircles(){ - circles.length = 0; - renderCircles(); + shapes.length = 0; + renderShapes(); } -function renderCircles(){ - drawCircles(document.getElementById("canvas"), circles); +function renderShapes(){ + drawShapes(document.getElementById("canvas"), shapes); populateTable(document.getElementById("table-body"), - circles, + shapes, onClickUp, onClickDown, onClickLeft, onClickRight, - onClickPaint); + onClickPaint, + onClickTrash); } document.getElementById("draw-circle").addEventListener("click", drawNewCircle); +document.getElementById("draw-rectangle").addEventListener("click", drawNewRectangle); +document.getElementById("draw-text").addEventListener("click", drawNewText); + document.getElementById("clear-drawing").addEventListener("click", clearCircles); + diff --git a/src/tp1.js b/src/tp1.js index e5c99f5..89320cb 100644 --- a/src/tp1.js +++ b/src/tp1.js @@ -1,6 +1,6 @@ import m from "https://esm.sh/mithril@2.2.2" -const BLACK = "000000"; +const BLACK = "#000000"; /** * Classe qui représente un point sur * un plan cartésien. Le point est donc @@ -95,28 +95,125 @@ export class Circle{ toString(){ return `Cercle(${ this.#radius }, ${ this.getCenter().getX() }, ${ this.getCenter().getY() })`; } + + bouger(deltaX, deltaY){ + const newCenter = new Point(this.getCenter().getX() + deltaX, + this.getCenter().getY() - deltaY); + this.setCenter(newCenter) + } + + getRepresentationMithril(){ + const attr = { + cx: this.getCenter().getX(), + cy: this.getCenter().getY(), + r: this.getRadius(), + fill: this.getColor(), + + }; + return m("circle", attr); + } } +export class Rectangle { + + constructor(coin, largeur, hauteur, id) { + this.coin = coin; + this.largeur = largeur; + this.hauteur = hauteur; + this.id = id; + this.color = BLACK; + } + + getId(){ + return this.id; + } + + bouger(deltaX, deltaY){ + const nouveauCoin = new Point(this.coin.getX() + deltaX, + this.coin.getY() - deltaY); + this.coin = nouveauCoin + } + + getColor(){ + return this.color; + } + + getRepresentationMithril(){ + const attr = { + x: this.coin.getX(), + y: this.coin.getY(), + width: this.largeur, + height: this.hauteur, + fill: this.getColor(), + + }; + return m("rect", attr); + } + + toString(){ + return `Rectangle(${ this.coin.getX() }, ${ this.coin.getY() }, ${ this.largeur }, ${ this.hauteur })`; + } + + setColor(color){ + this.color = color; + } + +} + + +export class Text { + constructor(coin, text, id) { + this.coin = coin; + this.text = text; + this.id = id; + } + + getId(){ + return this.id; + } + + bouger(deltaX, deltaY){ + const nouveauCoin = new Point(this.coin.getX() + deltaX, + this.coin.getY() - deltaY); + this.coin = nouveauCoin + } + + getColor(){ + return this.color; + } + + getRepresentationMithril(){ + const attr = { + x: this.coin.getX(), + y: this.coin.getY(), + fill: this.getColor(), + + }; + return m("text", attr, this.text); + } + + toString(){ + return `Text(${ this.coin.getX() }, ${ this.coin.getY() }, ${ this.text })`; + } + + setColor(color){ + this.color = color; + } + +} /** - * Dessine tous les cercles dans un svg. Cette fonction + * Dessine toutes les formes dans un svg. Cette fonction * nettoye le svg avant d'ajouter les cercles. * * @param node {HTMLElement} un element svg - * @param circles {Circle[]} Les cercles à dessiner + * @param shapes {Circle[]} Les formes à dessiner */ -export function drawCircles(node, circles){ - let svgCircles = []; - for(const circle of circles){ - const attr = { - cx: circle.getCenter().getX(), - cy: circle.getCenter().getY(), - r: circle.getRadius(), - fill: `#${circle.getColor()}`, - - }; - svgCircles.push(m("circle", attr)) +export function drawShapes(node, shapes){ + let svgShapes = []; + for(const shape of shapes){ + svgShapes.push(shape.getRepresentationMithril()) } - m.render(node, svgCircles); + m.render(node, svgShapes); } function identity(x){ @@ -130,18 +227,20 @@ function functionOrDefault(fn){ return identity; } -function drawIcons(circle, +function drawIcons(shape, onClickUp, onClickDown, onClickLeft, onClickRight, - onClickPaint){ + onClickPaint, + onClickDelete){ 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(shape.getId())}), + m("i.fa-solid.fa-arrow-down.is-clickable", {onclick: () => onClickDown(shape.getId())}), + m("i.fa-solid.fa-arrow-left.is-clickable", {onclick: () => onClickLeft(shape.getId())}), + m("i.fa-solid.fa-arrow-right.is-clickable", {onclick: () => onClickRight(shape.getId())}), + m("input", {type: 'color', onchange: (evt) => onClickPaint(shape.getId(), evt.target.value)}), + m("i.fa-solid.fa-trash.is-clickable", {onclick: () => onClickDelete(shape.getId())}), ] } @@ -171,6 +270,10 @@ function drawIcons(circle, * qui sera appelée lorsque l'icone peinture * sera cliquée. L'id du cercle sera passé en argument de * la fonction. + * @param onClickDelete Argument optionnel qui doit être une fonction + * qui sera appelée lorsque l'icone poubelle + * sera cliquée. L'id du cercle sera passé en argument de + * la fonction. */ export function populateTable(node, circles, @@ -178,7 +281,8 @@ export function populateTable(node, onClickDown=undefined, onClickLeft=undefined, onClickRight=undefined, - onClickPaint=undefined){ + onClickPaint=undefined, + onClickDelete = undefined){ const rows = []; for(const circle of circles){ const row =[m("td", circle.getId()), @@ -188,7 +292,8 @@ export function populateTable(node, functionOrDefault(onClickDown), functionOrDefault(onClickLeft), functionOrDefault(onClickRight), - functionOrDefault(onClickPaint)))]; + functionOrDefault(onClickPaint), + functionOrDefault(onClickDelete)))]; rows.push(m("tr", row)) } m.render(node, rows);