@cntrl-site/sdk-nextjs 0.3.0 → 0.4.0

package/lib/utils/Animator/Animator.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Animator = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const binSearchInsertAt_1 = require("../binSearchInsertAt");
+const compare = (lhs, rhs) => lhs.position - rhs.position;
+const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
+class Animator {
+    constructor(keyframes) {
+        this.keyframes = keyframes;
+        this.keyframesMap = createKeyframesMap();
+        this.fillKeyframesMap();
+    }
+    static pushKeyframeToMap(keyframe, map) {
+        insertBin(map[keyframe.type], keyframe);
+    }
+    getDimensions(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Dimensions];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                width: keyframe.value.width,
+                height: keyframe.value.height
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            width: rangeMap(pos, start.position, end.position, start.value.width, end.value.width, true),
+            height: rangeMap(pos, start.position, end.position, start.value.height, end.value.height, true)
+        };
+    }
+    getPositions(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Position];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                left: keyframe.value.left,
+                top: keyframe.value.top
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            left: rangeMap(pos, start.position, end.position, start.value.left, end.value.left, true),
+            top: rangeMap(pos, start.position, end.position, start.value.top, end.value.top, true)
+        };
+    }
+    getColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Color];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                color: keyframe.value.color
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            color: this.getRgba(start, end, pos)
+        };
+    }
+    getRadius(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderRadius];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                radius: keyframe.value.radius
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            radius: rangeMap(pos, start.position, end.position, start.value.radius, end.value.radius, true)
+        };
+    }
+    getBorderWidth(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BorderWidth];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                borderWidth: keyframe.value.borderWidth
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            borderWidth: rangeMap(pos, start.position, end.position, start.value.borderWidth, end.value.borderWidth, true)
+        };
+    }
+    getRotation(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Rotation];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                angle: keyframe.value.angle
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            angle: rangeMap(pos, start.position, end.position, start.value.angle, end.value.angle, true)
+        };
+    }
+    getStartEnd(position, keyframes) {
+        const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
+        const end = index === keyframes.length ? index - 1 : index;
+        const start = end === 0 ? end : end - 1;
+        return { start: keyframes[start], end: keyframes[end] };
+    }
+    fillKeyframesMap() {
+        this.keyframesMap = createKeyframesMap();
+        for (const keyframe of this.keyframes) {
+            Animator.pushKeyframeToMap(keyframe, this.keyframesMap);
+        }
+    }
+    getRgba(start, end, position) {
+        const [startR, startG, startB, startA] = parseRgba(start.value.color);
+        const [endR, endG, endB, endA] = parseRgba(end.value.color);
+        const r = rangeMap(position, start.position, end.position, startR, endR, true);
+        const g = rangeMap(position, start.position, end.position, startG, endG, true);
+        const b = rangeMap(position, start.position, end.position, startB, endB, true);
+        const a = rangeMap(position, start.position, end.position, startA, endA, true);
+        return `rgba(${r},${g},${b},${a})`;
+    }
+}
+exports.Animator = Animator;
+const reRgba = /^rgba?\( *(\d+) *, *(\d+) *, *(\d+)(?: *, *(\d+(?:\.\d+)?))? *\)$/i;
+function parseRgba(color) {
+    const match = reRgba.exec(color);
+    if (!match)
+        return [0, 0, 0, 1];
+    const [, r, g, b, a] = match;
+    return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), a ? parseFloat(a) : NaN];
+}
+function createKeyframesMap() {
+    return {
+        [sdk_1.KeyframeType.Dimensions]: [],
+        [sdk_1.KeyframeType.Position]: [],
+        [sdk_1.KeyframeType.BorderWidth]: [],
+        [sdk_1.KeyframeType.BorderRadius]: [],
+        [sdk_1.KeyframeType.Color]: [],
+        [sdk_1.KeyframeType.Rotation]: []
+    };
+}
+function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
+    const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+    if (withinBounds && n < start1)
+        return start2;
+    if (withinBounds && n > stop1)
+        return stop2;
+    return mapped;
+}

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArticleRectObserver = void 0;
+const EventEmitter_1 = require("../EventEmitter");
+class ArticleRectObserver extends EventEmitter_1.EventEmitter {
+    constructor() {
+        super();
+        this.articleWidth = 0;
+        this.scrollPos = window.scrollY;
+        this.animationFrame = NaN;
+        this.handleScroll = (scroll) => {
+            this.setScroll(scroll / this.articleWidth);
+        };
+        this.handleResize = (entries) => {
+            const [entry] = entries;
+            if (!entry)
+                return;
+            const element = entry.target;
+            if (!(element instanceof HTMLElement))
+                return;
+            this.notify(element);
+            this.emit('resize', undefined);
+        };
+        this.resizeObserver = new ResizeObserver(this.handleResize);
+    }
+    get scroll() {
+        return this.scrollPos;
+    }
+    get width() {
+        return this.articleWidth;
+    }
+    setScroll(scroll) {
+        this.scrollPos = scroll;
+    }
+    start(el) {
+        this.resizeObserver.observe(el);
+        const onScroll = () => {
+            this.handleScroll(window.scrollY);
+            if (!isNaN(this.animationFrame))
+                return;
+            this.animationFrame = window.requestAnimationFrame(() => {
+                this.animationFrame = NaN;
+                this.emit('scroll', undefined);
+            });
+        };
+        window.addEventListener('scroll', onScroll);
+        return () => {
+            this.resizeObserver.unobserve(el);
+            window.removeEventListener('scroll', onScroll);
+            if (!isNaN(this.animationFrame)) {
+                window.cancelAnimationFrame(this.animationFrame);
+                this.animationFrame = NaN;
+            }
+        };
+    }
+    notify(el) {
+        const elBoundary = el.getBoundingClientRect();
+        this.articleWidth = elBoundary.width;
+    }
+}
+exports.ArticleRectObserver = ArticleRectObserver;

