- {imageTransition(({ opacity }, finished) =>
- !finished ? (
+ {imageTransition(({ opacity }, isGameFinished) =>
+ !isGameFinished ? (
) : (
)
)}
- {pinTransition(
- ({ x }, pin) =>
- pin && (
-
+ {pinPositionsTransition(
+ ({ x }, pinPos, _trState, trIndex) =>
+ pinPos &&
+ shouldDisplayPin && (
+ <>
+
+
+
+
)
)}
+ {CornerPinInfoBox}
+
{infoPanelRef.current &&
ReactDOM.createPortal(
,
infoPanelRef.current
)}
@@ -143,9 +223,9 @@ export const GameFind = ({
ReactDOM.createPortal(
,
actionsPanelRef.current
)}
diff --git a/web/src/containers/views/games/game-move/game-move.tsx b/web/src/containers/views/games/game-move/game-move.tsx
index a597094d..0dd76f83 100644
--- a/web/src/containers/views/games/game-move/game-move.tsx
+++ b/web/src/containers/views/games/game-move/game-move.tsx
@@ -1,13 +1,14 @@
import ReactDOM from "react-dom";
-import { useCallback, useEffect, useState } from "react";
-
+import { useState, useMemo, useCallback } from "react";
+import { animated, useTransition } from "react-spring";
import { useSelector } from "react-redux";
import { createSelector } from "reselect";
+
import { useTranslation } from "react-i18next";
import { useTutorial } from "context/tutorial-provider/use-tutorial";
-import { animated, useSpring, useTransition } from "react-spring";
-import { useDrag } from "@use-gesture/react";
+import { useGameAutoNavigationOnResultTimeElapsed } from "../useGameAutoNavigationOnResultTimeElapsed";
import useResizeObserver from "hooks/use-resize-observer";
+import { useElementMove } from "../../../../hooks/spring-hooks/use-element-move";
// Components
import { GameInfoPanel } from "../GameInfoPanel";
@@ -17,14 +18,18 @@ import { GameActionsPanel } from "../GameActionsPanel";
import { AppState } from "store/store";
import { ScreenProps, GameMoveScreen } from "models";
-// - - -
+// Utils
+import { calculateObjectInitialPosition, calculateObjectSize } from "./utils";
+import { GAME_SCREEN_DEFAULT_RESULT_TIME } from "constants/screen";
+
+// - - - - - -
const stateSelector = createSelector(
({ expo }: AppState) => expo.viewScreen as GameMoveScreen,
(viewScreen) => ({ viewScreen })
);
-// - - -
+// - - - - - -
export const GameMove = ({
screenPreloadedFiles,
@@ -35,53 +40,58 @@ export const GameMove = ({
const { t } = useTranslation("view-screen");
const { viewScreen } = useSelector(stateSelector);
- const [containerRef, { width: containerWidth, height: containerHeight }] =
- useResizeObserver();
- const [dragRef, { width: dragWidth, height: dragHeight }] =
- useResizeObserver(); // dragTarget as a container with the object img
+ const { resultTime = GAME_SCREEN_DEFAULT_RESULT_TIME } = viewScreen;
- // - -
+ const {
+ image1: assignmentImgSrc,
+ image2: resultingImgSrc,
+ object: objectImgSrc,
+ } = screenPreloadedFiles;
- const [isGameFinished, setIsGameFinished] = useState
(false);
+ // - - Move functionality - -
+
+ const [containerRef, containerSize] = useResizeObserver();
+
+ const [objectDragRef, objectDragSize] = useResizeObserver();
+
+ const { objInitialLeft, objInitialTop } = useMemo(
+ () => calculateObjectInitialPosition(viewScreen, containerSize),
+ [containerSize, viewScreen]
+ );
+
+ const { moveSpring, moveSpringApi, bindMoveDrag } = useElementMove({
+ containerSize: containerSize,
+ dragMovingObjectSize: objectDragSize,
+ initialPosition: { left: objInitialLeft, top: objInitialTop },
+ });
- // Initialize the position for drag object image, it will be reset back to [0, 0] whenever the width or height of the container changes
- const [{ dragLeft, dragTop }, dragApi] = useSpring(
- () => ({
- dragLeft: 0,
- dragTop: 0,
- }),
- [containerWidth, containerHeight]
+ // - - Size calculation of object, based on administration settings - -
+ // once at mount assigned through CSS and then used by `objectDragSize`
+
+ const { objectWidth, objectHeight } = useMemo(
+ () => calculateObjectSize(viewScreen, containerSize),
+ [containerSize, viewScreen]
);
+ // - - Tutorial - -
+
+ const { bind: bindTutorial, TutorialTooltip } = useTutorial("gameMove", {
+ shouldOpen: !isMobileOverlay,
+ closeOnEsc: true,
+ });
+
+ // - - - -
+
+ const [isGameFinished, setIsGameFinished] = useState(false);
+
const onGameFinish = useCallback(() => {
setIsGameFinished(true);
}, []);
const onGameReset = useCallback(() => {
setIsGameFinished(false);
- dragApi.start({ dragLeft: 0, dragTop: 0 });
- }, [dragApi]);
-
- // - -
-
- const bind = useDrag(
- ({ down, offset: [x, y] }) => {
- if (!down) {
- return;
- }
-
- dragApi.start({ dragLeft: x, dragTop: y, immediate: true });
- },
- {
- from: () => [dragLeft.get(), dragTop.get()],
- bounds: {
- left: 0,
- top: 0,
- right: containerWidth - dragWidth,
- bottom: containerHeight - dragHeight,
- },
- }
- );
+ moveSpringApi.start({ left: objInitialLeft, top: objInitialTop });
+ }, [moveSpringApi, objInitialLeft, objInitialTop]);
const transition = useTransition(isGameFinished, {
initial: { opacity: 1 },
@@ -90,64 +100,49 @@ export const GameMove = ({
leave: { opacity: 0 },
});
- // - -
-
- const {
- bind: bindTutorial,
- TutorialTooltip,
- escapeTutorial,
- } = useTutorial("gameMove", !isMobileOverlay);
-
- const onKeydownAction = useCallback(
- (event) => {
- if (event.key === "Escape") {
- escapeTutorial();
- }
- },
- [escapeTutorial]
- );
+ // - - - -
- useEffect(() => {
- document.addEventListener("keydown", onKeydownAction);
- return () => document.removeEventListener("keydown", onKeydownAction);
+ useGameAutoNavigationOnResultTimeElapsed({
+ gameResultTime: resultTime * 1000,
+ isGameFinished: isGameFinished,
});
return (
{transition(({ opacity }, isGameFinished) =>
isGameFinished ? (
- // Image2 is result image
) : (
<>
- {/* Image1 is background image (zadanie) */}
- {/* Object */}
;
- setInfopointOpenStatusMap: Dispatch<
+ infopointStatusMap: Record;
+ setInfopointStatusMap: Dispatch<
SetStateAction>
>;
};
@@ -48,13 +48,13 @@ const ImageTextAnswer = ({
setMarkedAnswers,
quizType,
answersTextDisplayType,
- infopointOpenStatusMap,
- setInfopointOpenStatusMap,
+ infopointStatusMap,
+ setInfopointStatusMap,
}: ImageTextAnswerProps) => {
const { isSm, isMobileLandscape } = useMediaDevice();
const [imageContainerRef, imageContainerSize] =
- useElementSize();
+ useResizeObserver();
const answerImageOrigData = useMemo(
() => answer.imageOrigData ?? { width: 0, height: 0 },
@@ -159,7 +159,7 @@ const ImageTextAnswer = ({
-
-
-
+ {/* Left container */}
+
+
+
+
+
+
+ {/* Right container */}
- {transition(({ opacity }, finished) =>
- finished ? (
+ {transition(({ opacity }, isGameFinished) =>
+ isGameFinished ? (
) : (
@@ -144,15 +151,18 @@ export const GameSizing = ({
style={{ opacity }}
>
)
@@ -163,9 +173,9 @@ export const GameSizing = ({
ReactDOM.createPortal(
,
infoPanelRef.current
)}
@@ -174,9 +184,9 @@ export const GameSizing = ({
ReactDOM.createPortal(
,
actionsPanelRef.current
)}
diff --git a/web/src/containers/views/games/useGameAutoNavigationOnResultTimeElapsed.ts b/web/src/containers/views/games/useGameAutoNavigationOnResultTimeElapsed.ts
new file mode 100644
index 00000000..1829c50c
--- /dev/null
+++ b/web/src/containers/views/games/useGameAutoNavigationOnResultTimeElapsed.ts
@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { useCountdown } from "hooks/countdown-hook";
+import { useExpoNavigation } from "hooks/view-hooks/expo-navigation-hook";
+
+type UseGameAutoNavigationOnResultTimeElapsedProps = {
+ gameResultTime: number; // in milliseconds
+ isGameFinished: boolean;
+};
+
+export const useGameAutoNavigationOnResultTimeElapsed = ({
+ gameResultTime,
+ isGameFinished,
+}: UseGameAutoNavigationOnResultTimeElapsedProps) => {
+ const { navigateForward } = useExpoNavigation();
+
+ // NOTE: it is important that the deps array is empty
+ const onCountdownFinish = useCallback(() => {
+ navigateForward();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useCountdown(gameResultTime, {
+ isPaused: !isGameFinished,
+ onFinish: onCountdownFinish,
+ });
+};
diff --git a/web/src/containers/views/view-finish/rating-panel/SendButton.tsx b/web/src/containers/views/view-finish/rating-panel/SendButton.tsx
index 4b829ac0..ed9dc7ce 100644
--- a/web/src/containers/views/view-finish/rating-panel/SendButton.tsx
+++ b/web/src/containers/views/view-finish/rating-panel/SendButton.tsx
@@ -34,7 +34,7 @@ const SendButton = ({ disabled, onClick, isSubmitting }: SendButtonProps) => {
>
{t("sendActionButtonLabel")}
{!isSubmitting && (
-
+
)}
{isSubmitting && (
{
const { image1, image2 } = screenPreloadedFiles;
// Hook up with reference to screen container div, provide its current width and height
- const [screenContainerRef, screenContainerSize] = useElementSize();
+ const [screenContainerRef, screenContainerSize] = useResizeObserver();
const [imageBeforeEl, setImageBeforeEl] = useState(
null
@@ -94,10 +94,10 @@ export const ViewImageChange = ({ screenPreloadedFiles }: ScreenProps) => {
// - - -
const {
- infopointOpenStatusMap,
- setInfopointOpenStatusMap,
+ infopointStatusMap,
+ setInfopointStatusMap,
closeInfopoints,
- ScreenAnchorInfopoint,
+ AnchorInfopoint,
TooltipInfoPoint,
} = useTooltipInfopoint(viewScreen);
@@ -145,10 +145,11 @@ export const ViewImageChange = ({ screenPreloadedFiles }: ScreenProps) => {
bind: bindTutorial,
TutorialTooltip,
isTutorialOpen,
- } = useTutorial(
- "screenChange",
- animation !== "GRADUAL_TRANSITION" && animation !== "FADE_IN_OUT_TWO_IMAGES"
- );
+ } = useTutorial("screenChange", {
+ shouldOpen:
+ animation !== "GRADUAL_TRANSITION" &&
+ animation !== "FADE_IN_OUT_TWO_IMAGES",
+ });
// - - -
@@ -509,7 +510,7 @@ export const ViewImageChange = ({ screenPreloadedFiles }: ScreenProps) => {
// Render the anchor infopoints
return (
- {
{
return (
- {
{
/* Wrapper is the whole of this screen */
/* Container is
without tooltip */
- const [wrapperRef, parentSize] = useElementSize();
+ const [wrapperRef, parentSize] = useResizeObserver();
const containerRef = useRef
(null);
const [containedImgEl, setContainedImgEl] = useState(
null
@@ -94,10 +94,10 @@ export const ViewImage = ({ screenPreloadedFiles }: ScreenProps) => {
// - - - -
const {
- infopointOpenStatusMap,
- setInfopointOpenStatusMap,
+ infopointStatusMap,
+ setInfopointStatusMap,
closeInfopoints,
- ScreenAnchorInfopoint,
+ AnchorInfopoint,
TooltipInfoPoint,
} = useTooltipInfopoint(viewScreen);
@@ -186,7 +186,7 @@ export const ViewImage = ({ screenPreloadedFiles }: ScreenProps) => {
return (
- {
key={`infopoint-tooltip-${infopointIndex}`}
id={`infopoint-tooltip-${infopointIndex}`}
infopoint={infopoint}
- infopointOpenStatusMap={infopointOpenStatusMap}
- setInfopointOpenStatusMap={setInfopointOpenStatusMap}
+ infopointStatusMap={infopointStatusMap}
+ setInfopointStatusMap={setInfopointStatusMap}
primaryKey={infopointIndex.toString()}
/>
diff --git a/web/src/containers/views/view-parallax/view-parallax.tsx b/web/src/containers/views/view-parallax/view-parallax.tsx
index 2c9fc157..20c01343 100644
--- a/web/src/containers/views/view-parallax/view-parallax.tsx
+++ b/web/src/containers/views/view-parallax/view-parallax.tsx
@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
import { createSelector } from "reselect";
import { animated, easings, useSpring } from "react-spring";
-import useElementSize from "hooks/element-size-hook";
+import useResizeObserver from "hooks/use-resize-observer";
// Models
import { ScreenProps, ParallaxScreeen } from "models";
@@ -56,7 +56,7 @@ export const ViewParallax = ({ screenPreloadedFiles }: ScreenProps) => {
const [
viewContainerRef,
{ width: viewContainerWidth, height: viewContainerHeight },
- ] = useElementSize();
+ ] = useResizeObserver();
const totalDistance = useMemo(
() =>
diff --git a/web/src/containers/views/view-photogallery/Lightbox.tsx b/web/src/containers/views/view-photogallery/Lightbox.tsx
index a80ab59c..b638bba6 100644
--- a/web/src/containers/views/view-photogallery/Lightbox.tsx
+++ b/web/src/containers/views/view-photogallery/Lightbox.tsx
@@ -5,13 +5,12 @@ import { useDialogRef } from "context/dialog-ref-provider/dialog-ref-provider";
import { DialogRefType } from "context/dialog-ref-provider/dialog-ref-types";
import DialogPortal from "context/dialog-ref-provider/DialogPortal";
-import useElementSize from "hooks/element-size-hook";
+import useResizeObserver from "hooks/use-resize-observer";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import { Button } from "components/button/button";
import { Icon } from "components/icon/icon";
-import { BasicTooltip } from "components/tooltip/tooltip";
import { InformationDialog } from "components/dialogs/information-dialog/information-dialog";
@@ -33,7 +32,7 @@ const LightBox = ({
closeLightBox,
overlayOpacityAnimation,
}: LightBoxProps) => {
- const [imgContainerRef, imgContainerSize] = useElementSize();
+ const [imgContainerRef, imgContainerSize] = useResizeObserver();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [containedImageSize, setContainedImageSize] = useState({
width: 0,
@@ -138,85 +137,98 @@ const Toolbar = ({
style={{ opacity: overlayOpacityAnimation.opacity }}
>
-
-
+
+
-
-
-
+
+
-
-
-
+
+
-
{currPhotoObj.photoDescription && (
-
-
diff --git a/web/src/containers/views/view-screen-overlay/ActionsPanel/ActionsPanel.tsx b/web/src/containers/views/view-screen-overlay/ActionsPanel/ActionsPanel.tsx
index 053f3c51..912f53c1 100644
--- a/web/src/containers/views/view-screen-overlay/ActionsPanel/ActionsPanel.tsx
+++ b/web/src/containers/views/view-screen-overlay/ActionsPanel/ActionsPanel.tsx
@@ -9,7 +9,7 @@ import { GlassMagnifierDialog } from "components/dialogs/glass-magnifier-dialog/
import { SettingsDialog } from "components/dialogs/settings-dialog/settings-dialog";
import { ChaptersDialog } from "components/dialogs/chapters-dialog/chapters-dialog";
-import useElementSize from "hooks/element-size-hook";
+import useResizeObserver from "hooks/use-resize-observer";
import { useSectionScreenParams } from "hooks/view-hooks/section-screen-hook";
// Components
@@ -108,7 +108,7 @@ const ActionsPanel = ({
const sectionScreen = useSectionScreenParams();
const { section, screen } = sectionScreen;
- const [actionsBoxRef, actionsBoxSize] = useElementSize();
+ const [actionsBoxRef, actionsBoxSize] = useResizeObserver();
const {
openNewTopDialog,
diff --git a/web/src/containers/views/view-screen-overlay/ActionsPanel/AudioButton.tsx b/web/src/containers/views/view-screen-overlay/ActionsPanel/AudioButton.tsx
index 2d91a9cb..13c94b1f 100644
--- a/web/src/containers/views/view-screen-overlay/ActionsPanel/AudioButton.tsx
+++ b/web/src/containers/views/view-screen-overlay/ActionsPanel/AudioButton.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
import { Button } from "components/button/button";
import { Icon } from "components/icon/icon";
-import { BasicTooltip } from "components/tooltip/tooltip";
import { RefCallback } from "context/tutorial-provider/use-tutorial";
@@ -25,28 +24,24 @@ const AudioButton = ({
const { openNewTopDialog } = useDialogRef();
return (
- <>
-
+ openNewTopDialog(DialogRefType.AudioDialog)}
+ tooltip={{
+ id: "overlay-audio-button-tooltip",
+ content: t("audioButtonTooltip"),
+ }}
>
- openNewTopDialog(DialogRefType.AudioDialog)}
- >
-
-
-
-
-
+
+
+
+
-
-
-
-
-
+
-
- {
- setIsGlassMagnifierEnabled((prev) => !prev);
- }}
- >
-
-
-
-
+
+ {
+ setIsGlassMagnifierEnabled((prev) => !prev);
+ }}
+ >
+
-
+
+
+
-
-
-
-
-
+
-
-
-
-
-
+
+ openNewTopDialog(DialogRefType.SettingsDialog)}
+ tooltip={{
+ id: "overlay-settings-button-tooltip",
+ content: t("settingsButtonTooltip"),
+ }}
>
- openNewTopDialog(DialogRefType.SettingsDialog)}
- >
-
-
-
-
+
);
};
diff --git a/web/src/containers/views/view-screen-overlay/view-screen-overlay.tsx b/web/src/containers/views/view-screen-overlay/view-screen-overlay.tsx
index 3be51530..25cb18ba 100644
--- a/web/src/containers/views/view-screen-overlay/view-screen-overlay.tsx
+++ b/web/src/containers/views/view-screen-overlay/view-screen-overlay.tsx
@@ -127,10 +127,10 @@ export const ViewScreenOverlay = ({
getTutorialEnhanceClassnameByStepkeys,
reactivateTutorial,
isTutorialCompleted,
- } = useTutorial(
- isMobileOverlay ? "mobile-overlay" : "overlay",
- isOverlayActive === true && (isMobileOverlay ? true : !amIGameScreen)
- );
+ } = useTutorial(isMobileOverlay ? "mobile-overlay" : "overlay", {
+ shouldOpen:
+ isOverlayActive === true && (isMobileOverlay ? true : !amIGameScreen),
+ });
const isAnyTutorialOpen = useIsAnyTutorialOpened();
diff --git a/web/src/containers/views/view-signpost/ReferenceItem.tsx b/web/src/containers/views/view-signpost/ReferenceItem.tsx
index 5100f719..0a6b652d 100644
--- a/web/src/containers/views/view-signpost/ReferenceItem.tsx
+++ b/web/src/containers/views/view-signpost/ReferenceItem.tsx
@@ -73,7 +73,7 @@ const ReferenceItem = ({
@@ -86,7 +86,7 @@ const ReferenceItem = ({
)}
diff --git a/web/src/containers/views/view-slideshow/view-slideshow.tsx b/web/src/containers/views/view-slideshow/view-slideshow.tsx
index 0bda693a..58035945 100644
--- a/web/src/containers/views/view-slideshow/view-slideshow.tsx
+++ b/web/src/containers/views/view-slideshow/view-slideshow.tsx
@@ -4,7 +4,7 @@ import { createSelector } from "reselect";
import { animated, useTransition } from "react-spring";
import { useCountdown } from "hooks/countdown-hook";
-import useElementSize from "hooks/element-size-hook";
+import useResizeObserver from "hooks/use-resize-observer";
import useTooltipInfopoint from "components/infopoint/useTooltipInfopoint";
import { useGlassMagnifier } from "hooks/view-hooks/glass-magnifier-hook/useGlassMagnifier";
@@ -43,7 +43,7 @@ export const ViewSlideshow = ({ screenPreloadedFiles }: ScreenProps) => {
// - - -
// Container here is parent, { width, height } in pixels of the whole available screen container
- const [containerRef, containerSize, containerEl] = useElementSize();
+ const [containerRef, containerSize, containerEl] = useResizeObserver();
const [photoImgEl, setPhotoImgEl] = useState
(null);
const { GlassMagnifier } = useGlassMagnifier(containerEl, photoImgEl);
@@ -82,10 +82,10 @@ export const ViewSlideshow = ({ screenPreloadedFiles }: ScreenProps) => {
// - - - -
const {
- infopointOpenStatusMap,
- setInfopointOpenStatusMap,
+ infopointStatusMap,
+ setInfopointStatusMap,
closeInfopoints,
- ScreenAnchorInfopoint,
+ AnchorInfopoint,
TooltipInfoPoint,
} = useTooltipInfopoint(viewScreen);
@@ -137,11 +137,11 @@ export const ViewSlideshow = ({ screenPreloadedFiles }: ScreenProps) => {
}, [photosTimes, dispatch]);
// One countdown for each photo in slideshow.. after finished, setIndex to next photo
- const { reset } = useCountdown(photosTimesArr[photoIndex], {
- paused: !viewProgress.shouldIncrement,
+ const { resetCountdown } = useCountdown(photosTimesArr[photoIndex], {
+ isPaused: !viewProgress.shouldIncrement,
onFinish: () => {
setPhotoIndex((prev) => (prev + 1) % (viewScreen.images?.length ?? 1));
- reset();
+ resetCountdown();
},
});
@@ -334,7 +334,7 @@ export const ViewSlideshow = ({ screenPreloadedFiles }: ScreenProps) => {
- {
key={`infopoint-tooltip-${photoIndex}-${infopointIndex}`}
id={`infopoint-tooltip-${photoIndex}-${infopointIndex}`}
infopoint={infopoint}
- infopointOpenStatusMap={infopointOpenStatusMap}
- setInfopointOpenStatusMap={setInfopointOpenStatusMap}
+ infopointStatusMap={infopointStatusMap}
+ setInfopointStatusMap={setInfopointStatusMap}
primaryKey={photoIndex.toString()}
secondaryKey={infopointIndex.toString()}
canBeOpen={!isAnimationRunning}
diff --git a/web/src/containers/views/view-start/view-start.tsx b/web/src/containers/views/view-start/view-start.tsx
index 56c320d8..5ff86b62 100644
--- a/web/src/containers/views/view-start/view-start.tsx
+++ b/web/src/containers/views/view-start/view-start.tsx
@@ -8,7 +8,6 @@ import { useDialogRef } from "context/dialog-ref-provider/dialog-ref-provider";
import { DialogRefType } from "context/dialog-ref-provider/dialog-ref-types";
import DialogPortal from "context/dialog-ref-provider/DialogPortal";
-import useElementSize from "hooks/element-size-hook";
import useResizeObserver from "hooks/use-resize-observer";
import { useExpoNavigation } from "hooks/view-hooks/expo-navigation-hook";
import { useViewStartAnimation } from "./view-start-animation-hook";
@@ -74,12 +73,17 @@ export const ViewStart = ({ screenPreloadedFiles }: ScreenProps) => {
const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
const [isDetailPanelOpen, setIsDetailPanelOpen] = useState(false);
- const [screenContainerRef, screenContainerSize] = useElementSize();
+ const [screenContainerRef, screenContainerSize] = useResizeObserver();
const [infoPanelRef, infoPanelSize] = useResizeObserver({
ignoreUpdate: true,
});
- const [isLandscapeRecommendationOpen, setIsLandscapeRecommendationOpen] =
+ const [
+ isLandscapeRecommendationSnackbarOpen,
+ setIsLandscapeRecommendationSnackbarOpen,
+ ] = useState(isMobile ? true : false);
+
+ const [isAudioWarningSnackbarOpen, setIsAudioWarningSnackbarOpen] =
useState(isMobile ? true : false);
// - -
@@ -324,14 +328,31 @@ export const ViewStart = ({ screenPreloadedFiles }: ScreenProps) => {
{/* Mobile snackbar for recommendation to turn the mobile into landscape mode */}
+ setIsLandscapeRecommendationSnackbarOpen(false)}
+ >
+ {t("landscapeModeRecommendationSnackbarText")}
+
+
+
+ {/* Mobile snackbar for warning that after every screen change, the expo needs to be stopped,
+ because without user interaction, the audio tracks can not start playing */}
+
setIsLandscapeRecommendationOpen(false)}
+ onClose={() => setIsAudioWarningSnackbarOpen(false)}
>
- {t("landscapeModeRecommendation")}
+ {t("audioWarningSnackbarText")}
diff --git a/web/src/containers/views/view-zoom/view-zoom.tsx b/web/src/containers/views/view-zoom/view-zoom.tsx
index 53f60a4f..b7bc10ed 100644
--- a/web/src/containers/views/view-zoom/view-zoom.tsx
+++ b/web/src/containers/views/view-zoom/view-zoom.tsx
@@ -4,7 +4,7 @@ import { createSelector } from "reselect";
import { animated, useSpring, useTransition, easings } from "react-spring";
import { useExpoDesignData } from "hooks/view-hooks/expo-design-data-hook";
-import useElementSize from "hooks/element-size-hook";
+import useResizeObserver from "hooks/use-resize-observer";
import { useZoomPhase, calculateSequenceParameters } from "./useZoomPhase";
// Models
@@ -58,7 +58,7 @@ export const ViewZoom = ({ screenPreloadedFiles }: ScreenProps) => {
// - -
- const [containerRef, containerSize] = useElementSize();
+ const [containerRef, containerSize] = useResizeObserver();
const { width: containedImgWidth, height: containedImgHeight } = useMemo(
() =>
diff --git a/web/src/context/tutorial-provider/use-tutorial.tsx b/web/src/context/tutorial-provider/use-tutorial.tsx
index 3c6d462c..8c291d0d 100644
--- a/web/src/context/tutorial-provider/use-tutorial.tsx
+++ b/web/src/context/tutorial-provider/use-tutorial.tsx
@@ -17,7 +17,17 @@ export type RefCallback = (ref: HTMLElement | null) => void;
// - - - - - - - -
-export const useTutorial = (tutorialKey: TutorialKey, shouldOpen = true) => {
+type UseTutorialOptions = {
+ shouldOpen?: boolean;
+ closeOnEsc?: boolean;
+};
+
+export const useTutorial = (
+ tutorialKey: TutorialKey,
+ options?: UseTutorialOptions
+) => {
+ const { shouldOpen = true, closeOnEsc = false } = options ?? {};
+
// Whole object will all tutorials and their info + helper functions to manipulate with them
const {
store,
@@ -224,6 +234,23 @@ export const useTutorial = (tutorialKey: TutorialKey, shouldOpen = true) => {
[currStepObj?.stepKey, isTutorialOpen]
);
+ // - -
+ // Register escape tutorial on Esc button press
+
+ const onKeydownAction = useCallback(
+ (event: KeyboardEvent) => {
+ if (event.key === "Escape" && closeOnEsc) {
+ escapeTutorial();
+ }
+ },
+ [closeOnEsc, escapeTutorial]
+ );
+
+ useEffect(() => {
+ document.addEventListener("keydown", onKeydownAction);
+ return () => document.removeEventListener("keydown", onKeydownAction);
+ }, [onKeydownAction]);
+
// - -
// Returned object
diff --git a/web/src/hooks/countdown-hook.ts b/web/src/hooks/countdown-hook.ts
index 5b5bf9db..fc5d0627 100644
--- a/web/src/hooks/countdown-hook.ts
+++ b/web/src/hooks/countdown-hook.ts
@@ -2,38 +2,45 @@ import { useCallback, useEffect, useMemo, useState } from "react";
type Options = {
onFinish?: () => void;
- paused?: boolean;
+ isPaused?: boolean;
tick?: number;
};
+/**
+ * NOTE: onFinish function should be wrapped within useCallback
+ */
export const useCountdown = (time: number, options?: Options) => {
- const { onFinish, paused = false, tick = 250 } = options ?? {};
+ const { onFinish, isPaused = false, tick = 250 } = options ?? {};
- const [elapsed, setElapsed] = useState(0);
+ const [elapsedTime, setElapsedTime] = useState(0);
- const finished = useMemo(() => elapsed >= time, [elapsed, time]);
+ const isFinished = useMemo(() => elapsedTime >= time, [elapsedTime, time]);
- useEffect(() => setElapsed(0), [time]);
+ const resetCountdown = useCallback(() => setElapsedTime(0), []);
+
+ // Restart countdown on input time change
+ useEffect(() => setElapsedTime(0), [time]);
useEffect(() => {
- if (paused) {
+ if (isPaused) {
return;
}
- const interval = setInterval(() => setElapsed((prev) => prev + tick), tick);
+ const interval = setInterval(
+ () => setElapsedTime((prev) => prev + tick),
+ tick
+ );
return () => clearInterval(interval);
- }, [paused, tick]);
-
- const reset = useCallback(() => setElapsed(0), []);
+ }, [isPaused, tick]);
useEffect(() => {
- if (!finished) {
+ if (!isFinished) {
return;
}
onFinish?.();
- }, [finished, onFinish]);
+ }, [isFinished, onFinish]);
- return { reset, elapsed, finished };
+ return { resetCountdown, elapsedTime, isFinished };
};
diff --git a/web/src/hooks/element-size-hook.ts b/web/src/hooks/element-size-hook.ts
deleted file mode 100644
index cc485141..00000000
--- a/web/src/hooks/element-size-hook.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { Size } from "models";
-
-const useElementSize = (): [
- (node: T | null) => void,
- Size,
- T | null
-] => {
- const [ref, setRef] = useState(null);
- const [size, setSize] = useState({
- width: 0,
- height: 0,
- });
-
- // - -
-
- useEffect(() => {
- handleSize();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ref?.offsetHeight, ref?.offsetWidth]);
-
- // - -
-
- const handleSize = useCallback(() => {
- setSize({
- width: ref?.offsetWidth || 0,
- height: ref?.offsetHeight || 0,
- });
-
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ref?.offsetHeight, ref?.offsetWidth]);
-
- useEffect(() => {
- window.addEventListener("resize", handleSize);
-
- return () => window.removeEventListener("resize", handleSize);
- }, [handleSize]);
-
- return [setRef, size, ref];
-};
-
-export default useElementSize;
diff --git a/web/src/hooks/spring-hooks/use-corner-info-box.tsx b/web/src/hooks/spring-hooks/use-corner-info-box.tsx
new file mode 100644
index 00000000..a7db810f
--- /dev/null
+++ b/web/src/hooks/spring-hooks/use-corner-info-box.tsx
@@ -0,0 +1,54 @@
+import { useMemo, CSSProperties } from "react";
+import { useTransition, animated } from "react-spring";
+import cx from "classnames";
+
+type UseCornerInfoBoxProps = {
+ items: T[] | undefined;
+ currIndex: number;
+ textExtractor: (item: T) => string;
+ position: "left" | "right"; // upper-left or upper-right
+ className?: string;
+ style?: CSSProperties;
+};
+
+export const useCornerInfoBox = ({
+ items,
+ currIndex,
+ textExtractor,
+ position,
+ className,
+ style,
+}: UseCornerInfoBoxProps) => {
+ const currItem = useMemo(() => items?.[currIndex], [currIndex, items]);
+
+ const infoBoxStyle = useMemo(() => {
+ if (position === "left") {
+ return { left: 20, top: 20 };
+ }
+
+ return { right: 20, top: 20 };
+ }, [position]);
+
+ const itemsInfoTransition = useTransition(currItem, {
+ from: { opacity: 0, translateX: position === "right" ? 15 : -15 },
+ enter: { opacity: 1, translateX: 0, delay: 250 },
+ leave: { opacity: 0, translateX: position === "right" ? 15 : -15 },
+ });
+
+ const Element = itemsInfoTransition(
+ ({ opacity, translateX }, item) =>
+ item && (
+
+ {textExtractor(item)}
+
+ )
+ );
+
+ return Element;
+};
diff --git a/web/src/hooks/spring-hooks/use-element-move.ts b/web/src/hooks/spring-hooks/use-element-move.ts
new file mode 100644
index 00000000..a30918cd
--- /dev/null
+++ b/web/src/hooks/spring-hooks/use-element-move.ts
@@ -0,0 +1,73 @@
+import { CSSProperties } from "react";
+import { useSpring } from "react-spring";
+import { useDrag } from "@use-gesture/react";
+
+import { Position, Size } from "models";
+
+type UseElementMoveProps = {
+ containerSize: Size;
+ dragMovingObjectSize: Size;
+ initialPosition?: Position;
+ additionalCallback?: (left: number, top: number) => void;
+};
+
+/**
+ * This hook enables an element (e.g. image) to be moved within a defined container boundary.
+ * Moving object should be positioned 'absolute', while its container should be positioned 'relative'.
+ * NOTE: Add `draggable={false}` html property to the element being moved
+ *
+ * @param containerSize size of the container which acts as a boundary when moving our element
+ * @param dragMovingObjectSize size of the object which is being moved
+ * @param initialPosition position of moved object inside container boundary, defaults [0, 0]
+ * @param additionalCallback function which is called when new left and top position is being assigned
+ */
+export const useElementMove = ({
+ containerSize,
+ dragMovingObjectSize,
+ initialPosition,
+ additionalCallback,
+}: UseElementMoveProps) => {
+ // Initial position of image being dragged
+ // It will be also reset back to [0, 0] whenever the container size changes (because of the deps array)
+ const [moveSpring, moveSpringApi] = useSpring(
+ () => ({
+ left: initialPosition?.left ?? 0,
+ top: initialPosition?.top ?? 0,
+ }),
+ [containerSize.width, containerSize.height]
+ );
+
+ const bindMoveDrag = useDrag(
+ ({ down, offset: [x, y] }) => {
+ if (!down) {
+ return;
+ }
+
+ moveSpringApi.start({ left: x, top: y, immediate: true });
+ additionalCallback?.(x, y);
+ },
+ {
+ from: () => [moveSpring.left.get(), moveSpring.top.get()],
+ bounds: {
+ left: 0,
+ top: 0,
+ right: containerSize.width - dragMovingObjectSize.width,
+ bottom: containerSize.height - dragMovingObjectSize.height,
+ },
+ }
+ );
+
+ return { moveSpring, moveSpringApi, bindMoveDrag };
+};
+
+export const moveContainerStyle: CSSProperties = {
+ position: "relative",
+};
+
+// NOTE: also add 'hover:cursor-move'
+export const dragMovingObjectStyle: CSSProperties = {
+ position: "absolute",
+ touchAction: "none",
+ WebkitUserSelect: "none",
+ WebkitTouchCallout: "none",
+};
diff --git a/web/src/hooks/spring-hooks/use-element-resize.ts b/web/src/hooks/spring-hooks/use-element-resize.ts
new file mode 100644
index 00000000..73440146
--- /dev/null
+++ b/web/src/hooks/spring-hooks/use-element-resize.ts
@@ -0,0 +1,108 @@
+import { useMemo, CSSProperties } from "react";
+import { useSpring } from "react-spring";
+import { useDrag } from "@use-gesture/react";
+
+import { ImageOrigData, Size } from "models";
+
+type UseElementResizeProps = {
+ containerSize: Size;
+ dragResizingImgOrigData: ImageOrigData;
+ initialSize?: Size;
+ additionalCallback?: (width: number, height: number) => void;
+};
+
+/**
+ * This hook enables an element (e.g. image) to be resized within a defined container boundary.
+ * Object being resized should be positioned 'absolute', while its container should be positioned 'relative'.
+ * NOTE: Add `draggable={false}` html property to the element being resized
+ *
+ * @param containerSize size of the container which acts as a boundary when resizing our element
+ * @param dragResizingImgOrigData needed for aspect ratio of the element which is being resized
+ * @param initialSize first size of the object which is being resized inside container boundary
+ * @param additionalCallback function which is called when new width and height size is being assigned
+ */
+export const useElementResize = ({
+ containerSize,
+ dragResizingImgOrigData,
+ initialSize,
+ additionalCallback,
+}: UseElementResizeProps) => {
+ const { width: origImgWidth, height: origImgHeight } =
+ dragResizingImgOrigData;
+
+ const origImgRatio = useMemo(
+ () => origImgWidth / origImgHeight,
+ [origImgHeight, origImgWidth]
+ );
+
+ const [resizeSpring, resizeSpringApi] = useSpring(() => ({
+ width: initialSize?.width ?? origImgWidth,
+ height: initialSize?.height ?? origImgHeight,
+ }));
+
+ const bindResizeDrag = useDrag(
+ (state) => {
+ const { down, offset, lastOffset } = state;
+ const [x, y] = offset;
+ const [xp, yp] = lastOffset;
+
+ if (!down) {
+ return;
+ }
+
+ // we double the increments since the container is centered (grows on both sides)
+ const width = 2 * x - xp;
+ const height = 2 * y - yp;
+
+ const widthBased = width > height * origImgRatio;
+
+ const finalWidth = widthBased ? width : height * origImgRatio;
+ const finalHeight = widthBased ? width / origImgRatio : height;
+
+ resizeSpringApi.start({
+ width: finalWidth,
+ height: finalHeight,
+ immediate: true,
+ });
+
+ additionalCallback?.(finalWidth, finalHeight);
+ },
+ {
+ from: () => [resizeSpring.width.get(), resizeSpring.height.get()],
+ bounds: (state) => {
+ const [xp = 0, yp = 0] = state?.lastOffset ?? [];
+
+ const maxWidth = (containerSize.width - 100 + xp) / 2;
+ const maxHeight = (containerSize.height - 100 + yp) / 2;
+
+ const widthBased =
+ containerSize.width < containerSize.height * origImgRatio;
+
+ return {
+ left: (50 + xp) / 2,
+ top: (50 + yp) / 2,
+ right: widthBased ? maxWidth : maxHeight * origImgRatio,
+ bottom: widthBased ? maxWidth / origImgRatio : maxHeight,
+ };
+ },
+ }
+ );
+
+ return {
+ resizeSpring,
+ resizeSpringApi,
+ bindResizeDrag,
+ };
+};
+
+export const resizeContainerStyle: CSSProperties = {
+ position: "relative",
+};
+
+// NOTE: also add 'hover:cursor-se-resize'
+export const dragResizingObjectStyle: CSSProperties = {
+ position: "absolute",
+ touchAction: "none",
+ // WebkitUserSelect: "none",
+ // WebkitTouchCallout: "none",
+};
diff --git a/web/src/hooks/view-hooks/glass-magnifier-hook/GlassMagnifier.tsx b/web/src/hooks/view-hooks/glass-magnifier-hook/GlassMagnifier.tsx
index aa6e6c19..0476b8e9 100644
--- a/web/src/hooks/view-hooks/glass-magnifier-hook/GlassMagnifier.tsx
+++ b/web/src/hooks/view-hooks/glass-magnifier-hook/GlassMagnifier.tsx
@@ -6,10 +6,10 @@ import { Position } from "models";
// Thats why image container should be positioned relatively and this absolutel
type GlassMagnifierProps = {
+ containedImgSrc: string | undefined;
containedImgSize: { width: number; height: number };
cursorPosition: Position;
targetPosition: Position;
- containedImgSrc: string | undefined;
lensContainerStyle?: React.CSSProperties;
lensStyle?: React.CSSProperties;
};
diff --git a/web/src/hooks/view-hooks/glass-magnifier-hook/calculate-positions.ts b/web/src/hooks/view-hooks/glass-magnifier-hook/calculate-positions.ts
index 99483de8..ef9d209c 100644
--- a/web/src/hooks/view-hooks/glass-magnifier-hook/calculate-positions.ts
+++ b/web/src/hooks/view-hooks/glass-magnifier-hook/calculate-positions.ts
@@ -139,7 +139,7 @@ export const calculatePositions = (
return {
containedImgSize,
- newContainerCursorPosition,
- newTargetPosition,
+ cursorPosition: newContainerCursorPosition,
+ targetPosition: newTargetPosition,
};
};
diff --git a/web/src/hooks/view-hooks/glass-magnifier-hook/glass-magnifier-hook.tsx b/web/src/hooks/view-hooks/glass-magnifier-hook/glass-magnifier-hook.tsx
deleted file mode 100644
index 84da7d59..00000000
--- a/web/src/hooks/view-hooks/glass-magnifier-hook/glass-magnifier-hook.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useState, useMemo, useEffect, useCallback } from "react";
-import { calculatePositions } from "./calculate-positions";
-import { useGlassMagnifierConfig } from "context/glass-magnifier-config-provider/glass-magnifier-config-provider";
-import GlassMagnifier from "./GlassMagnifier";
-
-import { Position } from "models";
-
-export const useGlassMagnifier = (
- imageContainerEl: HTMLDivElement | null,
- containedImageEl: HTMLImageElement | null
-) => {
- const { isGlassMagnifierEnabled, glassMagnifierPxSize } =
- useGlassMagnifierConfig();
-
- // Cursor position (left and top from image container)
- // Cursor is in the middle of the glass magnifier
- const [cursorPosition, setCursorPosition] = useState({
- left: 0,
- top: 0,
- });
-
- // Position (left and top) in the natural dimensions of contained img
- const [targetPosition, setTargetPosition] = useState({
- left: 0,
- top: 0,
- });
-
- const [containedImgSize, setContainedImgSize] = useState({
- width: 0,
- height: 0,
- });
-
- const containedImgSrc = useMemo(
- () => containedImageEl?.src,
- [containedImageEl]
- );
-
- // - -
-
- // ImageContainerOnMouseMoveHandler
- const imgContainerMouseMoveHandler = useCallback(
- (event: globalThis.MouseEvent | globalThis.TouchEvent) => {
- if (!isGlassMagnifierEnabled) {
- return;
- }
- if (!imageContainerEl || !containedImageEl || !containedImgSrc) {
- return;
- }
-
- const {
- containedImgSize,
- newContainerCursorPosition,
- newTargetPosition,
- } = calculatePositions(
- imageContainerEl,
- containedImageEl,
- event,
- glassMagnifierPxSize
- );
-
- setContainedImgSize(containedImgSize);
- setCursorPosition(newContainerCursorPosition);
- setTargetPosition(newTargetPosition);
-
- return;
- },
- [
- containedImageEl,
- containedImgSrc,
- glassMagnifierPxSize,
- imageContainerEl,
- isGlassMagnifierEnabled,
- ]
- );
-
- // Apply the required styles for the imageContainer
- useEffect(() => {
- if (!imageContainerEl) {
- return;
- }
-
- imageContainerEl.style.position = "relative";
- imageContainerEl.style.overflow = "hidden";
- imageContainerEl.style.cursor = isGlassMagnifierEnabled ? "none" : "auto";
- imageContainerEl.style.touchAction = isGlassMagnifierEnabled
- ? "none" // disable default browser touch actions such as scrolling, zooming, ...
- : "auto";
- }, [imageContainerEl, isGlassMagnifierEnabled]);
-
- // Add the onMouseMove and touchStart handler for the imageContainer
- useEffect(() => {
- if (!imageContainerEl) {
- return;
- }
-
- imageContainerEl.addEventListener(
- "mousemove",
- imgContainerMouseMoveHandler
- );
-
- imageContainerEl.addEventListener(
- "touchmove",
- imgContainerMouseMoveHandler
- );
-
- return () => {
- imageContainerEl.removeEventListener(
- "mousemove",
- imgContainerMouseMoveHandler
- );
-
- imageContainerEl.removeEventListener(
- "touchmove",
- imgContainerMouseMoveHandler
- );
- };
- }, [imageContainerEl, imgContainerMouseMoveHandler]);
-
- // - -
-
- // Glass Magnifier component with current cursor positions
- // Adding this component into viewScreen will render "lens" at the current cursor position
- type CalculatedGlassMagnifierProps = {
- lensContainerStyle?: React.CSSProperties;
- lensStyle?: React.CSSProperties;
- };
-
- const CalculatedGlassMagnifier = ({
- lensContainerStyle,
- lensStyle,
- }: CalculatedGlassMagnifierProps) => {
- return (
- ({
- left: 0,
- top: 0,
- });
-
- // Position (left and top) in the natural dimensions of contained img
- const [targetPosition, setTargetPosition] = useState({
- left: 0,
- top: 0,
- });
-
- const [containedImgSize, setContainedImgSize] = useState({
- width: 0,
- height: 0,
- });
-
const containedImgSrc = useMemo(
() => containedImageEl?.src,
[containedImageEl]
);
- // - -
- // ImageContainerOnMouseMoveHandler
+ const [positionsInfo, setPositionsInfo] = useState({
+ // Size of the contained image
+ containedImgSize: { width: 0, height: 0 },
+
+ // Current position of the cursor relative to the image container (e.g. whole screen)
+ // Cursor is located in the middle of the glass magnifier and is not visible when glass magnifier is enabled
+ cursorPosition: { left: 0, top: 0 },
+
+ // Represents current position of the left-top corner of the lens -> relative to the natural dimensions of contained img
+ targetPosition: { left: 0, top: 0 },
+ });
+
+ // - - - - - - - - - - - -
+ // Event Handlers
+ // - - - - - - - - - - - -
+
const imageContainerOnMouseMoveHandler = useCallback(
(event: globalThis.MouseEvent | globalThis.TouchEvent) => {
if (!isGlassMagnifierEnabled) {
return;
}
+
if (!imageContainerEl || !containedImageEl || !containedImgSrc) {
return;
}
- const {
- containedImgSize,
- newContainerCursorPosition,
- newTargetPosition,
- } = calculatePositions(
+ const newPositionsInfo = calculatePositions(
imageContainerEl,
containedImageEl,
event,
glassMagnifierPxSize
);
- setContainedImgSize(containedImgSize);
- setCursorPosition(newContainerCursorPosition);
- setTargetPosition(newTargetPosition);
-
- return;
+ setPositionsInfo(newPositionsInfo);
},
[
containedImageEl,
@@ -71,31 +68,23 @@ export const useGlassMagnifier = (
]
);
- // Disable default browser behavior, like saving image when long touch and other..
- // const imageContainerElOnTouchStart = useCallback(
- // (e: TouchEvent) => {
- // if (isGlassMagnifierEnabled) {
- // e.preventDefault();
- // }
- // },
- // [isGlassMagnifierEnabled]
- // );
-
- // Apply the required styles for the imageContainer
- useEffect(() => {
- if (!imageContainerEl) {
- return;
- }
+ // Handler responsible for disabling the default browser behavior, e.g. saving image pop-up when long touch
+ /*
+ const imageContainerOnTouchStart = useCallback(
+ (e: TouchEvent) => {
+ if (isGlassMagnifierEnabled) {
+ e.preventDefault();
+ }
+ },
+ [isGlassMagnifierEnabled]
+ );
+ */
- imageContainerEl.style.position = "relative";
- imageContainerEl.style.overflow = "hidden";
- imageContainerEl.style.cursor = isGlassMagnifierEnabled ? "none" : "auto";
- imageContainerEl.style.touchAction = isGlassMagnifierEnabled
- ? "none" // disable default browser touch actions such as scrolling, zooming, ...
- : "auto";
- }, [imageContainerEl, isGlassMagnifierEnabled]);
+ // - - - - - - - - - - - -
+ // Effects
+ // - - - - - - - - - - - -
- // Add the onMouseMove handler for the imageContainer
+ // Effect responsible for registration/unregistration of event handlers for imageContainer element
useEffect(() => {
if (!imageContainerEl) {
return;
@@ -105,37 +94,53 @@ export const useGlassMagnifier = (
imageContainerOnMouseMoveHandler
);
- // imageContainerEl.addEventListener(
- // "touchstart",
- // imageContainerElOnTouchStart
- // );
-
imageContainerEl.addEventListener(
"touchmove",
imageContainerOnMouseMoveHandler
);
+ // imageContainerEl.addEventListener(
+ // "touchstart",
+ // imageContainerOnTouchStart
+ // );
+
return () => {
imageContainerEl.removeEventListener(
"mousemove",
imageContainerOnMouseMoveHandler
);
- // imageContainerEl.removeEventListener(
- // "touchstart",
- // imageContainerElOnTouchStart
- // );
-
imageContainerEl.removeEventListener(
"touchmove",
imageContainerOnMouseMoveHandler
);
+
+ // imageContainerEl.removeEventListener(
+ // "touchstart",
+ // imageContainerOnTouchStart
+ // );
};
}, [imageContainerEl, imageContainerOnMouseMoveHandler]);
- // - -
- // Glass Magnifier component with current cursor positions
- // Adding this component into viewScreen will render "lens" at the current cursor position
+ // Effect responsible for applying all necessary styles for the imageContainer element
+ useEffect(() => {
+ if (!imageContainerEl) {
+ return;
+ }
+
+ imageContainerEl.style.position = "relative";
+ imageContainerEl.style.overflow = "hidden";
+ imageContainerEl.style.cursor = isGlassMagnifierEnabled ? "none" : "auto";
+ imageContainerEl.style.touchAction = isGlassMagnifierEnabled
+ ? "none" // disable default browser touch actions such as scrolling, zooming, ...
+ : "auto";
+ }, [imageContainerEl, isGlassMagnifierEnabled]);
+
+ // - - - - - - - - - - - -
+ // Prepared GlassMagnifier component
+ // - adding this component into viewScreen will render "glass magnifier lens" at the current cursor position
+ // - - - - - - - - - - - -
+
type CalculatedGlassMagnifierProps = {
lensContainerStyle?: React.CSSProperties;
lensStyle?: React.CSSProperties;
@@ -147,10 +152,10 @@ export const useGlassMagnifier = (
}: CalculatedGlassMagnifierProps) => {
return (
- 
+
+ 
+
+ 
+