nextcloud-libraries / nextcloud-libraries/nextcloud-image-editor

Missing tools and adjustments

Open
#2 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

status: confirmed type: enhancement
Dominant language
TypeScript
Stars
2
Forks
0
Avg merge
1h 46m
Merged PRs (30d)
58

Description

Collected while auditing the library against what the editor it replaces offered. Each of these is independent; split one off into its own issue when it gets picked up.

Tools
  • Straight line (the arrow tool without the head) — #8
  • Eraser, to take back part of a freehand stroke
  • Multi-select, so several annotations can be moved or deleted together
  • Copy and paste of annotations
  • Per-annotation opacity
  • Text outline, so a caption stays readable over a busy photo — #23
  • Text background, the other way of solving the same problem — #24
  • Font family — #25
  • Text alignment — #29
  • Freehand redaction; elliptical is split out into #28
  • Crop to exact pixel dimensions, and a custom aspect ratio input
Adjustments
  • Exposure — #7
  • Temperature and tint — #7
  • Sharpen — #7
  • Highlights and shadows — #21
  • Vignette — #21
Notes

The annotation types live in lib/editor/state.ts and are rendered in buildAnnotationNode(); a new one needs an entry in the rotate and flip mapping functions there, which is where the coordinate work is. Adjustments are cheaper: a custom filter in lib/editor/filters.ts plus a slider in AdjustPanel.

Text styling was one line here and should not have been: it went out as four
PRs, one per part. I claimed here that alignment needed a text box with a
width behind it, because Konva only honours align on a node that has one.
That was wrong. A block's width is identical whichever way it is aligned, so
the width comparison I based it on could never have shown anything. Measuring
the drawn pixels instead, Konva does align lines inside the block's own width,
and alignment came out the same shape as the other three: a state field, a
render line and a control.

The font is hardcoded in two places that have to agree for the editing overlay
to match what is drawn, render.ts and TextOverlay.vue. Whatever makes it
per-annotation has to thread through both. The trap is the export: if a face
is not loaded when the export canvas renders, Konva falls back silently and
the saved image differs from what was on screen, with no error.

Two things worth knowing from the first batch:

  • The line tool was almost free because a two-point annotation shares its coordinate handling with freehand and arrows. An eraser or a freehand redaction will not be: both need new geometry rather than a new case in an existing switch.
  • Adjustments that scale channels per pixel should join the existing tone filter rather than adding a pass of their own, since each pass is a full walk over the pixels. Sharpen is the exception: it reads its neighbours, so it has to be separate and it has to run last.

Corrected after the second batch, since this note sent me the wrong way:

  • Highlights and shadows did not join tone. That filter only runs when exposure, temperature or tint are set, so folding them in would mean either running it for every image or a condition covering five sliders. They share a pass with each other instead, which is the saving that mattered: they are the same operation weighted to opposite ends.
  • The vignette cannot join tone at all. It needs the row width to know where a pixel sits, so it takes PixelImage like sharpen does rather than PixelData, and it runs last for the same reason sharpen does: it works on whatever the rest produced, the preset included.

Drafted by an assistant during an audit of the library; not yet reviewed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by choosing one unchecked tool or adjustment and splitting it into a focused issue; this umbrella lists several independent changes. For annotation work, read lib/editor/state.ts and buildAnnotationNode(); for adjustments, inspect lib/editor/filters.ts and AdjustPanel. Text-related work also involves render.ts and TextOverlay.vue, and done should be defined by the selected item's focused issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.