editor: Handling backspace/delete on the text boundries

[fnpeditor.git] / src / editor / modules / nodeFamilyTree / nodeFamilyTree.js

diff --git a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
index 610901a..e2a4eb8 100644 (file)
--- a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
+++ b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
@@ -10,7 +10,20 @@ define([
 return function(sandbox) {
     
     var template = _.template(templateSrc),
 return function(sandbox) {
     
     var template = _.template(templateSrc),

-        listens = false;
+        listens = false,
+        items = [];
+
+    var getItemId = function(item) {
+        var idx = -1;
+        var found = _.find(items, function(i) {
+            idx += 1;
+            return item.sameNode(i);
+        });
+        if(found) {
+            return idx;
+        }
+        return -1;
+    };

     
     var startListening = function(document) {
         listens = true;
     
     var startListening = function(document) {
         listens = true;


@@ -19,12 +32,11 @@ return function(sandbox) {
                 view.setElement();
             }
         }, this);
                 view.setElement();
             }
         }, this);

-    }
+    };

 
     var view = {
         dom: $('<div>' + template({contents: null, parent: null}) + '</div>'),
         setup: function() {
 
     var view = {
         dom: $('<div>' + template({contents: null, parent: null}) + '</div>'),
         setup: function() {

-            var view = this;

             this.dom.on('click', 'a', function(e) {
                 var target = $(e.target);
                 sandbox.publish('nodeClicked', target.data('element'));
             this.dom.on('click', 'a', function(e) {
                 var target = $(e.target);
                 sandbox.publish('nodeClicked', target.data('element'));


@@ -41,18 +53,21 @@ return function(sandbox) {
         },
         setElement: function(element) {
             element = element || this.currentNodeElement;
         },
         setElement: function(element) {
             element = element || this.currentNodeElement;

-            console.log('familyTree sets node');

             var textElement = element.getText ? element : null,
                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection
                 nodeElementParent = nodeElement.parent(),
                 parent;
             
             this.currentNodeElement = nodeElement;
             var textElement = element.getText ? element : null,
                 nodeElement = element.getText ? element.parent() : element, // TODO: better type detection
                 nodeElementParent = nodeElement.parent(),
                 parent;
             
             this.currentNodeElement = nodeElement;

+            items = [];

 
             if(nodeElementParent) {
 
             if(nodeElementParent) {

+                items.push(nodeElementParent);

                 parent = {
                 parent = {

-                    repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')
+                    id: items.length - 1,
+                    repr: wlxmlUtils.getTagLabel(nodeElementParent.getTagName()) + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.getClassLabel(nodeElementParent.getClass()) : '')

                 };
                 };

+                

             }
         
             var nodeContents = nodeElement.contents(),
             }
         
             var nodeContents = nodeElement.contents(),


@@ -60,34 +75,44 @@ return function(sandbox) {
             nodeContents.forEach(function(child) {
                 if(child.getText) {
                     var text = child.getText();
             nodeContents.forEach(function(child) {
                 if(child.getText) {
                     var text = child.getText();

-                    if(!text)
+                    if(!text) {

                         text = '<pusty tekst>';
                         text = '<pusty tekst>';

+                    }

                     else {
                         if(text.length > 13) {
                             text = text.substr(0,13) + '...';
                         }
                         text = '"' + text + '"';
                     }
                     else {
                         if(text.length > 13) {
                             text = text.substr(0,13) + '...';
                         }
                         text = '"' + text + '"';
                     }

-                    contents.push({repr: _.escape(text), bold: child.sameNode(textElement)});
+                    contents.push({
+                        id: items.length,
+                        repr: _.escape(text), bold: child.sameNode(textElement)
+                    });

                 } else {
                 } else {

-                    contents.push({repr: wlxmlUtils.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')});
+                    contents.push({
+                        id: items.length,
+                        repr: wlxmlUtils.getTagLabel(child.getTagName()) + (child.getClass() ? ' / ' + wlxmlUtils.getClassLabel(child.getClass()) : '')
+                    });

                 }
                 }

+                items.push(child);

             });
             this.dom.empty();
             this.dom.append($(template({parent: parent, contents: contents})));
 
             if(parent) {
             });
             this.dom.empty();
             this.dom.append($(template({parent: parent, contents: contents})));
 
             if(parent) {

-                this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent)
+                this.dom.find('.rng-module-nodeFamilyTree-parent').data('element', nodeElementParent);

             }
             this.dom.find('li a').each(function(idx, a) {
                 $(a).data('element', nodeContents[idx]);
             });
         },
         highlightNode: function(canvasNode) {
             }
             this.dom.find('li a').each(function(idx, a) {
                 $(a).data('element', nodeContents[idx]);
             });
         },
         highlightNode: function(canvasNode) {

-            this.dom.find('a[data-id="'+canvasNode.getId()+'"]').addClass('rng-common-hoveredNode');
+            var id = getItemId(canvasNode);
+            this.dom.find('a[rng-module-nodeFamilyTree-item-id="'+id+'"]').addClass('rng-common-hoveredNode');

         },
         dimNode: function(canvasNode) {
         },
         dimNode: function(canvasNode) {

-            this.dom.find('a[data-id="'+canvasNode.getId()+'"]').removeClass('rng-common-hoveredNode');
+            var id = getItemId(canvasNode);
+            this.dom.find('a[rng-module-nodeFamilyTree-item-id="'+id+'"]').removeClass('rng-common-hoveredNode');

         }
     };
     
         }
     };
     


@@ -101,16 +126,17 @@ return function(sandbox) {
             if(!listens) {
                 startListening(element.document);
             }
             if(!listens) {
                 startListening(element.document);
             }

-            if(!(element.sameNode(view.currentNodeElement)))
+            if(!(element.sameNode(view.currentNodeElement))) {

                 view.setElement(element);
                 view.setElement(element);

+            }

         },
         getView: function() {
             return view.dom;
         },
         },
         getView: function() {
             return view.dom;
         },

-        highlightNode: function(canvasNode) {
+        highlightElement: function(canvasNode) {

             view.highlightNode(canvasNode);
         },
             view.highlightNode(canvasNode);
         },

-        dimNode: function(canvasNode) {
+        dimElement: function(canvasNode) {

             view.dimNode(canvasNode);
         }
     };
             view.dimNode(canvasNode);
         }
     };