Structure

Modules

내부적으로 크게 두 가지 레이어로 분리가 되며 아래와 같다.

• ImageEditor - API를 담당하는 객체로 아래 두 가지 레이어를 가지며, UI와 직접 커뮤니케이션 한다.
  • Middle Layer - 그리기 동작과 무관한 어플리케이션의 기능을 제공하는 집합으로 Invoker, Command, CommandFactory로 구성된다.
  • Graphics Layer - 일반적으로 말하는 canvas를 ImageEditor에서 제공하는 기능들로만 이루어진  Canvas 를 구성한다. 그리기 동작을 추상화하고 실제 구현은 fabric.js 를 사용한다.
    • Component는 특정 기능의 그리기 동작을 모듈화 한 것으로 Graphics Layer에 소속된다.
    • 드로잉 모드 또한 Graphics Layer에서 필요한 기능으로 여기에서 담당한다.

ImageEditor

API를 담당하는 객체로 아래에 정의할 Invoker와 Graphics를 프로퍼티로 가진다.

CommandFactory

Command를 등록, 생성하는 클래스이다. Command를 등록할 수 있는 인터페이스를 제공하고 ImageEditor나 Command로 드로잉 동작을 해야 하는 곳에서 등록된 Command 의 인스턴스를 생성한다.

• register - Command 등록
• create - 등록된 Command 의 인스턴스 생성

Command

Command는 특정 기능을 수행하기 위핸 실행 단위이며 다른 모듈과 독립적이다. 이미지 에디터에서는 Undo/Redo를 하기 위한 실행 단위로 사용되며 Command 인스턴스를 Invoker에서 스택으로 관리한다.
Command 등록은 name, execute, undo를 정의한 객체 actions와 args를 전달 받는다.

Command 클래스

class Command {
    constructor(actions, args) {
        this.name = actions.name;
        this.args = args;
        this.execute = actions.execute;
        this.undo = actions.undo;
        this.executeCallback = actions.executeCallback || null;
        this.undoCallback = actions.undoCallback || null;
        this.undoData = {};
    }
}

Command 등록 과정

import가 될 때 CommandFactory.register를 수행한다. Command 에서는 사용할 Component를 import 하고 Graphics 인스턴스를 전달하여 기능수행하게 한다.

// commandName.js
import commandFactory from '../factory/command';
const command = {
   name: 'commandName',
   execute(graphics, ...args) {

   },
   undo(graphics, ...args) {

   }
};

CommandFactory.register(command);
module.export = command;

Command 생성 및 실행

const command = commandFactory.create('commandName', param1, param2);
command.execute(...command.args).then(value => {
    // push undo stack
    return value;
}).catch(message => {
    // do something
    return Promise.reject(message);
})

Invoker

Command를 실행하고 Undo/Redo를 관리한다. 다른 기능은 제거한다.

• Component 리스트 관리는 여기서는 제거한다. 아래에 명세할 Canvas로 이관한다.

Canvas

ImageEditor의 드로잉 코어 모듈로 우리가 제공하는 드로잉 기능들의 모두 들어 있다. 하부의 실제 그래픽 모듈은 fabric.js 를 사용한다. 아래는 이미지 에디터가 제공하는 기능 목록이다.(붉은 색은 신규 API)

Icon	Image	Shape	Text	Flip	FreeDrawing	LineDrawing	Rotate	Crop	기타
addIcon	addImageObject	addShape	addText	flipX	setBrush	setBrush	rotate	crop	resizeCanvasDimension
registerIcons	loadImageFromFile	setDrawingShape	changeText	flipY			setAngle	getCropzoneRect	toDataURL
changeIconColor	loadImageFromURL	changeShape	changeTextStyle	resetFlip					getDrawingMode
	ApplyFilter								setDrawingMode
	RemoveFilter								getImageName
	hasFilter								clearObjects
									removeActiveObject
									destroy
									setDefaultPathStyle

<Canvas 관련 이벤트> Canvas 는 CustomEvents를  mixin 하고 Canvas 와 관련한 이벤트를 받을 필요가 있을 때 on("eventName", callback); 을 사용한다. 아래는 리팩토링 이전 기준으로 fabric.js 로부터 발생한 이벤트 중에 변경될 이벤트들이다.

