@cntrl-site/sdk-nextjs 0.4.1 → 0.4.2

package/lib/components/items/ImageItem.js

@@ -2,35 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useFileItem_1 = require("./useFileItem");
 const ImageItem = ({ item }) => {
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth } = (0, useFileItem_1.useFileItem)(item);
+    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`
+                        borderWidth: `${strokeWidth * 100}vw`,
+                        opacity: `${opacity}`,
+                        borderColor: `${strokeColor}`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
-           .image-wrapper-${item.id} {
-              position: absolute;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              border-style: solid;
-              box-sizing: border-box;
-              border-color: ${strokeColor};
-              opacity: ${opacity};
-            }`))}
-        .image {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-        }
+         .image-wrapper-${item.id} {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+          }
+          .image {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            object-fit: cover;
+            pointer-events: none;
+          }
       ` })] }) }));
 };
 exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -2,27 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RectangleItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@cntrl-site/sdk");
 const LinkWrapper_1 = require("../LinkWrapper");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useRectangleItem_1 = require("./useRectangleItem");
 const RectangleItem = ({ item }) => {
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { fillColor, radius, strokeWidth } = (0, useRectangleItem_1.useRectangleItem)(item);
+    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
                         backgroundColor: `${fillColor}`,
                         borderRadius: `${radius * 100}vw`,
-                        borderWidth: `${strokeWidth * 100}vw`
+                        borderWidth: `${strokeWidth * 100}vw`,
+                        borderColor: `${strokeColor}`
                     } }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor }]) => (`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
             height: 100%;
             border-style: solid;
             box-sizing: border-box;
-            border-color: ${strokeColor};
-          }`))}
+          }
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;

package/lib/components/items/VideoItem.js

@@ -3,34 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const LinkWrapper_1 = require("../LinkWrapper");
-const sdk_1 = require("@cntrl-site/sdk");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const useFileItem_1 = require("./useFileItem");
 const VideoItem = ({ item }) => {
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth } = (0, useFileItem_1.useFileItem)(item);
+    const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
-                    borderWidth: `${strokeWidth * 100}vw`
+                    borderWidth: `${strokeWidth * 100}vw`,
+                    opacity: `${opacity}`,
+                    borderColor: `${strokeColor}`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
-         .video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            border-style: solid;
-            box-sizing: border-box;
-            border-color: ${strokeColor};
-            opacity: ${opacity};
-          }`))}
-      .video {
-        width: 100%;
-        height: 100%;
-        opacity: 1;
-        object-fit: cover;
-        pointer-events: none;
-      }
+       .video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+          border-color: ${strokeColor};
+          opacity: ${opacity};
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
     ` })] }));
 };
 exports.VideoItem = VideoItem;

package/lib/components/items/useFileItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileItem = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const defaultColor = 'rgba(0, 0, 0, 1)';
 const useFileItem = (item) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
@@ -17,6 +18,18 @@ const useFileItem = (item) => {
         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 };
+    const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+    }, (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity, [layoutId]);
+    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return defaultColor;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color);
+    return { radius, strokeWidth, opacity, strokeColor };
 };
 exports.useFileItem = useFileItem;

package/lib/components/items/useRectangleItem.js

@@ -24,6 +24,12 @@ const useRectangleItem = (item) => {
         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 };
+    const strokeColor = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return defaultColor;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+    }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color);
+    return { fillColor, strokeWidth, radius, strokeColor };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/utils/Animator/Animator.js

@@ -63,6 +63,21 @@ class Animator {
             color: this.getRgba(start, end, pos)
         };
     }
+    getBorderColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderColor];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                color: keyframe.value.color
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            color: this.getRgba(start, end, pos)
+        };
+    }
     getRadius(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderRadius];
         if (!keyframes || !keyframes.length)
@@ -108,6 +123,21 @@ class Animator {
             angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, true)
         };
     }
+    getOpacity(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Opacity];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                opacity: keyframe.value.opacity
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            opacity: rangeMap(pos, start.position, end.position, start.value.opacity, end.value.opacity, true)
+        };
+    }
     getStartEnd(position, keyframes) {
         const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
         const end = index === keyframes.length ? index - 1 : index;
@@ -146,7 +176,9 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.BorderWidth]: [],
         [sdk_1.KeyframeType.BorderRadius]: [],
         [sdk_1.KeyframeType.Color]: [],
-        [sdk_1.KeyframeType.Rotation]: []
+        [sdk_1.KeyframeType.Rotation]: [],
+        [sdk_1.KeyframeType.BorderColor]: [],
+        [sdk_1.KeyframeType.Opacity]: []
     };
 }
 function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,16 +21,16 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.4.1",
+    "@cntrl-site/sdk": "^0.4.2",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
     "next": "^12.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "lodash.isequal": "^4.5.0",
-    "@types/lodash.isequal": "^4.5.6"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",

package/src/components/items/ImageItem.tsx

@@ -1,45 +1,40 @@
 import { FC } from 'react';
-import { getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
+import { TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
-import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useFileItem } from './useFileItem';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
-  const { layouts } = useCntrlContext();
-  const { radius, strokeWidth } = useFileItem(item);
+  const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
         <div className={`image-wrapper-${item.id}`}
           style={{
             borderRadius: `${radius * 100}vw`,
-            borderWidth: `${strokeWidth * 100}vw`
+            borderWidth: `${strokeWidth * 100}vw`,
+            opacity: `${opacity}`,
+            borderColor: `${strokeColor}`
           }}
         >
           <img className="image" src={item.commonParams.url} />
         </div>
         <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
-           .image-wrapper-${item.id} {
-              position: absolute;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              border-style: solid;
-              box-sizing: border-box;
-              border-color: ${strokeColor};
-              opacity: ${opacity};
-            }`
-        ))
-        }
-        .image {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-        }
+         .image-wrapper-${item.id} {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+          }
+          .image {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            object-fit: cover;
+            pointer-events: none;
+          }
       `}</style>
       </>
     </LinkWrapper>

package/src/components/items/RectangleItem.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
-import { TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
+import { TRectangleItem } 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);
+  const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
@@ -15,20 +13,18 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
           style={{
             backgroundColor: `${fillColor}`,
             borderRadius: `${radius * 100}vw`,
-            borderWidth: `${strokeWidth * 100}vw`
+            borderWidth: `${strokeWidth * 100}vw`,
+            borderColor: `${strokeColor}`
           }}
         />
         <style jsx>{`
