feat: add image dimensions tracking and enhance export options with metadata support

Author: ahnv

examples/react-example/src/index.tsx

@@ -8,7 +8,9 @@ import ReactDOM from "react-dom"
 function App() {
   const [open, setOpen] = React.useState(true)
   const [editorProps, setEditorProps] =
-    React.useState<ImageKitEditorProps<{ requireSignedUrl: boolean }>>()
+    React.useState<
+      ImageKitEditorProps<{ requireSignedUrl: boolean; fileName: string }>
+    >()
   const ref = React.useRef<ImageKitEditorRef>(null)
 
   /**
@@ -28,18 +30,21 @@ function App() {
           url: "https://ik.imagekit.io/v3sxk1svj/white%20BMW%20car%20on%20street.jpg",
           metadata: {
             requireSignedUrl: false,
+            fileName: "white BMW car on street.jpg",
           },
         },
         {
           url: "https://ik.imagekit.io/v3sxk1svj/Young%20Living%20Patchouili%20bot....jpg",
           metadata: {
             requireSignedUrl: false,
+            fileName: "Young Living Patchouili bot.jpg",
           },
         },
         {
           url: "https://ik.imagekit.io/v3sxk1svj/brown%20bear%20plush%20toy%20on%20whi....jpg?updatedAt=1760432666859",
           metadata: {
             requireSignedUrl: false,
+            fileName: "brown bear plush toy on white.jpg",
           },
         },
         // ...Array.from({ length: 10000 }).map((_, i) => ({
@@ -57,26 +62,26 @@ function App() {
           label: "Export",
           icon: <Icon boxSize={"5"} as={PiDownload} />,
           isVisible: true,
-          onClick: (images) => {
-            console.log(images)
+          onClick: (images, currentImage) => {
+            console.log(images, currentImage)
           },
         },
-        {
-          type: "menu",
-          label: "Export",
-          icon: <Icon boxSize={"5"} as={PiDownload} />,
-          isVisible: true,
-          options: [
-            {
-              label: "Export",
-              icon: <Icon boxSize={"5"} as={PiDownload} />,
-              isVisible: true,
-              onClick: (images) => {
-                console.log(images)
-              },
-            },
-          ],
-        },
+        // {
+        //   type: "menu",
+        //   label: "Export",
+        //   icon: <Icon boxSize={"5"} as={PiDownload} />,
+        //   isVisible: true,
+        //   options: [
+        //     {
+        //       label: "Export",
+        //       icon: <Icon boxSize={"5"} as={PiDownload} />,
+        //       isVisible: true,
+        //       onClick: (images) => {
+        //         console.log(images)
+        //       },
+        //     },
+        //   ],
+        // },
       ],
       signer: async (request) => {
         console.log(request)

packages/imagekit-editor-dev/src/ImageKitEditor.tsx

@@ -4,7 +4,6 @@ import merge from "lodash/merge"
 import React, { forwardRef, useImperativeHandle } from "react"
 import { EditorLayout, EditorWrapper } from "./components/editor"
 import type { HeaderProps } from "./components/header"
-import type { DEFAULT_FOCUS_OBJECTS } from "./schema"
 import {
   type FileElement,
   type FocusObjects,
@@ -25,7 +24,7 @@ interface EditorProps<Metadata extends RequiredMetadata = RequiredMetadata> {
   initialImages?: Array<string | FileElement<Metadata>>
   signer?: Signer<Metadata>
   onAddImage?: () => void
-  exportOptions?: HeaderProps["exportOptions"]
+  exportOptions?: HeaderProps<Metadata>["exportOptions"]
   focusObjects?: ReadonlyArray<FocusObjects>
   onClose: (args: { dirty: boolean; destroy: () => void }) => void
 }

packages/imagekit-editor-dev/src/components/RetryableImage.tsx

@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react"
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useVisibility } from "../hooks/useVisibility"
+import { useEditorStore } from "../store"
 
 export interface RetryableImageProps extends ImageProps {
   maxRetries?: number
@@ -144,7 +145,8 @@ export default function RetryableImage(props: RetryableImageProps) {
 
   const overlayActive = !!externalLoading || loading
 
-  const handleVisibleLoad = () => {
+  const handleVisibleLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    imgProps?.onLoad?.(event)
     setLoading(false)
     setError(null)
     lastSuccessBaseRef.current = currentSrcBase

packages/imagekit-editor-dev/src/components/editor/ActionBar.tsx

@@ -17,7 +17,7 @@ import {
 import { PiGridFour } from "@react-icons/all-files/pi/PiGridFour"
 import { PiImageSquare } from "@react-icons/all-files/pi/PiImageSquare"
 import { PiListBullets } from "@react-icons/all-files/pi/PiListBullets"
-import { type FC, useEffect, useState } from "react"
+import { type FC, useMemo } from "react"
 import { useEditorStore } from "../../store"
 
 interface ActionBarProps {
@@ -33,25 +33,19 @@ export const ActionBar: FC<ActionBarProps> = ({
   gridImageSize,
   setGridImageSize,
 }) => {
-  const { currentImage, showOriginal, setShowOriginal } = useEditorStore()
+  const {
+    currentImage,
+    imageList,
+    originalImageList,
+    showOriginal,
+    setShowOriginal,
+  } = useEditorStore()
 
-  const [imageDimensions, setImageDimensions] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-
-  useEffect(() => {
-    if (currentImage) {
-      const img = new Image()
-      img.onload = () => {
-        setImageDimensions({
-          width: img.naturalWidth,
-          height: img.naturalHeight,
-        })
-      }
-      img.src = currentImage
-    }
-  }, [currentImage])
+  const imageDimensions = useMemo(() => {
+    const idx = imageList.findIndex((img) => img === currentImage)
+    if (idx === -1) return null
+    return originalImageList[idx].imageDimensions
+  }, [currentImage, imageList, originalImageList])
 
   return (
     <Box

packages/imagekit-editor-dev/src/components/editor/GridView.tsx

@@ -27,6 +27,7 @@ export const GridView: FC<GridViewProps> = ({ imageSize, onAddImage }) => {
     originalImageList,
     signingImages,
     removeImage,
+    setImageDimensions,
   } = useEditorStore()
   return (
     <Flex
@@ -157,6 +158,12 @@ export const GridView: FC<GridViewProps> = ({ imageSize, onAddImage }) => {
                         </Center>
                       }
                       isLoading={isSigning}
+                      onLoad={(event) => {
+                        setImageDimensions(originalImageList[index]!.url, {
+                          width: event.currentTarget.naturalWidth,
+                          height: event.currentTarget.naturalHeight,
+                        })
+                      }}
                     />
                   </Box>
                 )}

packages/imagekit-editor-dev/src/components/editor/ListView.tsx

@@ -15,6 +15,7 @@ export const ListView: FC<ListViewProps> = ({ onAddImage }) => {
     imageList,
     originalImageList,
     signingImages,
+    setImageDimensions,
     _internalState,
   } = useEditorStore()
 
@@ -53,6 +54,16 @@ export const ListView: FC<ListViewProps> = ({ onAddImage }) => {
               const originalUrl = originalImageList[idx]?.url
               return originalUrl ? signingImages[originalUrl] : false
             })()}
+            onLoad={(event) => {
+              console.log(event)
+              if (!currentImage) return
+              const idx = imageList.findIndex((img) => img === currentImage)
+              if (idx === -1) return
+              setImageDimensions(originalImageList[idx]!.url, {
+                width: event.currentTarget.naturalWidth,
+                height: event.currentTarget.naturalHeight,
+              })
+            }}
           />
         </Flex>
       </Flex>

packages/imagekit-editor-dev/src/components/header/index.tsx

@@ -14,31 +14,46 @@ import { PiImageSquare } from "@react-icons/all-files/pi/PiImageSquare"
 import { PiImagesSquare } from "@react-icons/all-files/pi/PiImagesSquare"
 import { PiX } from "@react-icons/all-files/pi/PiX"
 import React, { useMemo } from "react"
-import { useEditorStore } from "../../store"
+import {
+  type FileElement,
+  type RequiredMetadata,
+  useEditorStore,
+} from "../../store"
 
-interface ExportOptionButton {
+interface ExportOptionButton<
+  Metadata extends RequiredMetadata = RequiredMetadata,
+> {
   type: "button"
   label: string
   icon?: React.ReactElement
   isVisible: boolean | ((images: string[], currentImage?: string) => boolean)
-  onClick: (images: string[], currentImage?: string) => void
+  onClick: (
+    images: { url: string; file: FileElement<Metadata> }[],
+    currentImage?: { url: string; file: FileElement<Metadata> },
+  ) => void
 }
 
-interface ExportOptionMenu {
+interface ExportOptionMenu<
+  Metadata extends RequiredMetadata = RequiredMetadata,
+> {
   type: "menu"
   label: string
   icon?: React.ReactElement
   isVisible: boolean | ((images: string[], currentImage?: string) => boolean)
-  options: Array<Omit<ExportOptionButton, "type">>
+  options: Array<Omit<ExportOptionButton<Metadata>, "type">>
 }
 
-export interface HeaderProps {
+export interface HeaderProps<
+  Metadata extends RequiredMetadata = RequiredMetadata,
+> {
   onClose: () => void
-  exportOptions?: Array<ExportOptionButton | ExportOptionMenu>
+  exportOptions?: Array<
+    ExportOptionButton<Metadata> | ExportOptionMenu<Metadata>
+  >
 }
 
 export const Header = ({ onClose, exportOptions }: HeaderProps) => {
-  const { imageList, currentImage } = useEditorStore()
+  const { imageList, originalImageList, currentImage } = useEditorStore()
 
   const headerText = useMemo(() => {
     if (imageList.length === 1) {
@@ -92,7 +107,19 @@ export const Header = ({ onClose, exportOptions }: HeaderProps) => {
                 borderRadius="0"
                 px="8"
                 size="sm"
-                onClick={() => exportOption.onClick(imageList, currentImage)}
+                onClick={() => {
+                  const images = imageList.map((image, index) => ({
+                    url: image,
+                    file: originalImageList[index],
+                  }))
+                  const cImage = images.find(
+                    (image) => image.url === currentImage,
+                  )
+                  exportOption.onClick(images, {
+                    url: cImage!.url,
+                    file: cImage!.file,
+                  })
+                }}
               >
                 {exportOption.label}
               </Button>
@@ -121,7 +148,19 @@ export const Header = ({ onClose, exportOptions }: HeaderProps) => {
                     .map((option) => (
                       <MenuItem
                         key={`export-menu-option-${option.label}`}
-                        onClick={() => option.onClick(imageList, currentImage)}
+                        onClick={() => {
+                          const images = imageList.map((image, index) => ({
+                            url: image,
+                            file: originalImageList[index],
+                          }))
+                          const cImage = images.find(
+                            (image) => image.url === currentImage,
+                          )
+                          option.onClick(images, {
+                            url: cImage!.url,
+                            file: cImage!.file,
+                          })
+                        }}
                       >
                         {option.label}
                       </MenuItem>

packages/imagekit-editor-dev/src/components/toolbar/toolbar.tsx

@@ -21,6 +21,7 @@ export const Toolbar: FC<ToolbarProps> = ({ onAddImage, onSelectImage }) => {
     signingImages,
     setCurrentImage,
     removeImage,
+    setImageDimensions,
     _internalState,
   } = useEditorStore()
 
@@ -204,6 +205,12 @@ export const Toolbar: FC<ToolbarProps> = ({ onAddImage, onSelectImage }) => {
                         </Center>
                       }
                       isLoading={isSigning}
+                      onLoad={(event) => {
+                        setImageDimensions(originalImageList[index]!.url, {
+                          width: event.currentTarget.naturalWidth,
+                          height: event.currentTarget.naturalHeight,
+                        })
+                      }}
                     />
                   </Box>
                 )}

packages/imagekit-editor-dev/src/store.ts

@@ -28,6 +28,7 @@ export interface FileElement<
 > {
   url: string
   metadata: Metadata
+  imageDimensions: { width: number; height: number } | null
 }
 
 export interface SignerRequest<
@@ -90,6 +91,10 @@ export type EditorActions<
   }) => void
   destroy: () => void
   setCurrentImage: (imageSrc: string | undefined) => void
+  setImageDimensions: (
+    imageSrc: string,
+    dimensions: { width: number; height: number } | null,
+  ) => void
   addImage: (imageSrc: string | FileElement<Metadata>) => void
   addImages: (imageSrcs: Array<string | FileElement<Metadata>>) => void
   removeImage: (imageSrc: string) => void
@@ -137,6 +142,7 @@ function normalizeImage<Metadata extends RequiredMetadata = RequiredMetadata>(
     return {
       url: image,
       metadata: { requireSignedUrl: false } as Metadata,
+      imageDimensions: null,
     }
   }
   return {
@@ -147,6 +153,7 @@ function normalizeImage<Metadata extends RequiredMetadata = RequiredMetadata>(
           requireSignedUrl: image.metadata.requireSignedUrl ?? false,
         }
       : ({ requireSignedUrl: false } as Metadata),
+    imageDimensions: null,
   }
 }
 
@@ -202,6 +209,19 @@ const useEditorStore = create<EditorState & EditorActions>()(
       set({ currentImage: imageSrc })
     },
 
+    setImageDimensions: (imageSrc, imageDimensions) => {
+      set((state) => {
+        console.log(imageSrc, state.originalImageList)
+        const index = state.originalImageList.findIndex(
+          (img) => img.url === imageSrc,
+        )
+        if (index === -1) return state
+        const updatedImageList = [...state.originalImageList]
+        updatedImageList[index].imageDimensions = imageDimensions
+        return { originalImageList: updatedImageList }
+      })
+    },
+
     addImage: (imageSrc) => {
       const img = normalizeImage(imageSrc)
       if (!get().originalImageList.some((i) => i.url === img.url)) {