이벤트 이름	핸들러	from	to	외부이벤트 이름	용도
path:created	_onCreatePath	fabric	ImageEditor ->Canvas로 이동 예정	N/A	path 스타일을 하나로 지정하여 사용

Component

Component는 기존과 동일하게 특정 드로잉 동작을 구현한 모듈이다. 다른 점은 Component는 드로잉 집합의 부분 집합이므로 Canvas를 통하여서 사용하게 한다.  이전에는 Command에서 Component를 직접 사용하였지만 바뀔 구조에서는 Command는 Canvas를 사용한다. Canvas는 다양한 Component들을 관리한다. 또한 Component에서 외부로 전달해야 하는 이벤트는 Canvas를 통하여 전달하도록 한다. Canvas는 해당 이벤트를 Canvas 외부에서 등록한 경우 다시 전달한다. Component 목록은 아래와 같고 기존에 start/end와 같이 모드 변경이 필요한 Component는 표시하였다.

이름	모드 필요	용도	to-be
Cropper	O	Crop 모듈, Crop용 UI와 이벤트 처리 필요	유지
filter	X	이미지 필터 모듈	유지
flip	X	이미지 뒤집기 모듈	유지
freeDrawing	O	자유 그리기 모듈	유지
icon	X	아이콘 추가 모듈	유지
imageLoader	X	메인 이미지 로딩 모듈	유지
line	O	직선 그리기 모듈	유지
rotation	X	메인 이미지 및 오브젝트들 회전 모듈	유지
shape	O	도형 그리기 모듈	유지
text	O	텍스트 오브젝트 입력 모듈	유지
main	X	공통 프로퍼티 관리	제거 및 기능 Canvas로 이관

드로잉 모드는 상호 베타적, Command 운영는 사용자의 몫

드로잉 모드는 한 순간에 하나만 활성화 되어야 하는데, 각 모드마다 사용하는 이벤트와 UI가 다르기 때문이다. 그러므로 드로잉 모드는 상호 베타적이다. 그에 반해 Command는 드로잉 동작에 대해서 정의한 명령이기 때문에 드로잉 모드와 무관하게 동작 가능하다고 볼 수 있다. 드로잉 모드에 종속성을 없애고 그 운영을 사용자에게 위임한다. 드로잉 모드와 Command 의 실행 여부를 관리하지 않음으로써 구현의 간결성과 버그 발생 가능성, 유지보수에 대한 이점을 얻을 수 있다. 이미지 에디터는 사용자가 아래와 같이 상식적인 API 호출을 한다고 믿는다.

<상식적 사용 예>

editor.setDrawingMode("cropper");
editor.crop(editor.getCropzoneRect());
editor.setDrawingMode("normal");

<뜬금없는 사용예>

editor.setDrawingMode("cropper");
editor.rotate(90);
editor.setDrawingMode("normal");

뜬금없는 사용예이지만, 드로잉 모드와 Command가 무관함을 보여주는 하나의 예가 될 수 있다.

변경될 API와 드로잉모드/Command의 무관성 개념을 바탕으로 내부 설계에 리팩토링을 진행한다.

이벤트 처리

Canvas Layer의 모듈화를 위하여 Canvas 내부에서 일어나는 모든 이벤트는 Canvas를 통하여 외부로 전달한다. Canvas가 관리하는 Component에서 일어나는 이벤트는 Canvas에게 전달하고 Canvas가 외부로 전달한다. ImageEditor는 외부와 직접적으로 커뮤니케이션을 하므로 UI로 전달하는 모든 콜백은 ImageEditor 통한다. 예를 들어  Canvas와  Component로부터 올라와야 하는 이벤트는 ImageEditor 내에서  Canvas에 이벤트를 등록하여 전달 받게 한다 Canvas에서 올라온 이벤트가 undo 스택으로 관리되어야 하는 경우 ImageEditor 에서 Canvas로 이벤트를 받아  Invoker 함수를 호출한다.

UI 전달 이벤트 정리

UI 로 전달되는 이벤트는 대부분 Promise 로 대체하여 실행 완료를 전달할 것이고, Undo/Redo와 관련한 이벤트는 UI 툴바 상태값 관리를 위하여 기존과 같이 UI로 이벤트를 전달한다. 남는 UI 이벤트는 5개이다. objectActivated, objectStyleChanged, mousedown, redoStackChanged, undoStackChanged

