@cntrl-site/components 0.1.6-19 → 0.1.6-21

package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts

@@ -72,6 +72,14 @@ export declare const ControlImageRevealSliderComponent: {
                                 };
                                 enum: string[];
                             };
+                            target: {
+                                type: string;
+                                title: string;
+                                display: {
+                                    type: string;
+                                };
+                                enum: string[];
+                            };
                             defaultCursor: {
                                 type: string[];
                                 title: string;
@@ -127,13 +135,7 @@ export declare const ControlImageRevealSliderComponent: {
                             };
                             visible: {
                                 type: string;
-                                display: {
-                                    type: string;
-                                };
-                                enum: string[];
-                            };
-                            target: {
-                                type: string;
+                                title: string;
                                 display: {
                                     type: string;
                                 };
@@ -153,6 +155,7 @@ export declare const ControlImageRevealSliderComponent: {
                     };
                     cursor: {
                         cursorType: string;
+                        target: string;
                         defaultCursor: null;
                         defaultCursorScale: number;
                         hoverCursor: null;
@@ -161,7 +164,6 @@ export declare const ControlImageRevealSliderComponent: {
                     position: {
                         revealPosition: string;
                         visible: string;
-                        target: string;
                     };
                 };
                 displayRules: ({

package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts

@@ -14,6 +14,7 @@ type ImageRevealSliderImageSize = {
 };
 type ImageRevealSliderCursor = {
     cursorType: 'system' | 'custom';
+    target: 'area' | 'image';
     defaultCursorScale: number;
     defaultCursor: string | null;
     hoverCursorScale: number;
@@ -22,7 +23,6 @@ type ImageRevealSliderCursor = {
 type ImageRevealSliderPosition = {
     revealPosition: 'random' | 'same' | 'on Click';
     visible: 'all' | 'last One';
-    target: 'area' | 'image';
 };
 type ImageRevealSliderSettings = {
     imageSize: ImageRevealSliderImageSize;

package/dist/index.js

@@ -4,7 +4,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactSplide = require("@splidejs/react-splide");
 const cn = require("classnames");
-const framerMotion = require("framer-motion");
 const reactDom = require("react-dom");
 const wrapper = "ControlSlider-module__wrapper___sHEkd";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
@@ -1041,12 +1040,10 @@ const ControlSliderComponent = {
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
 const image = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
-const cursor = "ImageRevealSlider-module__cursor___2U03d";
 const styles = {
   imageRevealSlider,
   image,
-  link,
-  cursor
+  link
 };
 function isMouseOverImage(mouseX, mouseY, placedImages) {
   for (const img2 of placedImages) {
@@ -1094,23 +1091,20 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [placedImages, setPlacedImages] = React.useState([]);
   const [counter, setCounter] = React.useState(0);
   const imageIdCounter = React.useRef(0);
-  const defaultImageCount = 1;
-  const lastMousePos = React.useRef({ x: 0, y: 0 });
-  const [isInside, setIsInside] = React.useState(false);
-  const cursorX = framerMotion.useMotionValue(-100);
-  const cursorY = framerMotion.useMotionValue(-100);
   const defaultScale = 32;
-  const cursorW = framerMotion.useMotionValue(32);
-  const cursorH = framerMotion.useMotionValue(32);
+  const [cursorCenter, setCursorCenter] = React.useState({ x: -100, y: -100 });
+  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);
   React.useEffect(() => {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
-      const divRect = divRef.getBoundingClientRect();
-      const newX = clientX - cursorW.get() / 2 - divRect.left;
-      const newY = clientY - cursorH.get() / 2 - divRect.top;
-      cursorX.jump(newX);
-      cursorY.jump(newY);
+      const rect = divRef.getBoundingClientRect();
+      setCursorCenter({
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      });
     };
     const mouseMove = (e) => {
       e.stopPropagation();
@@ -1127,64 +1121,49 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [cursorX, cursorY, cursorW, cursorH, divRef, isInside]);
+  }, [divRef, isInside]);
   React.useEffect(() => {
     if (!isInside) {
       setCustomCursorImg("none");
-      cursorW.set(0);
-      cursorH.set(0);
+      setCursorSize({ w: 0, h: 0 });
     }
   }, [isInside]);
   const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
-  const { revealPosition, visible, target } = settings.position;
-  const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
+  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");
-        cursorW.set(defaultScale);
-        cursorH.set(defaultScale);
+        setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
-      if (elUnderCursor && elUnderCursor.closest("a.link")) {
+      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");
-        cursorW.set(defaultScale);
-        cursorH.set(defaultScale);
+        setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      if (target === "area") {
-        setCustomCursorImg(hoverCursor || "none");
-        cursorW.set(defaultScale * hoverCursorScale || 1);
-        cursorH.set(defaultScale * hoverCursorScale || 1);
-      } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
-        setCustomCursorImg(hoverCursor || "none");
-        cursorW.set(defaultScale * hoverCursorScale || 1);
-        cursorH.set(defaultScale * hoverCursorScale || 1);
-      } else {
-        setCustomCursorImg(defaultCursor || "none");
-        cursorW.set(defaultScale * defaultCursorScale || 1);
-        cursorH.set(defaultScale * defaultCursorScale || 1);
-      }
+      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 unsubscribeX = cursorX.onChange(updateCursor);
-    const unsubscribeY = cursorY.onChange(updateCursor);
     updateCursor();
-    return () => {
-      unsubscribeX();
-      unsubscribeY();
-    };
   }, [
+    cursorCenter,
     cursorType,
     target,
     hoverCursor,
     defaultCursor,
     hoverCursorScale,
     defaultCursorScale,
-    cursorX,
-    cursorY,
-    cursorW,
-    cursorH,
     placedImages
   ]);
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
@@ -1215,7 +1194,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     };
   };
   const defaultContentUrls = React.useMemo(() => {
-    const defaultContentLength = Math.min(content.length, defaultImageCount);
+    const defaultContentLength = Math.min(content.length, 1);
     return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
   }, [content]);
   React.useEffect(() => {
@@ -1225,13 +1204,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     const containerHeight = rect.height;
     const defaultPlaced = [];
     const placeImages = async () => {
-      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
+      for (let i = 0; i < 1 && i < content.length; i++) {
         const imgData = content[i];
         const newImg = await createNewImage(imgData, containerWidth, containerHeight);
         defaultPlaced.push(newImg);
       }
       setPlacedImages(defaultPlaced);
-      setCounter(defaultImageCount % content.length);
+      setCounter(1 % content.length);
     };
     placeImages();
   }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
@@ -1305,18 +1284,21 @@ function ImageRevealSlider({ settings, content, isEditor }) {
           },
           img2.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
+        isInside && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            className: styles.cursor,
+            className: "cursor",
             style: {
-              x: cursorX,
-              y: cursorY,
-              width: cursorW.get(),
-              height: cursorH.get(),
+              left: `${cursorCenter.x}px`,
+              top: `${cursorCenter.y}px`,
+              width: cursorSize.w,
+              height: cursorSize.h,
+              transform: "translate(-50%, -50%)",
               backgroundImage: `url('${customCursorImg}')`,
               backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundPosition: "center",
+              position: "absolute",
+              pointerEvents: "none"
             }
           }
         )
@@ -1397,6 +1379,14 @@ const ControlImageRevealSliderComponent = {
                 },
                 enum: ["system", "custom"]
               },
+              target: {
+                type: "string",
+                title: "Target",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["area", "image"]
+              },
               defaultCursor: {
                 type: ["string", "null"],
                 title: "Default",
@@ -1452,17 +1442,11 @@ const ControlImageRevealSliderComponent = {
               },
               visible: {
                 type: "string",
+                title: "Visible",
                 display: {
                   type: "ratio-group"
                 },
                 enum: ["all", "last One"]
-              },
-              target: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["area", "image"]
               }
             }
           }
@@ -1478,6 +1462,7 @@ const ControlImageRevealSliderComponent = {
           },
           cursor: {
             cursorType: "system",
+            target: "area",
             defaultCursor: null,
             defaultCursorScale: 2,
             hoverCursor: null,
@@ -1485,8 +1470,7 @@ const ControlImageRevealSliderComponent = {
           },
           position: {
             revealPosition: "random",
-            visible: "all",
-            target: "area"
+            visible: "all"
           }
         },
         displayRules: [
@@ -1512,7 +1496,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" }
             ],
             then: {
@@ -1522,7 +1506,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" },
               { name: "cursor.defaultCursor", value: null, isNotEqual: true }
             ],

package/dist/index.mjs

@@ -2,7 +2,6 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Splide, SplideSlide } from "@splidejs/react-splide";
 import cn from "classnames";
