ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color

This commit is contained in:
Kseninia Mikhaylova 2024-05-23 14:10:05 +03:00
parent 11e2298211
commit 81913ff490
1 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
front/src/components/FloorplanItem.vue
View File

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