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

feat: more styling, bug fixes, deleting rows, removing unnecessary features

Browse Source
This commit is contained in:
Daniel Ledda
2021-09-06 14:21:20 +02:00
parent 6b0395b453
commit 342e65345d
15 changed files with 225 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Beat.ts
View File

@@ -21,6 +21,7 @@ export const enum BeatEvents {
NewName="BE2",
DisplayTypeChanged="BE3",
LoopLengthChanged="BE4",
WantsRemoval="BE5",
}
export default class Beat implements IPublisher<BeatEvents>, BeatLike {
@@ -31,7 +32,7 @@ export default class Beat implements IPublisher<BeatEvents>, BeatLike {
private timeSigDown = 4;
private readonly unitRecord: BeatUnit[] = [];
private barCount = 1;
private publisher = new Publisher<BeatEvents>();
private publisher = new Publisher<BeatEvents, Beat>(this);
private loopLength: number;
private looping: boolean;
@@ -145,4 +146,8 @@ export default class Beat implements IPublisher<BeatEvents>, BeatLike {
getLoopLength(): number {
return this.loopLength;
}
delete(): void {
this.publisher.notifySubs(BeatEvents.WantsRemoval);
}
}

120
src/BeatGroup.ts
View File

@@ -2,7 +2,7 @@ import Beat, {BeatEvents, BeatInitOptions} from "./Beat";
import {IPublisher, Publisher} from "./Publisher";
import ISubscriber from "./Subscriber";
import BeatLike from "./BeatLike";
import {isPosInt} from "./utils";
import {greatestCommonDivisor, isPosInt} from "./utils";
type BeatGroupInitOptions = {
barCount: number;
@@ -10,7 +10,6 @@ type BeatGroupInitOptions = {
timeSigUp: number;
beats?: BeatInitOptions[],
loopLength?: number,
forceFullBars?: boolean,
useAutoBeatLength?: boolean,
};
@@ -20,38 +19,37 @@ export const enum BeatGroupEvents {
BarCountChanged="BGE2",
TimeSigUpChanged="BGE3",
AutoBeatSettingsChanged="BGE4",
LockingChanged="BGE5",
}
export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvents>, BeatLike, ISubscriber {
private beats: Beat[] = [];
private beatKeyMap: Record<string, number> = {};
private publisher: Publisher<BeatGroupEvents | BeatEvents> = new Publisher<BeatGroupEvents | BeatEvents>();
private publisher: Publisher<BeatGroupEvents | BeatEvents, BeatGroup> = new Publisher<BeatGroupEvents | BeatEvents, BeatGroup>(this);
private barCount: number;
private timeSigUp: number;
private globalLoopLength: number;
private globalIsLooping: boolean;
private forceFullBars: boolean;
private useAutoBeatLength: boolean;
private barSettingsLocked = false;
constructor(options?: BeatGroupInitOptions) {
if (options?.beats) {
for (const beatOptions of options.beats) {
const newBeat = new Beat(beatOptions);
this.beats.push(newBeat);
this.beatKeyMap[newBeat.getKey()] = this.beats.length - 1;
this.addBeat(beatOptions);
}
}
this.barCount = options?.barCount ?? 4;
this.timeSigUp = options?.timeSigUp ?? 4;
this.globalLoopLength = options?.loopLength ?? this.barCount * this.timeSigUp;
this.globalLoopLength = options?.loopLength ?? this.timeSigUp;
this.globalIsLooping = options?.isLooping ?? false;
this.useAutoBeatLength = options?.useAutoBeatLength ?? false;
this.forceFullBars = options?.forceFullBars ?? true;
}
notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
if (event === BeatEvents.LoopLengthChanged) {
if (event === BeatEvents.LoopLengthChanged || event === BeatEvents.DisplayTypeChanged) {
this.autoBeatLength();
} else if (event === BeatEvents.WantsRemoval) {
this.removeBeat((publisher as Beat).getKey());
}
}
@@ -59,7 +57,7 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
return this.publisher.addSubscriber(subscriber, eventType);
}
setBarCount(barCount: number): void {
private setBarCountInternal(barCount: number): void {
if (!isPosInt(barCount)) {
barCount = this.barCount;
}
@@ -70,6 +68,14 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
this.publisher.notifySubs(BeatGroupEvents.BarCountChanged);
}
setBarCount(barCount: number): void {
if (!this.barSettingsLocked) {
this.setBarCountInternal(barCount);
} else {
this.setBarCountInternal(this.barCount);
}
}
getBarCount(): number {
return this.barCount;
}
@@ -94,9 +100,6 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
for (const beat of this.beats) {
beat.setLooping(isLooping);
}
if (isLooping) {
this.autoBeatLength();
}
this.publisher.notifySubs(BeatEvents.DisplayTypeChanged);
}
@@ -105,27 +108,19 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
}
private findSmallestLoopLength(): number {
const loopLengths = [];
const denominators = [];
const loopLengths = [this.timeSigUp];
for (const beat of this.beats) {
loopLengths.push(beat.getLoopLength());
}
if (this.forceFullBars) {
loopLengths.push(this.timeSigUp);
}
for (let i = 0; i < loopLengths.length; i++) {
let isFactor = false;
for (let j = 0; j < loopLengths.length; j++) {
if (j !== i && loopLengths[j] % loopLengths[i] === 0 && loopLengths[j] !== loopLengths[i]) {
isFactor = true;
break;
if (beat.isLooping()) {
const loopLength = beat.getLoopLength();
if (loopLengths.indexOf(loopLength) === -1) {
loopLengths.push(loopLength);
}
}
if (!isFactor && denominators.indexOf(loopLengths[i]) === -1) {
denominators.push(loopLengths[i]);
}
if (loopLengths.length === 1) {
loopLengths.push(1);
}
return denominators.reduce((prev, curr) => prev * curr, 1);
return loopLengths.reduce((prev, curr) => (prev * curr) / greatestCommonDivisor(prev, curr));
}
setTimeSigUp(timeSigUp: number): void {
@@ -136,6 +131,7 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
for (const beat of this.beats) {
beat.setTimeSignature({up: timeSigUp});
}
this.autoBeatLength();
this.publisher.notifySubs(BeatGroupEvents.TimeSigUpChanged);
}
@@ -144,10 +140,11 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
}
getBeatByKey(beatKey: string): Beat {
if (typeof this.beatKeyMap[beatKey] === "undefined") {
const foundBeat = this.beats.find(beat => beat.getKey() === beatKey);
if (typeof foundBeat === "undefined") {
throw new Error(`Could not find the beat with key: ${beatKey}`);
}
return this.getBeatByIndex(this.beatKeyMap[beatKey]);
return foundBeat;
}
getBeatByIndex(beatIndex: number): Beat {
@@ -170,39 +167,33 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
const beat2 = this.getBeatByIndex(beatIndex2);
this.beats[beatIndex1] = beat2;
this.beats[beatIndex2] = beat1;
this.beatKeyMap[beat1.getKey()] = beatIndex2;
this.beatKeyMap[beat2.getKey()] = beatIndex1;
this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
}
swapBeatsByKeys(beatKey1: string, beatKey2: string): void {
const index1 = this.beatKeyMap[this.getBeatByKey(beatKey1).getKey()];
const index2 = this.beatKeyMap[this.getBeatByKey(beatKey2).getKey()];
this.swapBeatsByIndices(index1, index2);
}
moveBeatBack(beatKey: string): void {
const index = this.beatKeyMap[beatKey];
const index = this.beats.indexOf(this.getBeatByKey(beatKey));
if (typeof index !== "undefined" && index > 0) {
this.swapBeatsByIndices(index, index - 1);
}
this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
}
moveBeatForward(beatKey: string): void {
const index = this.beatKeyMap[beatKey];
const index = this.beats.indexOf(this.getBeatByKey(beatKey));
if (typeof index !== "undefined" && index < this.getBeatCount()) {
this.swapBeatsByIndices(index, index + 1);
}
this.publisher.notifySubs(BeatGroupEvents.BeatOrderChanged);
this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
}
canMoveBeatBack(beatKey: string): boolean {
return this.beatKeyMap[beatKey] > 0;
return this.beats.indexOf(this.getBeatByKey(beatKey)) > 0;
}
canMoveBeatForward(beatKey: string): boolean {
return this.beatKeyMap[beatKey] < this.beats.length - 1;
return this.beats.indexOf(this.getBeatByKey(beatKey)) < this.beats.length - 1;
}
addBeat(options?: BeatInitOptions): Beat {
@@ -218,16 +209,20 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
};
const newBeat = new Beat(options);
this.beats.push(newBeat);
this.beatKeyMap[newBeat.getKey()] = this.beats.length;
newBeat.addSubscriber(this, [BeatEvents.LoopLengthChanged]);
newBeat.addSubscriber(this, [
BeatEvents.LoopLengthChanged,
BeatEvents.WantsRemoval,
BeatEvents.DisplayTypeChanged,
]);
this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
return newBeat;
}
removeBeat(beatKey: string): void {
const beat = this.getBeatByKey(beatKey);
this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
this.beats.splice(this.beats.indexOf(beat), 1);
this.autoBeatLength();
this.publisher.notifySubs(BeatGroupEvents.BeatListChanged);
}
setBeatName(beatKey: string, newName: string): void {
@@ -239,25 +234,34 @@ export default class BeatGroup implements IPublisher<BeatGroupEvents | BeatEvent
return this.useAutoBeatLength;
}
forcesFullBars(): boolean {
return this.forceFullBars;
}
private autoBeatLength(): void {
if (this.useAutoBeatLength && this.globalIsLooping) {
this.setBarCount(this.findSmallestLoopLength() / this.timeSigUp);
if (this.useAutoBeatLength) {
this.setBarCountInternal(this.findSmallestLoopLength() / this.timeSigUp);
}
}
setIsUsingAutoBeatLength(isOn: boolean): void {
this.useAutoBeatLength = isOn;
this.autoBeatLength();
if (isOn) {
this.lockBars();
} else {
this.unlockBars();
}
this.publisher.notifySubs(BeatGroupEvents.AutoBeatSettingsChanged);
}
setForcesFullBars(force: boolean): void {
this.forceFullBars = force;
this.autoBeatLength();
this.publisher.notifySubs(BeatGroupEvents.AutoBeatSettingsChanged);
barsLocked(): boolean {
return this.barSettingsLocked;
}
lockBars(): void {
this.barSettingsLocked = true;
this.publisher.notifySubs(BeatGroupEvents.LockingChanged);
}
unlockBars(): void {
this.barSettingsLocked = false;
this.publisher.notifySubs(BeatGroupEvents.LockingChanged);
}
}

2
src/BeatUnit.ts
View File

@@ -16,7 +16,7 @@ export const enum BeatUnitEvents {
export default class BeatUnit implements IPublisher<BeatUnitEvents> {
private publisher: Publisher<BeatUnitEvents> = new Publisher<BeatUnitEvents>();
private publisher: Publisher<BeatUnitEvents, BeatUnit> = new Publisher<BeatUnitEvents, BeatUnit>(this);
private on = false;
private type: BeatUnitType = BeatUnitType.Normal;

10
src/Publisher.ts
View File

@@ -1,9 +1,11 @@
import ISubscriber from "./Subscriber";
export class Publisher<T extends (string | number)> implements IPublisher<T> {
export class Publisher<T extends (string | number), P> implements IPublisher<T> {
private subscribers: Map<T | "all", ISubscriber[]>;
private parent: P;
constructor() {
constructor(parent: P) {
this.parent = parent;
this.subscribers = new Map();
this.subscribers.set("all", []);
}
@@ -41,10 +43,10 @@ export class Publisher<T extends (string | number)> implements IPublisher<T> {
notifySubs(eventType: T) {
for (const sub of this.getSubscribers(eventType)) {
sub.notify(this, eventType);
sub.notify(this.parent, eventType);
}
for (const sub of this.getSubscribers("all")) {
sub.notify(this, eventType);
sub.notify(this.parent, eventType);
}
}
}

4
src/Subscriber.ts
View File

@@ -1,5 +1,3 @@
import {IPublisher} from "./Publisher";
export default interface ISubscriber {
notify<T extends string | number>(publisher: IPublisher<T>, event: T | "all" | T[]): void;
notify<T extends string | number>(publisher: unknown, event: T | "all" | T[]): void;
}

3
src/ui/BeatGroup/Beat/Beat.css
View File

@@ -8,8 +8,8 @@
}
.beat-title {
line-height: 2em;
width: 3em;
line-height: 32px;
margin: 0;
}
@@ -29,4 +29,5 @@
.beat {
width: max-content;
margin-bottom: 4px;
}

2
src/ui/BeatGroup/Beat/BeatUnit/BeatUnit.css
View File

@@ -1,7 +1,7 @@
.beat-unit {
width: 2em;
height: 2em;
margin-right: 0.2em;
margin-right: 4px;
background-color: var(--color-ui-neutral-dark);
border-width: 0.1em 0.1em 0.1em 0.1em;
border-color: var(--color-ui-neutral-dark);

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

@@ -17,11 +17,9 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
private beatGroup: BeatGroup;
private barCountInput!: NumberInputView;
private timeSigUpInput!: NumberInputView;
private loopSettingsView!: BeatLikeLoopSettingsView;
private autoBeatLengthCheckbox!: BoolBoxView;
private beatSettingsViews: BeatSettingsView[] = [];
private beatSettingsContainer!: HTMLDivElement;
private autoBeatOptions!: HTMLElement;
constructor(options: BeatGroupSettingsUINodeOptions) {
super(options);
@@ -31,6 +29,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
BeatGroupEvents.TimeSigUpChanged,
BeatEvents.DisplayTypeChanged,
BeatGroupEvents.BeatListChanged,
BeatGroupEvents.LockingChanged,
]);
}
@@ -39,14 +38,14 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
this.barCountInput.setValue(this.beatGroup.getBarCount());
} else if (event === BeatGroupEvents.TimeSigUpChanged) {
this.timeSigUpInput.setValue(this.beatGroup.getTimeSigUp());
} else if (event === BeatEvents.DisplayTypeChanged) {
if (this.beatGroup.isLooping()) {
this.autoBeatOptions.classList.add("visible");
} else {
this.autoBeatOptions.classList.remove("visible");
}
} else if (event === BeatGroupEvents.BeatListChanged) {
this.remakeBeatSettingsViews();
} else if (event === BeatGroupEvents.LockingChanged) {
if (this.beatGroup.barsLocked()) {
this.barCountInput.disable();
} else {
this.barCountInput.enable();
}
}
}
@@ -70,7 +69,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beatGroup});
this.barCountInput = new NumberInputView({
label: "Bars:",
initialValue: this.beatGroup.getBarCount(),
@@ -88,17 +86,6 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
value: this.beatGroup.autoBeatLengthOn(),
onInput: (isChecked: boolean) => this.beatGroup.setIsUsingAutoBeatLength(isChecked),
});
this.autoBeatOptions = UINode.make("div", {
classes: ["beat-group-settings-option-group"],
subs: [
UINode.make("div", {
classes: ["beat-group-settings-autobeat-option", "beat-group-settings-option"],
subs: [
this.autoBeatLengthCheckbox.render(),
],
}),
]
});
this.remakeBeatSettingsViews();
this.node = UINode.make("div", {
classes: ["beat-group-settings"],
@@ -118,13 +105,17 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
this.barCountInput.render(),
],
}),
this.loopSettingsView.render(),
this.autoBeatOptions,
UINode.make("div", {
classes: ["beat-group-settings-bar-count", "beat-group-settings-option"],
subs: [
this.autoBeatLengthCheckbox.render(),
],
}),
this.beatSettingsContainer,
UINode.make("button", {
innerText: "New Track",
onclick: () => this.beatGroup.addBeat(),
}),
this.beatSettingsContainer
],
}),
],

