@ctrl/react-orgchart 1.3.0 → 1.4.0

package/snowpack.config.js

@@ -1,14 +0,0 @@
-// Snowpack Configuration File
-// See all supported options: https://www.snowpack.dev/reference/configuration
-
-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  mount: {
-    demo: { url: '/', static: false, resolve: true },
-    src: { url: '/src', static: false, resolve: true },
-  },
-  plugins: ['@snowpack/plugin-webpack', 'snowpack-plugin-hash'],
-  alias: {
-    path: 'path-browserify',
-  },
-};

package/src/chart/components/iconLink.jsx

@@ -1,46 +0,0 @@
-export const iconLink = ({ svg, x = 5, y = 5 }) => {
-  const container = svg
-    .append('g')
-    .attr('stroke', 'none')
-    .attr('fill', 'none')
-    .style('cursor', 'pointer')
-    .append('g');
-
-  const icon = container
-    .append('g')
-    .attr('id', 'icon')
-    .attr('fill', '#9585A3')
-    .attr('transform', `translate(${x}, ${y})`);
-
-  const arrow = icon
-    .append('g')
-    .attr('id', 'arrow')
-    .attr(
-      'transform',
-      'translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000)',
-    );
-
-  arrow
-    .append('path')
-    .attr(
-      'd',
-      'M3.41421356,2 L8.70710678,7.29289322 C9.09763107,7.68341751 9.09763107,8.31658249 8.70710678,8.70710678 C8.31658249,9.09763107 7.68341751,9.09763107 7.29289322,8.70710678 L2,3.41421356 L2,7 C2,7.55228475 1.55228475,8 1,8 C0.44771525,8 0,7.55228475 0,7 L0,1.49100518 C0,0.675320548 0.667758414,0 1.49100518,0 L7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 L3.41421356,2 Z',
-    );
-
-  arrow
-    .append('path')
-    // .attr('opacity', 0.7)
-    .attr(
-      'd',
-      'M12,2 L12,12 L2,12 L2,11 C2,10.4477153 1.55228475,10 1,10 C0.44771525,10 0,10.4477153 0,11 L0,12.4953156 C0,13.3242086 0.674596865,14 1.50034732,14 L12.4996527,14 C13.3281027,14 14,13.3234765 14,12.4996527 L14,1.50034732 C14,0.669321781 13.3358906,0 12.4953156,0 L11,0 C10.4477153,0 10,0.44771525 10,1 C10,1.55228475 10.4477153,2 11,2 L12,2 Z',
-    );
-
-  icon
-    .append('rect')
-    .attr('id', 'bounds')
-    .attr('x', 0)
-    .attr('y', 0)
-    .attr('width', 24)
-    .attr('height', 24)
-    .attr('fill', 'transparent');
-};

package/src/chart/config.ts

@@ -1,83 +0,0 @@
-const animationDuration = 350;
-const shouldResize = true;
-
-// Nodes
-const nodeWidth = 140;
-const nodeHeight = 190;
-const nodeSpacing = 12;
-const nodePaddingX = 16;
-const nodePaddingY = 16;
-const avatarWidth = 48;
-const nodeBorderRadius = 4;
-
-// Lines
-/* Height of the line for child nodes */
-const lineDepthY = 120;
-
-// Colors
-const backgroundColor = '#fff';
-// Theme.borderlight
-const borderColor = '#E7E1EC';
-// Theme.gray800
-const nameColor = '#302839';
-// Theme.gray600
-const titleColor = '#645574';
-const reportsColor = '#92A0AD';
-
-export interface Config {
-  animationDuration: number;
-  nodeWidth: number;
-  nodeHeight: number;
-  nodeSpacing: number;
-  nodePaddingX: number;
-  nodePaddingY: number;
-  nodeBorderRadius: number;
-  avatarWidth: number;
-  lineDepthY: number;
-  backgroundColor: string;
-  borderColor: string;
-  nameColor: string;
-  titleColor: string;
-  reportsColor: string;
-  shouldResize: boolean;
-  nameFontSize: number;
-  titleFontSize: number;
-  titleYTopDistance: number;
-  countFontSize: number;
-  countYTopDistance: number;
-  maxNameWordLength: number;
-  maxTitleWordLength: number;
-  maxCountWordLength: number;
-  onEntityLinkClick?: (data: any, event: any) => void;
-  onNameClick?: (data: any, event: any) => void;
-  onCountClick?: (data: any, event: any) => void;
-  getName?: (data: any) => string;
-  getTitle?: (data: any) => string;
-  getCount?: (data: any) => string;
-}
-
-export const config: Config = {
-  animationDuration,
-  nodeWidth,
-  nodeHeight,
-  nodeSpacing,
-  nodePaddingX,
-  nodePaddingY,
-  nodeBorderRadius,
-  avatarWidth,
-  lineDepthY,
-  backgroundColor,
-  borderColor,
-  nameColor,
-  titleColor,
-  reportsColor,
-  shouldResize,
-  nameFontSize: 14,
-  titleFontSize: 13,
-  titleYTopDistance: 25,
-  countFontSize: 14,
-  countYTopDistance: 72,
-  maxNameWordLength: 16,
-  maxTitleWordLength: 17,
-  maxCountWordLength: 17,
-};

