From d8fac33b966e5b7b881ea35bd91cf5813961c1ab Mon Sep 17 00:00:00 2001 From: didier amyot Date: Thu, 14 Dec 2023 11:10:38 -0500 Subject: [PATCH] added tp1 classes --- docs/index.html | 839 ++++++++++++++++++++++++++++++++++++++++ modules-examples/mod.js | 3 +- modules-examples/tp1.js | 204 ++++++++++ 3 files changed, 1045 insertions(+), 1 deletion(-) create mode 100644 modules-examples/tp1.js diff --git a/docs/index.html b/docs/index.html index f8f036e..7e0f4fa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -278,6 +278,98 @@ + +
  • + Point + + + +
    • + + +
  • + Circle + ▸ + + + + +
    • + + +
  • + drawCircles + + + +
    • + + +
  • + populateTable + + + +
    • + + +
  • + randomColor + + + +
    • +
    @@ -2044,6 +2136,753 @@ function returns NaN

    + + + + + +
    + + +
    + +

    + Point +

    + + +
    + + +

    Classe qui représente un point sur +un plan cartésien. Le point est donc +représenté par deux coordonnées x et y.

    + +
    new Point(x: any, y: any)
    + + + + + + + + + + + +
    Parameters
    +
    + +
    +
    + x (any) + +
    + +
    + +
    +
    + y (any) + +
    + +
    + +
    + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + +
    + +

    + Circle +

    + + +
    + + +

    Classe qui représente un cercle. Le cercle est +définit par un Point et un rayon.

    +

    Par défaut, le cercle est noir. Mais le cercle peut +changer de couleur.

    + +
    new Circle(center: Point, radius: number, id: number)
    + + + + + + + + + + + +
    Parameters
    +
    + +
    +
    + center (Point) + le point au centre du cercle + +
    + +
    + +
    +
    + radius (number) + le rayon du cercle + +
    + +
    + +
    +
    + id (number) + l'id unique du cercle. C'est au +créateur de l'instance de s'assurer de l'unicité +de l'id. + +
    + +
    + +
    + + + + + + + + + + + + + + + +
    Instance Members
    +
    + +
    +
    +
    + ▸ + getCenter() +
    +
    + +
    + +
    +
    +
    + ▸ + getRadius() +
    +
    + +
    + +
    +
    +
    + ▸ + getColor() +
    +
    + +
    + +
    +
    +
    + ▸ + setColor(color) +
    +
    + +
    + +
    +
    +
    + ▸ + getId() +
    +
    + +
    + +
    + + + + + + +
    + + + + +
    + + +
    + +

    + drawCircles +

    + + +
    + + +

    Dessine tous les cercles dans un svg. Cette fonction +nettoye le svg avant d'ajouter les cercles.

    + +
    drawCircles(node: any, circles: any)
    + + + + + + + + + + + +
    Parameters
    +
    + +
    +
    + node (any) + {HTMLElement} un element svg + +
    + +
    + +
    +
    + circles (any) + {Circle[]} Les cercles à dessiner + +
    + +
    + +
    + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + +
    + +

    + populateTable +

    + + +
    + + + +
    populateTable(node: any, circles: any, pointToString: any, onClickUp: any, onClickDown: any, onClickLeft: any, onClickRight: any, onClickPaint: any)
    + + + + + + + + + + + +
    Parameters
    +
    + +
    +
    + node (any) + {HTMLElement} un element tbody + +
    + +
    + +
    +
    + circles (any) + {Circle[]} Les cercles + +
    + +
    + +
    +
    + pointToString (any + = undefined) + Argument optionnel qui doit être une fonction +qui prend en paramêtre un Point et retourne un String qui +représente le point. + +
    + +
    + +
    +
    + onClickUp (any + = undefined) + 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 +la fonction. + +
    + +
    + +
    +
    + onClickDown (any + = undefined) + 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 +la fonction. + +
    + +
    + +
    +
    + onClickLeft (any + = undefined) + 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 +la fonction. + +
    + +
    + +
    +
    + onClickRight (any + = undefined) + 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 +la fonction. + +
    + +
    + +
    +
    + onClickPaint (any + = undefined) + 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 +la fonction. + +
    + +
    + +
    + + + + + + + + + + + + + + + + + + + +
    + + + + +
    + + +
    + +

    + randomColor +

    + + +
    + + +

    Retourne une couleur de gris aléatoire à partir d'un nombre entier.

    + +
    randomColor(i: any): string
    + + + + + + + + + + + +
    Parameters
    +
    + +
    +
    + i (any) + {number} (entier) qui sera utilisé comme "seed". + +
    + +
    + +
    + + + + + + +
    Returns
    + string: + une couleur hexadécimale + + + + + + + + + + + + + + + + + +
    diff --git a/modules-examples/mod.js b/modules-examples/mod.js index a3562de..c9a92e5 100644 --- a/modules-examples/mod.js +++ b/modules-examples/mod.js @@ -1,3 +1,4 @@ export * from "./hockey.js" export * from "./books.js" -export * from "./stats.js" \ No newline at end of file +export * from "./stats.js" +export * from "./tp1.js" \ No newline at end of file diff --git a/modules-examples/tp1.js b/modules-examples/tp1.js new file mode 100644 index 0000000..02e7c31 --- /dev/null +++ b/modules-examples/tp1.js @@ -0,0 +1,204 @@ +import m from "https://esm.sh/mithril@2.2.2" + +const BLACK = "000000"; +/** + * Classe qui représente un point sur + * un plan cartésien. Le point est donc + * représenté par deux coordonnées x et y. + */ +export class Point{ + #x; + #y; + constructor(x, y) { + this.#x = x; + this.#y = y; + } + getX(){ + return this.#x; + } + + getY(){ + return this.#y; + } +} + +/** + * Classe qui représente un cercle. Le cercle est + * définit par un Point et un rayon. + * + * Par défaut, le cercle est noir. Mais le cercle peut + * changer de couleur. + */ +export class Circle{ + #center; + #radius; + #color; + #id; + + /** + * + * @param {Point} center le point au centre du cercle + * @param {number} radius le rayon du cercle + * @param {number} id l'id unique du cercle. C'est au + * créateur de l'instance de s'assurer de l'unicité + * de l'id. + */ + constructor(center, radius, id) { + this.#center = center; + this.#radius = radius; + this.#color = BLACK; + this.#id = id; + } + + /** + * @returns {Point} le point au centre au cercle + */ + getCenter(){ + return this.#center; + } + + /** + * + * @returns {number} le rayon du cercle + */ + getRadius(){ + return this.#radius; + } + + /** + * + * @returns {string} la couleur (hexadécimal) du cercle + */ + getColor(){ + return this.#color; + } + + /** + * @param {String} color la nouvelle couleur du cercle + */ + setColor(color){ + this.#color = color; + } + + setCenter(center){ + this.#center = center; + } + + /** + * @returns {number} l'id du cercle + */ + getId(){ + return this.#id; + } +} + +/** + * Dessine tous les cercles 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 + */ +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)) + } + m.render(node, svgCircles); +} + +function identity(x){ + return x; +} + +function functionOrDefault(fn){ + if(typeof fn === 'function'){ + return fn; + } + return identity; +} + +function drawIcons(circle, + onClickUp, + onClickDown, + onClickLeft, + onClickRight, + onClickPaint){ + 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())}), + ] +} + +/** + * @param node {HTMLElement} un element tbody + * @param circles {Circle[]} Les cercles + * @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 + * 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 + * 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 + * 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 + * 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 + * la fonction. + */ +export function populateTable(node, + circles, + pointToString= undefined, + onClickUp=undefined, + onClickDown=undefined, + onClickLeft=undefined, + onClickRight=undefined, + onClickPaint=undefined){ + const rows = []; + pointToString = functionOrDefault(pointToString) + for(const circle of circles){ + const row =[m("td", circle.getId()), + m("td", pointToString(circle.getCenter())), + m("td", circle.getRadius()), + m("td", drawIcons(circle, + functionOrDefault(onClickUp), + functionOrDefault(onClickDown), + functionOrDefault(onClickLeft), + functionOrDefault(onClickRight), + functionOrDefault(onClickPaint)))]; + rows.push(m("tr", row)) + } + m.render(node, rows); + +} + +/** + * Retourne une couleur de gris aléatoire à partir d'un nombre entier. + * @param i {number} (entier) qui sera utilisé comme "seed". + * @returns {string} une couleur hexadécimale + */ +export function randomColor(i){ + const base = (i % 256).toString(16); + return `${base}${base}${base}` +} \ No newline at end of file