diff --git a/packages/common/src/editor/bottomBar/PlayButton.ts b/packages/common/src/editor/bottomBar/PlayButton.ts index 30be4c85..838c7d4f 100644 --- a/packages/common/src/editor/bottomBar/PlayButton.ts +++ b/packages/common/src/editor/bottomBar/PlayButton.ts @@ -1,7 +1,8 @@ import type { HoverEvent, HoverLostEvent, MouseDownEvent, MouseUpEvent, ReadonlyDependencyContainer } from 'osucad-framework'; -import { Anchor, Axes, CompositeDrawable, DrawableSprite, MouseButton, resolved, Vec2 } from 'osucad-framework'; +import { Anchor, Axes, CompositeDrawable, DrawableSprite, MenuItem, MouseButton, resolved, Vec2 } from 'osucad-framework'; import { OsucadColors } from '../../OsucadColors'; import { getIcon } from '../../OsucadIcons'; +import { ContextMenuContainer } from '../../userInterface/ContextMenuContainer'; import { EditorClock } from '../EditorClock'; export class PlayButton extends CompositeDrawable { @@ -55,6 +56,37 @@ export class PlayButton extends CompositeDrawable { return true; } + if (e.button === MouseButton.Right) { + this.dependencies.resolve(ContextMenuContainer) + .showMenu([ + new MenuItem({ + text: 'Playback rate', + disabled: true, + }), + new MenuItem({ + text: '150%', + action: () => this.editorClock.rate = 1.5, + }), + new MenuItem({ + text: '100%', + action: () => this.editorClock.rate = 1, + }), + new MenuItem({ + text: '75%', + action: () => this.editorClock.rate = 0.75, + }), + new MenuItem({ + text: '50%', + action: () => this.editorClock.rate = 0.5, + }), + new MenuItem({ + text: '25%', + action: () => this.editorClock.rate = 0.25, + }), + ], e); + return true; + } + return false; } diff --git a/packages/common/src/userInterface/ContextMenu.ts b/packages/common/src/userInterface/ContextMenu.ts index be7d7eab..125c4a6c 100644 --- a/packages/common/src/userInterface/ContextMenu.ts +++ b/packages/common/src/userInterface/ContextMenu.ts @@ -1,7 +1,7 @@ import type { Drawable, MenuItem, ReadonlyDependencyContainer, SpriteText, Vec2 } from 'osucad-framework'; import type { Graphics } from 'pixi.js'; import type { OsucadMenuItem } from './OsucadMenuItem'; -import { Anchor, Axes, Container, Direction, DrawableMenuItem, EasingFunction, FastRoundedBox, GraphicsDrawable, MarginPadding, Menu, ScrollbarContainer, ScrollContainer } from 'osucad-framework'; +import { Anchor, Axes, Container, Direction, DrawableMenuItem, FastRoundedBox, GraphicsDrawable, MarginPadding, Menu, ScrollbarContainer, ScrollContainer } from 'osucad-framework'; import { OsucadSpriteText } from '../drawables/OsucadSpriteText'; import { OsucadColors } from '../OsucadColors'; import { ContextMenuContainer } from './ContextMenuContainer'; @@ -20,8 +20,8 @@ export class ContextMenu extends Menu { } protected override updateSize(newSize: Vec2) { - this.width = newSize.x; - this.resizeTo(newSize, 300, EasingFunction.OutExpo); + this.size = newSize; + // this.resizeTo(newSize, 300, EasingFunction.OutExpo); } protected override createScrollContainer(direction: Direction): ScrollContainer { diff --git a/packages/common/src/userInterface/ContextMenuContainer.ts b/packages/common/src/userInterface/ContextMenuContainer.ts index eb7e7d26..f5e25bec 100644 --- a/packages/common/src/userInterface/ContextMenuContainer.ts +++ b/packages/common/src/userInterface/ContextMenuContainer.ts @@ -1,5 +1,5 @@ import type { ContainerOptions, MenuItem, MouseDownEvent, UIEvent } from 'osucad-framework'; -import { Axes, Container, Drawable, provide, Vec2 } from 'osucad-framework'; +import { Anchor, Axes, Container, Drawable, provide, Vec2 } from 'osucad-framework'; import { ContextMenu } from './ContextMenu'; @provide() @@ -47,6 +47,12 @@ export class ContextMenuContainer extends Container { this.#activeMenu = menu; menu.animateOpen(); + + this.scheduler.addDelayed(() => { + if (this.toLocalSpace(menu.toScreenSpace(new Vec2(0, menu.drawHeight))).y > this.height) { + menu.origin = Anchor.BottomLeft; + } + }, 50); } #activeMenu?: ContextMenu;