remember
A composable function that creates and remembers an Button instance. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a new icon button.
Parameters
the factory that should be used to construct Button.
the builder block that configures the Button.
A composable overload for CanvasMenu.Companion.remember that uses CanvasMenuBuilder to create and remember a CanvasMenu instance. Check the documentation of overloaded CanvasMenu.Companion.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a canvas menu that will be displayed when a design block is selected.
Parameters
the builder block that configures the CanvasMenu.
A composable function that creates and remembers a CanvasMenu instance.
For example, if you want to have a canvas menu with the following functionality:
Use CanvasMenu.Button.rememberBringForward button with a different icon.
Add 2 custom buttons.
Update first custom button text when second custom button is clicked with an incremented value.
Show CanvasMenu.Button.rememberDuplicate when the counter is even.
Force update all items on any engine event (that will be obvious from first custom button random icon). you should invoke CanvasMenu.Companion.remember with CanvasMenu.listBuilder looking like this:
canvasMenu = {
var counter by remember { mutableStateOf(0) }
CanvasMenu.remember {
scope = {
val eventTrigger by EditorTrigger.remember {
editorContext.engine.event.subscribe()
}
remember(this, eventTrigger) {
CanvasMenu.Scope(parentScope = this)
}
}
listBuilder = {
CanvasMenu.ListBuilder.remember {
add {
CanvasMenu.Button.remember {
id = { EditorComponentId("my.package.canvasMenu.button.custom1") }
vectorIcon = { listOf(IconPack.Music, IconPack.PlayBox).random() }
textString = { "Custom1 $counter" }
onClick = {}
}
}
add {
CanvasMenu.Button.rememberBringForward {
vectorIcon = { IconPack.Music }
}
}
add { CanvasMenu.Button.rememberSendBackward() }
add {
CanvasMenu.Button.remember {
id = { EditorComponentId("my.package.canvasMenu.button.custom2") }
vectorIcon = { IconPack.PlayBox }
textString = { "Custom2" }
onClick = { counter++ }
}
}
add {
CanvasMenu.Button.rememberDuplicate {
visible = { counter % 2 == 0 }
}
}
add { CanvasMenu.Button.rememberDelete() }
}
}
}
}In addition, if you already have an existing builder (either from starter kits or you created it yourself), you can modify it by adding, removing, or replacing items using EditorComponent.ListBuilder.modify API. Check EditorComponent.ListBuilder.modify documentation for more details. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a canvas menu that will be displayed when a design block is selected.
Parameters
the factory that should be used to construct CanvasMenu.
the builder block that configures the CanvasMenu.
A composable function that creates and remembers a CanvasMenu.ListBuilder instance.
Return
a new CanvasMenu.ListBuilder instance.
Parameters
the building block of CanvasMenu.ListBuilder.
A composable overload for CanvasMenu.Button.remember that uses AbstractButtonBuilder to create and remember an Button instance. Check the documentation of overloaded CanvasMenu.Button.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a button that will be displayed in the canvas menu.
Parameters
the builder block that configures the Button.
A composable overload for CanvasMenu.Divider.remember that uses CanvasMenu.DividerBuilder to create and remember a Divider instance. Check the documentation of overloaded CanvasMenu.Divider.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a divider that will be displayed.
Parameters
the builder block that configures the Divider.
A composable function that creates and remembers a Divider instance. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a divider that will be displayed.
Parameters
the factory that should be used to construct Divider.
the builder block that configures the Divider.
A composable overload for Dock.Companion.remember that uses DockBuilder to create and remember a Dock instance. Check the documentation of overloaded Dock.Companion.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a dock that will be displayed when launching an editor.
Parameters
the builder block that configures the Dock.
A composable function that creates and remembers a Dock instance.
For example, if you want to have a dock with the following functionality:
Use Dock.Button.rememberElementsLibrary button with a different icon.
Add 2 custom buttons.
Update first custom button text when second custom button is clicked with an incremented value.
Show Dock.Button.rememberStickersLibrary when the counter is even.
Force update all items on any engine event (that will be obvious from first custom button random icon). you should invoke Dock.Companion.remember with Dock.listBuilder looking like this:
dock = {
var counter by remember { mutableStateOf(0) }
Dock.remember {
scope = {
val eventTrigger by EditorTrigger.remember {
editorContext.engine.event.subscribe()
}
remember(this, eventTrigger) {
Dock.Scope(parentScope = this)
}
}
listBuilder = {
Dock.ListBuilder.remember {
add {
Dock.Button.remember {
id = { EditorComponentId("my.package.dock.button.custom1") }
vectorIcon = { listOf(IconPack.Music, IconPack.PlayBox).random() }
textString = { "Custom1 $counter" }
onClick = {}
}
}
add {
Dock.Button.rememberElementsLibrary {
vectorIcon = { IconPack.Music }
}
}
add { Dock.Button.rememberSystemGallery() }
add {
Dock.Button.remember {
id = { EditorComponentId("my.package.dock.button.custom2") }
vectorIcon = { IconPack.PlayBox }
textString = { "Custom2" }
onClick = { counter++ }
}
}
add { Dock.Button.rememberImagesLibrary() }
add {
Dock.Button.rememberStickersLibrary {
visible = { counter % 2 == 0 }
}
}
add { Dock.Button.rememberTextLibrary() }
add { Dock.Button.rememberResizeAll() }
}
}
}
}If you do not want to have the items as a single list, but rather as a set of separate aligned lists, you can use the aligned function to specify the alignment of each sublist. For example:
dock = {
Dock.remember {
listBuilder = {
Dock.ListBuilder.remember {
aligned(alignment = Alignment.Start) {
add { Dock.Button.rememberElementsLibrary() }
add { Dock.Button.rememberSystemGallery() }
}
aligned(alignment = Alignment.End) {
add { Dock.Button.rememberTextLibrary() }
add { Dock.Button.rememberResizeAll() }
}
}
}
}
}In addition, if you already have an existing builder (either from starter kits or you created it yourself), you can modify it by adding, removing, or replacing items using EditorComponent.ListBuilder.modify API. Check EditorComponent.ListBuilder.modify documentation for more details. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a dock that will be displayed when launching an editor.
Parameters
the factory that should be used to construct Dock.
the builder block that configures the Dock.
A composable function that creates and remembers a Dock.ListBuilder instance.
Return
a new Dock.ListBuilder instance.
Parameters
the building block of Dock.ListBuilder.
A composable overload for Dock.Button.remember that uses AbstractButtonBuilder to create and remember an Button instance. Check the documentation of overloaded Dock.Button.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a button that will be displayed in the dock.
Parameters
the builder block that configures the Button.
A composable overload for Dock.Divider.remember that uses Dock.DividerBuilder to create and remember a Divider instance. Check the documentation of overloaded Dock.Divider.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a divider that will be displayed.
Parameters
the builder block that configures the Divider.
A composable overload for EditorComponent.Companion.remember where the component's scope is automatically EditorScope instance. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
fully custom EditorComponent. Use EditorComponent.decoration for rendering your custom content.
Parameters
the building block of custom EditorComponent.
A composable function that creates and remembers a fully custom editor component. Use this function whenever you want to provide a fully custom UI for EditorComponent. For instance, you can replace the content of the inspector bar:
EditorConfiguration.remember {
inspectorBar = EditorComponent.remember {
id = { EditorComponentId("my.package.inspectorBar") }
decoration = {
// [this] references to [InspectorBar.Scope]
// Custom UI here
}
)
)Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
fully custom EditorComponent. Use EditorComponent.decoration for rendering your custom content.
Parameters
the factory that should be used to construct EditorComponent.
the builder block that configures the EditorComponent.
A composable function that creates and remembers a EditorComponent.ListBuilder instance.
Return
a new EditorComponent.ListBuilder instance.
Parameters
the building block of EditorComponent.ListBuilder.
Creates and remembers a new EditorTrigger.
Every time any of the keys are changed, the trigger will be triggered and EditorTrigger.key will have a different value.
val activeSceneTrigger by EditorTrigger.remember {
engine.scene.onActiveChanged()
}
val historyTrigger by EditorTrigger.remember(activeSceneTrigger) {
engine.editor.onHistoryUpdatedWithKind()
}
val otherTrigger = EditorTrigger.remember()
LaunchedEffect(historyTrigger) {
// Will be triggered every time history or active scene changes.
otherTrigger() // this will trigger otherTrigger
}
LaunchedEffect(otherTrigger.key) {
// ...
}Return
a new trigger instance.
Parameters
the keys that trigger the trigger whenever they change.
Creates and remembers a new EditorTrigger.
Every time any of the keys are changed, the trigger will be triggered and EditorTrigger.key will have a different value. Every time the flow returned by flow lambda collects a new value, the trigger will be triggered and EditorTrigger.key will have a different value.
val activeSceneTrigger by EditorTrigger.remember {
engine.scene.onActiveChanged()
}
val historyTrigger by EditorTrigger.remember(activeSceneTrigger) {
engine.editor.onHistoryUpdatedWithKind()
}
val otherTrigger = EditorTrigger.remember()
LaunchedEffect(historyTrigger) {
// Will be triggered every time history or active scene changes.
otherTrigger() // this will trigger otherTrigger
}
LaunchedEffect(otherTrigger.key) {
// ...
}Return
a new trigger instance.
Parameters
the keys that trigger the trigger whenever they change.
lambda that provides a flow, whose collection triggers the trigger.
A composable overload for InspectorBar.Companion.remember that uses AbstractInspectorBarBuilder to create and remember an InspectorBar instance. Check the documentation of overloaded InspectorBar.Companion.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
an inspector bar that will be displayed when a design block is selected.
Parameters
the builder block that configures the InspectorBar.
A composable function that creates and remembers an InspectorBar instance.
For example, if you want to have an inspector bar with the following functionality:
Use InspectorBar.Button.rememberAdjustments button with a different icon.
Add 2 custom buttons.
Update first custom button text when second custom button is clicked with an incremented value.
Show InspectorBar.Button.rememberEffect when the counter is even.
Force update all items on any engine event (that will be obvious from first custom button random icon). you should invoke InspectorBar.Companion.remember with InspectorBar.listBuilder looking like this:
inspectorBar = {
var counter by remember { mutableStateOf(0) }
InspectorBar.remember {
scope = {
val eventTrigger by EditorTrigger.remember {
editorContext.engine.event.subscribe()
}
remember(this, eventTrigger) {
InspectorBar.Scope(parentScope = this)
}
}
listBuilder = {
InspectorBar.ListBuilder.remember {
add {
InspectorBar.Button.remember {
id = { EditorComponentId("my.package.inspectorBar.button.custom1") }
vectorIcon = { listOf(IconPack.Music, IconPack.PlayBox).random() }
textString = { "Custom1 $counter" }
onClick = {}
}
}
add {
InspectorBar.Button.rememberAdjustments {
vectorIcon = { IconPack.Music }
}
}
add { InspectorBar.Button.rememberCrop() }
add {
InspectorBar.Button.remember {
id = { EditorComponentId("my.package.inspectorBar.button.custom2") }
vectorIcon = { IconPack.PlayBox }
textString = { "Custom2" }
onClick = { counter++ }
}
}
add { InspectorBar.Button.rememberFillStroke() }
add {
InspectorBar.Button.rememberEffect {
visible = { counter % 2 == 0 }
}
}
add { InspectorBar.Button.rememberDelete() }
}
}
}
}If you do not want to have the items as a single list, but rather as a set of separate aligned lists, you can use the aligned function to specify the alignment of each sublist. For example:
inspectorBar = {
InspectorBar.remember {
listBuilder = {
InspectorBar.ListBuilder.remember {
aligned(alignment = Alignment.Start) {
add { InspectorBar.Button.rememberAdjustments() }
add { InspectorBar.Button.rememberCrop() }
}
aligned(alignment = Alignment.End) {
add { InspectorBar.Button.rememberEffect() }
add { InspectorBar.Button.rememberDelete() }
}
}
}
}
}In addition, if you already have an existing builder (either from starter kits or you created it yourself), you can modify it by adding, removing, or replacing items using EditorComponent.ListBuilder.modify API. Check EditorComponent.ListBuilder.modify documentation for more details. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
an inspector bar that will be displayed when a design block is selected.
Parameters
the factory that should be used to construct InspectorBar.
the builder block that configures the InspectorBar.
A composable function that creates and remembers an InspectorBar.ListBuilder instance.
Return
a new InspectorBar.ListBuilder instance.
Parameters
the building block of InspectorBar.ListBuilder.
A composable overload for InspectorBar.Button.remember that uses AbstractButtonBuilder to create and remember an Button instance. Check the documentation of overloaded InspectorBar.Button.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a button that will be displayed in the inspector bar.
Parameters
the builder block that configures the Button.
A composable overload for NavigationBar.Companion.remember that uses NavigationBarBuilder to create and remember a NavigationBar instance. Check the documentation of overloaded NavigationBar.Companion.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a navigation bar that will be displayed when launching an editor.
Parameters
the builder block that configures the NavigationBar.
A composable function that creates and remembers a NavigationBar instance.
For example, if you want to have a navigation bar with the following functionality:
Use NavigationBar.Button.rememberElementsLibrary button with a different icon.
Add 2 custom buttons.
Update first custom button text when second custom button is clicked with an incremented value.
Show NavigationBar.Button.rememberStickersLibrary when the counter is even.
Force update all items on any engine event (that will be obvious from first custom button random icon). you should invoke NavigationBar.Companion.remember with NavigationBar.listBuilder looking like this:
navigationBar = {
var counter by remember { mutableStateOf(0) }
NavigationBar.remember {
scope = {
val eventTrigger by EditorTrigger.remember {
editorContext.engine.event.subscribe()
}
remember(this, eventTrigger) {
NavigationBar.Scope(parentScope = this)
}
}
listBuilder = {
NavigationBar.ListBuilder.remember {
add {
NavigationBar.Button.remember {
id = { EditorComponentId("my.package.navigationBar.button.custom1") }
vectorIcon = { listOf(IconPack.Music, IconPack.PlayBox).random() }
textString = { "Custom1 $counter" }
onClick = {}
}
}
add {
NavigationBar.Button.rememberElementsLibrary {
vectorIcon = { IconPack.Music }
}
}
add { NavigationBar.Button.rememberSystemGallery() }
add {
NavigationBar.Button.remember {
id = { EditorComponentId("my.package.navigationBar.button.custom2") }
vectorIcon = { IconPack.PlayBox }
textString = { "Custom2" }
onClick = { counter++ }
}
}
add { NavigationBar.Button.rememberImagesLibrary() }
add {
NavigationBar.Button.rememberStickersLibrary {
visible = { counter % 2 == 0 }
}
}
add { NavigationBar.Button.rememberTextLibrary() }
add { NavigationBar.Button.rememberResizeAll() }
}
}
}
}If you do not want to have the items as a single list, but rather as a set of separate aligned lists, you can use the aligned function to specify the alignment of each sublist. For example:
navigationBar = {
NavigationBar.remember {
listBuilder = {
NavigationBar.ListBuilder.remember {
aligned(alignment = Alignment.Start) {
add { NavigationBar.Button.rememberElementsLibrary() }
add { NavigationBar.Button.rememberSystemGallery() }
}
aligned(alignment = Alignment.End) {
add { NavigationBar.Button.rememberTextLibrary() }
add { NavigationBar.Button.rememberResizeAll() }
}
}
}
}
}In addition, if you already have an existing builder (either from starter kits or you created it yourself), you can modify it by adding, removing, or replacing items using EditorComponent.ListBuilder.modify API. Check EditorComponent.ListBuilder.modify documentation for more details. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a navigation bar that will be displayed when launching an editor.
Parameters
the factory that should be used to construct NavigationBar.
the builder block that configures the NavigationBar.
A composable function that creates and remembers a NavigationBar.ListBuilder instance.
Return
a new NavigationBar.ListBuilder instance.
Parameters
the building block of NavigationBar.ListBuilder.
A composable overload for NavigationBar.Button.remember that uses AbstractButtonBuilder to create and remember an Button instance. Check the documentation of overloaded NavigationBar.Button.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a button that will be displayed in the navigation bar.
Parameters
the builder block that configures the Button.
A composable overload for Timeline.Companion.remember that uses TimelineBuilder to create and remember a Timeline instance. Check the documentation of overloaded Timeline.Companion.remember function below for more details. Note that builder lambda runs only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a timeline that will be displayed when launching an editor.
Parameters
the builder block that configures the Timeline.
A composable function that creates and remembers a Timeline instance. Note that both builderFactory and builder lambdas run only once, therefore you should not have builder property reassignments based on conditions. Check ly.img.editor.core.configuration.EditorConfiguration.Companion.remember for more details on this pattern.
Return
a timeline that will be displayed when launching an editor.