79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<foreignObject
|
|
:x="Math.round(get_bg_aspect_ratio() * rectangle.left)"
|
|
:y="rectangle.top"
|
|
:width="Math.round(get_bg_aspect_ratio() * rectangle.width)"
|
|
:height="rectangle.height"
|
|
:style="`transform: scaleX(${1 / get_bg_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 { loading_success } from "@/lib/helpers";
|
|
import { Rectangle } from "@/lib/rects/rectangle";
|
|
import { advent22Store } from "@/lib/store";
|
|
|
|
const store = advent22Store();
|
|
|
|
type BulmaVariant =
|
|
| "primary"
|
|
| "link"
|
|
| "info"
|
|
| "success"
|
|
| "warning"
|
|
| "danger";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
variant: BulmaVariant;
|
|
visible?: boolean;
|
|
rectangle: Rectangle;
|
|
}>(),
|
|
{
|
|
visible: true,
|
|
},
|
|
);
|
|
|
|
function get_bg_aspect_ratio(): number {
|
|
if (!loading_success(store.background_image)) return 1;
|
|
|
|
return store.background_image.height / store.background_image.width;
|
|
|
|
// aspect_ratio is width/height!
|
|
// 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>
|