Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Missing tools and adjustments

オープン
#2 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
機能追加
明瞭さ
説明が足りない
活発さ
活発
技術スタック
typescript

調査の方向性

まず、未チェックのツールまたは調整項目を1つ選び、それを焦点を絞った issue に分割してください。この包括的な issue には、複数の独立した変更が列挙されています。アノテーション作業では lib/editor/state.ts を読み、buildAnnotationNode() を確認してください。調整では lib/editor/filters.ts と AdjustPanel を調べてください。テキスト関連の作業には render.ts と TextOverlay.vue も関係し、done は選択した項目の焦点を絞った issue によって定義されるべきです。

索引モデルが issue の本文から書いたものです。

説明

status: confirmed type: enhancement

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.

主要言語
TypeScript
スター
2
フォーク
0
平均マージ
3日 5時間
マージ済み PR(30日)
3

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nextcloud-libraries/nextcloud-image-editor のほかの issue

nextcloud-libraries/nextcloud-image-editor の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。