@gxpl/sdk 0.0.20 → 0.0.21

package/lib/sdk/schemas/project/Project.schema.js

@@ -1,31 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProjectSchema = exports.FixedLayerSchema = void 0;
+exports.ProjectSchema = void 0;
 const zod_1 = require("zod");
 const Fonts_1 = require("../../types/project/Fonts");
-const Item_schema_1 = require("../article/Item.schema");
-const Section_schema_1 = require("../article/Section.schema");
-const Interaction_schema_1 = require("../article/Interaction.schema");
-const FixedLayerTransitionSchema = zod_1.z.object({
-    from: zod_1.z.string(),
-    to: zod_1.z.string(),
-    itemsTransitions: zod_1.z.record(zod_1.z.string(), zod_1.z.record(zod_1.z.string(), zod_1.z.object({
-        timing: zod_1.z.string(),
-        duration: zod_1.z.number(),
-        delay: zod_1.z.number()
-    }))),
-    id: zod_1.z.string()
-});
-exports.FixedLayerSchema = zod_1.z.object({
-    id: zod_1.z.string().min(1),
-    items: zod_1.z.array(Item_schema_1.ItemSchema),
-    name: zod_1.z.string().optional(),
-    hidden: zod_1.z.boolean(),
-    color: zod_1.z.nullable(zod_1.z.string()),
-    media: Section_schema_1.SectionMediaSchema.optional(),
-    interactions: zod_1.z.array(Interaction_schema_1.InteractionSchema),
-    transitions: zod_1.z.array(FixedLayerTransitionSchema),
-});
 exports.ProjectSchema = zod_1.z.object({
     id: zod_1.z.string().min(1),
     html: zod_1.z.object({
@@ -63,7 +40,5 @@ exports.ProjectSchema = zod_1.z.object({
         to: zod_1.z.string().min(1),
         type: zod_1.z.enum(['slide', 'fade']),
         direction: zod_1.z.enum(['north', 'east', 'south', 'west'])
-    })),
-    foreground: exports.FixedLayerSchema,
-    background: exports.FixedLayerSchema
+    }))
 });

package/lib/sdk/types/article/Item.d.ts

@@ -198,10 +198,6 @@ interface UrlLink {
     url: string;
     target: string;
 }
