@figsify/react-new-orgchart

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