Implement Text Tool

[ghost]

#558

[ghost]

I think that we should start by adding the properties Layouts in the src/Layouts/Partials dir

[LucileDT]

About UI, I think it would be nicer if it was looking like the majority of text editors, like so:

(this is Google Document text menu)

So I propose something like this:

With tooltips for buttons containing only an icon.

[ghost]

Looks better

[ghost]

But 1 question it is about the + button for Text Options
why will the user add 2 different fonts for the same text
or it adds different options

[LucileDT]

Sorry it's a copy-paste error 😅

[ghost]

@LucileDT But I think that it would be better if we show a fonts dialog instead of a dropdown

[Alecaddd]

This is a mock-up I did a while ago (almost 2 years ago, wow)

I agree with the proposal of Lucile in trying to use iconography as much as possible.
Let's also see what the competition is doing, and iterate from that.

Figma

Sketch

Adobe XD

All these panels above have good and bad things.
I think the important goal here is to organize a lot of options in an easy and discoverable way, without creating clutter and a massive panel.

We shouldn't show the "Content" of the text like Inkscape or Gimp does, and the text should be only editable in the Canvas itself.
As a start, a simple list to show all the system's fonts is good enough. Later on, we can implement a dedicated popup to give more flexibility to explore large fonts collections, and maybe also integrate importing/exporting fonts from a file or a web link (eg. google fonts).

Other than the design, we should also talk a bit in depth about the possible technical implementation, as this tool is very complex.

[ghost]

@Alecaddd what will be better for choosing the font
a dropdown or a font dialog

[ghost]

@Alecaddd We should create a TextOptions.vala in the src/Layouts/Partials dir

[ghost]

And attach it to the left panel

[ghost]

this is what I wrote in the file

/*
* Copyright (c) 2021 Alecaddd (https://alecaddd.com)
*
* This file is part of Akira.
*
* Akira is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.

* Akira is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.

* You should have received a copy of the GNU General Public License
* along with Akira. If not, see <https://www.gnu.org/licenses/>.
*
* Authored by: Abdallah Mohammad <[email protected]>
*/

public class Akira.Layouts.Partials.TextOptions : Gtk.Grid {
    public weak Akira.Window window { get; construct; }

    private Gtk.Grid options_grid;
    private Gtk.ToggleButton bold_button;
    private Gtk.ToggleButton italic_button;
    private Gtk.ToggleButton underline_button;

    private Akira.Partials.InputField font_size;

    private Akira.Lib.Items.CanvasText _selected_item;
    private Akira.Lib.Items.CanvasText selected_item {
        get {
            return _selected_item;
        } set {
            // If the same item is already selected, or the value is still null
            // we don't do anything to prevent redraw and calculations.
            if (_selected_item == value) {
                return;
            }
            //  disconnect_previous_item ();
            _selected_item = value;
            if (_selected_item == null) {
                //  disable ();
                return;
            }
            //  enable ();
        }
    }

    public bool toggled {
        get {
            return visible;
        } set {
            visible = value;
            no_show_all = !value;
        }
    }

    public TextOptions (Akira.Window window) {
        Object (
            window: window,
            orientation: Gtk.Orientation.VERTICAL
        );
    }

    construct {
        var title_cont = new Gtk.Grid ();
        title_cont.get_style_context ().add_class ("option-panel");

        var label = new Gtk.Label (_("Typography"));
        label.halign = Gtk.Align.FILL;
        label.xalign = 0;
        label.hexpand = true;
        label.set_ellipsize (Pango.EllipsizeMode.END);
        title_cont.attach (label, 0, 0, 1, 1);

        var panel_grid = new Gtk.Grid ();
        get_style_context ().add_class ("style-panel");
        panel_grid.hexpand = true;
        panel_grid.attach (test, 0, 0, 0, 1);
        attach (title_cont, 0, 0, 1, 1);
        attach (panel_grid, 0, 1, 1, 1);

        show_all ();
        bind_signals ();
    }


    private void bind_signals () {
        toggled = false;
        window.event_bus.selected_items_list_changed.connect (on_selected_items_list_changed);
    }

    private void on_selected_items_list_changed (List<Lib.Items.CanvasItem> selected_items) {
        if (selected_items.length () == 0 || selected_items.length () > 1) {
            selected_item = null;
            toggled = false;
            return;
        }

        if (!(selected_items.nth_data (0) is Akira.Lib.Items.CanvasText)) {
            selected_item = null;
            toggled = false;
            return;
        }

        if (selected_item == null || selected_item != selected_items.nth_data (0)) {
            toggled = true;
            selected_item = (Akira.Lib.Items.CanvasText) selected_items.nth_data (0);
        }
    }
}

[ghost]

Still in the beginning

[ghost]

But first I will add these properties to the CanvasText

• underline
• bold
• italic
• letter spacing
• line height
  and the rest

[Alecaddd]

That's a good start, but before doing something too advanced wait for a detailed mock-up of that section.
I'll work on it during the week.

I think the priority right now is figuring out how to implement the "double click to make the text editable".
That's basically the basic and most important feature of it all. Without it, adding styling or UI is useless.

The technical implementation of that needs to be pretty solid otherwise we risk some serious performance issues.

[ghost]

@Alecaddd I am just having a problem for triggering the double click event

[Alecaddd]

Here's the mock-up for the typography panel.
Let's keep it very simple for a first implementation and focus on good usability.

The font picker
The font picker needs to be an editable menulist, where on the left you can write the name of the font, and on the right you can open a dropdown to scroll through your system fonts and pick one.
No dialog opening as that's awful in terms of usability.

The font style picker
This is a menulist that gets updated based on the variations available from the selected font.
So, some fonts might have only the "regular" variation, while others might have "Medium", "Bold", "italic", etc.
We shouldn't force Bold and Italic via buttons as those might not be natively available from the font family, and we don't want to do what Photoshop did since the beginning, which is forcing a fake font variation.

The textarea size
I don't remember the name of this Gtk Widget but it's pretty common. Let's use this to allow users switching between Auto size and Fixed size.

• Auto size: the width and height of the Text Area grows together with the font, so the text never goes on another line until the user hits Return.
• Fixed size: the user resizes and decides the limits of the text area, meaning the text will wrap inside that available area, and be cut out (masked) if it doesn't fit.

The alignment buttons are pretty self explanatory.