@cntrl-site/sdk-nextjs 1.9.40 → 1.9.41-12

package/lib/components/items/Item.js

@@ -29,6 +29,7 @@ const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
 const useDraggable_1 = require("./useDraggable");
 const ItemGeometryContext_1 = require("../../ItemGeometry/ItemGeometryContext");
+const ItemArea_1 = require("@cntrl-site/sdk/lib/types/article/ItemArea");
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
@@ -117,6 +118,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 : ItemArea_1.DimensionsType.PixelsBased;
+    const itemInnerHeight = dimensionsType === ItemArea_1.DimensionsType.PercentageBased ? `${height}vh` : `${height * 100}vw`;
+    const itemInnerWidth = dimensionsType === ItemArea_1.DimensionsType.PercentageBased ? `${width}vw` : isRichText ? `${width * exemplary}px` : `${width * 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;
@@ -131,12 +135,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
                 }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
                             ? {
-                                width: `${sizingAxis.x === 'manual'
-                                    ? isRichText
-                                        ? `${width * exemplary}px`
-                                        : `${width * 100}vw`
-                                    : 'max-content'}`,
-                                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                                width: `${sizingAxis.x === 'manual' ? itemInnerWidth : 'max-content'}`,
+                                height: `${sizingAxis.y === 'manual' ? itemInnerHeight : 'unset'}` // here
                             }
                             : {})), (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 +149,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) === ItemArea_1.DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -162,7 +163,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;

package/lib/utils/getItemTopStyle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getItemTopStyle = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 function getItemTopStyle(top, anchorSide) {
+    console.log('getItemTopStyle', top);
     const defaultValue = `${top * 100}vw`;
     if (!anchorSide)
         return defaultValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.40",
+  "version": "1.9.41-12",
   "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.28",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.6",
+    "@cntrl-site/sdk": "^1.25.7",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/Item.tsx

@@ -36,6 +36,7 @@ import { useItemPointerEvents } from './useItemPointerEvents';
 import { useItemArea } from './useItemArea';
 import { useDraggable } from './useDraggable';
 import { ItemGeometryContext } from '../../ItemGeometry/ItemGeometryContext';
+import { DimensionsType } from '@cntrl-site/sdk/lib/types/article/ItemArea';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -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 itemInnerHeight = dimensionsType === DimensionsType.PercentageBased ? `${height}vh` : `${height! * 100}vw`;
+  const itemInnerWidth = dimensionsType === DimensionsType.PercentageBased ? `${width}vw` : isRichText ? `${width! * exemplary}px` : `${width! * 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;
@@ -185,12 +189,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               left: `${position.x}px`,
               ...((width !== undefined && height !== undefined)
                 ? {
-                    width: `${sizingAxis.x === 'manual'
-                      ? isRichText
-                        ? `${width * exemplary}px`
-                        : `${width * 100}vw`
-                      : 'max-content'}`,
-                    height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
+                    width: `${sizingAxis.x === 'manual' ? itemInnerWidth : 'max-content'}`,
+                    height: `${sizingAxis.y === 'manual' ? itemInnerHeight : 'unset'}` // here
                   }
                 : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
@@ -226,6 +226,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 +240,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;

package/src/utils/getItemTopStyle.ts

@@ -1,6 +1,7 @@
 import { AnchorSide } from '@cntrl-site/sdk';
 
 export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  console.log('getItemTopStyle', top);
   const defaultValue = `${top * 100}vw`;
   if (!anchorSide) return defaultValue;
   switch (anchorSide) {