@gxpl/sdk 0.0.26 → 0.0.28

package/lib/sdk/schemas/project/Project.schema.d.ts

@@ -332,12 +332,15 @@ export declare const ProjectSchema: z.ZodObject<{
     pages: z.ZodArray<z.ZodObject<{
         articleId: z.ZodString;
         id: z.ZodString;
+        isStartScene: z.ZodDefault<z.ZodBoolean>;
     }, "strip", z.ZodTypeAny, {
         id: string;
         articleId: string;
+        isStartScene: boolean;
     }, {
         id: string;
         articleId: string;
+        isStartScene?: boolean | undefined;
     }>, "many">;
     fonts: z.ZodObject<{
         google: z.ZodString;
@@ -1020,6 +1023,7 @@ export declare const ProjectSchema: z.ZodObject<{
     pages: {
         id: string;
         articleId: string;
+        isStartScene: boolean;
     }[];
     fonts: {
         custom: {
@@ -1166,6 +1170,7 @@ export declare const ProjectSchema: z.ZodObject<{
     pages: {
         id: string;
         articleId: string;
+        isStartScene?: boolean | undefined;
     }[];
     fonts: {
         custom: {

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

@@ -43,7 +43,8 @@ exports.ProjectSchema = zod_1.z.object({
     exemplary: zod_1.z.number().positive(),
     pages: zod_1.z.array(zod_1.z.object({
         articleId: zod_1.z.string().min(1),
-        id: zod_1.z.string().min(1)
+        id: zod_1.z.string().min(1),
+        isStartScene: zod_1.z.boolean().default(false)
     })),
     fonts: zod_1.z.object({
         google: zod_1.z.string(),

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

@@ -1,4 +1,5 @@
 export interface Page {
     id: string;
     articleId: string;
+    isStartScene: boolean;
 }

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

@@ -11,9 +11,10 @@ const TransitionMachineContext_1 = require("../provider/TransitionMachineContext
 const Scenes_1 = require("./Scenes/Scenes");
 const FixedLayer_1 = require("./fixedLayers/FixedLayer");
 const Page = ({ project, articlesData }) => {
+    var _a, _b;
     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 startScene = (_b = (_a = project.pages.find(page => page.isStartScene)) === null || _a === void 0 ? void 0 : _a.articleId) !== null && _b !== void 0 ? _b : 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: {

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

@@ -13,12 +13,28 @@ 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 useCntrlContext_1 = require("../../provider/useCntrlContext");
 const FixedLayer = ({ layer, type }) => {
-    const fixedLayerRef = (0, react_1.useRef)(null);
+    const [fixedLayerRef, setFixedLayerRef] = (0, react_1.useState)(null);
+    const { exemplary } = (0, useCntrlContext_1.useCntrlContext)();
     const id = (0, react_1.useId)();
-    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(fixedLayerRef.current);
+    const [deviation, setDeviation] = (0, react_1.useState)(1);
+    const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(fixedLayerRef);
     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: `
+    (0, react_1.useEffect)(() => {
+        if (!fixedLayerRef)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry.contentRect.width !== 0) {
+                setDeviation(entry.contentRect.width / exemplary);
+            }
+        });
+        observer.observe(fixedLayerRef);
+        return () => observer.unobserve(fixedLayerRef);
+    }, [articleRectObserver, fixedLayerRef, exemplary]);
+    const layoutDeviationStyle = { '--layout-deviation': deviation };
+    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: setFixedLayerRef, style: layoutDeviationStyle, 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;

package/package.json

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