img

front/src/components/Gallery/item.vue

@@ -3,17 +3,11 @@ import * as d3 from "d3"
 import { onMounted } from "vue"
 
 import { IMAGE_URL } from '../../constants'
-import { getRandomIntInclusive } from "../../helpers";
 
 const props = defineProps(['files'])
-const cover = getRandomIntInclusive(0, props.files.length)
-const coverImg = props.files.length > 1 ? `url(${IMAGE_URL}/${props.files[cover].file})` : 'url(/src/assets/promo/map.png)'
 
 onMounted(async () => {
     const files = props.files.slice(0)
-    if (files.length > 1) {
-        files.splice(cover, 1)
-    }
 
     // const width = 1920
     // const height = 1080
@@ -42,7 +36,7 @@ onMounted(async () => {
             .attr("x", 0)
             .attr("y", 0);
     });
-    const range = files.length + 2
+    const range = files.length - 2
     const circles = d3.range(range).map(() => ({
         x: Math.random() * width,
         y: Math.random() * height,
@@ -68,13 +62,12 @@ onMounted(async () => {
         .attr("d", voronoi.render());
 
     const cell = svg.append("g")
-        .attr("fill", "none")
         .attr("pointer-events", "all")
         .selectAll("path")
         .data(circles)
         .join("path")
         .attr("d", (_, i) => voronoi.renderCell(i))
-        .attr('fill', (_, i) => i < (range - 2) ? `url(#img${i})` : 'none')
+        .attr('fill', (_, i) => `url(#img${i})`)
         .call(d3.drag()
             .on("start", (_, d) => circle.filter(p => p === d).raise().attr("stroke", "black"))
             .on("drag", (event, d: any) => (d.x = event.x, d.y = event.y))
@@ -89,9 +82,6 @@ onMounted(async () => {
     }
 
     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 }
         update()
     }
 })
@@ -103,6 +93,5 @@ onMounted(async () => {
 #gallery {
     width: 100vw;
     height: 100vh;
-    background-image: v-bind(coverImg);
 }
 </style>