@cntrl-site/sdk-nextjs 1.9.23 → 1.9.24

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

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

@@ -48,13 +48,9 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const stroke = strokeFill
         ? (_g = (0, getFill_1.getFill)(strokeFill)) !== null && _g !== void 0 ? _g : 'transparent'
         : 'transparent';
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
-                        backgroundPosition: 'center',
-                        backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
-                        backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-                    } : {})) : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), children: itemFill && itemFill.map((fill) => {
+                        : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), children: itemFill && itemFill.map((fill, index) => {
                         var _a, _b;
                         const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
                         const value = stateFillLayer
@@ -63,7 +59,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
                         const background = value
                             ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
                             : 'transparent';
-                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth }));
+                        return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, transition: (stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) || '', radius: radius, strokeWidth: strokeWidth, isHighest: index === itemFill.length - 1, borderColor: stroke }, fill.id));
                     }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .rectangle-${item.id} {
           position: absolute;
@@ -96,16 +92,27 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       ` })] }) }));
 };
 exports.RectangleItem = RectangleItem;
-function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }) {
+function Fill({ fill, itemId, background, solidTransition, transition, radius, strokeWidth, isHighest, borderColor }) {
     const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
-    return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
+    return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? {
+            background,
+            transition: transition && transition !== 'none' && transition.trim()
+                ? `${solidTransition}, ${transition}`
+                : solidTransition
+        } : {})), (fill.type === 'image'
             ? {
                 transform: `rotate(${fill.rotation}deg)`,
                 backgroundImage: `url(${fill.src})`,
                 backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
                 backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+                backgroundOrigin: 'border-box',
                 opacity: fill.opacity
             }
-            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
+            : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `${radius * 100}vw`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isHighest ? {
+            borderColor,
+            borderWidth: `${strokeWidth * 100}vw`,
+            borderStyle: 'solid',
+            boxSizing: 'border-box'
+        } : {})), (isRotatedImage ? { overflow: 'hidden' } : {})), (fill.type !== 'solid' ? { transition } : {})) }));
 }
 ;

package/package.json

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

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

@@ -58,18 +58,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            ...(strokeFill ? {
-              borderColor: stroke,
-              borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0,
-              borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
-              borderStyle: 'solid',
-              ...(strokeFill.type === 'image' ? {
-                backgroundPosition: 'center',
-                backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
-                backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
-              } : {})
-            } : {}),
-            ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
@@ -80,7 +68,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
             transition: stateParams?.transition ?? 'none'
           }}
         >
-          {itemFill && itemFill.map((fill) => {
+          {itemFill && itemFill.map((fill, index) => {
             const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
             const value = stateFillLayer
               ? (getStyleFromItemStateAndParams<FillLayer>(stateFillLayer, fill) ?? fill)
@@ -91,12 +79,16 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
 
             return (
               <Fill
+                key={fill.id}
                 fill={value}
                 itemId={item.id}
                 background={background}
                 solidTransition={solidTransition}
+                transition={stateParams?.transition || ''}
                 radius={radius}
                 strokeWidth={strokeWidth}
+                isHighest={index === itemFill.length - 1}
+                borderColor={stroke}
               />
             );
           })}
@@ -136,33 +128,55 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   );
 };
 
-function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; radius: number; strokeWidth: number; }) {
+function Fill({ fill, itemId, background, solidTransition, transition, radius, strokeWidth, isHighest, borderColor }: {
+  fill: FillLayer;
+  itemId: string;
+  background: string;
+  solidTransition: string;
+  transition: string;
+  radius: number;
+  strokeWidth: number;
+  isHighest: boolean;
+  borderColor: string;
+}) {
   const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
 
   return (
     <div
-      key={fill.id}
       className={fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`}
       style={{
-        ...(fill.type === 'solid' ? { background, transition: solidTransition } : {}),
+        ...(fill.type === 'solid' ? {
+          background,
+          transition: transition && transition !== 'none' && transition.trim()
+            ? `${solidTransition}, ${transition}`
+            : solidTransition
+        } : {}),
         ...(fill.type === 'image'
           ? {
               transform: `rotate(${fill.rotation}deg)`,
               backgroundImage: `url(${fill.src})`,
               backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
               backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
+              backgroundOrigin: 'border-box',
               opacity: fill.opacity
             }
           : { background }),
         position: 'absolute',
         mixBlendMode: fill.blendMode as any,
-        borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`,
+        borderRadius: `${radius * 100}vw`,
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
-        ...(isRotatedImage ? { overflow: 'hidden' } : {})
+        ...(isHighest ? {
+          borderColor,
+          borderWidth: `${strokeWidth * 100}vw`,
+          borderStyle: 'solid',
+          boxSizing: 'border-box'
+        } : {}),
+        ...(isRotatedImage ? { overflow: 'hidden' } : {}),
+        ...(fill.type !== 'solid' ? { transition } : {})
       }}
     >
     </div>