diff --git a/README.md b/README.md index 4b64ad9..1358919 100644 --- a/README.md +++ b/README.md @@ -130,6 +130,7 @@ export default ImageEditor; | `signer` | `Signer` | ❌ | Function to generate signed URLs for private images | | `onAddImage` | `() => void` | ❌ | Callback function for adding new images | | `exportOptions` | `ExportOptions` | ❌ | Configuration for export functionality | +| `focusObjects` | `string[]` | ❌ | Custom list of selectable focus objects for object-based focus | ### ImageKitEditor Ref Methods @@ -181,6 +182,19 @@ exportOptions={{ }} ``` +### Focus Objects + +You can override the list of selectable focus objects used when a transformation's focus is set to "Object" (e.g., Maintain Aspect Ratio, Forced Crop, Extract). If not provided, the editor defaults to ImageKit's supported objects (e.g., person, bicycle, car, dog, etc.). + +See the supported object list in the ImageKit docs: https://imagekit.io/docs/image-resize-and-crop#supported-object-list + +```tsx + +``` + ### File Element Interface For advanced use cases with metadata and signed URLs: diff --git a/examples/react-example/package.json b/examples/react-example/package.json index 0587ae3..9acacc1 100644 --- a/examples/react-example/package.json +++ b/examples/react-example/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@imagekit/editor": "1.0.0", + "@imagekit/editor": "1.1.0", "@types/node": "^20.11.24", "@types/react": "^17.0.2", "@types/react-dom": "^17.0.2", diff --git a/examples/react-example/src/index.tsx b/examples/react-example/src/index.tsx index c227ce9..2100c20 100644 --- a/examples/react-example/src/index.tsx +++ b/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: { diff --git a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx index bd9f3db..87ad4d2 100644 --- a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx +++ b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx @@ -4,8 +4,10 @@ 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, type RequiredMetadata, type Signer, useEditorStore, @@ -24,7 +26,7 @@ interface EditorProps { signer?: Signer onAddImage?: () => void exportOptions?: HeaderProps["exportOptions"] - + focusObjects?: ReadonlyArray onClose: (args: { dirty: boolean; destroy: () => void }) => void } @@ -32,7 +34,7 @@ function ImageKitEditorImpl( props: EditorProps, ref: React.Ref, ) { - const { theme, initialImages, signer } = props + const { theme, initialImages, signer, focusObjects } = props const { addImage, addImages, @@ -62,8 +64,9 @@ function ImageKitEditorImpl( initialize({ imageList: initialImages, signer, + focusObjects, }) - }, [initialImages, signer, initialize]) + }, [initialImages, signer, focusObjects, initialize]) useImperativeHandle( ref, diff --git a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx b/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx index 294187d..24a8bb6 100644 --- a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx +++ b/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 = () => { ( -