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 9a01457..01cb14e 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.js
@@ -10,12 +10,49 @@ define([
     
 'use strict';
 
     
 '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 = $('<div>').addClass('canvas-wrapper').attr('contenteditable', true);
     this.wlxmlListener = wlxmlListener.create(this);
     this.loadWlxmlDocument(wlxmlDocument);
     this.publisher = publisher ? publisher : function() {};
 var Canvas = function(wlxmlDocument, publisher) {
     this.eventBus = _.extend({}, Backbone.Events);
     this.wrapper = $('<div>').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, {
 };
 
 $.extend(Canvas.prototype, {


@@ -25,15 +62,19 @@ $.extend(Canvas.prototype, {
             return false;
         }
 
             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.wrapper.empty();
         this.wrapper.append(canvasDOM);
         this.d = this.wrapper.children(0);

-        this.setupEventHandling();
-
-        this.wlxmlListener.listenTo(wlxmlDocument);
-        this.wlxmlDocument = wlxmlDocument;

     },
 
     generateCanvasDOM: function(wlxmlNode) {
     },
 
     generateCanvasDOM: function(wlxmlNode) {


@@ -52,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)) {


@@ -62,18 +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');
 
                     var textElement = canvas.getDocumentElement(mutation.target),
                         toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : '';
 
                     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};
                 }
             });
         });
         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) {