73 lines
2.0 KiB
Vue
73 lines
2.0 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
tree: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const item = props.tree
|
|
|
|
const {data : items} = await useFetch(CDRAGON_BASE + "plugins/rcp-be-lol-game-data/global/default/v1/items.json")
|
|
const itemMap = reactive(new Map())
|
|
for(let item of items.value) {
|
|
itemMap.set(item.id, item)
|
|
}
|
|
|
|
import pkg from 'svg-dom-arrows'; const { LinePath } = pkg;
|
|
const treeItems = ref([])
|
|
const treeItem = ref(null)
|
|
const start = ref(null)
|
|
|
|
const arrows = []
|
|
|
|
onMounted(() => {
|
|
if(start.value == null) return;
|
|
for(let dest of treeItems.value) {
|
|
console.log(dest)
|
|
const arrow = new LinePath({
|
|
start: {
|
|
element: start.value,
|
|
position: {
|
|
top: 0.5,
|
|
left: 1
|
|
}
|
|
},
|
|
end: {
|
|
element: dest.childNodes[0].childNodes[0].childNodes[0],
|
|
position: {
|
|
top: 0.5,
|
|
left: 0
|
|
}
|
|
},
|
|
|
|
style: 'stroke:var(--color-on-surface);stroke-width:3;fill:transparent;',
|
|
appendTo: document.body
|
|
})
|
|
arrows.push(arrow)
|
|
}
|
|
})
|
|
onUnmounted(() => {
|
|
for(let arrow of arrows) {
|
|
document.body.removeChild(arrow.containerDiv)
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="treeItem" style="display: flex; align-items: center;">
|
|
|
|
<div v-if="item.data != undefined && item.data != null" style="width: fit-content; height: fit-content;">
|
|
<img ref="start" class="item-img" width="64" height="64" :alt="item.data" :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
|
</div>
|
|
|
|
<div style="margin-left: 30px;">
|
|
<div style="width: fit-content; height: fit-content;" :ref="(el) => { treeItems.push(el) }" v-for="child in item.children">
|
|
<TreeItem :tree="child" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|