package/src/chart/index.js

@@ -1,172 +0,0 @@
-import { hierarchy, tree } from 'd3-hierarchy';
-import { select } from 'd3-selection';
-import { zoom as zoomer, zoomIdentity } from 'd3-zoom';
-
-import { collapse } from '../utils/index';
-
-import { render } from './render';
-
-export function init(options) {
-  // Merge options with the default config
-  const config = {
-    ...options,
-    treeData: options.data,
-  };
-
-  if (!config.id) {
-    throw new Error('missing id for svg root');
-  }
-
-  const {
-    elem,
-    treeData,
-    nodeWidth,
-    nodeHeight,
-    nodeSpacing,
-    shouldResize,
-    disableCanvasMouseWheelZoom,
-    disableCanvasMouseMove,
-  } = config;
-
-  // Calculate how many pixel nodes to be spaced based on the
-  // type of line that needs to be rendered
-
-  config.lineDepthY = nodeHeight + 40;
-
-  if (!elem) {
-    throw new Error('No root elem');
-  }
-
-  // Reset in case there's any existing DOM
-  elem.innerHTML = '';
-  const elemWidth = elem.offsetWidth;
-  const elemHeight = elem.offsetHeight;
-
-  // Setup the d3 tree layout
-  config.tree = hierarchy(treeData, function (d) {
-    return d.children;
-  });
-  config.treeMap = tree(config.tree).nodeSize([nodeWidth + nodeSpacing, nodeHeight + nodeSpacing]);
-  // Collapse tree on load
-  config.treeMap(config.tree).descendants().slice(1).forEach(collapse);
-
-  // Calculate width of a node with expanded children
-  // const childrenWidth = parseInt((treeData.children.length * nodeWidth) / 2)
-
-  // <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" xml:space="preserve" viewBox="0 0 193 260" enable-background=" new 0 0 193 260" height="260" width="193"
-  // Add svg root for d3
-  const svgroot = select(elem)
-    .append('svg')
-    .attr('id', 'svg')
-    .attr('xmlns', 'http://www.w3.org/2000/svg')
-    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink')
-    .attr('x', '0px')
-    .attr('y', '0px')
-    .attr('xml:space', 'preserve')
-    .attr('viewBox', `0 0 ${elemWidth} ${elemHeight}`)
-    .attr('enable-background', ` new 0 0 ${elemWidth} ${elemHeight}`)
-    .attr('width', elemWidth)
-    .attr('height', elemHeight);
-
-  // Graph center point
-  const centerPoint = elemWidth / 2 - nodeWidth / 2 + 15;
-
-  // Add our base svg group to transform when a user zooms/pans
-  const svg = svgroot.append('g');
-
-  // Connect core variables to config so that they can be
-  // used in internal rendering functions
-  config.svg = svg;
-  config.svgroot = svgroot;
-  config.elemWidth = elemWidth;
-  config.elemHeight = elemHeight;
-  config.render = render;
-
-  // Defined zoom behavior
-  const zoom = zoomer()
-    .scaleExtent([0.1, 1.5])
-    .duration(50)
-    .on('zoom', zoomEvent => {
-      svg.attr('transform', () => {
-        return zoomEvent.transform;
-      });
-    });
-
-  svgroot.call(zoom.transform, zoomIdentity.translate(centerPoint, 48).scale(0.8));
-
-  const zoomedRoot = svgroot.call(zoom);
-
-  // Disable the Mouse Wheel Zooming
-  if (disableCanvasMouseWheelZoom) {
-    zoomedRoot.on('wheel.zoom', null);
-  }
-
-  // Disable the Mouse Wheel Canvas Content Moving
-  if (disableCanvasMouseMove) {
-    zoomedRoot
-      .on('mousedown.zoom', null)
-      .on('touchstart.zoom', null)
-      .on('touchmove.zoom', null)
-      .on('touchend.zoom', null);
-  }
-
-  // Add avatar clip path
-  const defs = svgroot.append('svg:defs');
-  defs
-    .append('clipPath')
-    .attr('id', 'avatarClip')
-    .append('circle')
-    .attr('cx', 70)
-    .attr('cy', 32)
-    .attr('r', 24);
-
-  // Add boxshadow
-  const filter = svgroot
-    .append('svg:defs')
-    .append('svg:filter')
-    .attr('id', 'boxShadow')
-    .attr('height', '150%')
-    .attr('width', '150%');
-
-  filter
-    .append('svg:feGaussianBlur')
-    .attr('in', 'SourceAlpha')
-    .attr('stdDeviation', 1) // blur amount
-    .attr('result', 'blurOut');
-
-  filter
-    .append('svg:feOffset')
-    .attr('in', 'blurOut')
-    .attr('dx', 0)
-    .attr('dy', 2)
-    .attr('result', 'offsetOut');
-
-  const feMerge = filter.append('feMerge');
-  feMerge.append('feMergeNode').attr('in', 'offsetOut');
-  feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
-
-  // Add listener for when the browser or parent node resizes
-  const resize = () => {
-    if (!elem) {
-      window.removeEventListener('resize', resize);
-      return;
-    }
-
-    svgroot.attr('width', elem.offsetWidth).attr('height', elem.offsetHeight);
-  };
-
-  if (shouldResize) {
-    window.addEventListener('resize', resize);
-  }
-
-  // Start initial render
-  render(config);
-
-  // return OnDestroy fn
-  return () => {
-    svgroot.remove();
-    if (shouldResize) {
-      window.removeEventListener('resize', resize);
-    }
-  };
-}

