118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
|
|
import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
|
|
import { useLayoutEffect, useRef } from "react";
|
|
import { Rnd } from "react-rnd";
|
|
import QuizPreviewLayout from "./QuizPreviewLayout";
|
|
import ResizeIcon from "@icons/ResizeIcon";
|
|
|
|
const DRAG_PARENT_MARGIN = 0;
|
|
const NAVBAR_HEIGHT = 0;
|
|
const DRAG_PARENT_BOTTOM_MARGIN = 0;
|
|
|
|
interface RndPositionAndSize {
|
|
x: number;
|
|
y: number;
|
|
width: string;
|
|
height: string;
|
|
}
|
|
|
|
export const StartPagePreview = () => {
|
|
const isPreviewShown = useQuizPreviewStore((state) => state.isPreviewShown);
|
|
const rndParentRef = useRef<HTMLDivElement>(null);
|
|
const rndRef = useRef<Rnd | null>(null);
|
|
const theme = useTheme();
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(630));
|
|
const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
|
|
x: 0,
|
|
y: 0,
|
|
width: isTablet ? "350" : "600",
|
|
height: "330",
|
|
});
|
|
const isFirstShowRef = useRef<boolean>(true);
|
|
|
|
useLayoutEffect(
|
|
function stickPreviewToBottomRight() {
|
|
const rnd = rndRef.current;
|
|
const rndSelfElement = rnd?.getSelfElement();
|
|
if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
|
|
|
|
const rndParentRect = rndParentRef.current.getBoundingClientRect();
|
|
const rndRect = rndSelfElement.getBoundingClientRect();
|
|
|
|
const x = rndParentRect.width - rndRect.width;
|
|
const y = rndParentRect.height - rndRect.height;
|
|
|
|
rnd.updatePosition({ x, y });
|
|
rndPositionAndSizeRef.current.x = x;
|
|
rndPositionAndSizeRef.current.y = y;
|
|
|
|
isFirstShowRef.current = false;
|
|
},
|
|
[isPreviewShown]
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
ref={rndParentRef}
|
|
sx={{
|
|
position: "fixed",
|
|
top: NAVBAR_HEIGHT + DRAG_PARENT_MARGIN,
|
|
left: DRAG_PARENT_MARGIN,
|
|
bottom: DRAG_PARENT_BOTTOM_MARGIN,
|
|
right: DRAG_PARENT_MARGIN,
|
|
pointerEvents: "none",
|
|
zIndex: 100,
|
|
}}
|
|
>
|
|
{isPreviewShown && (
|
|
<Rnd
|
|
minHeight={20}
|
|
minWidth={20}
|
|
bounds="parent"
|
|
ref={rndRef}
|
|
dragHandleClassName="quiz-preview-draghandle"
|
|
default={{
|
|
x: rndPositionAndSizeRef.current.x,
|
|
y: rndPositionAndSizeRef.current.y,
|
|
width: rndPositionAndSizeRef.current.width,
|
|
height: rndPositionAndSizeRef.current.height,
|
|
}}
|
|
onResizeStop={(e, direction, ref, delta, position) => {
|
|
rndPositionAndSizeRef.current.x = position.x;
|
|
rndPositionAndSizeRef.current.y = position.y;
|
|
rndPositionAndSizeRef.current.width = ref.style.width;
|
|
rndPositionAndSizeRef.current.height = ref.style.height;
|
|
}}
|
|
onDragStop={(e, d) => {
|
|
rndPositionAndSizeRef.current.x = d.x;
|
|
rndPositionAndSizeRef.current.y = d.y;
|
|
}}
|
|
onDragStart={(e, d) => {
|
|
e.preventDefault();
|
|
}}
|
|
enableResizing={{
|
|
topLeft: isPreviewShown,
|
|
}}
|
|
resizeHandleComponent={{
|
|
topLeft: <ResizeIcon />,
|
|
}}
|
|
resizeHandleStyles={{
|
|
topLeft: {
|
|
top: "-1px",
|
|
left: "-1px",
|
|
zIndex: 100,
|
|
},
|
|
}}
|
|
style={{
|
|
overflow: "hidden",
|
|
pointerEvents: "auto",
|
|
borderRadius: "5px",
|
|
}}
|
|
>
|
|
<QuizPreviewLayout />
|
|
</Rnd>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|