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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 7x 7x 1x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 22x 14x 8x 8x 6x 6x 22x | import { fullscreenView, isFullscreen, scanState } from '@/models/scanState';
import {
AnchorPoint,
InteractivityState,
NavigationCubeTransform,
ScanView,
} from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { watch, ref, MaybeRef, computed } from 'vue';
import { useElementBounding } from '@vueuse/core';
import { useActiveLayout } from '@/components/modal/layouts/composables/useActiveLayout';
// TODO: possible move to store?
export const isVisible = ref<boolean>(true);
const volume = computed(() => {
return scanState.value.Layout.PositionData.find(
(p) => p.DefaultView === ScanView.Volume,
)?.Anchor;
});
export function useNavigationCube(
canvas: MaybeRef<HTMLCanvasElement | null | undefined>,
) {
const viewer3cr = useViewer3cr();
const { width: canvasWidth } = useElementBounding(canvas);
const { layout } = useActiveLayout(volume, canvas, 0);
const bounds = computed(() => {
const width = canvasWidth.value * window.devicePixelRatio * 0.1;
const height = canvasWidth.value * window.devicePixelRatio * 0.1; // height proportional to canvas width so cube is always square
const x =
(layout.value.x + layout.value.width) * window.devicePixelRatio - width;
const y =
(layout.value.y + layout.value.height) * window.devicePixelRatio - height;
return { x, y, width, height };
});
watch(
bounds,
async ({ x, y, width, height }) => {
const message: NavigationCubeTransform = {
Version: '0.0.0',
AnchorPoint: AnchorPoint.TOP_LEFT,
Position: { Version: '0.0.0', X: x, Y: y },
Size: { Version: '0.0.0', X: width, Y: height },
};
await viewer3cr.setNavCubePositionSize({ message });
},
{ immediate: true },
);
watch(
[isVisible, isFullscreen, fullscreenView],
async ([isVisible, isFullscreen, fullscreenView]) => {
if (!isFullscreen || fullscreenView === ScanView.Volume) {
const message: InteractivityState = {
Version: '0.0.0',
Value: isVisible,
};
await viewer3cr.setNavCubeVisibility({ message });
} else {
// Disable navigation cube when fullscreen on a 2D view
const message: InteractivityState = { Version: '0.0.0', Value: false };
await viewer3cr.setNavCubeVisibility({ message });
}
},
);
return { bounds };
}
|