djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added various performance improvements

Browse Source
This commit is contained in:
Daniel Ledda
2021-12-05 15:47:28 +01:00
parent 866b3af879
commit d51820b1d4
7 changed files with 69 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts
View File

@@ -1,7 +1,7 @@
import BeatUnit, {BeatUnitEvents, BeatUnitType} from "../../../../BeatUnit";
import ISubscriber from "../../../../Subscriber";
import UINode, {UINodeOptions} from "../../../UINode";
import {IPublisher} from "../../../../Publisher";
import {IPublisher, ISubscription, Publisher} from "../../../../Publisher";
import "./BeatUnit.css";
export type BeatUnitUINodeOptions = UINodeOptions & {
@@ -10,7 +10,8 @@ export type BeatUnitUINodeOptions = UINodeOptions & {
export default class BeatUnitView extends UINode implements ISubscriber {
private beatUnit: BeatUnit;
private subscription!: {unbind: () => void};
private subscription: ISubscription | null = null;
private publisher: IPublisher<BeatUnitEvents> = new Publisher<BeatUnitEvents, BeatUnitView>(this);
constructor(options: BeatUnitUINodeOptions) {
super(options);
@@ -19,13 +20,14 @@ export default class BeatUnitView extends UINode implements ISubscriber {
}
setUnit(beatUnit: BeatUnit): void {
this.subscription.unbind();
this.beatUnit = beatUnit;
this.setupBindings();
this.redraw();
this.notify(this.publisher, beatUnit.isOn() ? BeatUnitEvents.On : BeatUnitEvents.Off);
this.notify(this.publisher, BeatUnitEvents.TypeChange);
}
private setupBindings() {
this.subscription?.unbind();
this.subscription = this.beatUnit.addSubscriber(this, "all");
}
@@ -43,14 +45,16 @@ export default class BeatUnitView extends UINode implements ISubscriber {
notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
if (event === BeatUnitEvents.On) {
this.node?.classList.add("beat-unit-on");
this.getNode().classList.add("beat-unit-on");
} else if (event === BeatUnitEvents.Off) {
this.node?.classList.remove("beat-unit-on");
this.getNode().classList.remove("beat-unit-on");
} else if (event === BeatUnitEvents.TypeChange) {
if (this.beatUnit.getType() === BeatUnitType.GhostNote) {
this.node?.classList.add("beat-unit-ghost");
} else {
this.node?.classList.remove("beat-unit-ghost");
const showingAsGhost = this.getNode().classList.contains("beat-unit-ghost");
const isGhost = this.beatUnit.getType() === BeatUnitType.GhostNote;
if (isGhost && !showingAsGhost) {
this.getNode().classList.add("beat-unit-ghost");
} else if (!isGhost && showingAsGhost) {
this.getNode().classList.remove("beat-unit-ghost");
}
}
}

18
src/ui/BeatGroup/Beat/BeatView.ts
View File

@@ -24,6 +24,15 @@ export default class BeatView extends UINode implements ISubscriber {
this.setupBindings();
}
private onBeatViewHover(beatView: BeatUnitView) {
this.lastHoveredBeatUnitView = beatView;
if (BeatView.selectingUnits) {
this.lastHoveredBeatUnitView.turnOn();
} else if (BeatView.deselectingUnits) {
this.lastHoveredBeatUnitView.turnOff();
}
}
private setupBindings() {
this.beat.addSubscriber(this, "all");
}
@@ -56,14 +65,7 @@ export default class BeatView extends UINode implements ISubscriber {
view = new BeatUnitView({beatUnit});
this.beatUnitViews.push(view);
}
view.onHover(() => {
this.lastHoveredBeatUnitView = view;
if (BeatView.selectingUnits) {
this.lastHoveredBeatUnitView.turnOn();
} else if (BeatView.deselectingUnits) {
this.lastHoveredBeatUnitView.turnOff();
}
});
view.onHover(() => this.onBeatViewHover(view));
view.onMouseDown((event: MouseEvent) => this.onBeatUnitClick(event.button, i));
}
}

2
src/ui/BeatGroupSettings/BeatGroupSettingsView.ts
View File

@@ -114,11 +114,11 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
this.autoBeatLengthCheckbox.render(),
],
}),
this.beatSettingsContainer,
new ActionButtonView({
label: "New Track",
onClick: () => this.beatGroup.addBeat(),
}).render(),
this.beatSettingsContainer,
],
}),
],

4
src/ui/BeatSettings/BeatSettingsView.ts
View File

@@ -2,7 +2,7 @@ import "./BeatSettings.css";
import Beat, {BeatEvents} from "../../Beat";
import UINode, {UINodeOptions} from "../UINode";
import ISubscriber from "../../Subscriber";
import {IPublisher} from "../../Publisher";
import {IPublisher, ISubscription} from "../../Publisher";
import NumberInputView from "../Widgets/NumberInput/NumberInputView";
import BoolBoxView from "../Widgets/BoolBox/BoolBoxView";
import ActionButtonView from "../Widgets/ActionButton/ActionButtonView";
@@ -18,7 +18,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
private loopLengthInput!: NumberInputView;
private loopCheckbox!: BoolBoxView;
private loopLengthSection!: HTMLDivElement;
private sub!: { unbind: () => void };
private sub!: ISubscription;
constructor(options: BeatSettingsViewUINodeOptions) {
super(options);

4
src/ui/Root/RootView.ts
View File

@@ -25,11 +25,11 @@ export default class RootView extends UINode {
}
toggleSidebar(): void {
this.node!.classList.toggle("sidebar-visible");
this.node?.classList.toggle("sidebar-visible");
}
toggleOrientation(): void {
this.node!.classList.toggle("vertical-mode");
this.node?.classList.toggle("vertical-mode");
}
rebuild(): HTMLElement {