@gxpl/sdk 0.0.49 → 0.0.50

package/lib/sdk-nextjs/interactions/InteractionsRegistry.d.ts

@@ -4,6 +4,7 @@ import { Article } from '../../sdk/types/article/Article';
 export declare class InteractionsRegistry implements InteractionsRegistryPort {
     private ctrls;
     private items;
+    private articleWidth;
     private interactions;
     private stateItemsIdsMap;
     private interactionStateMap;
@@ -14,6 +15,7 @@ export declare class InteractionsRegistry implements InteractionsRegistryPort {
     private activeStateIdInteractionIdMap;
     constructor(article: Article, isStartSceneInitialized: boolean);
     register(itemId: ItemId, ctrl: ItemInteractionCtrl): void;
+    setArticleWidth(width: number): void;
     getStatePropsForItem(itemId: string): StateProps;
     getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
     notifySceneInTransition(): void;

package/lib/sdk-nextjs/interactions/InteractionsRegistry.js

@@ -7,6 +7,7 @@ const ulid_1 = require("ulid");
 class InteractionsRegistry {
     constructor(article, isStartSceneInitialized) {
         this.ctrls = new Map();
+        this.articleWidth = 1;
         this.inTransitionDefaultStateId = (0, ulid_1.ulid)();
         this.outTransitionStartStateId = (0, ulid_1.ulid)();
         this.isStartSceneInitialized = isStartSceneInitialized;
@@ -52,6 +53,9 @@ class InteractionsRegistry {
     register(itemId, ctrl) {
         this.ctrls.set(itemId, ctrl);
     }
+    setArticleWidth(width) {
+        this.articleWidth = width;
+    }
     getStatePropsForItem(itemId) {
         var _a, _b, _c;
         const { items } = this;
@@ -225,7 +229,7 @@ class InteractionsRegistry {
             const matchingTrigger = interaction.triggers.find((trigger) => {
                 if (!('position' in trigger) || trigger.position === 0)
                     return false;
-                const triggerPosition = trigger.position * window.innerWidth;
+                const triggerPosition = trigger.position * this.articleWidth;
                 const isScrolledPastTrigger = triggerPosition < position;
                 if (!isScrolledPastTrigger && !trigger.isReverse)
                     return false;
@@ -234,7 +238,7 @@ class InteractionsRegistry {
             });
             if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
                 continue;
-            const triggerPosition = matchingTrigger.position * window.innerWidth;
+            const triggerPosition = matchingTrigger.position * this.articleWidth;
             const isScrolledPastTrigger = triggerPosition < position;
             const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
             this.setCurrentStateForInteraction(interaction.id, targetStateId);

package/lib/sdk-nextjs/provider/InteractionsContext.js

@@ -25,6 +25,15 @@ const InteractionsProvider = ({ article, children }) => {
         };
         return articleRectObserver.on('scroll', handleScroll);
     }, [registry, articleRectObserver]);
+    (0, react_1.useEffect)(() => {
+        if (!registry || !articleRectObserver)
+            return;
+        registry.setArticleWidth(articleRectObserver.width);
+        const handleResize = () => {
+            registry.setArticleWidth(articleRectObserver.width);
+        };
+        return articleRectObserver.on('resize', handleResize);
+    }, [registry, articleRectObserver]);
     const notifyLoad = (0, react_1.useCallback)(() => {
         if (startScene === article.id) {
             setIsStartSceneInitialized(true);

package/package.json

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