composables useLayoutFullscreen.ts

100% Statements 14/14

83.33% Branches 5/6

100% Functions 2/2

100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33  
 
 
 
 
 
 
 
 
31x
 
31x
3x
3x
3x
3x
 
3x
 
1x
1x
1x
1x
1x
 
 
2x
 
 
 
31x
 
  import { computed, MaybeRef, unref } from 'vue';
import { AnchorPoint } from '@3cr/types-ts';
import { useElementBounding } from '@vueuse/core';
 
export function useLayoutFullscreen(
  anchor: MaybeRef<AnchorPoint | null | undefined>,
  canvas: MaybeRef<HTMLCanvasElement | null | undefined>,
  padding: MaybeRef<number | null | undefined>,
) {
  const { width, height } = useElementBounding(canvas);
 
  const layout = computed(() => {
    const w = width.value;
    const h = height.value;
    const p = unref(padding) ?? 0;
    const a = unref(anchor) ?? AnchorPoint.DEFAULT;
 
    switch (a) {
      case AnchorPoint.CENTER: {
        const x = p;
        const y = p;
        const width = Math.max(w - p * 2, 0);
        const height = Math.max(h - p * 2, 0);
        return { x, y, width, height };
      }
      default:
        return { x: 0, y: 0, width: 0, height: 0 };
    }
  });
 
  return { layout };
}