blob: 294353d94b3802b7c36a72a2ebcb64abb74d4b99 [file] [log] [blame]
// Copyright (c) 2009 The Chromium Authors. All rights reserved. Use of this
// source code is governed by a BSD-style license that can be found in the
// LICENSE file.
function isHighVersion() {
var version = navigator.userAgent.match(/Chrome\/(\d+)/)[1];
return version > 9;
}
function $(id) {
return document.getElementById(id);
}
function i18nReplace(id, messageKey) {
return $(id).innerHTML = chrome.i18n.getMessage(messageKey);
}
UploadUI.init();
var bg = chrome.extension.getBackgroundPage();
var canvas = new Canvas();
var photoshop = {
canvas: document.createElement("canvas"),
tabTitle: '',
startX: 0,
startY: 0,
endX: 0,
endY: 0,
dragFlag: false,
flag: 'rectangle',
layerId: 'layer0',
canvasId: '',
color: '#ff0000',
highlightColor: '',
lastValidAction: 0,
markedArea: [],
isDraw: true,
offsetX: 0,
offsetY: 36,
nowHeight: 0,
nowWidth: 0,
highlightType: 'border',
highlightMode: 'rectangle',
text: '',
i18nReplace: i18nReplace,
initCanvas: function() {
$('canvas').width = $('mask-canvas').width = $('photo').style.width =
photoshop.canvas.width = bg.screenshot.canvas.width;
$('canvas').height = $('mask-canvas').height = $('photo').style.height =
photoshop.canvas.height = bg.screenshot.canvas.height;
var context = photoshop.canvas.getContext('2d');
context.drawImage(bg.screenshot.canvas, 0, 0);
context = $('canvas').getContext('2d');
context.drawImage(photoshop.canvas, 0, 0);
$('canvas').style.display = 'block';
},
init: function() {
photoshop.initTools();
photoshop.initCanvas();
photoshop.tabTitle = bg.screenshot.tab.title;
var showBoxHeight = function() {
$('showBox').style.height = window.innerHeight - photoshop.offsetY - 1;
}
setTimeout(showBoxHeight, 50);
},
markCurrentElement: function(element) {
if (element && element.parentNode) {
var children = element.parentNode.children;
for (var i = 0; i < children.length; i++) {
var node = children[i];
if (node == element) {
element.className = 'mark';
} else {
node.className = '';
}
}
}
},
setHighLightMode: function() {
photoshop.highlightType = localStorage.highlightType || 'border';
photoshop.color = localStorage.highlightColor || '#FF0000';
$(photoshop.layerId).style.border = '2px solid ' + photoshop.color;
if (photoshop.highlightType == 'rect') {
$(photoshop.layerId).style.backgroundColor = photoshop.color;
$(photoshop.layerId).style.opacity = 0.5;
}
if (photoshop.flag == 'rectangle') {
$(photoshop.layerId).style.borderRadius = '0 0';
} else if (photoshop.flag == 'radiusRectangle') {
$(photoshop.layerId).style.borderRadius = '6px 6px';
} else if (photoshop.flag == 'ellipse') {
$(photoshop.layerId).style.border = '0';
$(photoshop.layerId).style.backgroundColor = '';
$(photoshop.layerId).style.opacity = 1;
}
},
setBlackoutMode: function() {
photoshop.color = '#000000';
$(photoshop.layerId).style.opacity = 1;
$(photoshop.layerId).style.backgroundColor = '#000000';
$(photoshop.layerId).style.border = '2px solid #000000';
},
setTextMode: function() {
localStorage.fontSize = localStorage.fontSize || '16';
photoshop.color = localStorage.fontColor =
localStorage.fontColor || '#FF0000';
$(photoshop.layerId).setAttribute('contentEditable', true);
$(photoshop.layerId).style.border = '1px dotted #333333';
$(photoshop.layerId).style.cursor = 'text';
$(photoshop.layerId).style.lineHeight = localStorage.fontSize + 'px';
$(photoshop.layerId).style.fontSize = localStorage.fontSize + 'px';
$(photoshop.layerId).style.color = photoshop.color;
$(photoshop.layerId).innerHTML = '<br/>';
var layer = $(photoshop.layerId);
var id = photoshop.layerId;
layer.addEventListener('blur', function() {
photoshop.setTextToArray(id);
}, true);
layer.addEventListener('click', function() {
this.style.border = '1px dotted #333333';
}, true);
layer.addEventListener('mouseout', function() {
if (!photoshop.dragFlag) {
this.style.borderWidth = 0;
}
}, false);
layer.addEventListener('mousemove', function() {
this.style.border = '1px dotted #333333';
}, false);
},
setTextToArray: function(id) {
var str = $(id).innerText.split("\n");
if (photoshop.markedArea.length > 0) {
for (var i = photoshop.markedArea.length - 1; i >= 0; i--) {
if (photoshop.markedArea[i].id == id) {
photoshop.markedArea[i].context = str;
break;
}
}
$(id).style.borderWidth = 0;
}
},
openOptionPage: function() {
chrome.tabs.create({url: chrome.extension.getURL("options.html")});
},
closeCurrentTab: function() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.remove(tab.id);
});
},
finish: function() {
var context = $('canvas').getContext('2d');
context.drawImage(photoshop.canvas, 0, 0);
},
colorRgba: function(color, opacity) {
var sColor = color.toLowerCase();
var sColorChange = [];
for (var i = 1; i < sColor.length; i += 2) {
sColorChange.push(parseInt("0x" + sColor.slice(i,i + 2)));
}
return "rgba(" + sColorChange.join(",") + "," + opacity + ")";
},
/**
* Undo the current operation
*/
toDo: function(element, what) {
photoshop.flag = what;
photoshop.isDraw = true;
photoshop.markCurrentElement(element);
},
setDivStyle: function(x, y) {
$(photoshop.layerId).setAttribute("style", "");
$(photoshop.layerId).setAttribute("contentEditable", false);
switch(photoshop.flag) {
case 'rectangle':
case 'radiusRectangle':
case 'ellipse':
photoshop.setHighLightMode();
break;
case 'redact':
photoshop.setBlackoutMode();
break;
case 'text':
photoshop.setTextMode();
break;
case 'line':
case 'arrow':
photoshop.drawLineOnMaskCanvas(x, y, x, y, 'lineStart',
photoshop.layerId);
break;
case 'blur':
photoshop.createCanvas(photoshop.layerId);
break;
}
},
/**
* Create a layer and set style
*/
createDiv: function() {
photoshop.lastValidAction++;
photoshop.layerId = 'layer' + photoshop.lastValidAction;
if ($(photoshop.layerId)) {
photoshop.removeElement(photoshop.layerId);
}
var divElement = document.createElement('div');
divElement.id = photoshop.layerId;
divElement.className = 'layer';
$('photo').appendChild(divElement);
if (photoshop.flag == 'blur') {
photoshop.createCanvas(photoshop.layerId);
}
return divElement;
},
createCanvas: function(parentId) {
photoshop.canvasId = 'cav-' + parentId;
if (!$(photoshop.canvasId)) {
var cav = document.createElement('canvas');
cav.id = photoshop.canvasId;
cav.width = 10;
cav.height = 10;
$(photoshop.layerId).appendChild(cav);
return cav;
}
return $(photoshop.canvasId);
},
createCloseButton: function(parent, id, left, top, flag) {
var imgElement = document.createElement('img');
imgElement.id = id;
imgElement.src = 'images/cross.png';
imgElement.className = 'closeButton';
imgElement.style.left = left - 15 + 'px';
if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
imgElement.style.left = left / 2 - 5 + 'px';
imgElement.style.top = top / 2 - 5 + 'px';
}
imgElement.onclick = function() {
$(parent).style.display = 'none';
photoshop.removeLayer(parent);
};
$(parent).onmousemove = function() {
if (!photoshop.dragFlag) {
photoshop.showCloseButton(id);
$(parent).style.zIndex = 110;
photoshop.isDraw = (flag == 'text' ? false : photoshop.isDraw);
}
};
$(parent).onmouseout = function() {
photoshop.hideCloseButton(id);
$(parent).style.zIndex = 100;
photoshop.isDraw = true;
};
$(parent).appendChild(imgElement);
return imgElement;
},
showCloseButton: function(id) {
$(id).style.display = 'block';
},
hideCloseButton: function(id) {
$(id).style.display = 'none';
photoshop.isDraw = true;
},
removeLayer: function(id) {
for (var i = 0; i < photoshop.markedArea.length; i++) {
if (photoshop.markedArea[i].id == id) {
photoshop.markedArea.splice(i, 1);
break;
}
}
photoshop.removeElement(id);
},
/**
* Set the starting point(x,y) when mouse pressed
*/
onMouseDown: function(event) {
if (photoshop.isDraw && event.button != 2) {
photoshop.startX = event.pageX + $('showBox').scrollLeft -
photoshop.offsetX;
photoshop.startY = event.pageY + $('showBox').scrollTop -
photoshop.offsetY;
photoshop.setDivStyle(photoshop.startX, photoshop.startY);
photoshop.dragFlag = true;
$(photoshop.layerId).style.left = photoshop.startX + 'px';
$(photoshop.layerId).style.top = photoshop.startY + 'px';
$(photoshop.layerId).style.height = 0;
$(photoshop.layerId).style.width = 0;
$(photoshop.layerId).style.display = 'block';
}
},
onMouseUp: function(event) {
$('mask-canvas').style.zIndex = 10;
photoshop.endX = event.pageX + $('showBox').scrollLeft -
photoshop.offsetX;
if (photoshop.endX > photoshop.canvas.width) {
photoshop.endX = photoshop.canvas.width ;
}
if (photoshop.endX < 0) {
photoshop.endX = 0;
}
photoshop.endY = event.pageY + $('showBox').scrollTop -
photoshop.offsetY;
if (photoshop.endY > photoshop.canvas.height) {
photoshop.endY = photoshop.canvas.height ;
}
if (photoshop.endY < 0) {
photoshop.endY = 0;
}
if (photoshop.isDraw && photoshop.dragFlag && (photoshop.endX !=
photoshop.startX || photoshop.endY != photoshop.startY)) {
if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
photoshop.endX, photoshop.endY, 'drawEnd', photoshop.layerId);
} else if (photoshop.flag == 'blur') {
canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
photoshop.layerId, photoshop.startX, photoshop.startY,
photoshop.endX, photoshop.endY);
} else if (photoshop.flag == 'ellipse') {
photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
photoshop.endY, 'end', photoshop.layerId);
}
photoshop.markedArea.push({
'id': photoshop.layerId,
'startX': photoshop.startX,
'startY': photoshop.startY,
'endX': photoshop.endX,
'endY': photoshop.endY,
'width': photoshop.nowWidth,
'height': photoshop.nowHeight,
'flag': photoshop.flag,
'highlightType': photoshop.highlightType,
'fontSize': localStorage.fontSize,
'color': photoshop.color,
'context': ''
});
$(photoshop.layerId).focus();
var imageBtnId = 'close_' + photoshop.layerId;
photoshop.createCloseButton(photoshop.layerId, imageBtnId,
photoshop.nowWidth, photoshop.nowHeight, photoshop.flag);
photoshop.createDiv();
} else if (photoshop.endX ==
photoshop.startX && photoshop.endY == photoshop.startY) {
photoshop.removeElement(photoshop.layerId);
photoshop.createDiv();
}
photoshop.dragFlag = false;
},
/**
* Refresh div‘s height and width when the mouse move
*/
onMouseMove: function(event) {
if(photoshop.dragFlag) {
$('mask-canvas').style.zIndex = 200;
photoshop.endX = event.pageX + $('showBox').scrollLeft -
photoshop.offsetX;
if (photoshop.endX > photoshop.canvas.width) {
photoshop.endX = photoshop.canvas.width ;
}
if (photoshop.endX < 0) {
photoshop.endX = 0;
}
photoshop.endY = event.pageY + $('showBox').scrollTop -
photoshop.offsetY;
if (photoshop.endY > photoshop.canvas.height) {
photoshop.endY = photoshop.canvas.height ;
}
if (photoshop.endY < 0) {
photoshop.endY = 0;
}
photoshop.nowHeight = photoshop.endY - photoshop.startY - 1 ;
photoshop.nowWidth = photoshop.endX - photoshop.startX - 1 ;
if(photoshop.nowHeight < 0) {
$(photoshop.layerId).style.top = photoshop.endY + 'px';
photoshop.nowHeight = -1 * photoshop.nowHeight;
}
if(photoshop.nowWidth < 0) {
$(photoshop.layerId).style.left = photoshop.endX + 'px';
photoshop.nowWidth = -1 * photoshop.nowWidth;
}
$(photoshop.layerId).style.height = photoshop.nowHeight - 3;
$(photoshop.layerId).style.width = photoshop.nowWidth - 3;
if (photoshop.flag == 'line' || photoshop.flag == 'arrow') {
photoshop.drawLineOnMaskCanvas(photoshop.startX, photoshop.startY,
photoshop.endX, photoshop.endY, 'lineDrawing', photoshop.layerId);
} else if (photoshop.flag == 'blur') {
$(photoshop.layerId).style.height = photoshop.nowHeight ;
$(photoshop.layerId).style.width = photoshop.nowWidth ;
canvas.blurImage(photoshop.canvas, $(photoshop.canvasId),
photoshop.layerId, photoshop.startX, photoshop.startY,
photoshop.endX, photoshop.endY);
} else if (photoshop.flag == 'ellipse') {
photoshop.drawEllipseOnMaskCanvas(photoshop.endX,
photoshop.endY, 'drawing', photoshop.layerId);
}
}
},
/**
* Remove a div
*/
removeElement: function(id) {
if($(id)) {
$(id).parentNode.removeChild($(id));
}
},
/**
* Use fillStyle, fillText and fillRect functions to draw rectangles,
* and render to canvas
*/
draw: function() {
var context = $('canvas').getContext('2d');
for (var j = 0; j < photoshop.markedArea.length; j++) {
var mark = photoshop.markedArea[j];
var x = (mark.startX < mark.endX) ? mark.startX : mark.endX;
var y = (mark.startY < mark.endY) ? mark.startY : mark.endY;
var width = mark.width;
var height = mark.height;
var color = mark.color;
switch(mark.flag) {
case 'rectangle':
if (mark.highlightType == 'border') {
canvas.drawStrokeRect(context, color, x, y, width, height, 2);
} else {
var color = changeColorToRgba(color, 0.5);
canvas.drawFillRect(context, color, x, y, width, height);
}
break;
case 'radiusRectangle':
canvas.drawRoundedRect(
context, color, x, y, width, height, 6, mark.highlightType);
break;
case 'ellipse':
x = (mark.startX + mark.endX) / 2;
y = (mark.startY + mark.endY) / 2;
var xAxis = Math.abs(mark.endX - mark.startX) / 2;
var yAxis = Math.abs(mark.endY - mark.startY) / 2;
canvas.drawEllipse(
context, color, x, y, xAxis, yAxis, 3, mark.highlightType);
break;
case 'redact':
canvas.drawFillRect(context, color, x, y, width, height);
break;
case 'text':
for (var i = 0; i < mark.context.length; i++) {
canvas.setText(
context, mark.context[i], color, mark.fontSize, 'arial',
mark.fontSize, x, y + mark.fontSize * i, width);
}
break;
case 'blur':
var imageData = context.getImageData(
x, y, photoshop.markedArea[j].width,
photoshop.markedArea[j].height);
imageData = canvas.boxBlur(
imageData, photoshop.markedArea[j].width,
photoshop.markedArea[j].height, 10);
context.putImageData(
imageData, x, y, 0, 0, photoshop.markedArea[j].width,
photoshop.markedArea[j].height);
break;
case 'line':
canvas.drawLine(
context, color, 'round', 2,
mark.startX, mark.startY, mark.endX, mark.endY);
break;
case 'arrow':
canvas.drawArrow(
context, color, 2, 4, 10, 'round',
mark.startX, mark.startY, mark.endX, mark.endY);
break;
}
}
},
drawLineOnMaskCanvas: function(startX, startY, endX, endY, type, layerId) {
var ctx = $('mask-canvas').getContext('2d');
ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
if (type == 'drawEnd') {
var offset = 20;
var width = Math.abs(endX - photoshop.startX) > 0 ?
Math.abs(endX - photoshop.startX): 0;
var height = Math.abs(endY - photoshop.startY) > 0 ?
Math.abs(endY - photoshop.startY): 0;
var offsetLeft = parseInt($(layerId).style.left);
var offsetTop = parseInt($(layerId).style.top);
startX = startX - offsetLeft + offset / 2;
startY = startY - offsetTop + offset / 2;
endX = endX - offsetLeft + offset / 2;
endY = endY - offsetTop + offset / 2;
$(layerId).style.left = offsetLeft - offset / 2;
$(layerId).style.top = offsetTop - offset / 2;
var cavCopy = photoshop.createCanvas(layerId);
cavCopy.width = width + offset;
cavCopy.height = height + offset;
ctx = cavCopy.getContext('2d');
}
if (localStorage.lineType == 'line') {
canvas.drawLine(ctx, localStorage.lineColor, 'round', 2,
startX, startY, endX, endY);
} else {
canvas.drawArrow(ctx, localStorage.lineColor, 2, 4, 10, 'round',
startX, startY, endX, endY)
}
},
createColorPadStr: function(element, type) {
var colorList = ['#000000', '#0036ff', '#008000', '#dacb23', '#d56400',
'#c70000', '#be00b3', '#1e2188', '#0090ff', '#22cc01', '#ffff00',
'#ff9600', '#ff0000', '#ff008e', '#7072c3', '#49d2ff', '#9dff3d',
'#ffffff', '#ffbb59', '#ff6b6b', '#ff6bbd'];
var div = document.createElement("div");
div.id = "colorpad";
element.appendChild(div);
for(var i = 0; i < colorList.length; i++) {
var a = document.createElement("a");
var color = colorList[i];
a.id = color;
a.title = color;
a.style.backgroundColor = color;
if (color == '#ffffff') {
a.style.border = "1px solid #444";
a.style.width = "12px"
a.style.height = "12px";
}
a.addEventListener('click', function(e) {
photoshop.colorPadPick(e.target.id, type);
return false;
});
div.appendChild(a);
}
},
colorPadPick: function(color, type) {
photoshop.color = color;
if(type == 'highlight') {
localStorage.highlightColor = color;
photoshop.setHighlightColorBoxStyle(color);
} else if(type == 'text') {
localStorage.fontColor = color;
$('fontColorBox').style.backgroundColor = color;
} else if (type == 'line') {
localStorage.lineColor = color;
photoshop.setLineColorBoxStyle();
} else if (type == 'ellipse') {
$('ellipseBox').style.borderColor = color;
}
},
setHighlightColorBoxStyle: function(color) {
var highlightColorBox = $('highlightColorBox');
highlightColorBox.style.borderColor = color;
localStorage.highlightType = localStorage.highlightType || 'border';
if (localStorage.highlightType == 'border') {
highlightColorBox.style.background = '#ffffff';
highlightColorBox.style.opacity = 1;
$('borderMode').className = 'mark';
$('rectMode').className = '';
} else if (localStorage.highlightType == 'rect') {
highlightColorBox.style.background = color;
highlightColorBox.style.opacity = 0.5;
$('borderMode').className = '';
$('rectMode').className = 'mark';
}
if (photoshop.flag == 'rectangle') {
highlightColorBox.style.borderRadius = '0 0';
} else if (photoshop.flag == 'radiusRectangle') {
highlightColorBox.style.borderRadius = '3px 3px';
} else if (photoshop.flag == 'ellipse') {
highlightColorBox.style.borderRadius = '12px 12px';
}
photoshop.markCurrentElement($(photoshop.flag));
},
setBlackoutColorBoxStyle: function() {
localStorage.blackoutType = localStorage.blackoutType || 'redact';
if (localStorage.blackoutType == 'redact') {
$('blackoutBox').className = 'rectBox';
$('redact').className = 'mark';
$('blur').className = '';
} else if (localStorage.blackoutType == 'blur') {
$('blackoutBox').className = 'blurBox';
$('redact').className = '';
$('blur').className = 'mark';
}
},
setFontSize: function(size) {
var id = 'size_' + size;
localStorage.fontSize = size;
$('size_10').className = '';
$('size_16').className = '';
$('size_18').className = '';
$('size_32').className = '';
$(id).className = 'mark';
},
setLineColorBoxStyle: function() {
localStorage.lineType = localStorage.lineType || 'line';
photoshop.color = localStorage.lineColor =
localStorage.lineColor || '#FF0000';
var ctx = $('lineIconCav').getContext('2d');
ctx.clearRect(0, 0, 14, 14);
if (localStorage.lineType == 'line') {
$('straightLine').className = 'mark';
$('arrow').className = '';
canvas.drawLine(ctx, photoshop.color, 'round', 2, 1, 13, 13, 1);
} else if (localStorage.lineType == 'arrow') {
$('straightLine').className = '';
$('arrow').className = 'mark';
canvas.drawArrow(ctx, photoshop.color, 2, 4, 7, 'round',1, 13, 13, 1);
}
},
initTools: function() {
photoshop.i18nReplace('tHighlight', 'highlight');
photoshop.i18nReplace('tRedact', 'redact');
photoshop.i18nReplace('redactText', 'solid_black');
photoshop.i18nReplace('tText', 'text');
photoshop.i18nReplace('tSave', 'save');
photoshop.i18nReplace('tClose', 'close');
photoshop.i18nReplace('border', 'border');
photoshop.i18nReplace('rect', 'rect');
photoshop.i18nReplace('blurText', 'blur');
photoshop.i18nReplace('lineText', 'line');
photoshop.i18nReplace('size_10', 'size_small');
photoshop.i18nReplace('size_16', 'size_normal');
photoshop.i18nReplace('size_18', 'size_large');
photoshop.i18nReplace('size_32', 'size_huge');
var fontSize = localStorage.fontSize = localStorage.fontSize || 16;
if (fontSize != 10 && fontSize != 16 && fontSize != 18 && fontSize != 32) {
localStorage.fontSize = 16;
}
localStorage.highlightMode = photoshop.flag =
localStorage.highlightMode || 'rectangle';
localStorage.highlightColor = localStorage.highlightColor || '#FF0000';
localStorage.fontColor = localStorage.fontColor || '#FF0000';
localStorage.highlightType = photoshop.highlightType =
localStorage.highlightType || 'border';
localStorage.blackoutType = localStorage.blackoutType || 'redact';
localStorage.lineType = localStorage.lineType || 'line';
localStorage.lineColor = localStorage.lineColor || '#FF0000';
photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
$('fontColorBox').style.backgroundColor =
localStorage.fontColor || '#FF0000';
$('btnHighlight').addEventListener('click', function() {
photoshop.toDo(this, localStorage.highlightMode);
photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
}, false);
$('btnBlackout').addEventListener('click', function() {
photoshop.toDo(this, localStorage.blackoutType);
photoshop.setBlackoutColorBoxStyle();
}, false);
$('btnText').addEventListener('click', function() {
photoshop.toDo(this, 'text');
}, false);
$('btnLine').addEventListener('click', function() {
photoshop.toDo(this, localStorage.lineType);
photoshop.setLineColorBoxStyle();
}, false);
photoshop.setHighlightColorBoxStyle(localStorage.highlightColor);
$('borderMode').addEventListener('click', function() {
localStorage.highlightType = 'border';
}, false);
$('rectMode').addEventListener('click', function() {
localStorage.highlightType = 'rect';
}, false);
$('rectangle').addEventListener('click', function() {
localStorage.highlightMode = photoshop.flag = 'rectangle';
photoshop.markCurrentElement(this);
}, false);
$('radiusRectangle').addEventListener('click', function() {
localStorage.highlightMode = photoshop.flag = 'radiusRectangle';
photoshop.markCurrentElement(this);
}, false);
$('ellipse').addEventListener('click', function() {
localStorage.highlightMode = photoshop.flag = 'ellipse';
photoshop.markCurrentElement(this);
}, false);
photoshop.setBlackoutColorBoxStyle();
$('redact').addEventListener('click', function() {
localStorage.blackoutType = 'redact';
}, false);
$('blur').addEventListener('click', function() {
localStorage.blackoutType = 'blur';
}, false);
photoshop.setLineColorBoxStyle();
photoshop.createColorPadStr($('highlightColorPad'), 'highlight');
photoshop.createColorPadStr($('fontColorPad'), 'text');
photoshop.createColorPadStr($('lineColorPad'), 'line');
$('straightLine').addEventListener('click', function() {
localStorage.lineType = 'line';
photoshop.setLineColorBoxStyle();
}, false);
$('arrow').addEventListener('click', function() {
localStorage.lineType = 'arrow';
photoshop.setLineColorBoxStyle();
}, false);
photoshop.setFontSize(localStorage.fontSize);
$('size_10').addEventListener('click', function() {
photoshop.setFontSize(10);
}, false);
$('size_16').addEventListener('click', function() {
photoshop.setFontSize(16);
}, false);
$('size_18').addEventListener('click', function() {
photoshop.setFontSize(18);
}, false);
$('size_32').addEventListener('click', function() {
photoshop.setFontSize(32);
}, false);
},
drawEllipseOnMaskCanvas: function(endX, endY, type, layerId) {
var ctx = $('mask-canvas').getContext('2d');
ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
var x = (photoshop.startX + endX) / 2;
var y = (photoshop.startY + endY) / 2;
var xAxis = Math.abs(endX - photoshop.startX) / 2;
var yAxis = Math.abs(endY - photoshop.startY) / 2;
canvas.drawEllipse(ctx, photoshop.color, x, y, xAxis, yAxis, 3,
photoshop.highlightType);
if (type == 'end') {
var offsetLeft = parseInt($(layerId).style.left);
var offsetTop = parseInt($(layerId).style.top);
var startX = photoshop.startX - offsetLeft ;
var startY = photoshop.startY - offsetTop ;
var newEndX = photoshop.endX - offsetLeft ;
var newEndY = photoshop.endY - offsetTop ;
x = (startX + newEndX) / 2;
y = (startY + newEndY) / 2;
xAxis = Math.abs(newEndX - startX) / 2;
yAxis = Math.abs(newEndY - startY) / 2;
var cavCopy = photoshop.createCanvas(layerId);
cavCopy.width = Math.abs(endX - photoshop.startX);
cavCopy.height = Math.abs(endY - photoshop.startY);
var ctxCopy = cavCopy.getContext('2d');
canvas.drawEllipse(ctxCopy, photoshop.color, x, y,
xAxis, yAxis, 3, photoshop.highlightType);
ctx.clearRect(0, 0, $('mask-canvas').width, $('mask-canvas').height);
}
},
showTip: function(className, message, delay) {
delay = delay || 2000;
var div = document.createElement('div');
div.className = className;
div.innerHTML = message;
document.body.appendChild(div);
div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
window.setTimeout(function() {
document.body.removeChild(div);
}, delay);
}
};
photoshop.init();
$('photo').addEventListener('mousemove', photoshop.onMouseMove, true);
$('photo').addEventListener('mousedown', photoshop.onMouseDown, true);
$('photo').addEventListener('mouseup', photoshop.onMouseUp, true);
document.addEventListener('mouseup', photoshop.onMouseUp, true);
document.addEventListener('mousemove', photoshop.onMouseMove, true);
$('canvas').addEventListener(
'selectstart', function f(e) { return false });
$('mask-canvas').addEventListener(
'selectstart', function f(e) { return false });
$('btnClose').addEventListener('click', photoshop.closeCurrentTab);
$('uploadAccountList').addEventListener('click', function(e) {
var target = e.target;
var classList = Array.prototype.slice.call(target.classList)
if (classList.indexOf('accountName') >= 0) {
var site = target.dataset.site;
var userId = target.dataset.userId;
UploadUI.upload(site, userId);
} else if (classList.indexOf('deleteBtn') >= 0) {
var accountId = target.dataset.accountId;
UploadUI.deleteAccountItem(accountId);
}
});