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

bx-1379-redesign #15

Merged
ksenia_mikhailova merged 124 commits from bx-1379-redesign into dev 2024-09-06 15:39:13 +03:00
Conversation 0 Commits 124 Files Changed 68 +2 -13
1 changed files with 2 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a639fba26b - Show all commits

15
front/src/components/Gallery/item.vue
View File

@ -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>