[SOLVED] How Link editor script childrens?

Questions
1

How make preview field in custom editor script? For example, preview-field automatically updates when name-field changed.

image
image506×422 16.3 KB

here’s my script, available at Assets Tab → Right Mouse Click → Create New Map

local M = {}

function M.get_commands()
	return {
		{
			label = "Create New Map",
			locations = {"Assets"},
			run = function()
				local filepath = ""
				local cell_w = 32
				local cell_h = 16
				local map_w = 16
				local map_h = 16

				local result = editor.ui.show_dialog(editor.ui.dialog({
					title = "Create New Map",
					content = editor.ui.grid({
						padding = editor.ui.PADDING.LARGE,
						columns = {{}, {grow = true}},
						children = {
							-- filepath
							{
								editor.ui.label({ 
									text = "Filepath",
									alignment = editor.ui.ALIGNMENT.RIGHT
								}),
								editor.ui.string_field({
									text = filepath,
									on_value_changed = function(new_value)
										filepath = new_value
									end
								})
							},
							-- cell width
							{
								editor.ui.label({ 
									text = "Cell Width",
									alignment = editor.ui.ALIGNMENT.RIGHT
								}),
								editor.ui.integer_field({
									value = cell_w,
									on_value_changed = function(new_value)
										cell_w = new_value
									end
								})
							},
							-- cell height
							{
								editor.ui.label({ 
									text = "Cell Height",
									alignment = editor.ui.ALIGNMENT.RIGHT
								}),
								editor.ui.integer_field({
									value = cell_h,
									on_value_changed = function(new_value)
										cell_h = new_value
									end
								})
							},
							-- map width
							{
								editor.ui.label({ 
									text = "Map Width",
									alignment = editor.ui.ALIGNMENT.RIGHT
								}),
								editor.ui.integer_field({
									value = map_w,
									on_value_changed = function(new_value)
										map_w = new_value
									end
								})
							},
							-- map height
							{
								editor.ui.label({ 
									text = "Map Height",
									alignment = editor.ui.ALIGNMENT.RIGHT
								}),
								editor.ui.integer_field({
									value = map_h,
									on_value_changed = function(new_value)
										map_h = new_value
									end
								})
							},
							-- preview
							{
								editor.ui.label({ 
									text = "Preview",
									alignment = editor.ui.ALIGNMENT.RIGHT,
								}),
								editor.ui.string_field({
									enabled = false,
								})
							}
						}
					}),
					buttons = {
						editor.ui.dialog_button({
							text = "Cancel",
							cancel = true,
							result = false
						}),
						editor.ui.dialog_button({
							text = "Create",
							default = true,
							result = true
						})
					}
				}))
				-- finally
				if result then
					print(map_w, map_h, cell_w, cell_h, filepath)
				end
			end
		}
	}
end

return M
2

You need to start using components and hooks when you need the dialog to not be static, e.g.:

local M = {}

local dialog_component = editor.ui.component(function(props)
    local filepath, set_filepath = editor.ui.use_state("")
    local cell_w, set_cell_w = editor.ui.use_state(32)
    local cell_h, set_cell_h = editor.ui.use_state(32)
    local map_w, set_map_w = editor.ui.use_state(16)
    local map_h, set_map_h = editor.ui.use_state(16)
    return editor.ui.dialog({
        title = "Create New Map",
        content = editor.ui.grid({
            padding = editor.ui.PADDING.LARGE,
            columns = {{}, {grow = true}},
            children = {
                -- filepath
                {
                    editor.ui.label({ 
                        text = "Filepath",
                        alignment = editor.ui.ALIGNMENT.RIGHT
                    }),
                    editor.ui.string_field({ text = filepath, on_value_changed = set_filepath })
                },
                -- cell width
                {
                    editor.ui.label({ 
                        text = "Cell Width",
                        alignment = editor.ui.ALIGNMENT.RIGHT
                    }),
                    editor.ui.integer_field({ value = cell_w, on_value_changed = set_cell_w })
                },
                -- cell height
                {
                    editor.ui.label({ 
                        text = "Cell Height",
                        alignment = editor.ui.ALIGNMENT.RIGHT
                    }),
                    editor.ui.integer_field({ value = cell_h, on_value_changed = set_cell_h })
                },
                -- map width
                {
                    editor.ui.label({ 
                        text = "Map Width",
                        alignment = editor.ui.ALIGNMENT.RIGHT
                    }),
                    editor.ui.integer_field({ value = map_w, on_value_changed = set_map_w })
                },
                -- map height
                {
                    editor.ui.label({ 
                        text = "Map Height",
                        alignment = editor.ui.ALIGNMENT.RIGHT
                    }),
                    editor.ui.integer_field({ value = map_h, on_value_changed = set_map_h })
                },
                -- preview
                {
                    editor.ui.label({ 
                        text = "Preview",
                        alignment = editor.ui.ALIGNMENT.RIGHT,
                    }),
                    editor.ui.string_field({ enabled = false, value = filepath .. ".mymap" })
                }
            }
        }),
        buttons = {
            editor.ui.dialog_button({
                text = "Cancel",
                cancel = true,
                result = false
            }),
            editor.ui.dialog_button({
                text = "Create",
                default = true,
                result = {
                    filepath = filepath,
                    cell_w = cell_w,
                    cell_h = cell_h,
                    map_w = map_w,
                    map_h = map_h
                }
            })
        }
    })
end)

function M.get_commands()
    return {
        {
            label = "Create New Map",
            locations = {"Assets"},
            run = function()
                local result = editor.ui.show_dialog(dialog_component({}))
                -- finally
                if result then
                    pprint(result)
                end
            end
        }
    }
end

return M
2 Likes