-interface UrlLink {
-    url: string;
-    target: string;
-}
 interface ClickLink {
     value: string;
     animation: 'fade' | 'slide' | 'reveal';

package/lib/sdk/types/project/Project.d.ts

@@ -2,7 +2,6 @@ import { Relation } from './Relation';
 import { Fonts } from './Fonts';
 import { Meta } from './Meta';
 import { Page } from './Page';
-import { TFixedLayer } from './FixedLayer';
 export interface AdditionalHTML {
     head: string;
     afterBodyOpen: string;
@@ -16,6 +15,4 @@ export interface Project {
     pages: Page[];
     fonts: Fonts;
     relations: Relation[];
-    foreground: TFixedLayer;
-    background: TFixedLayer;
 }

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

@@ -9,19 +9,18 @@ const html_react_parser_1 = __importDefault(require("html-react-parser"));
 const Head_1 = require("./Head");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
 const Scenes_1 = require("./Scenes/Scenes");
-const FixedLayer_1 = require("./fixedLayers/FixedLayer");
 const Page = ({ project, articlesData }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const startScene = Object.keys(articlesData)[0];
     const scenes = Object.values(articlesData).map(({ article }) => ({ id: article.id }));
     const { relations } = project;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsxs)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project }), afterBodyOpen, (0, jsx_runtime_1.jsx)(TransitionMachineContext_1.TransitionMachineContext.Provider, { options: {
                     input: {
                         startScene,
                         relations,
                         scenes,
                     }
-                }, children: [project.foreground && !project.foreground.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.foreground, type: "foreground" }), (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }), project.background && !project.background.hidden && (0, jsx_runtime_1.jsx)(FixedLayer_1.FixedLayer, { layer: project.background, type: "background" })] }), beforeBodyClose] }));
+                }, children: (0, jsx_runtime_1.jsx)(Scenes_1.Scenes, { articlesData: articlesData }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.d.ts

@@ -4,7 +4,6 @@ interface ChildItemProps {
     item: ItemAny;
     sectionId: string;
     isParentVisible?: boolean;
-    isInFixedLayer?: boolean;
 }
 export declare const CompoundChild: FC<ChildItemProps>;
 export {};

package/lib/sdk-nextjs/components/items/CompoundItem/CompoundChild.js

@@ -21,7 +21,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
 const useItemArea_1 = require("../useItemArea");
 const ArticleItemType_1 = require("../../../../sdk/types/article/ArticleItemType");
 const noop = () => null;
-const CompoundChild = ({ item, sectionId, isParentVisible = true, isInFixedLayer = false }) => {
+const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const id = (0, react_1.useId)();
     const exemplary = (0, useExemplary_1.useExemplary)();
@@ -71,7 +71,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true, isInFixedLayer
         } }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                     transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none',
                     transform: `scale(${scale})`,
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { isInFixedLayer: isInFixedLayer, item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .item-${item.id}-inner {
           width: 100%;
           height: 100%;

package/lib/sdk-nextjs/components/items/GroupItem/GroupItem.js

@@ -14,7 +14,7 @@ const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const CompoundChild_1 = require("../CompoundItem/CompoundChild");
-const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound, isInFixedLayer }) => {
+const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -30,7 +30,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { isInFixedLayer: isInFixedLayer, item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, isInFixedLayer: isInFixedLayer, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/sdk-nextjs/components/items/Item.d.ts

@@ -9,14 +9,12 @@ export interface ItemProps<I extends ItemAny> {
     interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
     onVisibilityChange: (isVisible: boolean) => void;
     isInCompound?: boolean;
-    isInFixedLayer?: boolean;
 }
 export interface ItemWrapperProps {
     item: ItemAny;
     sectionId: string;
     articleHeight?: number;
     isInGroup?: boolean;
-    isInFixedLayer?: boolean;
     isParentVisible?: boolean;
 }
 export declare const Item: FC<ItemWrapperProps>;

package/lib/sdk-nextjs/components/items/Item.js

@@ -31,7 +31,7 @@ const stickyFix = `
   transform: translate3d(0, 0, 0);
 `;
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false, isInFixedLayer = false }) => {
+const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const itemWrapperRef = (0, react_1.useRef)(null);
     const itemInnerRef = (0, react_1.useRef)(null);
@@ -42,7 +42,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
-    const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id, isInFixedLayer);
+    const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
     const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
     const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
     const [isDraggingActive, setIsDraggingActive] = (0, react_1.useState)(false);
@@ -118,7 +118,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     ? 'grab'
                                     : hasClickTriggers
                                         ? 'pointer'
