@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19-alpha.4

package/lib/provider/InteractionsContext.js

@@ -1,45 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InteractionsProvider = exports.InteractionsContext = void 0;
+exports.useInteractionsRegistry = exports.InteractionsProvider = exports.InteractionsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const defaultState = {
-    interactionsStatesMap: {},
-    interactions: [],
-    transitionTo: () => { },
-    getItemTrigger: () => null
-};
-exports.InteractionsContext = (0, react_1.createContext)(defaultState);
-const InteractionsProvider = ({ interactions, children }) => {
-    const defaultStatesMap = interactions.reduce((map, { id, startStateId }) => {
-        map[id] = startStateId;
-        return map;
-    }, {});
-    const [interactionsStatesMap, setInteractionsStatesMap] = (0, react_1.useState)(defaultStatesMap);
-    const transitionTo = (interactionId, stateId) => {
-        setInteractionsStatesMap((map) => (Object.assign(Object.assign({}, map), { [interactionId]: stateId })));
-    };
-    const getItemTrigger = (itemId, triggerType) => {
-        for (const interaction of interactions) {
-            const activeStateId = interactionsStatesMap[interaction.id];
-            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId &&
-                trigger.from === activeStateId &&
-                trigger.type === triggerType);
-            if (matchingTrigger) {
-                return {
-                    id: interaction.id,
-                    from: matchingTrigger.from,
-                    to: matchingTrigger.to,
-                };
-            }
-        }
-        return null;
-    };
-    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: {
-            transitionTo,
-            interactionsStatesMap,
-            interactions,
-            getItemTrigger
-        }, children: children }));
+const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+exports.InteractionsContext = (0, react_1.createContext)(undefined);
+const InteractionsProvider = ({ article, children }) => {
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const registry = (0, react_1.useMemo)(() => {
+        if (!layoutId)
+            return;
+        return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
+    }, [layoutId]);
+    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;
+function useInteractionsRegistry() {
+    const registry = (0, react_1.useContext)(exports.InteractionsContext);
+    return registry;
+}
+exports.useInteractionsRegistry = useInteractionsRegistry;

package/lib/utils/getStyleFromItemStateAndParams.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleFromItemStateAndParams = void 0;
+function getStyleFromItemStateAndParams(stateValue, paramsValue) {
+    return stateValue !== undefined
+        ? stateValue
+        : paramsValue;
+}
+exports.getStyleFromItemStateAndParams = getStyleFromItemStateAndParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.19-alpha.2",
+  "version": "1.0.19-alpha.4",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Article.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
-import { Article as TArticle, ArticleItemType, ItemState, ItemStateParams } from '@cntrl-site/sdk';
+import { Article as TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
@@ -28,7 +28,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <InteractionsProvider interactions={article.interactions}>
+      <InteractionsProvider article={article}>
         <ArticleWrapper>
           <div className="article" ref={articleRef}>
             {article.sections.map((section, i) => {

package/src/components/Item.tsx

@@ -31,16 +31,14 @@ import { GroupItem } from './items/GroupItem';
 import { CodeEmbedItem } from './items/CodeEmbedItem';
 import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
 import { KeyframesContext } from '../provider/KeyframesContext';
-import { InteractionsContext } from '../provider/InteractionsContext';
-import { getStatesCSS } from '../utils/getStatesCSS';
-import { useStatesClassNames } from './useStatesClassNames';
-import { useStatesTransitions } from './useStatesTransitions';
+import { useItemInteractionCtrl } from '../interactions/useItemInteractionCtrl';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
   sectionId: string;
   onResize?: (height: number) => void;
   articleHeight: number;
+  interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
 }
 
 export interface ItemWrapperProps extends ItemProps<ItemAny> {
@@ -92,14 +90,21 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   const exemplary = useExemplary();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
-  const scale = useItemScale(item, sectionId);
-  const position = useItemPosition(item, sectionId);
+  const itemScale = useItemScale(item, sectionId);
+  const interactionCtrl = useItemInteractionCtrl(item.id);
+  // @ts-ignore
+  console.log(interactionCtrl?.transitionsInProgress);
+  const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
+  const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale']);
+  const position = useItemPosition(item, sectionId, {
+    top: wrapperStateProps?.styles?.top as number,
+    left: wrapperStateProps?.styles?.left as number,
+  });
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const dimensions = useItemDimensions(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.hidden];
   const isInitialRef = useRef(true);
-  const { transitionTo, getItemTrigger } = useContext(InteractionsContext);
   layoutValues.push(item.sticky);
   layoutValues.push(sectionHeight);
   if (item.layoutParams) {
@@ -134,19 +139,23 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const innerStatesClassNames = useStatesClassNames(item.id, item.state, 'item-inner');
-  const wrapperStatesClassNames = useStatesClassNames(item.id, item.state, 'item-wrapper');
-  useStatesTransitions(itemWrapperRef.current, item.state, ['top', 'left']);
-  useStatesTransitions(itemInnerRef.current, item.state, ['width', 'height', 'scale']);
+  const width = (innerStateProps?.styles?.width ?? dimensions?.width) as number | undefined;
+  const height = (innerStateProps?.styles?.height ?? dimensions?.height) as number | undefined;
+  const scale = innerStateProps?.styles?.scale ?? itemScale;
   return (
     <div
-      className={`item-wrapper-${item.id} ${wrapperStatesClassNames}`}
+      className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
+      onTransitionEnd={(e) => {
+        e.stopPropagation();
+        interactionCtrl?.handleTransitionEnd?.(e.propertyName);
+      }}
       style={{
         ...(position ? { top: position.top } : {}),
         ...(position ? { left: position.left } : {}),
         ...(position ? { bottom: position.bottom } : {}),
-        ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})
+        ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
+        transition: wrapperStateProps?.transition ?? 'none'
       }}
     >
       <div
@@ -160,45 +169,44 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
       >
         <RichTextWrapper isRichText={isRichText}>
           <div
-            className={`item-${item.id}-inner ${innerStatesClassNames}`}
+            className={`item-${item.id}-inner`}
             ref={itemInnerRef}
             onClick={() => {
-              const trigger = getItemTrigger(item.id, 'click');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
+              interactionCtrl?.sendTrigger('click');
             }}
             onMouseEnter={() => {
-              const trigger = getItemTrigger(item.id, 'hover-in');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
+              interactionCtrl?.sendTrigger('hover-in');
             }}
             onMouseLeave={() => {
-              const trigger = getItemTrigger(item.id, 'hover-out');
-              if (!trigger) return;
-              transitionTo(trigger.id, trigger.to);
+              interactionCtrl?.sendTrigger('hover-out');
             }}
             style={{
-              ...(dimensions ? {
+              ...((width && height) ? {
                 width: `${sizingAxis.x === 'manual'
                   ? isRichText
-                    ? `${dimensions.width * exemplary}px`
-                    : `${dimensions.width * 100}vw`
+                    ? `${width * exemplary}px`
+                    : `${width * 100}vw`
                   : 'max-content'}`,
-                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {}),
+                height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}` } : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {}),
+              transition: innerStateProps?.transition ?? 'none'
             }}
           >
-            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
+            <ItemComponent
+              item={item}
+              sectionId={sectionId}
+              onResize={handleItemResize}
+              articleHeight={articleHeight}
+              interactionCtrl={interactionCtrl}
+            />
           </div>
         </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, states, sticky, sectionHeight, layoutParams], exemplary) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams], exemplary) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           const scaleAnchor = area.scaleAnchor as AreaAnchor;
-          const statesInnerCSS = getStatesCSS(item.id, 'item-inner', ['width', 'height', 'scale'], states);
-          const statesWrapperCSS = getStatesCSS(item.id, 'item-wrapper', ['top', 'left'], states, area.anchorSide);
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -226,8 +234,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
             }
-            ${statesWrapperCSS}
-            ${statesInnerCSS}
           `);
       })}
       `}</JSXStyle>

package/src/components/items/CodeEmbedItem.tsx

@@ -7,9 +7,6 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCodeEmbedItem } from './useCodeEmbedItem';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { useStatesTransitions } from '../useStatesTransitions';
 
 const stylesMap = {
   [AreaAnchor.TopLeft]: {},
@@ -23,18 +20,20 @@ const stylesMap = {
   [AreaAnchor.BottomRight]: { justifyContent: 'flex-end', alignItems: 'flex-end' }
 };
 
-export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize }) => {
+export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { anchor, blur, opacity } = useCodeEmbedItem(item, sectionId);
-  const angle = useItemAngle(item, sectionId);
+  const { anchor, blur: itemBlur, opacity: itemOpacity } = useCodeEmbedItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const { html } = item.commonParams;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
   const pos = stylesMap[anchor];
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'embed-wrapper');
-  useStatesTransitions(ref!, item.state, ['angle', 'blur', 'opacity']);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const stateParams = interactionCtrl?.getState(['angle', 'blur', 'opacity']);
+  const blur = (stateParams?.styles?.blur ?? itemBlur) as number;
+  const opacity = stateParams?.styles?.opacity ?? itemOpacity;
+  const angle = stateParams?.styles?.angle ?? itemAngle;
 
   useEffect(() => {
     if (!ref) return;
@@ -60,11 +59,12 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-wrapper-${item.id} ${statesClassNames}`}
+        className={`embed-wrapper-${item.id}`}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
           ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           ...(opacity !== undefined ? { opacity } : {}),
+          transition: stateParams?.transition ?? 'none'
       }}
         ref={setRef}
       >
@@ -97,20 +97,17 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
         z-index: 1;
         border: none;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams], exemplary) => {
-        const statesCSS = getStatesCSS(item.id, 'embed-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams], exemplary) => {
         return (`
           .embed-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: all 0.2s ease;
           }
           .embed-${item.id} {
             width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
             height: ${item.commonParams.scale ? `${area.height * exemplary}px` : '100%'};
           }
-          ${statesCSS}
         `);
       })}
     `}</JSXStyle>

package/src/components/items/CustomItem.tsx

@@ -5,46 +5,41 @@ import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useItemAngle } from '../useItemAngle';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
 
-export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId }) => {
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {
   const sdk = useCntrlContext();
   const { layouts } = useCntrlContext();
-  const angle = useItemAngle(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const component = sdk.customItems.get(item.commonParams.name);
-  const layoutValues: Record<string, any>[] = [item.area, item.state];
+  const layoutValues: Record<string, any>[] = [item.area];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'custom-component');
-  useStatesTransitions(ref, item.state, ['angle'])
+  const stateParams = interactionCtrl?.getState(['angle']);
+  const angle = stateParams?.styles?.angle ?? itemAngle;
   if (!component) return null;
   return (
     <>
       <div
-        className={`custom-component-${item.id} ${statesClassNames}`}
+        className={`custom-component-${item.id}`}
         ref={setRef}
         style={{
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          transition: stateParams?.transition ?? 'none'
         }}
       >
         {component({})}
       </div>
       <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, layoutValues, ([area, stateParams]) => {
-          const statesCSS = getStatesCSS(item.id, 'custom-component', ['angle'], stateParams);
+        {`${getLayoutStyles(layouts, layoutValues, ([area]) => {
           return (`
             .custom-component-${item.id} {
               transform: rotate(${area.angle}deg);
-              transition: all 0.2s ease;
               height: 100%;
               width: 100%;
               position: absolute;
               left: 0;
               top: 0;
             }
-            ${statesCSS}
           `);
         })}`}
       </JSXStyle>

package/src/components/items/GroupItem.tsx

@@ -7,31 +7,31 @@ import { useRegisterResize } from '../../common/useRegisterResize';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useItemAngle } from '../useItemAngle';
 import { useGroupItem } from './useGroupItem';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
+import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight }) => {
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, articleHeight, interactionCtrl }) => {
   const id = useId();
   const { items } = item;
-  const angle = useItemAngle(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
-  const { opacity } = useGroupItem(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
-  const statesClassNames = useStatesClassNames(item.id, item.state, 'group');
+  const { opacity: itemOpacity } = useGroupItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  useStatesTransitions(ref!, item.state, ['opacity', 'angle'])
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
-          className={`group-${item.id} ${statesClassNames}`}
+          className={`group-${item.id}`}
           ref={setRef}
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            transition: stateParams?.transition ?? 'none'
           }}
         >
           {items && items.map(item => (
@@ -40,6 +40,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               key={item.id}
               sectionId={sectionId}
               articleHeight={articleHeight}
+              interactionCtrl={interactionCtrl}
               isInGroup
             />
           ))}
@@ -51,15 +52,12 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           height: 100%;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const statesCSS = getStatesCSS(item.id, 'group', ['opacity', 'angle'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           return (`
             .group-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
