editor: canvas - support NullElements - elements that are not inserted into canvas

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js
index 34581be..f7edfa5 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.js
@@ -9,7 +9,8 @@ define([
 'modules/documentCanvas/canvas/wlxmlListener',
 'modules/documentCanvas/canvas/elementsRegister',
 'modules/documentCanvas/canvas/genericElement',
 'modules/documentCanvas/canvas/wlxmlListener',
 'modules/documentCanvas/canvas/elementsRegister',
 'modules/documentCanvas/canvas/genericElement',

-], function($, _, Backbone, logging, documentElement, keyboard, utils, wlxmlListener, ElementsRegister, genericElement) {
+'modules/documentCanvas/canvas/nullElement',
+], function($, _, Backbone, logging, documentElement, keyboard, utils, wlxmlListener, ElementsRegister, genericElement, nullElement) {

     
 'use strict';
 /* global document:false, window:false, Node:false, gettext */
     
 'use strict';
 /* global document:false, window:false, Node:false, gettext */


@@ -58,7 +59,7 @@ $.extend(TextHandler.prototype, {
 
 
 var Canvas = function(wlxmlDocument, elements) {
 
 
 var Canvas = function(wlxmlDocument, elements) {

-    this.elementsRegister = new ElementsRegister(documentElement.DocumentNodeElement);
+    this.elementsRegister = new ElementsRegister(documentElement.DocumentNodeElement, nullElement);

 
     elements = [
         {tag: 'section', klass: null, prototype: genericElement},
 
     elements = [
         {tag: 'section', klass: null, prototype: genericElement},


@@ -278,7 +279,7 @@ $.extend(Canvas.prototype, Backbone.Events, {
     },
 
     contains: function(element) {
     },
 
     contains: function(element) {

-        return element.dom.parents().index(this.wrapper) !== -1;
+        return element && element.dom && element.dom.parents().index(this.wrapper) !== -1;

     },
 
     triggerSelectionChanged: function() {
     },
 
     triggerSelectionChanged: function() {

diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js
index 956d0a7..570973e 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/documentElement.js
+++ b/src/editor/modules/documentCanvas/canvas/documentElement.js
@@ -90,8 +90,10 @@ var manipulate = function(e, params, action) {
     } else {
         element = e.canvas.createElement(params);
     }
     } else {
         element = e.canvas.createElement(params);
     }

-    e.dom[action](element.dom);
-    e.refreshPath();
+    if(element.dom) {
+        e.dom[action](element.dom);
+        e.refreshPath();
+    }

     return element;
 };
 
     return element;
 };
 


@@ -225,10 +227,12 @@ $.extend(DocumentTextElement.prototype, {
         } else {
             element = this.canvas.createElement(params);
         }
         } else {
             element = this.canvas.createElement(params);
         }

-        this.dom.wrap('<div>');
-        this.dom.parent().after(element.dom);
-        this.dom.unwrap();
-        this.refreshPath();
+        if(element.dom) {
+            this.dom.wrap('<div>');
+            this.dom.parent().after(element.dom);
+            this.dom.unwrap();
+            this.refreshPath();
+        }

         return element;
     },
     before: function(params) {
         return element;
     },
     before: function(params) {


@@ -241,10 +245,12 @@ $.extend(DocumentTextElement.prototype, {
         } else {
             element = this.canvas.createElement(params);
         }
         } else {
             element = this.canvas.createElement(params);
         }

-        this.dom.wrap('<div>');
-        this.dom.parent().before(element.dom);
-        this.dom.unwrap();
-        this.refreshPath();
+        if(element.dom) {
+            this.dom.wrap('<div>');
+            this.dom.parent().before(element.dom);
+            this.dom.unwrap();
+            this.refreshPath();
+        }

         return element;
     },
 
         return element;
     },
 

diff --git a/src/editor/modules/documentCanvas/canvas/elementsRegister.js b/src/editor/modules/documentCanvas/canvas/elementsRegister.js
index 24a700a..9a44514 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/elementsRegister.js
+++ b/src/editor/modules/documentCanvas/canvas/elementsRegister.js
@@ -5,9 +5,10 @@ var _ = require('libs/underscore'),
     wlxml = require('wlxml/wlxml');
 
 
     wlxml = require('wlxml/wlxml');
 
 

-var ElementsRegister = function(BaseType) {
+var ElementsRegister = function(BaseType, NullType) {

     this._register = {};
     this.BaseType = BaseType;
     this._register = {};
     this.BaseType = BaseType;

+    this.NullType = NullType;

 };
 
 _.extend(ElementsRegister.prototype, {
 };
 
 _.extend(ElementsRegister.prototype, {


@@ -21,7 +22,7 @@ _.extend(ElementsRegister.prototype, {
     },
     register: function(params) {
         params.klass = params.klass || '';
     },
     register: function(params) {
         params.klass = params.klass || '';

-        params.prototype = params.prototype || Object.create({});
+        params.prototype = params.prototype || this.NullType;

 
         this._register[params.tag] = this._register[params.tag] || {};
         this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype);
 
         this._register[params.tag] = this._register[params.tag] || {};
         this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype);

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index bbb4b07..8d0ba87 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/genericElement.js
+++ b/src/editor/modules/documentCanvas/canvas/genericElement.js
@@ -26,7 +26,10 @@ $.extend(generic, {
             .attr('wlxml-tag', this.wlxmlNode.getTagName());
         this.setWlxmlClass(this.wlxmlNode.getClass());
         this.wlxmlNode.contents().forEach(function(node) {
             .attr('wlxml-tag', this.wlxmlNode.getTagName());
         this.setWlxmlClass(this.wlxmlNode.getClass());
         this.wlxmlNode.contents().forEach(function(node) {

-            this._container().append(this.canvas.createElement(node).dom);
+            var el = this.canvas.createElement(node);
+            if(el.dom) {
+                this._container().append(el.dom);
+            }

         }.bind(this));
         this.refresh();
     },
         }.bind(this));
         this.refresh();
     },


@@ -93,23 +96,23 @@ $.extend(generic, {
             return;
         }
 
             return;
         }
 

-        var nodeIndex = event.meta.node.getIndex(),
+        var ptr = event.meta.node.prev(),

             referenceElement, referenceAction, actionArg;
             referenceElement, referenceAction, actionArg;

+            
+        while(ptr && !(referenceElement = utils.getElementForElementRootNode(ptr))) {
+            ptr = ptr.prev();
+        }

 
 

-        if(nodeIndex === 0) {
+        if(referenceElement) {
+            referenceAction = 'after';
+        } else {

             referenceElement = this;
             referenceAction = 'prepend';
             referenceElement = this;
             referenceAction = 'prepend';

-        } else {
-            referenceElement = this.children()[nodeIndex-1];
-            referenceAction = 'after';

         }
       
         if(event.meta.move) {
             /* Let's check if this node had its own canvas element and it's accessible. */
             actionArg = utils.getElementForElementRootNode(event.meta.node);
         }
       
         if(event.meta.move) {
             /* Let's check if this node had its own canvas element and it's accessible. */
             actionArg = utils.getElementForElementRootNode(event.meta.node);

-            if(actionArg && actionArg.sameNode(referenceElement)) {
-                referenceElement = this.children()[nodeIndex];
-            }

         }
         if(!actionArg) {
             actionArg = event.meta.node;
         }
         if(!actionArg) {
             actionArg = event.meta.node;


@@ -180,8 +183,10 @@ $.extend(generic, {
         } else {
             element = this.canvas.createElement(param);
         }
         } else {
             element = this.canvas.createElement(param);
         }

-        this._container().prepend(element.dom);
-        this.refreshPath();
+        if(element.dom) {
+            this._container().prepend(element.dom);
+            this.refreshPath();
+        }

         return element;
     },
 
         return element;
     },
 

diff --git a/src/editor/modules/documentCanvas/canvas/nullElement.js b/src/editor/modules/documentCanvas/canvas/nullElement.js
new file mode 100644 (file)
index 0000000..b57a62a
--- /dev/null
+++ b/src/editor/modules/documentCanvas/canvas/nullElement.js
@@ -0,0 +1,16 @@
+define(function(require) {
+    
+'use strict';
+var documentElement = require('./documentElement');
+
+
+var NullElement = Object.create(documentElement.DocumentNodeElement.prototype);
+
+NullElement.init = function() {
+    this.dom = null;
+    this.wlxmlNode.setData('canvasElement', undefined);
+};
+
+return NullElement;
+
+});
\ No newline at end of file