@gxpl/sdk 0.0.54 → 0.0.57

package/lib/sdk/transitions/utils/getTransitionParams.d.ts

@@ -0,0 +1,20 @@
+import { Relation } from './types';
+export declare function getTransitionParamsFromRelation(relation: Relation): {
+    type: "slide";
+    from: string;
+    to: string;
+    offset?: undefined;
+    mode?: undefined;
+} | {
+    offset: number;
+    mode: "normal" | "reverse";
+    type: "reveal";
+    from: string;
+    to: string;
+} | {
+    type: "fade";
+    from: string;
+    to: string;
+    offset?: undefined;
+    mode?: undefined;
+};

package/lib/sdk/transitions/utils/getTransitionParams.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransitionParamsFromRelation = getTransitionParamsFromRelation;
+function getTransitionParamsFromRelation(relation) {
+    if (relation.type === 'slide') {
+        return {
+            type: relation.type,
+            from: relation.from,
+            to: relation.to,
+        };
+    }
+    if (relation.type === 'reveal') {
+        return {
+            offset: relation.offset,
+            mode: relation.mode,
+            type: relation.type,
+            from: relation.from,
+            to: relation.to,
+        };
+    }
+    if (relation.type === 'fade') {
+        return {
+            type: relation.type,
+            from: relation.from,
+            to: relation.to,
+        };
+    }
+    throw new Error(`Unknown transition type`);
+}

package/lib/sdk/transitions/utils/types.d.ts

