Сделать историю?

[makar3000]

Доброй ночи! Мои мозги закипают уже

Имеется набор функций моего редактора, перед выполнением каждой фукции я сохраняю прошлый результат всего редактора в массив. Есть кнопка "Вернуть" при нажатии возвращается преведущий результат...

Дело в том что такой способ полностью работает, но так как я в массив заношу каждый раз огромный код сжатый код, хотелось бы ограничить "Возвращение" до 10 этапов

Как реализовано у меня:

Заход1:
Меняем данные в редакторе и пытаемся вернутся back(); => удивительно но работает сколько бы раз не возвращались (до 10)
Заход2:
Пытаемся после возвращений что-то изменить данные редактора и пытаемся вернутся back(); => не хочет возвращаться вообще

h_i = 1; // указал единицу так как в массиве первый ключ 1
history = [];

addhistory(); // Запускаю первый раз что бы добавить данные "как есть"

function addhistory() {
   content = '';//тут я загоняю сгенерированный код редактором в JSON
  
   if( history.length > 11 ) { // на 10 раз
     h_i = 1;
     history = [];
   }


   history.unshift(content);


}

function back() {
  if( history.length > h_i ) { //смотрим что-бы хватало истории 
     readcontent( history[ h_i ] ); // возвращаем предыдущие данные
     h_i++;
  }
}

[bes]

 if( history.length > 11 ) { // на 10 раз
     h_i = 1;
     history = [];
   }

то есть ты каждый раз обнуляешь после 11 сохранений
копируй или смещай элементы массива вперед, в конец добавляй последний результат сохранения

[makar3000]

Делал вместо очистки .pop() все работало! Но если по второму кругу нажимать back() то в массиве были данные из первого круга и возвращалось то что было в первом круге а не во втором

[bes]

Делал вместо очистки .pop() все работало! Но если по второму кругу нажимать back() то в массиве были данные из первого круга и возвращалось то что было в первом круге а не во втором

<input>
<button>save</button>
<script>
document.querySelector("button").addEventListener("click", function () {
	if (!this.mas) this.mas = [];
	if (this.mas.length > 9) this.mas.shift();
	this.mas.push(this.previousElementSibling.value);
	console.log(this.mas);
});
</script>

[bes]

опиши логику переходов по истории

<input>
<button class="save">save</button>
<button class="back">back</button>
<button class="forward">forward</button>

<script>
function addElement(element, mas, limit) {
	if (mas.length > limit - 1) mas.shift();
	mas.push(element);
}

document.querySelector(".save").addEventListener("click", function () {
	var backBut = document.querySelector(".back");
	delete backBut.n;
	if (!this.mas) this.mas = [];
	var input = document.querySelector("input");
	addElement(input.value, this.mas, 10);
	input.select();
	console.log(this.mas);
});
document.querySelector(".back").addEventListener("click", function () {
	var saveBut = document.querySelector(".save");
	if (!saveBut.mas) saveBut.mas = [];
	mas = saveBut.mas;
	if (this.n == undefined) {
		(!mas.length) ? this.n = 0 : this.n = mas.length - 1;
	}
	(this.n <= 0) ? this.n = 0 : this.n--;
	document.querySelector("input").value = mas[this.n]; 
	console.log("n=" + this.n + "; mas[n]=" + mas[this.n]);
});
</script>

[Яростный Меч]

опиши логику переходов по истории

Обычно логика такая (если по уму делать):

есть массив (очередь), и есть указатель на текущий пункт в нем. Всё что перед указателем - "область повторов", прочее - "область отмен" (обе области могут быть пустые).

Функция undo - если есть команды в "области отмен", отменяем команду, на которой стоит указатель, перемещаем оный на шаг назад.

Функция redo - если есть команды в "области повторов", перемещаем указатель на шаг вперед и выполняем команду под ним.

Функция action (юзер хочет что-то сделать) - удаляем всё из "области повторов", формируем команду, ставим перед указателем, делаем redo. Если в очереди стало больше 10 элементов, удаляем самый старый.


