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

feat: added a lot of styling, new inc/dec widget, new folder structure for widgets

Browse Source
This commit is contained in:
Daniel Ledda
2021-09-05 14:39:29 +02:00
parent 3f8c82dcaf
commit 5f23e6db12
17 changed files with 466 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/ui/BeatGroup/Beat/BeatSettings/BeatSettings.css
View File

@@ -1,31 +0,0 @@
.beat-settings {
padding: 1em;
display: none;
text-align: center;
width: 40em;
justify-content: space-evenly;
}
.beat-settings.visible {
display: inline-flex;
}
.beat-settings-time-sig-up {
display: block;
}
.beat-settings-time-sig-down {
display: block;
}
.beat-settings-option {
display: inline-block;
}
.beat-settings-option-group {
align-self: stretch;
}
.beat-settings-time-sig input {
margin: auto;
}

101
src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts
View File

@@ -1,101 +0,0 @@
import UINode, {UINodeOptions} from "../../../UINode";
import Beat, {BeatEvents} from "../../../../Beat";
import {IPublisher} from "../../../../Publisher";
import ISubscriber from "../../../../Subscriber";
import "./BeatSettings.css";
import BeatLikeLoopSettingsView from "../../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
export type BeatSettingsViewUINodeOptions = UINodeOptions & {
beat: Beat,
};
export default class BeatSettingsView extends UINode implements ISubscriber {
private beat: Beat;
private visible = false;
private timeSigUp!: HTMLInputElement;
private timeSigDown!: HTMLInputElement;
private barCountInput!: HTMLInputElement;
private loopSettingsView!: BeatLikeLoopSettingsView;
constructor(options: BeatSettingsViewUINodeOptions) {
super(options);
this.beat = options.beat;
this.setupBindings();
}
private setupBindings() {
this.beat.addSubscriber(this, "all");
}
notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
if (event === BeatEvents.NewTimeSig) {
this.timeSigUp.value = this.beat.getTimeSigUp().toString();
this.timeSigDown.value = this.beat.getTimeSigDown().toString();
} else if (event === BeatEvents.NewBarCount) {
this.barCountInput.value = this.beat.getBarCount().toString();
}
}
toggleVisible(): void {
this.visible = !this.visible;
if (this.visible) {
this.node?.classList.add("visible");
} else {
this.node?.classList.remove("visible");
}
}
isOpen(): boolean {
return this.visible;
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
this.timeSigUp = UINode.make("input", {
classes: ["time-sig-up"],
type: "number",
value: this.beat.getTimeSigUp().toString(),
oninput: (event: Event) => {
this.beat.setTimeSignature({up: Number((event.target as HTMLInputElement).value) });
},
});
this.timeSigDown = UINode.make("input", {
classes: ["beat-settings-time-sig-down"],
type: "number",
value: this.beat.getTimeSigDown().toString(),
oninput: (event: Event) => {
this.beat.setTimeSignature({down: Number((event.target as HTMLInputElement).value) });
},
});
this.barCountInput = UINode.make("input", {
classes: ["beat-settings-bars-count"],
type: "number",
value: this.beat.getBarCount().toString(),
oninput: (event: Event) => {
this.beat.setBarCount(Number((event.target as HTMLInputElement).value));
},
});
this.node = UINode.make("div", {
classes: ["beat-settings"],
subs: [
UINode.make("div", {
classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
subs: [
UINode.make("label", {innerText: "Time Signature:"}),
this.timeSigUp,
this.timeSigDown,
]
}),
UINode.make("div", {
classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
subs: [
UINode.make("label", {innerText: "Bar Count:"}),
this.barCountInput,
],
}),
this.loopSettingsView.render(),
],
});
return this.node;
}
}

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

