@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
516 lines • 27.5 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import { useState, useEffect, useRef, useLayoutEffect, useMemo, forwardRef, useImperativeHandle } from "react";
import { motion, useScroll, useTransform, useMotionValue, animate } from "framer-motion";
import { ConvertNumberToSafeNumber } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
var FlyThroughSection = /*#__PURE__*/forwardRef(function FlyThroughSection(_ref, ref) {
var _ref$cinematicCanvasS = _ref.cinematicCanvasSectionLayerConfigurationSettings,
cinematicCanvasSectionLayerConfigurationSettings = _ref$cinematicCanvasS === void 0 ? {} : _ref$cinematicCanvasS,
_ref$cinematicCanvasS2 = _ref.cinematicCanvasSectionLayerConfigurations,
cinematicCanvasSectionLayerConfigurations = _ref$cinematicCanvasS2 === void 0 ? {} : _ref$cinematicCanvasS2,
_ref$animationConfigu = _ref.animationConfigurations,
animationConfigurations = _ref$animationConfigu === void 0 ? {} : _ref$animationConfigu,
containerHeight = _ref.containerHeight,
appearRange = _ref.appearRange,
scrollTop = _ref.scrollTop,
children = _ref.children,
index = _ref.index;
var _animationConfigurati = animationConfigurations.entryAnimationConfig,
entryAnimationConfig = _animationConfigurati === void 0 ? {} : _animationConfigurati,
_animationConfigurati2 = animationConfigurations.exitAnimationConfig,
exitAnimationConfig = _animationConfigurati2 === void 0 ? {} : _animationConfigurati2;
var _entryAnimationConfig = entryAnimationConfig.type,
entryType = _entryAnimationConfig === void 0 ? "pop" : _entryAnimationConfig,
_entryAnimationConfig2 = entryAnimationConfig.offset,
entryOffset = _entryAnimationConfig2 === void 0 ? 50 : _entryAnimationConfig2,
_entryAnimationConfig3 = entryAnimationConfig.easing,
entryEasing = _entryAnimationConfig3 === void 0 ? 0.1 : _entryAnimationConfig3,
_entryAnimationConfig4 = entryAnimationConfig.enable,
entryEnable = _entryAnimationConfig4 === void 0 ? true : _entryAnimationConfig4;
var _exitAnimationConfig$ = exitAnimationConfig.type,
exitType = _exitAnimationConfig$ === void 0 ? entryType : _exitAnimationConfig$,
_exitAnimationConfig$2 = exitAnimationConfig.offset,
exitOffset = _exitAnimationConfig$2 === void 0 ? entryOffset : _exitAnimationConfig$2,
_exitAnimationConfig$3 = exitAnimationConfig.easing,
exitEasing = _exitAnimationConfig$3 === void 0 ? entryEasing : _exitAnimationConfig$3,
_exitAnimationConfig$4 = exitAnimationConfig.enable,
exitEnable = _exitAnimationConfig$4 === void 0 ? entryEnable : _exitAnimationConfig$4;
var opacity = useMotionValue(0);
var scale = useMotionValue(0.95);
var y = useMotionValue(entryType === "pop" ? entryOffset : 0);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
offsetTop = _useState2[0],
setOffsetTop = _useState2[1];
var localRef = useRef(null);
useImperativeHandle(ref, function () {
return localRef.current;
});
useLayoutEffect(function () {
if (localRef.current) {
setOffsetTop(localRef.current.offsetTop);
}
}, [containerHeight]);
useEffect(function () {
if (offsetTop === null && !appearRange) {
return;
}
var viewportCenter = scrollTop + containerHeight / 2;
var sectionCenter = offsetTop + containerHeight / 2;
var distance = Math.abs(viewportCenter - sectionCenter);
var entering = distance < containerHeight * 0.5;
var maxDistance = containerHeight * 0.75;
var progress = Math.min(distance / maxDistance, 1);
var targetScale = 1 - progress * 0.05;
var targetOpacity = 1 - progress;
var activeOffset = entering ? entryOffset : exitOffset;
var activeEnable = entering ? entryEnable : exitEnable;
var activeType = entering ? entryType : exitType;
var targetY = activeType === "pop" ? progress * activeOffset : 0;
if (activeEnable) {
var controls = [animate(opacity, targetOpacity, {
type: "spring",
stiffness: 180,
damping: 24
}), animate(scale, targetScale, {
type: "spring",
stiffness: 180,
damping: 24
}), animate(y, targetY, {
type: "spring",
stiffness: 180,
damping: 24
})];
return function () {
return controls.forEach(function (c) {
return c.stop();
});
};
}
}, [scrollTop, offsetTop, containerHeight]);
useEffect(function () {
if (!appearRange) {
return;
}
var _appearRange = _slicedToArray(appearRange, 3),
start = _appearRange[0],
mid = _appearRange[1],
end = _appearRange[2];
var sectionProgress = containerHeight > 0 ? scrollTop / (containerHeight * (index + 1)) : 0;
var raw = sectionProgress <= start ? 0 : sectionProgress >= end ? 0 : 1 - Math.abs((sectionProgress - mid) / (end - start)) * 2;
var target = Math.max(0, raw);
var appearAnim = animate(opacity, target, {
type: "spring",
stiffness: 180,
damping: 27
});
return function () {
return appearAnim.stop();
};
}, [scrollTop, appearRange, index, containerHeight]);
return /*#__PURE__*/React.createElement(motion.div, _extends({
ref: localRef,
style: _objectSpread({
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "center",
scrollSnapAlign: "start",
pointerEvents: "auto",
fontSize: 48,
color: "white",
height: "100vh",
width: "100vw",
zIndex: 2,
opacity: opacity,
scale: scale,
y: y
}, cinematicCanvasSectionLayerConfigurationSettings)
}, cinematicCanvasSectionLayerConfigurations), children);
});
function FlyThroughBackgroundLayer(_ref2) {
var _ref2$cinematicCanvas = _ref2.cinematicCanvasBackgroundLayerContentContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContentContainerConfigurationSettings = _ref2$cinematicCanvas === void 0 ? {} : _ref2$cinematicCanvas,
_ref2$cinematicCanvas2 = _ref2.cinematicCanvasBackgroundLayerContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContainerConfigurationSettings = _ref2$cinematicCanvas2 === void 0 ? {} : _ref2$cinematicCanvas2,
_ref2$cinematicCanvas3 = _ref2.cinematicCanvasBackgroundLayerContentContainerConfigurations,
cinematicCanvasBackgroundLayerContentContainerConfigurations = _ref2$cinematicCanvas3 === void 0 ? {} : _ref2$cinematicCanvas3,
_ref2$cinematicCanvas4 = _ref2.cinematicCanvasBackgroundLayerContainerConfigurations,
cinematicCanvasBackgroundLayerContainerConfigurations = _ref2$cinematicCanvas4 === void 0 ? {} : _ref2$cinematicCanvas4,
_ref2$beginningBackgr = _ref2.beginningBackgroundLayerEffectRangeConfigurations,
beginningBackgroundLayerEffectRangeConfigurations = _ref2$beginningBackgr === void 0 ? {} : _ref2$beginningBackgr,
_ref2$backgroundLayer = _ref2.backgroundLayerEffectRangeConfigurations,
backgroundLayerEffectRangeConfigurations = _ref2$backgroundLayer === void 0 ? {} : _ref2$backgroundLayer,
_ref2$backgroundLayer2 = _ref2.backgroundLayerFadeBuffer,
backgroundLayerFadeBuffer = _ref2$backgroundLayer2 === void 0 ? 0.25 : _ref2$backgroundLayer2,
scrollYProgress = _ref2.scrollYProgress,
children = _ref2.children,
total = _ref2.total,
index = _ref2.index;
var sectionSize = useMemo(function () {
return total > 0 ? 1 / total : 1;
}, [total]);
var fadeBuffer = sectionSize * backgroundLayerFadeBuffer;
var end = (index + 1) * sectionSize;
var start = index * sectionSize;
var _useMemo = useMemo(function () {
if (index === 0) {
return _objectSpread({
inputRange: [0, sectionSize * 0.85, sectionSize],
opacityRange: [1, 0.69, 0],
scaleRange: [1.02, 1.005, 1]
}, beginningBackgroundLayerEffectRangeConfigurations || {});
}
var fadeInStart = Math.max(0, start - fadeBuffer);
var fadeOutStart = end - fadeBuffer;
var fadeInEnd = start + fadeBuffer;
var fadeOutEnd = end + fadeBuffer;
return _objectSpread({
inputRange: [fadeInStart, start, end, fadeOutEnd],
opacityRange: [0, 1, 0.869, 0],
scaleRange: [1.02, 1.005, 1, 1]
}, backgroundLayerEffectRangeConfigurations || {});
}, [start, end, fadeBuffer, sectionSize, index, beginningBackgroundLayerEffectRangeConfigurations]),
inputRange = _useMemo.inputRange,
opacityRange = _useMemo.opacityRange,
scaleRange = _useMemo.scaleRange;
var opacity = useTransform(scrollYProgress, inputRange, opacityRange);
var scale = useTransform(scrollYProgress, inputRange, scaleRange);
return /*#__PURE__*/React.createElement(motion.div, _extends({
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
transformOrigin: "center center",
willChange: "transform, opacity",
height: "100vh",
width: "100vw",
opacity: opacity,
scale: scale,
zIndex: index,
left: 0,
top: 0
}, cinematicCanvasBackgroundLayerContainerConfigurationSettings)
}, cinematicCanvasBackgroundLayerContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "absolute",
height: "100%",
width: "100%",
left: 0,
top: 0
}, cinematicCanvasBackgroundLayerContentContainerConfigurationSettings)
}, cinematicCanvasBackgroundLayerContentContainerConfigurations), children));
}
;
function HUDCinematicCanvas(_ref3) {
var _scrollResult$scrollY;
var _ref3$cinematicCanvas = _ref3.cinematicCanvasBackgroundLayerContentContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContentContainerConfigurationSettings = _ref3$cinematicCanvas === void 0 ? {} : _ref3$cinematicCanvas,
_ref3$cinematicCanvas2 = _ref3.cinematicCanvasBackgroundLayersContainerConfigurationSettings,
cinematicCanvasBackgroundLayersContainerConfigurationSettings = _ref3$cinematicCanvas2 === void 0 ? {} : _ref3$cinematicCanvas2,
_ref3$cinematicCanvas3 = _ref3.cinematicCanvasBackgroundLayerContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContainerConfigurationSettings = _ref3$cinematicCanvas3 === void 0 ? {} : _ref3$cinematicCanvas3,
_ref3$cinematicCanvas4 = _ref3.cinematicCanvasBackgroundLayerContentConfigurationSettings,
cinematicCanvasBackgroundLayerContentConfigurationSettings = _ref3$cinematicCanvas4 === void 0 ? {} : _ref3$cinematicCanvas4,
_ref3$cinematicCanvas5 = _ref3.cinematicCanvasForegroundHUDConfigurationSettings,
cinematicCanvasForegroundHUDConfigurationSettings = _ref3$cinematicCanvas5 === void 0 ? {} : _ref3$cinematicCanvas5,
_ref3$cinematicCanvas6 = _ref3.cinematicCanvasSectionLayerConfigurationSettings,
cinematicCanvasSectionLayerConfigurationSettings = _ref3$cinematicCanvas6 === void 0 ? {} : _ref3$cinematicCanvas6,
_ref3$cinematicCanvas7 = _ref3.cinematicCanvasContainerConfigurationSettings,
cinematicCanvasContainerConfigurationSettings = _ref3$cinematicCanvas7 === void 0 ? {} : _ref3$cinematicCanvas7,
_ref3$cinematicCanvas8 = _ref3.cinematicCanvasContentConfigurationSettings,
cinematicCanvasContentConfigurationSettings = _ref3$cinematicCanvas8 === void 0 ? {} : _ref3$cinematicCanvas8,
_ref3$cinematicCanvas9 = _ref3.cinematicCanvasConfigurationSettings,
cinematicCanvasConfigurationSettings = _ref3$cinematicCanvas9 === void 0 ? {} : _ref3$cinematicCanvas9,
_ref3$cinematicCanvas10 = _ref3.cinematicCanvasBackgroundLayerContentContainerConfigurations,
cinematicCanvasBackgroundLayerContentContainerConfigurations = _ref3$cinematicCanvas10 === void 0 ? {} : _ref3$cinematicCanvas10,
_ref3$cinematicCanvas11 = _ref3.cinematicCanvasBackgroundLayersContainerConfigurations,
cinematicCanvasBackgroundLayersContainerConfigurations = _ref3$cinematicCanvas11 === void 0 ? {} : _ref3$cinematicCanvas11,
_ref3$cinematicCanvas12 = _ref3.cinematicCanvasBackgroundLayerContainerConfigurations,
cinematicCanvasBackgroundLayerContainerConfigurations = _ref3$cinematicCanvas12 === void 0 ? {} : _ref3$cinematicCanvas12,
_ref3$cinematicCanvas13 = _ref3.cinematicCanvasBackgroundLayerContentConfigurations,
cinematicCanvasBackgroundLayerContentConfigurations = _ref3$cinematicCanvas13 === void 0 ? {} : _ref3$cinematicCanvas13,
_ref3$cinematicCanvas14 = _ref3.cinematicCanvasForegroundHUDConfigurations,
cinematicCanvasForegroundHUDConfigurations = _ref3$cinematicCanvas14 === void 0 ? {} : _ref3$cinematicCanvas14,
_ref3$cinematicCanvas15 = _ref3.cinematicCanvasSectionLayerConfigurations,
cinematicCanvasSectionLayerConfigurations = _ref3$cinematicCanvas15 === void 0 ? {} : _ref3$cinematicCanvas15,
_ref3$cinematicCanvas16 = _ref3.cinematicCanvasContainerConfigurations,
cinematicCanvasContainerConfigurations = _ref3$cinematicCanvas16 === void 0 ? {} : _ref3$cinematicCanvas16,
_ref3$cinematicCanvas17 = _ref3.cinematicCanvasContentConfigurations,
cinematicCanvasContentConfigurations = _ref3$cinematicCanvas17 === void 0 ? {} : _ref3$cinematicCanvas17,
_ref3$cinematicCanvas18 = _ref3.cinematicCanvasConfigurations,
cinematicCanvasConfigurations = _ref3$cinematicCanvas18 === void 0 ? {} : _ref3$cinematicCanvas18,
_ref3$beginningBackgr = _ref3.beginningBackgroundLayerEffectRangeConfigurations,
beginningBackgroundLayerEffectRangeConfigurations = _ref3$beginningBackgr === void 0 ? {} : _ref3$beginningBackgr,
_ref3$backgroundLayer = _ref3.backgroundLayerEffectRangeConfigurations,
backgroundLayerEffectRangeConfigurations = _ref3$backgroundLayer === void 0 ? {} : _ref3$backgroundLayer,
_ref3$sectionAnimatio = _ref3.sectionAnimationConfigurations,
sectionAnimationConfigurations = _ref3$sectionAnimatio === void 0 ? [] : _ref3$sectionAnimatio,
_ref3$parallaxConfigu = _ref3.parallaxConfigurations,
parallaxConfigurations = _ref3$parallaxConfigu === void 0 ? {} : _ref3$parallaxConfigu,
_ref3$onScrollProgres = _ref3.onScrollProgress,
onScrollProgress = _ref3$onScrollProgres === void 0 ? function () {} : _ref3$onScrollProgres,
_ref3$foregroundHUD = _ref3.foregroundHUD,
foregroundHUD = _ref3$foregroundHUD === void 0 ? null : _ref3$foregroundHUD,
_ref3$backgroundLayer2 = _ref3.backgroundLayers,
backgroundLayers = _ref3$backgroundLayer2 === void 0 ? [] : _ref3$backgroundLayer2,
_ref3$sections = _ref3.sections,
sections = _ref3$sections === void 0 ? [] : _ref3$sections,
_ref3$backgroundLayer3 = _ref3.backgroundLayerFadeBuffer,
backgroundLayerFadeBuffer = _ref3$backgroundLayer3 === void 0 ? 0.25 : _ref3$backgroundLayer3,
_ref3$translateYRange = _ref3.translateYRange,
translateYRange = _ref3$translateYRange === void 0 ? [0, -200] : _ref3$translateYRange,
_ref3$sectionAppearRa = _ref3.sectionAppearRanges,
sectionAppearRanges = _ref3$sectionAppearRa === void 0 ? [] : _ref3$sectionAppearRa,
_ref3$zoomRange = _ref3.zoomRange,
zoomRange = _ref3$zoomRange === void 0 ? [1, 0.85] : _ref3$zoomRange;
var _parallaxConfiguratio = parallaxConfigurations.useCustomDepthFromProps,
useCustomDepthFromProps = _parallaxConfiguratio === void 0 ? true : _parallaxConfiguratio,
_parallaxConfiguratio2 = parallaxConfigurations.enableMouseParallax,
enableMouseParallax = _parallaxConfiguratio2 === void 0 ? false : _parallaxConfiguratio2,
_parallaxConfiguratio3 = parallaxConfigurations.parallaxDepthDivider,
parallaxDepthDivider = _parallaxConfiguratio3 === void 0 ? 1.69 : _parallaxConfiguratio3,
_parallaxConfiguratio4 = parallaxConfigurations.parallaxThreshold,
parallaxThreshold = _parallaxConfiguratio4 === void 0 ? 0.5 : _parallaxConfiguratio4,
_parallaxConfiguratio5 = parallaxConfigurations.interactionDepth,
interactionDepth = _parallaxConfiguratio5 === void 0 ? 10 : _parallaxConfiguratio5,
_parallaxConfiguratio6 = parallaxConfigurations.parallaxEase,
parallaxEase = _parallaxConfiguratio6 === void 0 ? 0.1 : _parallaxConfiguratio6,
_parallaxConfiguratio7 = parallaxConfigurations.depthBase,
depthBase = _parallaxConfiguratio7 === void 0 ? 0.2 : _parallaxConfiguratio7,
_parallaxConfiguratio8 = parallaxConfigurations.depthStep,
depthStep = _parallaxConfiguratio8 === void 0 ? 0.2 : _parallaxConfiguratio8;
var scrollAreaRef = useRef(null);
var scrollResult = useScroll({
container: scrollAreaRef
});
var fallbackMotionValue = useMotionValue(0);
var scrollYProgress = (_scrollResult$scrollY = scrollResult === null || scrollResult === void 0 ? void 0 : scrollResult.scrollYProgress) !== null && _scrollResult$scrollY !== void 0 ? _scrollResult$scrollY : fallbackMotionValue;
var y = useTransform(scrollYProgress, [0, 1], translateYRange);
var scale = useTransform(scrollYProgress, [0, 1], zoomRange);
var _useState3 = useState(window.innerHeight),
_useState4 = _slicedToArray(_useState3, 2),
containerHeight = _useState4[0],
setContainerHeight = _useState4[1];
var _useState5 = useState(0),
_useState6 = _slicedToArray(_useState5, 2),
scrollTop = _useState6[0],
setScrollTop = _useState6[1];
var mousePos = useRef({
x: 0,
y: 0
});
var animationFrame = useRef(null);
var smoothScrollY = useRef(0);
var sectionRefs = useRef([]);
var scrollY = useRef(0);
var reversedBackgroundLayers = useMemo(function () {
return _toConsumableArray(backgroundLayers).reverse();
}, [backgroundLayers]);
var totalHeight = useMemo(function () {
return Math.max(1, sections.length) * 100;
}, [sections.length]);
var updateParallax = function updateParallax() {
if (animationFrame.current) {
cancelAnimationFrame(animationFrame.current);
}
var threshold = parallaxThreshold;
var ease = parallaxEase;
var animateFrame = function animateFrame() {
var diff = scrollY.current - smoothScrollY.current;
smoothScrollY.current += diff * ease;
var clampedScroll = Math.max(0, Math.min(scrollY.current, scrollAreaRef.current.scrollHeight - scrollAreaRef.current.clientHeight));
backgroundLayers.forEach(function (_, i) {
var el = document.getElementById("parallax-layer-" + i);
if (el) {
var iDepth = useCustomDepthFromProps ? ConvertNumberToSafeNumber(el.dataset.interactionDepth, interactionDepth) : interactionDepth;
var depth = useCustomDepthFromProps ? ConvertNumberToSafeNumber(el.dataset.depth, depthStep * (i + 1)) : depthStep * (i + 1);
var moveX = mousePos.current.x * iDepth;
var moveY = mousePos.current.y * iDepth;
el.style.transform = "translate(".concat(moveX, "px, ").concat(clampedScroll * (depth / parallaxDepthDivider) + moveY, "px)");
}
});
if (Math.abs(diff) > threshold) {
animationFrame.current = requestAnimationFrame(animateFrame);
}
};
animationFrame.current = requestAnimationFrame(animateFrame);
};
useEffect(function () {
var handleResize = function handleResize() {
return setContainerHeight(window.innerHeight);
};
window.addEventListener("resize", handleResize);
return function () {
return window.removeEventListener("resize", handleResize);
};
}, []);
useEffect(function () {
var handleScroll = function handleScroll() {
if (scrollAreaRef.current) {
var _scrollYProgress$get, _scrollYProgress$get2;
scrollY.current = scrollAreaRef.current.scrollTop;
setScrollTop(scrollY.current);
updateParallax();
var activeIndex = -1;
var closestDistance = Infinity;
var viewportCenter = scrollY.current + window.innerHeight / 2;
sectionRefs.current.forEach(function (el, i) {
if (!el) {
return;
}
var height = el.offsetHeight;
var top = el.offsetTop;
var sectionCenter = top + height / 2;
var distance = Math.abs(viewportCenter - sectionCenter);
if (distance < closestDistance) {
closestDistance = distance;
activeIndex = i;
}
});
var _el = sectionRefs.current[activeIndex];
var sectionScrollProgress = 0;
var sectionHeight = 1;
var sectionTop = 0;
if (_el) {
var rect = _el.getBoundingClientRect();
sectionHeight = _el.offsetHeight;
sectionTop = _el.offsetTop;
var sectionCenter = rect.top + rect.height / 2;
var _viewportCenter = window.innerHeight / 2;
sectionScrollProgress = 1 - Math.min(1, Math.abs(sectionCenter - _viewportCenter) / _viewportCenter);
sectionScrollProgress = Math.max(0, sectionScrollProgress);
}
var globalScrollProgress = scrollY.current / (sectionHeight * sections.length);
onScrollProgress({
scrollYProgress: (_scrollYProgress$get = (_scrollYProgress$get2 = scrollYProgress.get) === null || _scrollYProgress$get2 === void 0 ? void 0 : _scrollYProgress$get2.call(scrollYProgress)) !== null && _scrollYProgress$get !== void 0 ? _scrollYProgress$get : 0,
scrollTop: scrollY.current,
sectionIndex: activeIndex,
sectionScrollProgress: sectionScrollProgress,
globalScrollProgress: globalScrollProgress,
containerHeight: containerHeight
});
}
};
var handleMouseMove = function handleMouseMove(e) {
if (!enableMouseParallax) {
return;
}
var _window = window,
innerWidth = _window.innerWidth,
innerHeight = _window.innerHeight;
mousePos.current = {
y: (e.clientY / innerHeight - 0.5) * 2,
x: (e.clientX / innerWidth - 0.5) * 2
};
updateParallax();
};
var el = scrollAreaRef.current;
el === null || el === void 0 || el.addEventListener("scroll", handleScroll);
if (enableMouseParallax) {
window.addEventListener("mousemove", handleMouseMove);
}
return function () {
el === null || el === void 0 || el.removeEventListener("scroll", handleScroll);
if (enableMouseParallax) {
window.removeEventListener("mousemove", handleMouseMove);
}
};
}, [enableMouseParallax]);
return /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "relative",
overflow: "hidden",
backgroundColor: "#000",
height: "100vh",
width: "100vw"
}, cinematicCanvasContainerConfigurationSettings)
}, cinematicCanvasContainerConfigurations), /*#__PURE__*/React.createElement(motion.div, _extends({
style: _objectSpread({
position: "absolute",
pointerEvents: "none",
height: "100vh",
width: "100%",
zIndex: 0,
left: 0,
top: 0,
y: y
}, cinematicCanvasBackgroundLayersContainerConfigurationSettings)
}, cinematicCanvasBackgroundLayersContainerConfigurations), reversedBackgroundLayers.map(function (layer, iReversed) {
var _layer$props, _layer$props2;
var i = backgroundLayers.length - 1 - iReversed;
return /*#__PURE__*/React.createElement(FlyThroughBackgroundLayer, {
cinematicCanvasBackgroundLayerContentContainerConfigurationSettings: cinematicCanvasBackgroundLayerContentContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContainerConfigurationSettings: cinematicCanvasBackgroundLayerContainerConfigurationSettings,
cinematicCanvasBackgroundLayerContentContainerConfigurations: cinematicCanvasBackgroundLayerContentContainerConfigurations,
cinematicCanvasBackgroundLayerContainerConfigurations: cinematicCanvasBackgroundLayerContainerConfigurations,
key: "bg-" + i,
beginningBackgroundLayerEffectRangeConfigurations: beginningBackgroundLayerEffectRangeConfigurations,
backgroundLayerEffectRangeConfigurations: backgroundLayerEffectRangeConfigurations,
scrollYProgress: scrollYProgress,
total: sections.length,
index: i
}, /*#__PURE__*/React.createElement("div", _extends({
id: "parallax-layer-" + i,
"data-depth": (_layer$props = layer.props) === null || _layer$props === void 0 ? void 0 : _layer$props.depth,
"data-interaction-depth": (_layer$props2 = layer.props) === null || _layer$props2 === void 0 ? void 0 : _layer$props2.interactionDepth,
style: _objectSpread({
position: "absolute",
overflow: "hidden",
height: "100%",
width: "100%",
left: 0,
top: 0
}, cinematicCanvasBackgroundLayerContentConfigurationSettings)
}, cinematicCanvasBackgroundLayerContentConfigurations), layer));
})), foregroundHUD && /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
position: "fixed",
pointerEvents: "none",
height: "100%",
width: "100%",
zIndex: 9999,
left: 0,
top: 0
}, cinematicCanvasForegroundHUDConfigurationSettings)
}, cinematicCanvasForegroundHUDConfigurations), foregroundHUD), /*#__PURE__*/React.createElement("div", _extends({
ref: scrollAreaRef,
style: _objectSpread({
position: "relative",
scrollSnapType: "y mandatory",
scrollBehavior: "smooth",
overflowY: "auto",
height: "100%",
width: "100%",
zIndex: 1
}, cinematicCanvasConfigurationSettings)
}, cinematicCanvasConfigurations), /*#__PURE__*/React.createElement(motion.div, _extends({
style: _objectSpread({
position: "relative",
height: "".concat(totalHeight, "vh"),
width: "100%",
scale: scale,
y: y
}, cinematicCanvasContentConfigurationSettings)
}, cinematicCanvasContentConfigurations), sections.map(function (section, i) {
return /*#__PURE__*/React.createElement(FlyThroughSection, {
cinematicCanvasSectionLayerConfigurationSettings: cinematicCanvasSectionLayerConfigurationSettings,
cinematicCanvasSectionLayerConfigurations: cinematicCanvasSectionLayerConfigurations,
key: "section-" + i,
ref: function ref(el) {
return sectionRefs.current[i] = el;
},
animationConfigurations: sectionAnimationConfigurations === null || sectionAnimationConfigurations === void 0 ? void 0 : sectionAnimationConfigurations[i],
appearRange: sectionAppearRanges === null || sectionAppearRanges === void 0 ? void 0 : sectionAppearRanges[i],
containerHeight: containerHeight,
scrollTop: scrollTop,
index: i
}, section);
}))));
}
;
export default HUDCinematicCanvas;