package/lib/utils/ArticleRectManager/useArticleRectObserver.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useArticleRectObserver = void 0;
+const react_1 = require("react");
+const ArticleRectObserver_1 = require("./ArticleRectObserver");
+const useArticleRectObserver = (el) => {
+    const [articleRectObserver, setArticleRectObserver] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setArticleRectObserver(new ArticleRectObserver_1.ArticleRectObserver());
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!el || !articleRectObserver)
+            return;
+        return articleRectObserver.start(el);
+    }, [el, articleRectObserver]);
+    return articleRectObserver;
+};
+exports.useArticleRectObserver = useArticleRectObserver;

package/lib/utils/EventEmitter.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventEmitter = void 0;
+class EventEmitter {
+    constructor() {
+        this.listeners = {};
+    }
+    on(event, listener) {
+        if (!Array.isArray(this.listeners[event])) {
+            this.listeners[event] = [];
+        }
+        this.listeners[event]?.push(listener);
+        return () => {
+            this.off(event, listener);
+        };
+    }
+    off(event, listener) {
+        const filtered = this.listeners[event]?.filter(l => l !== listener);
+        this.listeners[event] = filtered && filtered.length > 0 ? filtered : undefined;
+    }
+    emit(event, payload) {
+        const listeners = this.listeners[event];
+        if (!Array.isArray(listeners))
+            return;
+        for (const listener of listeners) {
+            try {
+                listener(payload);
+            }
+            catch (error) {
+                console.error(error instanceof Error ? error.stack : error);
+            }
+        }
+    }
+}
+exports.EventEmitter = EventEmitter;

