@cntrl-site/sdk-nextjs 0.16.1 → 0.16.2

package/lib/common/useExemplary.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExemplary = void 0;
+const useCntrlContext_1 = require("../provider/useCntrlContext");
+const useLayoutContext_1 = require("../components/useLayoutContext");
+const useExemplary = () => {
+    var _a, _b;
+    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layout = (0, useLayoutContext_1.useLayoutContext)();
+    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
+    return exemplary;
+};
+exports.useExemplary = useExemplary;

package/lib/components/Article.js

@@ -16,21 +16,21 @@ const Article = ({ article, sectionData }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
-    const [articleRatio, setArticleRatio] = (0, react_1.useState)(1);
+    const [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;
         return articleRectObserver.on('resize', (rect) => {
-            setArticleRatio(rect.height / rect.width);
+            setArticleHeight(rect.height / rect.width);
         });
     }, [articleRectObserver]);
     return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, Object.assign({ value: articleRectObserver }, { children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "article", ref: articleRef }, { children: article.sections.map((section, i) => {
                         const data = section.name ? sectionData[section.name] : {};
-                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, Object.assign({ section: section, data: data }, { children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleRatio: articleRatio }, item.id))) }), section.id));
+                        return ((0, jsx_runtime_1.jsx)(Section_1.Section, Object.assign({ section: section, data: data }, { children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }), section.id));
                     }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
        .article {
             position: relative;
-            overflow: hidden;
+            overflow: clip;
           }
       ` }))] })));
 };

package/lib/components/Item.js

@@ -26,6 +26,8 @@ const getItemTopStyle_1 = require("../utils/getItemTopStyle");
 const useStickyItemTop_1 = require("./items/useStickyItemTop");
 const getAnchoredItemTop_1 = require("../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("./useLayoutContext");
+const ArticleRectContext_1 = require("../provider/ArticleRectContext");
+const useExemplary_1 = require("../common/useExemplary");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -41,12 +43,13 @@ const RichTextWrapper = ({ isRichText, children }) => {
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' } }, { children: children })));
 };
 const noop = () => null;
-const Item = ({ item, sectionId, articleRatio }) => {
-    var _a, _b;
+const Item = ({ item, sectionId, articleHeight }) => {
+    const itemWrapperRef = (0, react_1.useRef)(null);
+    const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
-    const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
+    const exemplary = (0, useExemplary_1.useExemplary)();
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
     const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
@@ -66,7 +69,10 @@ const Item = ({ item, sectionId, articleRatio }) => {
         : undefined;
     const sizingAxis = parseSizing(sizing);
     const ItemComponent = itemsMap[item.type] || noop;
+    const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
+        var _a, _b;
+        const itemSectionTop = (_b = (_a = itemWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
         if (!layout)
             return;
         const sticky = item.sticky[layout];
@@ -74,7 +80,7 @@ const Item = ({ item, sectionId, articleRatio }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
+        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
@@ -86,7 +92,7 @@ const Item = ({ item, sectionId, articleRatio }) => {
         top: stickyTop,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -123,7 +129,6 @@ const Item = ({ item, sectionId, articleRatio }) => {
               pointer-events: none;
               top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height, articleRatio) * 100}vw` : 'unset'};
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -137,9 +142,9 @@ const Item = ({ item, sectionId, articleRatio }) => {
       ` }))] })));
 };
 exports.Item = Item;
-function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight) {
+function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight, itemArticleOffset) {
     var _a;
-    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight;
+    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight - itemArticleOffset - itemHeight;
     return end - sticky.from + itemHeight;
 }
 function parseSizing(sizing = 'manual') {

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -29,6 +29,10 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             return 0;
         return -(sectionTop / this.articleWidth - this.scrollPos);
     }
+    getSectionTop(sectionId) {
+        const sectionTop = this.sectionsScrollMap.get(sectionId);
+        return sectionTop !== null && sectionTop !== void 0 ? sectionTop : 0;
+    }
     get width() {
         return this.articleWidth;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/common/useExemplary.ts

@@ -0,0 +1,9 @@
+import { useCntrlContext } from "../provider/useCntrlContext";
+import { useLayoutContext } from "../components/useLayoutContext";
+
+export const useExemplary = () => {
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  return exemplary;
+};

package/src/components/Article.tsx

@@ -16,12 +16,12 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
   const articleRef = useRef<HTMLDivElement | null>(null);
   const articleRectObserver = useArticleRectObserver(articleRef.current);
   const id = useId();
-  const [articleRatio, setArticleRatio] = useState(1);
+  const [articleHeight, setArticleHeight] = useState(1);
 
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', (rect) => {
-      setArticleRatio(rect.height / rect.width);
+      setArticleHeight(rect.height / rect.width);
     });
   }, [articleRectObserver]);
 
@@ -42,7 +42,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
                     item={item}
                     key={item.id}
                     sectionId={section.id}
-                    articleRatio={articleRatio}
+                    articleHeight={articleHeight}
                   />
                 ))}
               </Section>
@@ -53,7 +53,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
       <JSXStyle id={id}>{`
        .article {
             position: relative;
-            overflow: hidden;
+            overflow: clip;
           }
       `}</JSXStyle>
     </ArticleRectContext.Provider>

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, PropsWithChildren, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   ArticleItemSizingType as SizingType,
@@ -26,6 +26,8 @@ import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
 import { useLayoutContext } from './useLayoutContext';
+import { ArticleRectContext } from "../provider/ArticleRectContext";
+import { useExemplary } from "../common/useExemplary";
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -34,7 +36,7 @@ export interface ItemProps<I extends TArticleItemAny> {
 }
 
 export interface ItemWrapperProps extends ItemProps<TArticleItemAny> {
-  articleRatio: number; // height / width
+  articleHeight: number;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -62,11 +64,13 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) => {
+  const itemWrapperRef = useRef<HTMLDivElement | null>(null);
+  const rectObserver = useContext(ArticleRectContext);
   const id = useId();
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
-  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  const exemplary = useExemplary();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
@@ -87,15 +91,17 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
     : undefined;
   const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
+  const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
+    const itemSectionTop = itemWrapperRef.current?.offsetTop ?? 0;
     if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
     setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
@@ -114,7 +120,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
   return (
     <div
       className={`item-wrapper-${item.id}`}
-      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      ref={itemWrapperRef}
+      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}
@@ -167,7 +174,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
               pointer-events: none;
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height, articleRatio) * 100}vw` : 'unset'};
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -183,8 +189,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) =>
   );
 };
 
-function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number, articleHeight: number): number {
-  const end = sticky.to ?? articleHeight;
+function getStickyItemWrapperHeight(
+  sticky: TStickyParams,
+  itemHeight: number,
+  articleHeight: number,
+  itemArticleOffset: number,
+) {
+  const end = sticky.to ?? articleHeight - itemArticleOffset - itemHeight;
   return end - sticky.from + itemHeight;
 }
 

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -30,6 +30,11 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     return - (sectionTop / this.articleWidth - this.scrollPos);
   }
 
+  getSectionTop(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    return sectionTop ?? 0;
+  }
+
   get width(): number {
     return this.articleWidth;
   }