imageEditor.addIcon('arrow'); // The position is center on canvas

imageEditor.addIcon('arrow', {
    left: 100,
    top: 100
}).then(objectProps => {
    console.log(objectProps.id);
});

imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {
    console.log(ojectProps.id);
});

imageEditor.addShape('rect', {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    width: 100,
    height: 200,
    left: 10,
    top: 10,
    isRegular: true
});

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

imageEditor.addShape('rect', {
    fill: {
        type: 'filter',
        filter: [{blur: 0.3}, {pixelate: 20}]
    },
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100,
    isRegular: false
}).then(objectProps => {
    console.log(objectProps.id);
});

imageEditor.addText('init text');

imageEditor.addText('init text', {
    styles: {
        fill: '#000',
        fontSize: 20,
        fontWeight: 'bold'
    },
    position: {
        x: 10,
        y: 10
    }
}).then(objectProps => {
    console.log(objectProps.id);
});

imageEditor.applyFilter('Grayscale');

imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => {
    console.log('filterType: ', obj.type);
    console.log('actType: ', obj.action);
}).catch(message => {
    console.log('error: ', message);
});;

imageEditor.changeCursor('crosshair');

imageEditor.changeIconColor(id, '#000000');

imageEditor.changeSelectableAll(false); // or true

// call after selecting shape object on canvas
imageEditor.changeShape(id, { // change rectagle or triangle
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    width: 100,
    height: 200
});

// call after selecting shape object on canvas
imageEditor.changeShape(id, { // change circle
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100
});

imageEditor.changeText(id, 'change text');

imageEditor.changeTextStyle(id, {
    fontStyle: 'italic'
});

imageEditor.clearObjects();

imageEditor.clearRedoStack();

imageEditor.clearUndoStack();

imageEditor.crop(imageEditor.getCropzoneRect());

imageEditor.deactivateAll();

imageEditor.discardSelection();

imageEditor.flipX().then((status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});

imageEditor.flipY().then(status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});

var canvasSize = imageEditor.getCanvasSize();
console.log(canvasSize.width);
console.height(canvasSize.height);

// Image editor drawing mode
//
//    NORMAL: 'NORMAL'
//    CROPPER: 'CROPPER'
//    FREE_DRAWING: 'FREE_DRAWING'
//    LINE_DRAWING: 'LINE_DRAWING'
//    TEXT: 'TEXT'
//
if (imageEditor.getDrawingMode() === 'FREE_DRAWING') {
    imageEditor.stopDrawingMode();
}

console.log(imageEditor.getImageName());

var position = imageEditor.getObjectPosition(id, 'left', 'top');
console.log(position);

var props = imageEditor.getObjectProperties(id, 'left');
console.log(props);

var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']);
console.log(props);

var props = imageEditor.getObjectProperties(id, {
    left: null,
    top: null,
    width: null,
    height: null,
    opacity: null
});
console.log(props);

imageEditor.loadImageFromFile(file).then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});

imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {
     console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);
     console.log('new : ' + result.newWidth + ', ' + result.newHeight);
});

imageEditor.redo();

imageEditor.registerIcons({
    customIcon: 'M 0 0 L 20 20 L 10 10 Z',
    customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'
});

imageEditor.removeFilter('Grayscale').then(obj => {
    console.log('filterType: ', obj.type);
    console.log('actType: ', obj.action);
}).catch(message => {
    console.log('error: ', message);
});

imageEditor.removeObject(id);

imageEditor.resetFlip().then(status => {
    console.log('flipX: ', status.flipX);
    console.log('flipY: ', status.flipY);
    console.log('angle: ', status.angle);
}).catch(message => {
    console.log('error: ', message);
});;

