@cntrl-site/sdk-nextjs 1.9.42 → 1.9.44

package/lib/components/items/Item.js

@@ -117,6 +117,9 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     };
     const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
     const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
+    const dimensionsType = layout ? item.area[layout].dimensionsType : sdk_1.DimensionsType.PixelsBased;
+    const isContainItem = dimensionsType === sdk_1.DimensionsType.PercentageBased;
+    const itemInnerHeight = isContainItem ? `${height}vh` : `${height * 100}vw`;
     const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
@@ -125,7 +128,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(top, height, anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
@@ -136,7 +139,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                         ? `${width * exemplary}px`
                                         : `${width * 100}vw`
                                     : 'max-content'}`,
-                                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                                height: `${sizingAxis.y === 'manual' ? itemInnerHeight : 'unset'}`
                             }
                             : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: isDraggingActive
                                 ? 'grabbing'
@@ -149,6 +152,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;
+                    const innerHeight = (area === null || area === void 0 ? void 0 : area.dimensionsType) && (area === null || area === void 0 ? void 0 : area.dimensionsType) === sdk_1.DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -162,7 +166,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               width: ${sizingAxis.x === 'manual'
                         ? `${area.width * 100}vw`
                         : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
+              height: ${sizingAxis.y === 'manual' ? innerHeight : 'unset'};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
               position: relative;
@@ -173,7 +177,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              top: ${isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(area.top, area.height, area.anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
             }
           `);

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -24,8 +24,8 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
-    const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'backdropBlur', 'strokeFill']);
+    const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill', 'strokeWidth', 'radius']);
     const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
     const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
     const styles = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _c !== void 0 ? _c : {};

package/lib/utils/getItemTopStyle.js

@@ -1,7 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTopStyle = void 0;
+exports.getItemTopStyle = exports.getPercentageBasedTopStyle = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
+function getAnchorSideShift(anchorSide, height) {
+    if (!height)
+        return 0;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Center:
+            return height / 2;
+        case sdk_1.AnchorSide.Bottom:
+            return height;
+        default:
+            return 0;
+    }
+}
+function getPercentageBasedTopStyle(top, height, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+    }
+}
+exports.getPercentageBasedTopStyle = getPercentageBasedTopStyle;
 function getItemTopStyle(top, anchorSide) {
     const defaultValue = `${top * 100}vw`;
     if (!anchorSide)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.42",
+  "version": "1.9.44",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^0.1.29",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.6",
+    "@cntrl-site/sdk": "^1.25.8",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/Item.tsx

@@ -13,13 +13,14 @@ import {
   getLayoutStyles,
   ItemAny,
   AreaAnchor,
-  PositionType
+  PositionType,
+  DimensionsType
 } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../../utils/ScaleAnchorMap';
 import { useSectionHeightData } from '../Section/useSectionHeightMap';
-import { getItemTopStyle } from '../../utils/getItemTopStyle';
+import { getItemTopStyle, getPercentageBasedTopStyle } from '../../utils/getItemTopStyle';
 import { useStickyItemTop } from './useStickyItemTop';
 import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
 import { useLayoutContext } from '../useLayoutContext';
@@ -146,6 +147,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
   const anchorSide = layout ? item.area[layout].anchorSide : AnchorSide.Top;
+  const dimensionsType = layout ? item.area[layout].dimensionsType : DimensionsType.PixelsBased;
+  const isContainItem = dimensionsType === DimensionsType.PercentageBased;
+  const itemInnerHeight = isContainItem ? `${height}vh` : `${height! * 100}vw`;
   const positionType = layout ? item.area[layout].positionType : PositionType.ScreenBased;
   const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   const scale = innerStateProps?.styles?.scale ?? itemScale;
@@ -159,7 +163,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         interactionCtrl?.handleTransitionEnd?.(e.propertyName);
       }}
       style={{
-        ...(top !== undefined ? { top: isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide) } : {}),
+        ...(top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(top, height, anchorSide) : getItemTopStyle(top, anchorSide) } : {}),
         ...(left !== undefined ? { left: `${left * 100}vw` } : {}),
         ...(top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {}),
         ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
@@ -190,7 +194,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
                         ? `${width * exemplary}px`
                         : `${width * 100}vw`
                       : 'max-content'}`,
-                    height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                    height: `${sizingAxis.y === 'manual' ? itemInnerHeight : 'unset'}`
                   }
                 : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
@@ -226,6 +230,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
       const sizingAxis = parseSizing(layoutParams.sizing);
       const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
       const scaleAnchor = area.scaleAnchor as AreaAnchor;
+      const innerHeight = area?.dimensionsType && area?.dimensionsType === DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
       return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -239,7 +244,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               width: ${sizingAxis.x === 'manual'
           ? `${area.width * 100}vw`
           : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
+              height: ${sizingAxis.y === 'manual' ? innerHeight : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
               position: relative;
@@ -250,7 +255,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
-              top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
+              top: ${isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(area.top, area.height, area.anchorSide) : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
             }
           `);

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -25,8 +25,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
     backdropBlur: itemBackdropBlur
   } = useRectangleItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
-  const stateParams = interactionCtrl?.getState<any>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
-  const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill']);
+  const stateParams = interactionCtrl?.getState<any>(['angle', 'blur', 'backdropBlur', 'strokeFill']);
+  const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill', 'strokeWidth', 'radius']);
   const stateFillLayers = stateFillParams?.styles?.fill;
   const solidTransition = stateFillParams?.transition ?? 'none';
   const styles = stateParams?.styles ?? {};

package/src/utils/getItemTopStyle.ts

@@ -1,5 +1,30 @@
 import { AnchorSide } from '@cntrl-site/sdk';
 
+function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
+  if (!height) return 0;
+  switch (anchorSide) {
+    case AnchorSide.Center:
+      return height / 2;
+    case AnchorSide.Bottom:
+      return height;
+    default:
+      return 0;
+  }
+}
+
+export function getPercentageBasedTopStyle(top: number, height?: 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 - ${getAnchorSideShift(anchorSide, height)}vh)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+  }
+}
+
 export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
   const defaultValue = `${top * 100}vw`;
   if (!anchorSide) return defaultValue;