@cntrl-site/components 0.1.8-0 → 0.1.8-1

package/dist/index.js

@@ -1105,19 +1105,37 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [counter, setCounter] = React.useState(0);
   const imageIdCounter = React.useRef(0);
   const defaultScale = 32;
-  const [cursorCenter, setCursorCenter] = React.useState({ x: -100, y: -100 });
+  const [cursorCenter, setCursorCenter] = React.useState({ x: 0, y: 0 });
   const [cursorSize, setCursorSize] = React.useState({ w: 32, h: 32 });
   const [customCursorImg, setCustomCursorImg] = React.useState("none");
   const lastMousePos = React.useRef({ x: 0, y: 0 });
   const [isInside, setIsInside] = React.useState(false);
+  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
+  const { revealPosition, visible } = settings.position;
+  const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
   React.useEffect(() => {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
       const rect = divRef.getBoundingClientRect();
-      setCursorCenter({
-        x: clientX - rect.left,
-        y: clientY - rect.top
-      });
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setCursorCenter({ x, y });
+      if (cursorType === "system") {
+        setCustomCursorImg("none");
+        setCursorSize({ w: defaultScale, h: defaultScale });
+        return;
+      }
+      const cx = x;
+      const cy = y;
+      const el = document.elementFromPoint(rect.left + cx, rect.top + cy);
+      if (el && el.closest("a")) {
+        setCustomCursorImg("none");
+        setCursorSize({ w: defaultScale, h: defaultScale });
+        return;
+      }
+      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
+      setCustomCursorImg(next.img);
+      setCursorSize({ w: next.w, h: next.h });
     };
     const mouseMove = (e) => {
       e.stopPropagation();
@@ -1134,42 +1152,9 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [divRef, isInside]);
-  React.useEffect(() => {
-    if (!isInside) {
-      setCustomCursorImg("none");
-      setCursorSize({ w: 0, h: 0 });
-    }
-  }, [isInside]);
-  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
-  const { revealPosition, visible } = settings.position;
-  const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
-  React.useEffect(() => {
-    const updateCursor = () => {
-      if (!divRef) return;
-      if (cursorType === "system") {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const cx = cursorCenter.x;
-      const cy = cursorCenter.y;
-      const rect = divRef.getBoundingClientRect();
-      const el = document.elementFromPoint(
-        rect.left + cx,
-        rect.top + cy
-      );
-      if (el && el.closest("a")) {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
-      setCustomCursorImg(next.img);
-      setCursorSize({ w: next.w, h: next.h });
-    };
-    updateCursor();
   }, [
+    divRef,
+    isInside,
     cursorCenter,
     cursorType,
     target,
@@ -1177,8 +1162,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     defaultCursor,
     hoverCursorScale,
     defaultCursorScale,
-    placedImages
+    placedImages,
+    window.scrollY
   ]);
+  React.useEffect(() => {
+    if (!isInside) {
+      setCustomCursorImg("none");
+      setCursorSize({ w: 0, h: 0 });
+    }
+  }, [isInside]);
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
     const { width, height, finalWidth } = await calculateImageWidthHeight(
       imgData.image.url,
@@ -1206,10 +1198,6 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       width: finalWidth
     };
   };
-  const defaultContentUrls = React.useMemo(() => {
-    const defaultContentLength = Math.min(content.length, 1);
-    return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
-  }, [content]);
   React.useEffect(() => {
     if (!divRef || content.length === 0) return;
     const rect = divRef.getBoundingClientRect();
@@ -1226,7 +1214,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       setCounter(1 % content.length);
     };
     placeImages();
-  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
+  }, [sizeType, customWidth, randomRange, revealPosition, divRef]);
   React.useEffect(() => {
     if (visible === "last One") {
       setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
 import { createPortal } from "react-dom";
@@ -1103,19 +1103,37 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [counter, setCounter] = useState(0);
   const imageIdCounter = useRef(0);
   const defaultScale = 32;
-  const [cursorCenter, setCursorCenter] = useState({ x: -100, y: -100 });
+  const [cursorCenter, setCursorCenter] = useState({ x: 0, y: 0 });
   const [cursorSize, setCursorSize] = useState({ w: 32, h: 32 });
   const [customCursorImg, setCustomCursorImg] = useState("none");
   const lastMousePos = useRef({ x: 0, y: 0 });
   const [isInside, setIsInside] = useState(false);
+  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
+  const { revealPosition, visible } = settings.position;
+  const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
   useEffect(() => {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
       const rect = divRef.getBoundingClientRect();
-      setCursorCenter({
-        x: clientX - rect.left,
-        y: clientY - rect.top
-      });
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      setCursorCenter({ x, y });
+      if (cursorType === "system") {
+        setCustomCursorImg("none");
+        setCursorSize({ w: defaultScale, h: defaultScale });
+        return;
+      }
+      const cx = x;
+      const cy = y;
+      const el = document.elementFromPoint(rect.left + cx, rect.top + cy);
+      if (el && el.closest("a")) {
+        setCustomCursorImg("none");
+        setCursorSize({ w: defaultScale, h: defaultScale });
+        return;
+      }
+      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
+      setCustomCursorImg(next.img);
+      setCursorSize({ w: next.w, h: next.h });
     };
     const mouseMove = (e) => {
       e.stopPropagation();
@@ -1132,42 +1150,9 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [divRef, isInside]);
-  useEffect(() => {
-    if (!isInside) {
-      setCustomCursorImg("none");
-      setCursorSize({ w: 0, h: 0 });
-    }
-  }, [isInside]);
-  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
-  const { revealPosition, visible } = settings.position;
-  const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
-  useEffect(() => {
-    const updateCursor = () => {
-      if (!divRef) return;
-      if (cursorType === "system") {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const cx = cursorCenter.x;
-      const cy = cursorCenter.y;
-      const rect = divRef.getBoundingClientRect();
-      const el = document.elementFromPoint(
-        rect.left + cx,
-        rect.top + cy
-      );
-      if (el && el.closest("a")) {
-        setCustomCursorImg("none");
-        setCursorSize({ w: defaultScale, h: defaultScale });
-        return;
-      }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
-      setCustomCursorImg(next.img);
-      setCursorSize({ w: next.w, h: next.h });
-    };
-    updateCursor();
   }, [
+    divRef,
+    isInside,
     cursorCenter,
     cursorType,
     target,
@@ -1175,8 +1160,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     defaultCursor,
     hoverCursorScale,
     defaultCursorScale,
-    placedImages
+    placedImages,
+    window.scrollY
   ]);
+  useEffect(() => {
+    if (!isInside) {
+      setCustomCursorImg("none");
+      setCursorSize({ w: 0, h: 0 });
+    }
+  }, [isInside]);
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
     const { width, height, finalWidth } = await calculateImageWidthHeight(
       imgData.image.url,
@@ -1204,10 +1196,6 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       width: finalWidth
     };
   };
-  const defaultContentUrls = useMemo(() => {
-    const defaultContentLength = Math.min(content.length, 1);
-    return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
-  }, [content]);
   useEffect(() => {
     if (!divRef || content.length === 0) return;
     const rect = divRef.getBoundingClientRect();
@@ -1224,7 +1212,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       setCounter(1 % content.length);
     };
     placeImages();
-  }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
+  }, [sizeType, customWidth, randomRange, revealPosition, divRef]);
   useEffect(() => {
     if (visible === "last One") {
       setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.8-0",
+  "version": "0.1.8-1",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",