X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/55da6d6c73cdb1627cf71e7419eb3cc2f5e53c08..097ad6254d6b36c226072b0c7bdcaa5f945dc483:/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 a4785ad..6a60f80 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -9,6 +9,43 @@ define([ ], function($, _, Backbone, documentElement, keyboard, utils, wlxmlListener) { 'use strict'; +/* global document:false, window:false */ + + +var TextHandler = function(canvas) {this.canvas = canvas; this.buffer = null;}; +$.extend(TextHandler.prototype, { + handle: function(node, 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); @@ -16,6 +53,7 @@ var Canvas = function(wlxmlDocument, publisher) { this.wlxmlListener = wlxmlListener.create(this); this.loadWlxmlDocument(wlxmlDocument); this.publisher = publisher ? publisher : function() {}; + this.textHandler = new TextHandler(this); }; $.extend(Canvas.prototype, { @@ -25,14 +63,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); }, generateCanvasDOM: function(wlxmlNode) { @@ -51,44 +94,57 @@ $.extend(Canvas.prototype, { canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false}); }); + + /* globals MutationObserver */ var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) { observer.disconnect(); - if(mutation.target.data === '') + if(mutation.target.data === '') { mutation.target.data = utils.unicode.ZWS; + } else if(mutation.oldValue === utils.unicode.ZWS) { 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) { var el = canvas.getDocumentElement(e.currentTarget); - if(!el) + if(!el) { return; + } e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) + if(el instanceof documentElement.DocumentTextElement) { el = el.parent(); + } el.toggleLabel(true); }); this.wrapper.on('mouseout', '[document-node-element], [document-text-element]', function(e) { var el = canvas.getDocumentElement(e.currentTarget); - if(!el) + if(!el) { return; + } e.stopPropagation(); - if(el instanceof documentElement.DocumentTextElement) + if(el instanceof documentElement.DocumentTextElement) { el = el.parent(); + } el.toggleLabel(false); }); @@ -104,109 +160,23 @@ $.extend(Canvas.prototype, { }, doc: function() { - if(this.d === null) + if(this.d === null) { return null; - 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; + return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')}; }, - 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) { + /* globals HTMLElement, Text */ if(from instanceof HTMLElement || from instanceof Text) { return documentElement.DocumentElement.fromHTMLElement(from, this); } @@ -215,8 +185,6 @@ $.extend(Canvas.prototype, { return new Cursor(this); }, - list: {}, - getCurrentNodeElement: function() { return this.getDocumentElement(this.wrapper.find('.current-node-element').parent()[0]); @@ -229,15 +197,21 @@ $.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; - if(byBrowser && byBrowser.parent().sameNode(nodeToLand)) + if(byBrowser && byBrowser.parent().sameNode(nodeToLand)) { return byBrowser; + } var children = e.children(); for(var i = 0; i < children.length; i++) { - if(children[i] instanceof documentElement.DocumentTextElement) + if(children[i] instanceof documentElement.DocumentTextElement) { return children[i]; + } } return null; }.bind(this); @@ -246,7 +220,7 @@ $.extend(Canvas.prototype, { this.wrapper.find('.current-text-element').removeClass('current-text-element'); element.dom().addClass('current-text-element'); } else { - this.wrapper.find('.current-node-element').removeClass('current-node-element') + this.wrapper.find('.current-node-element').removeClass('current-node-element'); element._container().addClass('current-node-element'); this.publisher('currentElementChanged', element); } @@ -259,15 +233,18 @@ $.extend(Canvas.prototype, { currentTextElement = this.getCurrentTextElement(), currentNodeElement = this.getCurrentNodeElement(); - if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) + if(currentTextElement && !(currentTextElement.sameNode(textElementToLand))) { this.wrapper.find('.current-text-element').removeClass('current-text-element'); + } if(textElementToLand) { _markAsCurrent(textElementToLand); - if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) + if(params.caretTo || !textElementToLand.sameNode(this.getCursor().getPosition().element)) { this._moveCaretToTextElement(textElementToLand, params.caretTo); // as method on element? - if(!(textElementToLand.sameNode(currentTextElement))) + } + if(!(textElementToLand.sameNode(currentTextElement))) { this.publisher('currentTextElementSet', textElementToLand.data('wlxmlNode')); + } } else { document.getSelection().removeAllRanges(); } @@ -290,8 +267,9 @@ $.extend(Canvas.prototype, { } var collapseArg = true; - if(where === 'end') + if(where === 'end') { collapseArg = false; + } range.collapse(collapseArg); var selection = document.getSelection(); @@ -302,146 +280,9 @@ $.extend(Canvas.prototype, { }, setCursorPosition: function(position) { - if(position.element) + if(position.element) { this._moveCaretToTextElement(position.element, position.offset); - }, - - toXML: function() { - var parent = $('
'), - parts = this.doc().toXML(0); - parent.append(parts); - return parent.html(); - } -}); - -$.extend(Canvas.prototype.list, { - create: function(params) { - if(!(params.element1.parent().sameNode(params.element2.parent()))) - return false; - - var parent = params.element1.parent(), - canvas = params.element1.canvas; - - if(parent.childIndex(params.element1) > parent.childIndex(params.element2)) { - var tmp = params.element1; - params.element1 = params.element2; - params.element2 = tmp; - } - - var elementsToWrap = []; - - var place = 'before'; - parent.children().some(function(element) { - var _e = element; - if(element.sameNode(params.element1)) - place = 'inside'; - if(place === 'inside') { - if(element instanceof documentElement.DocumentTextElement) { - element = element.wrapWithNodeElement({tag: 'div', klass: 'list.item'}); - if(element.children()[0].sameNode(params.element1)) - params.element1 = element; - } - element.setWlxmlClass('item'); - elementsToWrap.push(element); - } - if(_e.sameNode(params.element2)) - return true; - }); - - var listElement = canvas.createNodeElement({tag: 'div', klass: 'list-items' + (params.type === 'enum' ? '-enum' : '')}); - var toret; - if(parent.is('list')) { - var item = listElement.wrapWithNodeElement({tag: 'div', klass: 'item'}); - item.exec('toggleBullet', false); - toret = listElement.parent(); - } else { - toret = listElement; - } - - params.element1.before(toret); - - elementsToWrap.forEach(function(element) { - element.detach(); - listElement.append(element); - }); - }, - extractItems: function(params) { - params = _.extend({merge: true}, params); - var list = params.element1.parent(); - if(!list.is('list') || !(list.sameNode(params.element2.parent()))) - return false; - - var idx1 = list.childIndex(params.element1), - idx2 = list.childIndex(params.element2), - precedingItems = [], - extractedItems = [], - succeedingItems = [], - items = list.children(), - listIsNested = list.parent().getWlxmlClass() === 'item', - canvas = params.element1.canvas, - i; - - if(idx1 > idx2) { - var tmp = idx1; idx1 = idx2; idx2 = tmp; - } - - items.forEach(function(item, idx) { - if(idx < idx1) - precedingItems.push(item); - else if(idx >= idx1 && idx <= idx2) { - extractedItems.push(item); - } - else { - succeedingItems.push(item); - } - }); - - var reference = listIsNested ? list.parent() : list; - if(succeedingItems.length === 0) { - var reference_orig = reference; - extractedItems.forEach(function(item) { - reference.after(item); - reference = item; - if(!listIsNested) - item.setWlxmlClass(null); - }); - if(precedingItems.length === 0) - reference_orig.detach(); - } else if(precedingItems.length === 0) { - extractedItems.forEach(function(item) { - reference.before(item); - if(!listIsNested) - item.setWlxmlClass(null); - }); - } else { - extractedItems.forEach(function(item) { - reference.after(item); - if(!listIsNested) - item.setWlxmlClass(null); - reference = item; - }); - var secondList = canvas.createNodeElement({tag: 'div', klass:'list-items'}), - toAdd = secondList; - - if(listIsNested) { - toAdd = secondList.wrapWithNodeElement({tag: 'div', klass:'item'}); - } - succeedingItems.forEach(function(item) { - secondList.append(item); - }); - - reference.after(toAdd); - } - if(!params.merge && listIsNested) { - return this.extractItems({element1: extractedItems[0], element2: extractedItems[extractedItems.length-1]}); } - return true; - }, - areItemsOfTheSameList: function(params) { - var e1 = params.element1, - e2 = params.element2; - return e1.parent().sameNode(e2.parent()) - && e1.parent().is('list'); } }); @@ -477,12 +318,14 @@ $.extend(Cursor.prototype, { return this.getSelectionBoundry('focus'); }, getSelectionBoundry: function(which) { + /* globals window */ var selection = window.getSelection(), anchorElement = this.canvas.getDocumentElement(selection.anchorNode), focusElement = this.canvas.getDocumentElement(selection.focusNode); - if((!anchorElement) || (anchorElement instanceof documentElement.DocumentNodeElement) || (!focusElement) || focusElement instanceof documentElement.DocumentNodeElement) + if((!anchorElement) || (anchorElement instanceof documentElement.DocumentNodeElement) || (!focusElement) || focusElement instanceof documentElement.DocumentNodeElement) { return {}; + } if(which === 'anchor') { return { @@ -510,30 +353,30 @@ $.extend(Cursor.prototype, { if(anchorFirst) { if(which === 'start') { element = anchorElement; - offset = selection.anchorOffset + offset = selection.anchorOffset; } else if(which === 'end') { - element = focusElement, - offset = selection.focusOffset + element = focusElement; + offset = selection.focusOffset; } } else { if(which === 'start') { - element = focusElement, - offset = selection.focusOffset + element = focusElement; + offset = selection.focusOffset; } else if(which === 'end') { element = anchorElement; - offset = selection.anchorOffset + offset = selection.anchorOffset; } } } else { // TODO: Handle order via https://developer.mozilla.org/en-US/docs/Web/API/Node.compareDocumentPosition if(which === 'start') { element = anchorElement; - offset = selection.anchorOffset + offset = selection.anchorOffset; } else { element = focusElement; - offset = selection.focusOffset + offset = selection.focusOffset; } } @@ -543,9 +386,9 @@ $.extend(Cursor.prototype, { offset: offset, offsetAtBeginning: offset === 0, offsetAtEnd: nodeLen === offset - } + }; } -}) +}); return { fromXMLDocument: function(wlxmlDocument, publisher) {