gregjohnson2017 / tabula-editor

An image editor built from scratch with OpenGL in Go.

tabula-editor

An image editor built from scratch with OpenGL in Go.

Installation:

You can clone it and build it or go get it.

You can skip many of the dependencies for SDL by cloning and adding the -tags static build flag, e.g.:

go build -v -tags static -ldflags "-s -w"

Non-static builds require the dependencies listed below.

Dependencies:

Linux:

sudo apt install libsdl2-dev

Windows:

Install msys2.

Then, start the msys2 shell (not MinGW) and run

pacman -Syu

to get up to date and then

pacman -S mingw-w64-x86_64-SDL2 mingw-w64-x86_64-gcc

to install gcc and SDL2.

After everything is finished, add the mingw bin to your PATH, e.g., C:\msys64\mingw64\bin.

tabula-editor's Issues

Improve font face metrics by using x/image/font instead of golang/freetype

This allows us to rework how the y component of the origin point for vertical text alignment is calculated, and remove the mapStringWithBearing function

Remove SDL gfx dependency

Also make sure to update the ReadMe and GitHub Actions workflows.
Currently, sdl2-gfx is only being used for an FPS manager. If we can figure out exactly what that does, we can make it in Go without needing to reach into C, after which we can remove the dependency.

Selection tool misalignment on new file

Select tool messed up after opening a new image with different dimensions

Refactor drop down menus

Add Layer interface

This interface would be on the side and show which layers you have open, make different layers hidden/visible. This might be the beginning of a more generic side panel implementation that could be used for other new features

GIMP example:

Remove SDL img dependency

Implement writing/saving current texture data in OpenGL back into an image file of various formats

Menu bar closing conditions

Menu bar doesn't close when clicking outside it, unfocusing the window, or selecting a menu item. Also, if you drag your mouse away from a drop down menu list like so:

You can access other elements of the menu bar and the first one that was opened stays open:

Add window operations in-frame as buttons; remove SDL border

Basically make it like VS code:

Texture problems while zoomed out

Minor bug, but some pixels appear to be stretched, shrinked or wrapped. The bug is hard to reproduce - I've seen it after adding a couple images, and then doing lots of zooming, dragging and panning. Example:

Add special selection tools

These would include rectangular select, fuzzy/magic select, any other ideas

Add right click menus

Gimp example:

We probably want to do this with out existing menu system

Pixel Selection tool causes panic

The pixel coordinates are not out of an acceptable range, but it still causes a panic.

Here is the line that the check failed at.

Remove second 0-coordinate row and column

Hovering mouse above and to the left of the 0 row/column shows another 0 row/column

Layer outlines

Add layer outlines and hide layer content when outside the canvas, like in GIMP:

Create a cool icon for our editor

And possibly render it alongside the menu bar at the top? SVG or PNG?

Selection outline not working on first image load

The first time you load an image, either by passing it in as an argument when you start, or without an argument when you first select an image through the file dialog, the selection outlining does not work. After clicking open to reload an image it works.

Add golangci-lint as lint tool and fix or hide all the warnings

This should help us prevent some cringe and potentially buggy code.

Document Windows dependencies

Add menu list dividers and arrows

Add visual dividers to menu lists for clarity and nice appearance, like in VS code. Also add arrows to indicate that a button opens a sub menu list

Implement Undo/Redo feature

Any good editor should have undo and redo commands. This will come with some careful design considerations.

Add clipboard support

Ctrl-v will open the image that is in the clipboard in the editor.
Ctrl-c will copy either the selected pixels or the contents of the editor, if no pixels are selected, into the clipboard.

Add pixel selection interpolation

We don't want there to be gaps in selection if you are clicking and dragging. So, we need to create a line between the last drag point and the current drag point and fill that selection in.
This will be needed for the coloring, too, so the function should be generic enough to work for that.

Add selection dragging

Selection dragging will be one of many difficult features to implement that interact with the selection result from the selection tool. Here is visual description to think about the challenges:

Implement file saving dialog for linux in util_linux.go

Add a color picker interface

Colors need to be picked, and we need an interface to pick em

Add overwrite file dialog to saving on Windows

Add custom cursors on hover

Like this:

Menu button click registration

When interacting with menu buttons, sometimes a button registers multiple clicks. This can be reproduced consistently by holding a click on the "File" button in the menu bar and then without releasing the click, just drag the mouse down over the "Open" menu list entry. For me it calls the open function ~3 times. Furthermore, it shouldn't be activated at all until the button itself receives a left mouse down and then left mouse up.

Lower OpenGL version requirement to minimum working version

Use more performant logging library

I just noticed this library: https://github.com/uber-go/zap

Notably, it's a few times faster than standard library and has "structured logging" support. There is an even faster, buffered version that would be even more useful for large amounts of logging in frequently used functions, like in the case of performance logging.

There are also encoder configurations, by default production and development.

If logging is super fast, then we can just always log (except performance maybe) to a file somewhere, which would be useful for catching random crashes.

Add loggers for debugging & performance, and add corresponding CLI flags

It would be nice to have the performance of a bunch of specific operations measured, such that if we need to improve performance, it is easy to figure out what's taking the most time.
Having debugging logging can help document the code in a sense, along with allowing us to debug without using breakpoints and print statements.
The log package in the standard library makes it easy to create multiple logger types and enable/disable them, removing the need for excessive conditions around log statements.

Add write font to file function

There is a section of commented code left in the font loading function that writes the loaded font texture to an image for viewing. I think it's better to have this logically separated into its own function so myself and others know what it does, rather than having some random block of unrelated commented code sitting in a function.

Add non-functional file saving dialog for Linux just to build

Pixel selection zoom bug

Zooming in too far in larger images (correlation between larger images and how far you need to zoom in to observe the bug) makes selection outlines go haywire (also appears to be pixel misaligned too)

Fix OpenGL object leaks

Mix in checker shader blends texture behind

Example:

The checker shader in the end should only be in the canvas - the alpha parts of layers should simply be transparent, so one doesn't overlap another

Split code and logic into separate packages

Currently, it's hard to separate anything, because of cyclical imports. So, I need to separate out the current types and functions in order to allow smaller package in new code we write.

Align text based on font information, not number of pixels

Use markup language for menu bars

The code for menu bar definitions looks almost like a markup language already, and as the menu bars get more complicated, it would make it more readable.

Compute selection outline in shader

This is a somewhat complicated issue, and may require the use of other shader types than vertex/fragment.
If we can compute selection outlines in the shader, we can better control the performance, because we could forgo computing all the selection lines on all the selected pixels on the CPU.

Customizable Dialogs

We need dialog prompts for things like: Edit canvas, enter width and height. It would need to have fields where the user can enter values, and cancel/confirm buttons.

Selection outline edge cases, not appearing

Selection outline not appearing on certain edges of the image (bottom and left?)

Implement GitHub Actions workflow for building and releasing

Selection tool very slow for larger images

When opening large images, such as those taken by expensive cameras, reaching into 10,000 by 10,000 pixels, it's really slow.
Our current implementation uses a map to keep track of which pixels are currently in use. The problem is that such an image needs 100 MB of space if using a single byte to store that information, assuming no overhead, like in an array.
Perhaps we should consider rectangle selections that don't save all that information, at least as an alternative in big images.

Remove SDL2 build dependency

As of 0.4.0, github.com/veandco/go-sdl2 supports static compilation using the -tags static build flag. (for module mode, which we are using.. has been available since 0.3.0)
This allows us to build without having SDL2 installed at all.

Separate graphics library into external module

This will allow us to use it in other code bases.