@gxpl/sdk 0.0.40 → 0.0.42

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

@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractionsRegistry = void 0;
 const isItemType_1 = require("../utils/isItemType");
 const ArticleItemType_1 = require("../../sdk/types/article/ArticleItemType");
+const ulid_1 = require("ulid");
 class InteractionsRegistry {
-    constructor(article) {
-        var _a;
+    constructor(article, isStartSceneInitialized) {
         this.ctrls = new Map();
+        this.inTransitionDefaultStateId = (0, ulid_1.ulid)();
+        this.outTransitionStartStateId = (0, ulid_1.ulid)();
+        this.isStartSceneInitialized = isStartSceneInitialized;
         this.items = this.unpackItems(article);
-        const interactions = (_a = article.interactions) !== null && _a !== void 0 ? _a : [];
+        const interactions = [...article.interactions, this.getOutTransitionInteraction(), this.getInTransitionInteraction()];
         const activeStatesIds = interactions.reduce((map, inter) => {
             var _a;
             const activeStateId = (_a = inter.states.find((state) => state.id !== inter.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
@@ -104,6 +107,72 @@ class InteractionsRegistry {
         }
         return available;
     }
+    notifySceneInTransition() {
+        var _a;
+        const transitioningItems = (_a = this.stateItemsIdsMap['in']) !== null && _a !== void 0 ? _a : [];
+        this.setCurrentStateForInteraction('in-transition', this.inTransitionDefaultStateId);
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.interactionId !== 'in-transition')
+                return stage;
+            return {
+                itemId: stage.itemId,
+                interactionId: stage.interactionId,
+                type: 'transitioning',
+                from: 'in',
+                to: this.inTransitionDefaultStateId,
+                direction: 'out',
+                updated: timestamp
+            };
+        });
+        const itemsToNotify = new Set(transitioningItems);
+        this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+        this.notifyTransitionStartForItems(transitioningItems, this.inTransitionDefaultStateId);
+    }
+    notifySceneOutTransition() {
+        var _a;
+        const transitioningItems = (_a = this.stateItemsIdsMap['out']) !== null && _a !== void 0 ? _a : [];
+        this.setCurrentStateForInteraction('out-transition', 'out');
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.interactionId !== 'out-transition')
+                return stage;
+            return {
+                itemId: stage.itemId,
+                interactionId: stage.interactionId,
+                type: 'transitioning',
+                from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                to: 'out',
+                direction: 'in',
+                updated: timestamp
+            };
+        });
+        const itemsToNotify = new Set(transitioningItems);
+        this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+        this.notifyTransitionStartForItems(transitioningItems, 'out');
+    }
+    notifySceneOutTransitionCancel() {
+        var _a;
+        const transitioningItems = (_a = this.stateItemsIdsMap['out']) !== null && _a !== void 0 ? _a : [];
+        this.setCurrentStateForInteraction('out-transition', this.outTransitionStartStateId);
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.interactionId !== 'out-transition')
+                return stage;
+            return {
+                itemId: stage.itemId,
+                interactionId: stage.interactionId,
+                type: 'transitioning',
+                from: 'out',
+                to: this.outTransitionStartStateId,
+                direction: 'out',
+                updated: timestamp
+            };
+        });
+        const itemsToNotify = new Set(transitioningItems);
+        this.notifyItemCtrlsChange(Array.from(itemsToNotify));
+        this.notifyTransitionStartForItems(transitioningItems, this.outTransitionStartStateId);
+    }
     notifyLoad() {
         var _a, _b;
         const timestamp = Date.now();
@@ -336,6 +405,17 @@ class InteractionsRegistry {
             if (!itemStatesMap)
                 continue;
             for (const stateId of Object.keys(itemStatesMap)) {
+                if (stateId === 'in' && this.isStartSceneInitialized) {
+                    stages.push({
+                        itemId: item.id,
+                        interactionId: 'in-transition',
+                        type: 'active',
+                        isStartState: false,
+                        updated: timestamp,
+                        stateId: 'in'
+                    });
+                    continue;
+                }
                 const interactionId = this.activeStateIdInteractionIdMap[stateId];
                 if (!interactionId)
                     continue;
@@ -351,5 +431,22 @@ class InteractionsRegistry {
         }
         return stages;
     }
+    getOutTransitionInteraction() {
+        return {
+            id: 'out-transition',
+            triggers: [],
+            states: [{ id: this.outTransitionStartStateId }, { id: 'out' }],
+            startStateId: this.outTransitionStartStateId
+        };
+    }
+    getInTransitionInteraction() {
+        const startStateId = 'in';
+        return {
+            id: 'in-transition',
+            triggers: [],
+            states: [{ id: startStateId }, { id: this.inTransitionDefaultStateId }],
+            startStateId: this.inTransitionDefaultStateId
+        };
+    }
 }
 exports.InteractionsRegistry = InteractionsRegistry;

package/lib/sdk-nextjs/provider/InOutTransitionContext.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+type InOutTransitionContextType = {
+    isStartSceneInitialized: boolean;
+    setIsStartSceneInitialized: (isStartSceneInitialized: boolean) => void;
+};
+export declare const InOutTransitionContext: import("react").Context<InOutTransitionContextType>;
+export declare const InOutTransitionProvider: FC<PropsWithChildren>;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InOutTransitionProvider = exports.InOutTransitionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.InOutTransitionContext = (0, react_1.createContext)({
+    isStartSceneInitialized: false,
+    setIsStartSceneInitialized: () => { }
+});
+const InOutTransitionProvider = ({ children }) => {
+    const [isStartSceneInitialized, setIsStartSceneInitialized] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(exports.InOutTransitionContext.Provider, { value: { isStartSceneInitialized, setIsStartSceneInitialized }, children: children }));
+};
+exports.InOutTransitionProvider = InOutTransitionProvider;

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

@@ -6,11 +6,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const ArticleRectContext_1 = require("./ArticleRectContext");
+const InOutTransitionContext_1 = require("./InOutTransitionContext");
+const TransitionMachineContext_1 = require("./TransitionMachineContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const startScene = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => (state.context.input.startScene));
+    const { isStartSceneInitialized, setIsStartSceneInitialized } = (0, react_1.useContext)(InOutTransitionContext_1.InOutTransitionContext);
     const registry = (0, react_1.useMemo)(() => {
-        return new InteractionsRegistry_1.InteractionsRegistry(article);
+        return new InteractionsRegistry_1.InteractionsRegistry(article, isStartSceneInitialized);
+        // do not add isStartSceneInitialized to the dependencies array, it will cause infinite re-render
     }, [article]);
     (0, react_1.useEffect)(() => {
         if (!registry || !articleRectObserver)
@@ -22,6 +27,9 @@ const InteractionsProvider = ({ article, children }) => {
         return articleRectObserver.on('scroll', handleScroll);
     }, [registry, articleRectObserver]);
     const notifyLoad = (0, react_1.useCallback)(() => {
+        if (startScene === article.id) {
+            setIsStartSceneInitialized(true);
+        }
         if (!registry)
             return;
         requestAnimationFrame(() => {
@@ -29,7 +37,7 @@ const InteractionsProvider = ({ article, children }) => {
                 registry.notifyLoad();
             }, 0);
         });
-    }, [registry]);
+    }, [registry, startScene, article.id]);
     (0, react_1.useEffect)(() => {
         if (document.readyState === 'complete') {
             notifyLoad();