-              transition: all 0.2s ease;
             }
-            ${statesCSS}
           `);
         })}
       `}</JSXStyle>

package/src/components/items/ImageItem.tsx

@@ -11,9 +11,7 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 import { useImageFx } from '../../utils/effects/useImageFx';
 import { useElementRect } from '../../utils/useElementRect';
 import { useLayoutContext } from '../useLayoutContext';
-import { useStatesClassNames } from '../useStatesClassNames';
-import { getStatesCSS } from '../../utils/getStatesCSS';
-import { useStatesTransitions } from '../useStatesTransitions';
+import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
@@ -24,15 +22,19 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
-  const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
-  const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
+  const {
+    radius: itemRadius,
+    strokeWidth: itemStrokeWidth,
+    opacity: itemOpacity,
+    strokeColor: itemStrokeColor,
+    blur: itemBlur
+  } = useFileItem(item, sectionId);
+  const itemAngle = useItemAngle(item, sectionId);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
-  const [imgRef, setImgRef] = useState<HTMLImageElement | HTMLCanvasElement | null>(null);
   useRegisterResize(wrapperRef, onResize);
   const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
@@ -44,17 +46,15 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     acc[control.shaderParam] = control.value;
     return acc;
   }, {});
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
-  const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'image-wrapper');
-  const statesImgClassNames = useStatesClassNames(item.id, item.state, 'image');
-  useStatesTransitions(wrapperRef, item.state, ['angle', 'opacity', 'blur']);
-  useStatesTransitions(imgRef, item.state, ['strokeWidth', 'radius', 'strokeColor']);
-  useStatesTransitions(fxCanvas.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
+  const wrapperStateParams = interactionCtrl?.getState(['angle', 'opacity', 'blur']);
+  const imgStateParams = interactionCtrl?.getState(['strokeWidth', 'radius', 'strokeColor']);
+
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
@@ -73,37 +73,47 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const rect = useElementRect(wrapperRef);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
+  const borderColor = useMemo(() => {
+    const borderColor = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeColor, itemStrokeColor)
+    return borderColor ? CntrlColor.parse(borderColor) : undefined;
+  }, [itemStrokeColor, imgStateParams?.styles?.strokeColor]);
+  const radius = getStyleFromItemStateAndParams(imgStateParams?.styles?.radius, itemRadius);
+  const strokeWidth = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeWidth, itemStrokeWidth);
+  const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
   const inlineStyles = {
     ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
     ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
+    transition: imgStateParams?.transition ?? 'none'
   };
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <>
         <div
