@geowiki/design-system 0.16.10-dev.3 → 0.16.10-dev.4

package/dist/index.d.mts

@@ -1120,11 +1120,12 @@ declare const SummaryCard: (props: SummaryCardProps) => react_jsx_runtime.JSX.El
 interface CarouselGalleryItemProps {
     text: string;
     url: string;
+    id?: any;
 }
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
-    saveRotationChanges?: (base64: string | null) => void;
+    saveRotationChanges?: (base64: string | null, id?: any) => void;
 }
 declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1120,11 +1120,12 @@ declare const SummaryCard: (props: SummaryCardProps) => react_jsx_runtime.JSX.El
 interface CarouselGalleryItemProps {
     text: string;
     url: string;
+    id?: any;
 }
 
 interface Props$6 {
     galleryItems: CarouselGalleryItemProps[];
-    saveRotationChanges?: (base64: string | null) => void;
+    saveRotationChanges?: (base64: string | null, id?: any) => void;
 }
 declare const CarouselItemList: ({ galleryItems, saveRotationChanges }: Props$6) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -7545,9 +7545,9 @@ var VideoPlayer = (props) => {
 
 // src/components/DesignElements/Carousel/CarouselGalleryItem.tsx
 var import_jsx_runtime133 = require("react/jsx-runtime");
-var CarouselGalleryItem = ({ text, url }) => {
+var CarouselGalleryItem = ({ text, url, id }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         ImageElement,
         {
@@ -7560,7 +7560,7 @@ var CarouselGalleryItem = ({ text, url }) => {
       /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
     (url.includes(".mp4") || url.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "transition-all duration-300 group-hover:brightness-50", children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "transition-all duration-300 group-hover:brightness-50", id, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
         VideoPlayer,
         {
           url,
@@ -7612,20 +7612,21 @@ var GalleryCarouselOpen = ({
     }
   };
   const generateBase64ofImage = () => {
-    const img = new Image();
+    const img = document.getElementById(defaultPhoto.id);
     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;
+    const radians = rotation * Math.PI / 180;
+    const sin = Math.abs(Math.sin(radians));
+    const cos = Math.abs(Math.cos(radians));
+    canvas.width = img.naturalWidth * cos + img.naturalHeight * sin;
+    canvas.height = img.naturalWidth * sin + img.naturalHeight * cos;
     ctx.translate(canvas.width / 2, canvas.height / 2);
-    ctx.rotate(rotation * Math.PI / 180);
-    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    ctx.rotate(radians);
+    ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
     base64 = canvas.toDataURL("image/jpeg");
-    return base64 != null ? base64 : null;
+    return base64;
   };
   (0, import_react25.useEffect)(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
@@ -7681,7 +7682,9 @@ var GalleryCarouselOpen = ({
             !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "img",
               {
+                id: defaultPhoto.id,
                 src: defaultPhoto.imageUrl,
+                crossOrigin: "anonymous",
                 alt: "Description",
                 style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
                 className: " p-4"
@@ -7690,6 +7693,7 @@ var GalleryCarouselOpen = ({
             (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               "video",
               {
+                id: defaultPhoto.id,
                 src: defaultPhoto.imageUrl,
                 controls: true,
                 preload: "metadata",
@@ -7718,11 +7722,11 @@ var GalleryCarouselOpen = ({
               setRotation(rotation + 90);
             } })
           ] }),
-          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              onClick: () => saveRotationChanges(generateBase64ofImage(), defaultPhoto.id),
               children: "Save rotation changes"
             }
           )
@@ -7738,9 +7742,11 @@ var import_jsx_runtime135 = require("react/jsx-runtime");
 var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = (0, import_react26.useState)(false);
   const [selectedItemId, setSelectedItemId] = (0, import_react26.useState)("");
-  const handleOpenGallery = (id) => {
+  const [selectedImageId, setSelectedImageId] = (0, import_react26.useState)(null);
+  const handleOpenGallery = (id, imageId) => {
     setOpen(true);
     setSelectedItemId(id);
+    setSelectedImageId(imageId);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(Carousel, { className: "w-full px-8", children: [
@@ -7748,8 +7754,8 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
         "div",
         {
           className: "flex aspect-square items-center justify-center cursor-pointer",
-          onClick: () => handleOpenGallery(galleryItem.url),
-          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url })
+          onClick: () => handleOpenGallery(galleryItem.url, galleryItem.id),
+          children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url, id: galleryItem.id })
         }
       ) }) }, index)) }),
       /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(CarouselPrevious, {}),
@@ -7758,10 +7764,11 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
     /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
       GalleryCarouselOpen,
       {
-        currentPhoto: { imageUrl: selectedItemId },
+        currentPhoto: { imageUrl: selectedItemId, id: selectedImageId },
         list: galleryItems.map((galleryItem) => ({
           url: galleryItem.url,
-          text: galleryItem.text
+          text: galleryItem.text,
+          id: galleryItem.id
         })),
         open,
         setOpen,

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 Image3 } from "@geowiki/core";
+import { Image as Image2 } 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(
-        Image3,
+        Image2,
         {
           className,
           src,
@@ -6000,7 +6000,7 @@ var ImageElement = ({
         }
       );
     return /* @__PURE__ */ jsx118(
-      Image3,
+      Image2,
       {
         className,
         src,
@@ -6015,7 +6015,7 @@ var ImageElement = ({
   }
   if (!showPlaceholder)
     return /* @__PURE__ */ jsx118(
-      Image3,
+      Image2,
       {
         className,
         src,
@@ -6027,7 +6027,7 @@ var ImageElement = ({
       }
     );
   return /* @__PURE__ */ jsx118("div", { className, children: /* @__PURE__ */ jsx118(
-    Image3,
+    Image2,
     {
       className: "rounded-xl",
       src,
@@ -7178,9 +7178,9 @@ var VideoPlayer = (props) => {
 
 // src/components/DesignElements/Carousel/CarouselGalleryItem.tsx
 import { Fragment as Fragment9, jsx as jsx132, jsxs as jsxs57 } from "react/jsx-runtime";
-var CarouselGalleryItem = ({ text, url }) => {
+var CarouselGalleryItem = ({ text, url, id }) => {
   return /* @__PURE__ */ jsxs57(Fragment9, { children: [
-    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", children: [
+    !url.includes(".mp4") && !url.includes(".mov") && /* @__PURE__ */ jsxs57("div", { className: "aspect-square sm:w-auto bg-center relative flex group ", id, children: [
       /* @__PURE__ */ jsx132(
         ImageElement,
         {
@@ -7193,7 +7193,7 @@ var CarouselGalleryItem = ({ text, url }) => {
       /* @__PURE__ */ jsx132("div", { className: " absolute bottom-6 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsx132("div", { className: " mx-6 text-white text-base leading-[120%] line-clamp-4", children: text }) })
     ] }),
     (url.includes(".mp4") || url.includes(".mov")) && /* @__PURE__ */ jsxs57("div", { className: " max-w-sm aspect-square relative group cursor-pointer overflow-hidden rounded-xl", children: [
-      /* @__PURE__ */ jsx132("div", { className: "transition-all duration-300 group-hover:brightness-50", children: /* @__PURE__ */ jsx132(
+      /* @__PURE__ */ jsx132("div", { className: "transition-all duration-300 group-hover:brightness-50", id, children: /* @__PURE__ */ jsx132(
         VideoPlayer,
         {
           url,
@@ -7245,20 +7245,21 @@ var GalleryCarouselOpen = ({
     }
   };
   const generateBase64ofImage = () => {
-    const img = new Image();
+    const img = document.getElementById(defaultPhoto.id);
     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;
+    const radians = rotation * Math.PI / 180;
+    const sin = Math.abs(Math.sin(radians));
+    const cos = Math.abs(Math.cos(radians));
+    canvas.width = img.naturalWidth * cos + img.naturalHeight * sin;
+    canvas.height = img.naturalWidth * sin + img.naturalHeight * cos;
     ctx.translate(canvas.width / 2, canvas.height / 2);
-    ctx.rotate(rotation * Math.PI / 180);
-    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+    ctx.rotate(radians);
+    ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
     base64 = canvas.toDataURL("image/jpeg");
-    return base64 != null ? base64 : null;
+    return base64;
   };
   useEffect8(() => {
     const foundPhoto = list.find((list2) => list2.url === defaultPhoto.imageUrl);
@@ -7314,7 +7315,9 @@ var GalleryCarouselOpen = ({
             !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
               "img",
               {
+                id: defaultPhoto.id,
                 src: defaultPhoto.imageUrl,
+                crossOrigin: "anonymous",
                 alt: "Description",
                 style: { maxWidth: "100%", maxHeight: "95vh", transform: `rotate(${rotation}deg)` },
                 className: " p-4"
@@ -7323,6 +7326,7 @@ var GalleryCarouselOpen = ({
             (defaultPhoto.imageUrl.includes(".mp4") || defaultPhoto.imageUrl.includes(".mov")) && /* @__PURE__ */ jsx133(
               "video",
               {
+                id: defaultPhoto.id,
                 src: defaultPhoto.imageUrl,
                 controls: true,
                 preload: "metadata",
@@ -7351,11 +7355,11 @@ var GalleryCarouselOpen = ({
               setRotation(rotation + 90);
             } })
           ] }),
-          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
+          saveRotationChanges && !defaultPhoto.imageUrl.includes(".mp4") && !defaultPhoto.imageUrl.includes(".mov") && /* @__PURE__ */ jsx133(
             "div",
             {
               className: "z-40 text-white hover:cursor-pointer",
-              onClick: () => saveRotationChanges(generateBase64ofImage()),
+              onClick: () => saveRotationChanges(generateBase64ofImage(), defaultPhoto.id),
               children: "Save rotation changes"
             }
           )
@@ -7371,9 +7375,11 @@ import { jsx as jsx134, jsxs as jsxs59 } from "react/jsx-runtime";
 var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
   const [open, setOpen] = useState15(false);
   const [selectedItemId, setSelectedItemId] = useState15("");
-  const handleOpenGallery = (id) => {
+  const [selectedImageId, setSelectedImageId] = useState15(null);
+  const handleOpenGallery = (id, imageId) => {
     setOpen(true);
     setSelectedItemId(id);
+    setSelectedImageId(imageId);
   };
   return /* @__PURE__ */ jsxs59("div", { children: [
     /* @__PURE__ */ jsxs59(Carousel, { className: "w-full px-8", children: [
@@ -7381,8 +7387,8 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
         "div",
         {
           className: "flex aspect-square items-center justify-center cursor-pointer",
-          onClick: () => handleOpenGallery(galleryItem.url),
-          children: /* @__PURE__ */ jsx134(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url })
+          onClick: () => handleOpenGallery(galleryItem.url, galleryItem.id),
+          children: /* @__PURE__ */ jsx134(CarouselGalleryItem, { text: galleryItem.text, url: galleryItem.url, id: galleryItem.id })
         }
       ) }) }, index)) }),
       /* @__PURE__ */ jsx134(CarouselPrevious, {}),
@@ -7391,10 +7397,11 @@ var CarouselItemList = ({ galleryItems, saveRotationChanges }) => {
     /* @__PURE__ */ jsx134(
       GalleryCarouselOpen,
       {
-        currentPhoto: { imageUrl: selectedItemId },
+        currentPhoto: { imageUrl: selectedItemId, id: selectedImageId },
         list: galleryItems.map((galleryItem) => ({
           url: galleryItem.url,
-          text: galleryItem.text
+          text: galleryItem.text,
+          id: galleryItem.id
         })),
         open,
         setOpen,

package/package.json

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