package/lib/utils/binSearchInsertAt.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsert = exports.binSearchInsertAt = void 0;
+function binSearchInsertAt(list, item, compare) {
+    switch (list.length) {
+        case 0: return 0;
+        case 1: return compare(item, list[0]) < 0 ? 0 : 1;
+    }
+    let start = 0;
+    let end = list.length;
+    let pivot;
+    let cmpResult;
+    while (start < end) {
+        pivot = start + Math.floor((end - start) / 2);
+        cmpResult = compare(item, list[pivot]);
+        if (cmpResult === 0)
+            return pivot + 1;
+        if (cmpResult < 0) {
+            end = pivot;
+        }
+        if (cmpResult > 0) {
+            start = pivot + 1;
+        }
+    }
+    if (start >= list.length)
+        return list.length;
+    return compare(item, list[start]) < 0 ? start : start + 1;
+}
+exports.binSearchInsertAt = binSearchInsertAt;
+function createInsert(start, compare) {
+    return (list, item) => {
+        const pos = start(list, item, compare);
+        list.splice(pos, 0, item);
+    };
+}
+exports.createInsert = createInsert;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,18 +21,20 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.3.0",
+    "@cntrl-site/sdk": "^0.4.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
   "peerDependencies": {
     "next": "^12.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
+    "@types/lodash.isequal": "^4.5.6",
     "@types/jest": "^29.2.5",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",

package/src/common/useCurrentLayout.ts

@@ -0,0 +1,47 @@
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+
+interface LayoutData {
+  layoutId: string;
+  start: number;
+  end: number;
+}
+
+export const useCurrentLayout = () => {
+  const { layouts } = useCntrlContext();
+  const [initialLayout] = layouts;
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutRanges = useMemo(() => {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
+      const next = layouts[i + 1];
+      return [
+        ...acc,
+        {
+          layoutId: layout.id,
+          start: layout.startsWith,
+          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+        }
+      ];
+    }, []);
+  }, [layouts]);
+  const getCurrentLayout = useCallback((articleWidth: number) => {
+    return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)!.layoutId;
+  }, [layoutRanges]);
+  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(isServer() ? 0 : window.innerWidth));
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const articleWidth = articleRectObserver.width;
+      setLayoutId(getCurrentLayout(articleWidth));
+    });
+  }, [articleRectObserver, getCurrentLayout]);
+
+  return layoutId;
+};
+
+function isServer(): boolean {
+  return typeof window === 'undefined';
+}

package/src/common/useKeyframeValue.ts

@@ -0,0 +1,74 @@
+import { KeyframeType, TArticleItemAny } from '@cntrl-site/sdk';
+import isEqual from 'lodash.isequal';
+import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { useCurrentLayout } from './useCurrentLayout';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { AnimationData, Animator } from '../utils/Animator/Animator';
+
+export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
+type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string) => T;
+const emptyDeps: DependencyList = [];
+
+export const useKeyframeValue = <T>(
+  item: TArticleItemAny,
+  itemParamsGetter: ItemParamGetter<T>,
+  animatorGetter: AnimatorGetter<T>,
+  deps: DependencyList = emptyDeps
+) => {
+  const animatorGetterRef = useRef(animatorGetter);
+  const itemParamsGetterRef = useRef(itemParamsGetter);
+
+  animatorGetterRef.current = animatorGetter;
+  itemParamsGetterRef.current = itemParamsGetter;
+
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutId = useCurrentLayout();
+  const keyframesRepo = useContext(KeyframesContext);
+  const keyframes = keyframesRepo.getItemKeyframes(item.id);
+  const paramValue = useMemo<T>(() => {
+    return itemParamsGetterRef.current(item, layoutId);
+  }, [item, layoutId, ...deps]);
+
+  const [adjustedValue, setAdjustedValue] = useState<T>(paramValue);
+  const adjustedValueRef = useRef<T>(adjustedValue);
+  adjustedValueRef.current = adjustedValue;
+
+  const animator = useMemo(() => {
+    if (!layoutId || !keyframes.length) return;
+    const animationData = keyframes
+      .filter(k => k.layoutId === layoutId)
+      .map<AnimationData<KeyframeType>>(({ position, type, value }) => ({
+        position,
+        type,
+        value
+      }));
+    return new Animator(animationData);
+  }, [keyframes, layoutId]);
+
+  useEffect(() => {
+    setAdjustedValue(paramValue);
+  }, [paramValue]);
+
+  useEffect(() => {
+    if (!animator || !articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const scroll = articleRectObserver.scroll;
+      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+      setAdjustedValue(newValue);
+    });
+  }, [animator, articleRectObserver]);
+
+  useEffect(() => {
+    if (!animator || !articleRectObserver) return;
+    return articleRectObserver.on('scroll', () => {
+      const scroll = articleRectObserver.scroll;
+      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+      if (!isEqual(newValue, adjustedValueRef.current)) {
+        setAdjustedValue(newValue);
+      }
+    });
+  }, [animator, articleRectObserver]);
+  return adjustedValue;
+};
+

package/src/components/Article.tsx

