ImageEditor 2.0.0 Migration guide

(translating)

There are a lot of changes for ImageEditor 2.0.0 including API changes and new features. This migration document will be nicely moving 2.0.0.

New drawing mode change APIs

• New APIs

  • startDrawingMode(modeName) starts a drawing mode
  • stopDrawingMode() stops current drawing mode and back to 'NORMAL' mode
  • getDrawingMode() returns current drawing mode name.
  • getCropzoneRect() returns cropping rect in 'CROPPER' drawing mode.
  • crop(rect) crops image given area

• Removed APIs

  • startCropping, endCropping
  • startDrawingShapeMode, endDrawingShapeMode
  • startFreeDrawing, endFreeDrawing
  • startLineDrawing, endLineDrawing
  • startTextMode, endTextMode
  • endAll
  • endCropping is divided into three APIs

var rect = imageEditor.getCropzoneRect();
imageEditor.crop(rect).then(() => {
    imageEditor.stopDrawingMode();
});

Changed APIs

• removeActiveObject() ==> removeObject(id)

Use object is with all drawing APIs

• In versions prior to 1.4.1, the users should select an object and manipulate it which is called 'active object'. There was no way to manipulate non-selected object. After 2.0.0 version, you can manipulate not only selected object, but also non-selected objects by receiving the Object Id.
• To get the Object Id, use the parameter.id in Promise.then() and the event callback.

imageEditor.addShape('circle', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(function(props) {
    console.log(props.id);

    imageEditor.changeShape(props.id, { // change circle
        fill: '#FFFF00',
        strokeWidth: 10
    });
});

/*
{
    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);
});

Support Promise API

• All drawing APIs returns Promise and supports Undo/Redo.
• List of related APIs
  • addIcon, addImageObject, addShape, changeIconColor
  • changeShape, addText, changeText, changeTextStyle,
  • resizeCanvasDimension, applyFilter, removeFilter,
  • clearObjects, flipX, flipY, loadImageFromFile,
  • loadImageFromURL, redo, undo, removeObject,
  • resetFlip, rotate, setAngle, crop,
  • setObjectPosition, setObjectProperties

이벤트 변경 내역

As-Is	To-Be	변경	이유
activateText	addText	이름 변경	'TEXT' 모드에서 mousedown이 왔을 경우 발생 보통 이벤트를 받아 addText()를 사용한다.
addObject	N/A	제거	오브젝트가 추가된 경우인데, 필요성이 없어 제거됨
adjustObject	objectMoved objectScaled	이름 및 기능 변경	오브젝트가 이동하거나 스케일값이 변경된 경우 발생
applyFilter	N/A	제거	applyFilter() API의 Promise.then()으로 대체
clearImage	N/A	제거	loadImageFromFile(), loadImageFromURL() API의 Promise.then()으로 대체
clearObjects	N/A	제거	clearObjects() API의 Promise.then()으로 대체
editText	textEditing	이름 변경	텍스트 입력이 활성화된 경우 발생
emptyRedoStack	redoStackChanged	이름 및 기능 변경	redoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
emptyUndoStack	undoStackChanged	이름 및 기능 변경	undoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
endCropping	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
endFreeDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
endLineDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
flipImage	N/A	제거	flipX(), flipY() API의 Promise.then()으로 대체
loadImage	N/A	제거	loadImageFromFile(), loadImageFromURL() API의 Promise.then()으로 대체
mousedown	mousedown	유지
pushRedoStack	redoStackChanged	이름 및 기능 변경	redoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
pushUndoStack	undoStackChanged	이름 및 기능 변경	undoStack의 갯수가 변경될 때 스택 갯수를 전달한다.
removeObject	N/A	제거	removeObject()API의 Promise.then()으로 대체
rotateImage	N/A	제거	rotate(), setAngle() API의 Promise.then()으로 대체
selectObject	objectActivated	이름 및 기능 변경	오브젝트가 선택된 경우, activateText에서 주던 텍스트 파라미터를 여기에서 전달한다.ex> params.text, params.fontSize
startCropping	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
startFreeDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.
startLineDrawing	N/A	제거	상태 모드 변경은 이벤트 필요 없음.

Other changes and bug fixed

• Can not call APIs from within callback function
• Remove object shape tool