@cntrl-site/sdk-nextjs 1.0.3 → 1.0.4

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

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

@@ -27,7 +27,7 @@ uniform float u_time;
 uniform vec2 u_cursor;
 varying vec2 v_texCoord;`;
 const ImageItem = ({ item, sectionId, onResize }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -36,10 +36,10 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const borderColor = (0, react_1.useMemo)(() => strokeColor ? color_1.CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const { url, hasGLEffect, fragmentShader } = item.commonParams;
+    const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
-    const controls = (_a = item.commonParams.FXControls) !== null && _a !== void 0 ? _a : [];
+    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
     const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
         .join('\n');
     const controlValues = controls.reduce((acc, control) => {
@@ -49,23 +49,24 @@ const ImageItem = ({ item, sectionId, onResize }) => {
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
     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 exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
-    (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
+    const isFXAllowed = (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         imageUrl: url,
         fragmentShader: fullShaderCode,
-        cursor: item.commonParams.FXCursor,
+        cursor: FXCursor,
         controls: controlValues
     }, width, height);
+    console.log('isFXAllowed: ', isFXAllowed);
     const rect = (0, useElementRect_1.useElementRect)(ref);
-    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 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 = Object.assign(Object.assign(Object.assign({}, (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}));
-    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: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: item.commonParams.hasGLEffect ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    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: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), children: hasGLEffect && isFXAllowed ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight })) : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .image-wrapper-${item.id} {
           position: absolute;
           width: 100%;

package/lib/utils/effects/useImageFx.js

@@ -7,6 +7,7 @@ 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 }, width, height) {
+    const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
     const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageFx = (0, react_1.useMemo)(() => {
         if (!imageUrl || !cursor || !enabled)
@@ -41,7 +42,12 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, control
             time += 0.1;
             imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
             imageFx.setParam('time', time);
-            imageFx.render(gl);
+            try {
+                imageFx.render(gl);
+            }
+            catch (e) {
+                setIsFXAllowed(false);
+            }
             frame = requestAnimationFrame(renderFrame);
         };
         const observer = new IntersectionObserver(([entry]) => {
@@ -56,11 +62,17 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, control
             }
         });
         observer.observe(canvas);
-        imageFx.prepare(gl);
+        try {
+            imageFx.prepare(gl);
+        }
+        catch (e) {
+            setIsFXAllowed(false);
+        }
         return () => {
             window.cancelAnimationFrame(frame);
             observer.disconnect();
         };
     }, [canvas, imageFx, enabled]);
+    return isFXAllowed;
 }
 exports.useImageFx = useImageFx;

package/package.json

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

package/src/components/items/ImageItem.tsx

@@ -31,10 +31,10 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const borderColor = useMemo(() => strokeColor ? CntrlColor.parse(strokeColor) : undefined, [strokeColor]);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const { url, hasGLEffect, fragmentShader } = item.commonParams;
+  const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
-  const controls = item.commonParams.FXControls ?? [];
+  const controls = FXControls ?? [];
   const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
       .join('\n');
   const controlValues = controls.reduce<Record<string, ControlValue>>((acc, control) => {
@@ -50,18 +50,19 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   useEffect(() => {
     isInitialRef.current = false;
   }, []);
-  useImageFx(
+  const isFXAllowed = useImageFx(
     fxCanvas.current,
     !!(hasGLEffect && !isInitialRef.current),
     {
       imageUrl: url,
       fragmentShader: fullShaderCode,
-      cursor: item.commonParams.FXCursor,
+      cursor: FXCursor,
       controls: controlValues
     },
     width,
     height
   );
+  console.log('isFXAllowed: ', isFXAllowed);
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
@@ -82,7 +83,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
             ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           }}
         >
-          {item.commonParams.hasGLEffect ? (
+          {hasGLEffect && isFXAllowed ? (
             <canvas
               style={inlineStyles}
               ref={fxCanvas}

package/src/utils/effects/useImageFx.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ImageEffect } from '@cntrl-site/effects';
 import { rangeMap } from '../rangeMap';
 
@@ -30,7 +30,8 @@ export function useImageFx(
   }: FxParams,
   width: number,
   height: number
-): void {
+): boolean {
+  const [isFXAllowed, setIsFXAllowed] = useState(true);
   const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageFx = useMemo<ImageEffect | undefined>(() => {
     if (!imageUrl || !cursor || !enabled) return undefined;
@@ -77,7 +78,11 @@ export function useImageFx(
       time += 0.1;
       imageFx.setViewport(Math.floor(canvas.width), Math.floor(canvas.height));
       imageFx.setParam('time', time);
-      imageFx.render(gl);
+      try {
+        imageFx.render(gl);
+      } catch (e) {
+        setIsFXAllowed(false);
+      }
       frame = requestAnimationFrame(renderFrame);
     };
 
@@ -93,11 +98,16 @@ export function useImageFx(
       }
     });
     observer.observe(canvas);
-    imageFx.prepare(gl);
+    try {
+      imageFx.prepare(gl);
+    } catch (e) {
+      setIsFXAllowed(false);
+    }
 
     return () => {
       window.cancelAnimationFrame(frame);
       observer.disconnect();
     };
   }, [canvas, imageFx, enabled]);
+  return isFXAllowed;
 }