front/package-lock.json

@@ -11,6 +11,7 @@
         "@fireworks-js/vue": "^2.10.7",
         "@vueuse/components": "^10.9.0",
         "@vueuse/core": "^10.9.0",
+        "pathfinding": "^0.4.18",
         "pinia": "^2.1.7",
         "reset-css": "^5.0.2",
         "vue": "^3.4.21",
@@ -1420,6 +1421,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heap": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.5.tgz",
+      "integrity": "sha512-G7HLD+WKcrOyJP5VQwYZNC3Z6FcQ7YYjEFiFoIj8PfEr73mu421o8B1N5DKUcc8K37EsJ2XXWA8DtrDz/2dReg=="
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -1759,6 +1765,14 @@
       "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "dev": true
     },
+    "node_modules/pathfinding": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/pathfinding/-/pathfinding-0.4.18.tgz",
+      "integrity": "sha512-R0TGEQ9GRcFCDvAWlJAWC+KGJ9SLbW4c0nuZRcioVlXVTlw+F5RvXQ8SQgSqI9KXWC1ew95vgmIiyaWTlCe9Ag==",
+      "dependencies": {
+        "heap": "0.2.5"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",

front/package.json

@@ -12,6 +12,7 @@
     "@fireworks-js/vue": "^2.10.7",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
+    "pathfinding": "^0.4.18",
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",
     "vue": "^3.4.21",

front/src/components/Floorplan.vue

@@ -1,17 +1,92 @@
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import PF, { Grid } from 'pathfinding'
+
 import { useFloorplanStore } from '../stores/floorplan';
 
 const floorplan = useFloorplanStore()
-onMounted(()=>{
-    floorplan.getData()
+
+const canvasElement = ref();
+const context = ref();
+
+const grid = ref<Grid>()
+const startPoint = ref<number[]>()
+const endPoint = ref<number[]>()
+const startToEndPath = ref()
+
+const plan = useFloorplanStore()
+
+const newDraw = () => {
+    startPoint.value = undefined
+    endPoint.value = undefined
+    startToEndPath.value = undefined
+
+    context.value = canvasElement.value?.getContext('2d') || undefined;
+    const lines = plan.np_array
+    lines.forEach((line, indexY) => {
+        line.forEach((point, indexX) => {
+            if (canvasElement.value && context.value) {
+                context.value.fillStyle = point > 0 ? 'red' : 'WHITE'
+                context.value.fillRect(indexX, indexY, 1, 1)
+            }
+        })
+    });
+
+    grid.value = new PF.Grid(plan.np_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 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]),
+                    (grid.value as Grid)
+                );
+                startToEndPath.value.forEach((element: number[]) => {
+                    ctx.fillRect(element[0], element[1], 1, 1)
+                });
+            } else {
+                newDraw()
+            }
+    } catch (error) {
+        console.log(error)
+    }
+}
+onMounted(async () => {
+    await floorplan.getData()
+    newDraw()
 })
 </script>
 <template>
-    <div class="container">
-        
+    <div class="container" style="display: flex; justify-content: center; align-items: center;">
+        <canvas ref="canvasElement" width="1200" height="600" @click="setPoint"></canvas>
     </div>
 </template>

front/src/stores/floorplan.ts

@@ -4,7 +4,8 @@ import { SERVER_URL } from '../constants'
 export const useFloorplanStore = defineStore('floorplan', {
     state: () => {
         return {
-            // for initially empty lists
+            title: undefined,
+            np_array: [] as number[][]
         }
     },
     actions: {
@@ -12,22 +13,11 @@ export const useFloorplanStore = defineStore('floorplan', {
             try {
                 const res = await fetch(`${SERVER_URL}/api/floorplan`)
                 const data = await res.json()
-                if (data.length) {
-                    // this.list = data
-                }
+                this.title = data.title
+                this.np_array = data.np_field
             } catch (error) {
                 // this.list = []
             }
         },
     }
-})
-
-export interface ProductInfo {
-    id: number
-    title: string
-    description: string
-    model3d?: string
-    image1?: string
-    image2?: string
-    image3?: string
-}
+})