diff --git a/colors.html b/colors.html
index 645c148..2937b4a 100644
--- a/colors.html
+++ b/colors.html
@@ -2,6 +2,9 @@
Named Colors Wheel
@@ -15,12 +18,11 @@
xmlns="http://www.w3.org/2000/svg"
>
-
+
@@ -197,6 +199,7 @@ const cx = radius;
const cy = radius;
const svg = document.querySelector('svg');
+const svgStyle = svg.querySelector('style').sheet;
let colorsBySite = {};
let sites = [];
@@ -215,7 +218,6 @@ Object.entries(colors).forEach(([name, color], _) => {
});
let voronoi = new Voronoi().compute(sites, {xl: 0, xr: 1024, yt: 0, yb: 1024});
-
voronoi.cells.forEach(cell => {
if (cell.closeMe) {
console.warn('cell', cell, 'needs closing');
@@ -225,7 +227,8 @@ voronoi.cells.forEach(cell => {
let [r, g, b] = colors[colorName];
let c = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
- c.setAttribute('style', `fill: rgb(${r}, ${g}, ${b})`);
+// c.setAttribute('style', `fill: );
+ c.setAttribute('data-color', colorName);
c.setAttribute('mask', 'url(#circle-mask)');
let points = '';
@@ -237,5 +240,25 @@ voronoi.cells.forEach(cell => {
c.setAttribute('points', points);
svg.appendChild(c);
+ let rgb = `rgb(${r}, ${g}, ${b})`;
+ svgStyle.insertRule(`[data-color=${colorName}] { fill: ${rgb}; stroke: ${rgb}; }`);
+});
+
+svg.addEventListener('mouseover', e => {
+ let el = e.target;
+ if (el.tagName != 'polygon') return;
+ if (!el.nextElementSibling) return;
+ let parent = el.parentElement;
+ // Move the SVG node to the end, so it(s stroke) will draw above all others.
+ parent.appendChild(el);
+ // Force its stroke to be black. (Doing this with CSS doesn't work; the hover
+ // state is broken by mutating the DOM.)
+ el.style.stroke = 'black';
+});
+svg.addEventListener('mouseout', e => {
+ let el = e.target;
+ if (el.tagName != 'polygon') return;
+ // Reset stroke from mouseover.
+ el.style.stroke = '';
});