Added octave and fifth markers for the pitch shift effect slider.

Author: johnnesky

editor/FilterEditor.ts

@@ -27,7 +27,7 @@ export class FilterEditor {
 	);
 	private readonly _label: HTMLDivElement = HTML.div({style: "position: absolute; bottom: 0; left: 2px; font-size: 8px; line-height: 1; pointer-events: none;"});
 
-	public readonly container: HTMLElement = HTML.div({class: "filterEditor", style: "height: 2em; position: relative;"},
+	public readonly container: HTMLElement = HTML.div({class: "filterEditor", style: "height: 100%; position: relative;"},
 		this._svg,
 		this._label,
 	);

editor/HarmonicsEditor.ts

@@ -23,7 +23,7 @@ export class HarmonicsEditor {
 		this._lastControlPointContainer,
 	);
 
-	public readonly container: HTMLElement = HTML.div({class: "harmonics", style: "height: 2em;"}, this._svg);
+	public readonly container: HTMLElement = HTML.div({class: "harmonics", style: "height: 100%;"}, this._svg);
 
 	private _mouseX: number = 0;
 	private _mouseY: number = 0;

editor/SongEditor.ts

@@ -211,7 +211,10 @@ export class SongEditor {
 	private readonly _pulseWidthSlider: Slider = new Slider(input({style: "margin: 0;", type: "range", min: "0", max: Config.pulseWidthRange - 1, value: "0", step: "1"}), this._doc, (oldValue: number, newValue: number) => new ChangePulseWidth(this._doc, oldValue, newValue));
 	private readonly _pulseWidthRow: HTMLDivElement = div({class: "selectRow"}, span({class: "tip", onclick: ()=>this._openPrompt("pulseWidth")}, "Pulse Width:"), this._pulseWidthSlider.input);
 	private readonly _pitchShiftSlider: Slider = new Slider(input({style: "margin: 0;", type: "range", min: "0", max: Config.pitchShiftRange - 1, value: "0", step: "1"}), this._doc, (oldValue: number, newValue: number) => new ChangePitchShift(this._doc, oldValue, newValue));
-	private readonly _pitchShiftRow: HTMLDivElement = div({class: "selectRow"}, span({class: "tip", onclick: ()=>this._openPrompt("pitchShift")}, "Pitch Shift:"), this._pitchShiftSlider.input);
+	private readonly _pitchShiftTonicMarkers: HTMLDivElement[] = [div({class: "pitchShiftMarker", style: {color: ColorConfig.tonic}}), div({class: "pitchShiftMarker", style: {color: ColorConfig.tonic, left: "50%"}}), div({class: "pitchShiftMarker", style: {color: ColorConfig.tonic, left: "100%"}})];
+	private readonly _pitchShiftFifthMarkers: HTMLDivElement[] = [div({class: "pitchShiftMarker", style: {color: ColorConfig.fifthNote, left: (100*7/24)+"%"}}), div({class: "pitchShiftMarker", style: {color: ColorConfig.fifthNote, left: (100*19/24)+"%"}})];
+	private readonly _pitchShiftMarkerContainer: HTMLDivElement = div({style: "display: flex; position: relative;"}, this._pitchShiftSlider.input, div({class: "pitchShiftMarkerContainer"}, this._pitchShiftTonicMarkers, this._pitchShiftFifthMarkers));
+	private readonly _pitchShiftRow: HTMLDivElement = div({class: "selectRow"}, span({class: "tip", onclick: ()=>this._openPrompt("pitchShift")}, "Pitch Shift:"), this._pitchShiftMarkerContainer);
 	private readonly _detuneSlider: Slider = new Slider(input({style: "margin: 0;", type: "range", min: "0", max: Config.detuneMax, value: "0", step: "1"}), this._doc, (oldValue: number, newValue: number) => new ChangeDetune(this._doc, oldValue, newValue));
 	private readonly _detuneRow: HTMLDivElement = div({class: "selectRow"}, span({class: "tip", onclick: ()=>this._openPrompt("detune")}, "Detune:"), this._detuneSlider.input);
 	private readonly _distortionSlider: Slider = new Slider(input({style: "margin: 0;", type: "range", min: "0", max: Config.distortionRange - 1, value: "0", step: "1"}), this._doc, (oldValue: number, newValue: number) => new ChangeDistortion(this._doc, oldValue, newValue));
@@ -762,6 +765,9 @@ export class SongEditor {
 				this._pitchShiftRow.style.display = "";
 				this._pitchShiftSlider.updateValue(instrument.pitchShift);
 				this._pitchShiftSlider.input.title = (instrument.pitchShift - Config.pitchShiftCenter) + " semitone(s)";
+				for (const marker of this._pitchShiftFifthMarkers) {
+					marker.style.display = this._doc.showFifth ? "" : "none";
+				}
 			} else {
 				this._pitchShiftRow.style.display = "none";
 			}

editor/SpectrumEditor.ts

@@ -24,7 +24,7 @@ export class SpectrumEditor {
 		this._arrow,
 	);
 
-	public readonly container: HTMLElement = HTML.div({class: "spectrum", style: "height: 2em;"}, this._svg);
+	public readonly container: HTMLElement = HTML.div({class: "spectrum", style: "height: 100%;"}, this._svg);
 
 	private _mouseX: number = 0;
 	private _mouseY: number = 0;