editor: first take on plugins, core plugin with breakContent transformation

[fnpeditor.git] / 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 482afb9..01cb14e 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.js
@@ -4,44 +4,81 @@ define([
 'libs/backbone',
 'modules/documentCanvas/canvas/documentElement',
 'modules/documentCanvas/canvas/keyboard',
 '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';
 
     
 'use strict';
 

-var Canvas = function(wlxml, publisher) {
+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.eventBus = _.extend({}, Backbone.Events);

-    this.loadWlxmlDocument(wlxml);
+    this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
+    this.wlxmlListener = wlxmlListener.create(this);
+    this.loadWlxmlDocument(wlxmlDocument);

     this.publisher = publisher ? publisher : function() {};
     this.publisher = publisher ? publisher : function() {};

+    this.textHandler = new TextHandler(this);

 };
 
 $.extend(Canvas.prototype, {
 
     loadWlxmlDocument: function(wlxmlDocument) {
 };
 
 $.extend(Canvas.prototype, {
 
     loadWlxmlDocument: function(wlxmlDocument) {

-        var canvasDOM = this.generateCanvasDOM(wlxmlDocument.root);
+        if(!wlxmlDocument) {
+            return false;
+        }

 
 

-        this.wrapper = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
+        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.wrapper.append(canvasDOM);
         this.d = this.wrapper.children(0);

-        this.setupEventHandling();

     },
 
     generateCanvasDOM: function(wlxmlNode) {
     },
 
     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.create(wlxmlNode, this);
         var element = documentElement.DocumentNodeElement.create(wlxmlNode, this);

-
-
-        ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) {
-            element.data(attr, '');
-        });

         return element.dom();
     },
 
         return element.dom();
     },
 


@@ -56,6 +93,8 @@ $.extend(Canvas.prototype, {
             canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false});
         });
 
             canvas.setCurrentElement(canvas.getDocumentElement(e.currentTarget), {caretTo: false});
         });
 

+
+

         var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
                 if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) {
         var observer = new MutationObserver(function(mutations) {
             mutations.forEach(function(mutation) {
                 if(documentElement.DocumentTextElement.isContentContainer(mutation.target)) {


@@ -66,13 +105,22 @@ $.extend(Canvas.prototype, {
                         mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, '');
                         canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end');
                     }
                         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');
                     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};
                 }
             });
         });
         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) {
 
 
         this.wrapper.on('mouseover', '[document-node-element], [document-text-element]', function(e) {


@@ -111,101 +159,13 @@ $.extend(Canvas.prototype, {
         return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')};
     },
 
         return documentElement.DocumentNodeElement.fromHTMLElement(this.d.get(0), this); //{wlxmlTag: this.d.prop('tagName')};
     },
 

-    createNodeElement: function(params) {
-        return documentElement.DocumentNodeElement.create(params, this);
+    toggleElementHighlight: function(node, toggle) {
+        var element = utils.findCanvasElement(node);
+        element.toggleHighlight(toggle);

     },
 
     },
 

-    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]};
+    createNodeElement: function(params) {
+        return documentElement.DocumentNodeElement.create(params, this);

     },
 
     getDocumentElement: function(from) {
     },
 
     getDocumentElement: function(from) {


@@ -231,6 +191,10 @@ $.extend(Canvas.prototype, {
 
 
     setCurrentElement: function(element, params) {
 
 
     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;
         params = _.extend({caretTo: 'end'}, params);
         var findFirstDirectTextChild = function(e, nodeToLand) {
             var byBrowser = this.getCursor().getPosition().element;


@@ -269,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)))
             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();
         }
         } else {
             document.getSelection().removeAllRanges();
         }


@@ -277,7 +241,7 @@ $.extend(Canvas.prototype, {
         if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) {
             _markAsCurrent(nodeElementToLand);
 
         if(!(currentNodeElement && currentNodeElement.sameNode(nodeElementToLand))) {
             _markAsCurrent(nodeElementToLand);
 

-            this.publisher('currentNodeElementSet', nodeElementToLand);
+            this.publisher('currentNodeElementSet', nodeElementToLand.data('wlxmlNode'));

         }
     },
 
         }
     },
 


@@ -306,13 +270,6 @@ $.extend(Canvas.prototype, {
     setCursorPosition: function(position) {
         if(position.element)
             this._moveCaretToTextElement(position.element, position.offset);
     setCursorPosition: function(position) {
         if(position.element)
             this._moveCaretToTextElement(position.element, position.offset);

-    },
-
-    toXML: function() {
-        var parent = $('<div>'),
-            parts = this.doc().toXML(0);
-        parent.append(parts);
-        return parent.html();

     }
 });
 
     }
 });
 


@@ -550,8 +507,8 @@ $.extend(Cursor.prototype, {
 })
 
 return {
 })
 
 return {

-    fromXML: function(wlxmlNode, publisher) {
-        return new Canvas(wlxmlNode, publisher);
+    fromXMLDocument: function(wlxmlDocument, publisher) {
+        return new Canvas(wlxmlDocument, publisher);

     }
 };
 
     }
 };