ShaderEdittor Needs An Undo, And A Redo Button

[realrufans]

Components

My suggestion will require two buttons to be added at the top of the Editor's interface.

Proposal

There are some basic, or necessary features an app needs to have. Although, it doesn't mean every app out there must have every basic feature, but at least have the basic ones that are related, or needed to give better, or good user experience.

A few days ago, I had a lot of fun using ShaderEdittor. While using the app as an editor for my shaders code, there are some options I found missing, as these options are;

• Ability to undo
• Ability to redo the undone.

Effect of not having those features

Currently, while typing in the editor, and the user mistakenly deletes a line of their vital codes, the action can't be undone because there is no such key to undo the action. It'd be nice to have these two options implemented.
The two opinions should act similar to the undo, and redo we see on other apps. Here's a brief definition;

• Undo: Erases the last change done to the codes. reverting it to an older state.

• Redo: The opposite of undo is to redo. The redo command reverses the undo action.

One more request

Currently, the top of Editor's interface looks occupied as you can see from the image below.

So, I was wondering if the available icons can be made smaller? So as to have space for Redo, and Undo option. But, if making the icons smaller isn't possible, then I suggest the removal of the Tab button.

I understand that the tab button helps the user to modify their codes for easy readability. But, I believe that the space bar on the user's keypad can also be used to create tabs. So, the Redo an undo option is more Important than the Tab option.

Mockups / Examples

The first image below shows the Tab button, and how occupied the options are. The second screenshot shows the replacement of the tab button with the suggested options.

How can this be done?

I have taken the time to find the sample code. And, I am glad to provide this awesome code by zeleven.

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button redoBtn = (Button) findViewById(R.id.redo);
        Button undoBtn = (Button) findViewById(R.id.undo);
        EditText editText = (EditText) findViewById(R.id.edittext);
      
        // pass edittext object to TextViewUndoRedo class
        TextViewUndoRedo helper = new TextViewUndoRedo(edittext);
        
        // call the method from TextViewUndoRedo class
        redoBtn.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            helper.redo(); // perform redo
          }
        });
        undoBtn.setOnClickLisener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
            helper.undo(); // perform undo
          }
        });
    }
}

The complete codes can be found Here.

Benefits of Undo & Redo button

I would love to generally state the overview importance of Redo and undo button over the Tab option.

• If the Tab option isn't available, users will be able to create tabs will space keypad.
• If the Redo, and undo option is missing, users who might have mistakenly cleared their codes would have to start typing all over again.

[markusfisch]

Wow! That must be the most detailed feature request I've ever got! 😄Thanks a lot for making this! 👍 Very much appreciated!

I didn't know of @Zeleven's TextViewUndoRedo. Plugged it in and it works quite well!

About the UI, or rather the tab button. Tabs are not spaces and you cannot insert tab characters (ASCII 9) with the space bar. You may insert a lot of spaces (ASCII 32) to get to the depth of indent you want but that isn't a tab character. A tab character is designed to give one level of indent from the left document edge. It's a precise and semantic way of defining an indent. That said, it's of course a matter of personal taste if one likes to use the character designed to define indent or a lot of spaces to build an indent manually. Personally, I think it's much easier to use a tab character in the editor of Shader Editor because editing on a mobile device is hard enough already. It's all too easy to insert the wrong number of spaces for an indent and (to me) it would be just a pain having to build an indent by hammering the space bar. So I don't like to remove that button because (at least) I would miss it very much.

But you're absolutely right with the crowded Toolbar and I don't want to add Undo and Redo as menu items because that would make them inaccessible. Instead, I'm playing with the idea of a second tool bar below the Toolbar providing the most used tools. It'd cost some screen space what may post a problem when the keyboard is visible. Especially in landscape orientation. So I'm still searching for ideas on how to add those buttons in the best possible way.

[realrufans]

You're right about this 😂
build an indent by hammering the space bar.

[realrufans]

Btw, can the feature requested be on a droo down?

Maybe something similar to that ?

[markusfisch]

No, a drop down would mean two taps. That's too much. Undo/Redo should always be available with just a tap.

[fekga]

I tried out different editors for shaders and for other code related stuff and what they have done is that the keyboard was modified so it included some special keys (and also a lot of non usable characters were removed). Maybe this will be a good option here too.

[realrufans]

Hey @fekga hmm... What you said sounds familiar.
I have a browser that automatically adds some function buttons.
Maybe something like this

[ssartell]

Any update on this feature request?

Regarding the placement, I would say the available buttons should switch based on whether you're viewing the code or the shader. I don't need the tab, undo, or redo buttons when I'm looking at the shader without code. Likewise, if I'm looking at the code, I don't really need the resolution switcher.

[markusfisch]

Well, I tried the idea of an additional bar at the bottom of the screen in a local branch but somehow it didn't work too well. It reduced the code area too much and really didn't look very good. At least in that first, very basic try. So I need to put more work into that.

But I have to say that I really like your suggestion to switch buttons according to context! 👍I will definitely try this!

[markusfisch]

Implemented in cd69a0d

Available from Version 2.17.0 and should become available anytime soon (it's already available in the Beta channel: https://play.google.com/apps/testing/de.markusfisch.android.shadereditor).

At the end I only added two more menu entries. I've tried hiding some of the buttons as @ssartell was suggesting but it didn't work too well either. For example, there's a setting that allows a user to run the shader not in the background but in another activity/task. In that case, I can't hide the resolution switcher because there's no hide code button 😬

But this is probably not the end of the story 😉 I still like the idea of a bottom bar containing all editor related actions ...