added tp1 classes
This commit is contained in:
didier amyot committed
1 parent
ad0683528b
commit
d8fac33b96
3 files changed
+1044
No files matched your search
+839
@@ -278,6 +278,98 @@
|
|||||||
|
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class='mt1 h6 quiet'>
|
<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>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
export * from "./hockey.js"
|
export * from "./hockey.js"
|
||||||
export * from "./books.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