124 lines
3.6 KiB
Vue
124 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { chunks } from '~/helpers';
|
|
import * as d3 from "d3";
|
|
|
|
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
|
|
const chunk_size = useState<number>('chunk_size', () => 8)
|
|
const threshold = useState<number>('threshold', () => 20)
|
|
|
|
const paths_array = ref<{ path: string, unwalkable: boolean, x: number, y: number }[]>()
|
|
|
|
const props = defineProps(['cw', 'ch'])
|
|
|
|
const d3svg = ref()
|
|
|
|
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
|
|
|
|
console.time('redraw D3')
|
|
const svg = d3.select('#d3svg')
|
|
// svg.selectAll("path").remove();
|
|
const path_elements = svg.selectAll("path")
|
|
|
|
paths_array.value.forEach((element, i) => {
|
|
if (!d3.select(path_elements.nodes()[i]).empty()) {
|
|
console.log(`update ${i}`)
|
|
d3.select(path_elements.nodes()[i])
|
|
.transition()
|
|
.duration(300)
|
|
.attr('d', element.path)
|
|
.attr('class', element.unwalkable ? 'unwalkable' : 'walkable')
|
|
} else {
|
|
console.log(`add ${i}`)
|
|
svg.append("path")
|
|
.attr('d', element.path)
|
|
.attr('class', element.unwalkable ? 'unwalkable' : 'walkable')
|
|
}
|
|
});
|
|
console.timeEnd('redraw D3')
|
|
}
|
|
watch(point_array, () => {
|
|
console.log('point_array')
|
|
sampling_data()
|
|
})
|
|
watch(chunk_size, () => {
|
|
console.log('chunk size')
|
|
sampling_data()
|
|
})
|
|
watch(threshold, () => {
|
|
console.log('threshold')
|
|
sampling_data()
|
|
})
|
|
onMounted(() => {
|
|
sampling_data()
|
|
})
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<svg :width="props.cw" :height="props.ch" v-if="false">
|
|
<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>
|
|
<svg :width="props.cw" :height="props.ch" ref="d3svg" id="d3svg"></svg>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
svg path {
|
|
fill: transparent;
|
|
stroke: rgba(70, 70, 0, 0.1);
|
|
}
|
|
|
|
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> |