Use framework in the whiteboard app
yflory
parent
d37aa0646e
commit
60db53a993
|
|
@ -176,9 +176,12 @@ define([
|
|||
}
|
||||
};
|
||||
|
||||
var contentUpdate = function (newContent) {
|
||||
var oldContent;
|
||||
var contentUpdate = function (newContent, waitFor) {
|
||||
if (JSONSortify(newContent) === JSONSortify(oldContent)) { return; }
|
||||
try {
|
||||
evContentUpdate.fire(newContent);
|
||||
evContentUpdate.fire(newContent, waitFor);
|
||||
setTimeout(function () { oldContent = newContent; });
|
||||
} catch (e) {
|
||||
console.log(e.stack);
|
||||
UI.errorLoadingScreen(e.message);
|
||||
|
|
@ -197,46 +200,48 @@ define([
|
|||
cpNfInner.metadataMgr.updateMetadata(meta);
|
||||
newContent = normalize(newContent);
|
||||
|
||||
contentUpdate(newContent);
|
||||
nThen(function (waitFor) {
|
||||
contentUpdate(newContent, waitFor);
|
||||
}).nThen(function () {
|
||||
if (!readOnly) {
|
||||
var newContent2NoMeta = normalize(contentGetter());
|
||||
var newContent2StrNoMeta = JSONSortify(newContent2NoMeta);
|
||||
var newContentStrNoMeta = JSONSortify(newContent);
|
||||
|
||||
if (!readOnly) {
|
||||
var newContent2NoMeta = normalize(contentGetter());
|
||||
var newContent2StrNoMeta = JSONSortify(newContent2NoMeta);
|
||||
var newContentStrNoMeta = JSONSortify(newContent);
|
||||
if (newContent2StrNoMeta !== newContentStrNoMeta) {
|
||||
console.error("shjson2 !== shjson");
|
||||
onLocal();
|
||||
|
||||
if (newContent2StrNoMeta !== newContentStrNoMeta) {
|
||||
console.error("shjson2 !== shjson");
|
||||
onLocal();
|
||||
/* pushing back over the wire is necessary, but it can
|
||||
result in a feedback loop, which we call a browser
|
||||
fight */
|
||||
// what changed?
|
||||
var ops = ChainPad.Diff.diff(newContentStrNoMeta, newContent2StrNoMeta);
|
||||
// log the changes
|
||||
console.log(newContentStrNoMeta);
|
||||
console.log(ops);
|
||||
var sop = JSON.stringify([ newContentStrNoMeta, ops ]);
|
||||
|
||||
/* pushing back over the wire is necessary, but it can
|
||||
result in a feedback loop, which we call a browser
|
||||
fight */
|
||||
// what changed?
|
||||
var ops = ChainPad.Diff.diff(newContentStrNoMeta, newContent2StrNoMeta);
|
||||
// log the changes
|
||||
console.log(newContentStrNoMeta);
|
||||
console.log(ops);
|
||||
var sop = JSON.stringify([ newContentStrNoMeta, ops ]);
|
||||
|
||||
var fights = window.CryptPad_fights = window.CryptPad_fights || [];
|
||||
var index = fights.indexOf(sop);
|
||||
if (index === -1) {
|
||||
fights.push(sop);
|
||||
console.log("Found a new type of browser disagreement");
|
||||
console.log("You can inspect the list in your " +
|
||||
"console at `REALTIME_MODULE.fights`");
|
||||
console.log(fights);
|
||||
} else {
|
||||
console.log("Encountered a known browser disagreement: " +
|
||||
"available at `REALTIME_MODULE.fights[%s]`", index);
|
||||
var fights = window.CryptPad_fights = window.CryptPad_fights || [];
|
||||
var index = fights.indexOf(sop);
|
||||
if (index === -1) {
|
||||
fights.push(sop);
|
||||
console.log("Found a new type of browser disagreement");
|
||||
console.log("You can inspect the list in your " +
|
||||
"console at `REALTIME_MODULE.fights`");
|
||||
console.log(fights);
|
||||
} else {
|
||||
console.log("Encountered a known browser disagreement: " +
|
||||
"available at `REALTIME_MODULE.fights[%s]`", index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notify only when the content has changed, not when someone has joined/left
|
||||
if (JSONSortify(newContent) !== JSONSortify(oldContent)) {
|
||||
common.notify();
|
||||
}
|
||||
// Notify only when the content has changed, not when someone has joined/left
|
||||
if (JSONSortify(newContent) !== JSONSortify(oldContent)) {
|
||||
common.notify();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var setHistoryMode = function (bool, update) {
|
||||
|
|
@ -289,58 +294,62 @@ define([
|
|||
var newPad = false;
|
||||
if (newContentStr === '') { newPad = true; }
|
||||
|
||||
if (!newPad) {
|
||||
var newContent = JSON.parse(newContentStr);
|
||||
cpNfInner.metadataMgr.updateMetadata(extractMetadata(newContent));
|
||||
newContent = normalize(newContent);
|
||||
contentUpdate(newContent);
|
||||
} else {
|
||||
if (!cpNfInner.metadataMgr.getPrivateData().isNewFile) {
|
||||
// We're getting 'new pad' but there is an existing file
|
||||
// We don't know exactly why this can happen but under no circumstances
|
||||
// should we overwrite the content, so lets just try again.
|
||||
console.log("userDoc is '' but this is not a new pad.");
|
||||
console.log("Either this is an empty document which has not been touched");
|
||||
console.log("Or else something is terribly wrong, reloading.");
|
||||
Feedback.send("NON_EMPTY_NEWDOC");
|
||||
setTimeout(function () { common.gotoURL(); }, 1000);
|
||||
return;
|
||||
// contentUpdate may be async so we need an nthen here
|
||||
nThen(function (waitFor) {
|
||||
if (!newPad) {
|
||||
var newContent = JSON.parse(newContentStr);
|
||||
cpNfInner.metadataMgr.updateMetadata(extractMetadata(newContent));
|
||||
newContent = normalize(newContent);
|
||||
contentUpdate(newContent, waitFor);
|
||||
} else {
|
||||
if (!cpNfInner.metadataMgr.getPrivateData().isNewFile) {
|
||||
// We're getting 'new pad' but there is an existing file
|
||||
// We don't know exactly why this can happen but under no circumstances
|
||||
// should we overwrite the content, so lets just try again.
|
||||
console.log("userDoc is '' but this is not a new pad.");
|
||||
console.log("Either this is an empty document which has not been touched");
|
||||
console.log("Or else something is terribly wrong, reloading.");
|
||||
Feedback.send("NON_EMPTY_NEWDOC");
|
||||
setTimeout(function () { common.gotoURL(); }, 1000);
|
||||
return;
|
||||
}
|
||||
console.log('updating title');
|
||||
title.updateTitle(title.defaultTitle);
|
||||
evOnDefaultContentNeeded.fire();
|
||||
}
|
||||
console.log('updating title');
|
||||
title.updateTitle(title.defaultTitle);
|
||||
evOnDefaultContentNeeded.fire();
|
||||
}
|
||||
stateChange(STATE.READY);
|
||||
firstConnection = false;
|
||||
if (!readOnly) { onLocal(); }
|
||||
evOnReady.fire(newPad);
|
||||
}).nThen(function () {
|
||||
stateChange(STATE.READY);
|
||||
firstConnection = false;
|
||||
if (!readOnly) { onLocal(); }
|
||||
evOnReady.fire(newPad);
|
||||
|
||||
UI.removeLoadingScreen(emitResize);
|
||||
UI.removeLoadingScreen(emitResize);
|
||||
|
||||
var privateDat = cpNfInner.metadataMgr.getPrivateData();
|
||||
var hash = privateDat.availableHashes.editHash ||
|
||||
privateDat.availableHashes.viewHash;
|
||||
var href = privateDat.pathname + '#' + hash;
|
||||
if (AppConfig.textAnalyzer && textContentGetter) {
|
||||
AppConfig.textAnalyzer(textContentGetter, privateDat.channel);
|
||||
}
|
||||
|
||||
if (options.thumbnail && privateDat.thumbnails) {
|
||||
if (hash) {
|
||||
options.thumbnail.href = href;
|
||||
options.thumbnail.getContent = function () {
|
||||
if (!cpNfInner.chainpad) { return; }
|
||||
return cpNfInner.chainpad.getUserDoc();
|
||||
};
|
||||
Thumb.initPadThumbnails(common, options.thumbnail);
|
||||
var privateDat = cpNfInner.metadataMgr.getPrivateData();
|
||||
var hash = privateDat.availableHashes.editHash ||
|
||||
privateDat.availableHashes.viewHash;
|
||||
var href = privateDat.pathname + '#' + hash;
|
||||
if (AppConfig.textAnalyzer && textContentGetter) {
|
||||
AppConfig.textAnalyzer(textContentGetter, privateDat.channel);
|
||||
}
|
||||
}
|
||||
|
||||
var skipTemp = Util.find(privateDat, ['settings', 'general', 'creation', 'noTemplate']);
|
||||
var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
|
||||
if (newPad && (!AppConfig.displayCreationScreen || (!skipTemp && skipCreation))) {
|
||||
common.openTemplatePicker();
|
||||
}
|
||||
if (options.thumbnail && privateDat.thumbnails) {
|
||||
if (hash) {
|
||||
options.thumbnail.href = href;
|
||||
options.thumbnail.getContent = function () {
|
||||
if (!cpNfInner.chainpad) { return; }
|
||||
return cpNfInner.chainpad.getUserDoc();
|
||||
};
|
||||
Thumb.initPadThumbnails(common, options.thumbnail);
|
||||
}
|
||||
}
|
||||
|
||||
var skipTemp = Util.find(privateDat, ['settings', 'general', 'creation', 'noTemplate']);
|
||||
var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
|
||||
if (newPad && (!AppConfig.displayCreationScreen || (!skipTemp && skipCreation))) {
|
||||
common.openTemplatePicker();
|
||||
}
|
||||
});
|
||||
};
|
||||
var onConnectionChange = function (info) {
|
||||
if (state === STATE.DELETED) { return; }
|
||||
|
|
@ -385,13 +394,19 @@ define([
|
|||
common.createButton('import', true, options, function (c, f) {
|
||||
if (async) {
|
||||
fi(c, f, function (content) {
|
||||
contentUpdate(content);
|
||||
onLocal();
|
||||
nThen(function (waitFor) {
|
||||
contentUpdate(content, waitFor);
|
||||
}).nThen(function () {
|
||||
onLocal();
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
contentUpdate(fi(c, f));
|
||||
onLocal();
|
||||
nThen(function (waitFor) {
|
||||
contentUpdate(fi(c, f), waitFor);
|
||||
}).nThen(function () {
|
||||
onLocal();
|
||||
});
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,81 +1,59 @@
|
|||
define([
|
||||
'jquery',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/common/toolbar3.js',
|
||||
'json.sortify',
|
||||
'/common/common-util.js',
|
||||
'/bower_components/nthen/index.js',
|
||||
'/common/sframe-common.js',
|
||||
'/common/sframe-app-framework.js',
|
||||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/common/common-interface.js',
|
||||
'/api/config',
|
||||
'/common/common-realtime.js',
|
||||
'/common/common-thumbnail.js',
|
||||
'/customize/pages.js',
|
||||
'/customize/messages.js',
|
||||
'/customize/application_config.js',
|
||||
'/common/common-thumbnail.js',
|
||||
'/whiteboard/colors.js',
|
||||
'/customize/application_config.js',
|
||||
'/bower_components/chainpad/chainpad.dist.js',
|
||||
|
||||
'/bower_components/secure-fabric.js/dist/fabric.min.js',
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
|
||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
||||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||||
'less!/customize/src/less2/main.less',
|
||||
], function (
|
||||
$,
|
||||
Crypto,
|
||||
Toolbar,
|
||||
JSONSortify,
|
||||
Util,
|
||||
Sortify,
|
||||
nThen,
|
||||
SFCommon,
|
||||
Framework,
|
||||
Util,
|
||||
Hash,
|
||||
UI,
|
||||
ApiConfig,
|
||||
CommonRealtime,
|
||||
Thumb,
|
||||
Pages,
|
||||
Messages,
|
||||
AppConfig,
|
||||
Thumb,
|
||||
Colors,
|
||||
AppConfig,
|
||||
ChainPad)
|
||||
{
|
||||
var saveAs = window.saveAs;
|
||||
|
||||
var APP = window.APP = {
|
||||
$: $
|
||||
};
|
||||
var Fabric = APP.Fabric = window.fabric;
|
||||
|
||||
var stringify = function (obj) {
|
||||
return JSONSortify(obj);
|
||||
};
|
||||
var verbose = function (x) { console.log(x); };
|
||||
verbose = function () {}; // comment out to enable verbose logging
|
||||
|
||||
var toolbar;
|
||||
|
||||
var andThen = function (common) {
|
||||
var config = {};
|
||||
/* Initialize Fabric */
|
||||
var canvas = APP.canvas = new Fabric.Canvas('cp-app-whiteboard-canvas', {
|
||||
containerClass: 'cp-app-whiteboard-canvas-container'
|
||||
});
|
||||
var $canvas = $('canvas');
|
||||
var $controls = $('#cp-app-whiteboard-controls');
|
||||
var $canvasContainer = $('canvas').parents('.cp-app-whiteboard-canvas-container');
|
||||
var mkControls = function (framework, canvas) {
|
||||
var $pickers = $('#cp-app-whiteboard-pickers');
|
||||
var $colors = $('#cp-app-whiteboard-colors');
|
||||
var $cursors = $('#cp-app-whiteboard-cursors');
|
||||
var $deleteButton = $('#cp-app-whiteboard-delete');
|
||||
var $toggle = $('#cp-app-whiteboard-toggledraw');
|
||||
var $controls = $('#cp-app-whiteboard-controls');
|
||||
var $width = $('#cp-app-whiteboard-width');
|
||||
var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
|
||||
var $opacity = $('#cp-app-whiteboard-opacity');
|
||||
var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]');
|
||||
var $toggle = $('#cp-app-whiteboard-toggledraw');
|
||||
var $deleteButton = $('#cp-app-whiteboard-delete');
|
||||
|
||||
var metadataMgr = framework._.cpNfInner.metadataMgr;
|
||||
|
||||
// Brush
|
||||
|
||||
var readOnly = false;
|
||||
var brush = {
|
||||
color: '#000000',
|
||||
opacity: 1
|
||||
|
|
@ -136,6 +114,36 @@ define([
|
|||
updateBrushOpacity();
|
||||
$opacity.on('change', updateBrushOpacity);
|
||||
|
||||
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);
|
||||
if (APP.draw) { $deleteButton.hide(); }
|
||||
else { $deleteButton.show(); }
|
||||
};
|
||||
$toggle.click(toggleDrawMode);
|
||||
|
||||
var deleteSelection = function () {
|
||||
if (canvas.getActiveObject()) {
|
||||
canvas.getActiveObject().remove();
|
||||
}
|
||||
if (canvas.getActiveGroup()) {
|
||||
canvas.getActiveGroup()._objects.forEach(function (el) {
|
||||
el.remove();
|
||||
});
|
||||
canvas.discardActiveGroup();
|
||||
}
|
||||
canvas.renderAll();
|
||||
framework.localChange();
|
||||
};
|
||||
$deleteButton.click(deleteSelection);
|
||||
$(window).on('keyup', function (e) {
|
||||
if (e.which === 46) { deleteSelection (); }
|
||||
});
|
||||
|
||||
|
||||
var pickColor = function (current, cb) {
|
||||
var $picker = $('<input>', {
|
||||
type: 'color',
|
||||
|
|
@ -169,96 +177,8 @@ define([
|
|||
setColor(color);
|
||||
});
|
||||
|
||||
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);
|
||||
if (APP.draw) { $deleteButton.hide(); }
|
||||
else { $deleteButton.show(); }
|
||||
};
|
||||
$toggle.click(toggleDrawMode);
|
||||
|
||||
var deleteSelection = function () {
|
||||
if (canvas.getActiveObject()) {
|
||||
canvas.getActiveObject().remove();
|
||||
}
|
||||
if (canvas.getActiveGroup()) {
|
||||
canvas.getActiveGroup()._objects.forEach(function (el) {
|
||||
el.remove();
|
||||
});
|
||||
canvas.discardActiveGroup();
|
||||
}
|
||||
canvas.renderAll();
|
||||
config.onLocal();
|
||||
};
|
||||
$deleteButton.click(deleteSelection);
|
||||
$(window).on('keyup', function (e) {
|
||||
if (e.which === 46) { deleteSelection (); }
|
||||
});
|
||||
|
||||
var setEditable = function (bool) {
|
||||
APP.editable = bool;
|
||||
if (readOnly && bool) { return; }
|
||||
if (bool) { $controls.css('display', 'flex'); }
|
||||
else { $controls.hide(); }
|
||||
|
||||
canvas.isDrawingMode = bool ? APP.draw : false;
|
||||
if (!bool) {
|
||||
canvas.deactivateAll();
|
||||
canvas.renderAll();
|
||||
}
|
||||
canvas.forEachObject(function (object) {
|
||||
object.selectable = bool;
|
||||
});
|
||||
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
|
||||
};
|
||||
|
||||
var saveImage = APP.saveImage = function () {
|
||||
var defaultName = "pretty-picture.png";
|
||||
UI.prompt(Messages.exportPrompt, defaultName, function (filename) {
|
||||
if (!(typeof(filename) === 'string' && filename)) { return; }
|
||||
$canvas[0].toBlob(function (blob) {
|
||||
saveAs(blob, filename);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
APP.FM = common.createFileManager({});
|
||||
APP.upload = function (title) {
|
||||
var canvas = $canvas[0];
|
||||
APP.canvas.deactivateAll().renderAll();
|
||||
canvas.toBlob(function (blob) {
|
||||
blob.name = title;
|
||||
APP.FM.handleFile(blob);
|
||||
});
|
||||
};
|
||||
|
||||
var initializing = true;
|
||||
var $bar = $('#cp-toolbar');
|
||||
var Title;
|
||||
var cpNfInner;
|
||||
var metadataMgr;
|
||||
|
||||
config = {
|
||||
readOnly: readOnly,
|
||||
patchTransformer: ChainPad.NaiveJSONTransformer,
|
||||
// cryptpad debug logging (default is 1)
|
||||
// logLevel: 0,
|
||||
validateContent: function (content) {
|
||||
try {
|
||||
JSON.parse(content);
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.log("Failed to parse, rejecting patch");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var addColorToPalette = function (color, i) {
|
||||
if (readOnly) { return; }
|
||||
if (framework.isReadOnly()) { return; }
|
||||
var $color = $('<span>', {
|
||||
'class': 'cp-app-whiteboard-palette-color',
|
||||
})
|
||||
|
|
@ -271,7 +191,7 @@ define([
|
|||
})
|
||||
.on('dblclick', function (e) {
|
||||
e.preventDefault();
|
||||
if (!APP.editable) { return; }
|
||||
if (framework.isLocked()) { return; }
|
||||
pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
|
||||
$color.css({
|
||||
'background-color': c,
|
||||
|
|
@ -287,7 +207,7 @@ define([
|
|||
|
||||
var first = true;
|
||||
var updatePalette = function (newPalette) {
|
||||
if (first || stringify(palette) !== stringify(newPalette)) {
|
||||
if (first || Sortify(palette) !== Sortify(newPalette)) {
|
||||
palette = newPalette;
|
||||
$colors.html('<div class="hidden"> </div>');
|
||||
palette.forEach(addColorToPalette);
|
||||
|
|
@ -299,7 +219,7 @@ define([
|
|||
var metadata = JSON.parse(JSON.stringify(metadataMgr.getMetadata()));
|
||||
metadata.palette = newPalette;
|
||||
metadataMgr.updateMetadata(metadata);
|
||||
config.onLocal();
|
||||
framework.localChange();
|
||||
};
|
||||
|
||||
var makeColorButton = function ($container) {
|
||||
|
|
@ -312,7 +232,7 @@ define([
|
|||
return;
|
||||
}
|
||||
|
||||
var $color = APP.$color = common.createButton(null, true, {
|
||||
var $color = APP.$color = framework._.sfCommon.createButton(null, true, {
|
||||
icon: 'fa-square',
|
||||
title: Messages.canvas_chooseColor,
|
||||
name: 'color',
|
||||
|
|
@ -331,33 +251,73 @@ define([
|
|||
return $color;
|
||||
};
|
||||
|
||||
var stringifyInner = function (textValue) {
|
||||
var obj = {
|
||||
content: textValue,
|
||||
metadata: metadataMgr.getMetadataLazy()
|
||||
};
|
||||
// stringify the json and send it into chainpad
|
||||
return stringify(obj);
|
||||
};
|
||||
updateLocalPalette(palette);
|
||||
|
||||
var onLocal = config.onLocal = function () {
|
||||
if (initializing) { return; }
|
||||
if (readOnly) { return; }
|
||||
|
||||
var content = stringifyInner(canvas.toDatalessJSON());
|
||||
|
||||
try {
|
||||
APP.realtime.contentUpdate(content);
|
||||
} catch (e) {
|
||||
APP.unrecoverable = true;
|
||||
setEditable(false);
|
||||
APP.toolbar.errorState(true, e.message);
|
||||
var msg = Messages.chainpadError;
|
||||
UI.errorLoadingScreen(msg, true, true);
|
||||
console.error(e);
|
||||
metadataMgr.onChange(function () {
|
||||
var md = metadataMgr.getMetadata();
|
||||
if (md.palette) {
|
||||
updateLocalPalette(md.palette);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
palette: palette,
|
||||
makeColorButton: makeColorButton,
|
||||
updateLocalPalette: updateLocalPalette,
|
||||
};
|
||||
};
|
||||
|
||||
var mkHelpMenu = function (framework) {
|
||||
var $appContainer = $('#cp-app-whiteboard-container');
|
||||
var helpMenu = framework._.sfCommon.createHelpMenu(['whiteboard']);
|
||||
$appContainer.prepend(helpMenu.menu);
|
||||
framework._.toolbar.$drawer.append(helpMenu.button);
|
||||
};
|
||||
|
||||
// Start of the main loop
|
||||
var andThen2 = function (framework) {
|
||||
var canvas = APP.canvas = new Fabric.Canvas('cp-app-whiteboard-canvas', {
|
||||
containerClass: 'cp-app-whiteboard-canvas-container'
|
||||
});
|
||||
var $canvas = $('canvas');
|
||||
var $canvasContainer = $('canvas').parents('.cp-app-whiteboard-canvas-container');
|
||||
var $controls = $('#cp-app-whiteboard-controls');
|
||||
var metadataMgr = framework._.cpNfInner.metadataMgr;
|
||||
|
||||
var setEditable = function (bool) {
|
||||
if (bool) { $controls.css('display', 'flex'); }
|
||||
else { $controls.hide(); }
|
||||
|
||||
canvas.isDrawingMode = bool ? APP.draw : false;
|
||||
if (!bool) {
|
||||
canvas.deactivateAll();
|
||||
canvas.renderAll();
|
||||
}
|
||||
canvas.forEachObject(function (object) {
|
||||
object.selectable = bool;
|
||||
});
|
||||
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
|
||||
};
|
||||
|
||||
mkHelpMenu(framework);
|
||||
|
||||
var controls = mkControls(framework, canvas);
|
||||
|
||||
// ---------------------------------------------
|
||||
// Whiteboard custom buttons
|
||||
// ---------------------------------------------
|
||||
|
||||
var $rightside = framework._.toolbar.$rightside;
|
||||
|
||||
APP.FM = framework._.sfCommon.createFileManager({});
|
||||
APP.upload = function (title) {
|
||||
var canvas = $canvas[0];
|
||||
APP.canvas.deactivateAll().renderAll();
|
||||
canvas.toBlob(function (blob) {
|
||||
blob.name = title;
|
||||
APP.FM.handleFile(blob);
|
||||
});
|
||||
};
|
||||
var addImageToCanvas = function (img) {
|
||||
var w = img.width;
|
||||
var h = img.height;
|
||||
|
|
@ -370,10 +330,116 @@ define([
|
|||
}
|
||||
var cImg = new Fabric.Image(img, { left:0, top:0, angle:0, });
|
||||
APP.canvas.add(cImg);
|
||||
onLocal();
|
||||
framework.localChange();
|
||||
};
|
||||
|
||||
var initThumbnails = function () {
|
||||
// Export to drive as PNG
|
||||
framework._.sfCommon.createButton('savetodrive', true, {}).click(function () {
|
||||
var defaultName = framework._.title.getTitle();
|
||||
UI.prompt(Messages.exportPrompt, defaultName + '.png', function (name) {
|
||||
if (name === null || !name.trim()) { return; }
|
||||
APP.upload(name);
|
||||
});
|
||||
}).appendTo($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);
|
||||
};
|
||||
framework._.sfCommon.createButton('', true, {
|
||||
title: Messages.canvas_imageEmbed,
|
||||
icon: 'fa-file-image-o',
|
||||
name: 'embedImage'
|
||||
}).click(function () {
|
||||
$('<input>', {type:'file'}).on('change', onUpload).click();
|
||||
}).appendTo($rightside);
|
||||
|
||||
if (framework._.sfCommon.isLoggedIn()) {
|
||||
var fileDialogCfg = {
|
||||
onSelect: function (data) {
|
||||
if (data.type === 'file') {
|
||||
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
|
||||
framework._.sfCommon.displayMediatagImage($(mt), function (err, $image) {
|
||||
Util.blobURLToImage($image.attr('src'), function (imgSrc) {
|
||||
var img = new Image();
|
||||
img.onload = function () { addImageToCanvas(img); };
|
||||
img.src = imgSrc;
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
framework._.sfCommon.initFilePicker(fileDialogCfg);
|
||||
framework._.sfCommon.createButton('mediatag', true).click(function () {
|
||||
var pickerCfg = {
|
||||
types: ['file'],
|
||||
where: ['root'],
|
||||
filter: {
|
||||
fileType: ['image/']
|
||||
}
|
||||
};
|
||||
framework._.sfCommon.openFilePicker(pickerCfg);
|
||||
}).appendTo($rightside);
|
||||
}
|
||||
|
||||
if (framework.isReadOnly()) {
|
||||
setEditable(false);
|
||||
} else {
|
||||
controls.makeColorButton($rightside);
|
||||
}
|
||||
|
||||
$('#cp-app-whiteboard-clear').on('click', function () {
|
||||
canvas.clear();
|
||||
framework.localChange();
|
||||
});
|
||||
|
||||
// ---------------------------------------------
|
||||
// End custom
|
||||
// ---------------------------------------------
|
||||
|
||||
|
||||
framework.onEditableChange(function () {
|
||||
var locked = framework.isLocked() || framework.isReadOnly();
|
||||
setEditable(!locked);
|
||||
});
|
||||
|
||||
framework.setFileExporter('png', function (cb) {
|
||||
$canvas[0].toBlob(function (blob) {
|
||||
cb(blob);
|
||||
});
|
||||
});
|
||||
|
||||
framework.setNormalizer(function (c) {
|
||||
return {
|
||||
content: c.content
|
||||
};
|
||||
});
|
||||
|
||||
framework.onContentUpdate(function (newContent, waitFor) {
|
||||
var content = newContent.content;
|
||||
canvas.loadFromJSON(content, waitFor(function () {
|
||||
canvas.renderAll();
|
||||
}));
|
||||
});
|
||||
|
||||
framework.setContentGetter(function () {
|
||||
var content = canvas.toDatalessJSON();
|
||||
return {
|
||||
content: content
|
||||
};
|
||||
});
|
||||
|
||||
framework.onReady(function () {
|
||||
var oldThumbnailState;
|
||||
var privateDat = metadataMgr.getPrivateData();
|
||||
if (!privateDat.thumbnails) { return; }
|
||||
|
|
@ -382,301 +448,41 @@ define([
|
|||
var href = privateDat.pathname + '#' + hash;
|
||||
var mkThumbnail = function () {
|
||||
if (!hash) { return; }
|
||||
if (initializing) { return; }
|
||||
if (!APP.realtime) { return; }
|
||||
var content = APP.realtime.getUserDoc();
|
||||
if (framework.getState() !== 'READY') { return; }
|
||||
if (!framework._.cpNfInner.chainpad) { return; }
|
||||
var content = framework._.cpNfInner.chainpad.getUserDoc();
|
||||
if (content === oldThumbnailState) { return; }
|
||||
var D = Thumb.getResizedDimensions($canvas[0], 'pad');
|
||||
Thumb.fromCanvas($canvas[0], D, function (err, b64) {
|
||||
oldThumbnailState = content;
|
||||
Thumb.setPadThumbnail(common, href, privateDat.channel, b64);
|
||||
Thumb.setPadThumbnail(framework._.sfCommon, href, privateDat.channel, b64);
|
||||
});
|
||||
};
|
||||
window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL);
|
||||
window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST);
|
||||
};
|
||||
|
||||
config.onInit = function (info) {
|
||||
updateLocalPalette(palette);
|
||||
readOnly = metadataMgr.getPrivateData().readOnly;
|
||||
|
||||
Title = common.createTitle({});
|
||||
|
||||
var configTb = {
|
||||
displayed: [
|
||||
'userlist',
|
||||
'title',
|
||||
'useradmin',
|
||||
'spinner',
|
||||
'newpad',
|
||||
'share',
|
||||
'limit',
|
||||
'unpinnedWarning'
|
||||
],
|
||||
title: Title.getTitleConfig(),
|
||||
metadataMgr: metadataMgr,
|
||||
readOnly: readOnly,
|
||||
realtime: info.realtime,
|
||||
sfCommon: common,
|
||||
$container: $bar,
|
||||
$contentContainer: $('#cp-app-whiteboard-canvas-area')
|
||||
};
|
||||
toolbar = APP.toolbar = Toolbar.create(configTb);
|
||||
Title.setToolbar(toolbar);
|
||||
|
||||
var $rightside = toolbar.$rightside;
|
||||
var $drawer = toolbar.$drawer;
|
||||
|
||||
/* save as template */
|
||||
if (!metadataMgr.getPrivateData().isTemplate) {
|
||||
var templateObj = {
|
||||
rt: info.realtime,
|
||||
getTitle: function () { return metadataMgr.getMetadata().title; }
|
||||
};
|
||||
var $templateButton = common.createButton('template', true, templateObj);
|
||||
$rightside.append($templateButton);
|
||||
}
|
||||
|
||||
/* add an export button */
|
||||
var $export = common.createButton('export', true, {}, saveImage);
|
||||
$drawer.append($export);
|
||||
|
||||
if (common.isLoggedIn()) {
|
||||
common.createButton('savetodrive', true, {}, function () {})
|
||||
.click(function () {
|
||||
UI.prompt(Messages.exportPrompt, document.title + '.png',
|
||||
function (name) {
|
||||
if (name === null || !name.trim()) { return; }
|
||||
APP.upload(name);
|
||||
});
|
||||
}).appendTo($rightside);
|
||||
|
||||
common.createButton('hashtag', true).appendTo($rightside);
|
||||
}
|
||||
|
||||
var $forget = common.createButton('forget', true, {}, function (err) {
|
||||
if (err) { return; }
|
||||
setEditable(false);
|
||||
});
|
||||
$rightside.append($forget);
|
||||
|
||||
var $properties = common.createButton('properties', true);
|
||||
toolbar.$drawer.append($properties);
|
||||
|
||||
var $appContainer = $('#cp-app-whiteboard-container');
|
||||
var helpMenu = common.createHelpMenu(['whiteboard']);
|
||||
$appContainer.prepend(helpMenu.menu);
|
||||
toolbar.$drawer.append(helpMenu.button);
|
||||
|
||||
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 () {
|
||||
addImageToCanvas(img);
|
||||
};
|
||||
img.src = reader.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
common.createButton('', true, {
|
||||
title: Messages.canvas_imageEmbed,
|
||||
icon: 'fa-file-image-o',
|
||||
name: 'embedImage'
|
||||
}).click(function () {
|
||||
$('<input>', {type:'file'}).on('change', onUpload).click();
|
||||
}).appendTo($rightside);
|
||||
|
||||
if (common.isLoggedIn()) {
|
||||
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) {
|
||||
Util.blobURLToImage($image.attr('src'), function (imgSrc) {
|
||||
var img = new Image();
|
||||
img.onload = function () { addImageToCanvas(img); };
|
||||
img.src = imgSrc;
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
common.initFilePicker(fileDialogCfg);
|
||||
APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
|
||||
var pickerCfg = {
|
||||
types: ['file'],
|
||||
where: ['root'],
|
||||
filter: {
|
||||
fileType: ['image/']
|
||||
}
|
||||
};
|
||||
common.openFilePicker(pickerCfg);
|
||||
}).appendTo($rightside);
|
||||
}
|
||||
} else {
|
||||
$colors.hide();
|
||||
$controls.hide();
|
||||
}
|
||||
|
||||
metadataMgr.onChange(function () {
|
||||
var md = metadataMgr.getMetadata();
|
||||
if (md.palette) {
|
||||
updateLocalPalette(md.palette);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
config.onReady = function (info) {
|
||||
if (APP.realtime !== info.realtime) {
|
||||
APP.realtime = info.realtime;
|
||||
}
|
||||
|
||||
var userDoc = APP.realtime.getUserDoc();
|
||||
var isNew = false;
|
||||
var newDoc = '';
|
||||
if (userDoc === "" || userDoc === "{}") { isNew = true; }
|
||||
|
||||
if (userDoc !== "") {
|
||||
var hjson = JSON.parse(userDoc);
|
||||
|
||||
if (hjson && hjson.metadata) {
|
||||
metadataMgr.updateMetadata(hjson.metadata);
|
||||
}
|
||||
if (typeof (hjson) !== 'object' || Array.isArray(hjson) ||
|
||||
(hjson.metadata && typeof(hjson.metadata.type) !== 'undefined' &&
|
||||
hjson.metadata.type !== 'whiteboard')) {
|
||||
var errorText = Messages.typeError;
|
||||
UI.errorLoadingScreen(errorText);
|
||||
throw new Error(errorText);
|
||||
}
|
||||
newDoc = hjson.content;
|
||||
} else {
|
||||
Title.updateTitle(Title.defaultTitle);
|
||||
}
|
||||
|
||||
nThen(function (waitFor) {
|
||||
if (newDoc) {
|
||||
canvas.loadFromJSON(newDoc, waitFor(function () {
|
||||
console.log('loaded');
|
||||
canvas.renderAll();
|
||||
}));
|
||||
}
|
||||
}).nThen(function () {
|
||||
setEditable(!readOnly);
|
||||
initializing = false;
|
||||
config.onLocal();
|
||||
UI.removeLoadingScreen();
|
||||
|
||||
initThumbnails();
|
||||
|
||||
|
||||
if (readOnly) { return; }
|
||||
|
||||
var privateDat = metadataMgr.getPrivateData();
|
||||
var skipTemp = Util.find(privateDat,
|
||||
['settings', 'general', 'creation', 'noTemplate']);
|
||||
var skipCreation = Util.find(privateDat, ['settings', 'general', 'creation', 'skip']);
|
||||
if (isNew && (!AppConfig.displayCreationScreen || (!skipTemp && skipCreation))) {
|
||||
common.openTemplatePicker();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
config.onRemote = function () {
|
||||
if (initializing) { return; }
|
||||
var userDoc = APP.realtime.getUserDoc();
|
||||
|
||||
var json = JSON.parse(userDoc);
|
||||
var remoteDoc = json.content;
|
||||
|
||||
canvas.loadFromJSON(remoteDoc, function () {
|
||||
canvas.renderAll();
|
||||
if (json.metadata) {
|
||||
metadataMgr.updateMetadata(json.metadata);
|
||||
}
|
||||
});
|
||||
|
||||
var content = canvas.toDatalessJSON();
|
||||
if (content !== remoteDoc) { common.notify(); }
|
||||
if (readOnly) { setEditable(false); }
|
||||
};
|
||||
|
||||
config.onAbort = function () {
|
||||
if (APP.unrecoverable) { return; }
|
||||
// inform of network disconnect
|
||||
setEditable(false);
|
||||
toolbar.failed();
|
||||
UI.alert(Messages.common_connectionLost, undefined, true);
|
||||
};
|
||||
|
||||
config.onConnectionChange = function (info) {
|
||||
if (APP.unrecoverable) { return; }
|
||||
setEditable(info.state);
|
||||
if (info.state) {
|
||||
initializing = true;
|
||||
//UI.findOKButton().click();
|
||||
} else {
|
||||
//UI.alert(Messages.common_connectionLost, undefined, true);
|
||||
}
|
||||
};
|
||||
|
||||
config.onError = function (err) {
|
||||
common.onServerError(err, toolbar, function () {
|
||||
APP.unrecoverable = true;
|
||||
setEditable(false);
|
||||
});
|
||||
};
|
||||
|
||||
cpNfInner = common.startRealtime(config);
|
||||
metadataMgr = cpNfInner.metadataMgr;
|
||||
|
||||
cpNfInner.onInfiniteSpinner(function () {
|
||||
if (APP.unrecoverable) { return; }
|
||||
setEditable(false);
|
||||
UI.confirm(Messages.realtime_unrecoverableError, function (yes) {
|
||||
if (!yes) { return; }
|
||||
common.gotoURL();
|
||||
});
|
||||
});
|
||||
|
||||
canvas.on('mouse:up', onLocal);
|
||||
|
||||
$('#cp-app-whiteboard-clear').on('click', function () {
|
||||
canvas.clear();
|
||||
onLocal();
|
||||
});
|
||||
|
||||
$('#save').on('click', function () {
|
||||
saveImage();
|
||||
});
|
||||
|
||||
common.onLogout(function () { setEditable(false); });
|
||||
canvas.on('mouse:up', framework.localChange);
|
||||
framework.start();
|
||||
};
|
||||
|
||||
var main = function () {
|
||||
var common;
|
||||
|
||||
// var framework;
|
||||
nThen(function (waitFor) {
|
||||
$(waitFor(function () {
|
||||
UI.addLoadingScreen();
|
||||
var $div = $('<div>').append(Pages['/whiteboard/']());
|
||||
$('body').append($div.html());
|
||||
}));
|
||||
SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
|
||||
}).nThen(function (waitFor) {
|
||||
common.getSframeChannel().onReady(waitFor());
|
||||
}).nThen(function (waitFor) {
|
||||
common.handleNewFile(waitFor);
|
||||
}).nThen(function (/*waitFor*/) {
|
||||
andThen(common);
|
||||
|
||||
// Framework initialization
|
||||
Framework.create({
|
||||
patchTransformer: ChainPad.NaiveJSONTransformer,
|
||||
toolbarContainer: '#cp-toolbar',
|
||||
contentContainer: '#cp-app-whiteboard-canvas-area',
|
||||
}, waitFor(function (framework) {
|
||||
andThen2(framework);
|
||||
}));
|
||||
});
|
||||
};
|
||||
main();
|
||||
|
|
|
|||
Loading…
Reference in New Issue