vpusher / paper-tree Goto Github PK

Hello, great work!
Are there any plans to port this to 2.0? I am not an expert but from looking at the code and Polymers upgrade guide there seems not to be too much to change.

Or is it usable in Polymer 2.0 as it is?
I think I can not simply get it via bower because of the 1.* dependencies which conflict with my 2.0 project.

Nicolas

Hi, I'm trying to edit the default css applied to the paper-tree nodes. Is there a way of defining options to apply custom css to individual paper-tree nodes? I have tried editing paper-tree-node.html (specifically the .node-container class) but it had no effect. Let me know if this is possible thanks.

Edit: I just applied my css styles to the node-row class in paper-tree-node.html. I'm closing the issue now.

I can't see the demo on https://www.webcomponents.org/element/vpusher/paper-tree/elements/paper-tree. It used to be there but disappeared after the last updates.

Everythings seems to work, except for highlighting the selected tree node and I can't figure out why.

This is my code: https://gist.github.com/0ef305ce3167469c01bc34260a430cec.

What am I doing wrong? Thank you!

Hi,

Do you have any examples of changing the +/- icons to an different icon?

Regards

Is there a simple way to add dynamic data via ajax? I have a lot of data with sometimes circular dependencies so it's impossible to load the full graph. How about opening a node could trigger an update?

If I understand correctly, it is currently not possible to not set an icon on the node. A workaround is to add icon 'none', however there is still a white space where the icon would normally be.

Hi,
I ran into a couple of issues when applying paper-tree, I think they are related to shadow dom vs. shady dom, but I'm not sure. That might explain why they work in you're demo but not in my application.
My application is based on the Polymer Starer Kit. I'm working on Chrome v55.

I went ahead and forked your repository and applied some fixes. In all just 4 lines of code. The Fork/branch can be found here:
https://github.com/neuralquest/paper-tree/tree/lazy-load

Issues:
I ran in to a problem related to event retargeting. The e.target in paper-tree _selectNode was pointing to the paper-tree node, as opposed to the selected paper-tree-node. I was able to fix this using var normalizedEvent = Polymer.dom(event). See:
https://www.polymer-project.org/1.0/docs/devguide/events#retargeting

I also had an issue with node-row highlighting. What I found was that the class selector under :host, needs to be placed in parentheses, like so: :host(.selected). There are examples of this in Rob Dodson's cheat sheet:
http://robdodson.me/shadow-dom-css-cheat-sheet/

We may have to add ::content to the statement as wel. I didn't bother with this since its working for me without.
https://www.polymer-project.org/1.0/docs/devguide/styling#styling-distributed-children-content

New Features:
I propose firing a toggle-children event from toggleChildren so that we can use the tree for lazy loading.
I've added a lazyload-demo in the form of a custom element. Still needs to be incorporated in the demo page.
See Tree lazy loading in action: https://neuralquest-395e9.firebaseapp.com/ (work in progress, takes a few seconds to warm up :-()

I added src$="[[data.src]]" to the iron-icon so that users can optionally provide a url/svg/base64 string. The docs say that scr takes precedence over icon, but this is not true. To work around this I also changed the parm in _computeIcon to data and added if(data.src) return '';. The app above uses base64 strings read from the database.

I also added white-space: nowrap; to .node-container to prevent wrapping of the tree node. You can see the effect in the example above by sliding the slider to the left.

I also propose adding an animated loading icon. By setting loading:true you are in effect saying "I don't know yet if there are any children". See _computeClass and class selector .node-preicon.loading:before in paper-tree-node. The app above shows this in action.

Hope this helps.
I learned a lot from studying your code.
Chris

the _selectNode is not executed ,

 _selectNode: function(e) {
            if(this.selected) {
                this.toggleClass("selected", false, this.selected);
            }
            this.selected = e.target;
            this.toggleClass("selected", true, this.selected);
        }

this how I put it in my page

<paper-tree id="tree2" selected={{selected_node}} ></paper-tree>     
<span>{{selected_node}}</span>

 <script>
    Polymer({
      is: 'my-view2'
      ,
      properties: {
      param: {
        type: Object,
      }
    },
    attached: function(e) {
      console.log('innerParam', this.param);
       var tree = this.$.tree2;
                // Only one node.
                debugger;
                tree.data = {
                    "name": "Hello",
                    
                        "children": [{
                        "name": "World"
                    }, {
                        "name": "There"
                    }, {
                        "name": "You",
                         "icon": "account-circle"
                    }]
                };
    }
    });
  </script>

How is deep linking supported? I was expecting to see a "selected" property that I could bind to my JSON but there is only "open".

Here is an example of deep linking to a tree.
http://52.90.210.88/kb/#/en-US/home/2/3/4?topic=kidH4_775_c1

When you follow the link the tree is opened to reveal the "Screen Frozen" node, and that node is selected.

option 1: load the tree and then imperativly traverse the tree looking for the right node and imperativly firing its "selected" state.

option 2: have the open and selected state in the JSON and bind it.

jsTree has a nice section in tree JSON for state info including selected, that's what I would like to see.
https://www.jstree.com/docs/json/

{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}

Can anyone help me out with a sample of how I can traverse the tree-nodes once the tree is loaded? I need to comb through the tree-nodes recursively.

Thanks for any help

The data uses an "open" property but doesn't it also need a "selected" property? If I am reloading a path I need to display all the correct folders as opened, and the target folder as selected.