integration wip: highlight/dim/select node via breadcrumbs

+ syncing with family tree

diff --git a/src/editor/modules/nodeBreadCrumbs/template.html b/src/editor/modules/nodeBreadCrumbs/template.html
index afe44de..781ef5c 100644 (file)
--- a/src/editor/modules/nodeBreadCrumbs/template.html
+++ b/src/editor/modules/nodeBreadCrumbs/template.html
@@ -2,9 +2,9 @@
     <ul class="breadcrumb">
     <% if(node && parents) { %>
         <% for(var i = parents.length - 1; i >= 0; i--) { %>
     <ul class="breadcrumb">
     <% if(node && parents) { %>
         <% for(var i = parents.length - 1; i >= 0; i--) { %>

-            <li><a href="#"> <%= tagNames[parents[i].getWlxmlTag()] %><% if(parents[i].getWlxmlClass()) { %>.<%= classNames[parents[i].getWlxmlClass()] %> <% } %></a><span class="divider">/</span></li>
+            <li><a href="#"> <%= tagNames[parents[i].getTagName()] %><% if(parents[i].getClass()) { %>.<%= classNames[parents[i].getClass()] %> <% } %></a><span class="divider">/</span></li>

         <% } %>
         <% } %>

-            <li class="active"><%= tagNames[node.getWlxmlTag()] %><% if(node.getWlxmlClass()) { %>.<%= classNames[node.getWlxmlClass()] %> <% } %></span></li>
+            <li class="active"><%= tagNames[node.getTagName()] %><% if(node.getClass()) { %>.<%= classNames[node.getClass()] %> <% } %></span></li>

     <% } %>
     </ul>
 </div>
\ No newline at end of file
     <% } %>
     </ul>
 </div>
\ No newline at end of file

diff --git a/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js b/src/editor/modules/nodeFamilyTree/nodeFamilyTree.js
index 610901a..cb7b57a 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;


@@ -48,11 +61,15 @@ return function(sandbox) {
                 parent;
             
             this.currentNodeElement = nodeElement;
                 parent;
             
             this.currentNodeElement = nodeElement;

+            items = [];

 
             if(nodeElementParent) {
 
             if(nodeElementParent) {

+                items.push(nodeElementParent);

                 parent = {
                 parent = {

+                    id: items.length - 1,

                     repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')
                 };
                     repr: wlxmlUtils.wlxmlTagNames[nodeElementParent.getTagName()] + (nodeElementParent.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[nodeElementParent.getClass()] : '')
                 };

+                

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


@@ -68,10 +85,17 @@ return function(sandbox) {
                         }
                         text = '"' + text + '"';
                     }
                         }
                         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.wlxmlTagNames[child.getTagName()] + (child.getClass() ? ' / ' + wlxmlUtils.wlxmlClassNames[child.getClass()] : '')
+                    });

                 }
                 }

+                items.push(child);

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


@@ -84,10 +108,12 @@ return function(sandbox) {
             });
         },
         highlightNode: function(canvasNode) {
             });
         },
         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');

         }
     };
     
         }
     };
     


@@ -107,10 +133,10 @@ return function(sandbox) {
         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);
         }
     };

diff --git a/src/editor/modules/nodeFamilyTree/template.html b/src/editor/modules/nodeFamilyTree/template.html
index 886df06..77e5366 100644 (file)
--- a/src/editor/modules/nodeFamilyTree/template.html
+++ b/src/editor/modules/nodeFamilyTree/template.html
@@ -2,7 +2,7 @@
     <table class="table table-bordered">
         <tr>
             <td>powyżej</td>
     <table class="table table-bordered">
         <tr>
             <td>powyżej</td>

-            <td><% if(parent) { %><a href="#" class="rng-module-nodeFamilyTree-parent"><%= parent.repr %></a><% } else { %>-<% } %></td>
+            <td><% if(parent) { %><a href="#" class="rng-module-nodeFamilyTree-parent" rng-module-nodeFamilyTree-item-id="<%= parent.id %>"><%= parent.repr %></a><% } else { %>-<% } %></td>

         </tr>
         <tr>
             <td rowspan="0">poniżej</td>
         </tr>
         <tr>
             <td rowspan="0">poniżej</td>


@@ -10,7 +10,7 @@
                 <ul>
                 <% if(!contents || contents.length === 0) { %>-<% } else { %>
                     <% contents.forEach(function(element) { %>
                 <ul>
                 <% if(!contents || contents.length === 0) { %>-<% } else { %>
                     <% contents.forEach(function(element) { %>

-                        <li><% if(element.bold) { %><strong><% } %><a href="#"><%= element.repr %></a><% if(element.bold) { %></strong><% } %></li>
+                        <li><% if(element.bold) { %><strong><% } %><a rng-module-nodeFamilyTree-item-id="<%= element.id %>" href="#"><%= element.repr %></a><% if(element.bold) { %></strong><% } %></li>

                     <% }); %>
                 <% } %>
                 </ul>
                     <% }); %>
                 <% } %>
                 </ul>

diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index 58f4dee..52aaa51 100644 (file)
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -18,14 +18,14 @@ return function(sandbox) {
     var commands = {
         highlightDocumentElement: function(element, origin) {
             ///'nodeBreadCrumbs', 'nodeFamilyTree'
     var commands = {
         highlightDocumentElement: function(element, origin) {
             ///'nodeBreadCrumbs', 'nodeFamilyTree'

-            ['documentCanvas', ].forEach(function(moduleName) {
+            ['documentCanvas', 'nodeFamilyTree'].forEach(function(moduleName) {

                 if(!origin || moduleName != origin)
                     sandbox.getModule(moduleName).highlightElement(element);
             });
         },
         dimDocumentElement: function(element, origin) {
             //'nodeBreadCrumbs', 'nodeFamilyTree'
                 if(!origin || moduleName != origin)
                     sandbox.getModule(moduleName).highlightElement(element);
             });
         },
         dimDocumentElement: function(element, origin) {
             //'nodeBreadCrumbs', 'nodeFamilyTree'

-            ['documentCanvas'].forEach(function(moduleName) {
+            ['documentCanvas', 'nodeFamilyTree'].forEach(function(moduleName) {

                 if(!origin || moduleName != origin)
                     sandbox.getModule(moduleName).dimElement(element);
             });
                 if(!origin || moduleName != origin)
                     sandbox.getModule(moduleName).dimElement(element);
             });


@@ -36,7 +36,7 @@ return function(sandbox) {
         updateCurrentNodeElement: function(nodeElement) {
             sandbox.getModule('nodePane').setNodeElement(nodeElement);
             sandbox.getModule('nodeFamilyTree').setElement(nodeElement);
         updateCurrentNodeElement: function(nodeElement) {
             sandbox.getModule('nodePane').setNodeElement(nodeElement);
             sandbox.getModule('nodeFamilyTree').setElement(nodeElement);

-            //sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);
+            sandbox.getModule('nodeBreadCrumbs').setNodeElement(nodeElement);

         },
         updateCurrentTextElement: function(textElement) {
             sandbox.getModule('nodeFamilyTree').setElement(textElement);
         },
         updateCurrentTextElement: function(textElement) {
             sandbox.getModule('nodeFamilyTree').setElement(textElement);