@geowiki/design-system 0.16.18 → 0.16.20

package/dist/index.js

@@ -7610,22 +7610,28 @@ var GalleryCarouselOpen = ({
   setOpen,
   saveRotationChanges,
   selectImage,
-  selectImageText
+  selectImageText,
+  imageRotation
 }) => {
   const [defaultPhoto, setDefaultPhoto] = (0, import_react25.useState)(currentPhoto);
   const [text, setDefaultText] = (0, import_react25.useState)("");
   const [id, setDefaultId] = (0, import_react25.useState)("");
-  const [rotation, setRotation] = (0, import_react25.useState)(0);
+  const [rotation, setRotation] = (0, import_react25.useState)(imageRotation);
+  const imageRef = (0, import_react25.useRef)(null);
+  const currentPhotoUrl = currentPhoto.imageUrl;
+  const currentPhotoId = currentPhoto.id;
   (0, import_react25.useEffect)(() => {
-    setDefaultPhoto(currentPhoto);
-  }, [currentPhoto]);
+    setDefaultPhoto({ imageUrl: currentPhotoUrl, id: currentPhotoId });
+    setRotation(imageRotation);
+  }, [currentPhotoUrl, currentPhotoId, imageRotation]);
   const handlePrevious = () => {
     const currentIndex = list.findIndex(
       (item) => item.url === defaultPhoto.imageUrl
     );
     if (currentIndex > 0) {
       const previousIndex = currentIndex - 1;
-      setDefaultPhoto({ imageUrl: list[previousIndex].url });
+      setDefaultPhoto({ imageUrl: list[previousIndex].url, id: list[previousIndex].id });
+      setRotation(0);
     }
   };
   const handleNext = () => {
@@ -7634,12 +7640,13 @@ var GalleryCarouselOpen = ({
     );
     if (currentIndex < list.length - 1) {
       const nextIndex = currentIndex + 1;
-      setDefaultPhoto({ imageUrl: list[nextIndex].url });
+      setDefaultPhoto({ imageUrl: list[nextIndex].url, id: list[nextIndex].id });
+      setRotation(0);
     }
   };
   const generateBase64ofImage = () => {
-    const img = document.getElementById(id);
-    let base64;
+    const img = imageRef.current;
+    if (!img || !img.complete || img.naturalWidth === 0) return null;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
@@ -7651,8 +7658,7 @@ var GalleryCarouselOpen = ({
     ctx.translate(canvas.width / 2, canvas.height / 2);
     ctx.rotate(radians);
     ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
-    base64 = canvas.toDataURL("image/jpeg");
-    return base64;
+    return canvas.toDataURL("image/jpeg");
   };
   (0, import_react25.useEffect)(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
@@ -7702,7 +7708,7 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40 ",
               onClick: handlePrevious,
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronLeft, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronLeft, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
@@ -7751,6 +7757,7 @@ var GalleryCarouselOpen = ({
                       !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                         "img",
                         {
+                          ref: imageRef,
                           id,
                           src: defaultPhoto.imageUrl,
                           crossOrigin: "anonymous",
@@ -7783,7 +7790,7 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40",
               onClick: handleNext,
-              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronRight, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.ChevronRight, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           )
         ] }),
@@ -7800,7 +7807,14 @@ var GalleryCarouselOpen = ({
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage(), id),
+              onClick: () => {
+                const base64 = generateBase64ofImage();
+                saveRotationChanges(base64, id);
+                if (base64) {
+                  setDefaultPhoto({ imageUrl: base64, id });
+                }
+                setRotation(0);
+              },
               children: "Save rotation changes"
             }
           ),
@@ -7858,6 +7872,7 @@ var CarouselItemList = (props) => {
           id: galleryItem.id
         })),
         open,
+        imageRotation: 0,
         allowZoom: props.allowZoom,
         selectImageText: props.selectImageText,
         setOpen,

package/dist/index.mjs

@@ -7230,7 +7230,7 @@ var CarouselGalleryItem = ({ text, url, id }) => {
 import { Fragment as Fragment10 } from "react";
 import { Dialog as Dialog5, Transition as Transition3 } from "@headlessui/react";
 import { XMarkIcon as XMarkIcon4 } from "@heroicons/react/24/outline";
-import { useState as useState14, useEffect as useEffect8 } from "react";
+import { useState as useState14, useEffect as useEffect8, useRef as useRef2 } from "react";
 import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight5, RotateCw, RotateCcw } from "lucide-react";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { jsx as jsx133, jsxs as jsxs58 } from "react/jsx-runtime";
