Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/t-ski/html-tree-element
Native interface HTML tree element (optionally transformable).
https://github.com/t-ski/html-tree-element
html tree-element
Last synced: about 10 hours ago
JSON representation
Native interface HTML tree element (optionally transformable).
- Host: GitHub
- URL: https://github.com/t-ski/html-tree-element
- Owner: t-ski
- Created: 2024-04-15T21:26:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T11:47:36.000Z (5 months ago)
- Last Synced: 2024-07-02T09:20:10.548Z (5 months ago)
- Topics: html, tree-element
- Language: HTML
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTMLTreeElement
Rich HTML tree element based on pure HTML node templates.
## Integration
``` html
```
Existing tree rendering solutions usually rely on fine grained 2D drawing environments like SVG or canvas. The presented tree rendering solution provides a native HTML element interface in favour of simple integration. In fact, displaying a tree merely requires a template for the individual tree nodes, besides the hosting tree instance.
``` html
const TREE_OBJECT = { // root
genre: "Manga",
children: [
{
genre: "Shonen"
},
{
genre: "Shojo"
}
]
});
Genre: {{ genre }}
```
## API
Evidently, the tree element reflects data from an existing JavaScript object. The tree element provides a set of chainable methods for simple manipulation. Alternatively, window scope members can be bound via attibutes for an HTML-first approach.
> In general it holds that the attributes resemble the respective method names (see below):
> ``` html
> " />
> ```
### Data Assignment
``` js
document.querySelector("tree-element")
.data(treeObject); // TREE_OBJECT
```
``` html
```
### Template Assignment
A node template can be assigned either through a CSS selector to apply, or directly given an element reference.
``` js
document.querySelector("tree-element")
.template(templateElementOrSelector);
```
``` html
```
> The attribute interface accepts only CSS selectors.
### Configuration
A minimal tree requires a node template and the actual tree data. However, several tree characteristics can be optionally adjusted given a configuration object.
``` js
document.querySelector("tree-element")
.configure(overrideConfiguration);
```
``` html
```
| Configuration | Description | Default |
| :- | :- | -: |
| `childrenPropertyIdentifier` | Name of the child nodes property to traverse | `"children"` |
| `horizontal` | Whether to expand the tree horizontally | `false` |
| `linkCap` | Link cap (see [HTML Canvas Line Cap](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap?retiredLocale=de)) | `"round"` |
| `linkColor` | Link color | `"#000000"` |
| `linkMargin` | Link margin to nodes | `0` |
| `linkSlopeEnd` | Link slope at the inbound node (cubic bezier) | `1.0` |
| `linkSlopeStart` | Link slope at the outbound node (cubic bezier) | `1.0` |
| `linkStrength` | Link strength (in px) | `1` |
| `nodeMargin` | Margin between sibling nodes | `"1rem"` |
### Node Manipulation Callback
To bind a dynamic rendering or interaction behaviour to each node, a node-wise callback function can be applied. In order to assign multiple node manipulation callbacks successively, the second argument can be set to `true`.
``` js
document.querySelector("tree-element")
.nodeCallback(nodeCallback, chainToCurrent = false);
```
``` html
```
The callback function accepts the following arguments in the given order:
| Argument | Description |
| :- | :- |
| `nodeData` | Actual data of the current node as given on the input |
| `nodeShadowRoot` | Shadow DOM root reference of the current node |
| `isLeafNode` | Whether the current node is a leaf node |
By default, Mustache-style templates in text nodes are substituted by node data properties (e.g. `{{ name }}`). Also, methods are bound to event attributes (e.g. `onclick="sayName()"`).
### Transformability
Since the tree solution is strongly HTML-based, the default rendering behaviour is in line with the HTML flex concept. However, transformability of the tree – i.e. movability and zoomability – can be optionally enabled. A transform tree maintains a scoped viewport within the tree structure is rendered.
``` js
document.querySelector("tree-element")
.transform(overrideOptions);
```
``` html
```
| Option | Description | Default |
| :- | :- | -: |
| `minZoom` | Minimum zoom factor | `0.5` |
| `maxZoom` | Maximum zoom factor | `3.0` |
| `safetyMargin` | Minimum visible space of tree bounding box within the viewport (in px) | `50` |
| `zoomSpeed` | Zoom speed factor | `1.0` |
##
© Thassilo Martin Schiepanski