@imgly/editor-react-native 1.72.3 → 1.73.1

package/android/src/main/kotlin/ly/img/editor/configuration/design/EditorActivity.kt

@@ -0,0 +1,37 @@
+// highlight-starter-kit-activity-full
+package ly.img.editor.configuration.design
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import ly.img.editor.Editor
+import ly.img.editor.core.configuration.EditorConfiguration
+import ly.img.editor.core.configuration.remember
+
+/**
+ * Encapsulated editor to be used in legacy activity navigation.
+ * Delete this file if you are using jetpack compose navigation.
+ */
+class EditorActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // This is required to remove the default action bar on top.
+        setTheme(android.R.style.Theme_Material_Light_NoActionBar)
+        // This is required, so that the editor is displayed full screen on relatively older devices.
+        enableEdgeToEdge()
+        setContent {
+            Editor(
+                license = null, // pass null or empty for evaluation mode with watermark
+                configuration = {
+                    EditorConfiguration.remember(::DesignConfigurationBuilder)
+                },
+                onClose = {
+                    // Finish the activity, potentially handle errors.
+                    finish()
+                },
+            )
+        }
+    }
+}
+// highlight-starter-kit-activity-full

package/android/src/main/kotlin/ly/img/editor/configuration/design/callback/OnCreate.kt