-                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, isInFixedLayer: isInFixedLayer, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
             .item-${item.id} {
               position: ${item.sticky ? 'sticky' : 'absolute'};
               top: ${item.sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(item.area.top - item.sticky.from, sectionHeight, item.area.anchorSide)}` : 0};

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

@@ -1,2 +1,2 @@
 import { ItemInteractionCtrl } from './types';
-export declare function useItemInteractionCtrl(itemId: string, isInFixedLayer?: boolean): ItemInteractionCtrl | undefined;
+export declare function useItemInteractionCtrl(itemId: string): ItemInteractionCtrl | undefined;

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

@@ -4,12 +4,9 @@ exports.useItemInteractionCtrl = useItemInteractionCtrl;
 const react_1 = require("react");
 const ItemInteractionCtrl_1 = require("./ItemInteractionCtrl");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
-const FixedLayerTransitionsProvider_1 = require("../fixedLayers/FixedLayerTransitionsProvider");
-function useItemInteractionCtrl(itemId, isInFixedLayer = false) {
+function useItemInteractionCtrl(itemId) {
     const [_, triggerRender] = (0, react_1.useState)(0);
-    const interactionsRegistry = (0, InteractionsContext_1.useInteractionsRegistry)();
-    const fixedLayerTransitionsRegistry = (0, FixedLayerTransitionsProvider_1.useFixedLayerTransitionsRegistry)();
-    const registry = isInFixedLayer ? fixedLayerTransitionsRegistry : interactionsRegistry;
+    const registry = (0, InteractionsContext_1.useInteractionsRegistry)();
     const ctrl = (0, react_1.useMemo)(() => {
         if (!registry)
             return;

package/package.json

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

package/lib/sdk/types/project/FixedLayer.d.ts

@@ -1,27 +0,0 @@
-import { Interaction } from '../article/Interaction';
-import { ItemAny } from '../article/Item';
-import { SectionMedia } from '../article/Section';
-type ItemIdentifier = string;
-type PropertyName = string;
-export type TransitionTiming = {
-    timing: string;
-    duration: number;
-    delay: number;
-};
-export type FixedLayerTransition = {
-    from: string;
-    to: string;
-    itemsTransitions: Record<ItemIdentifier, Record<PropertyName, TransitionTiming>>;
-    id: string;
-};
-export interface TFixedLayer {
-    id: string;
-    name?: string;
-    hidden: boolean;
-    items: ItemAny[];
-    color: string | null;
-    media?: SectionMedia;
-    transitions: FixedLayerTransition[];
-    interactions: Interaction[];
-}
-export {};

package/lib/sdk/types/project/FixedLayer.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/lib/sdk-nextjs/components/fixedLayers/FixedLayer.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import { TFixedLayer } from '../../../sdk/types/project/FixedLayer';
-interface Props {
-    layer: TFixedLayer;
-    type: 'background' | 'foreground';
-}
-export declare const FixedLayer: FC<Props>;
-export {};

package/lib/sdk-nextjs/components/fixedLayers/FixedLayer.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FixedLayer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ArticleRectContext_1 = require("../../provider/ArticleRectContext");
-const useArticleRectObserver_1 = require("../../utils/ArticleRectManager/useArticleRectObserver");
-const WebGLContextManagerContext_1 = require("../../provider/WebGLContextManagerContext");
-const effects_1 = require("@cntrl-site/effects");
-const style_1 = __importDefault(require("styled-jsx/style"));
-const Item_1 = require("../items/Item");
-const FixedLayerTransitionsProvider_1 = require("../../fixedLayers/FixedLayerTransitionsProvider");
-const FixedLayer = ({ layer, type }) => {
-    const fixedLayerRef = (0, react_1.useRef)(null);
-    const id = (0, react_1.useId)();
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(fixedLayerRef.current);
-    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.jsx)(FixedLayerTransitionsProvider_1.FixedLayerTransitionsProvider, { fixedLayer: layer, children: (0, jsx_runtime_1.jsxs)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: [(0, jsx_runtime_1.jsx)("div", { className: `fixed-layer-${type}`, ref: fixedLayerRef, children: layer.items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { isInFixedLayer: true, item: item, sectionId: layer.id }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-          .fixed-layer-${type} {
-            position: fixed;
-            top: 0;
-            pointer-events: none;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            overflow: clip;
-            ${type === 'foreground' ? 'z-index: 1;' : 'z-index: -1;'}
-          }
-        ` })] }) }) }));
-};
-exports.FixedLayer = FixedLayer;

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsProvider.d.ts

@@ -1,10 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { TFixedLayer } from '../../sdk/types/project/FixedLayer';
-import { FixedLayerTransitionsRegistry } from './FixedLayerTransitionsRegistry';
-export declare const FixedLayerTransitionsContext: import("react").Context<FixedLayerTransitionsRegistry | undefined>;
-interface Props {
-    fixedLayer: TFixedLayer;
-}
-export declare const FixedLayerTransitionsProvider: FC<PropsWithChildren<Props>>;
-export declare function useFixedLayerTransitionsRegistry(): FixedLayerTransitionsRegistry | undefined;
-export {};

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsProvider.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FixedLayerTransitionsProvider = exports.FixedLayerTransitionsContext = void 0;
-exports.useFixedLayerTransitionsRegistry = useFixedLayerTransitionsRegistry;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
-const FixedLayerTransitionsRegistry_1 = require("./FixedLayerTransitionsRegistry");
-exports.FixedLayerTransitionsContext = (0, react_1.createContext)(undefined);
-const FixedLayerTransitionsProvider = ({ fixedLayer, children }) => {
-    const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
-    const { isSettling, isActive, startScene } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
-        startScene: state.context.input.startScene,
-        isSettling: state.matches('settling'),
-        isActive: state.matches('active'),
-    }));
-    const transitionsRegistry = (0, react_1.useMemo)(() => new FixedLayerTransitionsRegistry_1.FixedLayerTransitionsRegistry(fixedLayer, startScene), [fixedLayer, startScene]);
-    (0, react_1.useEffect)(() => {
-        if (isSettling && actorRef) {
-            const { context } = actorRef.getSnapshot();
-            const { transition } = context;
-            if (!transition || transition.stage !== 'settling')
-                return;
-            transitionsRegistry.notifyPrepareTransition(transition.to);
-        }
-    }, [isSettling, actorRef, transitionsRegistry]);
-    (0, react_1.useEffect)(() => {
-        if (isActive && actorRef) {
-            const { context } = actorRef.getSnapshot();
-            const { scenes } = context;
-            const [activeScene] = scenes;
-            transitionsRegistry.notifyOnActiveSceneChange(activeScene.id);
-        }
-    }, [isActive, actorRef, transitionsRegistry]);
-    return ((0, jsx_runtime_1.jsx)(exports.FixedLayerTransitionsContext.Provider, { value: transitionsRegistry, children: children }));
-};
-exports.FixedLayerTransitionsProvider = FixedLayerTransitionsProvider;
-function useFixedLayerTransitionsRegistry() {
-    const registry = (0, react_1.useContext)(exports.FixedLayerTransitionsContext);
-    return registry;
-}

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsRegistry.d.ts

