v1.0.1

small UI fixes
scroll optimisation (chromium)

css/style.css

@@ -250,6 +250,9 @@ button.button--play.button--play-loop {
 
 #arrange-main {
 	overflow: auto;
+	contain: content;
+	/*for chromium-based browsers only*/
+	-webkit-transform: translateZ(0);
 }
 
 #arrange-container {
@@ -281,6 +284,8 @@ button.button--play.button--play-loop {
 #pattern-main {
 	overflow-y: scroll;
 	overflow-x: auto;
+	contain: content;
+	-webkit-transform: translateZ(0);
 }
 
 #pattern-footer > button,
@@ -308,6 +313,8 @@ button.button--play.button--play-loop {
 	overflow-y: auto;
 	margin-bottom: calc(1rem + 16px + 60px);
 	padding: 4px 0;
+	contain: content;
+	-webkit-transform: translateZ(0);
 }
 
 #synth-main > div {

index.html

@@ -516,6 +516,14 @@
 			</div>
 		</div>
 
+		<div id="loading-modal" class="modal-container nodisplay">
+			<div class="modal-box">
+				<div class="modal-box-block">
+					Loading...
+				</div>
+			</div>
+		</div>
+
 		<div id="settings-modal-menu" class="modal-container nodisplay">
 			<div class="modal-box">
 				<div class="modal-box-block notranslate" translate="no">
@@ -630,12 +638,10 @@
 		<div id="midi-modal-menu" class="modal-container nodisplay">
 			<div class="modal-box">
 				<div class="modal-box-block">
-					<div>
-						<a id="link-midi-download" href="">Download MIDI</a>
-					</div>
+					<span>Export MIDI</span>
 				</div>
 				<div class="modal-box-block">
-					<span>Velocity curve</span>
+					<span class="dim-text">Velocity curve</span>
 					<select id="select-velocity-scale" autocomplete="off">
 						<option>Exponential</option>
 						<option>Linear</option>
@@ -644,12 +650,15 @@
 				</div>
 				<div class="modal-box-block">
 					<input type="checkbox" id="input-export-glide" autocomplete="off" checked>
-					<label for="input-export-glide">Note overlap for glide&sol;legato</label>
+					<label for="input-export-glide" class="dim-text">Note overlap for glide&sol;legato</label>
+				</div>
+				<div class="modal-box-block">
+					<input type="checkbox" id="input-export-expand" autocomplete="off">
+					<label for="input-export-expand" class="dim-text">Expand short notes to 16th</label>
 				</div>
 				<div class="modal-box-block">
 					<div>
-						<input type="checkbox" id="input-export-expand" autocomplete="off">
-						<label for="input-export-expand">Expand short notes to 16th</label>
+						<a id="link-midi-download" href="">Download MIDI</a>
 					</div>
 				</div>
 				<div class="modal-box-block modal-box-footer" id="export-menu-close-container">

js/arrange-ui.js

