Skip to content

Commit 2206aed

Browse files
mike-lischkemike-lischke
committed
Settled on a project logo
Also optimized track viewer rendering, to avoid any rendering when just scrolling around.
1 parent e2c3f75 commit 2206aed

File tree

11 files changed

+114
-223
lines changed

11 files changed

+114
-223
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/animada-logo2.svg" />
6+
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<title>Animada Score Book</title>
99
</head>

‎public/logo.svg‎

Lines changed: 36 additions & 0 deletions
Loading

‎src/App.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -365,10 +365,11 @@ select.long {
365365

366366
.scroll-shadow {
367367
display: none;
368-
width: 20pt;
368+
width: 10pt;
369369
pointer-events: none;
370370
z-index: 1;
371371
position: absolute;
372+
372373
/* Vertically offset shadows slightly to cover borders */
373374
margin-top: calc(-0.5 * var(--thick-border-width));
374375
height: calc(var(--thick-border-width) + var(--note-height))
@@ -387,10 +388,11 @@ select.long {
387388
}
388389

389390
.track-meta {
391+
--padding: 2pt;
392+
390393
display: flex;
391394
flex-direction: column;
392395
justify-content: space-between;
393-
--padding: 2pt;
394396
width: var(--track-meta-width);
395397
height: var(--note-height);
396398
border: var(--thick-border);
@@ -401,7 +403,7 @@ select.long {
401403
flex-shrink: 0;
402404
position: absolute;
403405
background-color: white;
404-
z-index: 100;
406+
z-index: 5;
405407
/* Currently only for covering track-controls overlay */
406408
}
407409

@@ -831,11 +833,11 @@ select.long {
831833
margin-left: 16px;
832834
font-size: 24pt;
833835
font-weight: 400;
834-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
836+
font-family: 'NovaMono for Powerline', Tahoma, Geneva, Verdana, sans-serif;
835837
}
836838

837839
#titleLogo {
838-
height: 50px;
840+
height: 150px;
839841
}
840842

841843
#themeSwitch {

‎src/App.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
import "@vscode/codicons/dist/codicon.css";
77
import "./App.css";
88

9-
import titleImage from "./assets/images/Animada.svg";
10-
119
import { createRef } from "preact";
1210

1311
import { ErrorBoundary } from "./components/ui/ErrorBoundary.js";
@@ -91,8 +89,8 @@ export class App extends UIComponent<{}, IAppState> {
9189
orientation={Orientation.LeftToRight}
9290
crossAlignment={ChildAlignment.Center}
9391
>
94-
<Image id="titleLogo" src={titleImage} />
95-
<Label id="appTitle">Score Book</Label>
92+
<Image id="titleLogo" src="/logo.svg" />
93+
<Label id="appTitle">ANIMADA Score Book</Label>
9694
<Switch
9795
id="themeSwitch"
9896
type="switch"

‎src/assets/images/Animada.svg‎

Lines changed: 0 additions & 155 deletions
This file was deleted.

‎src/assets/images/samba-score-book.svg‎

Lines changed: 36 additions & 0 deletions
Loading

‎src/components/ui/Arrangement/ArrangementControlsTop.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,9 @@ export class ArrangementControlsTop extends UIComponent<IArrangementControlsTopP
5353
}
5454

5555
public override componentDidMount(): void {
56-
this.eventEngineUnsubscribe = EventEngine.instance.subscribe(this.onPlaybackStateChange);
57-
}
58-
59-
public override componentDidUpdate(): void {
6056
const { arrangementPlayer: arrangementPlayerContext, services } = this.props;
6157

62-
this.selectionChangeUnsubscribe?.();
63-
this.arrangementUnsubscribe?.();
64-
58+
this.eventEngineUnsubscribe = EventEngine.instance.subscribe(this.onPlaybackStateChange);
6559
const arrangement = arrangementPlayerContext.arrangementView;
6660
this.arrangementUnsubscribe = arrangement.subscribe(this.titleChangeSubscription);
6761
this.selectionChangeUnsubscribe = services.selectionManager.subscribe(this.onSelectionChange);

‎src/components/ui/Arrangement/ArrangementViewer.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
136136
onGrab={autoFollowIsOn ? this.onScrollbarGrab : undefined}
137137
/>
138138
</div>
139-
<Overlay name="instrument_browser">
140-
</Overlay>
139+
<Overlay name="instrument_browser" />
141140
</div>
142141
</div>
143142
<ArrangementControlsBottom
@@ -200,7 +199,12 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
200199
}
201200

202201
private updateScrollShadows = () => {
203-
this.setState({ scrollShadowClasses: this.getScrollShadowClasses(this.viewerRef.current) });
202+
const { scrollShadowClasses } = this.state;
203+
204+
const newClasse = this.getScrollShadowClasses(this.viewerRef.current);
205+
if (scrollShadowClasses !== newClasse) {
206+
this.setState({ scrollShadowClasses: newClasse });
207+
}
204208
};
205209

206210
private updateNoteWidth = () => {

‎src/components/ui/Note/NoteViewer.tsx‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import type { ComponentChild } from "preact";
77

88
import type { ISbDmNote } from "../../../core/ScoreBookDataModel.js";
9-
import type { INoteStyle, ISubscribable } from "../../../core/types/general.js";
9+
import type { INoteStyle } from "../../../core/types/general.js";
1010
import type { UndoManager } from "../../../core/UndoManager.js";
1111
import { isSameTiming } from "../../../core/utils.js";
1212
import type { ArrangementPlayer } from "../../../player/ArrangementPlayer.js";
@@ -47,6 +47,7 @@ export class NoteViewer extends UIComponent<INoteViewerProps, INoteViewerState>
4747
this.state = {
4848
isCurrent: false,
4949
selected: false,
50+
noteStyle: props.note.noteStyle,
5051
};
5152
}
5253

@@ -102,39 +103,14 @@ export class NoteViewer extends UIComponent<INoteViewerProps, INoteViewerState>
102103
return stepIsEven ? "even-beat" : "odd-beat";
103104
}
104105

105-
public override componentWillUnmount(): void {
106-
this.timingChangeUnsubscribe?.();
107-
this.selectionChangeUnsubscribe?.();
108-
this.noteStyleChangeUnsubscribe?.();
106+
public override componentDidMount(): void {
107+
this.addSubscriptions();
109108
}
110109

111-
public override componentDidUpdate(): void {
112-
const { note, services, trackPlayer, arrangementPlayer } = this.props;
113-
const { selectionManager } = services;
114-
110+
public override componentWillUnmount(): void {
115111
this.timingChangeUnsubscribe?.();
116112
this.selectionChangeUnsubscribe?.();
117113
this.noteStyleChangeUnsubscribe?.();
118-
119-
const timingPublisher: ISubscribable = note.polyrhythm
120-
? trackPlayer.currentPolyrhythmNotePublisher
121-
: arrangementPlayer.currentTimingPublisher;
122-
123-
this.timingChangeUnsubscribe = timingPublisher.subscribe(this.timingChanged);
124-
this.selectionChangeUnsubscribe = selectionManager.subscribe(this.selectionChanged);
125-
126-
const { isCurrent, noteStyle } = this.state;
127-
128-
const isPlaying = this.isCurrentlyPlaying();
129-
if (isPlaying !== isCurrent) {
130-
this.setState({ isCurrent: isPlaying });
131-
}
132-
133-
if (noteStyle !== note.noteStyle) {
134-
this.setState({ noteStyle: note.noteStyle });
135-
}
136-
137-
this.noteStyleChangeUnsubscribe = note.subscribe(this.noteStyleChanged);
138114
}
139115

140116
public override render(): ComponentChild {
@@ -157,14 +133,27 @@ export class NoteViewer extends UIComponent<INoteViewerProps, INoteViewerState>
157133
holdLength={1100}
158134
callback={this.handleTouchHold}
159135
>
160-
<div className="note-details-viewer" >
136+
<div className="note-details-viewer">
161137
<NoteStyleSymbolViewer noteStyle={noteStyle} />
162138
</div>
163139
</TouchHoldDetector>
164140
</div >
165141
);
166142
}
167143

144+
private addSubscriptions(): void {
145+
const { note, services, trackPlayer, arrangementPlayer } = this.props;
146+
const { selectionManager } = services;
147+
148+
const timingPublisher = note.polyrhythm
149+
? trackPlayer.currentPolyrhythmNotePublisher
150+
: arrangementPlayer.currentTimingPublisher;
151+
152+
this.timingChangeUnsubscribe = timingPublisher.subscribe(this.timingChanged);
153+
this.selectionChangeUnsubscribe = selectionManager.subscribe(this.selectionChanged);
154+
this.noteStyleChangeUnsubscribe = note.subscribe(this.noteStyleChanged);
155+
}
156+
168157
private timingChanged = (): void => {
169158
this.setState({ isCurrent: this.isCurrentlyPlaying() });
170159
};

‎src/components/ui/Track/NoteLine.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { createRef, type ComponentChild } from "preact";
88
import type { ISbDmNote, ISbDmTrack } from "../../../core/ScoreBookDataModel.js";
99
import type { IPolyrhythm } from "../../../core/types/general.js";
1010
import type { UndoManager } from "../../../core/UndoManager.js";
11+
import type { ArrangementPlayer } from "../../../player/ArrangementPlayer.js";
1112
import type { TrackPlayer } from "../../../player/TrackPlayer.js";
1213
import type { ScoreBookUiServices } from "../../../ui/AnimadaScoreBookUi.js";
1314
import { UIComponent, type ICommonUIProperties } from "../framework/UIComponent.js";
15+
import { NoteViewer } from "../Note/NoteViewer.js";
1416
import { PolyrhythmViewer } from "../PolyrhythmViewer.js";
1517
import type { ITrackViewerCallbacks } from "./TrackViewer.js";
16-
import { NoteViewer } from "../Note/NoteViewer.js";
17-
import type { ArrangementPlayer } from "../../../player/ArrangementPlayer.js";
1818

1919
export interface INoteLineProperties extends ICommonUIProperties {
2020
trackPlayer: TrackPlayer;
@@ -44,18 +44,11 @@ export class NoteLine extends UIComponent<INoteLineProperties, INoteLineState> {
4444
notes: [...track.notes],
4545
polyrhythms: [...track.polyrhythms],
4646
};
47-
48-
track.subscribe(this.trackChanged);
4947
}
5048

5149
public override componentDidMount(): void {
5250
const { track } = this.props;
53-
track.subscribe(this.trackChanged);
54-
}
55-
56-
public override componentWillUnmount(): void {
57-
const { track } = this.props;
58-
track.unsubscribe(this.trackChanged);
51+
this.addSubscription(track, this.trackChanged);
5952
}
6053

6154
public override componentDidUpdate(): void {

0 commit comments

Comments
 (0)