@@ -1,38 +0,0 @@
-import { InteractionItemTrigger } from '../../sdk/types/article/Interaction';
-import { TFixedLayer } from '../../sdk/types/project/FixedLayer';
-import { InteractionsRegistryPort, ItemInteractionCtrl } from '../interactions/types';
-export declare class FixedLayerTransitionsRegistry implements InteractionsRegistryPort {
-    private items;
-    private ctrls;
-    private interactions;
-    private transitions;
-    private activeSceneId;
-    private activeTransition;
-    private itemsStages;
-    constructor(fixedLayer: TFixedLayer, startSceneId: string);
-    register(itemId: ItemId, ctrl: ItemInteractionCtrl): void;
-    getStatePropsForItem(itemId: string): StateProps;
-    private getTransitionDetails;
-    getItemAvailableTriggers(itemId: string): Set<TriggerType>;
-    private unpackItems;
-    private getNestedItems;
-    private getDefaultItemStages;
-    notifyItemTrigger(itemId: string, triggerType: TriggerType): void;
-    notifyOnActiveSceneChange(sceneId: SceneId): void;
-    notifyPrepareTransition(to: SceneId): void;
-    notifyTransitionStartForItems(activeStateId: string): void;
-    notifyTransitionEnd(itemId: string): void;
-    private notifyItemCtrlsChange;
-}
-type TriggerType = InteractionItemTrigger['type'];
-type SceneId = string;
-type ItemId = string;
-type StateProps = Record<string, {
-    value?: string | number;
-    transition?: {
-        timing: string;
-        duration: number;
-        delay: number;
-    };
-}>;
-export {};

package/lib/sdk-nextjs/fixedLayers/FixedLayerTransitionsRegistry.js

