@cntrl-site/sdk-nextjs 0.14.2 → 0.14.4

package/src/components/items/useStickyItemTop.ts

@@ -1,18 +1,22 @@
-import { TArticleItemAny } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
+import { useLayoutContext } from '../useLayoutContext';
 
 export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { top } = useKeyframeValue<{ top: number; left: number }>(
     item,
-    (item, layoutId) => item.area[layoutId],
+    (item, layoutId) => {
+      if (!layoutId) return { top: 0, left: 0 }
+      return item.area[layoutId];
+    },
     (animator, scroll, value) => animator.getPositions(value, scroll),
     sectionId,
     [layoutId]
   );
-  const sticky = item.sticky[layoutId];
-  const sectionHeight = sectionHeightMap[layoutId];
-  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, item.area[layoutId].anchorSide)}` : 0
+  const sticky = layoutId ? item.sticky[layoutId] : undefined;
+  const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
+  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
+  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, anchorSide)}` : 0
 }

package/src/components/useItemDimensions.ts

@@ -1,6 +1,6 @@
 import { TArticleItemAny } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useLayoutContext } from './useLayoutContext';
 
 const defaultArea = {
   left: 0,
@@ -12,7 +12,7 @@ const defaultArea = {
 };
 
 export const useItemDimensions = (item: TArticleItemAny, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { width, height } = useKeyframeValue<{ width: number; height: number }>(
     item,
     (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,

package/src/components/useItemPosition.ts

@@ -1,19 +1,23 @@
 import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
+import { useLayoutContext } from './useLayoutContext';
 
 export const useItemPosition = (item: TArticleItemAny, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { top, left } = useKeyframeValue<{ top: number; left: number }>(
     item,
-    (item, layoutId) => item.area[layoutId],
+    (item, layoutId) => {
+      if (!layoutId) return { top: 0, left: -10 };
+      return item.area[layoutId]
+    },
     (animator, scroll, value) => animator.getPositions(value, scroll),
     sectionId,
     [layoutId]
   );
+  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
   return {
-    top:  getItemTopStyle(top, item.area[layoutId].anchorSide),
+    top:  getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/src/components/useItemScale.ts

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

package/src/components/useLayoutContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export function useLayoutContext() {
+  const layoutId = useContext(LayoutContext);
+  return layoutId;
+}

package/src/components/useSectionColor.ts

@@ -1,18 +1,19 @@
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useMemo } from 'react';
 import { CntrlColor } from '@cntrl-site/sdk';
+import { useLayoutContext } from './useLayoutContext';
 
 type LayoutIdentifier = string;
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
 export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
    return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
      const layoutColor = colorData[layoutId];
      return CntrlColor.parse(
        !layoutColor
          ? DEFAULT_COLOR
          : layoutColor
      );
-   }, []);
+   }, [layoutId]);
 };

package/src/provider/LayoutContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const LayoutContext = createContext<string | undefined>(undefined);

package/src/utils/Animator/Animator.ts

@@ -196,6 +196,42 @@ export class Animator {
     };
   }
 
+  getBlur(
+    values: TKeyframeValueMap[KeyframeType.Blur],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Blur] {
+    const keyframes = this.keyframesMap[KeyframeType.Blur];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        blur: keyframe.value.blur
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Blur>(pos, keyframes);
+    return {
+      blur: rangeMap(pos, start.position, end.position, start.value.blur, end.value.blur, true)
+    };
+  }
+
+  getBackdropBlur(
+    values: TKeyframeValueMap[KeyframeType.BackdropBlur],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BackdropBlur] {
+    const keyframes = this.keyframesMap[KeyframeType.BackdropBlur];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        backdropBlur: keyframe.value.backdropBlur
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BackdropBlur>(pos, keyframes);
+    return {
+      backdropBlur: rangeMap(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
+    };
+  }
+
   getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
     const index = binSearchInsertAt(keyframes, { position }, compare);
     const end = index === keyframes.length ? index - 1 : index;
@@ -234,7 +270,9 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Rotation]: [],
     [KeyframeType.BorderColor]: [],
     [KeyframeType.Opacity]: [],
-    [KeyframeType.Scale]: []
+    [KeyframeType.Scale]: [],
+    [KeyframeType.Blur]: [],
+    [KeyframeType.BackdropBlur]: []
   };
 }
 

package/src/utils/HoverStyles/HoverStyles.ts

@@ -17,6 +17,8 @@ const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> =
   'strokeWidth': (strokeWidth: number) => `border-width: ${strokeWidth * 100}vw !important;`,
   'strokeColor': (strokeColor: string) => `border-color: ${CntrlColor.parse(strokeColor).toCss()} !important;`,
   'fillColor': (fillColor: string) => `background-color: ${CntrlColor.parse(fillColor).toCss()} !important;`,
+  'blur': (blur: number) => `filter: blur(${blur * 100}vw) !important;`,
+  'backdropBlur': (backdropBlur: number) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`
 };
 
 const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
@@ -30,7 +32,9 @@ const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
   'radius': 'border-radius',
   'strokeWidth': 'border-width',
   'strokeColor': 'border-color',
-  'fillColor': 'background-color'
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter'
 };
 
 export function getTransitions<T extends ArticleItemType>(