Skip to content

Advanced editor #26

Description

@Av3boy

Advanced editor

Instead of rendering everything to a single window, users may want to break off specific parts like the inspector to another screen. For this we need to implement a Docking System.

TODO: This issue should be broken down to smaller chunks

Editor design (WIP):
https://www.figma.com/design/vFi8jKlqeXuKmjELkEvlnE/SharpEngine?node-id=0-1&p=f&t=ucWN7jFlWoYdRQNh-0

Docking system

The basic docking system enables users to break off editor windows like the Inspector into their own os-level windows. By default the docked windows are rendered as components like imgui windows or custom UI Components.

The EditorWindow components should be modified so that different components can be derived from it like the Inspector.

Inspector

TBD

Picker component

TBD

Menu bar

The menu bar should be a container at the top of the main editor window that can be extended using chaining.

The menu bar needs to support nested context menus.

Asset view

The see what assets are associated with a given project we need to store that information somewhere. We need to create a directory to contain all the assets within a project.

For the first iteration, let's just render the file extension onto the asset container. If it's longer than 8 characters, take the first 5 and add '...'.

We need a context menu forr assets:

  • Delete
  • Clone
  • Open in IDE -> IDE opening support (The preferred IDE that should open the file should be defined in the Launcher settings)

Layout components

Layout components sould contain scrollbars when contents to not fit in their containers.

Flex component to space items evenly. TBD: Based on css rules?

Grid component to show n items per row. When n items have been reached, a new row should be created.
https://chatgpt.com/c/67cc19ed-876c-8004-92ba-20e37b0751ac

Moving assets

TBD: Can we leverage the docking system.

Exit dialog

We need to create a dialog that should confirm whether the user wants to exit without saving their changes. The dialog should be a shared component.

The UnsavedChangesDialog component should contain the following:

  • Title: "Unsaved changes!"
  • Content: "You have unsaved changes in your project, are you sure you want to exit?"
  • Save button, which saves the scene.
  • Close button which closes down the application.

Launcher?

Since the asset view requires storing the assets in a specific location, we need to introduce projects. We also need a container that stores all the project file locations.

We can create new file ProgramData/SharpEngine/projects.json which contains all the project file locations that can be shown in the launcher UI.

Launcher settings

TBD

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    editorChanges related to the EditorenhancementNew feature or requestrenderingRendering related issues / questionswindowChanges related to the windows of the engine

    Projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions