@performant-software/visualize 3.1.0-beta.2 → 3.1.0

package/src/components/TreeGraph.js

@@ -170,7 +170,7 @@ const TreeGraph = (props: Props) => {
     if (props.layout === Layout.polar) {
       origin = {
         x: innerWidth / 2,
-        y: innerHeight / 2,
+        y: innerHeight / 2
       };
       sizeWidth = 2 * Math.PI;
       sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);

package/src/hooks/Zoom.js

@@ -31,7 +31,7 @@ const DEFAULT_INITIAL_TRANSFORM = {
   translateX: 0,
   translateY: 0,
   skewX: 0,
-  skewY: 0,
+  skewY: 0
 };
 
 const withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {

package/src/i18n/i18n.js

@@ -1,4 +1,4 @@
-import i18next from 'i18next';
+import { createInstance } from 'i18next';
 
 import en from './en.json';
 
@@ -8,7 +8,7 @@ const resources = {
   }
 };
 
-const i18n = i18next.createInstance();
+const i18n = createInstance();
 
 i18n
   .init({
@@ -16,7 +16,7 @@ i18n
     fallbackLng: 'en',
     lng: 'en',
     interpolation: {
-      escapeValue: false,
+      escapeValue: false
     },
     resources
   });

package/types/components/TreeGraph.js.flow

@@ -170,7 +170,7 @@ const TreeGraph = (props: Props) => {
     if (props.layout === Layout.polar) {
       origin = {
         x: innerWidth / 2,
-        y: innerHeight / 2,
+        y: innerHeight / 2
       };
       sizeWidth = 2 * Math.PI;
       sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);

package/types/hooks/Zoom.js.flow

@@ -31,7 +31,7 @@ const DEFAULT_INITIAL_TRANSFORM = {
   translateX: 0,
   translateY: 0,
   skewX: 0,
-  skewY: 0,
+  skewY: 0
 };
 
 const withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {

package/types/i18n/i18n.js.flow

@@ -1,4 +1,4 @@
-import i18next from 'i18next';
+import { createInstance } from 'i18next';
 
 import en from './en.json';
 
@@ -8,7 +8,7 @@ const resources = {
   }
 };
 
-const i18n = i18next.createInstance();
+const i18n = createInstance();
 
 i18n
   .init({
@@ -16,7 +16,7 @@ i18n
     fallbackLng: 'en',
     lng: 'en',
     interpolation: {
-      escapeValue: false,
+      escapeValue: false
     },
     resources
   });

package/build/index.js

@@ -1,2 +0,0 @@
-(()=>{"use strict";var e={n:t=>{var n=t&&t.__esModule?()=>t.default:()=>t;return e.d(n,{a:n}),n},d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{TreeGraph:()=>L,withZoom:()=>k});const n=require("@visx/group"),r=require("@visx/hierarchy"),o=require("@visx/responsive"),a=require("@visx/shape"),i=require("d3-shape"),l=require("react");var c=e.n(l);const u=require("underscore");var s=e.n(u);const d=require("@visx/event"),f=require("@visx/zoom"),p=require("i18next");var m=e.n(p),y={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},b=m().createInstance();b.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:y});const g=b;function h(){return h=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},h.apply(this,arguments)}var v={scaleX:1,scaleY:1,translateX:0,translateY:0,skewX:0,skewY:0};const k=function(e){return function(t){var n=t.parentWidth,r=t.parentHeight,o=t.scaleXMin,a=void 0===o?.5:o,i=t.scaleXMax,u=void 0===i?4:i,s=t.scaleYMin,p=void 0===s?.5:s,m=t.scaleYMax,y=void 0===m?4:m,b=t.initialTransform,k=void 0===b?v:b,E=(0,l.useCallback)((function(e){return c().createElement("rect",{width:n,height:r,rx:14,fill:"transparent",onTouchStart:e.dragStart,onTouchMove:e.dragMove,onTouchEnd:e.dragEnd,onMouseDown:e.dragStart,onMouseMove:e.dragMove,onMouseUp:e.dragEnd,onMouseLeave:function(){e.isDragging&&e.dragEnd()},onDoubleClick:function(t){var n=(0,d.localPoint)(t)||{x:0,y:0};e.scale({scaleX:1.1,scaleY:1.1,point:n})}})}),[n,r]);return c().createElement(f.Zoom,{width:n,height:r,scaleXMin:a,scaleXMax:u,scaleYMin:p,scaleYMax:y,initialTransformMatrix:k},(function(n){return c().createElement("div",{className:"zoom"},c().createElement(e,h({},t,{renderZoomContainer:E.bind(void 0,n),zoom:n})),c().createElement("div",{className:"controls"},c().createElement("button",{type:"button",className:"btn btn-zoom",onClick:function(){return n.scale({scaleX:1.2,scaleY:1.2})}},g.t("Zoom.buttons.zoomIn")),c().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:function(){return n.scale({scaleX:.8,scaleY:.8})}},g.t("Zoom.buttons.zoomOut")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},g.t("Zoom.buttons.center")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},g.t("Zoom.buttons.reset")),c().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},g.t("Zoom.buttons.clear"))))}))}};function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var x="polar",M="curve",T="line",C="step",z="vertical",S=function(e){var t=(0,l.useRef)(),o=e.parentWidth-e.margin.left-e.margin.right,u=e.parentHeight-e.margin.top-e.margin.bottom,d=(0,l.useMemo)((function(){return e.layout===x?e.linkType===C?a.LinkRadialStep:e.linkType===M?a.LinkRadialCurve:e.linkType===T?a.LinkRadialLine:a.LinkRadial:e.orientation===z?e.linkType===C?a.LinkVerticalStep:e.linkType===M?a.LinkVerticalCurve:e.linkType===T?a.LinkVerticalLine:a.LinkVertical:e.linkType===C?a.LinkHorizontalStep:e.linkType===M?a.LinkHorizontalCurve:e.linkType===T?a.LinkHorizontalLine:a.LinkHorizontal}),[e.layout,e.linkType,e.orientation]),f=(0,l.useCallback)((function(e,t){var n=t;return e.isExpanded&&(n=s().max(s().map(e.children,(function(e){return f(e,t+1)})))),n}),[]),p=(0,l.useCallback)((function(t,n){var r,o,a,l;if(e.layout===x){var c=(a=(0,i.pointRadial)(t,n),l=2,function(e){if(Array.isArray(e))return e}(a)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a=[],i=!0,l=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);i=!0);}catch(e){l=!0,o=e}finally{try{i||null==n.return||n.return()}finally{if(l)throw o}}return a}}(a,l)||function(e,t){if(e){if("string"==typeof e)return E(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?E(e,t):void 0}}(a,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=c[0];r=c[1],o=u}else e.orientation===z?(r=n,o=t):(r=t,o=n);return{top:r,left:o}}),[e.layout,e.orientation]),m=(0,l.useMemo)((function(){var t,n,r,a=f(e.data,1);return e.layout===x?(r={x:o/2,y:u/2},t=2*Math.PI,n=Math.min(o,u)/2*(a/2)):(r={x:0,y:0},e.orientation===z?(t=o,n=u):(t=u,n=o)),{sizeWidth:t,sizeHeight:n,origin:r}}),[f,u,o,e.data,e.layout,e.orientation]),y=(0,l.useCallback)((function(t){return c().createElement("foreignObject",null,e.renderNode(t.data))}),[e.renderNode]),b=(0,l.useCallback)((function(e,t){var r=p(e.x,e.y),o=r.top,a=r.left;return c().createElement(n.Group,{nodeleft:a,nodetop:o,top:o,left:a,key:t},y(e))}),[y,e.layout,e.orientation,e.linkType]);return(0,l.useEffect)((function(){var e=t.current;if(e){var n=e.getElementsByTagName("g");s().each(n,(function(e){var t=s().first(e.getElementsByTagName("foreignObject"));if(t&&t.firstChild){var n=t.firstChild,r=n.offsetWidth,o=n.offsetHeight;t.setAttribute("width",r),t.setAttribute("height",o);var a=parseFloat(e.getAttribute("nodeleft")),i=parseFloat(e.getAttribute("nodetop"));if(!s().isNaN(a)&&!s().isNaN(i)){var l="translate(".concat(a-r/2,", ").concat(i-o/2,")");e.setAttribute("transform",l)}}}))}}),[e.data,e.layout,e.orientation,e.linkType]),c().createElement("div",{className:"tree-graph",style:{display:"flex",flexGrow:"1"}},c().createElement("svg",{width:e.parentWidth,height:e.parentHeight-e.offset,ref:e.zoom.containerRef},e.renderZoomContainer(),c().createElement(n.Group,{top:e.margin.top,left:e.margin.left,transform:e.zoom.toString()},c().createElement(r.Tree,{root:(0,r.hierarchy)(e.data,(function(e){return e.isExpanded?e.children:null})),size:[m.sizeWidth,m.sizeHeight],separation:function(e,t){return(e.parent===t.parent?1:2)/e.depth}},(function(r){return c().createElement(n.Group,{innerRef:t,left:m.origin.x,top:m.origin.y},r.links().map((function(t,n){return c().createElement(d,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"})})),s().map(r.descendants(),b))})))))};S.defaultProps={layout:"cartesian",linkColor:"#B2B09B",linkType:T,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},offset:0,orientation:"horizontal",stepPercent:.5};const L=(0,o.withParentSize)(k(S));module.exports=t})();
-//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/visualize/webpack/bootstrap","webpack://@performant-software/visualize/webpack/runtime/compat get default export","webpack://@performant-software/visualize/webpack/runtime/define property getters","webpack://@performant-software/visualize/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/visualize/webpack/runtime/make namespace object","webpack://@performant-software/visualize/external commonjs \"@visx/group\"","webpack://@performant-software/visualize/external commonjs \"@visx/hierarchy\"","webpack://@performant-software/visualize/external commonjs \"@visx/responsive\"","webpack://@performant-software/visualize/external commonjs \"@visx/shape\"","webpack://@performant-software/visualize/external commonjs \"d3-shape\"","webpack://@performant-software/visualize/external commonjs2 \"react\"","webpack://@performant-software/visualize/external commonjs \"underscore\"","webpack://@performant-software/visualize/external commonjs \"@visx/event\"","webpack://@performant-software/visualize/external commonjs \"@visx/zoom\"","webpack://@performant-software/visualize/external commonjs \"i18next\"","webpack://@performant-software/visualize/./src/i18n/i18n.js","webpack://@performant-software/visualize/./src/hooks/Zoom.js","webpack://@performant-software/visualize/./src/components/TreeGraph.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/group\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/hierarchy\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/responsive\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/shape\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"d3-shape\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/event\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/zoom\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"i18next\");","import i18next from 'i18next';\n\nimport en from './en.json';\n\nconst resources = {\n  en: {\n    translation: en\n  }\n};\n\nconst i18n = i18next.createInstance();\n\ni18n\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    lng: 'en',\n    interpolation: {\n      escapeValue: false,\n    },\n    resources\n  });\n\nexport default i18n;\n","// @flow\n\nimport React, { useCallback, type ComponentType, type Element } from 'react';\nimport { localPoint } from '@visx/event';\nimport { Zoom } from '@visx/zoom';\nimport i18n from '../i18n/i18n';\nimport './Zoom.css';\n\ntype Props = {\n  initialTransform?: {\n    skewX: number,\n    skewY: number,\n    scaleX: number,\n    scaleY: number,\n    translateX: number,\n    translateY: number\n  },\n  parentHeight: number,\n  parentWidth: number,\n  scaleXMax?: number,\n  scaleXMin?: number,\n  scaleYMax?: number,\n  scaleYMin?: number\n};\n\ntype WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => Element<any>;\n\nconst DEFAULT_INITIAL_TRANSFORM = {\n  scaleX: 1,\n  scaleY: 1,\n  translateX: 0,\n  translateY: 0,\n  skewX: 0,\n  skewY: 0,\n};\n\nconst withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {\n  const { parentWidth: width, parentHeight: height } = props;\n  const { scaleXMin = 1 / 2, scaleXMax = 4 } = props;\n  const { scaleYMin = 1 / 2, scaleYMax = 4 } = props;\n  const { initialTransform = DEFAULT_INITIAL_TRANSFORM } = props;\n\n  /**\n   * Renders the container with zoom controls.\n   *\n   * @type {unknown}\n   */\n  const renderZoomContainer = useCallback((zoom) => (\n    <rect\n      width={width}\n      height={height}\n      rx={14}\n      fill='transparent'\n      onTouchStart={zoom.dragStart}\n      onTouchMove={zoom.dragMove}\n      onTouchEnd={zoom.dragEnd}\n      onMouseDown={zoom.dragStart}\n      onMouseMove={zoom.dragMove}\n      onMouseUp={zoom.dragEnd}\n      onMouseLeave={() => {\n        if (zoom.isDragging) zoom.dragEnd();\n      }}\n      onDoubleClick={(event) => {\n        const point = localPoint(event) || { x: 0, y: 0 };\n        zoom.scale({ scaleX: 1.1, scaleY: 1.1, point });\n      }}\n    />\n  ), [width, height]);\n\n  return (\n    <Zoom\n      width={width}\n      height={height}\n      scaleXMin={scaleXMin}\n      scaleXMax={scaleXMax}\n      scaleYMin={scaleYMin}\n      scaleYMax={scaleYMax}\n      initialTransformMatrix={initialTransform}\n    >\n      { (zoom) => (\n        <div\n          className='zoom'\n        >\n          <WrappedComponent\n            {...props}\n            renderZoomContainer={renderZoomContainer.bind(this, zoom)}\n            zoom={zoom}\n          />\n          <div\n            className='controls'\n          >\n            <button\n              type='button'\n              className='btn btn-zoom'\n              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}\n            >\n              { i18n.t('Zoom.buttons.zoomIn') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-zoom btn-bottom'\n              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}\n            >\n              { i18n.t('Zoom.buttons.zoomOut') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.center}\n            >\n              { i18n.t('Zoom.buttons.center') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.reset}\n            >\n              { i18n.t('Zoom.buttons.reset') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.clear}\n            >\n              { i18n.t('Zoom.buttons.clear') }\n            </button>\n          </div>\n        </div>\n      )}\n    </Zoom>\n  );\n};\n\nexport default withZoom;\n\nexport type ZoomProps = {\n  renderZoomContainer: () => Element<any>,\n  zoom: typeof Zoom\n};\n","// @flow\n\nimport { Group } from '@visx/group';\nimport { hierarchy, Tree } from '@visx/hierarchy';\nimport { withParentSize } from '@visx/responsive';\nimport {\n  LinkHorizontal,\n  LinkHorizontalCurve,\n  LinkHorizontalLine,\n  LinkHorizontalStep,\n  LinkRadial,\n  LinkRadialCurve,\n  LinkRadialLine,\n  LinkRadialStep,\n  LinkVertical,\n  LinkVerticalCurve,\n  LinkVerticalLine,\n  LinkVerticalStep\n} from '@visx/shape';\nimport { pointRadial } from 'd3-shape';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentType,\n  type Element\n} from 'react';\nimport _ from 'underscore';\nimport withZoom, { type ZoomProps } from '../hooks/Zoom';\nimport './TreeGraph.css';\n\ntype Props = ZoomProps & {\n  data: any,\n  layout: string,\n  linkType: string,\n  offset: number,\n  orientation: string,\n  parentHeight: number,\n  parentWidth: number,\n  linkColor: string,\n  linkWidth: number,\n  margin: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number\n  },\n  renderNode?: (data: any) => Element<any>,\n  stepPercent: number\n};\n\nconst Layout = {\n  cartesian: 'cartesian',\n  polar: 'polar'\n};\n\nconst LinkType = {\n  curve: 'curve',\n  line: 'line',\n  step: 'step'\n};\n\nconst Orientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical'\n};\n\nconst TreeGraph = (props: Props) => {\n  const ref = useRef();\n\n  const innerWidth = props.parentWidth - props.margin.left - props.margin.right;\n  const innerHeight = props.parentHeight - props.margin.top - props.margin.bottom;\n\n  /**\n   * Sets the link component based on the layout, linkType, and orientation props.\n   *\n   * @type {*}\n   */\n  const LinkComponent = useMemo(() => {\n    let value;\n\n    if (props.layout === Layout.polar) {\n      if (props.linkType === LinkType.step) {\n        value = LinkRadialStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkRadialCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkRadialLine;\n      } else {\n        value = LinkRadial;\n      }\n    } else if (props.orientation === Orientation.vertical) {\n      if (props.linkType === LinkType.step) {\n        value = LinkVerticalStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkVerticalCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkVerticalLine;\n      } else {\n        value = LinkVertical;\n      }\n    } else if (props.linkType === LinkType.step) {\n      value = LinkHorizontalStep;\n    } else if (props.linkType === LinkType.curve) {\n      value = LinkHorizontalCurve;\n    } else if (props.linkType === LinkType.line) {\n      value = LinkHorizontalLine;\n    } else {\n      value = LinkHorizontal;\n    }\n\n    return value;\n  }, [props.layout, props.linkType, props.orientation]);\n\n  /**\n   * Returns the depth of the last expanded node.\n   *\n   * @type {function(*, *): *}\n   */\n  const getMaxDepth = useCallback((node, depth) => {\n    let max = depth;\n\n    if (node.isExpanded) {\n      max = _.max(_.map(node.children, (child) => getMaxDepth(child, depth + 1)));\n    }\n\n    return max;\n  }, []);\n\n  /**\n   * Returns the node position for the passed coordinates.\n   *\n   * @type {function(*, *): {top: *, left: *}}\n   */\n  const getNodePosition = useCallback((x, y) => {\n    let top;\n    let left;\n\n    if (props.layout === Layout.polar) {\n      const [radialX, radialY] = pointRadial(x, y);\n      top = radialY;\n      left = radialX;\n    } else if (props.orientation === Orientation.vertical) {\n      top = y;\n      left = x;\n    } else {\n      top = x;\n      left = y;\n    }\n\n    return {\n      top,\n      left\n    };\n  }, [props.layout, props.orientation]);\n\n  /**\n   * Returns the position and size of the root node.\n   *\n   * @type {{sizeWidth: *, origin: *, sizeHeight: *}}\n   */\n  const root = useMemo(() => {\n    let sizeWidth;\n    let sizeHeight;\n    let origin;\n\n    const depth = getMaxDepth(props.data, 1);\n\n    if (props.layout === Layout.polar) {\n      origin = {\n        x: innerWidth / 2,\n        y: innerHeight / 2,\n      };\n      sizeWidth = 2 * Math.PI;\n      sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);\n    } else {\n      origin = { x: 0, y: 0 };\n      if (props.orientation === Orientation.vertical) {\n        sizeWidth = innerWidth;\n        sizeHeight = innerHeight;\n      } else {\n        sizeWidth = innerHeight;\n        sizeHeight = innerWidth;\n      }\n    }\n\n    return {\n      sizeWidth,\n      sizeHeight,\n      origin\n    };\n  }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);\n\n  const renderNode = useCallback((node) => (\n    <foreignObject>\n      { props.renderNode(node.data) }\n    </foreignObject>\n  ), [props.renderNode]);\n\n  /**\n   * Renders the group element for the passed node.\n   *\n   * @type {unknown}\n   */\n  const renderGroup = useCallback((node, key) => {\n    const { top, left } = getNodePosition(node.x, node.y);\n\n    return (\n      <Group\n        nodeleft={left}\n        nodetop={top}\n        top={top}\n        left={left}\n        key={key}\n      >\n        { renderNode(node) }\n      </Group>\n    );\n  }, [renderNode, props.layout, props.orientation, props.linkType]);\n\n  /**\n   * Resizes the \"circle\" and \"rect\" elements based on the text contained in the group. This effect will also\n   * convert text into multiple lines.\n   */\n  useEffect(() => {\n    const { current } = ref;\n    if (current) {\n      const groups = current.getElementsByTagName('g');\n      _.each(groups, (group) => {\n        const object = _.first(group.getElementsByTagName('foreignObject'));\n        if (object && object.firstChild) {\n          const { offsetWidth: width, offsetHeight: height } = object.firstChild;\n\n          // Set the width and height of the foreignObject element\n          object.setAttribute('width', width);\n          object.setAttribute('height', height);\n\n          // Transform the position of the group element based on the width and height of the contents\n          const leftPosition = parseFloat(group.getAttribute('nodeleft'));\n          const topPosition = parseFloat(group.getAttribute('nodetop'));\n\n          if (!_.isNaN(leftPosition) && !_.isNaN(topPosition)) {\n            const transform = `translate(${leftPosition - (width / 2.0)}, ${topPosition - (height / 2.0)})`;\n            group.setAttribute('transform', transform);\n          }\n        }\n      });\n    }\n  }, [props.data, props.layout, props.orientation, props.linkType]);\n\n  return (\n    <div\n      className='tree-graph'\n      style={{\n        display: 'flex',\n        flexGrow: '1'\n      }}\n    >\n      <svg\n        width={props.parentWidth}\n        height={props.parentHeight - props.offset}\n        ref={props.zoom.containerRef}\n      >\n        { props.renderZoomContainer() }\n        <Group\n          top={props.margin.top}\n          left={props.margin.left}\n          transform={props.zoom.toString()}\n        >\n          <Tree\n            root={hierarchy(props.data, (d) => (d.isExpanded ? d.children : null))}\n            size={[root.sizeWidth, root.sizeHeight]}\n            separation={(a, b) => (a.parent === b.parent ? 1 : 2) / a.depth}\n          >\n            { (tree) => (\n              <Group\n                innerRef={ref}\n                left={root.origin.x}\n                top={root.origin.y}\n              >\n                { tree.links().map((link, i) => (\n                  <LinkComponent\n                    key={i}\n                    data={link}\n                    percent={props.stepPercent}\n                    stroke={props.linkColor}\n                    strokeWidth={props.linkWidth}\n                    fill='none'\n                  />\n                ))}\n                { _.map(tree.descendants(), renderGroup) }\n              </Group>\n            )}\n          </Tree>\n        </Group>\n      </svg>\n    </div>\n  );\n};\n\nTreeGraph.defaultProps = {\n  layout: Layout.cartesian,\n  linkColor: '#B2B09B',\n  linkType: LinkType.line,\n  linkWidth: 1,\n  margin: {\n    top: 30,\n    left: 30,\n    right: 30,\n    bottom: 70\n  },\n  offset: 0,\n  orientation: Orientation.horizontal,\n  stepPercent: 0.5\n};\n\nconst TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));\nexport default TreeGraphComponent;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","resources","en","translation","i18n","i18next","init","debug","fallbackLng","lng","interpolation","escapeValue","DEFAULT_INITIAL_TRANSFORM","scaleX","scaleY","translateX","translateY","skewX","skewY","WrappedComponent","props","width","parentWidth","height","parentHeight","scaleXMin","scaleXMax","scaleYMin","scaleYMax","initialTransform","renderZoomContainer","useCallback","zoom","rx","fill","onTouchStart","dragStart","onTouchMove","dragMove","onTouchEnd","dragEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","isDragging","onDoubleClick","event","point","localPoint","x","y","scale","Zoom","initialTransformMatrix","className","bind","type","onClick","center","reset","clear","Layout","LinkType","Orientation","TreeGraph","ref","useRef","innerWidth","margin","left","right","innerHeight","top","bottom","LinkComponent","useMemo","layout","linkType","LinkRadialStep","LinkRadialCurve","LinkRadialLine","LinkRadial","orientation","LinkVerticalStep","LinkVerticalCurve","LinkVerticalLine","LinkVertical","LinkHorizontalStep","LinkHorizontalCurve","LinkHorizontalLine","LinkHorizontal","getMaxDepth","node","depth","max","isExpanded","_","children","child","getNodePosition","pointRadial","radialX","root","sizeWidth","sizeHeight","origin","data","Math","PI","min","renderNode","renderGroup","Group","nodeleft","nodetop","useEffect","current","groups","getElementsByTagName","group","object","firstChild","offsetWidth","offsetHeight","setAttribute","leftPosition","parseFloat","getAttribute","topPosition","transform","style","display","flexGrow","offset","containerRef","toString","Tree","hierarchy","size","separation","b","parent","tree","innerRef","links","map","link","i","percent","stepPercent","stroke","linkColor","strokeWidth","linkWidth","descendants","defaultProps","withParentSize","withZoom"],"sourceRoot":""}

package/build/main.css

@@ -1,46 +0,0 @@
-.zoom {
-  position: relative;
-}
-.zoom .btn {
-  margin: 0;
-  text-align: center;
-  border: none;
-  background: #2f2f2f;
-  color: #d3d3d3;
-  padding: 0 4px;
-  border-top: 1px solid #0a0a0a;
-}
-.zoom .btn-lg {
-  font-size: 1em;
-  line-height: 1;
-  padding: 7px;
-}
-.zoom .btn-zoom {
-  width: 30px;
-  font-size: 2em;
-}
-.zoom .btn-bottom {
-  font-size: 2em;
-  margin-bottom: 1rem;
-}
-.zoom .controls {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.tree-graph {
-  position: relative;
-  height: 100%;
-}
-.tree-graph circle,
-.tree-graph rectangle {
-  cursor: pointer;
-}
-.tree-graph text {
-  pointer-events: none;
-}
-

package/index.js

@@ -1 +0,0 @@
-module.exports = require('./build/index');