svg

front/src/components/Floorplan.vue

@@ -5,20 +5,21 @@ import PF, { Grid } from 'pathfinding'
 
 import { useFloorplanStore } from '../stores/floorplan';
 
+type PathItem = { path: string, unwalkable: boolean, x: number, y: number }
 const floorplan = useFloorplanStore()
 
 const canvasElement = ref();
 const context = ref();
 
 const grid = ref<Grid>()
-const startPoint = ref<number[]>()
-const endPoint = ref<number[]>()
+const startPoint = ref<{ x: number, y: number }>({ x: 13, y: 19 })
+const endPoint = ref<{ x: number, y: number }>()
 const startToEndPath = ref()
 
 const plan = useFloorplanStore()
+const paths = ref<PathItem[]>([])
 
 const newDraw = () => {
-    startPoint.value = undefined
     endPoint.value = undefined
     startToEndPath.value = undefined
 
@@ -33,61 +34,71 @@ const newDraw = () => {
         })
     });
 
-    grid.value = new PF.Grid(plan.np_array.map(y => y.map(x => x > 0 ? 1 : 0)))
+    const quantum_lines = plan.prepared_array
+    quantum_lines.forEach((line, indexY) => {
+        line.forEach((point, indexX) => {
+            const targetX = indexX * plan.chunkSize
+            const targetY = indexY * plan.chunkSize
+            paths.value.push({
+                path: `M${targetX} ${targetY} ${targetX + plan.chunkSize} ${targetY} ${targetX + plan.chunkSize} ${targetY + plan.chunkSize} ${targetX} ${targetY + plan.chunkSize}Z`,
+                unwalkable: !!point,
+                x: indexX,
+                y: indexY,
+            })
+        })
+    })
+
+    grid.value = new PF.Grid(plan.prepared_array.map(y => y.map(x => x > 0 ? 1 : 0)))
 }
 
-const setPoint = (event: MouseEvent) => {
-    try {
-        if (!event.currentTarget) return
-        const target = (<HTMLCanvasElement>event.currentTarget)
-        const bound = target.getBoundingClientRect()
-
-        const targetX = event.x - bound.x
-        const targetY = event.y - bound.y
-
-        const ctx = (context.value as CanvasRenderingContext2D)
-
-        if (!startPoint.value) {
-            startPoint.value = [targetX, targetY]
-            ctx.fillStyle = 'rgb(0,255,0,0.75)';
-            ctx.beginPath();
-            ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
-            ctx.fill();
-        } else
-            if (!endPoint.value) {
-                endPoint.value = [targetX, targetY]
-                ctx.fillStyle = 'rgb(0,0,255,0.75)';
-                ctx.beginPath();
-                ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
-                ctx.fill();
-
+const findPath = async () => {
     const finder = new PF.DijkstraFinder();
 
     startToEndPath.value = finder.findPath(
-                    Math.round(startPoint.value[0]),
-                    Math.round(startPoint.value[1]),
-                    Math.round(endPoint.value[0]),
-                    Math.round(endPoint.value[1]),
+        Math.round(startPoint.value.x),
+        Math.round(startPoint.value.y),
+        Math.round(endPoint.value.x),
+        Math.round(endPoint.value.y),
         (grid.value as Grid)
     );
-                startToEndPath.value.forEach((element: number[]) => {
-                    ctx.fillRect(element[0], element[1], 1, 1)
-                });
+    console.log({ path: startToEndPath.value.length })
+}
+
+const setPointSvg = (item: PathItem) => {
+    endPoint.value = { x: item.x, y: item.y }
+    findPath()
+}
+
+const getFillStyle = (item: PathItem) => {
+    if (item.unwalkable) {
+        return 'rgba(0,0,0,0.5)'
+    } else if (item.x == startPoint.value.x && item.y == startPoint.value.y) {
+        return 'lawngreen'
+    } else if (endPoint.value && item.x == endPoint.value.x && item.y == endPoint.value.y) {
+        return 'blue'
+    } else if (startToEndPath.value && startToEndPath.value.find(el => el.x == item.x && el.y == item.y)) {
+        return 'gold'
     } else {
-                newDraw()
-            }
-    } catch (error) {
-        console.log(error)
+        return 'transparent'
     }
 }
+
 onMounted(async () => {
     await floorplan.getData()
     newDraw()
 })
 </script>
 <template>
-    <div class="container" style="display: flex; justify-content: center; align-items: center;">
+    <div class="container" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
         <canvas ref="canvasElement" width="1200" height="600"></canvas>
-        
+        <svg ref="svgElement" width="1200" height="600" style="position: absolute;">
+            <path v-for="item in paths" :d="item.path" :fill="getFillStyle(item)" @click="setPointSvg(item)">
+            </path>
+        </svg>
     </div>
 </template>
+<style scoped>
+svg path:hover {
+    fill: red
+}
+</style>

front/src/stores/floorplan.ts

@@ -6,6 +6,7 @@ export const useFloorplanStore = defineStore('floorplan', {
     state: () => {
         return {
             title: undefined,
+            chunkSize: 10,
             np_array: [] as number[][],
             prepared_array: [] as number[][]
         }
@@ -17,16 +18,17 @@ export const useFloorplanStore = defineStore('floorplan', {
                 const data = await res.json()
                 this.title = data.title
                 this.np_array = data.np_field
-                const chunkSize = 5
-                this.prepared_array = [...chunks(data.np_field, chunkSize)].map(line => {
+                this.prepared_array = [...chunks(data.np_field, this.chunkSize)].map(line => {
                     const line_data = [] as any[][]
-                    line.map((item: any) => [...chunks(item, chunkSize)]).map((item) => {
+                    line.map((item: any) => [...chunks(item, this.chunkSize)]).map((item, j) => {
                         item.map((one_line, k) => {
                             if (!line_data[k]) line_data[k] = []
                             line_data[k].push(...one_line)
                         })
                     })
-                    return line_data.map(el=> el.some(deep => deep > 0) ? 1 : 0)
+                    return line_data.map(el => {
+                        return el.filter(e => e > 0).length > 0 ? 1 : 0
+                    })
                 });
             } catch (error) {
                 // this.list = []