File: toastui/test/types/type-tests.ts

import ImageEditor = require('tui-image-editor');

const blackTheme = {
    'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
    'common.bisize.width': '251px',
    'common.bisize.height': '21px',
    'common.backgroundImage': 'none',
    'common.backgroundColor': '#1e1e1e',
    'common.border': '0px',

    // header
    'header.backgroundImage': 'none',
    'header.backgroundColor': 'transparent',
    'header.border': '0px',

    // load button
    'loadButton.backgroundColor': '#fff',
    'loadButton.border': '1px solid #ddd',
    'loadButton.color': '#222',
    'loadButton.fontFamily': 'NotoSans, sans-serif',
    'loadButton.fontSize': '12px',

    // download button
    'downloadButton.backgroundColor': '#fdba3b',
    'downloadButton.border': '1px solid #fdba3b',
    'downloadButton.color': '#fff',
    'downloadButton.fontFamily': 'NotoSans, sans-serif',
    'downloadButton.fontSize': '12px',

    // main icons
    'menu.normalIcon.path': '../dist/svg/icon-b.svg',
    'menu.normalIcon.name': 'icon-b',
    'menu.activeIcon.path': '../dist/svg/icon-a.svg',
    'menu.activeIcon.name': 'icon-a',
    'menu.iconSize.width': '24px',
    'menu.iconSize.height': '24px',

    // submenu primary color
    'submenu.backgroundColor': '#1e1e1e',
    'submenu.partition.color': '#858585',

    // submenu icons
    'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
    'submenu.normalIcon.name': 'icon-a',
    'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
    'submenu.activeIcon.name': 'icon-c',
    'submenu.iconSize.width': '32px',
    'submenu.iconSize.height': '32px',

    // submenu labels
    'submenu.normalLabel.color': '#858585',
    'submenu.normalLabel.fontWeight': 'lighter',
    'submenu.activeLabel.color': '#fff',
    'submenu.activeLabel.fontWeight': 'lighter',

    // checkbox style
    'checkbox.border': '1px solid #ccc',
    'checkbox.backgroundColor': '#fff',

    // rango style
    'range.pointer.color': '#fff',
    'range.bar.color': '#666',
    'range.subbar.color': '#d1d1d1',
    'range.value.color': '#fff',
    'range.value.fontWeight': 'lighter',
    'range.value.fontSize': '11px',
    'range.value.border': '1px solid #353535',
    'range.value.backgroundColor': '#151515',
    'range.title.color': '#fff',
    'range.title.fontWeight': 'lighter',

    // colorpicker style
    'colorpicker.button.border': '1px solid #1e1e1e',
    'colorpicker.title.color': '#fff'
};

const imageEditor = new ImageEditor('#container', {
    includeUI: {
        loadImage: {
            path: 'img/sampleImage.jpg',
            name: 'SampleImage'
        },
        theme: blackTheme,
        menu: ['shape', 'filter'],
        initMenu: 'filter',
        uiSize: {
            width: '1000px',
            height: '700px'
        },
        menuBarPosition: 'bottom'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
    }
});

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

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

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.addText('initText', {
    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: 0
}).then(obj => {
    console.log(`filterType: ${obj.type}`);
    console.log(`actType: ${obj.action}`);
});

imageEditor.changeCursor('crosshair');
imageEditor.changeIconColor(0, '#000000');
imageEditor.changeSelectableAll(false);
imageEditor.changeShape(0, {
    fill: 'red',
    stroke: 'blue',
    strokeWidth: 3,
    rx: 10,
    ry: 100
});

imageEditor.changeText(0, 'change text');
imageEditor.changeTextStyle(0, {
    fontStyle: 'italic'
});

imageEditor.clearObjects();
imageEditor.clearRedoStack();
imageEditor.clearUndoStack();

imageEditor.crop(imageEditor.getCropzoneRect());
imageEditor.deactivateAll();
imageEditor.destroy();
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();
imageEditor.getCanvasSize();
imageEditor.getCropzoneRect();
imageEditor.getDrawingMode();
imageEditor.getImageName();
imageEditor.getObjectPosition(0, 'left', 'top');
imageEditor.getObjectProperties(0, 'left');
imageEditor.getObjectProperties(0, ['left', 'top', 'width', 'height']);
imageEditor.getObjectProperties(0, {
    left: null,
    top: null,
    height: null,
    opacity: null
});

imageEditor.hasFilter('filterType');
imageEditor.isEmptyRedoStack();
imageEditor.isEmptyUndoStack();
let fileObj: any;
imageEditor.loadImageFromFile(fileObj, 'SampleImage').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.removeActiveObject();
imageEditor.removeFilter('Grayscale').then(obj => {
    console.log(`filterType: ${obj.type}`);
    console.log(`actType: ${obj.action}`);
}).catch(message => {
    console.log(`error : ${message}`);
});
imageEditor.removeObject(0);
imageEditor.resetFlip().then(status => {
    console.log(`filpX : ${status.flipX}`);
    console.log(`flipY : ${status.flipY}`);
    console.log(`angle : ${status.angle}`);
});

imageEditor.resizeCanvasDimension({
    width: 300,
    height: 300
});
imageEditor.rotate(10);
imageEditor.setAngle(45);
imageEditor.setBrush({
    width: 12,
    color: 'rgba(0, 0, 0, 0.5)'
});
imageEditor.setBrush({
    width: 20,
    color: '#FFFFFF'
});
imageEditor.setCropzoneRect(1/1);
imageEditor.setDrawingShape('rect', {
    fill: 'red',
    width: 100,
    height: 200
});
imageEditor.setDrawingShape('circle', {
    rx: 10,
    ry: 10,
    isRegular: true
});
imageEditor.setObjectPosition(0, {
    x: 0,
    y: 0,
    originX: 'left',
    originY: 'top'
});
imageEditor.setObjectProperties(0, {
    left: 100,
    top: 100,
    width: 200,
    height: 200,
    opacity: 0.5
}).then(arg => {
    console.log(arg);
});
imageEditor.setObjectPropertiesQuietly(0, {
    left: 100,
    top: 100,
    width: 200,
    height: 200,
    opacity: 0.5
}).then(arg => {
    console.log(arg);
});
imageEditor.startDrawingMode('FREE_DRWARING', {
    width: 10,
    color: 'rgba(255, 0, 0, 0.5)'
});
imageEditor.stopDrawingMode();
imageEditor.toDataURL();
imageEditor.undo();

imageEditor.on('addText', pos => {
    imageEditor.addText('Double Click', {
        position: pos.originPosition
    });

    console.log(`text position on canvas : ${pos.originPosition}`);
    console.log(`text position on browser : ${pos.clientPosition}`);
});