mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 00:03:07 +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>
|
<template>
|
||||||
<foreignObject
|
<foreignObject
|
||||||
|
ref="foreign_object"
|
||||||
:x="Math.round(parent_aspect_ratio * rectangle.left)"
|
:x="Math.round(parent_aspect_ratio * rectangle.left)"
|
||||||
:y="rectangle.top"
|
:y="rectangle.top"
|
||||||
:width="Math.round(parent_aspect_ratio * rectangle.width)"
|
:width="Math.round(parent_aspect_ratio * rectangle.width)"
|
||||||
:height="rectangle.height"
|
:height="rectangle.height"
|
||||||
:style="`transform: scaleX(${1 / parent_aspect_ratio})`"
|
:style="`transform: scaleX(${1 / parent_aspect_ratio})`"
|
||||||
>
|
>
|
||||||
|
<!-- v-if="variant !== undefined" -->
|
||||||
<div
|
<div
|
||||||
v-if="variant !== undefined"
|
|
||||||
xmlns="http://www.w3.org/1999/xhtml"
|
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"
|
style="height: inherit"
|
||||||
>
|
>
|
||||||
<slot name="default" />
|
<slot name="default" />
|
||||||
</div>
|
</div>
|
||||||
</foreignObject>
|
</foreignObject>
|
||||||
<rect
|
<!-- <rect
|
||||||
ref="rect"
|
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:class="variant !== undefined ? variant : ''"
|
:class="variant !== undefined ? variant : ''"
|
||||||
:x="rectangle.left"
|
:x="rectangle.left"
|
||||||
:y="rectangle.top"
|
:y="rectangle.top"
|
||||||
:width="rectangle.width"
|
:width="rectangle.width"
|
||||||
:height="rectangle.height"
|
:height="rectangle.height"
|
||||||
/>
|
/> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -54,7 +54,7 @@ export default class extends Vue {
|
||||||
private refreshKey = 0;
|
private refreshKey = 0;
|
||||||
|
|
||||||
declare $refs: {
|
declare $refs: {
|
||||||
rect: unknown;
|
foreign_object: unknown;
|
||||||
};
|
};
|
||||||
|
|
||||||
private refresh() {
|
private refresh() {
|
||||||
|
@ -70,14 +70,14 @@ export default class extends Vue {
|
||||||
this.refreshKey; // read it just to force recompute on change
|
this.refreshKey; // read it just to force recompute on change
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!(this.$refs.rect instanceof SVGRectElement) ||
|
!(this.$refs.foreign_object instanceof SVGForeignObjectElement) ||
|
||||||
this.$refs.rect.parentElement === null
|
this.$refs.foreign_object.parentElement === null
|
||||||
) {
|
) {
|
||||||
this.refresh();
|
this.refresh();
|
||||||
return 1;
|
return 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parent = this.$refs.rect.parentElement;
|
const parent = this.$refs.foreign_object.parentElement;
|
||||||
const result = parent.clientWidth / parent.clientHeight;
|
const result = parent.clientWidth / parent.clientHeight;
|
||||||
|
|
||||||
// force recompute for suspicious results
|
// force recompute for suspicious results
|
||||||
|
|
Loading…
Reference in a new issue