front/src/components/FloorplanItem.vue

@@ -5,6 +5,7 @@ import PF, { Grid } from 'pathfinding'
 
 import { useFloorplanStore } from '../stores/floorplan';
 import { useRoute } from 'vue-router';
+import { random_сolor } from '../helpers';
 
 type PathItem = { path: string, unwalkable: boolean, x: number, y: number }
 const floorplan = useFloorplanStore()
@@ -15,12 +16,12 @@ const context = ref();
 const grid = ref<Grid>()
 const startPoint = ref<{ x: number, y: number }>({ x: 25, y: 40 })
 const endPoint = ref<{ x: number, y: number }>()
-const startToEndPath = ref()
+const startToEndPath = ref<number[][] | undefined>([])
 
 const plan = useFloorplanStore()
 const paths = ref<PathItem[]>([])
 
-const finder = new PF.AStarFinder();
+const finder = new PF.BreadthFirstFinder();
 
 const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
 const route = useRoute()
@@ -31,16 +32,17 @@ const newDraw = async () => {
 
     context.value = canvasElement.value?.getContext('2d') || undefined;
     const lines = plan.np_array
+    const c = random_сolor()
     for (let indexY = 0; indexY < lines.length; indexY++) {
         const line = lines[indexY];
         for (let indexX = 0; indexX < line.length; indexX++) {
             const point = line[indexX];
             if (canvasElement.value && context.value && point > 0) {
-                context.value.fillStyle = 'purple'
+                context.value.fillStyle = c.replace(')', ',0.5)').replace('rgb', 'rgba')
                 context.value.fillRect(indexX, indexY, 1, 1)
             }
         }
-        if (indexY % 4 == 0) {
+        if (indexY % 10 == 0) {
             await nextFrame()
         }
     }
@@ -65,8 +67,10 @@ const newDraw = async () => {
 }
 
 const findPath = async () => {
+    // filders.forEach((finder,i) => {
+    console.time(`findpath`)
     if (!endPoint.value) return
-    const localPath = finder.findPath(
+    const localPath: number[][] = finder.findPath(
         Math.round(startPoint.value.x),
         Math.round(startPoint.value.y),
         Math.round(endPoint.value.x),
@@ -74,6 +78,8 @@ const findPath = async () => {
         (grid.value?.clone() as Grid)
     );
     startToEndPath.value = localPath
+    console.timeEnd(`findpath`)
+    // });
 }
 
 const setPointSvg = (item: { x: number, y: number }) => {
@@ -97,12 +103,21 @@ const ch = 800
         <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="[
+                <path
-                    { 'unwalkable': item.unwalkable },
+                    v-for="item in paths.filter(item => floorplan.points.find(el => el.points.x == item.x && el.points.y == item.y))"
-                    { 'endPoint': !!(floorplan.points.find(el => el.type == 'start' && el.points.x == item.x && el.points.y == item.y)) },
+                    :d="item.path" @click="setPointSvg(item)" :class="[
-                    { 'startPoint': !!(floorplan.points.find(el => el.type.indexOf('cabinet') !== -1 && el.points.x === item.x && el.points.y === item.y)) },
+                        { 'endPoint': !!(floorplan.points.find(el => el.type == 'start' && el.points.x == item.x && el.points.y == item.y)) },
-                    { 'pathPoint': (startToEndPath && startToEndPath.find((el: number[]) => el[0] == item.x && el[1] == 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>
+                <path
+                    v-for="item in paths.filter(item => (startToEndPath || []).find(el => el[0] == item.x && el[1] == item.y))"
+                    :d="item.path" @click="setPointSvg(item)" :class="[
+                        { '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>
@@ -116,18 +131,6 @@ const ch = 800
     </div>
 </template>
 <style scoped>
-svg path {
-    fill: transparent
-}
-
-svg path:hover {
-    fill: red
-}
-
-svg path.unwalkable {
-    fill: rgba(0, 0, 0, 0.5);
-}
-
 svg path.endPoint {
     fill: blue;
 }