Каждый элемент в очереди - команда, которую можно выполнить или отменить.

[bes]

Обычно логика такая (если по уму делать):

есть массив (очередь), и есть указатель на текущий пункт в нем. Всё что перед указателем - "область повторов", прочее - "область отмен" (обе области могут быть пустые).

Функция undo - если есть команды в "области отмен", отменяем команду, на которой стоит указатель, перемещаем оный на шаг назад.

Функция redo - если есть команды в "области повторов", перемещаем указатель на шаг вперед и выполняем команду под ним.

Функция action (юзер хочет что-то сделать) - удаляем всё из "области повторов", формируем команду, ставим перед указателем, делаем redo. Если в очереди стало больше 10 элементов, удаляем самый старый.


Каждый элемент в очереди - команда, которую можно выполнить или отменить.

отобрази на мой пример с тремя кнопками
save - action - удаляем все предыдущие элементы массива перед текущим, добавляем элемент в конец массива
back - undo - переходим на предыдущий элемент массива, если он есть
forward - redo - переходим на последующий элемент массива, если он есть
так?

[makar3000]

Обычно логика такая (если по уму делать):

есть массив (очередь), и есть указатель на текущий пункт в нем. Всё что перед указателем - "область повторов", прочее - "область отмен" (обе области могут быть пустые).

Функция undo - если есть команды в "области отмен", отменяем команду, на которой стоит указатель, перемещаем оный на шаг назад.

Функция redo - если есть команды в "области повторов", перемещаем указатель на шаг вперед и выполняем команду под ним.

Функция action (юзер хочет что-то сделать) - удаляем всё из "области повторов", формируем команду, ставим перед указателем, делаем redo. Если в очереди стало больше 10 элементов, удаляем самый старый.


Каждый элемент в очереди - команда, которую можно выполнить или отменить.

Что-то я не понял, так что-ли?:

action и redo у меня не зависимы, action происходит в редакторе, а redo конкретно по кнопке исполняется

var history = [];
var ukazatel;

function redo() {
  if( ! history[ ukazatel + 1 ] ) {
         return false; //Нет в области повторов
    }
     ukazatel++;
    command = history[ ukazatel ]; 
   //Выполняем
}

function undo() {
    if( ! history[ ukazatel - 1 ] ) {
         return false; //Нет в области отмен
    }

    command = history[ ukazatel ]; 
   //Отмена
    ukazatel--;
} 

function action() {
  if( ukazatel == undefined ) 
     ukazatel = 1;
  else
     ukazatel++;

  history[ ukazatel-1 ] = COMMAND; // Добавляем команду
  
  if( history.length > 10 ) {
     history.pop(); // Удаляем последний элемент
  }
}

[Яростный Меч]

Вот набросок очереди команд:

function CommandQueue(limit) {
  this._limit = limit || 10;
  this._arr = [];
  this._pointer = -1;
}

CommandQueue.prototype.undoCount = function() {
  return this._pointer + 1;
};
CommandQueue.prototype.redoCount = function() {
  return this._arr.length - this._pointer - 1;
};

CommandQueue.prototype.undo = function() {
  if (!this.undoCount()) {
    return false;
  }
  this._arr[this._pointer].undo();
  this._pointer--;
  return true;
};

CommandQueue.prototype.redo = function() {
  if (!this.redoCount()) {
    return false;
  }
  this._pointer++;
  this._arr[this._pointer].redo();
  return true;
};

CommandQueue.prototype.action = function(command) {
  this._arr.splice(this._pointer + 1, this.redoCount(), command);
  this.redo();
  if (this._arr.length > this._limit) {
    this._arr.shift();
    this._pointer--;
  }
};

использование:

var q = new CommandQueue(10);
q.action({
  undo: function() {...},
  redo: function() {...}
});

[makar3000]

Спасибо, вы очень помогли. Разобрался. Вопрос решен