86 lines
2.4 KiB
Vue
86 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { chunks } from '~/helpers';
|
|
|
|
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
|
|
const chunk_size = useState<number>('chunk_size', () => 8)
|
|
const threshold = useState<number>('chunk_size', () => 20)
|
|
|
|
const paths_array = ref<{ path: string, unwalkable: boolean, x: number, y: number }[]>()
|
|
|
|
const props = defineProps(['cw', 'ch'])
|
|
|
|
const sampling_data = () => {
|
|
const points = point_array.value
|
|
const chunk = chunk_size.value
|
|
if (!points) return
|
|
const prepared_array = [...chunks(points, chunk)].map(line => {
|
|
const line_data = [] as any[][]
|
|
line.map((item: any) => [...chunks(item, chunk)]).map((item) => {
|
|
item.map((one_line, k) => {
|
|
if (!line_data[k]) line_data[k] = []
|
|
line_data[k].push(...one_line)
|
|
})
|
|
})
|
|
return line_data.map(el => {
|
|
return el.filter(e => e > 0).length > threshold.value ? 1 : 0
|
|
})
|
|
});
|
|
const res: any[] = []
|
|
prepared_array.forEach((line, indexY) => {
|
|
line.forEach((point, indexX) => {
|
|
const targetX = indexX * chunk
|
|
const targetY = indexY * chunk
|
|
res.push({
|
|
path: `M${targetX} ${targetY} ${targetX + chunk} ${targetY} ${targetX + chunk} ${targetY + chunk} ${targetX} ${targetY + chunk}Z`,
|
|
unwalkable: !!point,
|
|
x: indexX,
|
|
y: indexY,
|
|
})
|
|
})
|
|
})
|
|
paths_array.value = res
|
|
}
|
|
watch(point_array, (newStatus) => {
|
|
sampling_data()
|
|
})
|
|
onMounted(() => {
|
|
sampling_data()
|
|
})
|
|
</script>
|
|
<template>
|
|
<svg ref="svgElement" :width="props.cw" :height="props.ch">
|
|
<path v-for="item in paths_array" :d="item.path" :class="[
|
|
{ 'unwalkable': item.unwalkable },
|
|
// { 'endPoint': (endPoint && item.x == endPoint.x && item.y == endPoint.y) },
|
|
// { 'startPoint': (startPoint && item.x == startPoint.x && item.y == startPoint.y) },
|
|
// { 'pathPoint': (startToEndPath && startToEndPath.find((el: number[]) => el[0] == item.x && el[1] == item.y)) },
|
|
]">
|
|
</path>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
svg path {
|
|
fill: transparent
|
|
}
|
|
|
|
svg path:hover {
|
|
fill: red
|
|
}
|
|
|
|
svg path.unwalkable {
|
|
fill: rgba(70, 70, 0, 0.5);
|
|
}
|
|
|
|
svg path.endPoint {
|
|
fill: blue;
|
|
}
|
|
|
|
svg path.startPoint {
|
|
fill: lawngreen;
|
|
}
|
|
|
|
svg path.pathPoint {
|
|
fill: gold;
|
|
}
|
|
</style> |