X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/71b7ba4d1d17adc39165914016fa892671cc4316..75d2183aafd4b2d3e94c17f6c3c8ee0d8a4738e4:/src/editor/modules/documentCanvas/canvas/canvas.js?ds=inline diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index fd884a8..d13e2ea 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -4,181 +4,82 @@ define([ 'libs/backbone', 'modules/documentCanvas/canvas/documentElement', 'modules/documentCanvas/canvas/keyboard', -'modules/documentCanvas/canvas/utils' -], function($, _, Backbone, documentElement, keyboard, utils) { +'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/wlxmlListener' +], function($, _, Backbone, documentElement, keyboard, utils, wlxmlListener) { 'use strict'; -var Canvas = function(wlxml, publisher, ver) { - this.eventBus = _.extend({}, Backbone.Events); - if(ver === 2) { - this.loadWlxmlDocument(wlxml); - } else { - this.loadWlxml(wlxml); +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, { loadWlxmlDocument: function(wlxmlDocument) { - var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root); + if(!wlxmlDocument) { + return false; + } - this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); - this.wrapper.append(canvasDOM); - this.d = this.wrapper.children(0); + this.wlxmlListener.listenTo(wlxmlDocument); + this.wlxmlDocument = wlxmlDocument; + this.reloadRoot(); this.setupEventHandling(); }, - generateCanvasDOM: function(wlxmlNode) { - // var element = this.createNodeElement2({ - // tag: wlxmlNode.getTagName(), - // klass: wlxmlNode.getClass(), //currentTag.attr('class'), - // meta: wlxmlNode.getMetaAttributes(), //meta, - // others: wlxmlNode.getOtherAttributes(), // ~ //others, - // rawChildren: wlxmlNode.contents(), - // prepopulateOnEmpty: true - // }); //->create2 - - var element = documentElement.DocumentNodeElement.create2(wlxmlNode, this); - + 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); - ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { - element.data(attr, ''); - }); - return element.dom(); + this.wrapper.empty(); + this.wrapper.append(canvasDOM); + this.d = this.wrapper.children(0); }, - loadWlxml: function(wlxml) { - var d = wlxml ? $($.trim(wlxml)) : null; - if(d) { - this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); - this.wrapper.append(d); - var canvas = this; - - this.wrapper.find('*').replaceWith(function() { - var currentTag = $(this); - if(currentTag.attr('wlxml-tag')) - return; - - var meta = {}, others = {}; - for(var i = 0; i < this.attributes.length; i++) { - var attr = this.attributes[i]; - if(attr.name.substr(0, 5) === 'meta-') - meta[attr.name.substr(5)] = attr.value; - else if(attr.name !== 'class') - others[attr.name] = attr.value; - } - - var element = canvas.createNodeElement({ - tag: currentTag.prop('tagName').toLowerCase(), - klass: currentTag.attr('class'), - meta: meta, - others: others, - rawChildren: currentTag.contents(), - prepopulateOnEmpty: true - }); - - ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { - element.data(attr, ''); - }); - return element.dom(); - }); - - var FIRST_CONTENT_INDEX = 0; - - // @@ TODO - refactor! - var getNode = function(element) { - return element.children('[document-element-content]'); - } - - this.wrapper.find(':not(iframe)').addBack().contents() - .filter(function() {return this.nodeType === Node.TEXT_NODE}) - .each(function() { - - // TODO: use DocumentElement API - - var el = $(this), - text = {original: el.text(), trimmed: $.trim(el.text())}, - elParent = el.parent(), - hasSpanParent = elParent.attr('wlxml-tag') === 'span', - hasSpanBefore = el.prev().length > 0 && getNode($(el.prev()[0])).attr('wlxml-tag') === 'span', - hasSpanAfter = el.next().length > 0 && getNode($(el.next()[0])).attr('wlxml-tag') === 'span'; - - if(el.parent().hasClass('canvas-widget') || elParent.attr('document-text-element') !== undefined) - return true; // continue - - var addInfo = function(toAdd, where) { - var parentContents = elParent.contents(), - idx = parentContents.index(el[0]), - prev = idx > FIRST_CONTENT_INDEX ? parentContents[idx-1] : null, - next = idx < parentContents.length - 1 ? parentContents[idx+1] : null, - target, key; - - if(where === 'above') { - target = prev ? $(prev) : elParent.parent(); - key = prev ? 'orig-after' : 'orig-begin'; - } else if(where === 'below') { - target = next ? $(next) : elParent.parent(); - key = next ? 'orig-before' : 'orig-end'; - } else { throw new Object;} - - target.data(key, toAdd); - } - - text.transformed = text.trimmed; - - if(hasSpanParent || hasSpanBefore || hasSpanAfter) { - var startSpace = /\s/g.test(text.original.substr(0,1)), - endSpace = /\s/g.test(text.original.substr(-1)) && text.original.length > 1; - text.transformed = (startSpace && (hasSpanParent || hasSpanBefore) ? ' ' : '') - + text.trimmed - + (endSpace && (hasSpanParent || hasSpanAfter) ? ' ' : ''); - } else { - if(text.trimmed.length === 0 && text.original.length > 0 && elParent.contents().length === 1) - text.transformed = ' '; - } - - if(!text.transformed) { - addInfo(text.original, 'below'); - el.remove(); - return true; // continue - } - - if(text.transformed !== text.original) { - if(!text.trimmed) { - addInfo(text.original, 'below'); - } else { - var startingMatch = text.original.match(/^\s+/g), - endingMatch = text.original.match(/\s+$/g), - startingWhiteSpace = startingMatch ? startingMatch[0] : null, - endingWhiteSpace = endingMatch ? endingMatch[0] : null; - - if(endingWhiteSpace) { - if(text.transformed[text.transformed.length - 1] === ' ' && endingWhiteSpace[0] === ' ') - endingWhiteSpace = endingWhiteSpace.substr(1); - addInfo(endingWhiteSpace, 'below'); - } - - if(startingWhiteSpace) { - if(text.transformed[0] === ' ' && startingWhiteSpace[startingWhiteSpace.length-1] === ' ') - startingWhiteSpace = startingWhiteSpace.substr(0, startingWhiteSpace.length -1); - addInfo(startingWhiteSpace, 'above'); - } - } - } - - var element = documentElement.DocumentTextElement.create({text: text.transformed}); - el.replaceWith(element.dom()); - }); - - this.d = this.wrapper.children(0); - - this.setupEventHandling(); - - } else { - this.d = null; - } + generateCanvasDOM: function(wlxmlNode) { + var element = documentElement.DocumentNodeElement.create(wlxmlNode, this); + return element.dom(); }, setupEventHandling: function() { @@ -192,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)) { @@ -202,13 +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').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) { @@ -247,101 +159,13 @@ $.extend(Canvas.prototype, { return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; }, - createNodeElement: function(params) { - 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; + toggleElementHighlight: function(node, toggle) { + var element = utils.findCanvasElement(node); + element.toggleHighlight(toggle); }, - 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]}; + createNodeElement: function(params) { + return documentElement.DocumentNodeElement.create(params, this); }, getDocumentElement: function(from) { @@ -367,6 +191,10 @@ $.extend(Canvas.prototype, { setCurrentElement: function(element, params) { + if(!(element instanceof documentElement.DocumentElement)) { + element = utils.findCanvasElement(element); + } + params = _.extend({caretTo: 'end'}, params); var findFirstDirectTextChild = function(e, nodeToLand) { var byBrowser = this.getCursor().getPosition().element; @@ -405,7 +233,7 @@ $.extend(Canvas.prototype, { if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element? if(!(textElementToLand.sameNode(currentTextElement))) - this.publisher('currentTextElementSet', textElementToLand); + this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode')); } else { document.getSelection().removeAllRanges(); } @@ -413,7 +241,7 @@ $.extend(Canvas.prototype, { if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) { _markAsCurrent(nodeElementToLand); - this.publisher('currentNodeElementSet', nodeElementToLand); + this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode')); } }, @@ -442,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(); } }); @@ -686,11 +507,8 @@ $.extend(Cursor.prototype, { }) return { - fromXML: function(xml, publisher) { - return new Canvas(xml, publisher); - }, - fromXML2: function(wlxmlNode, publisher) { - return new Canvas(wlxmlNode, publisher, 2); + fromXMLDocument: function(wlxmlDocument, publisher) { + return new Canvas(wlxmlDocument, publisher); } };