@geowiki/design-system 0.16.10-dev.0 → 0.16.10-dev.1

package/dist/index.d.mts

@@ -1124,8 +1124,9 @@ interface CarouselGalleryItemProps {
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
+    saveRotationChanges?: (base64: string | null) => void;
 }
-declare const CarouselItemList: ({ galleryItems }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 
 declare const OldButton: ({ label, appearance, compact, handleClick, loading, type, }: any) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1124,8 +1124,9 @@ interface CarouselGalleryItemProps {
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
+    saveRotationChanges?: (base64: string | null) => void;
 }
-declare const CarouselItemList: ({ galleryItems }: Props$6) => react_jsx_runtime.JSX.Element;
+declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 
 declare const OldButton: ({ label, appearance, compact, handleClick, loading, type, }: any) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -7584,7 +7584,8 @@ var GalleryCarouselOpen = ({
   list,
   currentPhoto,
   open,
-  setOpen
+  setOpen,
+  saveRotationChanges
 }) => {
   const [defaultPhoto, setDefaultPhoto] = (0, import_react25.useState)(currentPhoto);
   const [text, setDefaultText] = (0, import_react25.useState)("");
@@ -7610,6 +7611,22 @@ var GalleryCarouselOpen = ({
       setDefaultPhoto({ imageUrl: list[nextIndex].url });
     }
   };
+  const generateBase64ofImage = () => {
+    const img = new Image();
+    let base64;
+    img.src = defaultPhoto.imageUrl;
+    img.crossOrigin = "anonymous";
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    canvas.width = img.height;
+    canvas.height = img.width;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    base64 = canvas.toDataURL("image/jpeg");
+    return base64 != null ? base64 : null;
+  };
   (0, import_react25.useEffect)(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
@@ -7692,13 +7709,23 @@ var GalleryCarouselOpen = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "gap-2 flex flex-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation - 90);
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation + 90);
-          } })
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "justify-between flex flex-row mb-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "gap-2 flex flex-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation - 90);
+            } }),
+            /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_lucide_react20.RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation + 90);
+            } })
+          ] }),
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+            "div",
+            {
+              className: "z-40 text-white hover:cursor-pointer",
+              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              children: "Save rotation changes"
+            }
+          )
         ] })
       ] }) })
     ] }) })
@@ -7708,7 +7735,7 @@ var GalleryCarouselOpen = ({
 // src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
 var import_react26 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
-var CarouselItemList = ({ galleryItems }) => {
+var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = (0, import_react26.useState)(false);
   const [selectedItemId, setSelectedItemId] = (0, import_react26.useState)("");
   const handleOpenGallery = (id) => {
@@ -7737,7 +7764,8 @@ var CarouselItemList = ({ galleryItems }) => {
           text: galleryItem.text
         })),
         open,
-        setOpen
+        setOpen,
+        saveRotationChanges
       }
     )
   ] });

package/dist/index.mjs

@@ -5975,7 +5975,7 @@ import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { Link as Link3 } from "@geowiki/core";
 
 // src/components/Elements/ImageElement.tsx
-import { Image as Image2 } from "@geowiki/core";
+import { Image as Image3 } from "@geowiki/core";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var ImageElement = ({
   src,
@@ -5988,7 +5988,7 @@ var ImageElement = ({
   if (width && height) {
     if (!showPlaceholder)
       return /* @__PURE__ */ jsx118(
-        Image2,
+        Image3,
         {
           className,
           src,
@@ -6000,7 +6000,7 @@ var ImageElement = ({
         }
       );
     return /* @__PURE__ */ jsx118(
-      Image2,
+      Image3,
       {
         className,
         src,
@@ -6015,7 +6015,7 @@ var ImageElement = ({
   }
   if (!showPlaceholder)
     return /* @__PURE__ */ jsx118(
-      Image2,
+      Image3,
       {
         className,
         src,
@@ -6027,7 +6027,7 @@ var ImageElement = ({
       }
     );
   return /* @__PURE__ */ jsx118("div", { className, children: /* @__PURE__ */ jsx118(
-    Image2,
+    Image3,
     {
       className: "rounded-xl",
       src,
@@ -7217,7 +7217,8 @@ var GalleryCarouselOpen = ({
   list,
   currentPhoto,
   open,
-  setOpen
+  setOpen,
+  saveRotationChanges
 }) => {
   const [defaultPhoto, setDefaultPhoto] = useState14(currentPhoto);
   const [text, setDefaultText] = useState14("");
@@ -7243,6 +7244,22 @@ var GalleryCarouselOpen = ({
       setDefaultPhoto({ imageUrl: list[nextIndex].url });
     }
   };
+  const generateBase64ofImage = () => {
+    const img = new Image();
+    let base64;
+    img.src = defaultPhoto.imageUrl;
+    img.crossOrigin = "anonymous";
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    canvas.width = img.height;
+    canvas.height = img.width;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    base64 = canvas.toDataURL("image/jpeg");
+    return base64 != null ? base64 : null;
+  };
   useEffect8(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
     if (foundPhoto) {
@@ -7325,13 +7342,23 @@ var GalleryCarouselOpen = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs58("div", { className: "gap-2 flex flex-row", children: [
-          /* @__PURE__ */ jsx133(RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation - 90);
-          } }),
-          /* @__PURE__ */ jsx133(RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
-            setRotation(rotation + 90);
-          } })
+        /* @__PURE__ */ jsxs58("div", { className: "justify-between flex flex-row mb-5", children: [
+          /* @__PURE__ */ jsxs58("div", { className: "gap-2 flex flex-row", children: [
+            /* @__PURE__ */ jsx133(RotateCcw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation - 90);
+            } }),
+            /* @__PURE__ */ jsx133(RotateCw, { className: "h-6 w-6 text-white cursor-pointer", onClick: () => {
+              setRotation(rotation + 90);
+            } })
+          ] }),
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && /* @__PURE__ */ jsx133(
+            "div",
+            {
+              className: "z-40 text-white hover:cursor-pointer",
+              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              children: "Save rotation changes"
+            }
+          )
         ] })
       ] }) })
     ] }) })
@@ -7341,7 +7368,7 @@ var GalleryCarouselOpen = ({
 // src/components/DesignElements/Carousel/CarouselGalleryItemList.tsx
 import { useState as useState15 } from "react";
 import { jsx as jsx134, jsxs as jsxs59 } from "react/jsx-runtime";
-var CarouselItemList = ({ galleryItems }) => {
+var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = useState15(false);
   const [selectedItemId, setSelectedItemId] = useState15("");
   const handleOpenGallery = (id) => {
@@ -7370,7 +7397,8 @@ var CarouselItemList = ({ galleryItems }) => {
           text: galleryItem.text
         })),
         open,
-        setOpen
+        setOpen,
+        saveRotationChanges
       }
     )
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/design-system",
-  "version": "0.16.10-dev.0",
+  "version": "0.16.10-dev.1",
   "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.10-dev.0"
+    "@geowiki/core": "0.16.10-dev.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",