@cntrl-site/sdk-nextjs 1.6.10 → 1.6.11-alpha.0

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -69,7 +69,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { height: `${sizingAxis.y === 'manual'
                     ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;

package/lib/components/items/GroupItem/GroupItem.js

@@ -15,7 +15,8 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
-const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+const CompoundChild_1 = require("../CompoundItem/CompoundChild");
+const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
     var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { items } = item;
@@ -33,7 +34,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/interactions/InteractionsRegistry.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InteractionsRegistry = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
@@ -204,22 +193,26 @@ class InteractionsRegistry {
         }
     }
     unpackItems(article) {
-        var _a;
         const itemsArr = [];
         for (const section of article.sections) {
-            for (const item of section.items) {
-                const { items } = item, itemWithoutChildren = __rest(item, ["items"]);
-                itemsArr.push(itemWithoutChildren);
-                if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
-                    const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
-                    for (const child of groupChildren) {
-                        itemsArr.push(child);
-                    }
-                }
-            }
+            const items = this.getNestedItems(section.items);
+            itemsArr.push(...items);
         }
         return itemsArr;
     }
+    getNestedItems(items) {
+        var _a;
+        const allItems = [];
+        for (const item of items) {
+            if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
+                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
+                const nestedItems = this.getNestedItems(groupChildren);
+                allItems.push(...nestedItems);
+            }
+            allItems.push(item);
+        }
+        return allItems;
+    }
     getDefaultItemStages() {
         const timestamp = Date.now();
         const { items, layoutId } = this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.10",
+  "version": "1.6.11-alpha.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/CompoundItem/CompoundChild.tsx

@@ -83,13 +83,13 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
         ...(top !== undefined && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
         ...(left !== undefined && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
         ...(width !== undefined && compoundSettings
-          ? { width: `${sizingAxis.x === 'manual' 
-              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary) 
+          ? { width: `${sizingAxis.x === 'manual'
+              ? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
               : 'max-content'}` }
           : {}),
         ...(height !== undefined && compoundSettings
-          ? { height: `${sizingAxis.y === 'manual' 
-              ? getCompoundHeight(compoundSettings, height) 
+          ? { height: `${sizingAxis.y === 'manual'
+              ? getCompoundHeight(compoundSettings, height)
               : 'unset'}` }
           : {}),
         ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
@@ -99,25 +99,27 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
       }}
       {...triggers}
     >
-      <div className={`item-${item.id}-inner`}
+      <div
+        className={`item-${item.id}-inner`}
         style={{
           ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
         }}
       >
-      <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
-        <ItemComponent
-          item={item}
-          sectionId={sectionId}
-          interactionCtrl={interactionCtrl}
-          onVisibilityChange={handleVisibilityChange}
-        />
-      </RichTextWrapper>
+        <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
+          <ItemComponent
+            item={item}
+            sectionId={sectionId}
+            interactionCtrl={interactionCtrl}
+            onVisibilityChange={handleVisibilityChange}
+            isInCompound
+          />
+        </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
-          const sizingAxis = parseSizing(layoutParams.sizing);
-          const scaleAnchor = area.scaleAnchor as AreaAnchor;
-          return (`
+      const sizingAxis = parseSizing(layoutParams.sizing);
+      const scaleAnchor = area.scaleAnchor as AreaAnchor;
+      return (`
             .item-${item.id}-inner {
               width: 100%;
               height: 100%;
@@ -131,15 +133,16 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
               transition: opacity 0.2s linear 0.1s;
               display: ${hidden ? 'none' : 'block'};
               width: ${sizingAxis.x === 'manual'
-                ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
-                : 'max-content'};
+          ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
+          : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
               transform: ${getCompoundTransform(compoundSettings)};
               z-index: ${area.zIndex};
             }
           `);
-      })}
-      `}</JSXStyle>
+    })}
+      `}
+      </JSXStyle>
     </div>
   );
 };

package/src/components/items/GroupItem/GroupItem.tsx

@@ -8,8 +8,9 @@ import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { CompoundChild } from '../CompoundItem/CompoundChild';
 
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
   const id = useId();
   const { items } = item;
   const itemAngle = useItemAngle(item, sectionId);
@@ -39,7 +40,14 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
             transition: stateParams?.transition ?? 'none'
           }}
         >
-          {items && items.map(item => (
+          {items && items.map(item => isInCompound ? (
+            <CompoundChild
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+            />
+          ) : (
             <Item
               item={item}
               key={item.id}
@@ -57,13 +65,13 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           box-sizing: border-box;
         }
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          return (`
+      return (`
             .group-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
             }
           `);
-        })}
+    })}
       `}</JSXStyle>
       </>
     </LinkWrapper>

package/src/components/items/Item.tsx

@@ -43,6 +43,7 @@ export interface ItemProps<I extends ItemAny> {
   onResize?: (height: number) => void;
   interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
   onVisibilityChange: (isVisible: boolean) => void;
+  isInCompound?: boolean;
 }
 
 export interface ItemWrapperProps {
@@ -107,7 +108,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     if (!item) return;
     if (drag) {
       setIsDraggingActive(true);
-      setPosition({ 
+      setPosition({
         x: (currentX - startX) + lastX,
         y: (currentY - startY) + lastY
       });
@@ -183,12 +184,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
                 : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
               transition: innerStateProps?.transition ?? 'none',
-              cursor: isDraggingActive 
-                ? 'grabbing' 
-                : isDraggable 
+              cursor: isDraggingActive
+                ? 'grabbing'
+                : isDraggable
                   ? 'grab'
-                  : hasClickTriggers 
-                    ? 'pointer' 
+                  : hasClickTriggers
+                    ? 'pointer'
                     : 'unset',
               pointerEvents: allowPointerEvents ? 'auto' : 'none',
               userSelect: isDraggable ? 'none' : 'unset',

package/src/interactions/InteractionsRegistry.ts

@@ -206,20 +206,25 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   private unpackItems(article: Article): ItemAny[] {
     const itemsArr = [];
     for (const section of article.sections) {
-      for (const item of section.items) {
-        const { items, ...itemWithoutChildren } = item;
-        itemsArr.push(itemWithoutChildren);
-        if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
-          const groupChildren = item?.items ?? [];
-          for (const child of groupChildren) {
-            itemsArr.push(child);
-          }
-        }
-      }
+      const items = this.getNestedItems(section.items);
+      itemsArr.push(...items);
     }
     return itemsArr;
   }
 
+  private getNestedItems(items: ItemAny[]): ItemAny[] {
+    const allItems: ItemAny[] = [];
+    for (const item of items) {
+      if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
+        const groupChildren = item?.items ?? [];
+        const nestedItems = this.getNestedItems(groupChildren);
+        allItems.push(...nestedItems);
+      }
+      allItems.push(item);
+    }
+    return allItems;
+  }
+
   private getDefaultItemStages(): ItemStages {
     const timestamp = Date.now();
     const { items, layoutId } = this;

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>