Redesign timeline to look more like stable

packages/common/src/editor/EditorLayout.ts

@@ -1,4 +1,13 @@
-import { Axes, CompositeDrawable, dependencyLoader, EasingFunction, Invalidation, LayoutMember } from 'osucad-framework';
+import type {
+  ReadonlyDependencyContainer,
+} from 'osucad-framework';
+import {
+  Axes,
+  CompositeDrawable,
+  EasingFunction,
+  Invalidation,
+  LayoutMember,
+} from 'osucad-framework';
 import { EditorBottomBar } from './bottomBar/EditorBottomBar';
 import { EditorHeader } from './header/EditorHeader';
 import { EditorScreenContainer } from './screens/EditorScreenContainer';
@@ -10,8 +19,9 @@ export class EditorLayout extends CompositeDrawable {
     this.addLayout(this.#drawSizeBacking);
   }
 
-  @dependencyLoader()
-  [Symbol('load')]() {
+  protected override load(dependencies: ReadonlyDependencyContainer) {
+    super.load(dependencies);
+
     this.relativeSizeAxes = Axes.Both;
 
     this.internalChildren = [

packages/common/src/editor/screens/EditorScreenContainer.ts

@@ -27,6 +27,10 @@ export class EditorScreenContainer extends CompositeDrawable {
     super.load(dependencies);
 
     this.currentScreen.bindTo(this.screenManager.currentScreen);
+  }
+
+  protected override loadComplete() {
+    super.loadComplete();
 
     this.currentScreen.addOnChangeListener((screen) => {
       if (this.#currentScreenDrawable) {

packages/common/src/editor/screens/compose/ComposeScreenTimeline.ts

@@ -27,22 +27,23 @@ export class ComposeScreenTimeline extends Timeline {
     );
 
     this.addAll(
-      new Container({
-        relativeSizeAxes: Axes.X,
-        height: 10,
-        anchor: Anchor.BottomLeft,
-        origin: Anchor.BottomLeft,
-        child: new BottomAlignedTickDisplay(),
-      }),
       new Container({
         relativeSizeAxes: Axes.Both,
-        height: 0.5,
+        height: 0.65,
         anchor: Anchor.CenterLeft,
         origin: Anchor.CenterLeft,
         children: [
           this.blueprintContainer = new ComposeScreenTimelineHitObjectBlueprintContainer(),
         ],
       }),
+      new Container({
+        relativeSizeAxes: Axes.X,
+        height: 10,
+        anchor: Anchor.BottomLeft,
+        origin: Anchor.BottomLeft,
+        child: new BottomAlignedTickDisplay(),
+      }),
+
     );
 
     this.addInternal(new CurrentTimeOverlay());

packages/common/src/editor/ui/timeline/hitObjects/SliderVelocityAdjustmentPiece.ts

@@ -1,4 +1,5 @@
 import type { DragEndEvent, DragEvent, DragStartEvent, MouseDownEvent, ReadonlyDependencyContainer, TouchDownEvent, TouchUpEvent } from 'osucad-framework';
+import type { Color } from 'pixi.js';
 import type { HitObject } from '../../../../hitObjects/HitObject';
 import type { IHasSliderVelocity } from '../../../../hitObjects/IHasSliderVelocity';
 import type { TimelineHitObjectBlueprint } from './TimelineHitObjectBlueprint';
@@ -43,10 +44,10 @@ export class SliderVelocityAdjustmentPiece extends TimelineHitObjectTail {
     );
   }
 
-  protected override updateColors() {
-    super.updateColors();
+  protected override updateColor(color: Color) {
+    super.updateColor(color);
 
-    this.#longPressOutline.color = ColorUtils.lighten(this.accentColor.value, 0.5);
+    this.#longPressOutline.color = ColorUtils.lighten(this.accentColor.value, 0.25);
   }
 
   override onDragStart(e: DragStartEvent): boolean {
@@ -120,7 +121,7 @@ export class SliderVelocityAdjustmentPiece extends TimelineHitObjectTail {
     if (e.button === MouseButton.Right && this.#touchDown) {
       this.#dragFromLongPress = true;
       this.#longPressOutline.scaleTo(1.2, 300, EasingFunction.OutExpo);
-      this.#longPressOutline.fadeIn(100);
+      this.#longPressOutline.fadeTo(0.5, 100);
       return true;
     }
 

packages/common/src/editor/ui/timeline/hitObjects/TimelineHitObjectBlueprint.ts

@@ -1,19 +1,31 @@
-import type { Drawable, ReadonlyDependencyContainer } from 'osucad-framework';
+import type {
+  ReadonlyDependencyContainer,
+} from 'osucad-framework';
 import type { HitObjectLifetimeEntry } from '../../../../hitObjects/drawables/HitObjectLifetimeEntry';
 import type { HitObjectSelectionEvent } from '../../../screens/compose/HitObjectSelectionManager';
-import { Anchor, Axes, Bindable, BindableBoolean, BindableNumber, Container, FastRoundedBox, FillMode, provide, resolved } from 'osucad-framework';
+import {
+  Anchor,
+  Axes,
+  Bindable,
+  BindableBoolean,
+  BindableNumber,
+  Container,
+  FillMode,
+  provide,
+  resolved,
+} from 'osucad-framework';
 import { Color } from 'pixi.js';
 import { HitObjectList } from '../../../../beatmap/HitObjectList';
 import { UpdateHandler } from '../../../../crdt/UpdateHandler';
 import { hasComboInformation } from '../../../../hitObjects/IHasComboInformation';
 import { hasDuration } from '../../../../hitObjects/IHasDuration';
 import { hasSliderVelocity } from '../../../../hitObjects/IHasSliderVelocity';
-import { OsucadColors } from '../../../../OsucadColors';
 import { PoolableDrawableWithLifetime } from '../../../../pooling/PoolableDrawableWithLifetime';
 import { SliderRepeat } from '../../../../rulesets/osu/hitObjects/SliderRepeat';
 import { ISkinSource } from '../../../../skinning/ISkinSource';
 import { HitObjectSelectionManager } from '../../../screens/compose/HitObjectSelectionManager';
 import { Timeline } from '../Timeline';
+import { TimelinePart } from '../TimelinePart';
 import { DurationAdjustmentPiece } from './DurationAdjustmentPiece';
 import { SliderVelocityAdjustmentPiece } from './SliderVelocityAdjustmentPiece';
 import { TimelineHitObjectBody } from './TimelineHitObjectBody';
@@ -57,31 +69,22 @@ export class TimelineHitObjectBlueprint extends PoolableDrawableWithLifetime<Hit
 
   readonly indexInComboBindable = new BindableNumber(0);
 
-  protected selectionOutline!: Drawable;
+  // protected selectionOutline!: Drawable;
 
   protected override load(dependencies: ReadonlyDependencyContainer) {
     super.load(dependencies);
 
     this.addInternal(this.content = new Container({
       relativeSizeAxes: Axes.Both,
       children: [
-        this.selectionOutline = new Container({
-          relativeSizeAxes: Axes.Both,
-          padding: -2,
-          child: new FastRoundedBox({
-            relativeSizeAxes: Axes.Both,
-            cornerRadius: 100,
-            color: OsucadColors.selection,
-          }),
-        }),
         this.body = new TimelineHitObjectBody(this),
         this.#tailContainer = new Container({
           relativeSizeAxes: Axes.Both,
           fillMode: FillMode.Fit,
           anchor: Anchor.CenterRight,
           origin: Anchor.CenterRight,
         }),
-        this.#repeatContainer = new Container({
+        this.#repeatContainer = new TimelinePart().with({
           relativeSizeAxes: Axes.Both,
         }),
         this.head = new TimelineHitObjectHead(this),
@@ -90,12 +93,12 @@ export class TimelineHitObjectBlueprint extends PoolableDrawableWithLifetime<Hit
 
     this.startTimeBindable.addOnChangeListener(time => this.x = time.value);
 
-    this.selected.addOnChangeListener((selected) => {
-      if (selected.value)
-        this.selectionOutline.show();
-      else
-        this.selectionOutline.hide();
-    }, { immediate: true });
+    // this.selected.addOnChangeListener((selected) => {
+    //   if (selected.value)
+    //     this.selectionOutline.show();
+    //   else
+    //     this.selectionOutline.hide();
+    // }, { immediate: true });
 
     this.comboIndexBindable.valueChanged.addListener(this.updateComboColor, this);
     this.currentSkin.sourceChanged.addListener(this.updateComboColor, this);

packages/common/src/editor/ui/timeline/hitObjects/TimelineHitObjectBlueprintContainer.ts

@@ -3,6 +3,7 @@ import type { HitObject } from '../../../../hitObjects/HitObject';
 import { Axes, Bindable, dependencyLoader, DrawablePool, LoadState, resolved } from 'osucad-framework';
 import { IBeatmap } from '../../../../beatmap/IBeatmap';
 import { HitObjectLifetimeEntry } from '../../../../hitObjects/drawables/HitObjectLifetimeEntry';
+import { zipWithNext } from '../../../../utils/arrayUtils';
 import { TimelineBlueprintContainer } from '../TimelineBlueprintContainer';
 import { TimelineHitObjectBlueprint } from './TimelineHitObjectBlueprint';
 
@@ -58,6 +59,8 @@ export class TimelineHitObjectBlueprintContainer extends TimelineBlueprintContai
   }
 
   addHitObject(hitObject: HitObject) {
+    if (hitObject.transient)
+      return;
     this.#addEntry(new TimelineHitObjectLifetimeEntry(hitObject));
   }
 
@@ -134,4 +137,19 @@ export class TimelineHitObjectBlueprintContainer extends TimelineBlueprintContai
 
     return super.buildNonPositionalInputQueue(queue, allowBlocking);
   }
+
+  override updateAfterChildren() {
+    super.updateAfterChildren();
+
+    let stackHeight = 0;
+
+    for (const [current, last] of zipWithNext(this.blueprintContainer.content.aliveInternalChildren as TimelineHitObjectBlueprint[])) {
+      if (current.hitObject!.startTime < last.hitObject!.endTime)
+        stackHeight++;
+      else
+        stackHeight = 0;
+
+      current.y = -stackHeight * 8;
+    }
+  }
 }

packages/common/src/editor/ui/timeline/hitObjects/TimelineHitObjectBody.ts

@@ -2,7 +2,7 @@ import type { DragEndEvent, DragEvent, DragStartEvent, MouseDownEvent, ReadonlyD
 import type { Color } from 'pixi.js';
 import type { HitObject } from '../../../../hitObjects/HitObject';
 import type { TimelineHitObjectBlueprint } from './TimelineHitObjectBlueprint';
-import { Axes, Bindable, ColorUtils, CompositeDrawable, FastRoundedBox, MouseButton, resolved } from 'osucad-framework';
+import { Axes, Bindable, CompositeDrawable, FastRoundedBox, MouseButton, resolved } from 'osucad-framework';
 import { HitObjectList } from '../../../../beatmap/HitObjectList';
 import { UpdateHandler } from '../../../../crdt/UpdateHandler';
 import { EditorClock } from '../../../EditorClock';
@@ -30,6 +30,7 @@ export class TimelineHitObjectBody extends CompositeDrawable {
       this.#body = new FastRoundedBox({
         relativeSizeAxes: Axes.Both,
         cornerRadius: 100,
+        alpha: 0.75,
       }),
     );
 
@@ -38,7 +39,7 @@ export class TimelineHitObjectBody extends CompositeDrawable {
   }
 
   protected updateColors() {
-    this.#body.color = ColorUtils.darken(this.accentColor.value, 0.25);
+    this.#body.color = this.accentColor.value;
   }
 
   @resolved(HitObjectList)

packages/common/src/editor/ui/timeline/hitObjects/TimelineHitObjectCircle.ts

@@ -0,0 +1,71 @@
+import type { ReadonlyDependencyContainer } from 'osucad-framework';
+import type { Color } from 'pixi.js';
+import type { TimelineHitObjectBlueprint } from './TimelineHitObjectBlueprint';
+import { Anchor, Axes, Bindable, BindableBoolean, CompositeDrawable, DrawableSprite, FillMode, resolved } from 'osucad-framework';
+import { ISkinSource } from '../../../../skinning/ISkinSource';
+
+export class TimelineHitObjectCircle extends CompositeDrawable {
+  constructor(readonly blueprint: TimelineHitObjectBlueprint) {
+    super();
+
+    this.relativeSizeAxes = Axes.Both;
+    this.fillMode = FillMode.Fit;
+  }
+
+  protected circle!: DrawableSprite;
+
+  protected overlay!: DrawableSprite;
+
+  protected selectionOverlay!: DrawableSprite;
+
+  @resolved(ISkinSource)
+  protected skin!: ISkinSource;
+
+  protected readonly accentColor = new Bindable<Color>(null!);
+
+  protected readonly selected = new BindableBoolean();
+
+  protected override load(dependencies: ReadonlyDependencyContainer) {
+    super.load(dependencies);
+
+    const scaleCorrection = 64 / 60;
+
+    this.addAllInternal(
+      this.circle = new DrawableSprite({
+        relativeSizeAxes: Axes.Both,
+        texture: this.skin.getTexture('hitcircle'),
+        anchor: Anchor.Center,
+        origin: Anchor.Center,
+        scale: scaleCorrection,
+      }),
+      this.overlay = new DrawableSprite({
+        relativeSizeAxes: Axes.Both,
+        texture: this.skin.getTexture('hitcircleoverlay'),
+        anchor: Anchor.Center,
+        origin: Anchor.Center,
+        scale: scaleCorrection,
+      }),
+      this.selectionOverlay = new DrawableSprite({
+        relativeSizeAxes: Axes.Both,
+        texture: this.skin.getTexture('hitcircleselect'),
+        anchor: Anchor.Center,
+        origin: Anchor.Center,
+        scale: scaleCorrection,
+      }),
+    );
+
+    this.accentColor.bindTo(this.blueprint.accentColor);
+    this.selected.bindTo(this.blueprint.selected);
+  }
+
+  protected override loadComplete() {
+    super.loadComplete();
+
+    this.accentColor.addOnChangeListener(color => this.updateColor(color.value), { immediate: true });
+    this.selected.addOnChangeListener(selected => this.selectionOverlay.alpha = selected.value ? 1 : 0, { immediate: true });
+  }
+
+  protected updateColor(color: Color) {
+    this.circle.color = color;
+  }
+}