Jörn-Michael Miehe
fd1a66ba25
- reduce use of `as` in favor of Vue's `UnwrapRef`
- add `wait_for` helper function
⚠️ known bug: PreviewDoor (DoorChooser) onClick not working
77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<foreignObject
|
|
:x="Math.round(aspect_ratio * rectangle.left)"
|
|
:y="rectangle.top"
|
|
:width="Math.round(aspect_ratio * rectangle.width)"
|
|
:height="rectangle.height"
|
|
:style="`transform: scaleX(${1 / aspect_ratio})`"
|
|
>
|
|
<div
|
|
xmlns="http://www.w3.org/1999/xhtml"
|
|
:class="`px-2 is-flex is-align-items-center is-justify-content-center is-size-2 has-text-weight-bold ${variant} ${
|
|
visible ? 'visible' : ''
|
|
}`"
|
|
style="height: inherit"
|
|
v-bind="$attrs"
|
|
>
|
|
<slot name="default" />
|
|
</div>
|
|
</foreignObject>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Like, loading_success } from "@/lib/helpers";
|
|
import { Rectangle } from "@/lib/rects/rectangle";
|
|
import { advent22Store } from "@/lib/store";
|
|
import { computed } from "vue";
|
|
|
|
const store = advent22Store();
|
|
|
|
type BulmaVariant =
|
|
| "primary"
|
|
| "link"
|
|
| "info"
|
|
| "success"
|
|
| "warning"
|
|
| "danger";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
variant: BulmaVariant;
|
|
visible?: boolean;
|
|
rectangle: Like<Rectangle>;
|
|
}>(),
|
|
{
|
|
visible: true,
|
|
},
|
|
);
|
|
|
|
const aspect_ratio = computed(() => {
|
|
if (!loading_success(store.background_image)) return 1;
|
|
|
|
return store.background_image.aspect_ratio;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@/bulma-scheme" as scheme;
|
|
|
|
foreignObject > div {
|
|
&:not(.visible, :hover):deep() > * {
|
|
display: none;
|
|
}
|
|
|
|
&.visible,
|
|
&:hover {
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
|
|
@each $name, $color in scheme.$colors {
|
|
&.#{$name} {
|
|
background-color: rgba($color, 0.3);
|
|
border-color: rgba($color, 0.9);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|