Memento

https://github.com/takea-look/memento
Admin
Memento is a powerful and customizable image editor library for Kotlin Multiplatform, inspired by...
Tokens:5,913
Snippets:42
Trust Score:4
License:Apache-2.0
Update:8 months ago
Show doc for...
Tokens:
Raw
### MementoController: Manage Editor State and Elements in Kotlin

Source: https://context7.com/takea-look/memento/llms.txt

The MementoController class manages the state of all editor components, including text and image elements on the canvas. It handles focus, captures requests, and exposes reactive state flows for UI observation. This example demonstrates adding text and images, observing state changes, and manipulating elements.

```kotlin
import my.takealook.memento.MementoController
import my.takealook.memento.MementoState
import my.takealook.memento.createText
import my.takealook.memento.attachImage
import my.takealook.memento.remove
import my.takealook.memento.removeAll
import my.takealook.memento.requestCapture
import my.takealook.memento.bringToFront
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color

// Create a controller instance
val controller = MementoController()

// Add text to the canvas
controller.createText(
    offset = Offset(100f, 200f),
    initialText = "Hello World!",
    colors = MementoState.Text.Colors(
        containerColor = Color.White.value,
        contentColor = Color.Black.value
    )
)

// Add an image/sticker to the canvas
controller.attachImage {
    Image(
        painter = painterResource(Res.drawable.sticker),
        contentDescription = "Sticker"
    )
}

// Observe state changes
controller.state.collect {
    components ->
    components.forEach {
        state ->
        println("Component ${state.id}: offset=(${state.offsetX}, ${state.offsetY})")
    }
}

// Bring a specific component to front
controller.bringToFront(id = 1)

// Remove a specific component
controller.remove(id = 1)

// Clear all components
controller.removeAll()

// Request image capture
controller.requestCapture()
```

--------------------------------

### MementoState: Data Models for Text and Image Elements in Kotlin

Source: https://context7.com/takea-look/memento/llms.txt

MementoState is a sealed interface representing different canvas elements like text and images. It includes layout properties (position, scale, rotation) and provides immutable update methods for modifying elements. This example shows creating and updating text and image states.

```kotlin
import my.takealook.memento.MementoState
import androidx.compose.ui.graphics.Color

// Text state with custom colors
val textState = MementoState.Text(
    id = 1,
    text = "Sample Text",
    offsetX = 50f,
    offsetY = 100f,
    scale = 1.5f,
    rotation = 15f,
    colors = MementoState.Text.Colors(
        containerColor = Color.Yellow.value,  // Background color
        contentColor = Color.Red.value        // Text color
    )
)

// Update text content (returns new immutable state)
val updatedText = textState.updateText("New Text")

// Update position
val movedText = textState.updateLayout(offsetX = 200f, offsetY = 300f)

// Update scale
val scaledText = textState.updateScale(2.0f)

// Update rotation (in degrees)
val rotatedText = textState.updateRotation(45f)

// Update text colors
val recoloredText = textState.updateTextColor(
    MementoState.Text.Colors(
        containerColor = Color.Blue.value,
        contentColor = Color.White.value
    )
)

// Image state with composable content
val imageState = MementoState.Image(
    id = 2,
    offsetX = 150f,
    offsetY = 250f,
    scale = 1.0f,
    rotation = 0f,
    content = {
        Image(
            painter = painterResource(Res.drawable.emoji),
            contentDescription = null,
            modifier = Modifier.size(100.dp)
        )
    }
)
```

--------------------------------

### Basic MementoEditor Usage (Jetpack Compose)

Source: https://github.com/takea-look/memento/blob/main/README.md

Demonstrates the basic integration of the MementoEditor composable into an Android or KMP UI. It shows how to initialize the MementoController, use the MementoEditor with custom main content, handle image capture, and trigger capture externally.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import my.takealook.memento.MementoEditor
import my.takealook.memento.rememberMementoController
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.foundation.Image
import androidx.compose.ui.res.painterResource

@Composable
fun MyEditorScreen() {
    val mementoController = rememberMementoController()

    MementoEditor(
        modifier = Modifier.fillMaxSize(),
        controller = mementoController,
        onImageCaptured = {
            // Handle the captured image
        },
        mainContent = {
            // Your main content goes here, e.g., an Image
            Image(
                painter = painterResource(Res.drawable.my_background_image),
                contentDescription = "Background"
            )
        }
    )

    // You can control the editor externally
    Button(onClick = { mementoController.requestCapture() }) {
        Text("Save Image")
    }
}
```

--------------------------------

### Manage Text Focus with MementoController (Kotlin)

Source: https://context7.com/takea-look/memento/llms.txt

Provides methods for managing text editing focus, including focusing on existing text elements for editing and releasing focus when done. This handles the transition between viewing mode and editing mode with smooth animations. It requires the MementoController and related functions from the my.takealook.memento package.

```kotlin
import my.takealook.memento.MementoController
import my.takealook.memento.executeTextFocus
import my.takealook.memento.releaseFocus
import my.takealook.memento.requestFocusMode
import androidx.compose.ui.geometry.Offset

val controller = MementoController()

// Check if currently in text editing mode
controller.isTextFocused.collect { isFocused ->
    if (isFocused) {
        // Show keyboard, dim background, etc.
    }
}

// Programmatically focus a text element for editing
controller.executeTextFocus(
    id = 1,
    currentOffset = Offset(100f, 200f),  // Will be restored on release
    currentRotation = 15f,
    currentScale = 1.5f
)

// Release focus and restore original position
controller.releaseFocus()

// Toggle focus mode without specific element
controller.requestFocusMode(enabled = true)
controller.requestFocusMode(enabled = false)
```

--------------------------------

### Integrate MementoUI in SwiftUI

Source: https://github.com/takea-look/memento/blob/main/README.md

This snippet demonstrates how to integrate MementoUI's `MementoEditorViewController` into a SwiftUI view. It requires importing `MementoUi` and utilizes `UIViewControllerRepresentable` to bridge UIKit and SwiftUI. The `ComposeView` initializes the editor with a main image and an image capture callback, while `ContentView` manages the `MementoController` state.

```swift
import SwiftUI
import UIKit
import MementoUi

struct ComposeView: UIViewControllerRepresentable {
    var controller : MementoController!
    init(_ controller: MementoController) {
        self.controller = controller
    }
    
    func makeUIViewController(context: Context) -> UIViewController {
         return MementoEditorViewControllerKt.MementoEditorViewController(
            mainContent: UIImage(named: "ic_milk")!,
            controller: controller,
            onImageCaptured: { image in saveImageToGallery(image) }
        )
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct ContentView: View {
    @State var controller: MementoController = MementoController()
    var body: some View {
        ZStack(alignment: .topTrailing) {
            ComposeView(controller)
                    .ignoresSafeArea(.all) // Compose has own keyboard handler
            
            //...
        }
    }
}
```

--------------------------------

### Add Memento Dependency (Gradle)

Source: https://github.com/takea-look/memento/blob/main/README.md

This snippet shows how to add the Memento library dependency to your project's build.gradle.kts file. It includes instructions for adding Maven Central to repositories and specifying either the full UI editor or the core logic dependency.

```kotlin
repositories {
    mavenCentral()
}

dependencies {
    // For the full UI editor experience (includes core)
    implementation("my.takealook.memento:memento-ui:<latest-version>")

    // Or if you only need the core logic
    implementation("my.takealook.memento:memento-core:<latest-version>")
}
```

--------------------------------

### rememberMementoController for State Preservation

Source: https://context7.com/takea-look/memento/llms.txt

Creates and remembers a MementoController instance that persists across configuration changes and process death using `rememberSaveable`. This ensures the editor's state is maintained throughout the user session. Depends on Compose runtime and Memento library.

```kotlin
import androidx.compose.runtime.Composable
import my.takealook.memento.rememberMementoController
import my.takealook.memento.MementoEditor

@Composable
fun PersistentEditorScreen() {
    // Controller state survives rotation and process death
    val controller = rememberMementoController()

    // State will be automatically serialized/deserialized
    // Text components: id, position, scale, rotation, text, colors
    // Image components: id, position, scale, rotation (content not persisted)

    MementoEditor(
        controller = controller,
        onImageCaptured = { /* handle capture */ },
        mainContent = {
            // Your background content
        }
    )
}
```

--------------------------------

### Add Memento Gradle Dependencies (Android/KMP)

Source: https://context7.com/takea-look/memento/llms.txt

Configures Gradle build files to include the Memento UI module for Kotlin Multiplatform or Android projects. Ensures Maven Central repository is available and adds the `memento-ui` dependency.

```kotlin
// settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        mavenCentral()
        google()
    }
}

