63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
v-if="!highlighted || highlighted === room.id"
|
|
:class="[
|
|
highlighted
|
|
? ''
|
|
: 'flex cursor-pointer items-center justify-center transition-transform hover:scale-105',
|
|
'pointer-events-auto absolute',
|
|
]"
|
|
:style="roomPositionCSS"
|
|
>
|
|
<div
|
|
class="absolute"
|
|
:style="roomPolygonCSS"
|
|
@click.stop="clickOnRoom($event)"
|
|
></div>
|
|
<span class="pointer-events-none z-10" v-if="!highlighted">{{
|
|
room.displayName
|
|
}}</span>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { RoomLayoutObject } from '../../../interfaces/room.interfaces';
|
|
|
|
const props = defineProps<{
|
|
room: RoomLayoutObject;
|
|
highlighted?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'clickedIn', ev: MouseEvent): void;
|
|
}>();
|
|
|
|
const clickOnRoom = (ev: MouseEvent) => emit('clickedIn', ev);
|
|
|
|
const roomPolygonCSS = computed(() => {
|
|
if (!props.room) return {};
|
|
const [min, max] = props.room.boundingBox;
|
|
return {
|
|
clipPath: `polygon(${props.room.plan
|
|
.map((point) => `${point[0] - min[0]}px ${point[1] - min[1]}px`)
|
|
.join(', ')})`,
|
|
width: `${max[0] - min[0]}px`,
|
|
height: `${max[1] - min[1]}px`,
|
|
backgroundColor: 'rgb(40 180 255 / 40%)',
|
|
};
|
|
});
|
|
|
|
const roomPositionCSS = computed(() => {
|
|
if (!props.room) return {};
|
|
const [min, max] = props.room.boundingBox;
|
|
return {
|
|
top: `${min[1]}px`,
|
|
left: `${min[0]}px`,
|
|
width: `${max[0] - min[0]}px`,
|
|
height: `${max[1] - min[1]}px`,
|
|
};
|
|
});
|
|
</script>
|