@@ -1,10 +1,10 @@
import UINode, {UINodeOptions} from "../../UINode";
import Beat, {BeatEvents} from "../../../Beat";
import {IPublisher} from "../../../Publisher";
import BeatSettingsView from "./BeatSettings/BeatSettingsView";
import ISubscriber from "../../../Subscriber";
import BeatUnitView from "./BeatUnit/BeatUnitView";
import "./Beat.css";
import BeatSettingsView from "../../BeatSettings/BeatSettingsView";
export type BeatUINodeOptions = UINodeOptions & {
beat: Beat,

21
src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css
View File

@@ -1,21 +0,0 @@
.beat-group-settings {
}
.beat-group-settings-options {
padding: 1em;
display: inline-flex;
width: 40em;
justify-content: space-evenly;
}
.beat-group-settings-option {
display: inline-block;
text-align: center;
}
.beat-group-settings-option-group {
display: none;
}
.beat-group-settings-option-group.visible {
display: inline-block;
}

123
src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts
View File

@@ -1,123 +0,0 @@
import BeatGroup from "../../../BeatGroup";
import UINode, {UINodeOptions} from "../../UINode";
import ISubscriber from "../../../Subscriber";
import {IPublisher} from "../../../Publisher";
import {BeatGroupEvents} from "../../../BeatGroup";
import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
import "./BeatGroupSettings.css";
import {BeatEvents} from "../../../Beat";
export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
beatGroup: BeatGroup,
};
export default class BeatGroupSettingsView extends UINode implements ISubscriber {
private beatGroup: BeatGroup;
private barCountInput!: HTMLInputElement;
private timeSigUpInput!: HTMLInputElement;
private loopSettingsView!: BeatLikeLoopSettingsView;
private autoBeatLengthCheckbox!: HTMLInputElement;
private forceFullBarsCheckbox!: HTMLInputElement;
private autoBeatOptions!: HTMLElement;
constructor(options: BeatGroupSettingsUINodeOptions) {
super(options);
this.beatGroup = options.beatGroup;
this.beatGroup.addSubscriber(this, [
BeatGroupEvents.BarCountChanged,
BeatGroupEvents.TimeSigUpChanged,
BeatEvents.DisplayTypeChanged,
]);
}
notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
if (event === BeatGroupEvents.BarCountChanged) {
this.barCountInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getBarCount();
} else if (event === BeatGroupEvents.TimeSigUpChanged) {
this.timeSigUpInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getTimeSigUp();
} else if (event === BeatEvents.DisplayTypeChanged) {
if (this.beatGroup.isLooping()) {
this.autoBeatOptions.classList.add("visible");
} else {
this.autoBeatOptions.classList.remove("visible");
}
}
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup});
this.barCountInput = UINode.make("input", {
type: "number",
value: this.beatGroup.getBeatByIndex(0).getBarCount().toString(),
oninput: () => {
this.beatGroup.setBarCount(Number(this.barCountInput.value));
},
});
this.timeSigUpInput = UINode.make("input", {
type: "number",
value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(),
oninput: () => {
this.beatGroup.setTimeSigUp(Number(this.timeSigUpInput.value));
},
});
this.autoBeatLengthCheckbox = UINode.make("input", {
type: "checkbox",
checked: this.beatGroup.autoBeatLengthOn(),
oninput: () => {
this.beatGroup.setIsUsingAutoBeatLength(this.autoBeatLengthCheckbox.checked);
},
});
this.forceFullBarsCheckbox = UINode.make("input", {
type: "checkbox",
checked: this.beatGroup.forcesFullBars(),
oninput: () => {
this.beatGroup.setForcesFullBars(this.forceFullBarsCheckbox.checked);
},
});
this.autoBeatOptions = UINode.make("div", {
classes: ["beat-group-settings-option-group"],
subs: [
UINode.make("div", {
subs: [
UINode.make("label", { innerText: "Auto beat length:"}),
this.autoBeatLengthCheckbox,
],
}),
UINode.make("div", {
subs: [
UINode.make("label", { innerText: "Force full bars:"}),
this.forceFullBarsCheckbox,
],
}),
]
});
this.node = UINode.make("div", {
classes: ["beat-group-settings"],
subs: [
UINode.make("div", { innerText: "Settings for beat" }),
UINode.make("div", {
classes: ["beat-group-settings-options"],
subs: [
UINode.make("div", {
classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
subs: [
UINode.make("label", { innerText: "Bars:" }),
this.barCountInput,
],
}),
UINode.make("div", {
classes: ["beat-group-settings-boxes", "beat-group-settings-option"],
subs: [
UINode.make("label", { innerText: "Boxes per bar:" }),
this.timeSigUpInput,
],
}),
this.loopSettingsView.render(),
this.autoBeatOptions,
],
}),
],
});
return this.node;
}
}

2
src/ui/BeatGroup/BeatGroupView.ts
View File

@@ -1,7 +1,7 @@
import UINode, {UINodeOptions} from "../UINode";
import BeatGroup from "../../BeatGroup";
import BeatGroupSettingsView from "../BeatGroupSettings/BeatGroupSettingsView";
import BeatView from "./Beat/BeatView";
import BeatGroupSettingsView from "./BeatGroupSettings/BeatGroupSettingsView";
export type BeatGroupUINodeOptions = UINodeOptions & {
title: string,

17
src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettings.css
View File

@@ -1,17 +0,0 @@
.loop-settings-option-group {
margin-top: 1em;
}
.loop-settings-option > label {
width: 5em;
text-align: left;
}
.loop-settings > p {
margin: 0;
text-align: center;
}
.loop-settings-option {
display: flex;
}

82
src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts
View File

@@ -1,82 +0,0 @@
import BeatLike from "../../../BeatLike";
import UINode, {UINodeOptions} from "../../UINode";
import ISubscriber from "../../../Subscriber";
import {IPublisher} from "../../../Publisher";
import {BeatEvents} from "../../../Beat";
import "./BeatLikeLoopSettings.css";
export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
beatLike: BeatLike,
};
export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber {
private beatLike: BeatLike;
private loopLengthInput!: HTMLInputElement;
private loopCheckbox!: HTMLInputElement;
constructor(options: BeatLikeLoopSettingsViewUINodeOptions) {
super(options);
this.beatLike = options.beatLike;
this.setupBindings();
}
private setupBindings() {
this.beatLike.addSubscriber(this, [
BeatEvents.LoopLengthChanged,
BeatEvents.DisplayTypeChanged
]);
}
notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
if (event === BeatEvents.LoopLengthChanged) {
this.loopLengthInput.value = this.beatLike.getLoopLength().toString();
} else if (event === BeatEvents.DisplayTypeChanged) {
this.loopCheckbox.checked = this.beatLike.isLooping();
}
}
rebuild(): HTMLElement {
this.loopLengthInput = UINode.make("input", {
classes: ["loop-settings-loop-length"],
type: "number",
value: this.beatLike.getLoopLength().toString(),
oninput: (event: Event) => {
this.beatLike.setLoopLength(Number((event.target as HTMLInputElement).value));
},
});
this.loopCheckbox = UINode.make("input", {
classes: ["loop-settings-loop-toggle"],
type: "checkbox",
checked: this.beatLike.isLooping(),
oninput: (event: Event) => {
this.beatLike.setLooping((event.target as HTMLInputElement).checked);
},
});
this.node = UINode.make("div", {
classes: ["loop-settings"],
subs: [
UINode.make("p", {innerText: "Looping:"}),
UINode.make("div", {
classes: ["loop-settings-option-group"],
subs: [
UINode.make("div", {
classes: ["loop-settings-option"],
subs: [
UINode.make("label", {innerText: "Length:"}),
this.loopLengthInput,
],
}),
UINode.make("div", {
classes: ["loop-settings-option"],
subs: [
UINode.make("label", {innerText: "On:"}),
this.loopCheckbox,
],
}),
],
}),
]
});
return this.node;
}
}