@cntrl-site/sdk-nextjs 0.27.2 → 0.28.1

package/lib/components/items/ImageItem.js

@@ -17,6 +17,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRegisterResize_1 = require("../../common/useRegisterResize");
 const useImageFx_1 = require("../../utils/effects/useImageFx");
 const useElementRect_1 = require("../../utils/useElementRect");
+const useLayoutContext_1 = require("../useLayoutContext");
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
 uniform sampler2D u_pattern;
@@ -26,9 +27,10 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(strokeColor), [strokeColor]);
@@ -44,21 +46,25 @@ const ImageItem = ({ item, sectionId, onResize }) => {
         return acc;
     }, {});
     const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+    const area = layoutId ? item.area[layoutId] : null;
+    const exemplary = (_b = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _b === void 0 ? void 0 : _b.exemplary;
+    const width = area && exemplary ? area.width * exemplary : 0;
+    const height = area && exemplary ? area.height * exemplary : 0;
     (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
         imageUrl: url,
         fragmentShader: fullShaderCode,
         cursor: item.commonParams.FXCursor,
         controls: controlValues
-    });
+    }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(ref);
-    const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
-    const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
+    const rectWidth = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0);
+    const rectHeight = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _d !== void 0 ? _d : 0);
     const inlineStyles = {
         borderRadius: `${radius * 100}vw`,
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: `${borderColor.toCss()}`
     };
-    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: `image-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`

package/lib/components/items/VideoItem.js

@@ -30,20 +30,24 @@ const VideoItem = ({ item, sectionId, onResize }) => {
     const scrollPlayback = item.layoutParams[layoutId].scrollPlayback;
     const hasScrollPlayback = scrollPlayback !== null;
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: [hasScrollPlayback ? ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
                     opacity: `${opacity}`,
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`,
-                    overflow: hasScrollPlayback ? 'hidden' : 'auto'
-                }, children: hasScrollPlayback ? ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: {
+                    overflow: 'hidden'
+                }, children: (0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`
-                    }, className: `video video-playback-wrapper video-${item.id}` })) : ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
+                    }, className: `video video-playback-wrapper video-${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: {
+                    opacity: `${opacity}`,
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
+                }, children: (0, jsx_runtime_1.jsx)("video", { ref: videoRef, autoPlay: true, muted: true, loop: true, playsInline: true, className: `video video-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`
-                    }, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                    }, children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) })), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .video-${item.id} {
             border-color: ${borderColor.fmt('rgba')};

package/lib/utils/effects/useImageFx.js

@@ -6,14 +6,14 @@ const effects_1 = require("@cntrl-site/effects");
 const rangeMap_1 = require("../rangeMap");
 const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
 const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
-function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }) {
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }, width, height) {
     const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageFx = (0, react_1.useMemo)(() => {
         if (!imageUrl || !cursor)
             return undefined;
         const { type, x, y } = cursor;
-        return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls));
-    }, [imageUrl, fragmentShader]);
+        return new effects_1.ImageEffect(imageUrl, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls), width, height);
+    }, [imageUrl, fragmentShader, width, height]);
     (0, react_1.useEffect)(() => {
         if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.27.2",
+  "version": "0.28.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/effects": "^1.1.0",
+    "@cntrl-site/effects": "^1.2.0",
     "@cntrl-site/sdk": "^1.9.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",

package/src/components/items/ImageItem.tsx

@@ -11,6 +11,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useImageFx } from '../../utils/effects/useImageFx';
 import { useElementRect } from '../../utils/useElementRect';
+import { useLayoutContext } from '../useLayoutContext';
 
 const baseVariables = `precision mediump float;
 uniform sampler2D u_image;
@@ -24,6 +25,7 @@ varying vec2 v_texCoord;`;
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   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(() => CntrlColor.parse(strokeColor), [strokeColor]);
@@ -39,12 +41,22 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     return acc;
   }, {});
   const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
-  useImageFx(fxCanvas.current, hasGLEffect ?? false, {
-    imageUrl: url,
-    fragmentShader: fullShaderCode,
-    cursor: item.commonParams.FXCursor,
-    controls: controlValues
-  });
+  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;
+  useImageFx(
+    fxCanvas.current,
+    hasGLEffect ?? false,
+    {
+      imageUrl: url,
+      fragmentShader: fullShaderCode,
+      cursor: item.commonParams.FXCursor,
+      controls: controlValues
+    },
+    width,
+    height
+  );
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
@@ -81,7 +93,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
               src={item.commonParams.url}
             />
           )}
-
         </div>
         <JSXStyle id={id}>{`
         @supports not (color: oklch(42% 0.3 90 / 1)) {

package/src/components/items/VideoItem.tsx

@@ -28,17 +28,17 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
 
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <div
-        className={`video-wrapper-${item.id}`}
-        ref={setRef}
-        style={{
-          opacity: `${opacity}`,
-          transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`,
-          overflow: hasScrollPlayback ? 'hidden' : 'auto'
-        }}
-      >
-        {hasScrollPlayback ? (
+      {hasScrollPlayback ? (
+        <div
+          className={`video-wrapper-${item.id}`}
+          ref={setRef}
+          style={{
+            opacity: `${opacity}`,
+            transform: `rotate(${angle}deg)`,
+            filter: `blur(${blur * 100}vw)`,
+            overflow: 'hidden'
+          }}
+        >
           <ScrollPlaybackVideo
             sectionId={sectionId}
             src={item.commonParams.url}
@@ -50,7 +50,17 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             }}
             className={`video video-playback-wrapper video-${item.id}`}
           />
-        ) : (
+        </div>
+      ) : (
+        <div
+          className={`video-wrapper-${item.id}`}
+          ref={setRef}
+          style={{
+            opacity: `${opacity}`,
+            transform: `rotate(${angle}deg)`,
+            filter: `blur(${blur * 100}vw)`
+          }}
+        >
           <video
             ref={videoRef}
             autoPlay
@@ -59,15 +69,15 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             playsInline
             className={`video video-${item.id}`}
             style={{
-            borderRadius: `${radius * 100}vw`,
-            borderWidth: `${strokeWidth * 100}vw`,
-            borderColor: `${borderColor.toCss()}`
-        }}
-      >
-        <source src={item.commonParams.url} />
-      </video>
-        )}
-      </div>
+              borderRadius: `${radius * 100}vw`,
+              borderWidth: `${strokeWidth * 100}vw`,
+              borderColor: `${borderColor.toCss()}`
+            }}
+          >
+            <source src={item.commonParams.url} />
+          </video>
+        </div>
+      )}
       <JSXStyle id={id}>{`
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .video-${item.id} {

package/src/utils/effects/useImageFx.ts

@@ -27,7 +27,9 @@ export function useImageFx(
     fragmentShader,
     cursor,
     controls
-  }: FxParams
+  }: FxParams,
+  width: number,
+  height: number
 ): void {
   const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageFx = useMemo<ImageEffect | undefined>(() => {
@@ -42,8 +44,11 @@ export function useImageFx(
         time: 0,
         cursor: type === 'mouse' ? mousePos.current : [x, y],
         ...controls
-      });
-  }, [imageUrl, fragmentShader]);
+      },
+      width,
+      height
+    );
+  }, [imageUrl, fragmentShader, width, height]);
 
   useEffect(() => {
     if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx) return;