From 60db53a99323677d5e4f794be83e3a7a1e375d54 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 18 Jun 2018 11:53:39 +0200 Subject: [PATCH] Use framework in the whiteboard app --- www/common/sframe-app-framework.js | 197 +++++---- www/whiteboard/inner.js | 664 ++++++++++------------------- 2 files changed, 341 insertions(+), 520 deletions(-) diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index 6d5534100..6bd967ffe 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -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); - - if (!readOnly) { - var newContent2NoMeta = normalize(contentGetter()); - var newContent2StrNoMeta = JSONSortify(newContent2NoMeta); - var newContentStrNoMeta = JSONSortify(newContent); - - 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 ]); - - 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); + nThen(function (waitFor) { + contentUpdate(newContent, waitFor); + }).nThen(function () { + if (!readOnly) { + var newContent2NoMeta = normalize(contentGetter()); + var newContent2StrNoMeta = JSONSortify(newContent2NoMeta); + var newContentStrNoMeta = JSONSortify(newContent); + + 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 ]); + + 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(); + } + }).nThen(function () { + stateChange(STATE.READY); + firstConnection = false; + if (!readOnly) { onLocal(); } + evOnReady.fire(newPad); + + 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); } - console.log('updating title'); - title.updateTitle(title.defaultTitle); - evOnDefaultContentNeeded.fire(); - } - stateChange(STATE.READY); - firstConnection = false; - if (!readOnly) { onLocal(); } - evOnReady.fire(newPad); - - 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); + 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 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(); + }); }) ); }; diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js index 4949343ba..bf57e89b7 100644 --- a/www/whiteboard/inner.js +++ b/www/whiteboard/inner.js @@ -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 toolbar; + var verbose = function (x) { console.log(x); }; + verbose = function () {}; // comment out to enable verbose logging - 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,39 +114,6 @@ define([ updateBrushOpacity(); $opacity.on('change', updateBrushOpacity); - var pickColor = function (current, cb) { - var $picker = $('', { - type: 'color', - value: '#FFFFFF', - }) - .on('change', function () { - var color = this.value; - cb(color); - }).appendTo($pickers); - setTimeout(function () { - $picker.val(current); - $picker.click(); - }); - }; - var setColor = function (c) { - c = Colors.rgb2hex(c); - brush.color = c; - canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity); - APP.$color.css({ - 'color': c, - }); - createCursor(); - }; - - var palette = AppConfig.whiteboardPalette || [ - 'red', 'blue', 'green', 'white', 'black', 'purple', - 'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink' - ]; - $('.cp-app-whiteboard-palette-color').on('click', function () { - var color = $(this).css('background-color'); - setColor(color); - }); - APP.draw = true; var toggleDrawMode = function () { canvas.deactivateAll().renderAll(); @@ -191,74 +136,49 @@ define([ canvas.discardActiveGroup(); } canvas.renderAll(); - config.onLocal(); + framework.localChange(); }; $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); - }); + var pickColor = function (current, cb) { + var $picker = $('', { + type: 'color', + value: '#FFFFFF', + }) + .on('change', function () { + var color = this.value; + cb(color); + }).appendTo($pickers); + setTimeout(function () { + $picker.val(current); + $picker.click(); }); }; - - 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 setColor = function (c) { + c = Colors.rgb2hex(c); + brush.color = c; + canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity); + APP.$color.css({ + 'color': c, }); + createCursor(); }; - 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 palette = AppConfig.whiteboardPalette || [ + 'red', 'blue', 'green', 'white', 'black', 'purple', + 'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink' + ]; + $('.cp-app-whiteboard-palette-color').on('click', function () { + var color = $(this).css('background-color'); + setColor(color); + }); var addColorToPalette = function (color, i) { - if (readOnly) { return; } + if (framework.isReadOnly()) { return; } var $color = $('', { '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(''); 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); + + 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 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); + 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,313 +330,159 @@ define([ } var cImg = new Fabric.Image(img, { left:0, top:0, angle:0, }); APP.canvas.add(cImg); - onLocal(); + framework.localChange(); }; - var initThumbnails = function () { - var oldThumbnailState; - var privateDat = metadataMgr.getPrivateData(); - if (!privateDat.thumbnails) { return; } - var hash = privateDat.availableHashes.editHash || - privateDat.availableHashes.viewHash; - var href = privateDat.pathname + '#' + hash; - var mkThumbnail = function () { - if (!hash) { return; } - if (initializing) { return; } - if (!APP.realtime) { return; } - var content = APP.realtime.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); - }); + // 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; }; - window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL); - window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST); + reader.readAsDataURL(file); }; - - 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') + framework._.sfCommon.createButton('', true, { + title: Messages.canvas_imageEmbed, + icon: 'fa-file-image-o', + name: 'embedImage' + }).click(function () { + $('', {type:'file'}).on('change', onUpload).click(); + }).appendTo($rightside); + + if (framework._.sfCommon.isLoggedIn()) { + var fileDialogCfg = { + onSelect: function (data) { + if (data.type === 'file') { + var mt = ''; + 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; + } + } }; - 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; } + framework._.sfCommon.initFilePicker(fileDialogCfg); + framework._.sfCommon.createButton('mediatag', true).click(function () { + var pickerCfg = { + types: ['file'], + where: ['root'], + filter: { + fileType: ['image/'] + } }; - 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 () { - $('', {type:'file'}).on('change', onUpload).click(); - }).appendTo($rightside); - - if (common.isLoggedIn()) { - var fileDialogCfg = { - onSelect: function (data) { - if (data.type === 'file') { - var mt = ''; - 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; } + framework._.sfCommon.openFilePicker(pickerCfg); + }).appendTo($rightside); + } - 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); - } + if (framework.isReadOnly()) { + setEditable(false); + } else { + controls.makeColorButton($rightside); + } - 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(); + $('#cp-app-whiteboard-clear').on('click', function () { + canvas.clear(); + framework.localChange(); + }); - initThumbnails(); + // --------------------------------------------- + // End custom + // --------------------------------------------- - if (readOnly) { return; } + framework.onEditableChange(function () { + var locked = framework.isLocked() || framework.isReadOnly(); + setEditable(!locked); + }); - 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(); - } + framework.setFileExporter('png', function (cb) { + $canvas[0].toBlob(function (blob) { + cb(blob); }); + }); - }; - - config.onRemote = function () { - if (initializing) { return; } - var userDoc = APP.realtime.getUserDoc(); - - var json = JSON.parse(userDoc); - var remoteDoc = json.content; + framework.setNormalizer(function (c) { + return { + content: c.content + }; + }); - canvas.loadFromJSON(remoteDoc, function () { + framework.onContentUpdate(function (newContent, waitFor) { + var content = newContent.content; + canvas.loadFromJSON(content, waitFor(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(); + framework.setContentGetter(function () { + var content = canvas.toDatalessJSON(); + return { + content: content + }; }); - $('#save').on('click', function () { - saveImage(); + framework.onReady(function () { + var oldThumbnailState; + var privateDat = metadataMgr.getPrivateData(); + if (!privateDat.thumbnails) { return; } + var hash = privateDat.availableHashes.editHash || + privateDat.availableHashes.viewHash; + var href = privateDat.pathname + '#' + hash; + var mkThumbnail = function () { + if (!hash) { return; } + 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(framework._.sfCommon, href, privateDat.channel, b64); + }); + }; + window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL); + window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST); }); - 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 = $('
').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();