|
|
|
@ -178,6 +178,7 @@ define([
|
|
|
|
|
|
|
|
|
|
|
|
APP.draw = true;
|
|
|
|
APP.draw = true;
|
|
|
|
var toggleDrawMode = function () {
|
|
|
|
var toggleDrawMode = function () {
|
|
|
|
|
|
|
|
canvas.deactivateAll().renderAll();
|
|
|
|
APP.draw = !APP.draw;
|
|
|
|
APP.draw = !APP.draw;
|
|
|
|
canvas.isDrawingMode = APP.draw;
|
|
|
|
canvas.isDrawingMode = APP.draw;
|
|
|
|
$toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
|
|
|
$toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
|
|
|
@ -233,6 +234,7 @@ define([
|
|
|
|
APP.FM = common.createFileManager({});
|
|
|
|
APP.FM = common.createFileManager({});
|
|
|
|
APP.upload = function (title) {
|
|
|
|
APP.upload = function (title) {
|
|
|
|
var canvas = $canvas[0];
|
|
|
|
var canvas = $canvas[0];
|
|
|
|
|
|
|
|
APP.canvas.deactivateAll().renderAll();
|
|
|
|
var finish = function (thumb) {
|
|
|
|
var finish = function (thumb) {
|
|
|
|
canvas.toBlob(function (blob) {
|
|
|
|
canvas.toBlob(function (blob) {
|
|
|
|
blob.name = title;
|
|
|
|
blob.name = title;
|
|
|
|
@ -359,6 +361,34 @@ define([
|
|
|
|
APP.patchText(content);
|
|
|
|
APP.patchText(content);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var blobURLToImage = function (url, cb) {
|
|
|
|
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
|
|
|
|
|
|
xhr.onload = function() {
|
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
|
|
|
reader.onloadend = function() {
|
|
|
|
|
|
|
|
cb(reader.result);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
reader.readAsDataURL(xhr.response);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
xhr.open('GET', url);
|
|
|
|
|
|
|
|
xhr.responseType = 'blob';
|
|
|
|
|
|
|
|
xhr.send();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
var addImageToCanvas = function (img) {
|
|
|
|
|
|
|
|
var w = img.width;
|
|
|
|
|
|
|
|
var h = img.height;
|
|
|
|
|
|
|
|
if (w<h) {
|
|
|
|
|
|
|
|
img.width = img.width * (300/img.height);
|
|
|
|
|
|
|
|
img.height = 300;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
img.height = img.height * (300/img.width);
|
|
|
|
|
|
|
|
img.width = 300;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
var cImg = new Fabric.Image(img, { left:0, top:0, angle:0, });
|
|
|
|
|
|
|
|
APP.canvas.add(cImg);
|
|
|
|
|
|
|
|
onLocal();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
config.onInit = function (info) {
|
|
|
|
config.onInit = function (info) {
|
|
|
|
updateLocalPalette(palette);
|
|
|
|
updateLocalPalette(palette);
|
|
|
|
readOnly = metadataMgr.getPrivateData().readOnly;
|
|
|
|
readOnly = metadataMgr.getPrivateData().readOnly;
|
|
|
|
@ -395,6 +425,7 @@ define([
|
|
|
|
var $export = common.createButton('export', true, {}, saveImage);
|
|
|
|
var $export = common.createButton('export', true, {}, saveImage);
|
|
|
|
$rightside.append($export);
|
|
|
|
$rightside.append($export);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (common.isLoggedIn()) {
|
|
|
|
common.createButton('savetodrive', true, {}, function () {})
|
|
|
|
common.createButton('savetodrive', true, {}, function () {})
|
|
|
|
.click(function () {
|
|
|
|
.click(function () {
|
|
|
|
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
|
|
|
|
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
|
|
|
|
@ -403,6 +434,7 @@ define([
|
|
|
|
APP.upload(name);
|
|
|
|
APP.upload(name);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}).appendTo($rightside);
|
|
|
|
}).appendTo($rightside);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var $forget = common.createButton('forget', true, {}, function (err) {
|
|
|
|
var $forget = common.createButton('forget', true, {}, function (err) {
|
|
|
|
if (err) { return; }
|
|
|
|
if (err) { return; }
|
|
|
|
@ -413,6 +445,56 @@ define([
|
|
|
|
|
|
|
|
|
|
|
|
if (!readOnly) {
|
|
|
|
if (!readOnly) {
|
|
|
|
makeColorButton($rightside);
|
|
|
|
makeColorButton($rightside);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Embed image
|
|
|
|
|
|
|
|
var onUpload = function (e) {
|
|
|
|
|
|
|
|
var file = e.target.files[0];
|
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
|
|
|
|
reader.onload = function () {
|
|
|
|
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
img.onload = function () {
|
|
|
|
|
|
|
|
addImageToCanvas(img);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
img.src = reader.result;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
common.createButton('', true)
|
|
|
|
|
|
|
|
.attr('title', Messages.canvas_imageEmbed)
|
|
|
|
|
|
|
|
.removeClass('fa-question').addClass('fa-file-image-o')
|
|
|
|
|
|
|
|
.click(function () {
|
|
|
|
|
|
|
|
$('<input>', {type:'file'}).on('change', onUpload).click();
|
|
|
|
|
|
|
|
}).appendTo($rightside);
|
|
|
|
|
|
|
|
var fileDialogCfg = {
|
|
|
|
|
|
|
|
onSelect: function (data) {
|
|
|
|
|
|
|
|
if (data.type === 'file') {
|
|
|
|
|
|
|
|
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
|
|
|
|
|
|
|
|
common.displayMediatagImage($(mt), function (err, $image) {
|
|
|
|
|
|
|
|
blobURLToImage($image.attr('src'), function (imgSrc) {
|
|
|
|
|
|
|
|
var img = new Image();
|
|
|
|
|
|
|
|
img.onload = function () { addImageToCanvas(img); };
|
|
|
|
|
|
|
|
img.src = imgSrc;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
common.initFilePicker(fileDialogCfg);
|
|
|
|
|
|
|
|
APP.$mediaTagButton = $('<button>', {
|
|
|
|
|
|
|
|
title: Messages.filePickerButton,
|
|
|
|
|
|
|
|
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
|
|
|
|
|
|
|
|
style: 'font-size: 17px'
|
|
|
|
|
|
|
|
}).click(function () {
|
|
|
|
|
|
|
|
var pickerCfg = {
|
|
|
|
|
|
|
|
types: ['file'],
|
|
|
|
|
|
|
|
where: ['root'],
|
|
|
|
|
|
|
|
filter: {
|
|
|
|
|
|
|
|
fileType: ['image/']
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
common.openFilePicker(pickerCfg);
|
|
|
|
|
|
|
|
}).appendTo($rightside);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
metadataMgr.onChange(function () {
|
|
|
|
metadataMgr.onChange(function () {
|
|
|
|
@ -454,11 +536,15 @@ define([
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
|
|
|
|
Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
nThen(function (waitFor) {
|
|
|
|
if (newDoc) {
|
|
|
|
if (newDoc) {
|
|
|
|
canvas.loadFromJSON(newDoc);
|
|
|
|
canvas.loadFromJSON(newDoc, waitFor(function () {
|
|
|
|
|
|
|
|
console.log('loaded');
|
|
|
|
canvas.renderAll();
|
|
|
|
canvas.renderAll();
|
|
|
|
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}).nThen(function () {
|
|
|
|
setEditable(!readOnly);
|
|
|
|
setEditable(!readOnly);
|
|
|
|
initializing = false;
|
|
|
|
initializing = false;
|
|
|
|
config.onLocal();
|
|
|
|
config.onLocal();
|
|
|
|
@ -467,6 +553,8 @@ define([
|
|
|
|
if (isNew) {
|
|
|
|
if (isNew) {
|
|
|
|
common.openTemplatePicker();
|
|
|
|
common.openTemplatePicker();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
config.onRemote = function () {
|
|
|
|
config.onRemote = function () {
|
|
|
|
@ -476,14 +564,12 @@ define([
|
|
|
|
var json = JSON.parse(userDoc);
|
|
|
|
var json = JSON.parse(userDoc);
|
|
|
|
var remoteDoc = json.content;
|
|
|
|
var remoteDoc = json.content;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas.loadFromJSON(remoteDoc, function () {
|
|
|
|
|
|
|
|
canvas.renderAll();
|
|
|
|
if (json.metadata) {
|
|
|
|
if (json.metadata) {
|
|
|
|
metadataMgr.updateMetadata(json.metadata);
|
|
|
|
metadataMgr.updateMetadata(json.metadata);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
// TODO update palette if it has changed
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas.loadFromJSON(remoteDoc);
|
|
|
|
|
|
|
|
canvas.renderAll();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var content = canvas.toDatalessJSON();
|
|
|
|
var content = canvas.toDatalessJSON();
|
|
|
|
if (content !== remoteDoc) { common.notify(); }
|
|
|
|
if (content !== remoteDoc) { common.notify(); }
|
|
|
|
|
Caleb James DeLisle
7 years ago