added tp1 classes
This commit is contained in:
didier amyot committed
1 parent
ad0683528b
commit
d8fac33b96
3 files changed
+1045
-1
No files matched your search
+839
@@ -278,6 +278,98 @@
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li><a
|
||||
href='#point'
|
||||
class="">
|
||||
Point
|
||||
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li><a
|
||||
href='#circle'
|
||||
class=" toggle-sibling">
|
||||
Circle
|
||||
<span class='icon'>▸</span>
|
||||
</a>
|
||||
|
||||
<div class='toggle-target display-none'>
|
||||
|
||||
|
||||
<ul class='list-reset py1-ul pl1'>
|
||||
<li class='h5'><span>Instance members</span></li>
|
||||
|
||||
<li><a
|
||||
href='#circlegetcenter'
|
||||
class='regular pre-open'>
|
||||
#getCenter
|
||||
</a></li>
|
||||
|
||||
<li><a
|
||||
href='#circlegetradius'
|
||||
class='regular pre-open'>
|
||||
#getRadius
|
||||
</a></li>
|
||||
|
||||
<li><a
|
||||
href='#circlegetcolor'
|
||||
class='regular pre-open'>
|
||||
#getColor
|
||||
</a></li>
|
||||
|
||||
<li><a
|
||||
href='#circlesetcolor'
|
||||
class='regular pre-open'>
|
||||
#setColor
|
||||
</a></li>
|
||||
|
||||
<li><a
|
||||
href='#circlegetid'
|
||||
class='regular pre-open'>
|
||||
#getId
|
||||
</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li><a
|
||||
href='#drawcircles'
|
||||
class="">
|
||||
drawCircles
|
||||
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li><a
|
||||
href='#populatetable'
|
||||
class="">
|
||||
populateTable
|
||||
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li><a
|
||||
href='#randomcolor'
|
||||
class="">
|
||||
randomColor
|
||||
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class='mt1 h6 quiet'>
|
||||
@@ -2044,6 +2136,753 @@ function returns NaN</p>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
<div class='clearfix'>
|
||||
|
||||
<h3 class='fl m0' id='point'>
|
||||
Point
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p>Classe qui représente un point sur
|
||||
un plan cartésien. Le point est donc
|
||||
représenté par deux coordonnées x et y.</p>
|
||||
|
||||
<div class='pre p1 fill-light mt0'>new Point(x: any, y: any)</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>x</span> <code class='quiet'>(any)</code>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>y</span> <code class='quiet'>(any)</code>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
<div class='clearfix'>
|
||||
|
||||
<h3 class='fl m0' id='circle'>
|
||||
Circle
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p>Classe qui représente un cercle. Le cercle est
|
||||
définit par un Point et un rayon.</p>
|
||||
<p>Par défaut, le cercle est noir. Mais le cercle peut
|
||||
changer de couleur.</p>
|
||||
|
||||
<div class='pre p1 fill-light mt0'>new Circle(center: <a href="#point">Point</a>, radius: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, id: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>center</span> <code class='quiet'>(<a href="#point">Point</a>)</code>
|
||||
le point au centre du cercle
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>radius</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
|
||||
le rayon du cercle
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
|
||||
l'id unique du cercle. C'est au
|
||||
créateur de l'instance de s'assurer de l'unicité
|
||||
de l'id.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Instance Members</div>
|
||||
<div class="clearfix">
|
||||
|
||||
<div class='border-bottom' id='circlegetcenter'>
|
||||
<div class="clearfix small pointer toggle-sibling">
|
||||
<div class="py1 contain">
|
||||
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
|
||||
<span class='code strong strong truncate'>getCenter()</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix display-none toggle-target">
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>getCenter(): <a href="#point">Point</a></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Returns</div>
|
||||
<code><a href="#point">Point</a></code>:
|
||||
le point au centre au cercle
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='border-bottom' id='circlegetradius'>
|
||||
<div class="clearfix small pointer toggle-sibling">
|
||||
<div class="py1 contain">
|
||||
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
|
||||
<span class='code strong strong truncate'>getRadius()</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix display-none toggle-target">
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>getRadius(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Returns</div>
|
||||
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
|
||||
le rayon du cercle
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='border-bottom' id='circlegetcolor'>
|
||||
<div class="clearfix small pointer toggle-sibling">
|
||||
<div class="py1 contain">
|
||||
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
|
||||
<span class='code strong strong truncate'>getColor()</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix display-none toggle-target">
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>getColor(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Returns</div>
|
||||
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
|
||||
la couleur (hexadécimal) du cercle
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='border-bottom' id='circlesetcolor'>
|
||||
<div class="clearfix small pointer toggle-sibling">
|
||||
<div class="py1 contain">
|
||||
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
|
||||
<span class='code strong strong truncate'>setColor(color)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix display-none toggle-target">
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>setColor(color: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">String</a>)</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>color</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">String</a>)</code>
|
||||
la nouvelle couleur du cercle
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='border-bottom' id='circlegetid'>
|
||||
<div class="clearfix small pointer toggle-sibling">
|
||||
<div class="py1 contain">
|
||||
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
|
||||
<span class='code strong strong truncate'>getId()</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix display-none toggle-target">
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>getId(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Returns</div>
|
||||
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
|
||||
l'id du cercle
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
<div class='clearfix'>
|
||||
|
||||
<h3 class='fl m0' id='drawcircles'>
|
||||
drawCircles
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p>Dessine tous les cercles dans un svg. Cette fonction
|
||||
nettoye le svg avant d'ajouter les cercles.</p>
|
||||
|
||||
<div class='pre p1 fill-light mt0'>drawCircles(node: any, circles: any)</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>node</span> <code class='quiet'>(any)</code>
|
||||
{HTMLElement} un element svg
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>circles</span> <code class='quiet'>(any)</code>
|
||||
{Circle[]} Les cercles à dessiner
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
<div class='clearfix'>
|
||||
|
||||
<h3 class='fl m0' id='populatetable'>
|
||||
populateTable
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class='pre p1 fill-light mt0'>populateTable(node: any, circles: any, pointToString: any, onClickUp: any, onClickDown: any, onClickLeft: any, onClickRight: any, onClickPaint: any)</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>node</span> <code class='quiet'>(any)</code>
|
||||
{HTMLElement} un element tbody
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>circles</span> <code class='quiet'>(any)</code>
|
||||
{Circle[]} Les cercles
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>pointToString</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
Argument optionnel qui doit être une fonction
|
||||
qui prend en paramêtre un Point et retourne un String qui
|
||||
représente le point.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>onClickUp</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>onClickDown</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>onClickLeft</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>onClickRight</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>onClickPaint</span> <code class='quiet'>(any
|
||||
= <code>undefined</code>)</code>
|
||||
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.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class='p2 mb2 clearfix bg-white minishadow'>
|
||||
|
||||
|
||||
<div class='clearfix'>
|
||||
|
||||
<h3 class='fl m0' id='randomcolor'>
|
||||
randomColor
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<p>Retourne une couleur de gris aléatoire à partir d'un nombre entier.</p>
|
||||
|
||||
<div class='pre p1 fill-light mt0'>randomColor(i: any): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Parameters</div>
|
||||
<div class='prose'>
|
||||
|
||||
<div class='space-bottom0'>
|
||||
<div>
|
||||
<span class='code bold'>i</span> <code class='quiet'>(any)</code>
|
||||
{number} (entier) qui sera utilisé comme "seed".
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class='py1 quiet mt1 prose-big'>Returns</div>
|
||||
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
|
||||
une couleur hexadécimale
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./hockey.js"
|
||||
export * from "./books.js"
|
||||
export * from "./stats.js"
|
||||
export * from "./stats.js"
|
||||
export * from "./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}`
|
||||
}
|
||||
Reference in new issue
Block a user