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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 31x 31x 2x 2x 2x 2x 2x 2x 31x | import { computed, MaybeRef, unref } from 'vue';
import { AnchorPoint } from '@3cr/types-ts';
import { useElementBounding } from '@vueuse/core';
export function useLayout1x3(
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 - h / 3 - p, 0);
const height = Math.max(h - p * 2, 0);
return { x, y, width, height };
}
case AnchorPoint.TOP_RIGHT: {
const x = w - h / 3 + p;
const y = p;
const width = Math.max(h / 3 - p * 2, 0);
const height = Math.max(h / 3 - p, 0);
return { x, y, width, height };
}
case AnchorPoint.RIGHT: {
const x = w - h / 3 + p;
const y = h / 3 + p;
const width = Math.max(h / 3 - p * 2, 0);
const height = Math.max(h / 3 - p, 0);
return { x, y, width, height };
}
case AnchorPoint.BOTTOM_RIGHT: {
const x = w - h / 3 + p;
const y = (h / 3) * 2 + p;
const width = Math.max(h / 3 - p * 2, 0);
const height = Math.max(h / 3 - p * 2, 0);
return { x, y, width, height };
}
default:
return { x: 0, y: 0, width: 0, height: 0 };
}
});
return { layout };
}
|