-      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor }]) => (`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
             height: 100%;
             border-style: solid;
             box-sizing: border-box;
-            border-color: ${strokeColor};
-          }`
-        ))}
+          }
       `}</style>
       </>
     </LinkWrapper>

package/src/components/items/VideoItem.tsx

@@ -2,19 +2,18 @@ import { FC } from 'react';
 import { TVideoItem } from '@cntrl-site/sdk';
 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);
+  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
       <div className={`video-wrapper-${item.id}`}
          style={{
            borderRadius: `${radius * 100}vw`,
-           borderWidth: `${strokeWidth * 100}vw`
+           borderWidth: `${strokeWidth * 100}vw`,
+           opacity: `${opacity}`,
+           borderColor: `${strokeColor}`
          }}
       >
         <video autoPlay muted loop playsInline className="video">
@@ -22,26 +21,23 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
         </video>
       </div>
       <style jsx>{`
-      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
-         .video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            border-style: solid;
-            box-sizing: border-box;
-            border-color: ${strokeColor};
-            opacity: ${opacity};
-          }`
-      ))
-      }
-      .video {
-        width: 100%;
-        height: 100%;
-        opacity: 1;
-        object-fit: cover;
-        pointer-events: none;
-      }
+       .video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          border-style: solid;
+          box-sizing: border-box;
+          border-color: ${strokeColor};
+          opacity: ${opacity};
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
     `}</style>
     </LinkWrapper>
   );

package/src/components/items/useFileItem.ts

@@ -2,6 +2,8 @@ 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) => {
   const layoutId = useCurrentLayout();
   const radius = useKeyframeValue(
@@ -25,5 +27,26 @@ export const useFileItem = (item: TImageItem | TVideoItem) => {
     [layoutId]
   );
 
-  return { radius, strokeWidth };
+  const opacity = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 0;
+    },
+    (animator, scroll, value) => animator.getOpacity({ opacity: value }, scroll).opacity,
+    [layoutId]
+  );
+
+  const strokeColor = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return defaultColor;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+    },
+    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color
+  );
+
+  return { radius, strokeWidth, opacity, strokeColor };
 };

package/src/components/items/useRectangleItem.ts

@@ -35,6 +35,15 @@ export const useRectangleItem = (item: TRectangleItem) => {
     },
     (animator, scroll, value) => animator.getColor({ color: value }, scroll).color
   );
+  const strokeColor = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return defaultColor;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+    },
+    (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color
+  );
 
-  return { fillColor, strokeWidth, radius };
+  return { fillColor, strokeWidth, radius, strokeColor };
 };

package/src/utils/Animator/Animator.ts

@@ -88,6 +88,24 @@ export class Animator {
     };
   }
 
+  getBorderColor(
+    values: TKeyframeValueMap[KeyframeType.BorderColor],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BorderColor] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderColor];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        color: keyframe.value.color
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BorderColor>(pos, keyframes);
+    return {
+      color: this.getRgba(start, end, pos)
+    };
+  }
+
   getRadius(
     values: TKeyframeValueMap[KeyframeType.BorderRadius],
     pos: number
@@ -142,6 +160,24 @@ export class Animator {
     };
   }
 
+  getOpacity(
+    values: TKeyframeValueMap[KeyframeType.Opacity],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Opacity] {
+    const keyframes = this.keyframesMap[KeyframeType.Opacity];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        opacity: keyframe.value.opacity
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Opacity>(pos, keyframes);
+    return {
+      opacity: rangeMap(pos, start.position, end.position, start.value.opacity, end.value.opacity, 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;
@@ -157,8 +193,8 @@ export class Animator {
   }
 
   private getRgba(
-    start: AnimationData<KeyframeType.Color>,
-    end: AnimationData<KeyframeType.Color>,
+    start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
+    end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
     position: number
   ): string {
     const [startR, startG, startB, startA] = parseRgba(start.value.color);
@@ -187,7 +223,9 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.BorderWidth]: [],
     [KeyframeType.BorderRadius]: [],
     [KeyframeType.Color]: [],
-    [KeyframeType.Rotation]: []
+    [KeyframeType.Rotation]: [],
+    [KeyframeType.BorderColor]: [],
+    [KeyframeType.Opacity]: []
   };
 }