You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
6.1 KiB
131 lines
6.1 KiB
// Insert image button display
|
|
define(['sugar-web/graphics/journalchooser','sugar-web/datastore'], function(chooser, datastore) {
|
|
|
|
function initGui() {
|
|
var insertImageButton = document.getElementById('insertimage-button');
|
|
PaintApp.elements.insertImageButton = insertImageButton;
|
|
insertImageButton.addEventListener('click', onInsertImageClick);
|
|
}
|
|
var printImage = false;
|
|
var resizeImage = false;
|
|
|
|
// onClick display dialog with journal content
|
|
function onInsertImageClick() {
|
|
// Display journal dialog popup
|
|
chooser.show(function(entry) {
|
|
// No selection
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
|
|
// Get object content
|
|
var dataentry = new datastore.DatastoreObject(entry.objectId);
|
|
dataentry.loadAsText(function(err, metadata, text) {
|
|
//We load the drawing inside an image element
|
|
var element = document.createElement('img');
|
|
element.src = text;
|
|
element.onload = function() {
|
|
printImage = true;
|
|
resizeImage = false;
|
|
//We draw the drawing to the canvas
|
|
var ctx = PaintApp.elements.canvas.getContext('2d');
|
|
var imagedata = ctx.getImageData(0, 0, PaintApp.elements.canvas.width, PaintApp.elements.canvas.height);
|
|
var xds= true;
|
|
var width;
|
|
var height;
|
|
var x;
|
|
var y;
|
|
var imageWoRectangle;
|
|
var touchScreen = ("ontouchstart" in document.documentElement);
|
|
|
|
ctx.putImageData(imagedata, 0, 0);
|
|
x = 65;
|
|
y = 130;
|
|
width = element.width;
|
|
height = element.height;
|
|
ctx.drawImage(element, x - 60, y - 125, width + 60, height + 70);
|
|
imageWoRectangle = ctx.getImageData(0, 0, PaintApp.elements.canvas.width, PaintApp.elements.canvas.height);
|
|
ctx.stroke();
|
|
PaintApp.saveCanvas();
|
|
ctx.beginPath();
|
|
ctx.setLineDash([1, 10]);
|
|
ctx.strokeStyle = '#101010';
|
|
ctx.rect(x - 65, y - 130, width + 70, height + 80);
|
|
ctx.stroke();
|
|
|
|
//Calculate the size and print the image
|
|
var imageMousemove = function(event) {
|
|
if (printImage || resizeImage) {
|
|
if(xds) ctx.putImageData(imagedata, 0, 0);
|
|
if (touchScreen) event = event.touches[0];
|
|
if (printImage) {
|
|
x = event.clientX - (width/2);
|
|
y = event.clientY - (height/2);
|
|
} else {
|
|
width = event.clientX - x;
|
|
height = event.clientY - y
|
|
}
|
|
ctx.drawImage(element, x - 60, y - 125, width + 60, height + 70);
|
|
imageWoRectangle = ctx.getImageData(0, 0, PaintApp.elements.canvas.width, PaintApp.elements.canvas.height);
|
|
ctx.beginPath();
|
|
ctx.setLineDash([1, 10]);
|
|
ctx.strokeStyle = '#101010';
|
|
ctx.rect(x - 65, y - 130, width + 70, height + 80);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
var imageMouseup = function(event) {
|
|
if (printImage) {
|
|
printImage = false;
|
|
resizeImage = true;
|
|
} else if (resizeImage) {
|
|
if (touchScreen) event = event.touches[0];
|
|
ctx.putImageData(imageWoRectangle, 0, 0);
|
|
ctx.setLineDash([1]);
|
|
imagedata = ctx.getImageData(0, 0, PaintApp.elements.canvas.width, PaintApp.elements.canvas.height);
|
|
PaintApp.saveCanvas();
|
|
ctx=0;
|
|
printImage = false;
|
|
resizeImage = false;
|
|
if (touchScreen) {
|
|
removeEventListener("touchmove", imageMousemove);
|
|
removeEventListener("touchend", imageMouseup);
|
|
} else {
|
|
removeEventListener("mousemove", imageMousemove);
|
|
removeEventListener("mouseup", imageMouseup);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (touchScreen) {
|
|
addEventListener("touchmove", imageMousemove, false);
|
|
addEventListener("touchend", imageMouseup, false);
|
|
} else {
|
|
addEventListener("mousemove", imageMousemove);
|
|
addEventListener("mouseup", imageMouseup);
|
|
}
|
|
|
|
/* If the activity is shared we send the element to everyone */
|
|
if (PaintApp.data.isShared) {
|
|
try {
|
|
PaintApp.collaboration.sendMessage({
|
|
action: 'toDataURL',
|
|
data: {
|
|
width: PaintApp.elements.canvas.width / window.devicePixelRatio,
|
|
height: PaintApp.elements.canvas.height / window.devicePixelRatio,
|
|
src: PaintApp.collaboration.compress(PaintApp.elements.canvas.toDataURL())
|
|
}
|
|
});
|
|
} catch (e) {}
|
|
}
|
|
}
|
|
});
|
|
}, {mimetype: 'image/png'}, {mimetype: 'image/jpeg'});
|
|
}
|
|
|
|
var insertImageButton = {
|
|
initGui: initGui
|
|
};
|
|
|
|
return insertImageButton;
|
|
});
|