// build.gradle.kts (module level)
plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            // Full editor UI (recommended)
            implementation("my.takealook.memento:memento-ui:0.2.1")

            // Or core only for custom UI implementations
            // implementation("my.takealook.memento:memento-core:0.2.1")
        }
    }
}
```

--------------------------------

### Integrate Memento Editor in SwiftUI (iOS)

Source: https://context7.com/takea-look/memento/llms.txt

Provides a `UIViewControllerRepresentable` to wrap the Memento Compose UI for use within SwiftUI views. It takes a `MementoController`, a background `UIImage`, and a callback for captured images.

```swift
import SwiftUI
import UIKit
import MementoUi

// SwiftUI wrapper for MementoEditor
struct ComposeView: UIViewControllerRepresentable {
    var controller: MementoController
    var backgroundImage: UIImage
    var onImageCaptured: (UIImage) -> Void

    func makeUIViewController(context: Context) -> UIViewController {
        return MementoEditorViewControllerKt.MementoEditorViewController(
            mainContent: backgroundImage,
            controller: controller,
            onImageCaptured: { image in
                onImageCaptured(image)
            }
        )
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

// Usage in SwiftUI
struct ContentView: View {
    @State var controller = MementoController()

    var body: some View {
        ZStack(alignment: .topTrailing) {
            ComposeView(
                controller: controller,
                backgroundImage: UIImage(named: "background")!,
                onImageCaptured: { image in
                    // Save to photo library
                    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
                }
            )
            .ignoresSafeArea(.all)

            // Capture button
            Button("Save") {
                controller.requestCapture()
            }
            .padding()
        }
    }
}
```

--------------------------------

### Display Color Options with MementoRainbowPalette (Kotlin)

Source: https://context7.com/takea-look/memento/llms.txt

The MementoRainbowPalette composable displays a horizontal row of color options for styling text elements. It includes solid colors (black/white) and rainbow colors with dynamic Material Design color schemes. This composable requires androidx.compose.foundation and my.takealook.memento packages.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import my.takealook.memento.MementoRainbowPalette
import my.takealook.memento.MementoState

@Composable
fun ColorPaletteExample() {
    var selectedColors by remember {
        mutableStateOf(MementoState.Text.Colors.Default)
    }

    Column(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // Display color palette
        MementoRainbowPalette(
            modifier = Modifier.fillMaxWidth(),
            onColorClick = { colors ->
                selectedColors = colors
                // Apply to currently focused text element
                controller.focusId?.let { id ->
                    controller.updateText(id, colors)
                }
            }
        )

        // Preview selected colors
        Text(
            text = "Preview Text",
            color = Color(selectedColors.contentColor),
            modifier = Modifier.background(Color(selectedColors.containerColor))
        )
    }
}
```

--------------------------------

### MementoEditor Composable for Image Editing UI

Source: https://context7.com/takea-look/memento/llms.txt

The main composable for the image editor UI. It renders background content, handles gestures, manages text input, displays color palettes, and captures images. Requires MementoController and Compose UI dependencies.

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import my.takealook.memento.MementoEditor
import my.takealook.memento.rememberMementoController
import org.jetbrains.compose.resources.painterResource

@Composable
fun ImageEditorScreen(
    onSave: (ImageBitmap) -> Unit
) {
    val controller = rememberMementoController()

    MementoEditor(
        modifier = Modifier.fillMaxSize(),
        controller = controller,
        onImageCaptured = { imageBitmap ->
            // Handle the captured image
            // imageBitmap contains the full canvas with all overlays
            onSave(imageBitmap)
        },
        mainContent = {
            // Main background image
            Image(
                painter = painterResource(Res.drawable.background_photo),
                contentDescription = "Background",
                modifier = Modifier.fillMaxWidth()
            )
        }
    )

    // External control buttons
    Column {
        Button(onClick = { controller.requestCapture() }) {
            Text("Save Image")
        }
        Button(onClick = { controller.removeAll() }) {
            Text("Clear All")
        }
    }
}
```

--------------------------------

### Configure Info.plist for Performance

Source: https://github.com/takea-look/memento/blob/main/README.md

This snippet shows how to add the `CADisableMinimumFrameDurationOnPhone` key to your application's `Info.plist` file. Setting this key to `YES` (Boolean) disables a system-imposed minimum frame duration on iPhones, which can significantly improve animation smoothness and UI performance, especially in graphics-intensive applications.

```xml
<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>
```

--------------------------------

### Update Component States with MementoController

Source: https://context7.com/takea-look/memento/llms.txt

Provides extension functions for MementoController to manipulate component states immutably. These functions handle internal state updates and notify observers. Dependencies include MementoController and related update functions.

```kotlin
import my.takealook.memento.MementoController
import my.takealook.memento.updateLayout
import my.takealook.memento.updateRotation
import my.takealook.memento.updateScale
import my.takealook.memento.updateText
import my.takealook.memento.update
import my.takealook.memento.MementoState
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color

val controller = MementoController()

// Update position by drag amount
controller.updateLayout(
    id = 1,
    dragAmount = Offset(50f, -30f)  // Move right 50px, up 30px
)

// Update rotation by delta (returns new rotation value)
val newRotation = controller.updateRotation(
    id = 1,
    rotationDelta = 15f  // Rotate clockwise by 15 degrees
)

// Update scale (multiplies current scale)
controller.updateScale(
    id = 1,
    scale = 1.2f  // Scale up by 20%
)

// Update text colors
controller.updateText(
    id = 1,
    colors = MementoState.Text.Colors(
        containerColor = Color.Magenta.value,
        contentColor = Color.White.value
    )
)

// Generic update with custom transformation
controller.update<MementoState.Text>(id = 1) { textState ->
    textState
        .updateText("Modified text")
        .updateScale(1.5f)
}
```

--------------------------------

### Generate Dynamic Colors with getMementoColorScheme (Kotlin)

Source: https://context7.com/takea-look/memento/llms.txt

The getMementoColorScheme function generates a dynamic Material Design color scheme from a seed color using the MaterialKolor library. It creates expressive, harmonious color palettes following the Material Design 2025 specification. This function requires androidx.compose.ui.graphics.Color and my.takealook.memento packages.

```kotlin
import androidx.compose.ui.graphics.Color
import my.takealook.memento.getMementoColorScheme

// Generate color scheme from seed color
val seedColor = Color.Red
val colorScheme = getMementoColorScheme(seedColor)

// Access generated colors
val primaryColor = colorScheme.primary           // Main text color
val containerColor = colorScheme.primaryContainer // Background color
val onPrimary = colorScheme.onPrimary
val surface = colorScheme.surface

// Use in composables
Text(
    text = "Styled Text",
    color = colorScheme.primary,
    modifier = Modifier.background(colorScheme.primaryContainer)
)
```
Tokens:
Raw