-import { useMotionValue, motion } from "framer-motion";
 import { createPortal } from "react-dom";
 const wrapper = "ControlSlider-module__wrapper___sHEkd";
 const sliderItem = "ControlSlider-module__sliderItem___QQSkR";
@@ -1039,12 +1038,10 @@ const ControlSliderComponent = {
 const imageRevealSlider = "ImageRevealSlider-module__imageRevealSlider___UE5Ob";
 const image = "ImageRevealSlider-module__image___Qjt-e";
 const link = "ImageRevealSlider-module__link___N-iLG";
-const cursor = "ImageRevealSlider-module__cursor___2U03d";
 const styles = {
   imageRevealSlider,
   image,
-  link,
-  cursor
+  link
 };
 function isMouseOverImage(mouseX, mouseY, placedImages) {
   for (const img2 of placedImages) {
@@ -1092,23 +1089,20 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [placedImages, setPlacedImages] = useState([]);
   const [counter, setCounter] = useState(0);
   const imageIdCounter = useRef(0);
-  const defaultImageCount = 1;
-  const lastMousePos = useRef({ x: 0, y: 0 });
-  const [isInside, setIsInside] = useState(false);
-  const cursorX = useMotionValue(-100);
-  const cursorY = useMotionValue(-100);
   const defaultScale = 32;
-  const cursorW = useMotionValue(32);
-  const cursorH = useMotionValue(32);
+  const [cursorCenter, setCursorCenter] = useState({ x: -100, y: -100 });
+  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);
   useEffect(() => {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
-      const divRect = divRef.getBoundingClientRect();
-      const newX = clientX - cursorW.get() / 2 - divRect.left;
-      const newY = clientY - cursorH.get() / 2 - divRect.top;
-      cursorX.jump(newX);
-      cursorY.jump(newY);
+      const rect = divRef.getBoundingClientRect();
+      setCursorCenter({
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      });
     };
     const mouseMove = (e) => {
       e.stopPropagation();
@@ -1125,64 +1119,49 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [cursorX, cursorY, cursorW, cursorH, divRef, isInside]);
+  }, [divRef, isInside]);
   useEffect(() => {
     if (!isInside) {
       setCustomCursorImg("none");
-      cursorW.set(0);
-      cursorH.set(0);
+      setCursorSize({ w: 0, h: 0 });
     }
   }, [isInside]);
   const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
-  const { revealPosition, visible, target } = settings.position;
-  const { cursorType, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
+  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");
-        cursorW.set(defaultScale);
-        cursorH.set(defaultScale);
+        setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const elUnderCursor = document.elementFromPoint(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2);
-      if (elUnderCursor && elUnderCursor.closest("a.link")) {
+      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");
-        cursorW.set(defaultScale);
-        cursorH.set(defaultScale);
+        setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      if (target === "area") {
-        setCustomCursorImg(hoverCursor || "none");
-        cursorW.set(defaultScale * hoverCursorScale || 1);
-        cursorH.set(defaultScale * hoverCursorScale || 1);
-      } else if (isMouseOverImage(cursorX.get() + cursorW.get() / 2, cursorY.get() + cursorH.get() / 2, placedImages)) {
-        setCustomCursorImg(hoverCursor || "none");
-        cursorW.set(defaultScale * hoverCursorScale || 1);
-        cursorH.set(defaultScale * hoverCursorScale || 1);
-      } else {
-        setCustomCursorImg(defaultCursor || "none");
-        cursorW.set(defaultScale * defaultCursorScale || 1);
-        cursorH.set(defaultScale * defaultCursorScale || 1);
-      }
+      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 unsubscribeX = cursorX.onChange(updateCursor);
-    const unsubscribeY = cursorY.onChange(updateCursor);
     updateCursor();
-    return () => {
-      unsubscribeX();
-      unsubscribeY();
-    };
   }, [
+    cursorCenter,
     cursorType,
     target,
     hoverCursor,
     defaultCursor,
     hoverCursorScale,
     defaultCursorScale,
-    cursorX,
-    cursorY,
-    cursorW,
-    cursorH,
     placedImages
   ]);
   const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
@@ -1213,7 +1192,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     };
   };
   const defaultContentUrls = useMemo(() => {
-    const defaultContentLength = Math.min(content.length, defaultImageCount);
+    const defaultContentLength = Math.min(content.length, 1);
     return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
   }, [content]);
   useEffect(() => {
@@ -1223,13 +1202,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     const containerHeight = rect.height;
     const defaultPlaced = [];
     const placeImages = async () => {
-      for (let i = 0; i < defaultImageCount && i < content.length; i++) {
+      for (let i = 0; i < 1 && i < content.length; i++) {
         const imgData = content[i];
         const newImg = await createNewImage(imgData, containerWidth, containerHeight);
         defaultPlaced.push(newImg);
       }
       setPlacedImages(defaultPlaced);
-      setCounter(defaultImageCount % content.length);
+      setCounter(1 % content.length);
     };
     placeImages();
   }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
@@ -1303,18 +1282,21 @@ function ImageRevealSlider({ settings, content, isEditor }) {
           },
           img2.id
         )),
-        /* @__PURE__ */ jsx(
-          motion.div,
+        isInside && /* @__PURE__ */ jsx(
+          "div",
           {
-            className: styles.cursor,
+            className: "cursor",
             style: {
-              x: cursorX,
-              y: cursorY,
-              width: cursorW.get(),
-              height: cursorH.get(),
+              left: `${cursorCenter.x}px`,
+              top: `${cursorCenter.y}px`,
+              width: cursorSize.w,
+              height: cursorSize.h,
+              transform: "translate(-50%, -50%)",
               backgroundImage: `url('${customCursorImg}')`,
               backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundPosition: "center",
+              position: "absolute",
+              pointerEvents: "none"
             }
           }
         )
@@ -1395,6 +1377,14 @@ const ControlImageRevealSliderComponent = {
                 },
                 enum: ["system", "custom"]
               },
+              target: {
+                type: "string",
+                title: "Target",
+                display: {
+                  type: "ratio-group"
+                },
+                enum: ["area", "image"]
+              },
               defaultCursor: {
                 type: ["string", "null"],
                 title: "Default",
@@ -1450,17 +1440,11 @@ const ControlImageRevealSliderComponent = {
               },
               visible: {
                 type: "string",
+                title: "Visible",
                 display: {
                   type: "ratio-group"
                 },
                 enum: ["all", "last One"]
-              },
-              target: {
-                type: "string",
-                display: {
-                  type: "ratio-group"
-                },
-                enum: ["area", "image"]
               }
             }
           }
@@ -1476,6 +1460,7 @@ const ControlImageRevealSliderComponent = {
           },
           cursor: {
             cursorType: "system",
+            target: "area",
             defaultCursor: null,
             defaultCursorScale: 2,
             hoverCursor: null,
@@ -1483,8 +1468,7 @@ const ControlImageRevealSliderComponent = {
           },
           position: {
             revealPosition: "random",
-            visible: "all",
-            target: "area"
+            visible: "all"
           }
         },
         displayRules: [
@@ -1510,7 +1494,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" }
             ],
             then: {
@@ -1520,7 +1504,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" },
               { name: "cursor.defaultCursor", value: null, isNotEqual: true }
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/components",
-  "version": "0.1.6-19",
+  "version": "0.1.6-21",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -47,7 +47,6 @@
     "@antfu/eslint-config": "^3.16.0",
     "@splidejs/react-splide": "^0.7.12",
     "classnames": "^2.5.1",
-    "framer-motion": "^12.23.27",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {