Why the fork on top of a fanstastic fork job?
- Simply I need to have pdf export enabled to existing library; I do recommend to use original fork if there's no requirement for pdf export
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, filetype, options). supported file types are image/jpeg and application/pdf. options is an object, currently supports an option for switching between pdf drivers jspdf and dom-to-pdf |
| 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 @figsify/react-new-orgchart