apextree 1.1.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -62
- package/apextree.es.min.js +7127 -0
- package/apextree.min.js +1 -0
- package/demo/bottom_to_top_view.html +9 -7
- package/demo/custom_font_options.html +3 -6
- package/demo/dynamic_view_change.html +3 -6
- package/demo/expand_collapse_nodes.html +2 -2
- package/demo/left_to_right_view.html +2 -2
- package/demo/per_node_options.html +3 -6
- package/demo/right_to_left_view.html +2 -2
- package/demo/top_to_bottom_view.html +2 -2
- package/index.d.ts +1 -0
- package/lib/ApexTree.d.ts +9 -0
- package/lib/models/Export.d.ts +9 -0
- package/lib/models/Graph.d.ts +35 -0
- package/lib/models/Paper.d.ts +32 -0
- package/lib/models/Toolbar.d.ts +15 -0
- package/lib/models/index.d.ts +2 -0
- package/lib/settings/DirectionConfig.d.ts +47 -0
- package/lib/settings/Options.d.ts +49 -0
- package/lib/utils/EdgeUtils.d.ts +2 -0
- package/lib/utils/GraphUtils.d.ts +10 -0
- package/package.json +19 -27
- package/.editorconfig +0 -7
- package/.eslintignore +0 -2
- package/.eslintrc +0 -9
- package/.prettierrc +0 -5
- package/.vscode/settings.json +0 -5
- package/LICENSE +0 -674
- package/dist/ApexTree.js +0 -608
- package/dist/ApexTree.min.js +0 -2
- package/dist/ApexTree.min.js.LICENSE.txt +0 -10
- package/globals.d.ts +0 -4
- package/src/ApexTree.ts +0 -34
- package/src/icons/add-circle.svg +0 -3
- package/src/icons/export-icon.svg +0 -2
- package/src/icons/fit-screen-icon.svg +0 -9
- package/src/icons/minus-circle.svg +0 -3
- package/src/icons/zoom-in-icon.svg +0 -8
- package/src/icons/zoom-out-icon.svg +0 -8
- package/src/models/Export.ts +0 -39
- package/src/models/Graph.ts +0 -284
- package/src/models/Paper.ts +0 -117
- package/src/models/Toolbar.ts +0 -71
- package/src/models/index.ts +0 -2
- package/src/settings/DirectionConfig.ts +0 -227
- package/src/settings/Options.ts +0 -98
- package/src/utils/EdgeUtils.ts +0 -30
- package/src/utils/GraphUtils.ts +0 -135
- package/tsconfig.json +0 -28
- package/webpack.common.ts +0 -68
- package/webpack.config.ts +0 -7
- package/webpack.dev.ts +0 -12
- package/webpack.prod.ts +0 -9
- /package/{src/utils/index.ts → lib/utils/index.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -4,6 +4,7 @@ The Apextree is a javascript library built on SVG that helps to create organizat
|
|
|
4
4
|
|
|
5
5
|
<img width="811" alt="Screenshot 2023-12-17 at 10 28 04 PM" src="https://github.com/apexcharts/tree/assets/17950663/e09212ec-6322-4c68-ac12-9afc524d2abd">
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
## Installation
|
|
8
9
|
|
|
9
10
|
To add the Apextree to your project and its dependencies, install the package from npm.
|
|
@@ -15,7 +16,7 @@ npm install apextree
|
|
|
15
16
|
## Usage
|
|
16
17
|
|
|
17
18
|
```js
|
|
18
|
-
import ApexTree from 'apextree'
|
|
19
|
+
import ApexTree from 'apextree'
|
|
19
20
|
```
|
|
20
21
|
|
|
21
22
|
To create a basic tree with minimal configuration, write as follows:
|
|
@@ -46,41 +47,41 @@ To create a basic tree with minimal configuration, write as follows:
|
|
|
46
47
|
|
|
47
48
|
The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
50
|
+
Options | Default | Description
|
|
51
|
+
--- |------------------------------| ---
|
|
52
|
+
width | 400 | The width of graph container
|
|
53
|
+
height | 400 | The height of graph container
|
|
54
|
+
direction | top | The direction of the tree to start rendering. Possible values: `top`, `bottom`, `left` and `right`
|
|
55
|
+
contentKey | name | The key of content in passed data object
|
|
56
|
+
siblingSpacing | 50 | The spacing between sibling nodes
|
|
57
|
+
childrenSpacing | 50 | The spacing between children and parent
|
|
58
|
+
highlightOnHover | true | Enable/disable highlight on hover
|
|
59
|
+
containerClassName | root | The class name for the root container
|
|
60
|
+
canvasStyle | None | The css styles for canvas root container
|
|
61
|
+
enableToolbar | false | Enable/disable graph toolbar
|
|
62
|
+
nodeWidth | 50 | The width of graph nodes
|
|
63
|
+
nodeHeight | 30 | The height of graph nodes
|
|
64
|
+
nodeTemplate | defaultNodeTemplate | The HTML template for nodes
|
|
65
|
+
nodeBGColor | `#FFFFFF` | The background color of nodes
|
|
66
|
+
nodeBGColorHover | `#FFFFFF` | The background color on hover of nodes
|
|
67
|
+
borderWidth | 1 | The border width of the nodes in pixels
|
|
68
|
+
borderStyle | solid | The border style of the nodes
|
|
69
|
+
borderRadius | 5px | The border radius of the nodes in pixels
|
|
70
|
+
borderColor | `#BCBCBC` | The border color of the nodes
|
|
71
|
+
borderColorHover | `#5C6BC0` | The border color on hover of the nodes
|
|
72
|
+
edgeWidth | `1` | The width for the edges
|
|
73
|
+
edgeColor | `#BCBCBC` | The color for the edges
|
|
74
|
+
edgeColorHover | `#BCBCBC` | The color for the edges when highlighted
|
|
75
|
+
enableTooltip | false | Enable tooltip on hover of nodes
|
|
76
|
+
tooltipId | `apextree-tooltip-container` | The tooltip HTML element id
|
|
77
|
+
tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip
|
|
78
|
+
tooltipMaxWidth | 100 | The max width of the tooltip
|
|
79
|
+
tooltipBorderColor | `#BCBCBC` | The border color of tooltip
|
|
80
|
+
tooltipBGColor | `#FFFFFF` | The background color of tooltip
|
|
81
|
+
fontSize | 14px | The size of font of nodes
|
|
82
|
+
fontFamily | None | The font family of nodes
|
|
83
|
+
fontWeight | 400 | The font weight of nodes
|
|
84
|
+
fontColor | `#000000` | The font color of nodes
|
|
84
85
|
|
|
85
86
|
Default node template
|
|
86
87
|
|
|
@@ -89,46 +90,43 @@ const defaultNodeTemplate = (content: string) => {
|
|
|
89
90
|
return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
|
|
90
91
|
};
|
|
91
92
|
```
|
|
92
|
-
|
|
93
93
|
### Expected data format
|
|
94
94
|
|
|
95
95
|
```json
|
|
96
96
|
{
|
|
97
|
-
"id": "1",
|
|
97
|
+
"id": "1",
|
|
98
98
|
"name": "A",
|
|
99
99
|
"children": []
|
|
100
100
|
}
|
|
101
101
|
```
|
|
102
|
-
|
|
103
102
|
Passed data object should contain id, name and children.
|
|
104
103
|
|
|
105
|
-
For
|
|
104
|
+
For *id* key, value of id can be unique otherwise edge highlight won't work as expected.
|
|
106
105
|
|
|
107
|
-
For
|
|
106
|
+
For *name* key, if using other than *name* then specify key name in contentKey option
|
|
108
107
|
|
|
109
|
-
For
|
|
108
|
+
For *children* key, it contains list of child objects
|
|
110
109
|
|
|
111
110
|
**Example**
|
|
112
|
-
|
|
113
111
|
```js
|
|
114
112
|
const data = {
|
|
115
|
-
id:
|
|
116
|
-
name:
|
|
117
|
-
children: [
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
]
|
|
131
|
-
|
|
132
|
-
]
|
|
133
|
-
}
|
|
113
|
+
"id": "1",
|
|
114
|
+
"name": "A",
|
|
115
|
+
"children": [
|
|
116
|
+
{
|
|
117
|
+
"id": "2",
|
|
118
|
+
"name": "B",
|
|
119
|
+
"children": [
|
|
120
|
+
{
|
|
121
|
+
"id": "3",
|
|
122
|
+
"name": "C"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"id": "4",
|
|
126
|
+
"name": "D"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
]
|
|
131
|
+
}
|
|
134
132
|
```
|