README
Why use this fork?
Panning is now drag-to-scroll based, deprecating the transform CSS property logic. This avoids scrolling and visualization issues when rendering a large OrgChart.
Zooming is now scale() based. The main benefit of this change is that the ChartContainer module is simpler and easier to read when compared to the transformation-matrix splitting shenanigans. Using zoom() was a good enough alternative, but it is non-standard.
Orgchart downloading is now handled by the dom-to-image library. Dom-to-image has better predictability when dealing with large images, doesn't screw up your snapshot when scrolling, and is 70x faster.
Canvas maximum size limits are taken into account. Due to browser limitations, rendering a canvas with dimensions greater than 16384x16384 will result in a faulty, cropped snapshot. Thus, exporting a bulky OrgChart wasn't really possible. I solved this by scaling down any drawn images larger than the limit.
Props
Name | Type | Default | Description |
---|---|---|---|
chartClass | string | A css class to apply to the chart DOM node. | |
containerClass | string | Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy". | |
collapsible | boolean | true | Allows expanding/collapsing the nodes. |
datasource | object | datasource usded to build out structure of orgchart. | |
draggable | boolean | false | Allows dragging/dropping the nodes to the hierarchy of chart. |
multipleSelect | boolean | false | If true, user can select multiple nodes by mouse clicking. |
NodeTemplate | elementType | A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node. | |
onClickChart | function | A callback fired when the orgchart is clicking. | |
onClickNode | function | A callback fired when the node is clicking. | |
pan | boolean | false | If true, the chart can be panned. |
zoom | boolean | false | If true, the chart can be zoomed. |
maxZoom | number | 7 | Represents the maximum possible zoom of the orgchart. |
minZoom | number | 0.5 | Represents the minimum possible zoom of the orgchart. |
toggleableSiblings | boolean | true | Whether or not siblings should be toggleable. If false, also hides horizontal arrows. |
loading | boolean | false | Use this prop to trigger OrgChart's spinner on-demand. |
loadingComponent | React Element | <i className="oci oci-spinner"></i> | Use your app's existing loading component to maintain design. |
defaultZoom | number | 0.5 | Set the initial zoom. |
Methods
Name | Description |
---|---|
expandAllNodes | User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes() |
exportTo | User can use this method to export orgchart to png orge. Sample code: orgchartRef.current.exportTo(filename) |
zoomIn(amount) | User can use this method to zoom-in on the orgchart div. Default zoom amount is 0.05. |
zoomIn(amount) | User can use this method to zoom-out on the orgchart div. Default zoom amount is 0.05. |
resetZoom() | Resets zoom to defaultZoom. |
setExporting() | Sets exporting state. Useful if you need any transformations before actually exporting. |
Install
npm install @jearaneda/react-new-orgchart