@@ -7242,22 +7242,28 @@ var GalleryCarouselOpen = ({
   setOpen,
   saveRotationChanges,
   selectImage,
-  selectImageText
+  selectImageText,
+  imageRotation
 }) => {
   const [defaultPhoto, setDefaultPhoto] = useState14(currentPhoto);
   const [text, setDefaultText] = useState14("");
   const [id, setDefaultId] = useState14("");
-  const [rotation, setRotation] = useState14(0);
+  const [rotation, setRotation] = useState14(imageRotation);
+  const imageRef = useRef2(null);
+  const currentPhotoUrl = currentPhoto.imageUrl;
+  const currentPhotoId = currentPhoto.id;
   useEffect8(() => {
-    setDefaultPhoto(currentPhoto);
-  }, [currentPhoto]);
+    setDefaultPhoto({ imageUrl: currentPhotoUrl, id: currentPhotoId });
+    setRotation(imageRotation);
+  }, [currentPhotoUrl, currentPhotoId, imageRotation]);
   const handlePrevious = () => {
     const currentIndex = list.findIndex(
       (item) => item.url === defaultPhoto.imageUrl
     );
     if (currentIndex > 0) {
       const previousIndex = currentIndex - 1;
-      setDefaultPhoto({ imageUrl: list[previousIndex].url });
+      setDefaultPhoto({ imageUrl: list[previousIndex].url, id: list[previousIndex].id });
+      setRotation(0);
     }
   };
   const handleNext = () => {
@@ -7266,12 +7272,13 @@ var GalleryCarouselOpen = ({
     );
     if (currentIndex < list.length - 1) {
       const nextIndex = currentIndex + 1;
-      setDefaultPhoto({ imageUrl: list[nextIndex].url });
+      setDefaultPhoto({ imageUrl: list[nextIndex].url, id: list[nextIndex].id });
+      setRotation(0);
     }
   };
   const generateBase64ofImage = () => {
-    const img = document.getElementById(id);
-    let base64;
+    const img = imageRef.current;
+    if (!img || !img.complete || img.naturalWidth === 0) return null;
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
@@ -7283,8 +7290,7 @@ var GalleryCarouselOpen = ({
     ctx.translate(canvas.width / 2, canvas.height / 2);
     ctx.rotate(radians);
     ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
-    base64 = canvas.toDataURL("image/jpeg");
-    return base64;
+    return canvas.toDataURL("image/jpeg");
   };
   useEffect8(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
@@ -7334,7 +7340,7 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40 ",
               onClick: handlePrevious,
-              children: /* @__PURE__ */ jsx133(ChevronLeft2, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ jsx133(ChevronLeft2, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           ),
           /* @__PURE__ */ jsx133(
@@ -7383,6 +7389,7 @@ var GalleryCarouselOpen = ({
                       !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
                         "img",
                         {
+                          ref: imageRef,
                           id,
                           src: defaultPhoto.imageUrl,
                           crossOrigin: "anonymous",
@@ -7415,7 +7422,7 @@ var GalleryCarouselOpen = ({
               type: "button",
               className: " rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 z-40",
               onClick: handleNext,
-              children: /* @__PURE__ */ jsx133(ChevronRight5, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white", onClick: () => setRotation(0) })
+              children: /* @__PURE__ */ jsx133(ChevronRight5, { className: "h-8 w-8 disabled:pointer-events-none disabled:opacity-60 text-white" })
             }
           )
         ] }),
@@ -7432,7 +7439,14 @@ var GalleryCarouselOpen = ({
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage(), id),
+              onClick: () => {
+                const base64 = generateBase64ofImage();
+                saveRotationChanges(base64, id);
+                if (base64) {
+                  setDefaultPhoto({ imageUrl: base64, id });
+                }
+                setRotation(0);
+              },
               children: "Save rotation changes"
             }
           ),
@@ -7490,6 +7504,7 @@ var CarouselItemList = (props) => {
           id: galleryItem.id
         })),
         open,
+        imageRotation: 0,
         allowZoom: props.allowZoom,
         selectImageText: props.selectImageText,
         setOpen,
@@ -7632,10 +7647,10 @@ var FeatureDisabled = () => {
 };
 
 // src/components/Elements/IframeViewer.tsx
-import { useEffect as useEffect9, useRef as useRef2 } from "react";
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
 import { jsx as jsx138 } from "react/jsx-runtime";
 var IframeViewer = ({ html, className }) => {
-  const containerRef = useRef2(null);
+  const containerRef = useRef3(null);
   useEffect9(() => {
     if (containerRef.current) {
       containerRef.current.innerHTML = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/design-system",
-  "version": "0.16.18",
+  "version": "0.16.20",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "@geowiki/core": "0.16.18"
+    "@geowiki/core": "0.16.20"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",