All files / src/components/modal/layouts/composables useActiveLayout.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
30x
30x
30x
 
30x
22x
2x
20x
1x
19x
1x
 
18x
 
 
 
30x
 
 
import { computed, MaybeRef } from 'vue';
import { isFullscreen, isLayout1x3, isLayout2x2 } from '@/models/scanState';
import { useLayout2x2 } from '@/components/modal/layouts/composables/useLayout2x2';
import { useLayout1x3 } from '@/components/modal/layouts/composables/useLayout1x3';
import { useLayoutFullscreen } from '@/components/modal/layouts/composables/useLayoutFullscreen';
import { AnchorPoint } from '@3cr/types-ts';
 
export function useActiveLayout(
  anchor: MaybeRef<AnchorPoint | null | undefined>,
  canvas: MaybeRef<HTMLCanvasElement | null | undefined>,
  padding: MaybeRef<number | null | undefined>,
) {
  const { layout: layout2x2 } = useLayout2x2(anchor, canvas, padding);
  const { layout: layout1x3 } = useLayout1x3(anchor, canvas, padding);
  const { layout: fullscreen } = useLayoutFullscreen(anchor, canvas, padding);
 
  const layout = computed(() => {
    if (isFullscreen.value) {
      return fullscreen.value;
    } else if (isLayout2x2.value) {
      return layout2x2.value;
    } else if (isLayout1x3.value) {
      return layout1x3.value;
    } else {
      return { width: 0, height: 0, x: 0, y: 0 };
    }
  });
 
  return { layout };
}