[Feature Request] Text Tool Improvements

[Giwayume]

This is the tool that during my initial impression of miniPaint seeemed to be the most difficult to work with. I'd like to make it work more similar to programs like Photoshop & GIMP, namely:

• [x] Editing of text occurs inline instead editing in a popup
• [x] When the text tool is active and you click on an existing text layer, it selects that text layer for editing instead of creating a new text layer. If a text layer is already selected for editing, it controls the position/selection of the mouse cursor in the text layer.
• [x] Bounding box fits the size of typed text when clicking without dragging, changing the size sets it to a fixed size for wrapping control. This is for easier management when working with multiple text layers, as not all text layers need wrapping control.
• [x] Add leading, kerning, underline, strikethrough control.
• [x] Control most properties per-letter. Probably text align would be the only exclusion for this.
• [x] Allow adding additional fonts via font upload or google fonts. (store uploaded fonts in JSON file?)
• [ ] Typing direction, namely top-bottom is useful for Chinese & Japanese, RTL for many middle-eastern languages.
• [ ] Allow for rotation without rasterizing.
• [x] Add auto-kerning. Right now default kerning values are not detected from font. Can only override this manually.
• [x] Text center ignore whitespace at beginning/end of wrap

This is a big wishlist, but just getting inline editing working would be a great start.

[Giwayume]

@viliusle just a heads up, implementing inline editing is going to be significantly more lines of code than the current text editor.

[viliusle]

It would not be easy to implement full feature text editor (editing on actual canvas for no differences between canvas, text parsing for extra features like bolding part of text, selection, all keyboard buttons support and so on and so on). So lets not build powerful text editor inside image editor?

But it should no be too hard to implement simple inline editor, where we render cursor position on screen, allow to navigate using left, right, top, bottom, and render everything on any keyboard button. After that more features can be added. I had this idea before, but added too low priority for it and was forgotten.

Or find some good library for it - but i am not sure it exists for rendering on canvas.

store uploaded fonts in JSON file?

allowing only google fonts and saving it could be simple, small and effective.

[Giwayume]

There is no pre-existing library so far as I know, which is why I've already done most of the work for creating a canvas text editor before in a personal project.

I'm just telling you up front to expect a PR that's a lot more code than what's currently there.

[Giwayume]

I also wanted to mention in terms of keeping the application lightweight, don't need to worry so much about how much code is contained in each feature, but rather when you load each feature.

https://webpack.js.org/guides/code-splitting/

Code splitting (dynamic imports) lets you organize the code into individual files that can be fetched from the network as needed, instead of building everything into one file and loading it all at once. This would be especially helpful for everything under the js/modules folder.

[viliusle]

if additional code gives benefit to user, i am ok :)

[Giwayume]

@viliusle there doesn't appear to be a way to differentiate when the canvas is rendered for image export vs for editing, right?

The problem I'm having is the text cursor/selection is showing up when saving the image as jpg or whatever.

I see this.Base_layers.convert_layers_to_canvas(); being called during save, but I'm not seeing any sort of flag being set on the config or anywhere that says not to render "editor" stuff. Is that correct that this doesn't exist and I'd have to add it?

[viliusle]

if you need to render for preview only, use can use: var ctx = document.getElementById('canvas_minipaint').getContext("2d"); It will be visible on main canvas. When user does "save as" action, everything is render on temp canvas which is converted to temp file for download.

[Giwayume]

Huh, I was expecting more of an API-centric way of differentiating but that works too.

[Giwayume]

Problem with that method is getting a new context forces everything to draw on top of the old context, so the layering is off.

Edit: Nevermind it was drawing on top because the mini preview renders after the same time as the main canvas, which drew on top of the already drawn main canvas.

[viliusle]

There is a ctx link on Base_layers_class class. It can be taken and used,

Other way is to add extra parameter (is_preview, true|null by default, false on file save ) to: (i can do this tomorrow)

• convert_layers_to_canvas()
• render_object() function
• allow render functions to take third parameter (call defined here: this.Base_gui.GUI_tools.tools_modules[render_class][render_function](ctx, object); )
• plus test other places

[Giwayume]

I have a good chunk of this working, but I've been a bit busy and still have things left to do to make it a minimum viable product in terms of replacing the current functionality without losing anything.

[Giwayume]

I'm getting so close ;_;

[Giwayume]

@viliusle I'm thinking of restyling the selection box a little bit, the main problem is the resize handles cover up the corners & edges of the layer which makes it both difficult to see and work with smaller layers, especially if you're trying to select text starting from the edge of the layer. Only problem I can see with moving the handles outside is when you have a layer that reaches the edges of the canvas you can't grab the handles, so perhaps that will be a special case where they show inside the selection.

Another problem is the green outline is difficult to see especially if you have a large canvas and you're zoomed out. So I'm thinking of displaying it as an even thickness independent of the zoom level and possibly changing the color based on the background.

[viliusle]

Can you add borders feature to initial comment? I just got this suggestion by email, and i agree that it can be used in many cases.

We should implement it one day,

Another suggestion: could you add text with borders? This is commonly used to build flow charts etc.

[Giwayume]

could you add text with borders? This is commonly used to build flow charts etc.

My thought here (for making flow charts) would be a combination of multiple features.

1. Rectangle & circle tools would allow for stroke & fill color to be controlled simultaneously (like it is on text tool)
2. Add layer grouping #112
3. Add snapping controls for grouped layers, so a text layer + rectangle for example could resize together.

We could add border/background feature to text layers, but at that point it pretty much replaces the rectangle tool...

[viliusle]

Right now it is possible to draw simple charts (using rectangle, text and line objects), but missing some shapes, arrow not snapping and of course editing is complicated (missing grouping or even line auto-snap to center of rectangle.)

I will do small improvements first, after that we will see. (more shapes, fill feature for shapes, snap while creating new shape).

[viliusle]

Users are asking for few changes:

• text layer should have Align option on top menu too
• "Fill" should be Color on top menu.*
• "Stroke" should be "Border" on top menu*
• "Stroke size" should be "Border size" on top menu*

* - it would also require to update old JSN import (I can do it)

[Giwayume]

I'd tend to agree with having the alignment on the top bar since it's easier to find there. Only thing is unlike all of the other options, it is a global setting and doesn't work on the selected text.

I don't really agree with the renaming, what's there is industry standard. For example, using "color" as a shortcut for "fill color" makes the term ambiguous as to whether it's impacting the fill or the stroke.

Even photopea uses this terminology

[Giwayume]

Also it takes 10 seconds to figure out what these settings do if you don't already know the terminology.

[viliusle]

ok, let's leave naming as it is.

[MMF3775]

can you solve problem #339 in text editor?