Spaces:
Paused
Paused
File size: 2,581 Bytes
730b0a8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<script lang="ts" setup>
import {useDrop, XYCoord} from 'vue3-dnd'
import {ItemTypes} from './ItemTypes'
import Box from './Box.vue'
import type {DragItem} from './interfaces'
import {reactive, ref} from 'vue'
import ItemCard from "@/components/ItemCard.vue";
import AvailableResources from "@/components/AvailableResources.vue";
import {useBoxesStore} from "@/stores/useBoxesStore";
import {storeToRefs} from "pinia";
const store = useBoxesStore()
const { boxes } = store
const moveBox = (id: string, left: number, top: number, title?: string, emoji?: string) => {
if (id) {
Object.assign(boxes[id], {left, top})
} else {
const key = Math.random().toString(36).substring(7);
boxes[key] = {top, left, title, emoji}
console.log(boxes)
}
}
const containerElement = ref<HTMLElement | null>(null)
const [, drop] = useDrop(() => ({
accept: ItemTypes.BOX,
drop(item: DragItem, monitor) {
if (item.id && item.left !== null && item.top !== null) {
const delta = monitor.getDifferenceFromInitialOffset() as XYCoord
if(delta && delta.x && delta.y){
const left = Math.round((item.left) + delta.x)
const top = Math.round((item.top) + delta.y )
moveBox(item.id, left, top)
}
} else {
const delta = monitor.getClientOffset() as XYCoord
// current mouse position relative to drop
const containerCoords = containerElement.value.getBoundingClientRect()
if(delta && delta.x && delta.y){
const left = Math.round(delta.x - containerCoords.left - 40)
const top = Math.round(delta.y - containerCoords.top - 15)
moveBox(null, left, top, item.title, item.emoji)
}
}
return undefined
},
}))
</script>
<template>
<div ref="containerElement">
<main class="flex gap-x-3">
<div class="w-3/4">
<div :ref="drop" class="container">
<Box
v-for="(value, key) in boxes"
:id="key"
:key="key"
:left="value.left"
:top="value.top"
:loading="value.loading"
>
<ItemCard size="large" :id="key" :title="value.title" :emoji="value.emoji"/>
</Box>
</div>
</div>
<div class="w-1/4 bg-white shadow px-4 py-3 border-gray-200 border rounded-lg overflow-y-scroll max-h-[80vh]">
<h2 class="font-semibold">Resources</h2>
<AvailableResources></AvailableResources>
</div>
</main>
</div>
</template>
<style scoped>
.container {
position: relative;
width: 100%;
height: 90vh;
}
</style>
|