feat: add object detection focus options and coordinate-based positioning for image transformations

Author: ahnv

examples/react-example/src/index.tsx

@@ -36,6 +36,12 @@ function App() {
             requireSignedUrl: false,
           },
         },
+        {
+          url: "https://ik.imagekit.io/v3sxk1svj/brown%20bear%20plush%20toy%20on%20whi....jpg?updatedAt=1760432666859",
+          metadata: {
+            requireSignedUrl: false,
+          },
+        },
         // ...Array.from({ length: 10000 }).map((_, i) => ({
         //   url: `https://ik.imagekit.io/v3sxk1svj/placeholder.jpg?updatedAt=${Date.now()}&v=${i}`,
         //   metadata: {

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

@@ -4,6 +4,7 @@ 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 RequiredMetadata,
@@ -24,15 +25,17 @@ interface EditorProps<Metadata extends RequiredMetadata = RequiredMetadata> {
   signer?: Signer<Metadata>
   onAddImage?: () => void
   exportOptions?: HeaderProps["exportOptions"]
-
+  focusObjects?: ReadonlyArray<
+    (typeof DEFAULT_FOCUS_OBJECTS)[number] | (string & {})
+  >
   onClose: (args: { dirty: boolean; destroy: () => void }) => void
 }
 
 function ImageKitEditorImpl<M extends RequiredMetadata>(
   props: EditorProps<M>,
   ref: React.Ref<ImageKitEditorRef>,
 ) {
-  const { theme, initialImages, signer } = props
+  const { theme, initialImages, signer, focusObjects } = props
   const {
     addImage,
     addImages,
@@ -62,8 +65,9 @@ function ImageKitEditorImpl<M extends RequiredMetadata>(
     initialize({
       imageList: initialImages,
       signer,
+      focusObjects,
     })
-  }, [initialImages, signer, initialize])
+  }, [initialImages, signer, focusObjects, initialize])
 
   useImperativeHandle(
     ref,

packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx

@@ -37,13 +37,14 @@ import { PiArrowLeft } from "@react-icons/all-files/pi/PiArrowLeft"
 import { PiCaretDown } from "@react-icons/all-files/pi/PiCaretDown"
 import { PiInfo } from "@react-icons/all-files/pi/PiInfo"
 import { PiX } from "@react-icons/all-files/pi/PiX"
+import startCase from "lodash/startCase"
 import { useEffect, useMemo } from "react"
 import { Controller, type SubmitHandler, useForm } from "react-hook-form"
 import Select from "react-select"
 import CreateableSelect from "react-select/creatable"
 import { z } from "zod/v3"
 import type { TransformationField } from "../../schema"
-import { transformationSchema } from "../../schema"
+import { DEFAULT_FOCUS_OBJECTS, transformationSchema } from "../../schema"
 import { useEditorStore } from "../../store"
 import { isStepAligned } from "../../utils"
 import AnchorField from "../common/AnchorField"
@@ -61,6 +62,7 @@ export const TransformationConfigSidebar: React.FC = () => {
     addTransformation,
     updateTransformation,
     imageList,
+    focusObjects,
     _setSidebarState,
     _internalState,
     _setTransformationToEdit,
@@ -296,40 +298,74 @@ export const TransformationConfigSidebar: React.FC = () => {
                 <Controller
                   name={field.name}
                   control={control}
-                  render={({ field: controllerField }) => (
-                    <Select
-                      id={field.name}
-                      placeholder="Select"
-                      menuPlacement="auto"
-                      options={field.fieldProps?.options?.map((option) => ({
-                        value: option.value,
-                        label: option.label,
-                      }))}
-                      value={field.fieldProps?.options?.find(
-                        (option) => option.value === controllerField.value,
-                      )}
-                      onChange={(selectedOption) =>
-                        controllerField.onChange(selectedOption?.value)
-                      }
-                      onBlur={controllerField.onBlur}
-                      styles={{
-                        control: (base) => ({
-                          ...base,
-                          fontSize: "12px",
-                          minHeight: "32px",
-                          borderColor: "#E2E8F0",
-                        }),
-                        menu: (base) => ({
-                          ...base,
-                          zIndex: 10,
-                        }),
-                        option: (base) => ({
-                          ...base,
-                          fontSize: "12px",
-                        }),
-                      }}
-                    />
-                  )}
+                  render={({ field: controllerField }) => {
+                    // For focusObject field, use focusObjects from store or default list
+                    const selectOptions =
+                      field.name === "focusObject"
+                        ? (focusObjects || DEFAULT_FOCUS_OBJECTS).map(
+                            (obj) => ({
+                              value: obj,
+                              label: startCase(obj),
+                            }),
+                          )
+                        : field.fieldProps?.options?.map((option) => ({
+                            value: option.value,
+                            label: option.label,
+                          }))
+
+                    const isCreatable = field.fieldProps?.isCreatable === true
+                    const SelectComponent = isCreatable
+                      ? CreateableSelect
+                      : Select
+
+                    // For creatable selects, find the value in options or create a custom one
+                    const selectedValue = isCreatable
+                      ? selectOptions?.find(
+                          (option) => option.value === controllerField.value,
+                        ) ||
+                        (controllerField.value
+                          ? {
+                              value: controllerField.value as string,
+                              label: startCase(controllerField.value as string),
+                            }
+                          : null)
+                      : selectOptions?.find(
+                          (option) => option.value === controllerField.value,
+                        )
+
+                    return (
+                      <SelectComponent
+                        id={field.name}
+                        formatCreateLabel={(inputValue) =>
+                          `Use "${inputValue}"`
+                        }
+                        placeholder="Select"
+                        menuPlacement="auto"
+                        options={selectOptions}
+                        value={selectedValue}
+                        onChange={(selectedOption) =>
+                          controllerField.onChange(selectedOption?.value)
+                        }
+                        onBlur={controllerField.onBlur}
+                        styles={{
+                          control: (base) => ({
+                            ...base,
+                            fontSize: "12px",
+                            minHeight: "32px",
+                            borderColor: "#E2E8F0",
+                          }),
+                          menu: (base) => ({
+                            ...base,
+                            zIndex: 10,
+                          }),
+                          option: (base) => ({
+                            ...base,
+                            fontSize: "12px",
+                          }),
+                        }}
+                      />
+                    )
+                  }}
                 />
               ) : null}
               {field.fieldType === "select-creatable" ? (

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

@@ -1,3 +1,4 @@
 export type { ImageKitEditorProps, ImageKitEditorRef } from "./ImageKitEditor"
 export { ImageKitEditor } from "./ImageKitEditor"
+export { DEFAULT_FOCUS_OBJECTS } from "./schema"
 export type { FileElement, Signer } from "./store"