Improve create/remove the time-tag in the lyric editor.

[andy840119]

Create/modify time-tag mode is still a mess 🥲
What's the main expectation in this mode:

• Able to create/remove the time-tag at the start/end of the char index.

另外，會花重點在優化這些操作的流程:

• 左手 keyboard 去新增/刪除 time-tag，右手使用方向鍵移動光標
• 左手 keyboard 去新增/刪除 time-tag，右手使用滑鼠移動光標

對初次使用的人/沒有鍵盤的人可能會有這種操作，但先不優化

• 使用滑鼠估定光標後，用光標上面的 UI 去新增/刪除 time-tag.

[andy840119]

Shifting the time-tag might not that useful?
As i remembered, shifting time-tag might be used if found time-tag is not in the right position while recording.

[andy840119]

Removed in the #2239

[andy840119]

Guess should be better to separate the create/remove caret?

Maybe it's the properties for the creation caret:

• (Exist) Lyric
• (Exist) CharIndex
• (New) CreateState(Start or end)
• (New) CreateTimeTagAfterFocused (This property will be true if focused by index)

Maybe it's the properties for the creation caret:

• (Exist) Lyric
• (Exist) CharIndex
• (New) EraseState(None or Start or End)

[andy840119]

Should be able to click the text to create the time-tag at the same step.
Because it might be annoying if need to click for fix the caret position, and need another click for create the time-tag.

[andy840119]

Not very sure should be OK to use left-click to create the time-tag with start state.
And the right-click to create the time-tag with end state.

Same logic will be applied for the deletion if user press the "control" or "shift" to click the text index.

[andy840119]

Maybe just make it simple to implement:

• Alt + Z + caret mouse down: Create the start time-tag.
• Alt + X + caret mouse down: Create the end time-tag.
• Shift + Z + caret mouse down: Remove the start time-tag.
• Shift + X + caret mouse down: Remove the end time-tag.

Also, press Alt + Z Can create the start time-tag in the focused caret position.

Only use one caret type for create/remove is enough.

[andy840119]

We should create another section in the right side to show:

• The current mode (Creation/None/Deletion) by keyboard behavior.
• Make the hint for the current mode.
• Create or remove time-tag success (triggered by mouse click or by keyboard.)

Also, keyboard action and create/remove action should be handled by this section
Drawable caret should call the change handler only if user press the create/remove UI button.

目前比較困難的點:

• 如果是使用鍵盤移動光標的 user ，會希望按下 Alt + Z 就能觸發 create time-tag
• 針對使用滑鼠移動光標的 user，會希望按住 Alt + Z 後，還需要點到 lyric char index 後才會觸發

在按下 Alt + Z 時，要如何判斷是哪一個模式?

• 透過 user preference? (maybe switch button in the UI)
• 透過最後改變的是不是 hover caret position?
• 按下 Z 可以直接 create time-tag，按下 Alt + Z 則會另外切到另外一種模式，這種模式會明確表示需要按下鼠標後才會新增/刪除 time-tag.

[andy840119]

The drawable caret should have those UIs:

• Show all available time-tags in the same caret index.
• Button to create the time-tag.
• Button to remove the exist time-tag. User able to choice which time-tag want to remove if have multiple

[andy840119]

Note:
Should be able to get the start/end time-tags in the caret position.

[andy840119]

Implemented in the #2227