@@ -1,16 +1,21 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { TArticle } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
+import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
 
 interface Props {
   article: TArticle;
 }
 
 export const Article: FC<Props> = ({ article }) => {
+  const articleRef = useRef<HTMLDivElement | null>(null);
+  const articleRectObserver = useArticleRectObserver(articleRef.current);
+
   return (
-    <>
-      <div className="article">
+    <ArticleRectContext.Provider value={articleRectObserver}>
+      <div className="article" ref={articleRef}>
         {article.sections.map((section, i) => (
           <Section section={section} key={section.id}>
             {article.sections[i].items.map(item => (
@@ -25,6 +30,6 @@ export const Article: FC<Props> = ({ article }) => {
             overflow: hidden;
           }
       `}</style>
-    </>
+    </ArticleRectContext.Provider>
   );
 };

package/src/components/Item.tsx

@@ -1,10 +1,9 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType, FC, useEffect, useRef } from 'react';
 import {
   getLayoutStyles,
   ArticleItemType,
   ArticleItemSizingType as SizingType,
-  TArticleItemAny,
-  AnchorSide
+  TArticleItemAny
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -14,6 +13,9 @@ import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
+import { useItemAngle } from './useItemAngle';
+import { getItemTopStyle, useItemPosition } from './useItemPosition';
+import { useItemDimensions } from './useItemDimensions';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -33,7 +35,11 @@ const noop = () => null;
 
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
+  const angle = useItemAngle(item);
+  const { top, left } = useItemPosition(item);
+  const { width, height } = useItemDimensions(item);
   const layoutValues: Record<string, any>[] = [item.area];
+  const isInitialRef = useRef(true);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
@@ -41,13 +47,30 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const sizingAxis = parseSizing(item.commonParams.sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
+
+  const styles = {
+    transform: `rotate(${angle}deg)`,
+    left: `${left * 100}vw`,
+    width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
+    height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+    top
+  };
+
   return (
-    <div className={`item-${item.id}`}>
+    <div
+      suppressHydrationWarning={true}
+      className={`item-${item.id}`}
+      style={isInitialRef.current ? {} : styles }
+    >
       <ItemComponent item={item} />
       <style jsx>{`
         ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
+              z-index: ${area.zIndex};
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
@@ -61,19 +84,6 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   );
 };
 
-function getItemTopStyle(top: number, anchorSide: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}
-
 function parseSizing(sizing: string): Axis {
   const axisSizing = sizing.split(' ');
   return {

package/src/components/Page.tsx

@@ -1,26 +1,32 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import HTMLReactParser from 'html-react-parser';
-import { TArticle, TProject, TMeta } from '@cntrl-site/sdk';
+import { TArticle, TProject, TMeta, TKeyframeAny } from '@cntrl-site/sdk';
 import { Article } from './Article';
+import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
 import { useCntrlContext } from '../provider/useCntrlContext';
 import { generateTypePresetStyles } from '../utils/generateTypePresetStyles/generateTypePresetStyles';
+import { Keyframes } from '../provider/Keyframes';
 
 interface Props {
   article: TArticle;
   project: TProject;
   meta: TMeta;
+  keyframes: TKeyframeAny[];
 }
 
-export const Page: FC<Props> = ({ article, project, meta }) => {
+export const Page: FC<Props> = ({ article, project, meta, keyframes }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
   const { typePresets, layouts } = useCntrlContext();
   return (
     <>
       <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
-      <Article article={article} />
+      <KeyframesContext.Provider value={keyframesRepo}>
+        <Article article={article} />
+      </KeyframesContext.Provider>
       {beforeBodyClose}
       {typePresets && typePresets.presets.length > 0 && (
         <style>{generateTypePresetStyles(typePresets, layouts)}</style>

package/src/components/items/ImageItem.tsx

@@ -3,17 +3,24 @@ import { getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useFileItem } from './useFileItem';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
   const { layouts } = useCntrlContext();
+  const { radius, strokeWidth } = useFileItem(item);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div className={`image-wrapper-${item.id}`}>
+        <div className={`image-wrapper-${item.id}`}
+          style={{
+            borderRadius: `${radius * 100}vw`,
+            borderWidth: `${strokeWidth * 100}vw`
+          }}
+        >
           <img className="image" src={item.commonParams.url} />
         </div>
         <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
               overflow: hidden;
@@ -22,9 +29,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
               border-style: solid;
               box-sizing: border-box;
               border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
               opacity: ${opacity};
-              border-width: ${strokeWidth * 100}vw;
             }`
         ))
         }