diff --git a/.vscode/PythonImportHelper-v2-Completion.json b/.vscode/PythonImportHelper-v2-Completion.json index 3203bd8..b172435 100644 --- a/.vscode/PythonImportHelper-v2-Completion.json +++ b/.vscode/PythonImportHelper-v2-Completion.json @@ -8516,7 +8516,7 @@ "kind": 6, "importPath": "back.api.views", "description": "back.api.views", - "peekOfCode": "class FloorplanPointsView(APIView):\n def get(self, request, id):\n points = FloorplanPoints.objects.get(plan=id)\n serializer = FloorplanPointsSerializer(points, many=False)\n return JsonResponse(serializer.data, safe=False)\n def post(self, request, id):\n data = JSONParser().parse(request)\n data[\"plan\"] = id\n serializer = FloorplanPointsSerializer(data=data)\n if serializer.is_valid():", + "peekOfCode": "class FloorplanPointsView(APIView):\n def get(self, request, id):\n if FloorplanPoints.objects.filter(plan=id).exists():\n points = FloorplanPoints.objects.get(plan=id)\n serializer = FloorplanPointsSerializer(points, many=False)\n return JsonResponse(serializer.data, safe=False)\n else:\n return JsonResponse(\"No item\", status=400)\n def post(self, request, id):\n data = JSONParser().parse(request)", "detail": "back.api.views", "documentation": {} }, diff --git a/admin_front/components/FloorplanSvg.vue b/admin_front/components/FloorplanSvg.vue index dd764de..da75b7e 100644 --- a/admin_front/components/FloorplanSvg.vue +++ b/admin_front/components/FloorplanSvg.vue @@ -2,6 +2,8 @@ import { chunks } from '~/helpers'; import * as d3 from "d3"; +const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve)); + const point_array = useState('point_array', () => undefined) const chunk_size = useState('chunk_size', () => 8) const threshold = useState('threshold', () => 20) @@ -17,7 +19,13 @@ const setActivePoint = (item: { x: number, y: number }) => { active_point.value = { x: item.x, y: item.y } } -const sampling_data = () => { +const redraw = ref(false) + +const sampling_data = async () => { + if (redraw.value) { + return + } + redraw.value = true grid_redraw.value = true const points = point_array.value const chunk = chunk_size.value @@ -50,12 +58,14 @@ const sampling_data = () => { }) paths_array.value = res - console.time('redraw D3') + // console.time('redraw D3') const svg = d3.select('#d3svg') - // svg.selectAll("path").remove(); + svg.selectAll("path").remove(); const path_elements = svg.selectAll("path") - paths_array.value.forEach(async (element, i) => { + for (let i = 0; i < paths_array.value.length; i++) { + const element = paths_array.value[i]; + let _class = ''; if (element.unwalkable) { _class += ' unwalkable' @@ -67,23 +77,23 @@ const sampling_data = () => { } const clickFunk = () => setActivePoint({ x: element.x, y: element.y }) if (path_elements.nodes()[i]) { - // console.log(`update ${i}`) d3.select(path_elements.nodes()[i]) - // .transition() - // .duration(300) .attr('d', element.path) .attr('class', _class) .on('click', clickFunk) } else { - // console.log(`add${i}`) svg.append("path") .attr('d', element.path) .attr('class', _class) .on('click', clickFunk) } - }); - console.timeEnd('redraw D3') + if (i % 10 == 0) { + await nextFrame() + } + }; + // console.timeEnd('redraw D3') grid_redraw.value = false + redraw.value = false } watch(point_array, () => { sampling_data() @@ -98,7 +108,7 @@ watch(threshold, () => { sampling_data() }) onMounted(() => { - sampling_data() + // sampling_data() })