X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/2546c9dabe14b77b9e97c81efb2403eb93e9f79d..8f3efc2235f836dd2b624d569d97a7ae0dad77ff:/src/editor/modules/documentCanvas/canvas/canvas.js diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index 9a01457..01cb14e 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -10,12 +10,49 @@ define([ 'use strict'; +var TextHandler = function(canvas) {this.canvas = canvas; this.buffer = null}; +$.extend(TextHandler.prototype, { + handle: function(node, text) { + //console.log('canvas text handler: ' + text); + this.setText(text, node); + return; + if(!this.node) { + this.node = node; + } + if(this.node.sameNode(node)) { + this._ping(text); + } else { + this.flush(); + this.node = node; + this._ping(text); + } + }, + _ping: _.throttle(function(text) { + this.buffer = text; + this.flush(); + }, 1000), + flush: function() { + if(this.buffer != null) { + this.setText(this.buffer, this.node); + this.buffer = null; + } + }, + setText: function(text, node) { + //this.canvas.wlxmlDocument.transform('setText', {node:node, text: text}); + node.setText(text); + + } + +}); + + var Canvas = function(wlxmlDocument, publisher) { this.eventBus = _.extend({}, Backbone.Events); this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); this.wlxmlListener = wlxmlListener.create(this); this.loadWlxmlDocument(wlxmlDocument); this.publisher = publisher ? publisher : function() {}; + this.textHandler = new TextHandler(this); }; $.extend(Canvas.prototype, { @@ -25,15 +62,19 @@ $.extend(Canvas.prototype, { return false; } - var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root); + this.wlxmlListener.listenTo(wlxmlDocument); + this.wlxmlDocument = wlxmlDocument; + this.reloadRoot(); + this.setupEventHandling(); + }, + + reloadRoot: function() { + var canvasDOM = this.generateCanvasDOM(this.wlxmlDocument.root); + //var canvasDOM = this.wlxmlDocument.root.getData('canvasElement') ? this.wlxmlDocument.root.getData('canvasElement').dom() : this.generateCanvasDOM(this.wlxmlDocument.root); this.wrapper.empty(); this.wrapper.append(canvasDOM); this.d = this.wrapper.children(0); - this.setupEventHandling(); - - this.wlxmlListener.listenTo(wlxmlDocument); - this.wlxmlDocument = wlxmlDocument; }, generateCanvasDOM: function(wlxmlNode) { @@ -52,6 +93,8 @@ $.extend(Canvas.prototype, { canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); }); + + var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { @@ -62,18 +105,22 @@ $.extend(Canvas.prototype, { mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); } - observer.observe(canvas.d[0], config); + observer.observe(canvas.wrapper[0], config); canvas.publisher('contentChanged'); var textElement = canvas.getDocumentElement(mutation.target), toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; - textElement.data('wlxmlNode').setText(toSet); + //textElement.data('wlxmlNode').setText(toSet); + //textElement.data('wlxmlNode').document.transform('setText', {node: textElement.data('wlxmlNode'), text: toSet}); + if(textElement.data('wlxmlNode').getText() != toSet) { + canvas.textHandler.handle(textElement.data('wlxmlNode'), toSet); + } } }); }); var config = { attributes: false, childList: false, characterData: true, subtree: true, characterDataOldValue: true}; - observer.observe(this.d[0], config); + observer.observe(this.wrapper[0], config); this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) {