Commit 7f4f3477 authored by pumpkin's avatar pumpkin

Basic support of undo.

parent b5fe8b86
......@@ -28,6 +28,10 @@ select {
min-width: 200px;
}
.bg-dark {
background-color: #21252b !important;
}
.flex-column * {
margin: 5px 0;
}
......@@ -62,7 +66,7 @@ select {
min-width: auto;
}
.synth-tabs.nav-pills a.nav-link, #simpleMode {
.synth-tabs.nav-pills a.nav-link, .fixedBtn {
background-color: #282c34;
color: white;
}
......@@ -70,7 +74,7 @@ select {
background-color: white;
color: black;
}
.synth-tabs .nav-item, #simpleMode {
.synth-tabs .nav-item, .fixedBtn {
margin: 0 3px;
cursor: pointer;
}
......
var allInputs = document.querySelectorAll('fieldset input');
var allSelects = document.querySelectorAll('fieldset select');
synthHistoryInit();
for (let input of allInputs) {
input.addEventListener('input', function(event) {
let item = event.target;
setBadgeValue(item, item.value);
synthHistoryAdd(item.id, item.value);
sendMessage(item.name, item.value);
});
......@@ -20,6 +24,8 @@ for (let select of allSelects) {
select.addEventListener('change', function(event) {
let item = event.target;
synthHistoryAdd(item.id, item.value);
sendMessage(item.name, item.value);
});
}
......@@ -113,3 +119,9 @@ simpleModeBtn.addEventListener('click', function(event) {
item.hidden = hide;
}
});
var undoBtn = document.querySelector('#undo');
undoBtn.addEventListener('click', function(event) {
synthHistoryUndo();
});
......@@ -122,6 +122,8 @@ function mergeDataWithSysexMetadata(data, category) {
}
function parseCircuitPatch(circuitData) {
synthHistoryInit();
// Patch name
var patchNameArr = circuitData.slice(9, 25);
var patchName= "";
......@@ -152,6 +154,8 @@ function parseCircuitPatch(circuitData) {
if (item) {
item.value = synthValuesArr[i];
}
synthHistoryAdd(item.id, item.value);
}
}
......@@ -160,6 +164,7 @@ function resetPatch() {
return;
}
synthHistoryInit();
resetValues();
let synth = parseInt(document.querySelector('#synth').value) -1;
......@@ -191,6 +196,8 @@ function resetValues() {
} else {
item.value = 0;
}
synthHistoryAdd(item.id, item.value);
}
let patchName = document.querySelector('#patchName');
......@@ -321,8 +328,63 @@ function storePatch(slot) {
output.sendSysex([0, 32, 41], data);
}
function synthHistoryAdd(id, value) {
let length = synthHistory.length;
let item = {
"id": id,
"value": value
};
if (synthHistory[length -1] && synthHistory[length -1].id == id) {
synthHistory.pop();
}
synthHistory.push(item);
}
function synthHistoryInit() {
synthHistory = [];
}
function synthHistoryUndo() {
// Remove last action
let undo = synthHistory.pop();
// Retrive in history the last value of the element undone
let previousValue = synthHistoryGetPreviousValue(undo.id);
if (!previousValue) {
synthHistory.push(undo);
return;
}
// Get DOM element and set his previous value
let element = document.querySelector('#' + undo.id);
element.value = previousValue;
// Update badge if range input
if (element.type == 'range') {
setBadgeValue(element, element.value);
}
// Send message
sendMessage(element.name, element.value);
}
function synthHistoryGetPreviousValue(id) {
let reversedSynthHistory = synthHistory.slice().reverse();
for (var i = 0; i < reversedSynthHistory.length; i++) {
let item = reversedSynthHistory[i];
if (item.id == id) {
return item.value;
}
};
}
function writeSysexFile(data) {
var ab = new ArrayBuffer(data.length); //bytes is the array with the integer
var ab = new ArrayBuffer(data.length); // bytes is the array with the integer
var ia = new Uint8Array(ab);
for (var i = 0; i < data.length; i++) {
......
......@@ -25,10 +25,6 @@
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link btn-sm" id="simpleMode" data-toggle="tooltip" data-placement="bottom" title="Single oscillator and fewer parameters">Simple Mode</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Patch
......@@ -53,6 +49,14 @@
<div class="container-fluid">
<div class="nav btn-group justify-content-center" role="group">
</div>
<nav class="navbar fixed-bottom navbar-light bg-dark">
<a class="nav-link btn-sm fixedBtn" id="simpleMode" data-toggle="tooltip" data-placement="bottom" title="Single oscillator and fewer parameters">Simple Mode</a>
<a class="nav-link btn-sm fixedBtn" id="undo" data-toggle="tooltip" data-placement="bottom" title="Undo last action">Undo</a>
</nav>
<br/>
<ul class="nav nav-pills flex-column flex-sm-row justify-content-center synth1" role="tablist">
......@@ -69,13 +73,10 @@
<br/>
<p class="d-flex justify-content-between flex-column flex-md-row">
<input id="patchName" placeholder="Patch name" maxlength="16" name="name" class="patchName"/>
<select id="synth" >
<option value="1">Synth 1</option>
<option value="2">Synth 2</option>
</select>
<select id="category" default="0" >
<p class="d-flex flex-column flex-md-row">
<input id="patchName" placeholder="Patch name" maxlength="16" name="name" class="p-2 patchName"/>
<select class="p-2" id="category" default="0" >
<option value="0" selected>No category</option>
<option value="1">Arp</option>
<option value="2">Bass</option>
......@@ -92,6 +93,13 @@
<option value="13">User</option>
<option value="14">Voc/Tune</option>
</select>
<span class="ml-auto p-2"></span>
<select class="p-2" id="synth" >
<option value="1">Synth 1</option>
<option value="2">Synth 2</option>
</select>
</p>
<div class="tab-content synth1">
......@@ -5983,6 +5991,9 @@
</div>
</div>
<br/>
<br/>
</body>
<!-- Vendors -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment