Stroke hovered color.
This commit is contained in:
parent
69d5b416ed
commit
53f5afab4b
33
colors.html
33
colors.html
|
@ -2,6 +2,9 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Named Colors Wheel</title>
|
<title>Named Colors Wheel</title>
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -15,12 +18,11 @@
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<style>
|
<style>
|
||||||
polygon { stroke-width: 4px; }
|
polygon { stroke-width: 5px; }
|
||||||
polygon:hover { stroke: black; }
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<defs>
|
<defs>
|
||||||
<mask id="circle-mask">
|
<mask id="circle-mask" maskUnits="userSpaceOnUse">
|
||||||
<rect x="0" y="0" width="1024" height="1024" fill="black" />
|
<rect x="0" y="0" width="1024" height="1024" fill="black" />
|
||||||
<circle cx="512" cy="512" r="512" fill="white" />
|
<circle cx="512" cy="512" r="512" fill="white" />
|
||||||
</mask>
|
</mask>
|
||||||
|
@ -197,6 +199,7 @@ const cx = radius;
|
||||||
const cy = radius;
|
const cy = radius;
|
||||||
|
|
||||||
const svg = document.querySelector('svg');
|
const svg = document.querySelector('svg');
|
||||||
|
const svgStyle = svg.querySelector('style').sheet;
|
||||||
|
|
||||||
let colorsBySite = {};
|
let colorsBySite = {};
|
||||||
let sites = [];
|
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});
|
let voronoi = new Voronoi().compute(sites, {xl: 0, xr: 1024, yt: 0, yb: 1024});
|
||||||
|
|
||||||
voronoi.cells.forEach(cell => {
|
voronoi.cells.forEach(cell => {
|
||||||
if (cell.closeMe) {
|
if (cell.closeMe) {
|
||||||
console.warn('cell', cell, 'needs closing');
|
console.warn('cell', cell, 'needs closing');
|
||||||
|
@ -225,7 +227,8 @@ voronoi.cells.forEach(cell => {
|
||||||
let [r, g, b] = colors[colorName];
|
let [r, g, b] = colors[colorName];
|
||||||
|
|
||||||
let c = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
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)');
|
c.setAttribute('mask', 'url(#circle-mask)');
|
||||||
|
|
||||||
let points = '';
|
let points = '';
|
||||||
|
@ -237,5 +240,25 @@ voronoi.cells.forEach(cell => {
|
||||||
c.setAttribute('points', points);
|
c.setAttribute('points', points);
|
||||||
|
|
||||||
svg.appendChild(c);
|
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 = '';
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue