Embed an image in whiteboard

pull/1/head
yflory 7 years ago
parent 888028c542
commit 5e7bf0cfb8

@ -630,6 +630,7 @@ define([
}
}),
h('div#cp-app-whiteboard-pickers'),
h('div#cp-app-whiteboard-media-hidden')
];
};

@ -136,4 +136,4 @@ define([
});
};
return Object.freeze(module.exports);
});
});

@ -25,6 +25,10 @@
display: none;
}
#cp-app-whiteboard-media-hidden {
display: none;
}
// created in the html
#cp-app-whiteboard-canvas-area {
flex: 1;

@ -178,6 +178,7 @@ define([
APP.draw = true;
var toggleDrawMode = function () {
canvas.deactivateAll().renderAll();
APP.draw = !APP.draw;
canvas.isDrawingMode = APP.draw;
$toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
@ -353,6 +354,7 @@ define([
var onLocal = config.onLocal = function () {
if (initializing) { return; }
if (readOnly) { return; }
console.error('local');
var content = stringifyInner(canvas.toDatalessJSON());
@ -413,6 +415,58 @@ define([
if (!readOnly) {
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 () {
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();
};
img.src = reader.result;
};
reader.readAsDataURL(file);
};
common.createButton('', true)
.attr('title', 'Embed an image')
.click(function () {
$('<input>', {type:'file'}).on('change', onUpload).click();
}).appendTo($rightside);
var fileDialogCfg = {
onSelect: function (data) {
if (data.type === 'file') {
var $block = $('#cp-app-whiteboard-media-hidden');
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
$block.append(mt);
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']
};
common.openFilePicker(pickerCfg);
}).appendTo($rightside);
}
metadataMgr.onChange(function () {
@ -454,19 +508,26 @@ define([
} else {
Title.updateTitle(Cryptpad.initialName || Title.defaultTitle);
}
if (newDoc) {
canvas.loadFromJSON(newDoc);
canvas.renderAll();
}
setEditable(!readOnly);
initializing = false;
config.onLocal();
Cryptpad.removeLoadingScreen();
if (readOnly) { return; }
if (isNew) {
common.openTemplatePicker();
}
nThen(function (waitFor) {
if (newDoc) {
canvas.loadFromJSON(newDoc, waitFor(function () {
console.log('loaded');
canvas.renderAll();
}));
}
}).nThen(function () {
setEditable(!readOnly);
initializing = false;
config.onLocal();
Cryptpad.removeLoadingScreen();
if (readOnly) { return; }
if (isNew) {
common.openTemplatePicker();
}
});
};
config.onRemote = function () {
@ -476,14 +537,12 @@ define([
var json = JSON.parse(userDoc);
var remoteDoc = json.content;
if (json.metadata) {
metadataMgr.updateMetadata(json.metadata);
}
// TODO update palette if it has changed
canvas.loadFromJSON(remoteDoc);
canvas.renderAll();
canvas.loadFromJSON(remoteDoc, function () {
canvas.renderAll();
if (json.metadata) {
metadataMgr.updateMetadata(json.metadata);
}
});
var content = canvas.toDatalessJSON();
if (content !== remoteDoc) { common.notify(); }

Loading…
Cancel
Save