🪵 4. Canvas Undo, Redo 구현 ‐ path 단위 관리

12/02 기준 현황

• 수정님 CRDT 작업에 합쳐져 적용되었습니다. (최종 : stroke 단위로 관리하기로 함)
• 아래 코드는 undo / redo 프로토타입으로 실제 사용되지 않았습니다.
• 아래로 이어지는 코드는 아직 CRDT가 구현 중인 단계에서, Undo & Redo의 프로토타입을 선구현 해본 내용입니다.

현재 상황

• stroke id를 key값으로, stroke에 해당하는 peerId, timestamp, {x,y}[], width, color 가 저장 되어있습니다.

Stroke = {
  points: {x,y}[];
  style: {color, width};
};

LWWRegister = {
	peerId,
	state: {
		peerId,
		timeStamp,
		value: Stroke 
	}
}

LWWMap = {
	strokeId: LWWRegister
}[]

구현 조건

• 나의 그리기만 undo, redo 되어야 합니다.. (상대 것은 그대로 남아있어야 함)
• mousemove 트리거 시마다 새로운 stroke, 즉 새로운 LWWRegister 객체가 생성 됩니다.

아이디어 Memo

• onMouseMove(마우스 움직일 때)
  • 데이터 보내기 (key, x,y,color,width)
    • undo 배열에 들어갈 key 값.
  • 배열에 {x,y}[] push
• onMouseLeave?(마우스 뗏을 때)
  • undo 배열에 {key, {x,y}[], color, width} push
• undo 했을때
  • undo 배열에서 pop해서, key에 해당하는 {x,y}를 null로 바꾸기
  • redo 배열에 {key, {x,y}[], color, width} push
• redo 했을 때
  • redo 배열에서 pop해서, key에 해당하는 {x, y}[]를 color, width로 바꾸기

설계

<규칙>

• 모든 Path는 pathStack(Map)에 저장되어 관리됩니다.
• 모든 Path는 pathID와 strokeID를 갖습니다.
• UNDO, REDO가 발생할 때마다, 캔버스 초기화 후 pathStack의 0번째 데이터부터 다시 그립니다.
  • UNDO : 현재 strokeID를 가진 path를 pathStack에서 전부 삭제합니다.
  • REDO : 다음 strokeID를 가진 path를 pathStack에 전부 복구시킵니다.
• 관리 단위
  • path : move 이벤트로 새 좌표가 추가될 때 마다 pathStack에 저장됩니다.
  • stroke : undo / redo의 기본 단위. up 또는 leave 이벤트 발생 시 strokeID가 myStrokeIDStack에 저장됩니다.

<속성>

• pathStack : map 객체. <pathID, PathData> 쌍으로 path 데이터를 저장합니다.
• myStrokeIDStack : 순서 지켜서 array 저장합니다.
• myStrokeIDIndex : 현재 stroke id를 가리킵니다.
• deletedPath : map 객체. pop된 pathData를 저장합니다. <pathID, value> 쌍으로 저장합니다.
• PathData 객체
  • userID : 사용자를 구분하는 고유한 ID 입니다.
  • strokeID : Stroke를 구분하는 고유한 ID 입니다.
  • path : 드로잉 경로를 저장하고 있는 path2D 객체입니다.
  • style : 경로의 색상, 두께, 타입 정보를 저장합니다.

<메소드>

• pushPath : 새 path 데이터를 인자로 받아 pathStack에 추가합니다.
• popPath : pathID를 인자로 받아 해당하는 path의 pathData를 pathStack에서 삭제합니다. (null 배정)
• restorePath : 복구할 pathID와 PathData를 인자로 받아 pathStack에서 복구합니다. (null → PathData)
• pushMyStroke : strokeID 를 인자로 받아 myStrokeIDStack에 저장합니다.
• popStroke : 현재 strokeID를 가진 path의 pathData를 pathStack에서 모두 삭제합니다.
• restoreStroke : 다음 strokeID를 가진 path의 pathData를 pathStack에서 모두 복구합니다.
• undo : undo 기능 실행 후 캔버스 다시 그립니다.
• redo : redo 기능 실행 후 캔버스 다시 그립니다.

