@cntrl-site/sdk-nextjs 0.20.0 → 0.21.0

package/lib/components/items/ImageItem.js

@@ -30,7 +30,8 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const fxCanvas = (0, react_1.useRef)(null);
     (0, useImageFx_1.useImageFx)(fxCanvas.current, hasGLEffect !== null && hasGLEffect !== void 0 ? hasGLEffect : false, {
         imageUrl: url,
-        fragmentShader
+        fragmentShader,
+        cursor: item.commonParams.FXCursor
     });
     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);

package/lib/utils/effects/useImageFx.js

@@ -4,15 +4,21 @@ exports.useImageFx = void 0;
 const react_1 = require("react");
 const effects_1 = require("@cntrl-site/effects");
 const rangeMap_1 = require("../rangeMap");
-function useImageFx(canvas, enabled, { imageUrl, fragmentShader }) {
-    const cursor = (0, react_1.useRef)([0, 0]);
+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 }) {
+    const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageFx = (0, react_1.useMemo)(() => {
-        if (!imageUrl)
+        if (!imageUrl || !cursor)
             return undefined;
-        return new effects_1.ImageEffect(imageUrl, fragmentShader, { time: 0, cursor: cursor.current });
+        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]
+        });
     }, [imageUrl, fragmentShader]);
     (0, react_1.useEffect)(() => {
-        if (!canvas || !imageFx)
+        if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)
             return;
         const handleMouseMove = (evt) => {
             const rect = canvas.getBoundingClientRect();
@@ -24,7 +30,7 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader }) {
         return () => {
             window.removeEventListener('mousemove', handleMouseMove);
         };
-    }, [canvas, imageFx]);
+    }, [canvas, imageFx, cursor === null || cursor === void 0 ? void 0 : cursor.type]);
     (0, react_1.useEffect)(() => {
         const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
         if (!enabled || !canvas || !gl || !imageFx)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.20.0",
+  "version": "0.21.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.0",
-    "@cntrl-site/sdk": "^1.4.1",
+    "@cntrl-site/effects": "^1.0.5-1",
+    "@cntrl-site/sdk": "^1.4.2",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/ImageItem.tsx

@@ -24,7 +24,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   useImageFx(fxCanvas.current, hasGLEffect ?? false, {
     imageUrl: url,
-    fragmentShader
+    fragmentShader,
+    cursor: item.commonParams.FXCursor
   });
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);

package/src/utils/effects/useImageFx.ts

@@ -2,27 +2,47 @@ import { useEffect, useMemo, useRef } from 'react';
 import { ImageEffect } from '@cntrl-site/effects';
 import { rangeMap } from '../rangeMap';
 
+export interface FXCursor {
+  type: 'mouse' | 'manual';
+  x: number;
+  y: number;
+}
+
 interface FxParams {
   imageUrl?: string;
   fragmentShader?: string;
+  cursor?: FXCursor;
 }
 
+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';
+
 export function useImageFx(
   canvas: HTMLCanvasElement | null | undefined,
   enabled: boolean,
   {
     imageUrl,
-    fragmentShader
+    fragmentShader,
+    cursor
   }: FxParams
 ): void {
-  const cursor = useRef<[number, number]>([0, 0]);
+  const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageFx = useMemo<ImageEffect | undefined>(() => {
-    if (!imageUrl) return undefined;
-    return new ImageEffect(imageUrl, fragmentShader!, { time: 0, cursor: cursor.current });
+    if (!imageUrl || !cursor) return undefined;
+    const { type, x, y } = cursor;
+    return new ImageEffect(
+      imageUrl,
+      PATTERN_URL,
+      PATTERN_2_URL,
+      fragmentShader!,
+      {
+        time: 0,
+        cursor: type === 'mouse' ? mousePos.current : [x, y]
+      });
   }, [imageUrl, fragmentShader]);
 
   useEffect(() => {
-    if (!canvas || !imageFx) return;
+    if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx) return;
     const handleMouseMove = (evt: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
       const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1);
@@ -33,7 +53,7 @@ export function useImageFx(
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [canvas, imageFx]);
+  }, [canvas, imageFx, cursor?.type]);
 
   useEffect(() => {
     const gl = canvas?.getContext('webgl2');