svg要素のonclickを元に戻してやり直すには？

Question

私は動的であるsvgテキストの塗りつぶしを持っています。ユーザーが取り消しボタンをクリックすると、それはsvgとtextareaを元に戻す必要があり、ユーザーがやり直しボタンをクリックすると、svgテキストの塗りつぶしとテキストエリアをやり直す必要があります。私は、テキストエリアに完了して元に戻すと機能をやり直しができますが、アンドゥ/リドゥについてのあなたに私の最後の返信に気づいた場合ではないSVG要素で

$("#enter-text").on("keypress",function(){ 
$("#svg_id").html($(this).val()); 
    }) 

//this value is kept small for testing purposes, you'd probably want to use sth. between 50 and 200 
const stackSize = 10; 

    //left and right define the first and last "index" you can actually  navigate to, a frame with maximum stackSize-1 items between them. 
    //These values are continually growing as you push new states to the stack, so that the index has to be clamped to the actual index in stack by  %stackSize. 
    var stack = Array(stackSize), left=0, right=0, index = 0, timeout; 
//push the first state to the stack, usually an empty string, but not necessarily 
stack[0] = $("#enter-text").val(); 
updateButtons(); 

$("#enter-text").on("keydown keyup change", detachedUpdateText); 
$("#undo").on("click", undo); 
$("#redo").on("click", redo); 

//detach update 
function detachedUpdateText(){ 
    clearTimeout(timeout); 
    timeout = setTimeout(updateText, 500); 
} 

    function updateButtons(){ 
    //disable buttons if the index reaches the respective border of the  frame 
    //write the amount of steps availabe in each direction into the data- count attribute, to be processed by css 
     $("#undo") 
     .prop("disabled", index === left) 
     .attr("data-count", index-left); 

     $("#redo") 
     .prop("disabled", index === right) 
      .attr("data-count", right-index); 

    //show status 
     $("#stat").html(JSON.stringify({ 
     left, 
     right, 
     index, 
     "index in stack": index % stackSize, 
     stack 
    }, null, 4)) 
} 

function updateText(){ 
    var val = $("#enter-text").val().trimRight(); 
    //skip if nothing really changed 
    if(val === stack[index % stackSize]) return; 

    //add value 
    stack[++index % stackSize] = val; 

    //clean the undo-part of the stack 
    while(right > index) 
     stack[right-- % stackSize] = null; 

    //update boundaries 
    right = index; 
    left = Math.max(left, right+1-stackSize); 

    updateButtons(); 
} 

function undo(){ 
    if(index > left){ 
     $("#enter-text").val(stack[--index % stackSize]); 
     updateButtons(); 
    } 
    } 

    function redo(){ 
    if(index < right){ 
     $("#enter-text").val(stack[++index % stackSize]); 
     updateButtons(); 
    } 
    } 

https://jsfiddle.net/yvp3jedr/6/

Answer 1

$("#enter-text").on("keypress", function() { 
    $("#svg_id").text($(this).val()); 
}) 

//this value is kept small for testing purposes, you'd probably want to use sth. between 50 and 200 
const stackSize = 10; 

//left and right define the first and last "index" you can actually navigate to, a frame with maximum stackSize-1 items between them. 
//These values are continually growing as you push new states to the stack, so that the index has to be clamped to the actual index in stack by %stackSize. 
var stack = Array(stackSize), left = 0, right = 0, index = 0, timeout; 
//push the first state to the stack, usually an empty string, but not necessarily 
stack[0] = $("#enter-text").val(); 
updateButtons(); 

$("#enter-text").on("keydown keyup change", detachedUpdateText); 
$("#undo").on("click", undo); 
$("#redo").on("click", redo); 

//detach update 
function detachedUpdateText() { 
    clearTimeout(timeout); 
    timeout = setTimeout(updateText, 500); 
} 

function updateButtons() { 
    //disable buttons if the index reaches the respective border of the frame 
    //write the amount of steps availabe in each direction into the data-count attribute, to be processed by css 
    $("#undo") 
     .prop("disabled", index === left) 
     .attr("data-count", index - left); 

    $("#redo") 
     .prop("disabled", index === right) 
     .attr("data-count", right - index); 

    //show status 
    $("#stat").html(JSON.stringify({ 
     left, 
     right, 
     index, 
     "index in stack": index % stackSize, 
     stack 
    }, null, 4)) 
} 

function updateText() { 
    var val = $("#enter-text").val().trimRight(); 
    //skip if nothing really changed 
    if (val === stack[index % stackSize]) return; 

    //add value 
    stack[++index % stackSize] = val; 

    //clean the undo-part of the stack 
    while (right > index) 
     stack[right-- % stackSize] = null; 

    //update boundaries 
    right = index; 
    left = Math.max(left, right + 1 - stackSize); 

    updateButtons(); 
} 

function undo() { 
    if (index > left) { 
     var text = stack[--index % stackSize]; 
     $("#enter-text").val(text); 
     $("#svg_id").text(text); 
     updateButtons(); 
    } 
} 

function redo() { 
    if (index < right) { 
     var text = stack[++index % stackSize]; 
     $("#enter-text").val(text); 
     $("#svg_id").text(text); 
     updateButtons(); 
    } 
}