구현

path 단위로 관리한 redo & undo 시연

• redo, undo 시에도 드로잉 우선순위가 지켜지는 것을 확인 가능합니다.

Type & Class

PathStyle

• PathData에 포함될 path의 스타일입니다.
  • color : 색상 (16진수 표기법)
  • lineWidth : 선 두께
  • type
    • path : 선을 그릴 경우
    • shape : 모양을 그릴 경우 (rect, arc 등으로 도형을 그렸을 경우)

export interface PathStyle {
  color: string;
  lineWidth: number;
  type: 'path' | 'shape';
}

PathData

• Path를 그리는데 필요한 데이터들을 갖습니다.
  • path : 경로가 저장된 path2D 객체
  • userID : 그린 플레이어의 ID
  • strokeID : path가 소속된 선의 ID.
  • style : 선의 style 객체를 저장

class PathData {
  path: Path2D;
  userID: number;
  strokeID: string;
  style: PathStyle;
  constructor(userId: number, strokeID: string, path: Path2D, pathStyle: PathStyle) {
    this.userID = userId;
    this.strokeID = strokeID;
    this.path = path;
    this.style = pathStyle;
  }
}

StrokeManager

• undo, redo와 관련된 전체 path 및 stroke 데이터를 저장합니다.
• undo, redo 함수는 실행될 때 마다 캔버스를 초기화하고 전체 path를 다시 그리는 작업을 포함합니다.
• pathStack
  • 모든 pathData를 <pathID, pathData> 쌍으로 갖습니다.
  • 리드로우 시 해당 pathStack의 첫 번째 path부터 마지막 path까지 다시 그립니다.
• myStrokeIDStack
  • 내가 그린 Stroke를 관리하기 위한 배열입니다.
  • 선 하나가 완성되면 (일반적으로 up 혹은 leave 이벤트) myStrokeIDStack에 현재의 strokeID를 추가합니다.
  • myStrokeIDIter는 undo, redo 발생 시 마다 증감하며, myStrokeIDStack에서 현재 어느 위치를 가리켜야 하는 지를 알려줍니다.
  • undo 발생 시 위 stack에서 myStrokeIDIter를 뒤로 옮겨 하여 해당 strokeID에 속한 path를 전부 popPath 합니다.
  • redo 발생 시 위 stack에서 myStrokeIDIter를 앞으로 당겨 해당 strokeID에 속한 path를 전부 restorePath 합니다.

export class StrokeManager {
  pathStack: Map<string, PathData | null>; //pathID, PathData 쌍으로 저장
  myStrokeIDStack: string[];
  myStrokeIDIter: number;

  deletedPathStack: Map<string, PathData | null>;

  constructor() {
    this.pathStack = new Map<string, PathData>();
    this.deletedPathStack = new Map<string, PathData>();
    this.myStrokeIDStack = [];
    this.myStrokeIDIter = 0;
  }
  
  void pushPath(userID: number, strokeID: string, path: Path2D, pathStyle: PathStyle)
  void popPath(pathID: string)
  void restorePath(pathID: string, pathData: PathData)
  void pushMyStroke(strokeID: string)
  void popStroke()
  void restoreStroke()
  void undo(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D)
  void redo(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D)
}

Method

path 제어 메소드

pushPath(userID: number, strokeID: string, path: Path2D, pathStyle: PathStyle) {
  if (!this.pathStack) return;

	// 새 pathData 객체 생성한다.
  const newPath = new PathData(userID, strokeID, path, pathStyle);
  // 생성한 pathData와 쌍을 이룰 pathID를 생성한다.
  const newPathID = [userID, '-', Date.now()].join('');

	// pathStack Map에 저장한다.
  this.pathStack.set(newPathID, newPath);
}

