@cntrl-site/sdk-nextjs 0.3.0 → 0.4.1

package/src/components/items/RectangleItem.tsx

@@ -3,15 +3,23 @@ import { TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useRectangleItem } from './useRectangleItem';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
   const { layouts } = useCntrlContext();
+  const { fillColor, radius, strokeWidth } = useRectangleItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`rectangle-${item.id}`} />
+        <div className={`rectangle-${item.id}`}
+          style={{
+            backgroundColor: `${fillColor}`,
+            borderRadius: `${radius * 100}vw`,
+            borderWidth: `${strokeWidth * 100}vw`
+          }}
+        />
         <style jsx>{`
-      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor }]) => (`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
@@ -19,9 +27,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
             border-style: solid;
             box-sizing: border-box;
             border-color: ${strokeColor};
-            background-color: ${fillColor};
-            border-radius: ${radius * 100}vw;
-            border-width: ${strokeWidth * 100}vw;
           }`
         ))}
       `}</style>

package/src/components/items/VideoItem.tsx

@@ -4,18 +4,25 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getLayoutStyles } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useFileItem } from './useFileItem';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
   const { layouts } = useCntrlContext();
+  const { radius, strokeWidth } = useFileItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`video-wrapper-${item.id}`}>
+      <div className={`video-wrapper-${item.id}`}
+         style={{
+           borderRadius: `${radius * 100}vw`,
+           borderWidth: `${strokeWidth * 100}vw`
+         }}
+      >
         <video autoPlay muted loop playsInline className="video">
           <source src={item.commonParams.url} />
         </video>
       </div>
       <style jsx>{`
-      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
          .video-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;
@@ -24,8 +31,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
             border-style: solid;
             box-sizing: border-box;
             border-color: ${strokeColor};
-            border-radius: ${radius * 100}vw;
-            border-width: ${strokeWidth * 100}vw;
             opacity: ${opacity};
           }`
       ))

package/src/components/items/VimeoEmbed.tsx

@@ -1,13 +1,12 @@
 import { FC } from 'react';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
-  const { layouts } = useCntrlContext();
- const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+  const { radius } = useEmbedVideoItem(item);
+  const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -26,7 +25,11 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
 
   return (
     <LinkWrapper url={item.link?.url}>
-        <div className={`embed-video-wrapper-${item.id}`}>
+        <div className={`embed-video-wrapper-${item.id}`}
+          style={{
+            borderRadius: `${radius * 100}vw`
+          }}
+        >
           <iframe
             className="embedVideo"
             src={validUrl || ''}
@@ -35,18 +38,15 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
           />
         </div>
         <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`
-        ))}
+        .embed-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedVideo {
           width: 100%;
           height: 100%;

package/src/components/items/YoutubeEmbed.tsx

@@ -1,14 +1,13 @@
 import { FC } from 'react';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
-  const { layouts } = useCntrlContext();
   const { autoplay, controls, url } = item.commonParams;
+  const { radius } = useEmbedVideoItem(item);
 
   const getValidYoutubeUrl = (url: string): string => {
     const newUrl = new URL(url);
@@ -24,7 +23,11 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-youtube-video-wrapper-${item.id}`}>
+      <div className={`embed-youtube-video-wrapper-${item.id}`}
+         style={{
+           borderRadius: `${radius * 100}vw`
+         }}
+      >
         <iframe
           className="embedYoutubeVideo"
           src={validUrl || ''}
@@ -33,18 +36,15 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
         />
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-youtube-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`
-        ))}
+        .embed-youtube-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedYoutubeVideo {
           width: 100%;
           height: 100%;

package/src/components/items/useEmbedVideoItem.ts

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

package/src/components/items/useFileItem.ts

@@ -0,0 +1,29 @@
+import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+
+export const useFileItem = (item: TImageItem | TVideoItem) => {
+  const layoutId = useCurrentLayout();
+  const radius = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    [layoutId]
+  );
+  const strokeWidth = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    },
+    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    [layoutId]
+  );
+
+  return { radius, strokeWidth };
+};

package/src/components/items/useRectangleItem.ts

@@ -0,0 +1,40 @@
+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) => {
+  const layoutId = useCurrentLayout();
+  const radius = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    [layoutId]
+  );
+  const strokeWidth = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    },
+    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    [layoutId]
+  );
+  const fillColor = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return defaultColor;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
+    },
+    (animator, scroll, value) => animator.getColor({ color: value }, scroll).color
+  );
+
+  return { fillColor, strokeWidth, radius };
+};

package/src/components/useItemAngle.ts

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

package/src/components/useItemDimensions.ts

@@ -0,0 +1,23 @@
+import { TArticleItemAny } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+
+const defaultArea = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+  angle: 0,
+  zIndex: 0
+};
+
+export const useItemDimensions = (item: TArticleItemAny) => {
+  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),
+    [layoutId]
+  );
+  return { width, height };
+};

package/src/components/useItemPosition.ts

@@ -0,0 +1,36 @@
+import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+const defaultArea = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+  angle: 0,
+  zIndex: 0
+};
+
+export const useItemPosition = (item: TArticleItemAny) => {
+  const layoutId = useCurrentLayout()
+  const { top, left } = useKeyframeValue<{ top: number; left: number }>(
+    item,
+    (item, layoutId) => item.area[layoutId],
+    (animator, scroll, value) => animator.getPositions(value, scroll),
+    [layoutId]
+  );
+  return { top: getItemTopStyle(top, layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top), left };
+};
+
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}

package/src/provider/ArticleRectContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
+
+export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);

package/src/provider/CntrlSdkContext.ts

@@ -1,18 +1,27 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { TLayout, TTypePresets } from '@cntrl-site/sdk';
+import { TLayout, TTypePresets,  } from '@cntrl-site/sdk';
+
 
 export class CntrlSdkContext {
-  public typePresets?: TTypePresets;
-  public layouts: TLayout[] = [];
+  private _typePresets?: TTypePresets;
+  private _layouts: TLayout[] = [];
   constructor(
     public readonly customItems: CustomItemRegistry,
   ) {}
 
   setTypePresets(typePresets: TTypePresets) {
-    this.typePresets = typePresets;
+    this._typePresets = typePresets;
   }
 
   setLayouts(layouts: TLayout[]) {
-    this.layouts = layouts;
+    this._layouts = layouts;
+  }
+
+  get layouts(): TLayout[] {
+    return this._layouts;
+  }
+
+  get typePresets(): TTypePresets | undefined {
+    return this._typePresets;
   }
 }

package/src/provider/Keyframes.ts

@@ -0,0 +1,11 @@
+import { TKeyframeAny } from '@cntrl-site/sdk';
+
+export class Keyframes {
+  constructor(
+    private keyframes: TKeyframeAny[] = []
+  ) {}
+
+  getItemKeyframes(itemId: string) {
+    return this.keyframes.filter(kf => kf.itemId === itemId);
+  }
+}

package/src/provider/KeyframesContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { Keyframes } from './Keyframes';
+
+export const KeyframesContext = createContext(new Keyframes());
+

package/src/utils/Animator/Animator.ts

@@ -0,0 +1,206 @@
+import { KeyframeType, TKeyframeValueMap } from '@cntrl-site/sdk';
+import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
+
+export interface AnimationData<T extends KeyframeType> {
+  position: number;
+  value: TKeyframeValueMap[T];
+  type: T;
+}
+
+interface PositionKeyframes<T extends KeyframeType> {
+  start: AnimationData<T>;
+  end: AnimationData<T>;
+}
+
+export type KeyframesMap = {
+  [T in KeyframeType]: AnimationData<T>[];
+};
+
+const compare = (lhs: { position: number }, rhs: { position: number }) => lhs.position - rhs.position;
+const insertBin = createInsert(binSearchInsertAt, compare);
+
+export class Animator {
+  private static pushKeyframeToMap<T extends KeyframeType>(keyframe: AnimationData<T>, map: KeyframesMap): void {
+    insertBin(map[keyframe.type], keyframe);
+  }
+  private keyframesMap: KeyframesMap = createKeyframesMap();
+  constructor(
+    private keyframes: AnimationData<KeyframeType>[]
+  ) {
+    this.fillKeyframesMap();
+  }
+
+  getDimensions(
+    values: TKeyframeValueMap[KeyframeType.Dimensions],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Dimensions] {
+    const keyframes = this.keyframesMap[KeyframeType.Dimensions];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        width: keyframe.value.width,
+        height: keyframe.value.height
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Dimensions>(pos, keyframes);
+    return {
+      width: rangeMap(pos, start.position, end.position, start.value.width, end.value.width, true),
+      height: rangeMap(pos, start.position, end.position, start.value.height, end.value.height, true)
+    };
+  }
+
+  getPositions(
+    values: TKeyframeValueMap[KeyframeType.Position],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Position] {
+    const keyframes = this.keyframesMap[KeyframeType.Position];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        left: keyframe.value.left,
+        top: keyframe.value.top
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Position>(pos, keyframes);
+    return {
+      left: rangeMap(pos, start.position, end.position, start.value.left, end.value.left, true),
+      top: rangeMap(pos, start.position, end.position, start.value.top, end.value.top, true)
+    };
+  }
+
+  getColor(
+    values: TKeyframeValueMap[KeyframeType.Color],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Color] {
+    const keyframes = this.keyframesMap[KeyframeType.Color];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        color: keyframe.value.color
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Color>(pos, keyframes);
+    return {
+      color: this.getRgba(start, end, pos)
+    };
+  }
+
+  getRadius(
+    values: TKeyframeValueMap[KeyframeType.BorderRadius],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BorderRadius] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderRadius];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        radius: keyframe.value.radius
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BorderRadius>(pos, keyframes);
+    return {
+      radius: rangeMap(pos, start.position, end.position, start.value.radius, end.value.radius, true)
+    };
+  }
+
+  getBorderWidth(
+    values: TKeyframeValueMap[KeyframeType.BorderWidth],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BorderWidth] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderWidth];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        borderWidth: keyframe.value.borderWidth
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BorderWidth>(pos, keyframes);
+    return {
+      borderWidth: rangeMap(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
+    };
+  }
+
+  getRotation(
+    values: TKeyframeValueMap[KeyframeType.Rotation],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Rotation] {
+    const keyframes = this.keyframesMap[KeyframeType.Rotation];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        angle: keyframe.value.angle
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Rotation>(pos, keyframes);
+    return {
+      angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, 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;
+    const start = end === 0 ? end : end - 1;
+    return { start: keyframes[start], end: keyframes[end] };
+  }
+
+  private fillKeyframesMap() {
+    this.keyframesMap = createKeyframesMap();
+    for (const keyframe of this.keyframes) {
+      Animator.pushKeyframeToMap(keyframe, this.keyframesMap);
+    }
+  }
+
+  private getRgba(
+    start: AnimationData<KeyframeType.Color>,
+    end: AnimationData<KeyframeType.Color>,
+    position: number
+  ): string {
+    const [startR, startG, startB, startA] = parseRgba(start.value.color);
+    const [endR, endG, endB, endA] = parseRgba(end.value.color);
+    const r = rangeMap(position, start.position, end.position, startR, endR, true);
+    const g = rangeMap(position, start.position, end.position, startG, endG, true);
+    const b = rangeMap(position, start.position, end.position, startB, endB, true);
+    const a = rangeMap(position, start.position, end.position, startA, endA, true);
+    return `rgba(${r},${g},${b},${a})`;
+  }
+}
+
+const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
+
+function parseRgba(color: string): [r: number, g: number, b: number, a: number] {
+  const match = reRgba.exec(color);
+  if (!match) return [0, 0, 0, 1];
+  const [, r, g, b, a] = match;
+  return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
+}
+
+function createKeyframesMap(): KeyframesMap {
+  return {
+    [KeyframeType.Dimensions]: [],
+    [KeyframeType.Position]: [],
+    [KeyframeType.BorderWidth]: [],
+    [KeyframeType.BorderRadius]: [],
+    [KeyframeType.Color]: [],
+    [KeyframeType.Rotation]: []
+  };
+}
+
+function rangeMap(
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds: boolean = false
+): number {
+  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  if (withinBounds && n < start1) return start2;
+  if (withinBounds && n > stop1) return stop2;
+  return mapped;
+}