@cntrl-site/sdk-nextjs 0.16.0 → 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,9 +16,17 @@ 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 [articleHeight, setArticleHeight] = (0, react_1.useState)(1);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
+            return;
+        return articleRectObserver.on('resize', (rect) => {
+            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 }, 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;

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 }) => {
-    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 }) => {
         : 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 }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+        const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
         setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
@@ -86,7 +92,7 @@ const Item = ({ item, sectionId }) => {
         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 }) => {
               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'};
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -137,9 +142,9 @@ const Item = ({ item, sectionId }) => {
       ` }))] })));
 };
 exports.Item = Item;
-function getStickyItemWrapperHeight(sticky, itemHeight) {
+function getStickyItemWrapperHeight(sticky, itemHeight, articleHeight, itemArticleOffset) {
     var _a;
-    const end = (_a = sticky.to) !== null && _a !== void 0 ? _a : 100;
+    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;
     }
@@ -70,7 +74,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.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

@@ -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 [articleHeight, setArticleHeight] = useState(1);
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', (rect) => {
+      setArticleHeight(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}
+                    articleHeight={articleHeight}
+                  />
                 ))}
               </Section>
             );

package/src/components/Item.tsx

@@ -1,14 +1,12 @@
-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 {
-  AnchorSide,
   ArticleItemSizingType as SizingType,
   ArticleItemType,
   getLayoutStyles,
   TArticleItem,
   TStickyParams,
   TArticleItemAny,
-
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -28,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;
@@ -35,6 +35,10 @@ export interface ItemProps<I extends TArticleItemAny> {
   onResize?: (height: number) => void;
 }
 
+export interface ItemWrapperProps extends ItemProps<TArticleItemAny> {
+  articleHeight: number;
+}
+
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Rectangle]: RectangleItem,
   [ArticleItemType.Image]: ImageItem,
@@ -60,11 +64,13 @@ 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, 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);
@@ -85,15 +91,17 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     : 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);
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height, articleHeight, (sectionTop + itemSectionTop) / window.innerWidth);
     setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
@@ -112,7 +120,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   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}
@@ -165,7 +174,6 @@ 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'};
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }
             .item-${item.id}-inner:hover {
@@ -181,8 +189,13 @@ 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,
+  itemArticleOffset: number,
+) {
+  const end = sticky.to ?? articleHeight - itemArticleOffset - itemHeight;
   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> {
@@ -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;
   }
@@ -77,7 +82,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;