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

[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / genericElement.js

diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js
index 4bdc524..8d0ba87 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/genericElement.js
+++ b/src/editor/modules/documentCanvas/canvas/genericElement.js
@@ -3,6 +3,7 @@ define(function(require) {
 'use strict';
 
 var $ = require('libs/jquery'),
+    _ = require('libs/underscore'),
     documentElement = require('./documentElement'),
     utils = require('./utils'),
     wlxmlUtils = require('utils/wlxml');
@@ -25,7 +26,10 @@ $.extend(generic, {
             .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();
     },
@@ -92,28 +96,30 @@ $.extend(generic, {
             return;
         }
 
-        var nodeIndex = event.meta.node.getIndex(),
+        var ptr = event.meta.node.prev(),
             referenceElement, referenceAction, actionArg;
+            
+        while(ptr && !(referenceElement = utils.getElementForElementRootNode(ptr))) {
+            ptr = ptr.prev();
+        }
 
-        if(nodeIndex === 0) {
+        if(referenceElement) {
+            referenceAction = 'after';
+        } else {
             referenceElement = this;
             referenceAction = 'prepend';
-        } else {
-            referenceElement = this.children()[nodeIndex-1];
-            referenceAction = 'after';
         }
       
-        if(event.type === 'nodeMoved') {
-            actionArg = utils.getElementForNode(event.meta.node, event.meta.parent);
-        } else {
+        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 = event.meta.node;
         }
 
         referenceElement[referenceAction](actionArg);
     },
-    onNodeMoved: function(event) {
-        return this.onNodeAdded.call(this, event);
-    },
     onNodeDetached: function(event) {
         if(event.meta.node.sameNode(this)) {
             this.detach();
@@ -141,8 +147,20 @@ $.extend(generic, {
         });
     },
 
+    onStateChange: function(changes) {
+        if(_.isBoolean(changes.exposed) && !this.isSpan()) {
+            this._container().toggleClass('highlighted-element', changes.exposed);
+        }
+        if(_.isBoolean(changes.active) && !this.isSpan()) {
+            this._container().toggleClass('current-node-element', changes.active);
+        }
+    },
 
     ///
+
+    isSpan: function() {
+        return this.wlxmlNode.getTagName() === 'span';
+    },
     
     containsBlock: function() {
         return this.children()
@@ -165,8 +183,10 @@ $.extend(generic, {
         } 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;
     },