ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gallery fix

This commit is contained in:
Kseninia Mikhaylova 2024-06-26 13:58:11 +03:00
parent bfff231e7f
commit 2f2a15b466
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/components/Promo/gallery.vue
View File

@ -34,17 +34,11 @@ onMounted(async () => {
.attr("x", 0) .attr("x", 0)
.attr("y", 0); .attr("y", 0);
}); });
const range = 20
const circles = d3.range(20).map(() => ({ const circles = d3.range(range).map(() => ({
x: Math.random() * (width - radius * 2) + radius, x: Math.random() * (width - radius * 2) + radius,
y: Math.random() * (height - 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 let voronoi = d3.Delaunay
.from(circles, d => d.x, d => d.y) .from(circles, d => d.x, d => d.y)
@ -72,7 +66,7 @@ onMounted(async () => {
.data(circles) .data(circles)
.join("path") .join("path")
.attr("d", (d, i) => voronoi.renderCell(i)) .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() .call(d3.drag()
.on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black")) .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)) .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)); cell.attr("d", (d, i) => voronoi.renderCell(i));
mesh.attr("d", voronoi.render()); 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> </script>
<template> <template>