@cntrl-site/sdk-nextjs 1.8.40 → 1.9.0

package/src/components/items/FileItem/useFileItem.ts

@@ -2,7 +2,15 @@ import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { useLayoutContext } from '../../useLayoutContext';
 
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+const DEFAULT_FILL = [
+  {
+    id: 'default',
+    type: 'solid' as const,
+    value: 'rgba(0, 0, 0, 1)',
+    blendMode: 'normal'
+  }
+];
+
 export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
@@ -43,15 +51,15 @@ export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
     [layoutId]
   );
 
-  const strokeColor = useKeyframeValue(
+  const strokeFill = useKeyframeValue(
     item,
-    KeyframeType.BorderColor,
+    KeyframeType.BorderFill,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : DEFAULT_COLOR;
+      return 'strokeFill' in layoutParams ? layoutParams.strokeFill : DEFAULT_FILL;
     },
-    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
+    (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
@@ -69,5 +77,5 @@ export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
     [layoutId]
   );
 
-  return { radius, strokeWidth, opacity, strokeColor, blur };
+  return { radius, strokeWidth, opacity, strokeFill, blur };
 }

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

@@ -19,7 +19,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
+  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
   const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);

package/src/components/items/Item.tsx

@@ -82,8 +82,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const triggers = useItemTriggers(interactionCtrl);
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [isDraggingActive, setIsDraggingActive] = useState(false);
-  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
-  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
+  const wrapperStateProps = interactionCtrl?.getState<number>(['top', 'left']);
+  const innerStateProps = interactionCtrl?.getState<number>(['width', 'height', 'scale']);
   const { width, height, top, left } = useItemArea(item, sectionId, {
     top: wrapperStateProps?.styles?.top as number,
     left: wrapperStateProps?.styles?.left as number,

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

@@ -9,29 +9,30 @@ import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
+import { getFill } from '../../../utils/getFill';
+import { areFillsVisible } from '../../../utils/areFillsVisible/areFillsVisible';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const {
-    fillColor: itemFillColor,
+    fill: itemFill,
     radius: itemRadius,
     strokeWidth: itemStrokeWidth,
-    strokeColor: itemStrokeColor,
+    strokeFill: itemStrokeFill,
     blur: itemBlur,
     backdropBlur: itemBackdropBlur
   } = useRectangleItem(item, sectionId);
   const itemAngle = useItemAngle(item, sectionId);
-  const stateParams = interactionCtrl?.getState(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur']);
+  const stateParams = interactionCtrl?.getState<number>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
+  const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill']);
+  const stateFillLayers = stateFillParams?.styles?.fill;
+  const solidTransition = stateFillParams?.transition ?? 'none';
+  const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
+  const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
+  const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
   const styles = stateParams?.styles ?? {};
-  const backgroundColor = useMemo(() => {
-    const fillColor = getStyleFromItemStateAndParams(styles?.fillColor, itemFillColor);
-    return fillColor ? CntrlColor.parse(fillColor) : undefined;
-  }, [itemFillColor, styles?.fillColor]);
-  const borderColor = useMemo(() => {
-    const strokeColor = getStyleFromItemStateAndParams(styles?.strokeColor, itemStrokeColor);
-    return strokeColor ? CntrlColor.parse(strokeColor) : undefined;
-  }, [itemStrokeColor, styles?.strokeColor]);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
@@ -41,11 +42,18 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
   const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
   const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
   const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-  const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
+  const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? []) || (strokeWidth !== 0 && areFillsVisible(stateStrokeFillLayers ?? itemStrokeFill ?? []));
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
 
+  const strokeValue = stateStrokeFillLayers
+    ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
+    : itemStrokeFill?.[0];
+  const stroke = strokeValue
+    ? getFill(strokeValue) ?? 'transparent'
+    : 'transparent';
+
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
@@ -53,10 +61,15 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
           className={`rectangle-${item.id}`}
           ref={setRef}
           style={{
-            ...(backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {}),
-            ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
+            ...(strokeValue ? {
+              '--stroke-background': stroke,
+              ...(strokeValue.type === 'image' ? {
+                backgroundPosition: 'center',
+                backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+              } : {})
+            } : {}),
             ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
-            ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
             willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
@@ -66,32 +79,121 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
             ),
             transition: stateParams?.transition ?? 'none'
           }}
-        />
+        >
+          <div
+            className={`rectangle-border-${item.id}`}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              borderRadius: 'inherit',
+              pointerEvents: 'none',
+              zIndex: 2,
+              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+              WebkitMaskComposite: 'xor',
+              maskComposite: 'exclude',
+              ...(strokeWidth !== 0 && strokeValue ? {
+                ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
+                ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
+                ...(strokeValue.type === 'image' ? {
+                  backgroundPosition: 'center',
+                  backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
+                  backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
+                } : {
+                  background: stroke,
+                }
+                )
+              } : { background: stroke }),
+            }}
+          />
+          {itemFill && itemFill.map((fill) => {
+            const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
+            const value = stateFillLayer
+              ? (getStyleFromItemStateAndParams<FillLayer>(stateFillLayer, fill) ?? fill)
+              : fill;
+            const background = value
+              ? getFill(value) ?? 'transparent'
+              : 'transparent';
+
+            return (
+              <Fill fill={value} itemId={item.id} background={background} solidTransition={solidTransition} />
+            );
+          })}
+        </div>
         <JSXStyle id={id}>{`
         .rectangle-${item.id} {
           position: absolute;
           width: 100%;
           height: 100%;
-          border-style: solid;
           box-sizing: border-box;
-        }
+        },
+        .image-fill-${item.id} {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center center;
+          z-index: 1;
+          background-position: center;
+        },
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          return (`
+      return (`
             .rectangle-${item.id} {
-              background-color: ${CntrlColor.parse(layoutParams.fillColor).fmt('rgba')};
-              border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
-              border-radius: ${layoutParams.radius * 100}vw;
-              border-width: ${layoutParams.strokeWidth * 100}vw;
+              border-radius: ${layoutParams.radius * 100}vw
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
               backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
               -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
+            },
+            .rectangle-border-${item.id} {
+              position: absolute;
+              inset: 0;
+              border-radius: inherit;
+              pointer-events: none;
+              z-index: 2;
+              -webkit-mask:
+                linear-gradient(#fff 0 0) content-box,
+                linear-gradient(#fff 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
             }
           `);
-        })}
+    })}
       `}</JSXStyle>
       </>
     </LinkWrapper>
   );
 };
+
+function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer; itemId: string; background: string; solidTransition: 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 === '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',
+              opacity: fill.opacity
+            }
+          : { background }),
+        position: 'absolute',
+        mixBlendMode: fill.blendMode as any,
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        ...(isRotatedImage ? { overflow: 'hidden' } : {})
+      }}
+    >
+    </div>
+  );
+};

package/src/components/items/RectangleItem/useRectangleItem.ts

@@ -2,7 +2,14 @@ import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { useLayoutContext } from '../../useLayoutContext';
 
-const defaultColor = 'rgba(0, 0, 0, 1)';
+const defaultFill = [
+  {
+    id: 'default',
+    type: 'solid' as const,
+    value: 'rgba(0, 0, 0, 1)',
+    blendMode: 'normal'
+  }
+];
 
 export function useRectangleItem(item: RectangleItem, sectionId: string) {
   const layoutId = useLayoutContext();
@@ -30,27 +37,27 @@ export function useRectangleItem(item: RectangleItem, sectionId: string) {
     sectionId,
     [layoutId]
   );
-  const fillColor = useKeyframeValue(
+  const fill = useKeyframeValue(
     item,
-    KeyframeType.Color,
+    KeyframeType.Fill,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
+      return 'fill' in layoutParams ? layoutParams.fill : defaultFill;
     },
-    (animator, scroll, value) => value ? animator.getColor({ color: value }, scroll).color : undefined,
+    (animator, scroll, value) => value ? animator.getFill(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
-  const strokeColor = useKeyframeValue(
+  const strokeFill = useKeyframeValue(
     item,
-    KeyframeType.BorderColor,
+    KeyframeType.BorderFill,
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
+      return 'strokeFill' in layoutParams ? layoutParams.strokeFill : defaultFill;
     },
-    (animator, scroll, value) => value ? animator.getBorderColor({ color: value }, scroll).color : undefined,
+    (animator, scroll, value) => value ? animator.getBorderFill(value, scroll) : undefined,
     sectionId,
     [layoutId]
   );
@@ -78,5 +85,5 @@ export function useRectangleItem(item: RectangleItem, sectionId: string) {
     sectionId,
     [layoutId]
   );
-  return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
+  return { fill, strokeWidth, radius, strokeFill, blur, backdropBlur };
 }

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -30,11 +30,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const exemplary = useExemplary();
   const { layoutId } = useCurrentLayout();
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
+  const stateParams = interactionCtrl?.getState<number | string>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
   const stateStyles = stateParams?.styles ?? {};
   const transition = stateParams?.transition ?? 'none';
   const textColor = useMemo(() => {
-    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color, itemColor);
+    const color = getStyleFromItemStateAndParams(stateParams?.styles?.color as string, itemColor);
     return color ? CntrlColor.parse(color) : undefined;
   }, [itemColor, stateStyles.color]);
   const angle = getStyleFromItemStateAndParams(stateStyles.angle, itemAngle);
@@ -60,11 +60,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         ref={setRef}
         className={`rich-text-wrapper-${item.id}`}
         style={{
-          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur as number * 100}vw)` } : {}),
           ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
