@cntrl-site/sdk-nextjs 0.16.0 → 0.16.1

package/lib/components/Article.js

@@ -16,13 +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);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', (rect) => {
+            setArticleRatio(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 }, 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, articleRatio: articleRatio }, item.id))) }), section.id));
                     }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
        .article {
             position: relative;
-            overflow: clip;
+            overflow: hidden;
           }
       ` }))] })));
 };

package/lib/components/Item.js

@@ -41,7 +41,7 @@ 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 }) => {
+const Item = ({ item, sectionId, articleRatio }) => {
     var _a, _b;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
@@ -74,7 +74,7 @@ const Item = ({ item, sectionId }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
@@ -123,7 +123,7 @@ const Item = ({ item, sectionId }) => {
               pointer-events: none;
               top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
+              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 +137,9 @@ const Item = ({ item, sectionId }) => {
       ` }))] })));
 };
 exports.Item = Item;
-function getStickyItemWrapperHeight(sticky, itemHeight) {
+function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight) {
     var _a;
-    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : 100;
+    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : articleHeight;
     return end - sticky.from + itemHeight;
 }
 function parseSizing(sizing = 'manual') {

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -70,7 +70,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
         const parentBoundary = this.parent.getBoundingClientRect();
         this.articleWidth = parentBoundary.width;
         this.setScroll(window.scrollY / this.articleWidth);
-        this.emit('resize', undefined);
+        this.emit('resize', parentBoundary);
         for (const sectionId of this.registry.keys()) {
             const el = this.registry.get(sectionId);
             if (!el)

package/package.json

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

package/src/components/Article.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useRef } from 'react';
+import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
@@ -16,6 +16,14 @@ 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);
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', (rect) => {
+      setArticleRatio(rect.height / rect.width);
+    });
+  }, [articleRectObserver]);
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
@@ -24,9 +32,18 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
           {article.sections.map((section, i) => {
             const data = section.name ? sectionData[section.name] : {};
             return (
-              <Section section={section} key={section.id} data={data}>
+              <Section
+                section={section}
+                key={section.id}
+                data={data}
+              >
                 {article.sections[i].items.map(item => (
-                  <Item item={item} key={item.id} sectionId={section.id} />
+                  <Item
+                    item={item}
+                    key={item.id}
+                    sectionId={section.id}
+                    articleRatio={articleRatio}
+                  />
                 ))}
               </Section>
             );
@@ -36,7 +53,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
       <JSXStyle id={id}>{`
        .article {
             position: relative;
-            overflow: clip;
+            overflow: hidden;
           }
       `}</JSXStyle>
     </ArticleRectContext.Provider>

package/src/components/Item.tsx

@@ -1,14 +1,12 @@
 import { ComponentType, FC, PropsWithChildren, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
-  AnchorSide,
   ArticleItemSizingType as SizingType,
   ArticleItemType,
   getLayoutStyles,
   TArticleItem,
   TStickyParams,
   TArticleItemAny,
-
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -35,6 +33,10 @@ export interface ItemProps<I extends TArticleItemAny> {
   onResize?: (height: number) => void;
 }
 
+export interface ItemWrapperProps extends ItemProps<TArticleItemAny> {
+  articleRatio: number; // height / width
+}
+
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Rectangle]: RectangleItem,
   [ArticleItemType.Image]: ImageItem,
@@ -60,7 +62,7 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleRatio }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
@@ -93,7 +95,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleRatio);
     setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
@@ -165,7 +167,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
               pointer-events: none;
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
-              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height) * 100}vw` : 'unset'};
+              height: ${sticky ? `${getStickyItemWrapperHeight(sticky, area.height, articleRatio) * 100}vw` : 'unset'};
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -181,8 +183,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   );
 };
 
-function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number): number {
-  const end = sticky.to ?? 100;
+function getStickyItemWrapperHeight(sticky: TStickyParams, itemHeight: number, articleHeight: number): number {
+  const end = sticky.to ?? articleHeight;
   return end - sticky.from + itemHeight;
 }
 

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -3,7 +3,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 
 interface EventMap {
   'scroll': undefined;
-  'resize': undefined;
+  'resize': DOMRect;
 }
 
 export class ArticleRectObserver extends EventEmitter<EventMap> {
@@ -77,7 +77,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     const parentBoundary = this.parent.getBoundingClientRect();
     this.articleWidth = parentBoundary.width;
     this.setScroll(window.scrollY / this.articleWidth);
-    this.emit('resize', undefined);
+    this.emit('resize', parentBoundary);
     for (const sectionId of this.registry.keys()) {
       const el = this.registry.get(sectionId);
       if (!el) continue;