popPath(pathID: string) {
	// pop할 pathID의 pathData를 가져온다.
  const pathData = this.pathStack.get(pathID);
  if (!pathData) return;

	// pathData를 삭제해준다.
  this.pathStack.set(pathID, null);
  
  // 후에 복구 할 상황을 위하여 deletedPathStack에 삭제한 데이터를 백업해준다.
  this.deletedPathStack.set(pathID, pathData);
}

restorePath(pathID: string, pathData: PathData) {
	// 삭제되었던 pathData를 복구해준다.
  this.pathStack.set(pathID, pathData);
}

stroke 제어 메소드

pushMyStroke(strokeID: string) {
	// 새 stroke이 들어왔으므로, 현재 myStrokeIDIter 이후의 ID들을 삭제한다. (복구 불가)
  this.myStrokeIDStack.length = this.myStrokeIDIter + 1;
  
  // 새로운 srokeID를 저장해준다.
  this.myStrokeIDStack.push(strokeID);

	// 새 strokeID가 들어왔으니, myStrokeIDIter를 +1 해준다.
  this.myStrokeIDIter++;
}

popStroke() {
	//pop할 strokeID를 myStrokeIDStack에서 꺼내온다.
  const currentStrokeID = this.myStrokeIDStack[this.myStrokeIDIter--];
  
  //위에서 꺼낸 strokeID를 가진 path를 전부 popPush 해준다.
  //myStrokeIDStack은 '내 stroke' 만들 관리하므로, 타인의 선이 삭제될 일은 없다.
  for (const [pathID, pathData] of this.pathStack) {
    if (!pathData) continue;
    if (pathData.strokeID === currentStrokeID) this.popPath(pathID);
  }
}

restoreStroke() {
	//복구할 StrokeID를 가져온다.
  const nextStrokeID = this.myStrokeIDStack[++this.myStrokeIDIter];

	//pathData를 백업 스택을 순회하여 위에서 가져온 strokeID에 해당하는 pathData를 복구한다.
  for (const [pathID, pathData] of this.deletedPathStack) {
    if (!pathData) return;
    if (pathData.strokeID === nextStrokeID) this.restorePath(pathID, pathData);
  }
}

undo & redo 구현

  undo(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
    if (this.myStrokeIDIter <= 0) {
      console.log('더 undo할 선이 없음');

      return;
    }
    
    //popStroke 작동
    this.popStroke();

		//캔버스 초기화
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // pathStack의 첫 pathData부터 차례대로 그린다.
    for (const pathData of this.pathStack.values()) {
      if (!pathData) continue;
      ctx.beginPath();
      ctx.fillStyle = pathData.style.color;
      ctx.strokeStyle = pathData.style.color;
      ctx.lineWidth = pathData.style.lineWidth;
      if (pathData.style.type === 'path') ctx.stroke(pathData.path);
      if (pathData.style.type === 'shape') ctx.fill(pathData.path);
    }
  }

  redo(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
    if (this.myStrokeIDIter >= this.myStrokeIDStack.length - 1) {
      console.log('더 redo할 선이 없음');
      return;
    }
    
    //restoreStroke 작동
    this.restoreStroke();

		//캔버스 초기화
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // pathStack의 첫 pathData부터 차례대로 그린다.
    for (const pathData of this.pathStack.values()) {
      if (!pathData) continue;
      ctx.beginPath();
      ctx.fillStyle = pathData.style.color;
      ctx.strokeStyle = pathData.style.color;
      ctx.lineWidth = pathData.style.lineWidth;
      if (pathData.style.type === 'path') ctx.stroke(pathData.path);
      if (pathData.style.type === 'shape') ctx.fill(pathData.path);
    }
  }

StrokeManager 적용 예

useRef 사용