-          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
+          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing as number * exemplary}px` } : {}),
+          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing as number * exemplary}px` } : {}),
           ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
           ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',

package/src/interactions/CSSPropertyNameMap.ts

@@ -1,37 +1,36 @@
 import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
 
 export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  'width': 'width',
-  'height': 'height',
-  'top': 'top',
-  'left': 'left',
-  'scale': 'transform',
-  'angle': 'transform',
-  'opacity': 'opacity',
-  'radius': 'border-radius',
-  'strokeWidth': 'border-width',
-  'strokeColor': 'border-color',
-  'fillColor': 'background-color',
-  'blur': 'filter',
-  'backdropBlur': 'backdrop-filter',
-  'letterSpacing': 'letter-spacing',
-  'wordSpacing': 'word-spacing',
-  'color': 'color'
+  width: 'width',
+  height: 'height',
+  top: 'top',
+  left: 'left',
+  scale: 'transform',
+  angle: 'transform',
+  opacity: 'opacity',
+  radius: 'border-radius',
+  strokeWidth: 'border-width',
+  strokeFill: 'border-color',
+  fill: 'background',
+  blur: 'filter',
+  backdropBlur: 'backdrop-filter',
+  letterSpacing: 'letter-spacing',
+  wordSpacing: 'word-spacing',
+  color: 'color'
 };
 
 const PropertyNameCSSMap: Record<string, string[]> = {
   'transform': ['angle', 'scale'],
   'border-radius': ['radius'],
   'border-width': ['strokeWidth'],
-  'border-color': ['strokeColor'],
-  'background-color': ['fillColor'],
+  'border-color': ['strokeFill'],
+  'background': ['fill'],
   'filter': ['blur'],
   'backdrop-filter': ['backdrop-blur'],
   'letter-spacing': ['letterSpacing'],
   'word-spacing': ['wordSpacing'],
 };
 
