front/src/components/FloorplanItem.vue

@@ -47,11 +47,11 @@ const newDraw = async () => {
 
 
     const quantum_lines = plan.prepared_array
+    const chunkSize = plan.chunk_size || 8
     quantum_lines.forEach((line, indexY) => {
+        const targetY = indexY * chunkSize
         line.forEach((point, indexX) => {
-            const chunkSize = plan.chunk_size || 8
             const targetX = indexX * chunkSize
-            const targetY = indexY * chunkSize
             paths.value.push({
                 path: `M${targetX} ${targetY} ${targetX + chunkSize} ${targetY} ${targetX + chunkSize} ${targetY + chunkSize} ${targetX} ${targetY + chunkSize}Z`,
                 unwalkable: !!point,
@@ -76,8 +76,11 @@ const findPath = async () => {
     startToEndPath.value = localPath
 }
 
-const setPointSvg = (item: PathItem) => {
+const setPointSvg = (item: { x: number, y: number }) => {
     // startToEndPath.value = []
+    const startP = floorplan.points.find(el => el.type === 'start')
+    if (!startP) return
+    startPoint.value = { x: startP.points.x, y: startP.points.y }
     endPoint.value = { x: item.x, y: item.y }
     findPath()
 }
@@ -91,16 +94,25 @@ const ch = 800
 </script>
 <template>
     <div class="container" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
-        <canvas ref="canvasElement" :width="cw" :height="ch"></canvas>
-        <svg ref="svgElement" :width="cw" :height="ch" style="position: absolute;">
-            <path v-for="item in paths" :d="item.path" @click="setPointSvg(item)" :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>
+        <div class="svg-container" style="position: relative">
+            <canvas ref="canvasElement" :width="cw" :height="ch"></canvas>
+            <svg ref="svgElement" :width="cw" :height="ch" style="position: absolute; top: 0; right: 0;">
+                <path v-for="item in paths" :d="item.path" @click="setPointSvg(item)" :class="[
+                    { 'unwalkable': item.unwalkable },
+                    { 'endPoint': !!(floorplan.points.find(el => el.type == 'start' && el.points.x == item.x && el.points.y == item.y)) },
+                    { 'startPoint': !!(floorplan.points.find(el => el.type.indexOf('cabinet') !== -1 && el.points.x === item.x && el.points.y === item.y)) },
+                    { 'pathPoint': (startToEndPath && startToEndPath.find((el: number[]) => el[0] == item.x && el[1] == item.y)) },
+                ]">
+                </path>
+            </svg>
+        </div>
+        <div class="buttons">
+            <template v-for="item in floorplan.points">
+                <span v-if="item.type !== 'start'" @click="setPointSvg({ x: item.points.x, y: item.points.y })">
+                    {{ item.title }}
+                </span>
+            </template>
+        </div>
     </div>
 </template>
 <style scoped>
@@ -113,7 +125,7 @@ svg path:hover {
 }
 
 svg path.unwalkable {
-    /* fill: rgba(0, 0, 0, 0.5); */
+    fill: rgba(0, 0, 0, 0.5);
 }
 
 svg path.endPoint {
@@ -127,4 +139,9 @@ svg path.startPoint {
 svg path.pathPoint {
     fill: gold;
 }
+
+.buttons {
+    display: flex;
+    gap: 1rem;
+}
 </style>

front/src/stores/floorplan.ts

@@ -11,6 +11,7 @@ export const useFloorplanStore = defineStore('floorplan', {
             prepared_array: [] as number[][],
             chunk_size: undefined as number | undefined,
             threshold: undefined as number | undefined,
+            points: [] as { type: string, title: string, points: { x: number, y: number } }[]
         }
     },
     actions: {
@@ -56,9 +57,20 @@ export const useFloorplanStore = defineStore('floorplan', {
                         return el.filter(e => e > 0).length > (this.threshold as number) ? 1 : 0
                     })
                 });
+                await this.getPoints(id)
             } catch (error) {
                 console.log(error)
             }
+        },
+        async getPoints(id: number) {
+            const res = await fetch(`${SERVER_URL}/api/floorplan/${id}/points`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+            })
+            const data = await res.json()
+            this.points = data.points
         }
     }
 })