mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-12-23 21:22:59 +00:00
wip: works, but style really broken
This commit is contained in:
parent
4654032fa0
commit
e2e4847eea
1 changed files with 9 additions and 9 deletions
|
@ -1,29 +1,29 @@
|
|||
<template>
|
||||
<foreignObject
|
||||
ref="foreign_object"
|
||||
:x="Math.round(parent_aspect_ratio * rectangle.left)"
|
||||
:y="rectangle.top"
|
||||
:width="Math.round(parent_aspect_ratio * rectangle.width)"
|
||||
:height="rectangle.height"
|
||||
:style="`transform: scaleX(${1 / parent_aspect_ratio})`"
|
||||
>
|
||||
<!-- v-if="variant !== undefined" -->
|
||||
<div
|
||||
v-if="variant !== undefined"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold"
|
||||
class="px-4 is-flex is-align-items-center is-justify-content-center is-size-1 has-text-weight-bold has-background-primary"
|
||||
style="height: inherit"
|
||||
>
|
||||
<slot name="default" />
|
||||
</div>
|
||||
</foreignObject>
|
||||
<rect
|
||||
ref="rect"
|
||||
<!-- <rect
|
||||
v-bind="$attrs"
|
||||
:class="variant !== undefined ? variant : ''"
|
||||
:x="rectangle.left"
|
||||
:y="rectangle.top"
|
||||
:width="rectangle.width"
|
||||
:height="rectangle.height"
|
||||
/>
|
||||
/> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -54,7 +54,7 @@ export default class extends Vue {
|
|||
private refreshKey = 0;
|
||||
|
||||
declare $refs: {
|
||||
rect: unknown;
|
||||
foreign_object: unknown;
|
||||
};
|
||||
|
||||
private refresh() {
|
||||
|
@ -70,14 +70,14 @@ export default class extends Vue {
|
|||
this.refreshKey; // read it just to force recompute on change
|
||||
|
||||
if (
|
||||
!(this.$refs.rect instanceof SVGRectElement) ||
|
||||
this.$refs.rect.parentElement === null
|
||||
!(this.$refs.foreign_object instanceof SVGForeignObjectElement) ||
|
||||
this.$refs.foreign_object.parentElement === null
|
||||
) {
|
||||
this.refresh();
|
||||
return 1;
|
||||
}
|
||||
|
||||
const parent = this.$refs.rect.parentElement;
|
||||
const parent = this.$refs.foreign_object.parentElement;
|
||||
const result = parent.clientWidth / parent.clientHeight;
|
||||
|
||||
// force recompute for suspicious results
|
||||
|
|
Loading…
Reference in a new issue