@imgly/editor-react-native 1.73.0 → 1.74.0

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

@@ -0,0 +1,149 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.postcard.callback
+
+import androidx.core.net.toUri
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+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.GlobalScope
+import ly.img.engine.populateAssetSource
+
+/**
+ * The callback that is invoked when the editor is created.
+ */
+suspend fun PostcardConfigurationBuilder.onCreate(
+    preCreateScene: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onPreCreateScene()
+    },
+    createScene: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onCreateScene()
+    },
+    loadAssetSources: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onLoadAssetSources()
+    },
+    postCreateScene: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onPostCreateScene()
+    },
+    finally: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onCreateFinally()
+    },
+) {
+    try {
+        preCreateScene()
+        createScene()
+        loadAssetSources()
+        postCreateScene()
+    } finally {
+        finally()
+    }
+}
+
+/**
+ * The callback that is invoked before the scene is created.
+ */
+fun PostcardConfigurationBuilder.onPreCreateScene() {
+    showLoading = true
+    editorContext.engine.editor.setGlobalScope("editor/add", GlobalScope.DEFER)
+}
+
+/**
+ * The callback that is responsible for creating the scene.
+ */
+// highlight-starter-kit-on-create-scene
+suspend fun PostcardConfigurationBuilder.onCreateScene() {
+    getOrLoadScene(sceneUri = "file:///android_asset/scene/postcard.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 PostcardConfigurationBuilder.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.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 PostcardConfigurationBuilder.onPostCreateScene() {
+    // Do nothing
+}
+
+/**
+ * The callback that is invoked as the last step of [onCreate].
+ * It always runs, no matter success or failure on previous steps.
+ */
+fun PostcardConfigurationBuilder.onCreateFinally() {
+    showLoading = false
+}

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

@@ -0,0 +1,82 @@
+package ly.img.editor.configuration.postcard.callback
+
+import kotlinx.coroutines.CancellationException
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+import ly.img.engine.MimeType
+import java.nio.ByteBuffer
+
+/**
+ * The callback that is invoked when the export button is clicked.
+ */
+suspend fun PostcardConfigurationBuilder.onExport(
+    preExport: suspend PostcardConfigurationBuilder.() -> Unit = {
+        onPreExport()
+    },
+    exportByteBuffer: suspend PostcardConfigurationBuilder.() -> ByteBuffer = {
+        onExportByteBuffer()
+    },
+    postExport: suspend PostcardConfigurationBuilder.(ByteBuffer) -> Unit = {
+        onPostExport(it)
+    },
+    error: suspend PostcardConfigurationBuilder.(Exception) -> Unit = {
+        onExportError(it)
+    },
+    finally: suspend PostcardConfigurationBuilder.() -> 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 PostcardConfigurationBuilder.onPreExport() {
+    showLoading = true
+}
+
+/**
+ * The callback that exports the content of the editor into [ByteBuffer].
+ */
+// highlight-starter-kit-on-export-byte-buffer
+suspend fun PostcardConfigurationBuilder.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 PostcardConfigurationBuilder.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 PostcardConfigurationBuilder.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 PostcardConfigurationBuilder.onExportFinally() {
+    showLoading = false
+}

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

@@ -0,0 +1,58 @@
+package ly.img.editor.configuration.postcard.callback
+
+import android.content.res.Configuration
+import kotlinx.coroutines.coroutineScope
+import kotlinx.coroutines.flow.distinctUntilChangedBy
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.launch
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+import ly.img.editor.core.state.EditorViewMode
+import ly.img.engine.DesignBlockType
+
+/**
+ * The callback that is invoked when the editor is loaded and ready to be used.
+ */
+suspend fun PostcardConfigurationBuilder.onLoaded() {
+    coroutineScope {
+        launch { observeEditorViewMode() }
+        launch { observeEditorEditMode() }
+    }
+}
+
+/**
+ * Function that displays both pages vertically stacked and zooms out so that both of the pages are visible
+ * when the [EditorViewMode] is preview.
+ */
+suspend fun PostcardConfigurationBuilder.observeEditorViewMode(stackSpacing: Float = 16F) {
+    editorContext.state
+        .distinctUntilChangedBy { it.viewMode to it.insets }
+        .filter { it.viewMode is EditorViewMode.Preview }
+        .collect { state ->
+            val engine = editorContext.engine
+            // Display pages vertically stacked
+            val axis = if (editorContext.activity.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+                "Horizontal"
+            } else {
+                "Vertical"
+            }
+            engine.block
+                .findByType(DesignBlockType.Stack)
+                .firstOrNull()
+                ?.let {
+                    engine.block.setEnum(block = it, property = "stack/axis", value = axis)
+                    engine.block.setFloat(block = it, property = "stack/spacing", value = stackSpacing)
+                }
+            // Display both pages in preview mode
+            engine.scene.getPages().forEach {
+                engine.block.setVisible(block = it, visible = true)
+            }
+            engine.scene.immediateZoomToBlock(
+                block = requireNotNull(engine.scene.get()),
+                paddingLeft = state.insets.left.value,
+                paddingTop = state.insets.top.value,
+                paddingRight = state.insets.right.value,
+                paddingBottom = 0F,
+                forceUpdate = true,
+            )
+        }
+}

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

@@ -0,0 +1,45 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.postcard.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+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 PostcardConfigurationBuilder.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/postcard/component/Dock.kt

@@ -0,0 +1,243 @@
+@file:OptIn(UnstableEditorApi::class)
+@file:Suppress("UnusedReceiverParameter", "UnusedFlow")
+
+package ly.img.editor.configuration.postcard.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import kotlinx.coroutines.flow.emptyFlow
+import kotlinx.coroutines.flow.map
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+import ly.img.editor.configuration.postcard.ext.getCurrentPageIndex
+import ly.img.editor.configuration.postcard.ext.getFill
+import ly.img.editor.configuration.postcard.ext.getStrokeColor
+import ly.img.editor.core.EditorContext
+import ly.img.editor.core.EditorScope
+import ly.img.editor.core.R
+import ly.img.editor.core.ScopedProperty
+import ly.img.editor.core.UnstableEditorApi
+import ly.img.editor.core.component.AbstractButtonBuilder
+import ly.img.editor.core.component.Button
+import ly.img.editor.core.component.DefaultDecoration
+import ly.img.editor.core.component.Dock
+import ly.img.editor.core.component.EditorComponentId
+import ly.img.editor.core.component.EditorTrigger
+import ly.img.editor.core.component.data.EditorIcon
+import ly.img.editor.core.component.data.GradientFill
+import ly.img.editor.core.component.data.SolidFill
+import ly.img.editor.core.component.remember
+import ly.img.editor.core.component.rememberAssetLibrary
+import ly.img.editor.core.event.EditorEvent
+import ly.img.editor.core.iconpack.IconPack
+import ly.img.editor.core.iconpack.SizeLCircled
+import ly.img.editor.core.iconpack.SizeMCircled
+import ly.img.editor.core.iconpack.SizeSCircled
+import ly.img.editor.core.iconpack.Typeface
+import ly.img.editor.core.sheet.SheetType
+import ly.img.editor.core.state.EditorViewMode
+import ly.img.editor.core.ui.EditorIcon
+import ly.img.engine.DesignBlock
+import ly.img.engine.DesignBlockType
+
+/**
+ * The configuration of the component that is displayed as horizontal list of items at the bottom of the editor.
+ */
+@Composable
+fun PostcardConfigurationBuilder.rememberDock() = Dock.remember {
+    scope = {
+        val activeSceneTrigger by EditorTrigger.remember {
+            editorContext.engine.scene.onActiveChanged()
+        }
+        val historyTrigger by EditorTrigger.remember(activeSceneTrigger) {
+            editorContext.engine.editor.onHistoryUpdated()
+        }
+        val pageIndex by remember(this, activeSceneTrigger) {
+            if (editorContext.engine.scene.get() == null) return@remember emptyFlow()
+            val stack = editorContext.engine.block.findByType(DesignBlockType.Stack).first()
+            editorContext.engine.event.subscribe(listOf(stack))
+                .map { editorContext.engine.getCurrentPageIndex() }
+        }.collectAsState(initial = 0)
+        // Update Dock whenever the active scene, editor history or current page index changes.
+        remember(this, pageIndex, historyTrigger) {
+            Dock.Scope(parentScope = this)
+        }
+    }
+    visible = {
+        val state by editorContext.state.collectAsState()
+        // Hide Dock in preview mode
+        state.viewMode !is EditorViewMode.Preview
+    }
+    decoration = {
+        // Show transparent background
+        Dock.DefaultDecoration(
+            background = Color.Transparent,
+        ) { it() }
+    }
+    horizontalArrangement = {
+        remember(this) {
+            val isFirstPage = editorContext.engine.scene.get() != null &&
+                editorContext.engine.getCurrentPageIndex() == 0
+            // Show Dock start aligned on the first page and centered on the second page
+            if (isFirstPage) Arrangement.Start else Arrangement.Center
+        }
+    }
+    listBuilder = {
+        Dock.ListBuilder.remember {
+            add {
+                Dock.Button.rememberAssetLibrary {
+                    visible = {
+                        remember(this) {
+                            editorContext.engine.getCurrentPageIndex() == 0
+                        }
+                    }
+                }
+            }
+            // Show divider only on the first page.
+            if (editorContext.engine.getCurrentPageIndex() == 0) {
+                add { Dock.Divider.remember() }
+            }
+            add { Dock.Button.rememberGreetingFont() }
+            add { Dock.Button.rememberGreetingSize() }
+            add { Dock.Button.rememberColors() }
+        }
+    }
+}
+
+/**
+ * Greeting font button at the dock.
+ */
+@Composable
+fun Dock.Button.rememberGreetingFont() = Dock.Button.remember {
+    id = { EditorComponentId("ly.img.component.dock.button.greetingFont") }
+    visible = {
+        remember(this) {
+            editorContext.engine.scene.run { getPages().indexOf(getCurrentPage()) == 1 }
+        }
+    }
+    vectorIcon = { IconPack.Typeface }
+    textString = { stringResource(R.string.ly_img_editor_dock_button_font) }
+    onClick = {
+        val designBlock = editorContext.engine.block.findByName("Greeting").first()
+        editorContext.eventHandler.send(
+            EditorEvent.Sheet.Open(SheetType.Font(designBlock = designBlock)),
+        )
+    }
+}
+
+/**
+ * Greeting size button of the dock.
+ */
+@Composable
+fun Dock.Button.rememberGreetingSize() = Dock.Button.remember {
+    id = { EditorComponentId("ly.img.component.dock.button.greetingSize") }
+    visible = {
+        remember(this) {
+            editorContext.engine.scene.run { getPages().indexOf(getCurrentPage()) == 1 }
+        }
+    }
+    vectorIcon = {
+        remember(this) {
+            val block = editorContext.engine.block.findByName("Greeting").firstOrNull()
+            requireNotNull(block) { "Page must have design block with name \"Greeting\"." }
+            val size = editorContext.engine.block.getFloat(block, "text/fontSize")
+            when {
+                size <= 14F -> IconPack.SizeSCircled
+                size > 18F -> IconPack.SizeLCircled
+                else -> IconPack.SizeMCircled
+            }
+        }
+    }
+    textString = { stringResource(R.string.ly_img_editor_dock_button_size) }
+    onClick = {
+        val designBlock = editorContext.engine.block.findByName("Greeting").first()
+        editorContext.eventHandler.send(
+            EditorEvent.Sheet.Open(SheetType.FontSize(designBlock = designBlock)),
+        )
+    }
+}
+
+/**
+ * Colors button of the dock.
+ */
+@Stable
+open class ColorsButtonScope(
+    parentScope: EditorScope,
+    private val colors: Map<DesignBlock, Color>,
+) : Dock.ItemScope(parentScope) {
+    val EditorContext.colors: Map<DesignBlock, Color>
+        get() = this@ColorsButtonScope.colors
+}
+
+/**
+ * Button builder of the [rememberColors] button.
+ */
+@Stable
+class ColorsButtonBuilder : AbstractButtonBuilder<ColorsButtonScope>() {
+    override var scope: ScopedProperty<EditorScope, ColorsButtonScope> = {
+        remember(this) {
+            val engine = editorContext.engine
+            val colorMapping = sortedMapOf<String, Pair<DesignBlock, Color>>()
+            engine.scene.getCurrentPage()?.let { currentPage ->
+                val target = engine.block.findByName("Greeting")
+                    .firstOrNull()
+                    ?.takeIf { engine.block.getParent(it) == currentPage }
+                    ?: currentPage
+                editorContext.collectColorsRecursively(target, colorMapping)
+            }
+            val colors = colorMapping.values.associate { (block, color) -> block to color }
+            ColorsButtonScope(parentScope = this, colors = colors)
+        }
+    }
+
+    private fun EditorContext.collectColorsRecursively(
+        designBlock: DesignBlock,
+        colorMapping: MutableMap<String, Pair<DesignBlock, Color>>,
+    ) {
+        val name = engine.block.getName(designBlock)
+        if (name.isNotEmpty()) {
+            val color = if (engine.block.supportsFill(designBlock) && engine.block.isFillEnabled(designBlock)) {
+                when (val fillInfo = engine.getFill(designBlock)) {
+                    is SolidFill, is GradientFill -> fillInfo.mainColor
+                    else -> null
+                }
+            } else if (engine.block.supportsStroke(designBlock) && engine.block.isStrokeEnabled(designBlock)) {
+                engine.getStrokeColor(designBlock)
+            } else {
+                null
+            }
+            color?.let { colorMapping[name] = designBlock to color }
+        }
+        engine.block.getChildren(designBlock).forEach {
+            collectColorsRecursively(it, colorMapping)
+        }
+    }
+}
+
+/**
+ * Colors button of the dock.
+ */
+@Composable
+fun Dock.Button.rememberColors() = Button.remember(::ColorsButtonBuilder) {
+    id = { EditorComponentId("ly.img.component.dock.button.colors") }
+    icon = {
+        val icon = remember(this) {
+            EditorIcon.Colors(
+                colors = editorContext.colors.values.toList(),
+            )
+        }
+        EditorIcon(icon = icon)
+    }
+    textString = { stringResource(R.string.ly_img_editor_dock_button_colors) }
+    onClick = {
+        editorContext.colors
+            .let { SheetType.Colors(designBlocks = it.keys.toList()) }
+            .let(EditorEvent.Sheet::Open)
+            .let(editorContext.eventHandler::send)
+    }
+}

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

@@ -0,0 +1,52 @@
+@file:Suppress("UnusedReceiverParameter")
+
+package ly.img.editor.configuration.postcard.component
+
+import androidx.compose.runtime.Composable
+import ly.img.editor.configuration.postcard.PostcardConfigurationBuilder
+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 PostcardConfigurationBuilder.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
+        }
+    }
+}