@@ -0,0 +1,162 @@
+package ly.img.editor.configuration.design.callback
+
+import androidx.core.net.toUri
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.library.data.AssetSourceType
+import ly.img.editor.core.library.data.SystemGalleryAssetSource
+import ly.img.editor.core.library.data.SystemGalleryPermission
+import ly.img.editor.core.library.data.TextAssetSource
+import ly.img.editor.core.library.data.TypefaceProvider
+import ly.img.engine.DefaultAssetSource
+import ly.img.engine.DemoAssetSource
+import ly.img.engine.DesignBlockType
+import ly.img.engine.populateAssetSource
+
+/**
+ * The callback that is invoked when the editor is created.
+ */
+suspend fun DesignConfigurationBuilder.onCreate(
+    preCreateScene: suspend DesignConfigurationBuilder.() -> Unit = {
+        onPreCreateScene()
+    },
+    createScene: suspend DesignConfigurationBuilder.() -> Unit = {
+        onCreateScene()
+    },
+    loadAssetSources: suspend DesignConfigurationBuilder.() -> Unit = {
+        onLoadAssetSources()
+    },
+    postCreateScene: suspend DesignConfigurationBuilder.() -> Unit = {
+        onPostCreateScene()
+    },
+    finally: suspend DesignConfigurationBuilder.() -> Unit = {
+        onCreateFinally()
+    },
+) {
+    try {
+        preCreateScene()
+        createScene()
+        loadAssetSources()
+        postCreateScene()
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the scene is created.
+ */
+fun DesignConfigurationBuilder.onPreCreateScene() {
+    showLoading = true
+    // Enable horizontal sliding between pages
+    editorContext.engine.editor.setSettingBoolean(
+        keypath = "features/pageCarouselEnabled",
+        value = true,
+    )
+}
+
+/**
+ * The callback that is responsible for creating the scene.
+ */
+// highlight-starter-kit-on-create-scene
+suspend fun DesignConfigurationBuilder.onCreateScene() {
+    getOrLoadScene(sceneUri = "file:///android_asset/scene/design.scene".toUri())
+}
+// highlight-starter-kit-on-create-scene
+
+/**
+ * The callback that loads all the required assets sources.
+ */
+// highlight-starter-kit-on-load-asset-sources
+suspend fun DesignConfigurationBuilder.onLoadAssetSources() {
+    // Load asset sources in parallel from content.json files
+    coroutineScope {
+        listOf(
+            DefaultAssetSource.STICKER.key,
+            DefaultAssetSource.VECTOR_PATH.key,
+            DefaultAssetSource.FILTER_LUT.key,
+            DefaultAssetSource.FILTER_DUO_TONE.key,
+            DefaultAssetSource.CROP_PRESETS.key,
+            DefaultAssetSource.PAGE_PRESETS.key,
+            DefaultAssetSource.EFFECT.key,
+            DefaultAssetSource.BLUR.key,
+            DefaultAssetSource.TYPEFACE.key,
+            DemoAssetSource.IMAGE.key,
+            DemoAssetSource.TEXT_COMPONENTS.key,
+        ).forEach { assetSource ->
+            launch {
+                val baseUri = editorContext.baseUri
+                editorContext.engine.populateAssetSource(
+                    id = assetSource,
+                    jsonUri = "$baseUri/$assetSource/content.json".toUri(),
+                    replaceBaseUri = baseUri,
+                )
+            }
+        }
+    }
+
+    // Load local asset sources
+    editorContext.engine.asset.addLocalSource(
+        sourceId = DemoAssetSource.IMAGE_UPLOAD.key,
+        supportedMimeTypes = listOf(
+            "image/jpeg",
+            "image/png",
+            "image/heic",
+            "image/heif",
+            "image/svg+xml",
+            "image/gif",
+            "image/bmp",
+        ),
+    )
+
+    // Register gallery asset sources
+    listOf(
+        AssetSourceType.GalleryAllVisuals,
+        AssetSourceType.GalleryImage,
+        AssetSourceType.GalleryVideo,
+    ).forEach { type ->
+        editorContext.engine.asset.addSource(
+            source = SystemGalleryAssetSource(
+                context = editorContext.engine.applicationContext,
+                type = type,
+            ),
+        )
+    }
+    SystemGalleryPermission.setMode(systemGalleryConfiguration)
+
+    // Register text asset source
+    TypefaceProvider().provideTypeface(
+        engine = editorContext.engine,
+        name = "Roboto",
+    )?.let {
+        val textAssetSource = TextAssetSource(engine = editorContext.engine, typeface = it)
+        editorContext.engine.asset.addSource(textAssetSource)
+    }
+}
+// highlight-starter-kit-on-load-asset-sources
+
+/**
+ * The callback that is invoked right after [onCreateScene], after the scene is created.
+ */
+fun DesignConfigurationBuilder.onPostCreateScene() {
+    editorContext.engine.block
+        .findByType(DesignBlockType.Stack)
+        .firstOrNull()
+        ?.let {
+            // Display all pages in a horizontal stack.
+            editorContext.engine.block.setEnum(
+                block = it,
+                property = "stack/axis",
+                value = "Horizontal",
+            )
+        }
+}
+
+/**
+ * The callback that is invoked as the last step of [onCreate].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun DesignConfigurationBuilder.onCreateFinally() {
+    showLoading = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/callback/OnExport.kt

@@ -0,0 +1,82 @@
+package ly.img.editor.configuration.design.callback
+
+import kotlinx.coroutines.CancellationException
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.engine.MimeType
+import java.nio.ByteBuffer
+
+/**
+ * The callback that is invoked when the export button is clicked.
+ */
+suspend fun DesignConfigurationBuilder.onExport(
+    preExport: suspend DesignConfigurationBuilder.() -> Unit = {
+        onPreExport()
+    },
+    exportByteBuffer: suspend DesignConfigurationBuilder.() -> ByteBuffer = {
+        onExportByteBuffer()
+    },
+    postExport: suspend DesignConfigurationBuilder.(ByteBuffer) -> Unit = {
+        onPostExport(it)
+    },
+    error: suspend DesignConfigurationBuilder.(Exception) -> Unit = {
+        onExportError(it)
+    },
+    finally: suspend DesignConfigurationBuilder.() -> Unit = {
+        onExportFinally()
+    },
+) {
+    try {
+        preExport()
+        val result = exportByteBuffer()
+        postExport(result)
+    } catch (exception: Exception) {
+        error(exception)
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the export is started.
+ */
+fun DesignConfigurationBuilder.onPreExport() {
+    showLoading = true
+}
+
+/**
+ * The callback that exports the content of the editor into [ByteBuffer].
+ */
+// highlight-starter-kit-on-export-byte-buffer
+suspend fun DesignConfigurationBuilder.onExportByteBuffer(): ByteBuffer = export(
+    block = requireNotNull(editorContext.engine.scene.get()),
+    mimeType = MimeType.PDF,
+)
+// highlight-starter-kit-on-export-byte-buffer
+
+/**
+ * The callback that is invoked after [onExportByteBuffer] and handles its output.
+ */
+// highlight-starter-kit-on-post-export
+suspend fun DesignConfigurationBuilder.onPostExport(byteBuffer: ByteBuffer) {
+    val file = writeToFile(byteBuffer = byteBuffer, mimeType = MimeType.PDF)
+    shareFile(file = file, mimeType = MimeType.PDF)
+}
+// highlight-starter-kit-on-post-export
+
+/**
+ * The callback that is invoked in case any of the export functions throw an exception.
+ */
+fun DesignConfigurationBuilder.onExportError(error: Exception) {
+    if (error is CancellationException) {
+        throw error
+    }
+    this.error = error
+}
+
+/**
+ * The callback that is invoked as the last step of [onExportByteBuffer].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun DesignConfigurationBuilder.onExportFinally() {
+    showLoading = false
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/callback/OnLoaded.kt

@@ -0,0 +1,10 @@
+package ly.img.editor.configuration.design.callback
+
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+
+/**
+ * The callback that is invoked when the editor is loaded and ready to be used.
+ */
+suspend fun DesignConfigurationBuilder.onLoaded() {
+    observeEditorEditMode()
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/component/CanvasMenu.kt

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.design.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.component.CanvasMenu
+import ly.img.editor.core.component.EditorComponentId
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberBringForward
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberSelectGroup
+import ly.img.editor.core.component.rememberSendBackward
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items next to
+ * the selected design block.
+ */
+@Composable
+fun DesignConfigurationBuilder.rememberCanvasMenu() = CanvasMenu.remember {
+    listBuilder = {
+        CanvasMenu.ListBuilder.remember {
+            add { CanvasMenu.Button.rememberSelectGroup() }
+            if (editorContext.isSelectionInGroup) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider1") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberBringForward() }
+            add { CanvasMenu.Button.rememberSendBackward() }
+            if (editorContext.canSelectionMove) {
+                add {
+                    CanvasMenu.Divider.remember {
+                        id = { EditorComponentId("ly.img.component.canvasMenu.divider2") }
+                    }
+                }
+            }
+            add { CanvasMenu.Button.rememberDuplicate() }
+            add { CanvasMenu.Button.rememberDelete() }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/component/Dock.kt

@@ -0,0 +1,35 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.design.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.component.Dock
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberElementsLibrary
+import ly.img.editor.core.component.rememberImagesLibrary
+import ly.img.editor.core.component.rememberResizeAll
+import ly.img.editor.core.component.rememberShapesLibrary
+import ly.img.editor.core.component.rememberStickersLibrary
+import ly.img.editor.core.component.rememberSystemCamera
+import ly.img.editor.core.component.rememberSystemGallery
+import ly.img.editor.core.component.rememberTextLibrary
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+ */
+@Composable
+fun DesignConfigurationBuilder.rememberDock() = Dock.remember {
+    listBuilder = {
+        Dock.ListBuilder.remember {
+            add { Dock.Button.rememberElementsLibrary() }
+            add { Dock.Button.rememberSystemGallery() }
+            add { Dock.Button.rememberSystemCamera() }
+            add { Dock.Button.rememberImagesLibrary() }
+            add { Dock.Button.rememberTextLibrary() }
+            add { Dock.Button.rememberShapesLibrary() }
+            add { Dock.Button.rememberStickersLibrary() }
+            add { Dock.Button.rememberResizeAll() }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/component/InspectorBar.kt

@@ -0,0 +1,52 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.design.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.component.InspectorBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAdjustments
+import ly.img.editor.core.component.rememberBlur
+import ly.img.editor.core.component.rememberCrop
+import ly.img.editor.core.component.rememberDelete
+import ly.img.editor.core.component.rememberDuplicate
+import ly.img.editor.core.component.rememberEditText
+import ly.img.editor.core.component.rememberEffect
+import ly.img.editor.core.component.rememberEnterGroup
+import ly.img.editor.core.component.rememberFillStroke
+import ly.img.editor.core.component.rememberFilter
+import ly.img.editor.core.component.rememberFormatText
+import ly.img.editor.core.component.rememberLayer
+import ly.img.editor.core.component.rememberReplace
+import ly.img.editor.core.component.rememberSelectGroup
+import ly.img.editor.core.component.rememberShape
+import ly.img.editor.core.component.rememberTextBackground
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the
+ * bottom of the editor when a design block is selected.
+ */
+@Composable
+fun DesignConfigurationBuilder.rememberInspectorBar() = InspectorBar.remember {
+    listBuilder = {
+        InspectorBar.ListBuilder.remember {
+            add { InspectorBar.Button.rememberReplace() } // Image, Sticker, Audio
+            add { InspectorBar.Button.rememberEditText() } // Text
+            add { InspectorBar.Button.rememberFormatText() } // Text
+            add { InspectorBar.Button.rememberFillStroke() } // Page, Image, Shape, Text
+            add { InspectorBar.Button.rememberTextBackground() } // Text
+            add { InspectorBar.Button.rememberCrop() } // Image
+            add { InspectorBar.Button.rememberAdjustments() } // Image
+            add { InspectorBar.Button.rememberFilter() } // Image
+            add { InspectorBar.Button.rememberEffect() } // Image
+            add { InspectorBar.Button.rememberBlur() } // Image
+            add { InspectorBar.Button.rememberShape() } // Image, Shape
+            add { InspectorBar.Button.rememberSelectGroup() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberEnterGroup() } // Group
+            add { InspectorBar.Button.rememberLayer() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberDuplicate() } // Image, Sticker, Shape, Text
+            add { InspectorBar.Button.rememberDelete() } // Image, Sticker, Shape, Text
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/component/NavigationBar.kt

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.design.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.component.EditorTrigger
+import ly.img.editor.core.component.NavigationBar
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberCloseEditor
+import ly.img.editor.core.component.rememberExport
+import ly.img.editor.core.component.rememberRedo
+import ly.img.editor.core.component.rememberTogglePagesMode
+import ly.img.editor.core.component.rememberUndo
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+ */
+@Composable
+fun DesignConfigurationBuilder.rememberNavigationBar() = NavigationBar.remember {
+    scope = {
+        val historyTrigger by EditorTrigger.remember {
+            editorContext.engine.editor.onHistoryUpdated()
+        }
+        // Update NavigationBar whenever the editor history changes
+        remember(this, historyTrigger) {
+            NavigationBar.Scope(parentScope = this)
+        }
+    }
+    listBuilder = {
+        NavigationBar.ListBuilder.remember {
+            aligned(alignment = Alignment.Start) {
+                add { NavigationBar.Button.rememberCloseEditor() }
+            }
+            aligned(alignment = Alignment.End) {
+                add { NavigationBar.Button.rememberUndo() }
+                add { NavigationBar.Button.rememberRedo() }
+                add { NavigationBar.Button.rememberTogglePagesMode() }
+                add { NavigationBar.Button.rememberExport() }
+            }
+        }
+    }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/design/component/Overlay.kt

@@ -0,0 +1,15 @@
+package ly.img.editor.configuration.design.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.design.DesignConfigurationBuilder
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.component.remember
+
+/**
+ * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+ * overlay.
+ */
+@Composable
+fun DesignConfigurationBuilder.rememberOverlay() = EditorComponent.remember {
+    decoration = { Overlay() }
+}

package/android/src/main/kotlin/ly/img/editor/configuration/photo/EditorActivity.kt

@@ -0,0 +1,37 @@
+// highlight-starter-kit-activity-full
+package ly.img.editor.configuration.photo
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import ly.img.editor.Editor
+import ly.img.editor.core.configuration.EditorConfiguration
+import ly.img.editor.core.configuration.remember
+
+/**
+ * Encapsulated editor to be used in legacy activity navigation.
+ * Delete this file if you are using jetpack compose navigation.
+ */
+class EditorActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // This is required to remove the default action bar on top.
+        setTheme(android.R.style.Theme_Material_Light_NoActionBar)
+        // This is required, so that the editor is displayed full screen on relatively older devices.
+        enableEdgeToEdge()
+        setContent {
+            Editor(
+                license = null, // pass null or empty for evaluation mode with watermark
+                configuration = {
+                    EditorConfiguration.remember(::PhotoConfigurationBuilder)
+                },
+                onClose = {
+                    // Finish the activity, potentially handle errors.
+                    finish()
+                },
+            )
+        }
+    }
+}
+// highlight-starter-kit-activity-full

package/android/src/main/kotlin/ly/img/editor/configuration/photo/PhotoConfigurationBuilder.kt

@@ -0,0 +1,106 @@
+package ly.img.editor.configuration.photo
+
+import androidx.compose.runtime.Stable
+import ly.img.editor.BasicConfigurationBuilder
+import ly.img.editor.configuration.photo.callback.onCreate
+import ly.img.editor.configuration.photo.callback.onExport
+import ly.img.editor.configuration.photo.callback.onLoaded
+import ly.img.editor.configuration.photo.component.rememberCanvasMenu
+import ly.img.editor.configuration.photo.component.rememberDock
+import ly.img.editor.configuration.photo.component.rememberInspectorBar
+import ly.img.editor.configuration.photo.component.rememberNavigationBar
+import ly.img.editor.configuration.photo.component.rememberOverlay
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.ScopedProperty
+import ly.img.editor.core.component.EditorComponent
+import ly.img.editor.core.event.EditorEvent
+
+/**
+ * Configuration builder class for photo editor starter kit.
+ */
+@Stable
+class PhotoConfigurationBuilder : BasicConfigurationBuilder() {
+    /**
+     * The callback that is invoked when the editor is created.
+     * Check parent class declaration for more details.
+     */
+    override var onCreate: (suspend EditorScope.() -> Unit)? = {
+        onCreate()
+    }
+
+    /**
+     * The callback that is invoked when the editor is loaded and ready to be used.
+     * Check parent class declaration for more details.
+     */
+    override var onLoaded: (suspend EditorScope.() -> Unit)? = {
+        onLoaded()
+    }
+
+    /**
+     * The callback that is invoked when the export button is clicked.
+     * Check parent class declaration for more details.
+     */
+    override var onExport: (suspend EditorScope.() -> Unit)? = {
+        onExport()
+    }
+
+    /**
+     * The callback that is invoked after [EditorEvent.OnClose] event is triggered or when the system back button is clicked
+     * and editor cannot handle the event internally.
+     * Check parent class declaration for more details.
+     */
+    override var onClose: (suspend EditorScope.() -> Unit)? = {
+        showConfirmationOrCloseEditor()
+    }
+
+    /**
+     * The callback that is invoked after the editor captures an error.
+     * Check parent class declaration for more details.
+     */
+    override var onError: (suspend EditorScope.(Throwable) -> Unit)? = {
+        error = it
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var dock: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberDock()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the top of the editor.
+     * Check parent class declaration for more details.
+     */
+    override var navigationBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberNavigationBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items at the
+     * bottom of the editor when a design block is selected.
+     * Check parent class declaration for more details.
+     */
+    override var inspectorBar: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberInspectorBar()
+    }
+
+    /**
+     * The configuration of the component that is displayed as horizontal list of items next to
+     * the selected design block.
+     * Check parent class declaration for more details.
+     */
+    override var canvasMenu: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberCanvasMenu()
+    }
+
+    /**
+     * The configuration of the component that is displayed over the editor. It is useful if you want to display a popup dialog or anything in the
+     * overlay.
+     * Check parent class declaration for more details.
+     */
+    override var overlay: ScopedProperty<EditorScope, EditorComponent<*>>? = {
+        rememberOverlay()
+    }
+}