Vscode Luna Paint Versions Save

Features

Full TGA support (#131)

TGA files can now be saved as the codec library @lunapaint/tga-codec now supports encoding TGA files.

Save as to change file type

Save as will now save the image using the matching type of the file.

Features

Readonly TGA support (#131)

The new TGA decoder library @lunapaint/tga-codec is published on npm and open sourced. Much like @lunapaint/png-codec, the goal was to build a fast and correct typescript-based library that runs in both browser or node contexts. It has a readable codebase and provides advanced insights into what went wrong when the file fails to decode.

This means Luna Paint can now open TGA files (not save yet) and also inspect them via the luna.file.inspectImageFile command to view metadata, warnings, etc.

While building this library I noticed that the decoding of TGA files is somewhat inconsistent across image editors due to the specification not being clear on certain things, to combat this @lunapaint/tga-codec uses what seems to be the most correct approach. One example of this is some images may open "correctly" in some editors but completely transparent in others, a novel feature I added was the ability to detect this "ambiguous alpha channel" and open it with a warning. The idea is if you have a warning in your image file you should probably re-save it in order to improve compatibility of the file.

The next steps for @lunapaint/tga-codec is to write the encoder side of the library which will allow saving of TGA files as well as improving test coverage of the decoder by creating a comprehensive test suite.

Other enhancements

• luna.defaultTool setting (#91).

UX / Polish

• With the introduction of the new luna.defaultTool setting the default has changed to the selection tool which seems more appropriate. To get the old behavior add this to your settings: "luna.defaultTool": "pencil".

Bug fixes

• Fix left/right keys moving shapes/lines/etc. when a text input is focused (#89).
• Text inputs are now validated and corrected on focus out (#89).
• The luna.file.inspectImageFile command now works on the active file, thanks to a new vscode API.

Features

New web native PNG encoder (#125)

In v0.13 @lunapaint/png-codec was open sourced as a new TS-based PNG decoder, this release saw the development of the encoding part of the library. Here are the main things that means for Luna Paint:

• Smaller saved .png files: The encoder selects a color depth based on the range of colors used, reducing color size significantly in some cases.
• Hue information retained when saving transparent pixels: The previous canvas-based method of saving files resulted in the loss of hue precision, depending on the image this could be frustrating when doing further edits.
• Control over metadata: Luna Paint doesn't do much with metadata currently but it opens the door for future possibilities of advanced control over the file's metadata.
• Improved .ico files: Icon files 128x128 and larger are typically encoded as png, this will also benefit from the new PNG encoding.

UX / Polish

• Readonly editors now open without any windows showing by default, except .ico files which will show only the images window (#132).
• The layers context menu now uses a separator to split up the items (#128).

Documentation

• Added a section to the Customization wiki on working with Image Preview as the default image editor (#136).

Engineering

• Playwright tests now fail when any page error occurs, this helps catch edge case errors that were unnoticed before.

Bug fixes

• Fix handling image change events outside of workspace (#105).
• Improve error when .ico file signature isn't correct (#137).
• Hide commands from the command palette that aren't useful when the editor is focused (#140).
• Fix an exception that could occur when loading a new image into the webview while a tool change was in progress.
• Prevent layer/minimap previews from being generated when the target size matches the image dimensions.
• Line tool: The angle in the status bar is now restored after hot exit.

Features

New web native PNG decoder (#122)

The bulk of the time this release was spent creating a new PNG decoder library and making it very polished and tested (currently ~3500 tests and > 97% coverage). The new library @lunapaint/png-codec is published on npm and is the first core component in Luna Paint to be open sourced! The goal was to build a fast and correct typescript-based library that runs in both browser or node contexts. It has a readable codebase and provides advanced insights into what went wrong when the file fails to decode.

The main wins this brings to Luna Paint so far are:

• Loading PNGs will now retain their hue information even when completely transparent.
• PNGs are now loaded without gamma correction applied.
• Inspect image file and the warning/error status bar item described below.

The next steps for @lunapaint/png-codec is to write the encoder side of the library which will allow ultimate control for Luna Paint (and the user) over how the PNG will be saved.

Inspect image file

There's a new context menu in the explorer for inspecting low level details of image files for supported types. Currently only PNG is supported but this will be expanded as more progress is made on format decoders.

Details provided include:

• Dimensions and other details included in the image header
• Metadata extracted from PNG chunks
• Warnings/errors encountered
• Raw chunk details
• The RGBA image data as a JSON array

Warnings/error status bar item

When errors or warnings are encountered during decoding, a new status bar item will show when file inspection is supported. A notification was considered for this but the status bar items were determined to be just as intuitive as a notification but less annoying.

Resize image and canvas by percentage (#130)

The Image: Resize and Image: Resize Canvas commands now support percentages, including in the shorthand so the following formats are now possible: w, w%, wxh, w%xh, wxh%

UX / Polish

• When opening the image editor via the explorer, the editor is no longer focused by default. This was done initially to get keybindings working immediately, but caused problems if you actually wanted focus in the editor to copy, renamed, etc. The right way to get focus into the editor is to double click the explorer entry or to set the "workbench.list.openMode": "singleClick" setting.
• The sub-categories in command names (eg. File > , Image >) have now moved into the main category (eg. Luna > File, Luna > Image). This allows commands to show up nicely in context menus in addition to keeping the sub-category idea in the command palette.
• The Image: Canvas Size command has been renamed to Image: Resize Canvas to improve discoverability in the command palette.
• In the Layers window, F2 (Enter on macOS) can now be used to rename the active layer.

Documentation

• The extension readme got a refresh, it now has short and sweet tools and commands sections and points to the walkthrough for how to learn the specifics.
• New getting started pages:
  • Inspect image file

Bug Fixes

• Fix cmd+c, cmd+a, etc. on macOS not working properly in text fields (#127).
• A 0 byte image will now attempt to be opened instead of the default "empty" image opening.
• Fix the open documentation command to open the walkthrough instead of the VS Code Get Started page.
• Crop to selection will now clamp the selection to the image bounds.
• Status bar warnings will now appear to the left of the image mime type.
• Fix an error when finishing a selection completely outside of the image canvas.
• Fix the flip horizontal command cutting out the middle column when run on an image with odd width.

Features

Colors window

A new "Colors Window" has been added which contains a large HSV selector:

Details and more sliders can be shown by clicking the > button at the top of the window:

Here are some of the features/changes in the new window:

• Color channels are explained in tooltips when hovered.
• HSV is "supported natively", meaning there should be no loss of precision which could happen when converting between HSV and RGB.
• The luna.palette.swapColors command has been changed to luna.color.swapColors.

Slimmed down palette window

With the introduction of the new Colors Windows, the Palette Window has been slimmed down significantly. It is no longer visible by default but can be toggled by triggering the Toggle Palette Window command.

Shape tool: Diamond

The shape tool can now also draw a diamond:

UX / Polish

• Merge layer down and move layer up/down buttons are now disabled when the action isn't possible.
• Only show commands that require a selection (crop, erase, etc.) from the command palette when there is an active selection.

Documentation

• New getting started pages:
  • Colors window

Bug Fixes

• Fixed images not refreshing when a change happened outside the editor (#105).
• Fix case where the image could become locked when switching tools and using the new tool quickly, this was typically only reproducible on slower hardware.
• Prevent context menu from showing on right click unless an the target was an input field.
• Fix an issue where complex history entries could be played in reverse order.
• Added a content security policy back for the web extension since an issue was fixed in VS Code core.
• Fixed issue where layer previews would be generated for already deleted layers.
• Prevent commands crop to selection and expand canvas to selection from creating error history entries when run without a selection.
• Fix touch actions not working after a short period (#112).
• Line tool
  • Fix move handles showing up before a line is drawn.
• Eraser and color picker tools
  • Fix the pixel outline after zooming the canvas.
• Move selection, move pixels and text tools
  • Fix handles sometimes skipping cells when dragged.
  • The cell underneath the dragged handle will now always be included in the new rectangle.
  • Flipping the range will no longer allow the invalid height or width of 0 pixels.
• Ellipse tool
  • A 1x1 ellipse will now be rendered properly.
  • Fix non-smooth rendering when outline > 1.

Features

Blend mode support in fill tool

Full blend mode support now works for the fill tool. With this you can now replace the pixels without blending them for example.

Engineering

• esbuild is now used to improve some bundling.

Bug Fixes

• Fix creating new images or icons inside windows that don't have a folder opened (#107).
• Fix the import from clipboard command failing to read the clipboard.
• Keybindings should now work immediately without clicking on a newly opened image.

Features

Message on copy

A message is now shown to confirm when a selection is copied and what the dimensions of copied image are. This makes it more obvious what the dimensions are and also helps confirm that the copy action actually did occur, in case there was some keybinding issue with VS Code.

Engineering

A lot of effort when into building out an integration test suite using @playwright/test over the past 2 months which has fixed many minor issues and will boost reliability and prevent future regressions.

Bug Fixes

• Fix notification wrongly showing up during save on github.dev (#96).
• Fixed several race conditions when performing actions quickly after loading an image or using a new tool.
• Fix an issue where the red channel would be cleared when drawing some non-smooth shapes.
• Prevent unchecking shape type and text alignment options.
• Line tool
  • Prevent a brush size of 0 when resizing using the size handle.
  • Don't show angle preview when holding shift and moving a line since it cannot be changed.
  • Update angle in status bar immediately when dragging one of the points.

Features

github.dev and restored Codespaces support

GitHub now features a lightweight serverless text editor called github.dev that compliments the compute-backed Codespaces. This release is out a little early to ship support for github.dev and restore Codespaces support which broken recently in new browser versions that restricted the use of SharedArrayBuffer.

This means you can edit images in a GitHub repo for free using your browser! Just hit . on your repo and enable settings sync to synchronize your extensions.

A decent amount of changes were needed to make this support work so as always let me know if you hit problems.

Color at Pointer (#86)

There is a new status bar item that will show the color under the cursor position, it updates when paused briefly on a pixel to reduce visual noise.

Clicking on the status bar item will toggle between sampling the current layer of all layers, behind the scenes this will toggle the new luna.statusBar.pointerColor setting.

Auto save warning

There is a new warning that appears in the status bar when auto save is using the afterDelay mode as this can cause frames to drop while drawing, leading to jagged lines.

While it uses the warning color to grab your attention, it was a priority to make this as unobtrusive as possible. You can left click on the item to dismiss it for this session or right click to hide it permanently.

Other enhancements

• When pasting an image, if the selection dimensions match the pasted image's dimensions it will now be placed where the selection was.
• The primary and secondary colors are now synced across all image documents (#82).

Performance Improvements

• Reduce amount of memory used when drawing rectangles.

Documentation

• Several grammar improvements #88.

Bug Fixes

• Fix line and shape tools not saving most recent history entry on hot exit.
• Fix layer actions like Invert and Rotate correctly applying to a selection that's being moved.
• The triangle shape is now correctly mirrored when flipped on its y axis.
• Errors when loading images such as being unable to decode the image are now surfaced in the canvas.
• Retain the selection after Layer > Invert is called.
• Ensure minimap viewport cannot go outside of the minimap window.
• Fix move pixels finish result when the x axis is flipped

Bug Fixes

• Fix hot exit not working.
• Fix case where image could be zoomed out all the way when opening.

Features

Text tool (#48)

A new text tool has been added, allowing flexible drawing of text with the following features:

• Options: font family, size, weight, italics, vertical and horizontal alignment, blend mode.
• Shift aspect lock support.
• Alt mirroring support.
• Arrow move support.

Shape tool: Right-angle triangle

The shape tool can now also draw a right-angle triangle:

Other enhancements

• The outline color now uses the focus color, this should provide good contrast in most situations. When it doesn't, the theme can be changed for better contrast.
• New command: luna.selection.eraseKeepSelection allows erasing the selection without deselecting.

Performance Improvements

• Significantly reduced memory and cpu usage when drawing shapes.

Documentation

• New getting started pages
  • Text tool

Bug Fixes

• Fix blurriness on high dpi displays (#32).
• Fix rasterization of triangles where the x axis is flipped.
• Images imported from the clipboard that have hot exit disabled will now store the clipboard data at that time so it will restore to the initial state when luna.retainContextWhenHidden is false.
• Improve status bar overflow behavior, all items should now be accessible in narrow windows.
• Shape layers will now respect the selection when restored by hot exit.
• When import from clipboard is run when only non-image data is in the clipboard will now fallback to a new image with default dimensions.
• Improve 1px outlines when drawing shapes with the "Fill and outline" style.
• Round non-snapped info when drawing a shape to 2 decimal places.
• Palette color state is now restored for all tools on hot exit.