Name	Purpose
addText	when mousedown event occurs in 'TEXT' drawing mode
objectActivated	when user selects an object
objectMoved	when user drags an object
objectScaled	when object is being scaled
textEditing	when textbox is being edited
mousedown	just mousedown
undoStackChanged	undo change event
redoStackChanged	redo change event

Example

/*
{
    id: number
    type: type
    left: number,
    top: number,
    width: number,
    fill: string
    stroke: string
    strokeWidth: number
    opacity: number,

    // text object
    text: string,
    fontFamily: string,
    fontSize: number,
    fontStyle: string,
    fontWeight: string,
    textAlign: string,
    textDecoration: string
}
*/
imageEditor.on('objectActivated', function(props) {
    console.log(props);
    console.log(props.type);
    console.log(props.id);
});

클래스 다이어그램

class ServiceUI {
  -ImageEditor _imageEditor
}

class ImageEditor {
  -Invoker _invoker
  -Graphics _graphics

  -void execute(commandName)
}

package "Middle Layer" #DDDDDD {
  class Invoker
  class Command
  class CommandFactory
}

together {
  class Invoker
  class Command
  class CommandFactory
}

package "Graphics Layer" #DDDDDD {
  class Graphics

}

package "Component" {
  class Component
  class Cropper
  class Filter
  class Flip
  class FreeDrawing
  class Icon
  class ImageLoader
  class Line
  class Rotation
  class Shape
  class Text
}

package "DrawingMode" {
  class DrawingMode
  class CropperDrawingMode
  class FreeDrawingMode
  class LineDrawingMode
  class ShapeDrawingMode
  class TextDrawingMode
}

class Invoker {
  -Array _undoStack
  -Array _redoStack

  +Promise execute("commandName")
  +Promise undo()
  +Promise redo()
  +void pushUndoStack(command, isSilent)
  +void pushRedoStack(command, isSilent)
}

class CommandFactory {
  -Map _commands

  +void register(commandObject)
  +Command create("commandName", ...args)
}

class Command {
  +string name
  +Array args
  +Object _undoData

  +Promise execute()
  +Promise undo()
  +Command setExecuteCallback(callback)
  +Command setUndoCallback(callback)
}

class Graphics {
  -DrawingMode[] _drawingModeInstances
  -Component[] _components
  -Fabric.Canvas _canvas

  +setDrawingMode("modeName")
  +setDefaultPathStyle(style)
  +on("eventName", callback)
}

class Component {

}

class DrawingMode {

}

ServiceUI o-- ImageEditor
ImageEditor o-- Graphics
ImageEditor o-- Invoker
ImageEditor <|-- tui.util.CustomEvents
ImageEditor --> CommandFactory
ImageEditor --> Command

Invoker <|-- tui.util.CustomEvents
Invoker --> CommandFactory
Invoker o-- Command

Command o-- Graphics
Command o-- Component

Graphics o-- DrawingMode
Graphics o-- Component
Graphics o-- Fabric.Canvas
Graphics <|-- tui.util.CustomEvents

Component <|-- Cropper
Component <|-- Filter
Component <|-- Flip
Component <|-- FreeDrawing
Component <|-- Icon
Component <|-- ImageLoader
Component <|-- Line
Component <|-- Rotation
Component <|-- Shape
Component <|-- Text

Cropper <-- Fabric.Canvas
Filter <-- Fabric.Canvas
Flip <-- Fabric.Canvas
FreeDrawing <-- Fabric.Canvas
Icon <-- Fabric.Canvas
ImageLoader <-- Fabric.Canvas
Line <-- Fabric.Canvas
Rotation <-- Fabric.Canvas
Shape <-- Fabric.Canvas
Text <-- Fabric.Canvas

DrawingMode --> Component
DrawingMode <|-- CropperDrawingMode
DrawingMode <|-- FreeDrawingMode
DrawingMode <|-- LineDrawingMode
DrawingMode <|-- ShapeDrawingMode
DrawingMode <|-- TextDrawingMode

CropperDrawingMode <-- Cropper
FreeDrawingMode <-- FreeDrawing
LineDrawingMode <-- Line
ShapeDrawingMode <-- Shape
TextDrawingMode <-- Text