@@ -40,7 +40,7 @@ function ArrangeUi(songObj, onPatternSelectCallback, defaults) {
 		showPrompt("Enter pattern name", (result) => {
 
 			if (!result) {
-				console.log("Pattern NOT created");
+				showToast("Pattern NOT created");
 				return;
 			}
 

js/defaults.js

@@ -2,7 +2,7 @@
 
 const DEFAULT_PARAMS = {};
 
-DEFAULT_PARAMS.programVersion = "1.0";
+DEFAULT_PARAMS.programVersion = "1.0.1";
 DEFAULT_PARAMS.fileFormatVersion = "1.6";
 
 DEFAULT_PARAMS.maxPatternSteps = 64;

js/main.js

@@ -87,8 +87,8 @@ console.log("%c\u25A0 %c\u25B6 %c\u25A0 %c PulseQueue v" + DEFAULT_PARAMS.progra
 	arrangeUi.build();
 
 	const scheduler = new Scheduler(songObject, arrangeUi.setMarker, patternUi.setMarker);
-	const schedulerUi = new SchedulerUi(scheduler, arrangeUi.setLoopMarkers);
 
+	schedulerUi(scheduler, arrangeUi.setLoopMarkers);
 	menuInit(songObject, onSongChange, synthHelper.loadSynth, scheduler.renderSong, scheduler.exportMidiSequence);
 
 	document.getElementById("startup-loading-title").style.display = "none";
@@ -105,7 +105,7 @@ console.log("%c\u25A0 %c\u25B6 %c\u25A0 %c PulseQueue v" + DEFAULT_PARAMS.progra
 
 		switch (stopCommand) {
 			case "stop":
-				schedulerUi.stop();
+				scheduler.stop();
 				break;
 			case "release":
 				scheduler.release();

js/menu-init.js

@@ -31,12 +31,17 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 		let file = e.target.files[0];
 		if (!file)
 			return;
+		showModal("loading-modal");
 
 		let reader = new FileReader();
 		reader.onload = function (ev) {
 			let songStr = ev.target.result;
+
 			if (importSong(songStr))
 				hideModal("startup-modal-menu");
+
+			hideModal("loading-modal");
+
 		};
 		reader.readAsText(file);
 	}
@@ -83,18 +88,20 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 		if (!event.target.classList.contains("js-demo-entry"))
 			return;
 
-		let container = document.getElementById("demo-list-container");
-		container.innerHTML = "Loading...";
+		hideModal("demo-modal-menu");
+		showModal("loading-modal");
 
 		let filename = event.target.dataset.file;
 		fetch("data/tracks/" + filename).then(response => response.json()).then(data => {
-			importSong(JSON.stringify(data));
 
-			hideModal("demo-modal-menu");
-			hideModal("startup-modal-menu");
+			if (importSong(JSON.stringify(data)))
+				hideModal("startup-modal-menu");
+
+			hideModal("loading-modal");
 
 		}).catch(() => {
-			container.innerHTML = "Data loading error!";
+			hideModal("loading-modal");
+			showAlert("Data loading error!");
 		});
 	};
 
@@ -431,8 +438,7 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 
 		let synthName = songObj.getCurrentLayerSynthName();
 		let synthSelect = document.getElementById("button-synth-select");
-		synthSelect.innerHTML = "";
-		synthSelect.appendChild(document.createTextNode(synthName || "[none]"));
+		synthSelect.textContent = synthName || "[none]";
 
 		document.getElementById("button-color-select").style.backgroundColor =
 			DEFAULT_PARAMS.colorSet[songObj.currentPattern.colorIndex];
@@ -455,9 +461,11 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 			songObj.currentPattern.name = value;
 
 			let patternName = document.getElementById("pattern-name-area");
-			patternName.innerHTML = "";
-			patternName.appendChild(document.createTextNode(value));
+			patternName.textContent = value;
 			onSongChangeCallback(false);
+		} else {
+			event.target.value = songObj.currentPattern.name;
+			showToast("Pattern NOT renamed");
 		}
 	};
 
@@ -735,8 +743,7 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 
 		let synthName = songObj.getCurrentLayerSynthName() || "[none]";
 		let synthSelect = document.getElementById("button-synth-select");
-		synthSelect.innerHTML = "";
-		synthSelect.appendChild(document.createTextNode(synthName));
+		synthSelect.textContent = synthName;
 
 		if (isCreateNewLayer || isEmpty)
 			onSongChangeCallback(false);
@@ -788,8 +795,7 @@ function menuInit(songObj, onSongChangeCallback, loadSynthCallback, renderCallba
 	 */
 	function showSongTitle() {
 		let songTitle = document.getElementById("song-title-area");
-		songTitle.innerHTML = "";
-		songTitle.appendChild(document.createTextNode(songObj.title || "[untitled]"));
+		songTitle.textContent = songObj.title || "[untitled]";
 	}
 
 	function fillAdditionalValues() {

js/scheduler-ui.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function SchedulerUi(scheduler, setLoopMarkersCallback) {
+function schedulerUi(scheduler, setLoopMarkersCallback) {
 	let songPlayBtn = document.getElementById("button-arrange-play");
 	let patternPlayBtn = document.getElementById("button-pattern-play");
 	let barsInput = document.getElementById("input-loop-bars");
@@ -53,12 +53,6 @@ function SchedulerUi(scheduler, setLoopMarkersCallback) {
 		}
 	});
 
-	this.stop = function () {
-		scheduler.stop();
-		updateButtons(false, false);
-		removePlayMarkers();
-	};
-
 	function onForceStop() {
 		updateButtons(false, false);
 		removePlayMarkers();

js/scheduler.js

@@ -10,6 +10,11 @@ function Scheduler(songObj, barCallback, stepCallback) {
 
 	this.stop = () => {
 		stop();
+
+		if (onInnerStopCallback) {
+			onInnerStopCallback();
+			onInnerStopCallback = null;
+		}
 	}
 
 	this.playSong = () => {
@@ -57,31 +62,29 @@ function Scheduler(songObj, barCallback, stepCallback) {
 	}
 
 	this.playStopSong = (callback) => {
-		onInnerStopCallback = callback;
-
 		if (isPlaying) {
 			stop();
 			return false;
 		} else {
+			onInnerStopCallback = callback;
 			this.playSong();
 			return true;
 		}
 	}
 
 	this.playStopPattern = (callback) => {
-		onInnerStopCallback = callback;
-
 		if (isPlaying || !songObj.currentPattern) {
 			stop();
 			return false;
 		} else {
+			onInnerStopCallback = callback;
 			this.playPattern();
 			return true;
 		}
 	}
 
 	this.renderSong = (renderLength) => {
-		stop();
+		this.stop();
 
 		let schedulerData = {
 			stepIndex: 0,
@@ -280,8 +283,10 @@ function Scheduler(songObj, barCallback, stepCallback) {
 				if (realtimeBarCallback) {
 					console.log("Song END");
 					stop();
-					if (onInnerStopCallback)
+					if (onInnerStopCallback) {
 						onInnerStopCallback();
+						onInnerStopCallback = null;
+					}
 				}
 
 				return;
@@ -348,4 +353,4 @@ function Scheduler(songObj, barCallback, stepCallback) {
 			}
 		}
 	}
-};
+}

js/synth-helper.js

@@ -63,8 +63,7 @@ function SynthHelper(songObj, synthUi, rebuildPatternSynthListCallback) {
 
 			if (selectedSynthIndex == songObj.currentSynthIndex) {
 				let synthName = document.getElementById("synth-name-area");
-				synthName.innerHTML = "";
-				synthName.appendChild(document.createTextNode(value));
+				synthName.textContent = value;
 			}
 		}
 	});

js/synth.js

@@ -72,7 +72,7 @@ function Synth(outputNode, transportBPM) {
 
 	this.envelope.chain(this.ampAM);
 	this.ampAM.chain(this.ampout);
-	this.ampout.connect(outputNode);
+	this.ampout.chain(outputNode);
 
 	let freqSignal = new Tone.Signal({ units: "frequency" });
 	let lastVolumeMod = 0;
@@ -512,7 +512,7 @@ function Synth(outputNode, transportBPM) {
 			this.pan.disconnect();
 			this.pan.dispose();
 			this.pan = null;
-			this.ampAM.connect(this.ampout);
+			this.ampAM.chain(this.ampout);
 			console.log("remove pan");
 		}
 	}
@@ -697,4 +697,4 @@ function Synth(outputNode, transportBPM) {
 		freqSignal.dispose();
 		freqSignal = null;
 	}
-}
+}