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

Timeline improvements for smallest frames and zooming

オープン
  • 何か問題がありますか？
#213 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@BaronAWC がすでに取り組んでいます。

2026年10月11日 から。

  • #247 @BaronAWC による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
52/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
javascript
領域
frontend

調査の方向性

ファイルやテストは指定されていません。まず、JavaScript コード内で timeline、frame、tween、zoom の操作に関するエントリポイントを特定し、次に最小のズームレベルで列挙された問題を再現してください。通常の frame 選択、伸長、tween 操作、timeline ナビゲーションを妨げることなく、番号付きの7つの挙動に対処できれば完了です。

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

説明

enhancement

Is your feature request related to a problem? Please describe.
There are a variety of things about the timeline that I think we can improve, particularly when it is zoomed out.

  1. The plus sign overflows the thin frame.
Image
  1. The frame numbers overflow to the left of the frame they're at.
Image
  1. The frame bubbles are still a bit too big.
Image
  1. The tween keyframe is weirdly circular (probably corner radius shenanigans, I'm guessing), and the arrow start/end are very far from the diamonds.
Image
  1. Dragging the tween diamond takes precedence over stretching the frame. This makes it very hard to stretch the frame. Also, the tween diamond's preview shadow thingy is larger than it should be.

https://github.com/user-attachments/assets/34ccdf1f-4c1f-4c0b-8c53-f577e580dd66

  1. We made it so that for a zoomed-enough-out timeline, a frame can only be stretched if it is selected. I think the current implementation might be a bit too strict. If a frame is stretched, the hover target is definitely good enough to allow stretching the frame.
Image
  1. When zooming in and out, you often lose your place in the timeline because the stretch's origin is at the very left. (So, zooming in makes you go backwards in frames as everything gets pushed right)

Describe the solution you'd like
I think it'd be reasonable to slightly increase the minimum frame width, to give just a bit more breathing room.

For everything else:

  1. Remove (or shrink) the plus sign if the frame is too thin. The highlight might be good enough, so removing might be okay.
  2. Force the frame number to sit to the right of the line. (But let's be careful that it doesn't abruptly snap when you hit a threshold)
  3. Shrink the bubbles.
  4. Shrink the corner radius as the keyframe gets smaller, and shrink the margin for the arrows.
  5. Favor stretching the frame over selecting/dragging the tween.
  6. If a frame is a certain number of pixels wide, the frame is actively selected, or a tween on the frame is actively selected, the frame can be stretched.
  7. Stretch relative to the middle of the timeline (or maybe the cursor, or maybe maybe the playhead if it's visible - I don't know what feels good).
主要言語
JavaScript
スター
53
フォーク
22
平均マージ
2日 10時間
マージ済み PR（30日）
12

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

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

Candlestickers/Candlestick のほかの issue

Candlestickers/Candlestick の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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