{"id":13548388,"url":"https://github.com/hughsk/display-tree","last_synced_at":"2025-03-18T13:30:28.976Z","repository":{"id":57212951,"uuid":"54864953","full_name":"hughsk/display-tree","owner":"hughsk","description":"A JavaScript tree implementation designed to be efficiently \"flattened\" and sorted.","archived":false,"fork":false,"pushed_at":"2017-05-21T17:24:25.000Z","size":9,"stargazers_count":41,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-26T00:24:48.415Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hughsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-28T04:16:40.000Z","updated_at":"2021-11-16T09:56:02.000Z","dependencies_parsed_at":"2022-08-24T21:01:29.103Z","dependency_job_id":null,"html_url":"https://github.com/hughsk/display-tree","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughsk%2Fdisplay-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughsk%2Fdisplay-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughsk%2Fdisplay-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hughsk%2Fdisplay-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hughsk","download_url":"https://codeload.github.com/hughsk/display-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243928136,"owners_count":20370237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:01:09.664Z","updated_at":"2025-03-18T13:30:28.721Z","avatar_url":"https://github.com/hughsk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# display-tree\n\nA JavaScript tree implementation designed to be efficiently \"flattened\" and sorted. Built with realtime rendering in mind, and forms the generic part of [`scene-tree`](http://npmjs.com/package/scene-tree).\n\n## API\n\n### `node = Node(data)`\n\nCreates a new node. `data` is an optional object that may be supplied for assigning additional data to a node: in most cases, you'll want to include some basic information about the node using this.\n\n``` javascript\nvar Node = require('display-tree')\n\nvar node = Node({\n  position: [0, 1, 0],\n  color: [1, 0, 1, 1]\n})\n```\n\n### `node.data`\n\nThe data you supplied when creating the node is made accessible here.\n\n``` javascript\nvar node = Node({\n  position: [0, 1, 0],\n  color: [1, 0, 1, 1]\n})\n\nconsole.log(node.data.position) // [0, 1, 0]\nconsole.log(node.data.color) // [1, 0, 1, 1]\n```\n\n### `node.add(children...)`\n\nAdds one or more `children` to a given `node`. Accepts a single node, an array of nodes, or a mixture of both across multiple arguments.\n\n``` javascript\nvar root = Node()\n\nroot.add(Node())\nroot.add([Node(), Node(), Node()])\nroot.add(Node(), Node(), Node())\n```\n\n### `node.addOne(child)`\n\n`node.add()` without any of the sugar: adds a single `child` node.\n\n``` javascript\nvar root = Node()\n\nroot.addOne(Node())\n```\n\n### `node.remove(child)`\n\nRemoves `child` from `node`, if applicable.\n\n``` javascript\nvar root = Node()\nvar child = Node()\n\nroot.add(child)\nroot.remove(child)\n```\n\n### `node.clear()`\n\nRemoves any children attached to the given `node`.\n\n``` javascript\nvar root = Node()\n\nroot.add(Node())\nroot.add(Node())\nconsole.log(root.children.length) // 2\nroot.clear()\nconsole.log(root.children.length) // 0\n```\n\n### `node.each(visitor)`\n\nCalls the `visitor` function on each descendent node in the tree (depth first,\npre-order). Note that `visitor` is not called on `node` itself.\n\n``` javascript\nvar root = Node({ id: 0 }).add(\n  Node({ id: 1 }),\n  Node({ id: 2 }),\n  Node({ id: 3 }).add(\n    Node({ id: 4 }),\n    Node({ id: 5 })\n  ),\n)\n\nroot.each(function visitor (node) {\n  console.log(node.data.id)\n})\n\n// 1\n// 2\n// 3\n// 4\n// 5\n```\n\n### `node.findup(visitor)`\n\nWalks up the tree from `node` until hitting the root element, calling `visitor` on each node along the way.\n\n``` javascript\nvar child = Node({ id: 0 })\nvar root = Node({ id: 1 })\n\nroot.add(\n  Node({ id: 2 }).add(Node({ id: 3 })),\n  Node({ id: 4 }).add(child),\n)\n\nchild.findup(function visitor (node) {\n  console.log(node.data.id)\n})\n\n// 4\n// 1\n```\n\n### `node.flat(output)`\n\nReturns a flat array of all the child nodes in a tree.\n\n``` javascript\nvar root = Node({ id: 0 }).add(\n  Node({ id: 1 }),\n  Node({ id: 2 }),\n  Node({ id: 3 }).add(\n    Node({ id: 4 }),\n    Node({ id: 5 })\n  ),\n)\n\nvar ids = root.flat().map(d =\u003e d.data.id)\nconsole.log(ids) // [0, 1, 2, 3, 4, 5]\n```\n\n### `node.size()`\n\nGets the total number of descendent nodes of `node`, not including `node` itself:\n\n``` javascript\nvar root = Node({ id: 0 }).add(\n  Node({ id: 1 }),\n  Node({ id: 2 }),\n  Node({ id: 3 }).add(\n    Node({ id: 4 }),\n    Node({ id: 5 })\n  ),\n)\n\nconsole.log(root.size()) // 5\n```\n\n### `getNodeList = node.list([sortFunction])`\n\nReturns a function that sorts descendent nodes only as required using `sortFunction`, returning a flat array of the results. This is the preferred way to iterate over the elements in the tree when you're ready to render them.\n\n``` javascript\nvar root = Node()\nvar getNodeList = root.list()\n\nroot.add(Node(), Node(), Node())\n\nfunction render () {\n  var nodes = getNodeList()\n\n  for (var i = 0; i \u003c nodes.length; i++) {\n    draw(nodes[i])\n  }\n}\n```\n\n### `node.resetLists()`\n\nCall this on a node whenever something has occurred that would change its sort order, e.g. its position has been changed. This will reset any existing lists to sort their contents again, provided the root node is an ancestor of `node`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhughsk%2Fdisplay-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhughsk%2Fdisplay-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhughsk%2Fdisplay-tree/lists"}