자바스크립트 undo, redo 구현질문드립니다..

Question

안녕하세요 춉개발자입니다.

객체에 대한 undo, redo를 구현하고 있습니다만..

감조차 서지 않아서 질문드립니다..ㅠㅠ

http://geometricnet.sourceforge.net/examples/undo-redo.html

이 사이트를 참고하여 openLayers를 사용하여 만들고 있지만

기존의 openLayers와 겹쳐 처음부터 난관인데요.. 혹시 저사이트에서 redo,undo의 사용하는 부분만 알려주실수 있을까요..

아직 전체적으로 소스를 볼수 있는 눈이 아니라 무엇이 어디에 쓰이는지 자세히 따라가봐도 다 사용하는거 같습니다.ㅠㅠ

코딩하는그리즈만 · Accepted Answer

	/**
	 * APIMethod: undo
	 * perform undo operation 
	 */
	undo: function() {	
		data = this.getUndoData();
		//console.log("data :" + data);
		for (component in data){
			//console.log("component: "+component);
			layer=map.getLayersByName(component)[0];
			//console.log("got layer, name: " + layer.name);
			for (editType in data[component]){
				//console.log("edittype : "+editType);
				for(var i=0;i

이 코드네요

전체소스(?)는 http://geometricnet.sourceforge.net/lib/UndoRedo.js 보시면 될거같네요

춉개발자 · Answer

코딩하는그리즈만님 답변 감사합니다.

저 소스의 js를 추가하여 해보았으나

openLayesrs.js 부분에서 property값의 에러로 인해 사용하지 못하고 있습니다..

스택을 사용하여 직접 만들려 하는데 혹 간단하게 알고리즘 설명 해주실수 있는지요..

아무리 구글링해도 자세히 적어가며 읽어도 이게 어떤원리인지 잘 모르겠습니다..ㅠㅠ

코딩하는그리즈만 · Answer

저도 아직 실력이 많이 부족합니다

제가 파악하기로는

UndoRedo.js

/**
	 * APIProperty: currentEditIndex
	 * {integer} - sequence number for editing the feature[s] 
	 */
	currentEditIndex: 0,
	/**
	 * Property: undoFeatures
	 * {array} - stack of the edit features
	 */
	undoFeatures: [],
	/**
	 * Property: redoFeatures
	 * {array} - stack of the undo features
	 */
	redoFeatures: [],
	/**
	 * Property: isEditMulty
	 * {boolean} - true if in one action multiple features are editied 
	 */
	isEditMulty: false,

글로벌 배열 변수를 선언해서 (undoFeatures , redoFeatures )

action (point feature 생성 or line 등등)을 생성(지도클릭)할때 onInsert -> onEdit -> undoFeatures.push(undoFeatures) 하여 이전의 행위(insert, update, delete)들을 push 하는거 같습니다.

this.undoFeatures[this.currentEditIndex][component][editType].push(feature);

currentEditIndex 이 변수를 통해 이전의 index를 찾아 실행 하는거 같고요.

음 이게 글로 정리하려니 어렵네요;

결론적으론 도형(point, line등) 생성(insert), 포인트이동(update), 삭제(delete)를 할때마다

그 작업을 배열에 저장하고 버튼을 클릭할때마다 반대편(undo를 클릭시 redo array)에 저장해서 이전 작업의 반대 작업(insert -> delete , delete-> insert)을 하는거 같네요

도움이 되셨으면 좋겠네요

코딩하는그리즈만 · Answer

설명드린다고는 했는데 알아보기 힘들겠네요 ㅠㅠ

디버그 모드에서 하나하나 추적하면서 하시면 금방 파악 하실 수 있을겁니다.

화이팅하시고 허접이지만 도움이 필요하시면 또 댓글남겨주세요~ㅠㅠ

춉개발자 · Answer

코딩하는그리즈만 님 답변 감사합니다!

결국 배열을 스택처럼 사용하면서 직접 만들어보고 있습니다!

코딩에 참고하겠습니다!

자바스크립트 undo, redo 구현질문드립니다..

5개의 답변

Q&A 목록