imageEditor.rotate(10); // angle = 10
imageEditor.rotate(10); // angle = 20
imageEditor.rotate(5); // angle = 5
imageEditor.rotate(-95); // angle = -90
imageEditor.rotate(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

imageEditor.setAngle(10); // angle = 10
imageEditor.rotate(10); // angle = 20
imageEditor.setAngle(5); // angle = 5
imageEditor.rotate(50); // angle = 55
imageEditor.setAngle(-40); // angle = -40
imageEditor.setAngle(10).then(status => {
    console.log('angle: ', status.angle);
})).catch(message => {
    console.log('error: ', message);
});

imageEditor.startDrawingMode('FREE_DRAWING');
imageEditor.setBrush({
    width: 12,
    color: 'rgba(0, 0, 0, 0.5)'
});
imageEditor.setBrush({
    width: 8,
    color: 'FFFFFF'
});

imageEditor.setDrawingShape('rect', {
    fill: 'red',
    width: 100,
    height: 200
});

imageEditor.setDrawingShape('rect', {
    fill: {
        type: 'filter',
        filter: [{blur: 0.3}, {pixelate: 20}]
    },
    width: 100,
    height: 200
});

imageEditor.setDrawingShape('circle', {
    fill: 'transparent',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100
});

imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio
    width: 1,
    height: 1,
    isRegular: true
});

imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio
    rx: 10,
    ry: 10,
    isRegular: true
});

// align the object to 'left', 'top'
imageEditor.setObjectPosition(id, {
    x: 0,
    y: 0,
    originX: 'left',
    originY: 'top'
});

// align the object to 'right', 'top'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: canvasSize.width,
    y: 0,
    originX: 'right',
    originY: 'top'
});

// align the object to 'left', 'bottom'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: 0,
    y: canvasSize.height,
    originX: 'left',
    originY: 'bottom'
});

// align the object to 'right', 'bottom'
var canvasSize = imageEditor.getCanvasSize();
imageEditor.setObjectPosition(id, {
    x: canvasSize.width,
    y: canvasSize.height,
    originX: 'right',
    originY: 'bottom'
});

imageEditor.setObjectProperties(id, {
    left:100,
    top:100,
    width: 200,
    height: 200,
    opacity: 0.5
});

imageEditor.setObjectPropertiesQuietly(id, {
    left:100,
    top:100,
    width: 200,
    height: 200,
    opacity: 0.5
});

imageEditor.startDrawingMode('FREE_DRAWING', {
     width: 10,
     color: 'rgba(255,0,0,0.5)'
});
imageEditor.startDrawingMode('LINE_DRAWING', {
     width: 10,
     color: 'rgba(255,0,0,0.5)',
     arrowType: {
         tail: 'chevron' // triangle
     }
});

imageEditor.stopDrawingMode();

imgEl.src = imageEditor.toDataURL();

imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {
     imageEditor.addImageObject(imgUrl);
});

imageEditor.undo();

imageEditor.on('addText', function(pos) {
    console.log('text position on canvas: ' + pos.originPosition);
    console.log('text position on brwoser: ' + pos.clientPosition);
});

imageEditor.on('mousedown', function(event, originPointer) {
    console.log(event);
    console.log(originPointer);
    if (imageEditor.hasFilter('colorFilter')) {
        imageEditor.applyFilter('colorFilter', {
            x: parseInt(originPointer.x, 10),
            y: parseInt(originPointer.y, 10)
        });
    }
});

imageEditor.on('objectActivated', function(props) {
    console.log(props);
    console.log(props.type);
    console.log(props.id);
});

imageEditor.on('objectAdded', function(props) {
    console.log(props);
});

imageEditor.on('objectMoved', function(props) {
    console.log(props);
    console.log(props.type);
});

imageEditor.on('objectRotated', function(props) {
    console.log(props);
    console.log(props.type);
});

imageEditor.on('objectScaled', function(props) {
    console.log(props);
    console.log(props.type);
});

imageEditor.on('redoStackChanged', function(length) {
    console.log(length);
});

imageEditor.on('textEditing', function() {
    console.log('text editing');
});

imageEditor.on('undoStackChanged', function(length) {
    console.log(length);
});