package/src/chart/onClick.js

@@ -1,37 +0,0 @@
-export function onClick(config) {
-  const { render } = config;
-
-  return (event, datum) => {
-    if (event.defaultPrevented) {
-      return;
-    }
-
-    const link = event && event.target && event.target.closest('a');
-    if (link && link.href) {
-      return;
-    }
-
-    if (!datum.children && !datum._children) {
-      return;
-    }
-
-    if (datum.children) {
-      // Collapse the children
-      config.callerNode = datum;
-      datum._children = datum.children;
-      datum.children = null;
-    } else {
-      // Expand the children
-      config.callerNode = null;
-      datum.children = datum._children;
-      datum._children = null;
-    }
-
-    // Pass in the clicked datum as the sourceNode which
-    // tells the child nodes where to animate in from
-    render({
-      ...config,
-      sourceNode: datum,
-    });
-  };
-}

package/src/chart/render.js

@@ -1,253 +0,0 @@
-import * as helpers from '../utils/index';
-
-import { iconLink } from './components/iconLink';
-import { onClick } from './onClick';
-import { renderLines } from './renderLines';
-
-const CHART_NODE_CLASS = 'org-chart-node';
-const ENTITY_LINK_CLASS = 'org-chart-entity-link';
-const ENTITY_NAME_CLASS = 'org-chart-entity-name';
-const ENTITY_TITLE_CLASS = 'org-chart-entity-title';
-const COUNTS_CLASS = 'org-chart-counts';
-
-export function render(config) {
-  const {
-    svg,
-    tree,
-    animationDuration,
-    nodeWidth,
-    nodeHeight,
-    nodePaddingY,
-    nodeBorderRadius,
-    backgroundColor,
-    nameColor,
-    titleColor,
-    reportsColor,
-    borderColor,
-    avatarWidth,
-    lineDepthY,
-    sourceNode,
-    onEntityLinkClick,
-    nameFontSize = 14,
-    titleFontSize = 13,
-    titleYTopDistance = 25,
-    countFontSize = 14,
-    countYTopDistance = 72,
-    maxNameWordLength = 16,
-    maxTitleWordLength = 17,
-    maxCountWordLength = 17,
-    getName,
-    getTitle,
-    getCount,
-    onNameClick,
-    onCountClick,
-    treeMap,
-  } = config;
-
-  // Compute the new tree layout.
-  const data = treeMap(tree);
-  const nodes = data.descendants();
-  const links = data.links();
-
-  // Collapse all of the children on initial load
-  // nodes.forEach(collapse);
-
-  config.links = links;
-  config.nodes = nodes;
-
-  // Normalize for fixed-depth.
-  nodes.forEach(function (d) {
-    d.y = d.depth * lineDepthY;
-  });
-
-  // Update the nodes
-  const node = svg.selectAll('g.' + CHART_NODE_CLASS).data(nodes, n => n.data.id);
-  const parentNode = sourceNode || nodes[0];
-
-  // Enter any new nodes at the parent's previous position.
-  const nodeEnter = node
-    .enter()
-    .append('g')
-    .attr('class', CHART_NODE_CLASS)
-    .attr('transform', () => {
-      return `translate(${parentNode.x0 || parentNode.x}, ${parentNode.y0 || parentNode.y})`;
-    })
-    .on('click', onClick(config));
-
-  // Entity Card Shadow
-  nodeEnter
-    .append('rect')
-    .attr('width', nodeWidth)
-    .attr('height', nodeHeight)
-    .attr('fill', backgroundColor)
-    .attr('stroke', borderColor)
-    .attr('rx', nodeBorderRadius)
-    .attr('ry', nodeBorderRadius)
-    .attr('fill-opacity', 0.05)
-    .attr('stroke-opacity', 0.025)
-    .attr('filter', 'url(#boxShadow)');
-
-  // Entity Card Container
-  nodeEnter
-    .append('rect')
-    .attr('width', nodeWidth)
-    .attr('height', nodeHeight)
-    .attr('id', d => d.data.id)
-    .attr('fill', backgroundColor)
-    .attr('stroke', borderColor)
-    .attr('rx', nodeBorderRadius)
-    .attr('ry', nodeBorderRadius)
-    .style('cursor', helpers.getCursorForNode);
-
-  const namePos = {
-    x: nodeWidth / 2,
-    y: nodePaddingY * 1.8 + avatarWidth,
-  };
-
-  const avatarPos = {
-    x: nodeWidth / 2 - avatarWidth / 2,
-    y: nodePaddingY / 2,
-  };
-
-  // Entity's Name
-  nodeEnter
-    .append('text')
-    .attr('class', `${ENTITY_NAME_CLASS} unedited`)
-    .attr('x', namePos.x)
-    .attr('y', namePos.y)
-    .attr('dy', '.3em')
-    .style('cursor', 'pointer')
-    .style('fill', nameColor)
-    .style('font-size', nameFontSize)
-    .text(d => (typeof getName === 'function' ? getName(d) : helpers.getName(d)))
-    .on('click', helpers.customOnClick(onNameClick, onClick, config));
-
-  // Title
-  nodeEnter
-    .append('text')
-    .attr('class', `${ENTITY_TITLE_CLASS} unedited`)
-    .attr('x', nodeWidth / 2)
-    .attr('y', namePos.y + nodePaddingY + titleYTopDistance)
-    .attr('dy', '0.1em')
-    .style('font-size', titleFontSize)
-    .style('cursor', 'pointer')
-    .style('fill', titleColor)
-    .text(d => (typeof getTitle === 'function' ? getTitle(d) : helpers.getTitle(d)));
-
-  // Count
-  nodeEnter
-    .append('text')
-    .attr('class', `${COUNTS_CLASS} unedited`)
-    .attr('x', nodeWidth / 2)
-    .attr('y', namePos.y + nodePaddingY + countYTopDistance)
-    .attr('dy', '.9em')
-    .style('font-size', countFontSize)
-    .style('font-weight', 400)
-    .style('cursor', 'pointer')
-    .style('fill', reportsColor)
-    .text(d => (typeof getCount === 'function' ? getCount(d) : helpers.getCount(d)))
-    .on('click', helpers.customOnClick(onCountClick, onClick, config));
-
-  // Entity's Avatar
-  nodeEnter
-    .append('image')
-    .attr('id', d => `image-${d.data.id}`)
-    .attr('width', avatarWidth)
-    .attr('height', avatarWidth)
-    .attr('x', avatarPos.x)
-    .attr('y', avatarPos.y)
-    .attr('stroke', borderColor)
-    .attr('src', d => d.data.entity.avatar)
-    .attr('href', d => d.data.entity.avatar)
-    .attr('clip-path', 'url(#avatarClip)');
-
-  // Entity's Link
-  const nodeLink = nodeEnter
-    .append('a')
-    .attr('class', ENTITY_LINK_CLASS)
-    .attr('display', d => (d.data.entity.link ? '' : 'none'))
-    .attr('xlink:href', d => d.data.entity.link)
-    .on('click', helpers.customOnClick(onEntityLinkClick, onClick, config));
-
-  iconLink({
-    svg: nodeLink,
-    x: nodeWidth - 20,
-    y: 8,
-  });
-
-  const nodeUpdate = nodeEnter.merge(node);
-
-  // Transition nodes to their new position.
-  nodeUpdate
-    .transition()
-    .duration(animationDuration)
-    .attr('transform', d => {
-      return `translate(${d.x},${d.y})`;
-    });
-
-  nodeUpdate.select('rect.box').attr('fill', backgroundColor).attr('stroke', borderColor);
-
-  // Transition exiting nodes to the parent's new position.
-  node
-    .exit()
-    .transition()
-    .duration(animationDuration)
-    .attr('transform', () => `translate(${parentNode.x},${parentNode.y})`)
-    .remove();
-
-  // Update the links
-  svg.selectAll('path.link').data(links, function (d) {
-    return d.id;
-  });
-
-  [
-    { cls: ENTITY_NAME_CLASS, max: maxNameWordLength },
-    { cls: ENTITY_TITLE_CLASS, max: maxTitleWordLength },
-    { cls: COUNTS_CLASS, max: maxCountWordLength },
-  ].forEach(({ cls, max }) => {
-    // Svg.selectAll(`text.unedited.${cls}`).call(wrapText);
-    svg.selectAll(`text.unedited.${cls}`).call(
-      helpers.wrapText,
-      nodeWidth - 12, // Adjust with some padding
-      // name should wrap at 3 lines max
-      cls === ENTITY_NAME_CLASS ? 3 : 2,
-      max,
-    );
-  });
-
-  // Add Tooltips
-  svg
-    .selectAll(`text.${ENTITY_NAME_CLASS}`)
-    .append('svg:title')
-    .text(d => (getName ? getName(d) : helpers.getName(d)));
-  svg
-    .selectAll(`text.${ENTITY_TITLE_CLASS}`)
-    .append('svg:title')
-    .text(d => (getTitle ? getTitle(d) : helpers.getTitle(d)));
-  svg
-    .selectAll(`text.${COUNTS_CLASS}`)
-    .append('svg:title')
-    .text(d => (getCount ? getCount(d) : helpers.getCount(d)));
-
-  // Render lines connecting nodes
-  renderLines(config);
-
-  // Stash the old positions for transition.
-  nodes.forEach(d => {
-    d.x0 = d.x;
-    d.y0 = d.y;
-  });
-
-  let nodeLeftX = -70;
-  let nodeRightX = 70;
-  let nodeY = 200;
-  nodes.forEach(d => {
-    nodeLeftX = d.x < nodeLeftX ? d.x : nodeLeftX;
-    nodeRightX = d.x > nodeRightX ? d.x : nodeRightX;
-    nodeY = d.y > nodeY ? d.y : nodeY;
-  });
-
-  config.nodeRightX = nodeRightX;
-  config.nodeY = nodeY;
-  config.nodeLeftX = nodeLeftX * -1;
-}