@gxpl/sdk 0.0.29 → 0.0.30

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

@@ -18,8 +18,8 @@ const effects_1 = require("@cntrl-site/effects");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Keyframes_1 = require("../provider/Keyframes");
 const Article = ({ article, styles, keyframes }) => {
-    const articleRef = (0, react_1.useRef)(null);
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
+    const sceneRef = (0, react_1.useRef)(null);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(sceneRef.current);
     const id = (0, react_1.useId)();
     const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
@@ -31,10 +31,10 @@ 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)(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: `
+    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, elRef: sceneRef, 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: `
        .article {
          position: relative;
          overflow: clip;

package/lib/sdk-nextjs/components/Scene.d.ts

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 interface Props {
     id: string;
+    elRef: React.RefObject<HTMLDivElement>;
     styles: {
         x: number;
         y: number;

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

@@ -5,11 +5,10 @@ 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 Scene = ({ children, id, styles: sceneStyles }) => {
+const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
     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) => ({
         isControlledTransitioning: state.matches('transitioning'),
@@ -42,7 +41,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         const touch = e.touches[0];
         const { context } = actorRef.getSnapshot();
         const { transition, transitionReady } = context;
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!el || !transition || !('startX' in transition) || !('startY' in transition))
             return;
         const deltaX = touch.clientX - transition.startX;
@@ -85,7 +84,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         });
     }, [actorRef]);
     (0, react_1.useEffect)(() => {
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!el)
             return;
         el.addEventListener('touchstart', handleTouchStart, { passive: true });
@@ -98,7 +97,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         };
     }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
     (0, react_1.useEffect)(() => {
-        const el = sceneRef.current;
+        const el = elRef.current;
         if (!isSettling || !el)
             return;
         const handleTransitionEnd = (e) => {
@@ -121,7 +120,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
         };
     }, [actorRef, isSettling]);
     (0, react_1.useEffect)(() => {
-        const scene = sceneRef.current;
+        const scene = elRef.current;
         if (!isTransitioning || isTransitioningRef.current || !scene)
             return;
         isTransitioningRef.current = true;
@@ -136,7 +135,7 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
     }, [isTransitioning, actorRef, id]);
     const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
     const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
-    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: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', 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, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', 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, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
              }), children: children }) }));
 };
 exports.Scene = Scene;

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

@@ -59,7 +59,7 @@ exports.Section = Section;
 function getSectionHeight(heightData) {
     const { units, vhUnits, mode } = heightData;
     if (mode === Section_1.SectionHeightMode.ViewportHeightUnits)
-        return `${vhUnits}vh`;
+        return `${vhUnits}%`;
     if (mode === Section_1.SectionHeightMode.ControlUnits)
         return `${units * 100}vw`;
     return '0';

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

@@ -43,17 +43,13 @@ 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);
+        this.setScroll(parent.scrollTop / articleWidth);
         const onScroll = () => {
-            this.handleScroll(scrollableParent.scrollTop);
+            this.handleScroll(parent.scrollTop);
             if (!isNaN(this.animationFrame))
                 return;
             this.animationFrame = window.requestAnimationFrame(() => {
@@ -61,7 +57,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
                 this.emit('scroll', undefined);
             });
         };
-        scrollableParent.addEventListener('scroll', onScroll);
+        parent.addEventListener('scroll', onScroll);
         for (const sectionId of this.registry.keys()) {
             const el = this.registry.get(sectionId);
             if (!el)
@@ -75,7 +71,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             this.parent = undefined;
             this.isInitialized = false;
             this.previousParentWidth = null;
-            scrollableParent.removeEventListener('scroll', onScroll);
+            parent.removeEventListener('scroll', onScroll);
             if (!isNaN(this.animationFrame)) {
                 window.cancelAnimationFrame(this.animationFrame);
                 this.animationFrame = NaN;

package/package.json

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