logo image
메인
기술
HOME
기술

js용 undo/redo 를 위한 히스토리 객체와 exec 함수

목록
#undo #redo #history #js
// 히스토리(history)
let h = {
p:null,
v:null,
hs:[],
i:0,
limit:40,
'save':function(){
console.log('h.save');
this._push(this.v.toJson(this.v.elements[0]));
},
'_push':function(str){
if(this.i != this.hs.length-1){
this.hs = this.hs.splice(0,this.i+1);
}
this.hs.push(str);
if(this.hs.length > this.limit){
this.hs = this.hs.splice(1);
}
this.i =  this.hs.length-1;
},
'reset':function(){
console.log('h.reset');
this.i=-1;
this.hs=[];
this.save();
},
'undo':function(){
console.log('h.undo',this.i);
if((this.i-1)<0){ console.warn('undo',(this.i-1)); return false;}
// console.log(this.hs[this.i]);
this.i--;
this.v.replaceJson(this.v.elements[0],this.hs[this.i]);
this.v.$forceUpdate();
this.v.selectedEl = null
},
'redo':function(){
console.log('h.redo',this.i);
if((this.i+1)>=this.hs.length){ console.warn('redo',(this.i+1));return false;}
// console.log(this.hs[this.i]);
this.i++;
this.v.replaceJson(this.v.elements[0],this.hs[this.i]);
this.v.$forceUpdate();
this.v.selectedEl = null

},
};




exec:function(){
  let args = [...arguments];
  let cmd = args.shift();
  if(!this[cmd] &&  typeof this[cmd] !='function' ){console.error(cmd+'라는 메소드가 존재하지 않음');}
  let r = this[cmd].apply(this,args);
  if(cmd =='load' || cmd =='reset'){
    h.reset();
  }else if(cmd =='toHtml' || cmd =='toJson' || cmd=='selectEl' || cmd=='createEl'){
    h.reset();
  }else{
    h.save();
  }
  return r;
}

----=-------
xxx.aaa(1,2,3)
->
xxx.exec('aaa',1,2,3);
처럼 바꿔 호출하면 동작(cmd)에 따라서 h.save() 등으로 히스토리 저장을 함.

목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
game_tictactoe
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
:scope selector , querySelector 에서 this, self node 지정
4.18
4.19
4.20
4.21
4.22
4.23
ui_treemap
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4
tag