@cntrl-site/components 0.1.6-20 → 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

@@ -1092,7 +1092,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [counter, setCounter] = React.useState(0);
   const imageIdCounter = React.useRef(0);
   const defaultScale = 32;
-  const [cursorPos, setCursorPos] = React.useState({ x: -100, y: -100 });
+  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 });
@@ -1101,9 +1101,9 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
       const rect = divRef.getBoundingClientRect();
-      setCursorPos({
-        x: clientX - cursorSize.w / 2 - rect.left,
-        y: clientY - cursorSize.h / 2 - rect.top
+      setCursorCenter({
+        x: clientX - rect.left,
+        y: clientY - rect.top
       });
     };
     const mouseMove = (e) => {
@@ -1121,7 +1121,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [divRef, cursorSize, isInside]);
+  }, [divRef, isInside]);
   React.useEffect(() => {
     if (!isInside) {
       setCustomCursorImg("none");
@@ -1129,8 +1129,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     }
   }, [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;
@@ -1139,8 +1139,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
         setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const cx = cursorPos.x + cursorSize.w / 2;
-      const cy = cursorPos.y + cursorSize.h / 2;
+      const cx = cursorCenter.x;
+      const cy = cursorCenter.y;
       const rect = divRef.getBoundingClientRect();
       const el = document.elementFromPoint(
         rect.left + cx,
@@ -1151,13 +1151,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
         setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * (hoverCursorScale || 1), h: defaultScale * (hoverCursorScale || 1) } : { img: defaultCursor ?? "none", w: defaultScale * (defaultCursorScale || 1), h: 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 });
     };
     updateCursor();
   }, [
-    cursorPos,
+    cursorCenter,
     cursorType,
     target,
     hoverCursor,
@@ -1289,15 +1289,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
           {
             className: "cursor",
             style: {
-              transform: `translate(${cursorPos.x}px, ${cursorPos.y}px)`,
+              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",
               position: "absolute",
-              top: 0,
-              left: 0,
               pointerEvents: "none"
             }
           }
@@ -1379,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",
@@ -1434,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"]
               }
             }
           }
@@ -1460,6 +1462,7 @@ const ControlImageRevealSliderComponent = {
           },
           cursor: {
             cursorType: "system",
+            target: "area",
             defaultCursor: null,
             defaultCursorScale: 2,
             hoverCursor: null,
@@ -1467,8 +1470,7 @@ const ControlImageRevealSliderComponent = {
           },
           position: {
             revealPosition: "random",
-            visible: "all",
-            target: "area"
+            visible: "all"
           }
         },
         displayRules: [
@@ -1494,7 +1496,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" }
             ],
             then: {
@@ -1504,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

@@ -1090,7 +1090,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
   const [counter, setCounter] = useState(0);
   const imageIdCounter = useRef(0);
   const defaultScale = 32;
-  const [cursorPos, setCursorPos] = useState({ x: -100, y: -100 });
+  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 });
@@ -1099,9 +1099,9 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     if (!divRef) return;
     const updateCursorPosition = (clientX, clientY) => {
       const rect = divRef.getBoundingClientRect();
-      setCursorPos({
-        x: clientX - cursorSize.w / 2 - rect.left,
-        y: clientY - cursorSize.h / 2 - rect.top
+      setCursorCenter({
+        x: clientX - rect.left,
+        y: clientY - rect.top
       });
     };
     const mouseMove = (e) => {
@@ -1119,7 +1119,7 @@ function ImageRevealSlider({ settings, content, isEditor }) {
       divRef.removeEventListener("mousemove", mouseMove);
       window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [divRef, cursorSize, isInside]);
+  }, [divRef, isInside]);
   useEffect(() => {
     if (!isInside) {
       setCustomCursorImg("none");
@@ -1127,8 +1127,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
     }
   }, [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;
@@ -1137,8 +1137,8 @@ function ImageRevealSlider({ settings, content, isEditor }) {
         setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const cx = cursorPos.x + cursorSize.w / 2;
-      const cy = cursorPos.y + cursorSize.h / 2;
+      const cx = cursorCenter.x;
+      const cy = cursorCenter.y;
       const rect = divRef.getBoundingClientRect();
       const el = document.elementFromPoint(
         rect.left + cx,
@@ -1149,13 +1149,13 @@ function ImageRevealSlider({ settings, content, isEditor }) {
         setCursorSize({ w: defaultScale, h: defaultScale });
         return;
       }
-      const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * (hoverCursorScale || 1), h: defaultScale * (hoverCursorScale || 1) } : { img: defaultCursor ?? "none", w: defaultScale * (defaultCursorScale || 1), h: 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 });
     };
     updateCursor();
   }, [
-    cursorPos,
+    cursorCenter,
     cursorType,
     target,
     hoverCursor,
@@ -1287,15 +1287,15 @@ function ImageRevealSlider({ settings, content, isEditor }) {
           {
             className: "cursor",
             style: {
-              transform: `translate(${cursorPos.x}px, ${cursorPos.y}px)`,
+              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",
               position: "absolute",
-              top: 0,
-              left: 0,
               pointerEvents: "none"
             }
           }
@@ -1377,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",
@@ -1432,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"]
               }
             }
           }
@@ -1458,6 +1460,7 @@ const ControlImageRevealSliderComponent = {
           },
           cursor: {
             cursorType: "system",
+            target: "area",
             defaultCursor: null,
             defaultCursorScale: 2,
             hoverCursor: null,
@@ -1465,8 +1468,7 @@ const ControlImageRevealSliderComponent = {
           },
           position: {
             revealPosition: "random",
-            visible: "all",
-            target: "area"
+            visible: "all"
           }
         },
         displayRules: [
@@ -1492,7 +1494,7 @@ const ControlImageRevealSliderComponent = {
           },
           {
             if: [
-              { name: "position.target", value: "image" },
+              { name: "cursor.target", value: "image" },
               { name: "cursor.cursorType", value: "custom" }
             ],
             then: {
@@ -1502,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-20",
+  "version": "0.1.6-21",
   "description": "Custom components for control editor and public websites.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",