25
src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css
View File

@@ -1,25 +0,0 @@
.loop-settings {
}
.loop-settings-option-group {
}
.loop-settings-option > label {
width: 5em;
text-align: left;
}
.loop-settings > p {
margin: 0;
font-weight: bold;
text-align: center;
}
.loop-settings-option {
display: flex;
justify-content: center;
}
.loop-settings-option.hide {
display: none;
}

30
src/ui/BeatSettings/BeatSettings.css
View File

@@ -1,8 +1,17 @@
.beat-settings {
padding: 1em;
display: inline-flex;
margin-bottom: 0.5em;
display: flex;
height: 3.5em;
text-align: center;
justify-content: space-evenly;
align-items: center;
justify-content: space-between;
}
.beat-settings > * {
margin-right: 0.2em;
}
.beat-settings:last-child {
margin-right: 0;
}
.beat-settings-time-sig-up {
@@ -26,6 +35,19 @@
}
.beat-settings-name-field {
margin: auto auto auto auto;
width: 5em;
}
.beat-settings .loop-settings {
text-align: left;
flex: auto;
}
.beat-settings .loop-settings-option.hide {
display: none;
}
.beat-settings .loop-settings-option {
flex: auto;
padding-right: 1em;
}

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

@@ -4,6 +4,9 @@ import UINode, {UINodeOptions} from "../UINode";
import ISubscriber from "../../Subscriber";
import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
import {IPublisher} from "../../Publisher";
import BeatLike from "../../BeatLike";
import NumberInputView from "../Widgets/NumberInput/NumberInputView";
import BoolBoxView from "../Widgets/BoolBox/BoolBoxView";
export type BeatSettingsViewUINodeOptions = UINodeOptions & {
beat: Beat,
@@ -12,7 +15,11 @@ export type BeatSettingsViewUINodeOptions = UINodeOptions & {
export default class BeatSettingsView extends UINode implements ISubscriber {
private beat: Beat;
private nameInput!: HTMLInputElement;
private loopSettingsView!: BeatLikeLoopSettingsView;
private deleteButton!: HTMLButtonElement;
private loopLengthInput!: NumberInputView;
private loopCheckbox!: BoolBoxView;
private loopLengthSection!: HTMLDivElement;
private sub!: { unbind: () => void };
constructor(options: BeatSettingsViewUINodeOptions) {
super(options);
@@ -21,34 +28,79 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
}
private setupBindings() {
this.beat.addSubscriber(this, "all");
this.sub = this.beat.addSubscriber(this, "all");
}
setBeat(beat: Beat): void {
this.sub.unbind();
this.beat = beat;
this.loopSettingsView.setBeatLike(beat);
this.setupBindings();
this.notify(null, BeatEvents.NewName);
this.notify(null, BeatEvents.LoopLengthChanged);
this.notify(null, BeatEvents.DisplayTypeChanged);
}
notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
if (event === BeatEvents.NewName) {
this.nameInput.value = this.beat.getName();
} else if (event === BeatEvents.LoopLengthChanged) {
this.loopLengthInput.setValue(this.beat.getLoopLength());
} else if (event === BeatEvents.DisplayTypeChanged) {
this.loopCheckbox.setValue(this.beat.isLooping());
if (this.beat.isLooping()) {
this.loopLengthSection.classList.remove("hide");
} else {
this.loopLengthSection.classList.add("hide");
}
}
}
rebuild(): HTMLElement {
this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
this.nameInput = UINode.make("input", {
value: this.beat.getName(),
classes: ["beat-settings-name-field"],
type: "text",
oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
});
this.deleteButton = UINode.make("button", {
classes: ["beat-settings-delete"],
innerText: "Delete",
onclick: () => this.beat.delete(),
});
this.loopLengthInput = new NumberInputView({
initialValue: this.beat.getLoopLength(),
onDecrement: () => this.beat.setLoopLength(this.beat.getLoopLength() - 1),
onIncrement: () => this.beat.setLoopLength(this.beat.getLoopLength() + 1),
onNewInput: (input: number) => this.beat.setLoopLength(input),
});
this.loopCheckbox = new BoolBoxView({
label: "Loop:",
value: this.beat.isLooping(),
onInput: (isChecked: boolean) => this.beat.setLooping(isChecked),
});
this.loopLengthSection = UINode.make("div", {
classes: ["loop-settings-option"],
subs: [
this.loopLengthInput.render(),
],
});
if (this.beat.isLooping()) {
this.loopLengthSection.classList.remove("hide");
} else {
this.loopLengthSection.classList.add("hide");
}
this.node = UINode.make("div", {
classes: ["beat-settings"],
subs: [
this.nameInput,
this.loopSettingsView.render(),
UINode.make("div", {
classes: ["loop-settings"],
subs: [
this.loopCheckbox.render(),
]
}),
this.loopLengthSection,
this.deleteButton,
],
});
return this.node;

2
src/ui/Root/Root.css
View File

@@ -25,7 +25,7 @@
background-color: var(--color-bg-light);
height: 100%;
width: 30em;
padding: 0 3em 0 3em;
padding: 0 2em 0 2em;
overflow: scroll;
display: inline-block;
}

24
src/ui/Widgets/NumberInput/NumberInput.css
View File

@@ -3,9 +3,19 @@
}
.number-input-label {
display: none;
}
.number-input-label.top {
display: block;
margin-bottom: 0.5em;
}
.number-input-label.left {
display: inline-block;
margin-right: 0.5em;
}
input[type="number"].number-input-input {
-webkit-appearance: textfield;
-moz-appearance: textfield;
@@ -41,3 +51,17 @@ input[type="number"].number-input-input::-webkit-outer-spin-button {
.number-input-dec {
border-radius: 0.5em 0 0 0.5em;
}
.number-input.disabled {
filter: brightness(0.8);
}
.number-input.disabled input[type="number"].number-input-input {
color: var(--color-p-light);
background-color: var(--color-ui-neutral-dark);
}
.number-input.disabled .number-input-button {
cursor: default;
}
.number-input.disabled .number-input-button:hover {
background-color: var(--color-ui-neutral-dark);
}

15
src/ui/Widgets/NumberInput/NumberInputView.ts
View File

@@ -4,6 +4,7 @@ import "./NumberInput.css";
type NumberInputUINodeOptionsBase = UINodeOptions & {
label?: string,
initialValue?: number,
labelPosition?: "top" | "left",
}
type NumberInputUINodeOptionsIncDecInput = NumberInputUINodeOptionsBase & {
@@ -28,6 +29,7 @@ export default class NumberInputView extends UINode {
private labelElement!: HTMLLabelElement;
private mainElement!: HTMLDivElement;
private inputElement!: HTMLInputElement;
private labelPosition: "top" | "left";
private value: number;
private label: string | null;
private onIncrement: (() => void) | null;
@@ -38,6 +40,7 @@ export default class NumberInputView extends UINode {
constructor(options: NumberInputUINodeOptions) {
super(options);
this.labelPosition = options.labelPosition ?? "top";
this.label = options.label ?? "";
this.value = options.initialValue ?? 0;
this.onDecrement = options.onDecrement ?? null;
@@ -59,6 +62,16 @@ export default class NumberInputView extends UINode {
}
}
disable(): void {
this.mainElement.classList.add("disabled");
this.inputElement.disabled = true;
}
enable(): void {
this.mainElement.classList.remove("disabled");
this.inputElement.disabled = false;
}
setValue(value: number): void {
this.value = value;
this.inputElement.valueAsNumber = value;
@@ -66,7 +79,7 @@ export default class NumberInputView extends UINode {
rebuild(): HTMLDivElement {
this.labelElement = UINode.make("label", {
classes: ["number-input-label"],
classes: ["number-input-label", this.labelPosition],
innerText: this.label ?? "",
});
if (this.label !== null) {

9
src/utils.ts
View File

@@ -1,3 +1,12 @@
export function isPosInt(maybePosInt: number): boolean {
return (maybePosInt | 0) === maybePosInt && maybePosInt > 0;
}
export function greatestCommonDivisor(a: number, b: number): number {
while (b !== 0) {
const temp = b;
b = a % b;
a = temp;
}
return a;
}