X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/cd02846fc9db03e6d9a2add20150b8808a66d850..058d6f3448085c6f1d513691f8f2d5a12ae1d10a:/src/editor/modules/documentCanvas/canvas/canvas.js?ds=sidebyside diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index b0d461b..d13e2ea 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.transform('smartxml.setText', {text: 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,16 +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); - textElement.data('wlxmlNode').setText(mutation.target.data); + var textElement = canvas.getDocumentElement(mutation.target), + toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; + + //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) { @@ -119,99 +168,6 @@ $.extend(Canvas.prototype, { return documentElement.DocumentNodeElement.create(params, this); }, - wrapText: function(params) { - params = _.extend({textNodeIdx: 0}, params); - if(typeof params.textNodeIdx === 'number') - params.textNodeIdx = [params.textNodeIdx]; - - var childrenInside = params.inside.children(), - idx1 = Math.min.apply(Math, params.textNodeIdx), - idx2 = Math.max.apply(Math, params.textNodeIdx), - textNode1 = childrenInside[idx1], - textNode2 = childrenInside[idx2], - sameNode = textNode1.sameNode(textNode2), - prefixOutside = textNode1.getText().substr(0, params.offsetStart), - prefixInside = textNode1.getText().substr(params.offsetStart), - suffixInside = textNode2.getText().substr(0, params.offsetEnd), - suffixOutside = textNode2.getText().substr(params.offsetEnd) - ; - - var wrapperElement = this.createNodeElement({tag: params._with.tag, klass: params._with.klass}); - textNode1.after(wrapperElement); - textNode1.detach(); - - if(prefixOutside.length > 0) - wrapperElement.before({text:prefixOutside}); - if(sameNode) { - var core = textNode1.getText().substr(params.offsetStart, params.offsetEnd - params.offsetStart); - wrapperElement.append({text: core}); - } else { - textNode2.detach(); - if(prefixInside.length > 0) - wrapperElement.append({text: prefixInside}); - for(var i = idx1 + 1; i < idx2; i++) { - wrapperElement.append(childrenInside[i]); - } - if(suffixInside.length > 0) - wrapperElement.append({text: suffixInside}); - } - if(suffixOutside.length > 0) - wrapperElement.after({text: suffixOutside}); - return wrapperElement; - }, - - wrapElements: function(params) { - if(!(params.element1.parent().sameNode(params.element2.parent()))) - return; - - var parent = params.element1.parent(), - parentChildren = parent.children(), - wrapper = this.createNodeElement({ - tag: params._with.tag, - klass: params._with.klass}), - idx1 = parent.childIndex(params.element1), - idx2 = parent.childIndex(params.element2); - - if(idx1 > idx2) { - var tmp = idx1; - idx1 = idx2; - idx2 = tmp; - } - - var insertingMethod, insertingTarget; - if(idx1 === 0) { - insertingMethod = 'prepend'; - insertingTarget = parent; - } else { - insertingMethod = 'after'; - insertingTarget = parentChildren[idx1-1]; - } - - for(var i = idx1; i <= idx2; i++) { - wrapper.append(parentChildren[i].detach()); - } - - insertingTarget[insertingMethod](wrapper); - return wrapper; - }, - - getSiblingParents: function(params) { - var parents1 = [params.element1].concat(params.element1.parents()).reverse(), - parents2 = [params.element2].concat(params.element2.parents()).reverse(), - noSiblingParents = null; - - if(parents1.length === 0 || parents2.length === 0 || !(parents1[0].sameNode(parents2[0]))) - return noSiblingParents; - - var i; - for(i = 0; i < Math.min(parents1.length, parents2.length); i++) { - if(parents1[i].sameNode(parents2[i])) - continue; - break; - } - return {element1: parents1[i], element2: parents2[i]}; - }, - getDocumentElement: function(from) { if(from instanceof HTMLElement || from instanceof Text) { return documentElement.DocumentElement.fromHTMLElement(from, this); @@ -314,13 +270,6 @@ $.extend(Canvas.prototype, { setCursorPosition: function(position) { if(position.element) this._moveCaretToTextElement(position.element, position.offset); - }, - - toXML: function() { - var parent = $('
'), - parts = this.doc().toXML(0); - parent.append(parts); - return parent.html(); } });