image description

Namespace: State Manager for API Calls

State Manager takes active layer params, to make this possible it uses App.Editor.getActive() api method. State manager uses different methods for different types of functionality.
For object creation and "group/ungroup" functionality State Manager was included in module itself
Source:
example.js

Methods:


App.Editor.setStrokeWidth(width)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setStrokeWidth(width);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                

App.Editor.setFontFamily(Font)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setFontFamily(Font);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setTextBold(state)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setTextBold(state);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setTextItalic(state)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setTextItalic(state);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.textAlign(direction)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.textAlign(direction);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.changeText(newText);

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

var oldText = object.text;

var newText = $('#text').val(); // new text value from textarea

if (oldText !== newText) {
    App.Editor.changeText(newText);

    App.Editor.saveState({
        id            : layer.cid,
        method        : 'textEdit',
        originalState : JSON.stringify({
            oldText        : oldText,
            newText        : newText
        }),
        object: object
    });
}
                    

App.Editor.setFontSize(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');
if (!isNaN(value) && isFinite(value)) {
    App.Editor.setFontSize(value);

    App.Editor.saveState({
        id             : object.cid,
        method         : 'modify',
        object         : object,
        originalState  : JSON.stringify(object.originalState)
    });
}
                    

App.Editor.setLetterSpacing(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

var prev = layer.get('letterSpacing');

App.Editor.setLetterSpacing(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'letterSpacing',
    prevState      : prev,
    currentState   : value
 });
                    

App.Editor.setTextLineHeight(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

var prev = layer.get('letterSpacing');

App.Editor.setTextLineHeight(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

Text Shadow:

Text Shadow functionality includes several methods:

App.Editor.setTextShadow(state)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setTextShadow(state);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setTextShadowPosition(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setTextShadowPosition(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setTextShadowBlur(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setTextShadowBlur(parseInt(value));

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setTextShadowColor(rgb, silent)

Used colorpicker plugin to set RGB value in setColor() function
Example
function setColor(rgb, silent) {
    if(App.Editor.getActive() !== undefined) {
        var layer = App.Editor.getActive()[0].layer;
        var object = layer.get('object');
        var prevColor = !silent ? layer.get('shadowColor') : null;

        App.Editor.setTextShadowColor(rgb, silent);

        if (!silent) {
            App.Editor.saveState({
                id             : object.cid,
                method         : 'changeColor',
                mediatorEvent  : 'canvas:text:setShadowColor',
                prevColor      : prevColor,
                currentColor   : layer.get('shadowColor'),
            });
        }
    }
}
                    

App.Editor.setFigureWidth(value)

App.Editor.setFigureHeight(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setFigureWidth(value);
App.Editor.setFigureHeight(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

Border:

Border functionality includes several methods:

App.Editor.toggleBorders(state);

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

object.saveState();

App.Editor.toggleBorders(state);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setStrokeWidth(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

object.saveState();

App.Editor.setStrokeWidth(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setStrokeOpacity(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

object.saveState();

App.Editor.setStrokeOpacity(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setBorderColor(rgb, silent)

Used colorpicker plugin to set RGB value in setColor() function
Example
function setColor(rgb, silent) {
    if(App.Editor.getActive() !== undefined) {
        var layer = App.Editor.getActive()[0].layer;
        var object = layer.get('object');
        var prevColor = !silent ? App.Editor.Utils.checkColor(layer.get('stroke')) : null;

        App.Editor.setBorderColor(rgb, silent);

        if (!silent) {
            var currentColor = App.Editor.Utils.checkColor(layer.get('stroke'));

            App.Editor.saveState({
                id             : object.cid,
                method         : 'changeColor',
                mediatorEvent  : 'object:change:stroke',
                prevColor      : prevColor.colorRgb,
                currentColor   : currentColor.colorRgb
            });
        }
    }
}
                    

App.Editor.remove()

Example
App.Editor.remove();
App.Editor.saveState({
  method : 'remove'
});
                    

App.Editor.setFigureColor(rgb, silent)

Used colorpicker plugin to set RGB value in setColor() function
Example
function setColor(rgb, silent) {
    if(App.Editor.getActive() !== undefined) {
        var layer = App.Editor.getActive()[0].layer;
        var object = layer.get('object');
        var prevColor = !silent ? layer.get('fill') : null;

        App.Editor.setFigureColor(rgb, silent);

        if (!silent) {
            App.Editor.saveState({
                id             : object.cid,
                method         : 'changeColor',
                mediatorEvent  : 'object:change:color',
                prevColor      : prevColor,
                currentColor   : object.get('fill'),
            });
        }
    }
}
                    

App.Editor.setBackgroundColor(rgb, silent)

Used colorpicker plugin to set RGB value in setColor() function
Example
function setColor(rgb, silent) {
    var prevColor = !silent ? App.Editor.getSettings().get('backgroundColor') : null;

    App.Editor.setBackgroundColor(rgb, silent);

    if (!silent) {
        App.Editor.saveState({
            method: 'changeBackground',
            prevColor: prevColor,
            currentColor: rgb
        });
    }
}
                    

App.Editor.setBackgroundTransparency(state)

Example
App.Editor.setBackgroundTransparency(state);

App.Editor.saveState({
    method: 'transparencyBackground',
    oldState: !state,
    currentState: state
});
                    

App.Editor.setFigureOpacity(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setFigureOpacity(value);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.bringToFront()

Example
App.Editor.bringToFront();
App.Editor.saveState({
    method         : 'sort'
});
                    

App.Editor.sendToBack()

Example
App.Editor.sendToBack();
App.Editor.saveState({
    method         : 'sort'
});
                    

App.Editor.objectFlip(direction)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.objectFlip(direction);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.groupAlign(direction)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.groupAlign(direction);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.objectMove(direction)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.objectMove(direction);

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.objectRotate(value)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.objectRotate(parseFloat(value));

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.fillFigureToCanvas()

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.fillFigureToCanvas();

App.Editor.saveState({
    id             : object.cid,
    method         : 'modify',
    object         : object,
    originalState  : JSON.stringify(object.originalState)
});
                    

App.Editor.setFigureAsBackground(state)

Example
var layer = App.Editor.getActive()[0].layer;
var object = layer.get('object');

App.Editor.setFigureAsBackground(state);

App.Editor.saveState({
    id             : object.cid,
    method         : 'asBg'
});