-          className={`image-wrapper-${item.id} ${statesWrapperClassNames}`}
+          className={`image-wrapper-${item.id}`}
           ref={setWrapperRef}
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+            transition: wrapperStateParams?.transition ?? 'none'
           }}
         >
           {hasGLEffect && isFXAllowed ? (
             <canvas
               style={inlineStyles}
               ref={fxCanvas}
-              className={`img-canvas image-${item.id} ${statesImgClassNames}`}
+              className={`img-canvas image-${item.id}`}
               width={rectWidth}
               height={rectHeight}
             />
           ) : (
             <img
               alt=""
-              className={`image image-${item.id} ${statesImgClassNames}`}
+              className={`image image-${item.id}`}
               style={inlineStyles}
-              ref={setImgRef}
               src={item.commonParams.url}
             />
           )}
@@ -134,24 +144,18 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           border-width: 0;
           box-sizing: border-box;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
-          const wrapperStatesCSS = getStatesCSS(item.id, 'image-wrapper', ['angle', 'opacity', 'blur'], stateParams);
-          const imgStatesCSS = getStatesCSS(item.id, 'image', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           return (`
             .image-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: all 0.2s ease;
             }
             .image-${item.id} {
               border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
-              transition: all 0.2s ease;
             }
-            ${wrapperStatesCSS}
-            ${imgStatesCSS}
           `);
         })}
       `}</JSXStyle>