@cntrl-site/sdk-nextjs 0.11.0 → 0.12.0

package/src/components/items/VideoItem.tsx

@@ -6,10 +6,10 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
-  const angle = useItemAngle(item);
+  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>

package/src/components/items/VimeoEmbed.tsx

@@ -6,10 +6,10 @@ import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
-  const { radius } = useEmbedVideoItem(item);
-  const angle = useItemAngle(item);
+  const { radius } = useEmbedVideoItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
   const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);

package/src/components/items/YoutubeEmbed.tsx

@@ -7,11 +7,11 @@ import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { autoplay, controls, url } = item.commonParams;
-  const { radius } = useEmbedVideoItem(item);
-  const angle = useItemAngle(item);
+  const { radius } = useEmbedVideoItem(item, sectionId);
+  const angle = useItemAngle(item, sectionId);
 
   const getValidYoutubeUrl = (url: string): string => {
     const newUrl = new URL(url);

package/src/components/items/useEmbedVideoItem.ts

@@ -2,7 +2,7 @@ import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 
-export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem) => {
+export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -12,6 +12,7 @@ export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem) =>
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
 

package/src/components/items/useFileItem.ts

@@ -1,10 +1,10 @@
-import { CntrlColor, TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useFileItem = (item: TImageItem | TVideoItem) => {
+export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -14,6 +14,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
   const strokeWidth = useKeyframeValue(
@@ -24,6 +25,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
     (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    sectionId,
     [layoutId]
   );
 
@@ -35,6 +37,7 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       return 'opacity' in layoutParams ? layoutParams.opacity : 0;
     },
     (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    sectionId,
     [layoutId]
   );
 
@@ -45,7 +48,8 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
       const layoutParams = item.layoutParams[layoutId];
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
-    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color
+    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    sectionId
   );
 
   return { radius, strokeWidth, opacity, strokeColor };

package/src/components/items/useItemSticky.ts

@@ -4,7 +4,7 @@ import { StickyManager } from '../../utils/StickyManager/StickyManager';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { ArticleRectContext } from '../../provider/ArticleRectContext';
 
-export const useItemSticky = (top: number, parentOffsetTop: number, item: TArticleItemAny) => {
+export const useItemSticky = (top: number, item: TArticleItemAny, sectionId: string) => {
   const [isFixed, setIsFixed] = useState(false);
   const [adjustedTop, setAdjustedTop] = useState(top);
   const articleRectObserver = useContext(ArticleRectContext);
@@ -16,20 +16,19 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
     setIsFixed(stickyManager.getIsSticky(scroll));
     setAdjustedTop(stickyManager.getPosition(
       scroll,
-      top,
-      parentOffsetTop
+      top
     ));
-  }, [top, stickyManager, parentOffsetTop]);
+  }, [top, stickyManager]);
 
   useEffect(() => {
     if (!articleRectObserver) return;
-      handleSticky(articleRectObserver.scroll);
+      handleSticky(articleRectObserver.getSectionScroll(sectionId));
   }, [handleSticky, articleRectObserver]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;
     return articleRectObserver.on('scroll', () => {
-      handleSticky(articleRectObserver.scroll);
+      handleSticky(articleRectObserver.getSectionScroll(sectionId));
     });
   }, [handleSticky, articleRectObserver, sticky]);
   return {

package/src/components/items/useRectangleItem.ts

@@ -1,10 +1,10 @@
-import { CntrlColor, TRectangleItem } from '@cntrl-site/sdk';
+import { TRectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
-export const useRectangleItem = (item: TRectangleItem) => {
+export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
     item,
@@ -14,6 +14,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return  'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    sectionId,
     [layoutId]
   );
   const strokeWidth = useKeyframeValue(
@@ -24,6 +25,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
     },
     (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    sectionId,
     [layoutId]
   );
   const fillColor = useKeyframeValue(
@@ -34,6 +36,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
     },
     (animator, scroll, value) => animator.getColor({ color: value }, scroll).color,
+    sectionId,
     [layoutId]
   );
   const strokeColor = useKeyframeValue(
@@ -44,6 +47,7 @@ export const useRectangleItem = (item: TRectangleItem) => {
       return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     },
     (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color,
+    sectionId,
     [layoutId]
   );
   return { fillColor, strokeWidth, radius, strokeColor };

package/src/components/useItemAngle.ts

@@ -1,11 +1,12 @@
 import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 
-export const useItemAngle = (item: TArticleItemAny) => {
+export const useItemAngle = (item: TArticleItemAny, sectionId: string) => {
   const { angle } = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
-    (animator, scroll, value) => animator.getRotation(value, scroll)
+    (animator, scroll, value) => animator.getRotation(value, scroll),
+    sectionId
   );
   return angle;
 };

package/src/components/useItemDimensions.ts

@@ -11,12 +11,13 @@ const defaultArea = {
   zIndex: 0
 };
 
-export const useItemDimensions = (item: TArticleItemAny) => {
+export const useItemDimensions = (item: TArticleItemAny, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const { width, height } = useKeyframeValue<{ width: number; height: number }>(
     item,
     (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,
     (animator, scroll, value) => animator.getDimensions(value, scroll),
+    sectionId,
     [layoutId]
   );
   return { width, height };

package/src/components/useItemPosition.ts

@@ -2,12 +2,13 @@ import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
-export const useItemPosition = (item: TArticleItemAny) => {
+export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
   const layoutId = useCurrentLayout();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,
     (item, layoutId) => item.area[layoutId],
     (animator, scroll, value) => animator.getPositions(value, scroll),
+    sectionId,
     [layoutId]
   );
   return { top, left };

package/src/components/useItemScale.ts

@@ -2,12 +2,13 @@ import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 
-export const useItemScale = (item: TArticleItemAny) => {
+export const useItemScale = (item: TArticleItemAny, sectionId: string) => {
   const layout = useCurrentLayout();
   const { scale } = useKeyframeValue(
     item,
     (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
-    (animator, scroll, value) => animator.getScale(value, scroll)
+    (animator, scroll, value) => animator.getScale(value, scroll),
+    sectionId
   );
   const scaleAnchor = item.area[layout].scaleAnchor;
 

package/src/index.ts

@@ -1,5 +1,3 @@
-export { cntrlSdkContext } from './provider/defaultContext';
-
 export * from '@cntrl-site/sdk';
 
 export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
@@ -17,7 +15,10 @@ export { LayoutStyle } from './components/LayoutStyle';
 export { VimeoEmbedItem } from './components/items/VimeoEmbed';
 export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
 
-// custom items
+import { cntrlSdkContext as sdk } from './provider/defaultContext';
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
 export { useCntrlContext } from './provider/useCntrlContext';
+export const customItems = sdk.customItems;
+export const customSections = sdk.customSections;
+export const cntrlSdkContext = sdk;

package/src/provider/CntrlSdkContext.ts

@@ -1,5 +1,5 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { TLayout, TTypePresets,  } from '@cntrl-site/sdk';
+import { TArticleSection, TLayout, TTypePresets } from '@cntrl-site/sdk';
 import { CustomSectionRegistry } from './CustomSectionRegistry';
 
 export class CntrlSdkContext {
@@ -10,6 +10,20 @@ export class CntrlSdkContext {
     public readonly customSections: CustomSectionRegistry
   ) {}
 
+  async resolveSectionData(sections: TArticleSection[]): Promise<Record<string, any>> {
+    const resolvers = sections.map(section => {
+      const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+      if (!resolver) return;
+      return {
+        name: section.name,
+        resolver
+      };
+    }).filter(isDefined);
+    return Object.fromEntries(
+      await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()]))
+    );
+  }
+
   setTypePresets(typePresets: TTypePresets) {
     this._typePresets = typePresets;
   }
@@ -26,3 +40,7 @@ export class CntrlSdkContext {
     return this._typePresets;
   }
 }
+
+function isDefined<T>(value: T): value is Exclude<T, undefined> {
+  return value !== undefined;
+}

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -8,18 +8,27 @@ interface EventMap {
 export class ArticleRectObserver extends EventEmitter<EventMap> {
   private resizeObserver: ResizeObserver;
   private articleWidth: number = 0;
+  private registry: Map<string, HTMLElement> = new Map();
   private scrollPos: number = window.scrollY;
   private animationFrame: number = NaN;
+  private parent: HTMLElement | undefined = undefined;
+  private sectionsScrollMap: Map<string, number> = new Map();
 
   constructor() {
     super();
-    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver = new ResizeObserver(this.handleResize.bind(this));
   }
 
   get scroll(): number {
     return this.scrollPos;
   }
 
+  getSectionScroll(sectionId: string): number {
+    const sectionTop = this.sectionsScrollMap.get(sectionId);
+    if (sectionTop === undefined) return 0;
+    return - (sectionTop / this.articleWidth - this.scrollPos);
+  }
+
   get width(): number {
     return this.articleWidth;
   }
@@ -28,8 +37,8 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     this.scrollPos = scroll;
   }
 
-  start(el: HTMLElement) {
-    this.resizeObserver.observe(el);
+  init(parent: HTMLElement) {
+    this.parent = parent;
     const onScroll = () => {
       this.handleScroll(window.scrollY);
       if (!isNaN(this.animationFrame)) return;
@@ -40,7 +49,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     };
     window.addEventListener('scroll', onScroll);
     return () => {
-      this.resizeObserver.unobserve(el);
+      this.parent = undefined;
       window.removeEventListener('scroll', onScroll);
       if (!isNaN(this.animationFrame)) {
         window.cancelAnimationFrame(this.animationFrame);
@@ -49,22 +58,30 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     };
   }
 
+  register(el: HTMLElement, sectionId: string) {
+    this.registry.set(sectionId, el);
+    this.resizeObserver.observe(el);
+    return () => {
+      this.registry.delete(sectionId);
+      this.resizeObserver.unobserve(el);
+    };
+  }
+
   private handleScroll = (scroll: number) => {
     this.setScroll(scroll / this.articleWidth);
   };
 
-  private handleResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
-    const [entry] = entries;
-    if (!entry) return;
-    const element = entry.target;
-    if (!(element instanceof HTMLElement)) return;
-    this.notify(element);
+  private handleResize (){
+    if (!this.parent) return;
+    const parentBoundary = this.parent.getBoundingClientRect();
+    this.articleWidth = parentBoundary.width;
     this.setScroll(window.scrollY / this.articleWidth);
     this.emit('resize', undefined);
+    for (const sectionId of this.registry.keys()) {
+      const el = this.registry.get(sectionId);
+      if (!el) continue;
+      const rect = el.getBoundingClientRect();
+      this.sectionsScrollMap.set(sectionId, rect.top - parentBoundary.top);
+    }
   };
-
-  private notify(el: HTMLElement) {
-    const elBoundary = el.getBoundingClientRect();
-    this.articleWidth = elBoundary.width;
-  }
 }

package/src/utils/ArticleRectManager/useArticleRectObserver.ts

@@ -10,7 +10,7 @@ export const useArticleRectObserver = (el?: HTMLElement | null) => {
 
   useEffect(() => {
     if (!el || !articleRectObserver) return;
-    return articleRectObserver.start(el);
+    return articleRectObserver.init(el);
   }, [el, articleRectObserver]);
 
   return articleRectObserver;

package/src/utils/ArticleRectManager/useSectionRegistry.ts

@@ -0,0 +1,11 @@
+import { useContext, useEffect } from 'react';
+import { ArticleRectContext } from '../../provider/ArticleRectContext';
+
+export const useSectionRegistry = ( sectionId: string, el?: HTMLElement | null) => {
+  const articleRectObserver = useContext(ArticleRectContext);
+
+  useEffect(() => {
+    if (!el || !articleRectObserver) return;
+    return articleRectObserver.register(el, sectionId);
+  }, [el, articleRectObserver]);
+};

package/src/utils/StickyManager/StickyManager.ts

@@ -10,10 +10,10 @@ export class StickyManager {
     return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
   }
 
-  getPosition(scroll: number, top: number, offsetTop: number): number {
+  getPosition(scroll: number, top: number): number {
     if (!this.sticky) return top;
     if (this.getIsSticky(scroll)) {
-      return top - this.sticky.from + offsetTop;
+      return top - this.sticky.from;
     }
     if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
       return top + this.sticky.to - this.sticky.from;

package/lib/utils/castObject.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.castObject = void 0;
-function castObject(value, ctor) {
-    if (value instanceof ctor) {
-        return value;
-    }
-    throw new TypeError(`passed value "${String(value)}" is not instance of ${ctor.name}`);
-}
-exports.castObject = castObject;