-
 export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
   const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
   return key;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,7 +1,7 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { InteractionItemTrigger } from '@cntrl-site/sdk';
+import { FillLayer, InteractionItemTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
@@ -15,12 +15,12 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     this.registry.register(itemId, this);
   }
 
-  getState(keys: string[]) {
+  getState<T>(keys: string[]) {
     const stateProps = this.registry.getStatePropsForItem(this.itemId);
-    const styles = keys.reduce<Record<string, string | number>>((map, styleKey) => {
+    const styles = keys.reduce<Record<string, T>>((map, styleKey) => {
       const prop = stateProps[styleKey];
       if (prop?.value === undefined) return map;
-      map[styleKey] = prop.value;
+      map[styleKey] = prop.value as T;
       return map;
     }, {});
     const transition = getTransition(stateProps, keys);

package/src/interactions/types.ts

@@ -1,7 +1,7 @@
-import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, FillLayer, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
-  getState(keys: string[]): StateCSSInfo;
+  getState<T>(keys: string[]): StateCSSInfo<T>;
   getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
@@ -13,19 +13,19 @@ export interface ItemInteractionCtrl {
 
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
-  getStatePropsForItem(itemId: string): StateProps;
+  getStatePropsForItem(itemId: string): StateProps<unknown>;
   getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
   notifyItemTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }
 
-type StateCSSInfo = {
-  styles: Partial<Record<string, string | number>>;
+type StateCSSInfo<T> = {
+  styles: Partial<Record<string, T>>;
   transition?: string;
 };
 
-type StateProps = Record<keyof ItemState<ArticleItemType>, {
-  value?: string | number;
+type StateProps<T> = Record<keyof ItemState<ArticleItemType>, {
+  value?: T;
   transition?: {
     timing: string;
     duration: number;