@cntrl-site/sdk-nextjs 0.23.0 → 0.24.0

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/lib/components/items/ImageItem.js

@@ -17,8 +17,16 @@ 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 baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
@@ -28,20 +36,31 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const { url, hasGLEffect, fragmentShader } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
+    const controls = (_a = item.commonParams.FXControls) !== null && _a !== void 0 ? _a : [];
+    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+        .join('\n');
+    const controlValues = controls.reduce((acc, control) => {
+        acc[control.shaderParam] = control.value;
+        return acc;
+    }, {});
+    const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+    console.log('fullShaderCode', fullShaderCode);
+    console.log('controlValues', controlValues);
     (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
         imageUrl: url,
-        fragmentShader,
-        cursor: item.commonParams.FXCursor
+        fragmentShader: fullShaderCode,
+        cursor: item.commonParams.FXCursor,
+        controls: controlValues
     });
     const rect = (0, useElementRect_1.useElementRect)(ref);
-    const rectWidth = Math.floor((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
-    const rectHeight = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0);
+    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 inlineStyles = {
         borderRadius: `${radius * 100}vw`,
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: `${borderColor.toCss()}`
     };
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, Object.assign({ 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", Object.assign({ className: `image-wrapper-${item.id}`, ref: setRef, style: {
                         opacity: `${opacity}`,
                         transform: `rotate(${angle}deg)`,
                         filter: `blur(${blur * 100}vw)`

package/lib/utils/effects/useImageFx.js

@@ -6,16 +6,13 @@ 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 }) {
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }) {
     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, {
-            time: 0,
-            cursor: type === 'mouse' ? mousePos.current : [x, y]
-        });
+        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]);
     (0, react_1.useEffect)(() => {
         if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -22,8 +22,8 @@
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/effects": "^1.0.5-1",
-    "@cntrl-site/sdk": "^1.6.0",
+    "@cntrl-site/effects": "^1.0.5",
+    "@cntrl-site/sdk": "^1.7.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/ImageItem.tsx

@@ -12,6 +12,15 @@ import { useRegisterResize } from "../../common/useRegisterResize";
 import { useImageFx } from '../../utils/effects/useImageFx';
 import { useElementRect } from '../../utils/useElementRect';
 
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
@@ -22,10 +31,21 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   useRegisterResize(ref, onResize);
   const { url, hasGLEffect, fragmentShader } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
+  const controls = item.commonParams.FXControls ?? [];
+  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+      .join('\n');
+  const controlValues = controls.reduce<Record<string, ControlValue>>((acc, control) => {
+    acc[control.shaderParam] = control.value;
+    return acc;
+  }, {});
+  const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+  console.log('fullShaderCode', fullShaderCode);
+  console.log('controlValues', controlValues);
   useImageFx(fxCanvas.current, hasGLEffect ?? false, {
     imageUrl: url,
-    fragmentShader,
-    cursor: item.commonParams.FXCursor
+    fragmentShader: fullShaderCode,
+    cursor: item.commonParams.FXCursor,
+    controls: controlValues
   });
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
@@ -117,3 +137,5 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     </LinkWrapper>
   );
 };
+
+type ControlValue = number | [number, number];

package/src/utils/effects/useImageFx.ts

@@ -12,6 +12,8 @@ interface FxParams {
   imageUrl?: string;
   fragmentShader?: string;
   cursor?: FXCursor;
+  // TODO use types from SDk
+  controls?: Record<string, number | [number, number]>;
 }
 
 const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
@@ -23,7 +25,8 @@ export function useImageFx(
   {
     imageUrl,
     fragmentShader,
-    cursor
+    cursor,
+    controls
   }: FxParams
 ): void {
   const mousePos = useRef<[number, number]>([0.0, 0.0]);
@@ -37,7 +40,8 @@ export function useImageFx(
       fragmentShader!,
       {
         time: 0,
-        cursor: type === 'mouse' ? mousePos.current : [x, y]
+        cursor: type === 'mouse' ? mousePos.current : [x, y],
+        ...controls
       });
   }, [imageUrl, fragmentShader]);