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)
+    }
 })
 </script>
 <template>