• strokeManager는 앱 내에서 딱 하나만 만들어지면 됩니다.
• 그리기가 시작되는 startDrawing부터 끝나는 stopDrawing까지 같은 path2D 객체에 경로를 저장해야하므로 ref로 선언합니다.
• currentID 또한 startDrawing와 draw 함수에서 만들어지는 모든 path가 같은 strokeID를 배정받아야 하므로 ref로 선언합니다.
• path2D를 사용하는 이유
  • path2D는 저장한 경로를 canvas에 캐시하여, 리드로우 시 경로 재계산을 줄여 성능 향상을 노릴 수 있습니다.
  • 동시에 두 개 이상의 선을 그리기 위해서는 path2D로 경로를 분리해줘야 합니다.
    • ctx는 canvas에서 1개만 있는 객체이기 때문에, 두 사용자가 동시에 접근하여 드로잉 시 두 사용자의 점이 이어지는 현상 등 오류가 있을 수 있습니다.

const strokeManager = useRef(new StrokeManager());
const path2D = useRef<Path2D | null>(null);
const currentStrokeID = useRef<string | null>(null);

그리기 시작 부

const startDrawing = useCallback(
    (point: Point) => {
      if (!strokeManager.current) return;

			...
			...

      const { ctx } = getCanvasContext(canvasRef);

			//실시간 그리기를 위해 ctx에 드로잉 style을 지정
      ctx.strokeStyle = currentColor;
      ctx.lineWidth = brushSize;
      ctx.fillStyle = currentColor;

			//클릭 시 점 찍는 경로를 Path2D 객체에 저장한다.
      path2D.current = new Path2D();
      path2D.current.arc(point.x, point.y, brushSize / 2, 0, Math.PI * 2);
      
			//위의 path2D 객체를 드로잉한다.
      ctx.fill(path2D.current);

			//strokeManager에 보낼 PathStyle 객체를 준비한다.
      const pathStyle: PathStyle = {
        color: currentColor,
        lineWidth: brushSize,
        type: 'shape',
      };
			
			// strokeID를 새로 만든다.
      currentStrokeID.current = [0, '-', Date.now(), '-stroke'].join('');
      // pathStack에 저장해준다.
      strokeManager.current.pushPath(0, currentStrokeID.current, path2D.current, pathStyle);

			// draw에서 새로 만들어질 경로들을 위해 path2D를 초기화하고, 시작 지점을 배정한다.
      path2D.current = new Path2D();
      path2D.current.moveTo(point.x, point.y);
      
      ...
      ...
      

    },
    [.....],
  );

그리는 이어가는 부

const draw = useCallback(
  (point: Point) => {
    if (!path2D.current) return;
    if (!currentStrokeID.current) return;
    
    ...
    ...

    const { ctx } = getCanvasContext(canvasRef);

		// 'startDrawing'메소드에서 초기화한 path2D에 경로를 이어 저장한다. 
    path2D.current.lineTo(point.x, point.y);
    // path2D 객체에 저장된 경로를 그린다.
    ctx.stroke(path2D.current);

		//strokeManager에 보낼 PathStyle 객체를 준비한다.
    const pathStyle: PathStyle = {
      color: currentColor,
      lineWidth: brushSize,
      type: 'path',
    };
    
    // pathStack에 저장해준다.
    strokeManager.current.pushPath(0, currentStrokeID.current, path2D.current, pathStyle);

	...
	...
	
  },
  [.....],
);

그리기 종료 부

  const stopDrawing = useCallback(() => {
    if (!currentStrokeID.current) return;

		...
		...
    
    // 드로잉이 끝났으니 strokeID를 myStrokeIDStack 에 저장해준다.
    // 내 stroke일 경우에만 저장해야 한다.
    strokeManager.current.pushMyStroke(currentStrokeID.current);
    path2D.current = null;

		...
		...
  }, [.....]);

redo, undo Event Handler

const undo = () => {
  const { canvas, ctx } = getCanvasContext(canvasRef);
  strokeManager.current.undo(canvas, ctx);
};

const redo = () => {
  const { canvas, ctx } = getCanvasContext(canvasRef);
  strokeManager.current.redo(canvas, ctx);
};

구현 중 마주친 문제들

