Skip to content

Commit

Permalink
feat: Add changing object properties like position
Browse files Browse the repository at this point in the history 
Add setObjectProperties/getObjectProperties apis
Add setObjectPosition/getObjectPosition apis
Add getCanvasSize api
Add object id parameter into apis
Remove managing command depending on stamp
Add 'textChanged' event and make it command
loadImageFromURL returns canvas image size

Resolves: nhn#86
  • Loading branch information
Dongsik Yoo committed May 24, 2017
1 parent 276d3b3 commit fdd7d14
Show file tree
Hide file tree
Showing 27 changed files with 864 additions and 235 deletions.
45 changes: 31 additions & 14 deletions examples/js/basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var shapeOptions = {};
var shapeType;
var activeObjectId;

// Buttons
var $btns = $('.menu-item');
Expand Down Expand Up @@ -276,14 +277,19 @@ function showSubMenu(type) {

function applyOrRemoveFilter(applying, type, options) {
if (applying) {
imageEditor.applyFilter(type, options);
imageEditor.applyFilter(type, options).then(result => {
console.log(result);
});
} else {
imageEditor.removeFilter(type);
}
}

// Attach image editor custom events
imageEditor.on({
objectAdded: function(objectProps) {
console.info(objectProps);
},
undoStackChanged: function(length) {
if (length) {
$btnUndo.removeClass('disabled');
Expand All @@ -308,9 +314,12 @@ imageEditor.on({
addText: function(pos) {
imageEditor.addText('Double Click', {
position: pos.originPosition
}).then(objectProps => {
console.log(objectProps);
});
},
objectActivated: function(obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
Expand Down Expand Up @@ -367,7 +376,7 @@ $btnClearObjects.on('click', function() {

$btnRemoveActiveObject.on('click', function() {
$displayingSubMenu.hide();
imageEditor.removeActiveObject();
imageEditor.removeObject(activeObjectId);
});

$btnCrop.on('click', function() {
Expand Down Expand Up @@ -553,11 +562,11 @@ $inputCheckTransparent.on('change', function() {
}

if (colorType === 'stroke') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
Expand All @@ -575,11 +584,11 @@ shapeColorpicker.on('selectColor', function(event) {
}

if (colorType === 'stroke') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
Expand All @@ -590,7 +599,7 @@ shapeColorpicker.on('selectColor', function(event) {
$inputStrokeWidthRange.on('change', function() {
var strokeWidth = Number($(this).val());

imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
strokeWidth: strokeWidth
});

Expand All @@ -604,7 +613,7 @@ $btnText.on('click', function() {
});

$inputFontSizeRange.on('change', function() {
imageEditor.changeTextStyle({
imageEditor.changeTextStyle(activeObjectId, {
fontSize: parseInt(this.value, 10)
});
});
Expand Down Expand Up @@ -638,11 +647,11 @@ $btnTextStyle.on('click', function(e) { // eslint-disable-line
styleObj = {};
}

imageEditor.changeTextStyle(styleObj);
imageEditor.changeTextStyle(activeObjectId, styleObj);
});

textColorpicker.on('selectColor', function(event) {
imageEditor.changeTextStyle({
imageEditor.changeTextStyle(activeObjectId, {
'fill': event.color
});
});
Expand All @@ -661,6 +670,8 @@ function onClickIconSubMenu(event) {
imageEditor.addIcon(iconType, {
left: originPointer.x,
top: originPointer.y
}).then(objectProps => {
console.log(objectProps);
});
});
}
Expand All @@ -682,7 +693,7 @@ $btnRegisterIcon.on('click', function() {
$iconSubMenu.on('click', '.icon-text', onClickIconSubMenu);

iconColorpicker.on('selectColor', function(event) {
imageEditor.changeIconColor(event.color);
imageEditor.changeIconColor(activeObjectId, event.color);
});

// control mask filter
Expand Down Expand Up @@ -735,15 +746,20 @@ $btnLoadMaskImage.on('change', function() {
imgUrl = URL.createObjectURL(file);

imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {
imageEditor.addImageObject(imgUrl).then(() => {
imageEditor.addImageObject(imgUrl).then(objectProps => {
URL.revokeObjectURL(file);
console.log(objectProps);
});
});
}
});

$btnApplyMask.on('click', function() {
imageEditor.applyFilter('mask');
imageEditor.applyFilter('mask', {
maskObjId: activeObjectId
}).then(result => {
console.log(result);
});
});

$inputCheckGrayscale.on('change', function() {
Expand Down Expand Up @@ -907,7 +923,8 @@ $inputRangeColorFilterValue.on('change', function() {
// Etc..

// Load sample image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(() => {
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(sizeValue => {
console.log(sizeValue);
imageEditor.clearUndoStack();
});

Expand Down
36 changes: 19 additions & 17 deletions examples/js/mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var shapeOpt = {
stroke: '#000',
strokeWidth: 10
};
var activeObjectId;

// Selector of image editor controls
var submenuClass = '.submenu';
Expand Down Expand Up @@ -153,15 +154,15 @@ function activateTextMode() {
}

function setTextToolbar(obj) {
var fontSize = obj.styles.fontSize;
var fontColor = obj.styles.fill;
var fontSize = obj.fontSize;
var fontColor = obj.fill;

$inputTextSizeRange.val(fontSize);
textColorpicker.setColor(fontColor);
}

function setIconToolbar(obj) {
var iconColor = obj.styles.fill;
var iconColor = obj.fill;

iconColorpicker.setColor(iconColor);
}
Expand All @@ -171,14 +172,14 @@ function setShapeToolbar(obj) {
var colorType = $('[name="select-color-type"]:checked').val();

if (colorType === 'stroke') {
strokeColor = obj.styles.stroke;
strokeColor = obj.stroke;
isTransparent = (strokeColor === 'transparent');

if (!isTransparent) {
shapeColorpicker.setColor(strokeColor);
}
} else if (colorType === 'fill') {
fillColor = obj.styles.fill;
fillColor = obj.fill;
isTransparent = (fillColor === 'transparent');

if (!isTransparent) {
Expand All @@ -187,7 +188,7 @@ function setShapeToolbar(obj) {
}

$inputCheckTransparent.prop('checked', isTransparent);
$inputStrokeWidthRange.val(obj.styles.strokeWith);
$inputStrokeWidthRange.val(obj.strokeWith);
}

function showSubMenu(type) {
Expand Down Expand Up @@ -231,10 +232,11 @@ imageEditor.on({
},
objectScaled: function(obj) {
if (obj.type === 'text') {
$inputTextSizeRange.val(obj.styles.fontSize);
$inputTextSizeRange.val(obj.fontSize);
}
},
objectActivated: function(obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
Expand Down Expand Up @@ -319,7 +321,7 @@ $btnRedo.on('click', function() {

// Remove active object action
$btnRemoveActiveObject.on('click', function() {
imageEditor.removeActiveObject();
imageEditor.removeObject(activeObjectId);
});

// Download action
Expand Down Expand Up @@ -388,7 +390,7 @@ $btnAddCustomIcon.on('click', function() {
});

iconColorpicker.on('selectColor', function(event) {
imageEditor.changeIconColor(event.color);
imageEditor.changeIconColor(activeObjectId, event.color);
});

// Text menu action
Expand Down Expand Up @@ -433,17 +435,17 @@ $btnChangeTextStyle.on('click', function() {

styleObj[styleObjKey] = styleType;

imageEditor.changeTextStyle(styleObj);
imageEditor.changeTextStyle(activeObjectId, styleObj);
});

$inputTextSizeRange.on('change', function() {
imageEditor.changeTextStyle({
imageEditor.changeTextStyle(activeObjectId, {
fontSize: parseInt($(this).val(), 10)
});
});

textColorpicker.on('selectColor', function(event) {
imageEditor.changeTextStyle({
imageEditor.changeTextStyle(activeObjectId, {
fill: event.color
});
});
Expand Down Expand Up @@ -515,7 +517,7 @@ $btnAddTriangle.on('click', function() {
});

$inputStrokeWidthRange.on('change', function() {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
strokeWidth: parseInt($(this).val(), 10)
});
});
Expand All @@ -532,11 +534,11 @@ $inputCheckTransparent.on('change', function() {
}

if (colorType === 'stroke') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
Expand All @@ -552,11 +554,11 @@ shapeColorpicker.on('selectColor', function(event) {
}

if (colorType === 'stroke') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
stroke: color
});
} else if (colorType === 'fill') {
imageEditor.changeShape({
imageEditor.changeShape(activeObjectId, {
fill: color
});
}
Expand Down
4 changes: 3 additions & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ import './js/command/clearObjects';
import './js/command/flip';
import './js/command/loadImage';
import './js/command/removeFilter';
import './js/command/removeActiveObject';
import './js/command/removeObject';
import './js/command/resizeCanvasDimension';
import './js/command/rotate';
import './js/command/setObjectProperties';
import './js/command/setObjectPosition';

tui.util.defineNamespace('tui.component.ImageEditor', ImageEditor, true);
6 changes: 4 additions & 2 deletions src/js/command/addIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,10 @@ const command = {
const iconComp = graphics.getComponent(ICON);
const undoData = this.undoData;

return iconComp.add(type, options).then(icon => {
undoData.object = icon;
return iconComp.add(type, options).then(objectProps => {
undoData.object = graphics.getObject(objectProps.id);

return objectProps;
});
},
/**
Expand Down
6 changes: 4 additions & 2 deletions src/js/command/addImageObject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ const command = {
execute(graphics, imgUrl) {
const undoData = this.undoData;

return graphics.addImageObject(imgUrl).then(imgObj => {
undoData.object = imgObj;
return graphics.addImageObject(imgUrl).then(objectProps => {
undoData.object = graphics.getObject(objectProps.id);

return objectProps;
});
},
/**
Expand Down
3 changes: 0 additions & 3 deletions src/js/command/addObject.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,9 @@ const command = {
* @returns {Promise}
*/
execute(graphics, object) {
tui.util.stamp(object);

return new Promise((resolve, reject) => {
if (!graphics.contains(object)) {
graphics.add(object);
graphics.setActiveObject(object);
resolve(object);
} else {
reject(rejectMessages.addedObject);
Expand Down
7 changes: 3 additions & 4 deletions src/js/command/addShape.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,16 @@ const command = {
* @param {number} [options.left] - Shape x position
* @param {number} [options.top] - Shape y position
* @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
* @param {boolean} [options.needsStamp] - Use true if through Command
* @returns {Promise}
*/
execute(graphics, type, options) {
const shapeComp = graphics.getComponent(SHAPE);
const undoData = this.undoData;

options.needsStamp = true;
return shapeComp.add(type, options).then(objectProps => {
undoData.object = graphics.getObject(objectProps.id);

return shapeComp.add(type, options).then(shape => {
undoData.object = shape;
return objectProps;
});
},
/**
Expand Down
6 changes: 4 additions & 2 deletions src/js/command/addText.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@ const command = {
const textComp = graphics.getComponent(TEXT);
const undoData = this.undoData;

return textComp.add(text, options).then(textObj => {
undoData.object = textObj;
return textComp.add(text, options).then(objectProps => {
undoData.object = graphics.getObject(objectProps.id);

return objectProps;
});
},
/**
Expand Down
Loading

0 comments on commit fdd7d14

Please sign in to comment.