@@ -1,164 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FixedLayerTransitionsRegistry = void 0;
-const ArticleItemType_1 = require("../../sdk/types/article/ArticleItemType");
-const isItemType_1 = require("../utils/isItemType");
-const defaultTransitionDetails = {
-    timing: 'ease-in-out',
-    duration: 300,
-    delay: 0
-};
-class FixedLayerTransitionsRegistry {
-    constructor(fixedLayer, startSceneId) {
-        var _a, _b;
-        this.ctrls = new Map();
-        this.items = this.unpackItems(fixedLayer);
-        const interactions = (_a = fixedLayer.interactions) !== null && _a !== void 0 ? _a : [];
-        this.interactions = interactions;
-        this.transitions = (_b = fixedLayer.transitions) !== null && _b !== void 0 ? _b : [];
-        this.activeSceneId = startSceneId;
-        this.itemsStages = this.getDefaultItemStages();
-    }
-    register(itemId, ctrl) {
-        this.ctrls.set(itemId, ctrl);
-    }
-    getStatePropsForItem(itemId) {
-        var _a, _b;
-        const { items } = this;
-        const item = items.find((item) => item.id === itemId);
-        const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
-        itemStages.sort((a, b) => a.updated - b.updated);
-        const itemStyles = {};
-        for (const stage of itemStages) {
-            if (stage.type === 'active') {
-                const params = (_a = item.state[stage.sceneId]) !== null && _a !== void 0 ? _a : {};
-                for (const [key, stateDetails] of Object.entries(params)) {
-                    itemStyles[key] = {
-                        value: stateDetails.value
-                    };
-                }
-            }
-            if (stage.type === 'transitioning') {
-                const activeStateId = stage.to;
-                const params = (_b = item.state[activeStateId]) !== null && _b !== void 0 ? _b : {};
-                for (const [key, stateDetails] of Object.entries(params)) {
-                    const transitionDetails = this.getTransitionDetails(itemId, key);
-                    if (!transitionDetails)
-                        continue;
-                    itemStyles[key] = {
-                        value: stateDetails.value,
-                        transition: {
-                            timing: transitionDetails.timing,
-                            duration: transitionDetails.duration,
-                            delay: transitionDetails.delay
-                        }
-                    };
-                }
-            }
-        }
-        return itemStyles;
-    }
-    getTransitionDetails(itemId, key) {
-        var _a;
-        if (!this.activeTransition)
-            return defaultTransitionDetails;
-        this.activeTransition;
-        const itemTransitions = this.activeTransition.itemsTransitions[itemId];
-        if (!itemTransitions)
-            return defaultTransitionDetails;
-        return (_a = itemTransitions[key]) !== null && _a !== void 0 ? _a : defaultTransitionDetails;
-    }
-    getItemAvailableTriggers(itemId) {
-        return new Set();
-    }
-    unpackItems(layer) {
-        const items = this.getNestedItems(layer.items);
-        return items;
-    }
-    getNestedItems(items) {
-        var _a;
-        const allItems = [];
-        for (const item of items) {
-            if ((0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, ArticleItemType_1.ArticleItemType.Compound)) {
-                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
-                const nestedItems = this.getNestedItems(groupChildren);
-                allItems.push(...nestedItems);
-            }
-            allItems.push(item);
-        }
-        return allItems;
-    }
-    getDefaultItemStages() {
-        const timestamp = Date.now();
-        const { items } = this;
-        const stages = [];
-        for (const item of items) {
-            const itemStatesMap = item.state;
-            if (!itemStatesMap)
-                continue;
-            const itemSceneState = item.state[this.activeSceneId];
-            if (!itemSceneState)
-                continue;
-            stages.push({
-                itemId: item.id,
-                type: 'active',
-                sceneId: this.activeSceneId,
-                updated: timestamp
-            });
-        }
-        return stages;
-    }
-    notifyItemTrigger(itemId, triggerType) {
-        throw new Error('Not implemented');
-    }
-    notifyOnActiveSceneChange(sceneId) {
-        this.itemsStages = this.itemsStages.map((stage) => {
-            return {
-                itemId: stage.itemId,
-                type: 'transitioning',
-                from: this.activeSceneId,
-                to: sceneId,
-                updated: Date.now()
-            };
-        });
-        const items = this.itemsStages.map((stage) => stage.itemId);
-        this.notifyItemCtrlsChange(items);
-        this.notifyTransitionStartForItems(sceneId);
-        this.activeSceneId = sceneId;
-    }
-    notifyPrepareTransition(to) {
-        this.activeTransition = this.transitions.find((transition) => transition.to === to && transition.from === this.activeSceneId);
-    }
-    notifyTransitionStartForItems(activeStateId) {
-        var _a, _b;
-        const itemsIds = this.itemsStages.map((stage) => stage.itemId);
-        for (const itemId of itemsIds) {
-            const ctrl = this.ctrls.get(itemId);
-            const item = this.items.find((item) => item.id === itemId);
-            const keys = Object.keys((_a = item.state[activeStateId]) !== null && _a !== void 0 ? _a : {});
-            (_b = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _b === void 0 ? void 0 : _b.call(ctrl, keys);
-        }
-    }
-    notifyTransitionEnd(itemId) {
-        var _a;
-        const timestamp = Date.now();
-        this.itemsStages = this.itemsStages.map((stage) => {
-            if (stage.itemId !== itemId || stage.type !== 'transitioning')
-                return stage;
-            return {
-                itemId,
-                type: 'active',
-                sceneId: stage.to,
-                updated: timestamp
-            };
-        });
-        (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
-    }
-    notifyItemCtrlsChange(itemsIds) {
-        var _a;
-        for (const itemId of itemsIds) {
-            (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
-        }
-    }
-}
-exports.FixedLayerTransitionsRegistry = FixedLayerTransitionsRegistry;