Let's make pretty UI with rounded corners for rectangles, buttons, etc.

(possibly bevyengine/bevy#3991 have to be released first)

Currently it's localised to every button system, let's have a global one

Allow supporting several app languages.

Similarly how background color of a note can be changed there should be a way to change a text color.

Description

When using the rename functionality, I've noticed that it stops working properly if I keep the delete key pressed for a prolonged period of time. This behavior doesn't occur if the key is pressed singularly.

To Reproduce

1. Select a tab or filename that you want to rename.
2. Press the rename button.
3. Press and hold the delete key.

Expected behavior

The renaming process should work properly and be able to handle the deletion of characters even if the delete key is pressed continually.

Actual behavior

The renaming process freezes and stops working.

Instead of having 5 colors for rectangles background let's have one default color (yellow one):

and text input near to it to change to any color: [] #7d26cd

Currently app uses database to store app data (documents) on native platform. Prior to storing data in database it was stored in json files in the first version of the app. PR that introduced database usage: #17 and removed saving/loading data from json file. It's useful feature to have ability to just export/import document to json file to share it with a buddy. Let's have an option to export/import document from database to json file.

Have 2 types of rectangles... one with border and rounded corners (already implemented, rounded corners separate issue) and one without border but nice shadow beneath.

Currently velo supports only one form: rectangle. Let's add more forms:




etc

Add editable field that allows adding/removing tags from document (position of red rectangle in the right bottom corner):

Proposed syntax for tags is #tag_name1, #tag_name2, by pressing Enter editing of tags is ended.

Make sure that it’s embedded in release binary

Let's change the logic to workaround the issue bevyengine/bevy#5732

• update position of arrow instead of re-creation of it on rectangle position change (this is a good improvement)
• for wasm platform, let's not remove arrows at all and just hide them (this is a temporary workaround until the issue is fixed upstream)

This will allow to run application on wasm without errors.

make it more modular

Let's add text fuzzy search support.

As the first iteration for this feature we can just filter documents and show document only if it has node with searched text.

Portrait view is currently broken:

We can make layout mobile-friendly: restyle left panel on narrow screen, add opening keyboard, add touch handlers, etc.

We use bevy_embedded_assets to embed assets, let's not do it for wasm, so assets is requested by separate request (this is default behaviour of bevy). Bevy loading screen have to be implemented as part of this issue.
@nx2k3 idea 💡 to use running bicycle gif during loading.

• test for button
  • color
  • bring front and back
  • new tab ,rename and delete
  • new document,rename and delete
• test for rectangle
  • test spawn and de-spawn
  • test re size and re position
• test for arrows
  • test spawn and de-spawn
  • test re size and re position
  • test different types of arrow
• test save and load

On app load position of arrows are shifted on wasm.

Just a first baby steps in this direction, proposed improvements:

Wasm target: https://staffengineer.github.io/velo/ (with limited feature set)

Let's automate process to deploy wasm target automatically on merge to main (see readme for build commands).

Currently it's passed to every text element separately, let's have a global one

Something similar to lucid.app functionality:

By typing text in search box documents can be filtered by document name, e.g name: my_doc

Currently it's possible to connect nodes like so:

Let's implement another mode for arrows:

Note: assets for buttons that enable the mode are already in assets folder

E.g. tooltip on hover, better shortcuts

Currently it inserts "E" instead of new line on wasm.

Keys: Ctrl+C / Ctrl+V
Source: https://github.com/StaffEngineer/velo/blob/main/crates/bevy_cosmic_edit/src/lib.rs
Note: would be cool to support both native and wasm targets

Just noting the ideas to explore... feel free to contribute your ideas here:

• executable code in rectangles (see org-babel, jupyter for inspiration)
• org-mode, markdown support in rectangles
• connection between documents and meta view of connected documents (see org-roam for inspiration)
• collaborative editing (use bevy_matchbox)
• code based drawing (see plantuml for inspiration)
• ChatGPT assistance

Separate issue for one of the ideas from #42

Let's use https://github.com/johanhelsing/matchbox/tree/main/bevy_matchbox and have collaborative editing

Useful links:

• https://mui.com/material-ui/material-icons/
• https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints

Some icons are already material-icons, see #68 with initial integration.

Draw heart with particles, something like this but another shape: bevy_hanabi/gradient.gif at main · djeedai/bevy_hanabi

Currently, velo doesn't allow to remove document if there is only one document in memory:

 if app_state.docs.len() < 2 {
    return;
}

On app start velo loads only one document from database to memory, so user can't remove document on app start.
One of the options to fix this: if there is only one document in memory query database and load one more document to allow deleting.

• currently velo uses localStorage on wasm target that is very limited in size (it may change in the future if bevy-pkv will have indexeddb backend option for wasm target), let's add button that clears localStorage velo data
• currently "Export To File" button is disabled for wasm, let's have similar button but store document on global js object that can be easily accessed in console. Fixed by #75

Native platform supports fuzzy search feature that is used for filtering documents that contain nodes with particular text. Let's developer fuzzy search feature further and highlight found nodes if they are on viewport.

See bevyengine/bevy#7163

Currently https://github.com/StaffEngineer/rusticify/blob/main/assets/bg.png is used as canvas background... let's have a way to customise it... maybe have a set of canvas image patterns to choose from and to have one-colour backgrounds (see https://excalidraw.com/ for inspiration)

Note: once there is a way to change canvas background it would be good to add it to saving/loading logic, so the user can have chosen background on app starup.

Lucid.app has 3 types of arrows:

Velo currently supports two types of arrows, let's implement third.

Currently, it's possible to select only one node, let's have ability to select few nodes simultaneously, e.g to be able to move them together.

We are almost there for ligatures/emoji support in velo. Let's move bevy_markdown to use bevy_cosmic_edit and use fonts that support ligature/emoji.

Currently it's possible to load app state via document url param on wasm target. It's nice way to share a document but it requires some manual steps to create public gist with app state. Let's implement GitHub integration, so user can sign in/give velo permissions to create public gist with document state.

Say, by clicking "Share Document" button the following steps are performed:

• document is saved and pushed to user's public gist on GitHub
• then url is generated with sharable document, like so: https://staffengineer.github.io/velo?document=https://gist.githubusercontent.com/StaffEngineer/a6139b3dc88775d3f181757d40f976e0/raw/470df8d8213c03afd11c5d8b4902a20154c34dc7/velo.json

E.g.

• text selection
• exectuble code inside rectangle
• org/markdown support
• bold, italic, underline, etc

A lot of ergonomics may be improved when bevy moves to cosmic-text, potentially in 0.11.

WebGL: INVALID_OPERATION is fixed for bevy's main branch. By updating project to use main branch we can remove special treatment for arrows introduced here: #29

Note: we may need to update some plugins to use bevy's main branch if they don't updated for that.

Support markdown syntax in rectangle. Render markdown once a user stops editing rectangle.

Features:

• bold text style
• italic text style
• links
• inline images
• headings
• inline code
• code block with syntax highlighting
• ordered/unordered lists
• quotes
• tables
• strikethrough text
• checkboxes

Instead of silently ignore errors or crash the app (during import/export from file/url) let's have a status bar that will report the error (status) to a user.

We can see how it's done in https://github.com/alepez/lavagna and implement similar idea with drawing pencil on canvas.