diff --git a/front/src/components/Promo/gallery.vue b/front/src/components/Promo/gallery.vue index 8c8fe26..9114b73 100644 --- a/front/src/components/Promo/gallery.vue +++ b/front/src/components/Promo/gallery.vue @@ -34,17 +34,11 @@ onMounted(async () => { .attr("x", 0) .attr("y", 0); }); - - const circles = d3.range(20).map(() => ({ + const range = 20 + const circles = d3.range(range).map(() => ({ x: Math.random() * (width - radius * 2) + radius, y: Math.random() * (height - radius * 2) + radius, })); - - if (document.querySelector('.pin')) { - const rect = (document.querySelector('.pin') as HTMLElement).getBoundingClientRect() - circles[circles.length - 1] = { x: rect.x + rect.width, y: rect.y + rect.height } - circles[circles.length - 2] = { x: rect.x, y: rect.y } - } let voronoi = d3.Delaunay .from(circles, d => d.x, d => d.y) @@ -72,7 +66,7 @@ onMounted(async () => { .data(circles) .join("path") .attr("d", (d, i) => voronoi.renderCell(i)) - .attr('fill', (d, i) => `url(#img${i})`) + .attr('fill', (d, i) => i < (range - 2) ? `url(#img${i})` : 'none') .call(d3.drag() .on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black")) .on("drag", (event, d: any) => (d.x = event.x, d.y = event.y)) @@ -85,6 +79,14 @@ onMounted(async () => { cell.attr("d", (d, i) => voronoi.renderCell(i)); mesh.attr("d", voronoi.render()); } + + if (document.querySelector('.pin')) { + setTimeout(() => { + const rect = (document.querySelector('.pin') as HTMLElement).getBoundingClientRect() + circles[circles.length - 1] = { x: rect.x + rect.width, y: rect.y + rect.height } + circles[circles.length - 2] = { x: rect.x, y: rect.y } + }, 300) + } })