@@ -1,43 +1,83 @@
-export type Relation = {
-    type: 'slide' | 'fade';
+export type Direction = 'north' | 'east' | 'south' | 'west';
+type SlideRelation = {
+    to: string;
+    type: 'slide';
+    direction: Direction;
     from: string;
+};
+type FadeRelation = {
     to: string;
+    type: 'fade';
     direction: Direction;
+    from: string;
 };
-export type Direction = 'north' | 'east' | 'south' | 'west';
+type RevealRelation = {
+    to: string;
+    type: 'reveal';
+    direction: Direction;
+    offset: number;
+    mode: 'normal' | 'reverse';
+    from: string;
+};
+export type Relation = SlideRelation | FadeRelation | RevealRelation;
 export type Transition = PreparingTransition | ActiveTransition | InstantTransition | SettlingTransition;
 export type PreparingTransition = {
     stage: 'preparing';
     startX: number;
     startY: number;
 };
-export type ActiveTransition = {
+type ActiveTransitionBase = {
     stage: 'active';
-    direction: Direction;
-    duration?: number;
-    type: 'slide' | 'fade';
-    from: string;
-    to: string;
     startX: number;
     startY: number;
     currentX: number;
     currentY: number;
+    duration?: number;
+    from: string;
+    to: string;
+};
+type ActiveSlideTransition = ActiveTransitionBase & {
+    type: 'slide';
+    direction: Direction;
+};
+type ActiveFadeTransition = ActiveTransitionBase & {
+    type: 'fade';
+    direction: Direction;
+};
+type ActiveRevealTransition = ActiveTransitionBase & {
+    type: 'reveal';
+    direction: Direction;
+    offset: number;
+    mode: 'normal' | 'reverse';
 };
+export type ActiveTransition = ActiveSlideTransition | ActiveFadeTransition | ActiveRevealTransition;
 export type SettlingTransition = {
     stage: 'settling';
-    type: 'slide' | 'fade';
+    type: 'slide' | 'fade' | 'reveal';
     success: boolean;
     from: string;
     to: string;
 };
-export type InstantTransition = {
+type InstantTransitionBase = {
     stage: 'active';
-    type: 'slide' | 'fade';
     from: string;
     to: string;
-    direction?: Direction;
-    duration?: number;
+    duration: number;
+};
+export type InstantSlideTransition = {
+    type: 'slide';
+    direction: Direction;
+};
+export type InstantFadeTransition = {
+    type: 'fade';
+};
+export type InstantRevealTransition = {
+    type: 'reveal';
+    direction: Direction;
+    offset: number;
+    mode: 'normal' | 'reverse';
 };
+export type InstantTransition = InstantTransitionBase & (InstantSlideTransition | InstantFadeTransition | InstantRevealTransition);
 export type TransitionScene = {
     id: string;
     styles: TransitionSceneStyle;
@@ -48,4 +88,6 @@ export type TransitionSceneStyle = {
     x: number;
     y: number;
     opacity: number;
+    zIndex?: number;
 };
+export {};

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

@@ -198,12 +198,25 @@ interface UrlLink {
     url: string;
     target: string;
 }
-interface ClickLink {
-    value: string;
-    animation: 'fade' | 'slide' | 'reveal';
+interface ClickTransitionBase {
+    type: 'scene';
     duration: number;
+    value: string;
+}
+interface SlideLinkTransition extends ClickTransitionBase {
+    animation: 'slide';
+    direction: 'north' | 'west' | 'south' | 'east';
+}
+interface FadeLinkTransition extends ClickTransitionBase {
+    animation: 'fade';
+}
+interface RevealLinkTransition extends ClickTransitionBase {
+    animation: 'reveal';
     direction: 'north' | 'west' | 'south' | 'east';
+    offset: number;
+    mode: 'normal' | 'reverse';
 }
+export type ClickLink = SlideLinkTransition | FadeLinkTransition | RevealLinkTransition;
 export type VideoItem = Item<ArticleItemType.Video>;
 export type RectangleItem = Item<ArticleItemType.Rectangle>;
 export type ImageItem = Item<ArticleItemType.Image>;

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

@@ -1,8 +1,23 @@
-export interface Relation {
+type ArticleId = string;
+export type SlideRelation = {
+    to: ArticleId;
+    type: 'slide';
     from: ArticleId;
+    direction: 'north' | 'east' | 'south' | 'west';
+};
+export type FadeRelation = {
     to: ArticleId;
-    type: 'slide' | 'fade';
+    type: 'fade';
     direction: 'north' | 'east' | 'south' | 'west';
-}
-type ArticleId = string;
+    from: ArticleId;
+};
+export type RevealRelation = {
+    to: ArticleId;
+    type: 'reveal';
+    from: ArticleId;
+    direction: 'north' | 'east' | 'south' | 'west';
+    offset: number;
+    mode: 'normal' | 'reverse';
+};
+export type Relation = SlideRelation | FadeRelation | RevealRelation;
 export {};

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

@@ -12,6 +12,7 @@ const getAvailableTransitions_1 = require("../../../sdk/transitions/utils/getAva
 const style_1 = __importDefault(require("styled-jsx/style"));
 const ChevronIcon_1 = require("./ChevronIcon");
 const IframePreviewWindowContext_1 = require("./IframePreviewWindowContext");
+const getTransitionFromRelation_1 = require("../../../sdk/transitions/utils/getTransitionFromRelation");
 const Preview = ({ children, relations, startScene }) => {
     const id = (0, react_1.useId)();
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
@@ -22,14 +23,10 @@ const Preview = ({ children, relations, startScene }) => {
         if (!iframeRef || !iframeRef.contentWindow || !iframeRef.contentDocument)
             return;
         setIsTransitioning(true);
-        const transition = (0, findRelation_1.findRelation)(relations, activeScene, direction);
+        const relation = (0, findRelation_1.findRelation)(relations, activeScene, direction);
         const targetWindow = iframeRef.contentWindow;
-        const message = {
-            type: "TRANSITION_TRIGGER",
-            direction,
-            to: transition.to,
-            transitionType: transition.type,
-        };
+        const transition = (0, getTransitionFromRelation_1.getTransitionFromRelation)(relation);
+        const message = Object.assign({ type: "TRANSITION_TRIGGER", direction }, transition);
         targetWindow.postMessage(message, "*");
     };
     (0, react_1.useEffect)(() => {

package/lib/sdk-nextjs/components/Preview/PreviewListener.js

@@ -16,14 +16,8 @@ const PreviewListener = () => {
         const handleMessage = (e) => {
             var _a;
             if (((_a = e.data) === null || _a === void 0 ? void 0 : _a.type) === "TRANSITION_TRIGGER") {
-                const { direction, to, transitionType } = e.data;
-                actorRef.send({
-                    type: 'TRANSITION_TRIGGER',
-                    transition: transitionType,
-                    duration: 250,
-                    to,
-                    direction
-                });
+                const { direction, to, transition, offset, mode } = e.data;
+                actorRef.send(Object.assign(Object.assign({ type: 'TRANSITION_TRIGGER', transition, duration: 250, to }, (transition === 'reveal' || transition === 'slide' ? { direction } : {})), (transition === 'reveal' ? { offset, mode } : {})));
             }
         };
         iframePreviewWindow.addEventListener("message", handleMessage);

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

@@ -6,6 +6,7 @@ interface Props {
         x: number;
         y: number;
         opacity: number;
+        zIndex?: number;
         startX: number;
         startY: number;
     } | undefined;

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

@@ -7,7 +7,7 @@ const useLayoutDeviation_1 = require("../common/useLayoutDeviation");
 const TransitionMachineContext_1 = require("../provider/TransitionMachineContext");
 const InteractionsContext_1 = require("../provider/InteractionsContext");
 const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
-    var _a;
+    var _a, _b;
     const { layoutDeviation } = (0, useLayoutDeviation_1.useLayoutDeviation)();
     const interactionsRegistry = (0, InteractionsContext_1.useInteractionsRegistry)();
     const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
@@ -119,7 +119,7 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
                 throw new Error('Transition not found');
             }
             const { type } = transition;
-            const propType = type === 'slide' ? 'transform' : 'opacity';
+            const propType = type === 'slide' || type === 'reveal' ? 'transform' : 'opacity';
             if (e.propertyName !== propType)
                 return;
             actorRef.send({
@@ -140,7 +140,10 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
         const { transition } = context;
         if (!transition || transition.stage !== 'active')
             return;
-        const { to, direction } = transition;
+        const { to, type } = transition;
+        if (type === 'fade')
+            return;
+        const { direction } = transition;
         if (direction === 'north' && to === id) {
             scene.scrollTo({ top: scene.scrollHeight });
         }
@@ -172,8 +175,8 @@ const Scene = ({ children, id, styles: sceneStyles, elRef }) => {
         }
     }, [isSettling, actorRef, interactionsRegistry]);
     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: elRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', zIndex: 1, position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} ${duration !== null && duration !== void 0 ? duration : 250}ms ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', overflowX: 'clip', 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)
+    const transitionStyle = type === 'slide' || type === 'reveal' ? 'transform' : 'opacity';
+    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%', zIndex: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.zIndex) !== null && _a !== void 0 ? _a : 1, position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} ${duration !== null && duration !== void 0 ? duration : 250}ms ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', overflowX: 'clip', opacity: (_b = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _b !== void 0 ? _b : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
              }), children: children }) }));
 };
 exports.Scene = Scene;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
+const getTransitionFromLink_1 = require("../../../sdk/transitions/utils/getTransitionFromLink");
 const LinkWrapper = ({ link, children }) => {
     const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
     const validUrl = link && 'url' in link ? buildValidUrl(link.url) : '';
@@ -10,13 +11,8 @@ const LinkWrapper = ({ link, children }) => {
     const handleGoToScene = () => {
         if (!actorRef || !link || !('value' in link))
             return;
-        actorRef.send({
-            type: 'TRANSITION_TRIGGER',
-            transition: link.animation,
-            duration: link.duration,
-            to: link.value,
-            direction: link.direction
-        });
+        const transition = (0, getTransitionFromLink_1.getTransitionFromLink)(link);
+        actorRef.send(Object.assign({ type: 'TRANSITION_TRIGGER' }, transition));
     };
     if (validUrl) {
         return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children })));