Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip: works, but style really broken

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-11-04 04:33:54 +00:00
parent 4654032fa0
commit e2e4847eea
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/src/components/calendar/SVGRect.vue
View file

@ -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