@gxpl/sdk 0.0.17 → 0.0.18

package/lib/sdk-nextjs/common/useKeyframeValue.js

@@ -49,8 +49,10 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
-        const scroll = articleRectObserver.getSectionScroll(sectionId);
-        handleKeyframeValue(scroll);
+        return articleRectObserver.on('init', () => {
+            const scroll = articleRectObserver.getSectionScroll(sectionId);
+            handleKeyframeValue(scroll);
+        });
     }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
@@ -59,7 +61,7 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !animator)
             return;
@@ -67,6 +69,6 @@ function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionI
             const scroll = articleRectObserver.getSectionScroll(sectionId);
             handleKeyframeValue(scroll);
         });
-    }, [handleKeyframeValue, articleRectObserver, animator]);
+    }, [articleRectObserver, handleKeyframeValue, animator]);
     return keyframes.length ? adjustedValue : paramValue;
 }

package/lib/sdk-nextjs/components/Article.js

@@ -11,7 +11,7 @@ const Section_1 = require("./Section/Section");
 const Item_1 = require("./items/Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const ArticleWrapper_1 = require("./ArticleWrapper");
+const Scene_1 = require("./Scene");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const WebGLContextManagerContext_1 = require("../provider/WebGLContextManagerContext");
 const effects_1 = require("@cntrl-site/effects");
@@ -31,7 +31,7 @@ const Article = ({ article, styles, keyframes }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
-    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
+    return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { id: article.id, styles: styles, children: (0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: (0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
                                     const data = {};
                                     return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
                                 }) }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `

package/lib/sdk-nextjs/components/{ArticleWrapper.d.ts → Scene.d.ts}

@@ -9,5 +9,5 @@ interface Props {
         startY: number;
     } | undefined;
 }
-export declare const ArticleWrapper: FC<PropsWithChildren<Props>>;
+export declare const Scene: FC<PropsWithChildren<Props>>;
 export {};

package/lib/sdk-nextjs/components/{ArticleWrapper.js → Scene.js}

@@ -1,20 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArticleWrapper = void 0;
+exports.Scene = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
-const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
+const Scene = ({ children, id, styles: sceneStyles }) => {
     var _a;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
     const sceneRef = (0, react_1.useRef)(null);
     const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
-    const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
+    const { isControlledTransitioning, isSettling, isInstantTransitioning, stateValue } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
         isControlledTransitioning: state.matches('transitioning'),
         isSettling: state.matches('settling'),
         isInstantTransitioning: state.matches('instant_transitioning'),
+        stateValue: state.value
     }));
     const type = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
         const { transition } = state.context;
@@ -136,9 +137,9 @@ const ArticleWrapper = ({ children, id, styles: sceneStyles }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    return ((0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'auto', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: `translate3d(${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.x}px, ${sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.y}px, 0)`, transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1 }), children: children }) }));
 };
-exports.ArticleWrapper = ArticleWrapper;
+exports.Scene = Scene;
 function isTransitionDisabled(transitionReady) {
     return !transitionReady.north && !transitionReady.east && !transitionReady.south && !transitionReady.west;
 }
@@ -153,7 +154,7 @@ function canTransition(direction, el) {
         case 'north':
             return el.scrollTop === 0;
         case 'south': {
-            const isAllowed = el.scrollTop + el.clientHeight >= el.scrollHeight;
+            const isAllowed = el.scrollTop + el.clientHeight + 1 >= el.scrollHeight;
             return isAllowed;
         }
         case 'west':

package/lib/sdk-nextjs/components/Section/Section.js

@@ -35,24 +35,24 @@ const Section = ({ section, data, children }) => {
                                 transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
                                 height: media.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)
                             }, children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            display: ${hidden ? 'none' : 'block'};
-            background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
+        .section-${section.id} {
+          height: ${getSectionHeight(height)};
+          position: relative;
+          display: ${hidden ? 'none' : 'block'};
+          background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
+        }
+        .section-background-overlay-${section.id} {
+          height: ${getSectionHeight(height)};
+          width: 100%;
+          position: relative;
+          overflow: clip;
+        }
+        .section-background-wrapper-${section.id} {
+          transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+          position: relative;
+          height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+          width: 100%;
+        }
       ` })] }));
 };
 exports.Section = Section;

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../EventEmitter';
 interface EventMap {
+    'init': undefined;
     'scroll': undefined;
     'resize': DOMRect;
 }
@@ -11,6 +12,8 @@ export declare class ArticleRectObserver extends EventEmitter<EventMap> {
     private animationFrame;
     private parent;
     private sectionsScrollMap;
+    private previousParentWidth;
+    private isInitialized;
     constructor();
     get scroll(): number;
     getSectionScroll(sectionId: string): number;

package/lib/sdk-nextjs/utils/ArticleRectManager/ArticleRectObserver.js

@@ -9,12 +9,14 @@ const resize_observer_polyfill_1 = __importDefault(require("resize-observer-poly
 class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     constructor() {
         super();
-        this.articleWidth = 0;
+        this.articleWidth = 1;
         this.registry = new Map();
         this.scrollPos = window.scrollY;
         this.animationFrame = NaN;
         this.parent = undefined;
         this.sectionsScrollMap = new Map();
+        this.previousParentWidth = null;
+        this.isInitialized = false;
         this.handleScroll = (scroll) => {
             this.setScroll(scroll / this.articleWidth);
         };
@@ -41,8 +43,17 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
     }
     init(parent) {
         this.parent = parent;
+        const scrollableParent = parent.parentElement;
+        const parentBoundary = parent.getBoundingClientRect();
+        if (!scrollableParent) {
+            throw new Error('Scrollable parent not found');
+        }
+        const articleWidth = parentBoundary.width;
+        this.articleWidth = articleWidth;
+        this.previousParentWidth = articleWidth;
+        this.setScroll(scrollableParent.scrollTop / articleWidth);
         const onScroll = () => {
-            this.handleScroll(window.scrollY);
+            this.handleScroll(scrollableParent.scrollTop);
             if (!isNaN(this.animationFrame))
                 return;
             this.animationFrame = window.requestAnimationFrame(() => {
@@ -50,10 +61,21 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
                 this.emit('scroll', undefined);
             });
         };
-        window.addEventListener('scroll', onScroll);
+        scrollableParent.addEventListener('scroll', onScroll);
+        for (const sectionId of this.registry.keys()) {
+            const el = this.registry.get(sectionId);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+        }
+        this.isInitialized = true;
+        this.emit('init', undefined);
         return () => {
             this.parent = undefined;
-            window.removeEventListener('scroll', onScroll);
+            this.isInitialized = false;
+            this.previousParentWidth = null;
+            scrollableParent.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
                 this.animationFrame = NaN;
@@ -72,7 +94,14 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         if (!this.parent)
             return;
         const parentBoundary = this.parent.getBoundingClientRect();
-        this.articleWidth = parentBoundary.width;
+        const newWidth = parentBoundary.width;
+        if (!this.isInitialized || this.previousParentWidth === newWidth) {
+            this.articleWidth = newWidth;
+            this.previousParentWidth = newWidth;
+            return;
+        }
+        this.articleWidth = newWidth;
+        this.previousParentWidth = newWidth;
         this.setScroll(window.scrollY / this.articleWidth);
         this.emit('resize', parentBoundary);
         for (const sectionId of this.registry.keys()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",