stopDrawing 함수 작동 조건

• 아래의 해당 라인 이 누락되어 마우스가 클릭한 상태가 아닌데도 캔버스를 벗어나면 pushMyStroke이 작동하는 이슈가 있었습니다.
• 해당 라인 으로 그리기 상태였을 때에만 핸들러가 작동하도록 수정하여 해결하였습니다.

  const stopDrawing = useCallback(() => {
    if (!drawingState.isDrawing) return; // 해당 라인
    if (!currentStrokeID.current) return;
    strokeManager.current.pushMyStroke(currentStrokeID.current);
    path2D.current = null;

    setDrawingState({
      isDrawing: false,
      startPoint: null,
    });
  }, [drawingState.isDrawing]);

잘못된 EventHandler 적용

• GameCanvasExample.tsx 에서 Canvas 컴포넌트에 프롭스를 전달할 때, 이벤트 리스너를 중복 전달하고 있었습니다.
• 아래 return 부의 onMouseUp 부터 onTouchCancel 까지의 속성은 canvas 태그가 아니라 그 부모의 부모인 div 태그에 적용되는 로직으로 구성되어있습니다.
• 따라서, 해당 부분들을 삭제하여 이벤트가 중복 발생하는 문제를 해결하였습니다.
  • (브랜치에 병합된 코드이므로, 이후 수정 시 꼭 삭제해줘야 하는 코드다.)

  return (
    <Canvas
      canvasRef={canvasRef}
      className="min-w-[280px]"
      isDrawable={isDrawable}
      colors={isDrawable ? COLORS : []}
      // toolbarPosition="floating"
      brushSize={brushSize}
      setBrushSize={setBrushSize}
      drawingMode={drawingMode}
      onDrawingModeChange={setDrawingMode}
      inkRemaining={inkRemaining}
      maxPixels={maxPixels}
      canUndo={canUndo}
      canRedo={canRedo}
      onUndo={undo}
      onRedo={redo}
      canvasEvents={canvasEventHandlers}
      
      // canvas 태그 기본 속성 (해당 아래 부분이 잘못됨)
      onMouseUp={stopDrawing}
      onMouseLeave={stopDrawing}
      onTouchEnd={stopDrawing}
      onTouchCancel={stopDrawing}
    />
  );

정리

현재 구현 상태의 문제점

• 현재는 move 이벤트가 발생할 때 마다 (새 좌표가 생성될 때 마다) path2D를 생성해 저장하고 있고, 그렇다보니 path 관리 단위가 굉장히 작습니다.
• 얼마나 작냐하면, 조금만 그려도 pathStack에 요소가 700~900개 넘게 쌓입니다.
  • 멀티 유저까지 참여한다면 2000개는 족히 넘을 것으로 예상됩니다.
• path2D 객체를 사용하긴 했지만, 2000개 가량의 path를 undo & redo 할 때마다 리드로우 해야한다는 점은 성능면에서 너무 치명적이지 않나 생각됩니다.
  • 실제로 선을 아주 기이이일게 그리면 좀 느려지는 듯한 체감이 듭니다.

대안

• path 단위로 선을 을 관리하는 현재 방식의 장점은, path 간의 우선 순위가 높은 정확도로 지켜진다는 것입니다.
  • 두 선을 막 겹쳐 그린 후 undo/redo 하여도 우선순위가 유지됩니다.
• 하지만 위에서 언급한 문제점이 있으니, 조율한다면 아래의 방향을 상의해봐야 합니다.
  • 선 관리 단위 조정
    • path 단위 or stroke 단위 or 그 사이의 어딘가
    • stroke 단위로 관리하게 되면, undo & redo 시 path가 아닌 선 단위로 우선순위가 정해진다.
  • 다른 방법 모색
• 여기서 우선순위란, 캔버스에서 시각적으로 어떤 선이 더 위로 올라갈 것인가 입니다.

추가 구현 필요

• redo / undo 시 남은 픽셀량 반영
• 페인트 툴 병합