apextree 1.1.0 → 1.3.0

package/src/models/Graph.ts

@@ -1,284 +0,0 @@
-import { G, Path } from '@svgdotjs/svg.js';
-import { flextree, FlextreeNode } from 'd3-flextree';
-import { ExpandCollapseButtonSize, getEdge } from 'src/utils';
-import {
-  generateStyles,
-  getTooltip,
-  getTooltipStyles,
-  highlightToPath,
-  updateTooltip,
-} from 'src/utils';
-import { Paper } from 'src/models/Paper';
-import { DirectionConfig } from 'src/settings/DirectionConfig';
-import {
-  FontOptions,
-  NodeOptions,
-  TooltipOptions,
-  TreeDirection,
-  TreeOptions,
-} from 'src/settings/Options';
-import addSvg from 'src/icons/add-circle.svg';
-import minusSvg from 'src/icons/minus-circle.svg';
-
-export interface GraphPoint {
-  readonly x: number;
-  readonly y: number;
-}
-
-export interface Node {
-  readonly id: string;
-  readonly name: string;
-  readonly children: Array<Node>;
-  readonly expanded: boolean;
-  readonly options?: NodeOptions & TooltipOptions & FontOptions;
-}
-
-export interface TreeNode<N> extends FlextreeNode<N> {
-  hiddenChildren: Array<TreeNode<N>> | undefined;
-  edge?: Path;
-}
-
-export class Graph extends Paper {
-  public options: TreeOptions;
-  public rootNode: TreeNode<Node>;
-  public element: HTMLElement;
-  constructor(element: HTMLElement, options: TreeOptions) {
-    super(element, options.width, options.height, options.canvasStyle);
-    this.element = element;
-    this.options = options;
-  }
-
-  public construct(data: Node): void {
-    const { nodeWidth, nodeHeight, siblingSpacing, childrenSpacing } =
-      this.options;
-    const flexLayout = flextree({
-      nodeSize: () => {
-        return DirectionConfig[this.options.direction].nodeFlexSize({
-          nodeWidth,
-          nodeHeight,
-          siblingSpacing,
-          childrenSpacing,
-        });
-      },
-      spacing: 0,
-    });
-    const tree = flexLayout.hierarchy(data);
-    this.rootNode = flexLayout(tree) as any;
-  }
-
-  public renderNode(node: TreeNode<Node>, mainGroup: G) {
-    const options = this.options;
-    const {
-      nodeWidth,
-      nodeHeight,
-      nodeTemplate,
-      highlightOnHover,
-      borderRadius,
-      enableTooltip,
-      tooltipTemplate,
-      enableExpandCollapse,
-    } = options;
-    const {
-      tooltipId,
-      tooltipMaxWidth,
-      tooltipBGColor,
-      tooltipBorderColor,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      fontColor,
-      borderWidth,
-      borderStyle,
-      borderColor,
-      nodeBGColor,
-      nodeStyle,
-      nodeClassName,
-    } = { ...options, ...node.data.options };
-    const { x, y } = DirectionConfig[options.direction].swap(node);
-
-    const graphInstance = this;
-
-    const group = Paper.drawGroup(x, y, node.data.id, node.parent?.data.id);
-    const nodeContent = nodeTemplate(
-      node.data[options.contentKey as keyof Node],
-    );
-    const object = Paper.drawTemplate(nodeContent, { nodeWidth, nodeHeight });
-    const groupStyle = generateStyles({
-      fontSize,
-      fontWeight,
-      fontFamily,
-      fontColor,
-    });
-    const borderStyles = generateStyles({
-      borderColor,
-      borderStyle,
-      borderWidth: `${borderWidth}px`,
-      borderRadius,
-      backgroundColor: nodeBGColor,
-    });
-    object.attr('style', borderStyles.concat(nodeStyle));
-    object.attr('class', nodeClassName);
-    group.attr('style', groupStyle);
-    group.add(object);
-    const nodes = this.rootNode.nodes;
-
-    if (highlightOnHover) {
-      group.on('mouseover', function () {
-        const self = this.node.dataset.self;
-        const selfNode = nodes.find((n) => n.data.id === self);
-        selfNode && highlightToPath(nodes, selfNode, true, options);
-      });
-      group.on('mouseout', function () {
-        const self = this.node.dataset.self;
-        const selfNode = nodes.find((n) => n.data.id === self);
-        selfNode && highlightToPath(nodes, selfNode, false, options);
-      });
-    }
-
-    if (enableTooltip) {
-      const tooltipContent = tooltipTemplate
-        ? tooltipTemplate(node.data[this.options.contentKey as keyof Node])
-        : nodeContent;
-      group.on('mousemove', function (e: MouseEvent) {
-        const styles = getTooltipStyles(
-          e.pageX,
-          e.pageY,
-          tooltipMaxWidth,
-          tooltipBorderColor,
-          tooltipBGColor,
-          !tooltipTemplate,
-        );
-        updateTooltip(tooltipId, styles.join(' '), tooltipContent);
-      });
-      group.on('mouseout', function (e: MouseEvent) {
-        if ((e.relatedTarget as HTMLElement).tagName === 'svg') {
-          updateTooltip(tooltipId);
-        }
-      });
-    }
-    mainGroup.add(group);
-
-    if (!node.children && !node.hiddenChildren) {
-      return;
-    }
-
-    if (enableExpandCollapse) {
-      //add expand/collapse buttons
-      const expandButtonRadius = ExpandCollapseButtonSize / 2;
-      const buttonGroup = Paper.drawGroup(x + nodeWidth / 2 - expandButtonRadius, y + nodeHeight - expandButtonRadius, node.data.id);
-      const buttonClickArea = Paper.drawCircle({cx: expandButtonRadius, cy: expandButtonRadius, r: expandButtonRadius, style: 'fill: #FFF; cursor: pointer;'});
-      buttonGroup.data('expanded', false);
-      buttonGroup.add(buttonClickArea);
-      if (node.hiddenChildren) {
-        buttonGroup.add(addSvg as any);
-      } else {
-        buttonGroup.add(minusSvg as any);
-      }
-      buttonGroup.on('click', function() {
-        if (node.hiddenChildren) {
-          graphInstance.expand(this.node.dataset.self);
-        } else {
-          graphInstance.collapse(this.node.dataset.self);
-        }
-      });
-      mainGroup.add(buttonGroup);
-    }
-  }
-
-  public renderEdge(node: TreeNode<Node>, group: G) {
-    const { nodeWidth, nodeHeight } = this.options;
-    const edge = getEdge(node, nodeWidth, nodeHeight, this.options.direction);
-    if (!edge) return;
-    const path = Paper.drawPath(edge, {
-      id: `${node.data.id}-${node.parent?.data.id}`,
-    });
-    node.edge = path;
-    group.add(path);
-  }
-
-  public collapse(nodeId: string) {
-    const nodes = this.rootNode.descendants();
-    const node = nodes.find((n: TreeNode<Node>) => n.data.id === nodeId);
-    if (node?.children) {
-      node.hiddenChildren = node.children;
-      node.hiddenChildren.forEach((child: any) => this.collapse(child));
-      node.children = undefined;
-      this.render({keepOldPosition: true});
-    }
-  }
-
-  public expand(nodeId: string) {
-    const nodes = this.rootNode.descendants();
-    const node = nodes.find((n: any) => n.data.id === nodeId);
-    if (node?.hiddenChildren) {
-      node.children = node.hiddenChildren;
-      node.children.forEach((child: any) => this.expand(child));
-      node.hiddenChildren = undefined;
-      this.render({keepOldPosition: true});
-    }
-  }
-
-  public changeLayout(direction: TreeDirection = 'top') {
-    this.options = { ...this.options, direction };
-    this.render({keepOldPosition: false});
-  }
-
-  public fitScreen() {
-    const { childrenSpacing, siblingSpacing } = this.options;
-    const { viewBoxDimensions } = DirectionConfig[this.options.direction];
-    const {
-      x,
-      y,
-      width: vWidth,
-      height: vHeight,
-    } = viewBoxDimensions({
-      rootNode: this.rootNode,
-      childrenSpacing,
-      siblingSpacing,
-    });
-    this.updateViewBox(x, y, vWidth, vHeight);
-  }
-
-  public render({keepOldPosition = false} = {}): void {
-    const oldViewbox = this.canvas.viewbox();
-    this.clear();
-    const {
-      containerClassName,
-      enableTooltip,
-      tooltipId,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      fontColor,
-    } = this.options;
-    const globalStyle = generateStyles({
-      fontSize,
-      fontWeight,
-      fontFamily,
-      fontColor,
-    });
-    const mainGroup = Paper.drawGroup(0, 0, containerClassName);
-    mainGroup.attr('style', globalStyle);
-    mainGroup.id(containerClassName);
-
-    const nodes = this.rootNode.nodes;
-    nodes.forEach((node: any) => {
-      this.renderEdge(node, mainGroup);
-    });
-    nodes.forEach((node: any) => {
-      this.renderNode(node, mainGroup);
-    });
-    this.add(mainGroup);
-    this.fitScreen();
-
-    if (keepOldPosition) {
-      this.updateViewBox(oldViewbox.x, oldViewbox.y, oldViewbox.width, oldViewbox.height);
-    }
-
-    if (enableTooltip) {
-      const tooltipElement = getTooltip(tooltipId);
-      const body = document.body || document.getElementsByTagName('body')[0];
-      body.append(tooltipElement);
-    }
-  }
-}

package/src/models/Paper.ts

@@ -1,117 +0,0 @@
-import { Circle } from '@svgdotjs/svg.js';
-import { CircleAttr } from '@svgdotjs/svg.js';
-import {Element, ForeignObject, G, Path, Rect, Svg, SVG, Text, TextAttr} from '@svgdotjs/svg.js';
-import '@svgdotjs/svg.panzoom.js';
-import {DefaultOptions, NodeOptions} from 'src/settings/Options';
-
-export class Paper {
-  private readonly width: number;
-  private readonly height: number;
-  public canvas: Svg;
-  constructor(element: HTMLElement, width: number, height: number, canvasStyle: string) {
-    this.width = width;
-    this.height = height;
-    this.canvas = SVG()
-      .addTo(element)
-      .size(width, height)
-      .viewbox(`0 0 ${width} ${height}`)
-      .panZoom({zoomFactor: 0.2, zoomMin: 0.1})
-      .attr({style: canvasStyle});
-  }
-
-  public add(element: Element) {
-    this.canvas.add(element);
-  }
-
-  public resetViewBox(): void {
-    this.canvas.viewbox(`0 0 ${this.width} ${this.height}`);
-  }
-
-  public updateViewBox(x: number, y: number, width: number, height: number): void {
-    this.canvas.viewbox(`${x} ${y} ${width} ${height}`);
-  }
-
-  public zoom(zoomFactor: number): void {
-    const newZoomVal = this.canvas.zoom() + zoomFactor;
-    if (newZoomVal >= 0.1) {
-      this.canvas.zoom(newZoomVal);
-    }
-  }
-
-  public get(selector: string): Element {
-    return this.canvas.findOne(selector) as any;
-  }
-
-  public clear() {
-    this.canvas.clear().viewbox(`0 0 ${this.width} ${this.height}`);
-  }
-
-  static drawRect({
-    x1 = undefined,
-    y1 = undefined,
-    width = 0,
-    height = 0,
-    radius = 0,
-    color = '#fefefe',
-    opacity = 1,
-  } = {}): Rect {
-    const rect = new Rect();
-    rect.attr({
-      x: x1 ?? undefined,
-      y: y1 ?? undefined,
-      width,
-      height,
-      rx: radius,
-      ry: radius,
-      opacity,
-    });
-    rect.fill(color);
-    return rect;
-  }
-
-  static drawCircle(attributes: CircleAttr = {}): Circle {
-    const circle = new Circle();
-    circle.attr(attributes);
-    return circle;
-  }
-
-  static drawText(text: string = '', {x, y, dx, dy}: Partial<TextAttr>): Text {
-    const textSvg = new Text();
-    textSvg.font({fill: '#f06'});
-    textSvg.tspan(text);
-
-    if (x !== undefined && y !== undefined) {
-      textSvg.move(x, y);
-    }
-
-    if (dx !== undefined && dy !== undefined) {
-      textSvg.attr({dx, dy});
-    }
-
-    return textSvg;
-  }
-
-  static drawTemplate(template: any, {nodeWidth, nodeHeight}: Partial<NodeOptions> = {}): ForeignObject {
-    const object = new ForeignObject({
-      width: nodeWidth,
-      height: nodeHeight,
-    });
-    const element = SVG(template);
-    element.node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
-    object.add(element);
-    return object;
-  }
-
-  static drawGroup(x: number = 0, y: number = 0, id?: string, parent?: string): G {
-    const group = new G();
-    group.attr({transform: `translate(${x}, ${y})`, 'data-self': id, 'data-parent': parent});
-    return group;
-  }
-
-  static drawPath(pathString: string, {id = '', borderColor = DefaultOptions.borderColor} = {}): Path {
-    const path = new Path({d: pathString});
-    path.id(id);
-    path.fill('none').stroke({color: borderColor, width: 1});
-    return path;
-  }
-}

package/src/models/Toolbar.ts

@@ -1,71 +0,0 @@
-import ZoomInIcon from 'src/icons/zoom-in-icon.svg';
-import ZoomOutIcon from 'src/icons/zoom-out-icon.svg';
-import FitScreenIcon from 'src/icons/fit-screen-icon.svg';
-import ExportIcon from 'src/icons/export-icon.svg';
-import {Export} from 'src/models/Export';
-import {Graph} from 'src/models/index';
-
-export enum ToolbarItem {
-  ZoomIn = 'zoom-in',
-  ZoomOut = 'zoom-out',
-  FitScreen = 'fit-screen',
-  Export = 'export',
-}
-
-const ToolBarIcons = {
-  [ToolbarItem.ZoomIn]: ZoomInIcon,
-  [ToolbarItem.ZoomOut]: ZoomOutIcon,
-  [ToolbarItem.FitScreen]: FitScreenIcon,
-  [ToolbarItem.Export]: ExportIcon,
-};
-
-const ZoomChangeFactor = 0.1;
-
-export class Toolbar {
-  private readonly export: Export;
-  constructor(
-    public element: HTMLElement | null,
-    public graph: Graph,
-  ) {
-    this.export = new Export(graph);
-  }
-
-  public render(): void {
-    const container = document.createElement('div');
-    container.id = 'toolbar';
-    container.setAttribute('style', 'display: flex;gap: 5px;position: absolute;right: 20px;top: 20px;');
-
-    const btnZoomIn = this.createToolbarItem(ToolbarItem.ZoomIn, ToolBarIcons[ToolbarItem.ZoomIn]);
-    const btnZoomOut = this.createToolbarItem(ToolbarItem.ZoomOut, ToolBarIcons[ToolbarItem.ZoomOut]);
-    const btnFitScreen = this.createToolbarItem(ToolbarItem.FitScreen, ToolBarIcons[ToolbarItem.FitScreen]);
-    const btnExport = this.createToolbarItem(ToolbarItem.Export, ToolBarIcons[ToolbarItem.Export]);
-
-    btnZoomIn.addEventListener('click', () => {
-      this.graph.zoom(ZoomChangeFactor);
-    });
-    btnZoomOut.addEventListener('click', () => {
-      this.graph.zoom(-ZoomChangeFactor);
-    });
-    btnFitScreen.addEventListener('click', () => {
-      this.graph.fitScreen();
-    });
-    btnExport.addEventListener('click', () => {
-      this.export.exportToSVG();
-    });
-
-    container.append(btnZoomIn, btnZoomOut, btnFitScreen, btnExport);
-
-    this.element?.append(container);
-  }
-
-  public createToolbarItem(itemName: ToolbarItem, icon: string): HTMLElement {
-    const itemContainer = document.createElement('div');
-    itemContainer.id = itemName;
-    itemContainer.innerHTML = icon;
-    itemContainer.setAttribute(
-      'style',
-      'width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border: 1px solid #BCBCBC;background-color: #FFFFFF;cursor: pointer;',
-    );
-    return itemContainer;
-  }
-}

package/src/models/index.ts

@@ -1,2 +0,0 @@
-export {Graph, GraphPoint, Node, TreeNode} from './Graph';
-export {Toolbar} from './Toolbar';

package/src/settings/DirectionConfig.ts

@@ -1,227 +0,0 @@
-import {GraphPoint} from 'src/models';
-import {Node, TreeNode} from 'src/models/Graph';
-
-/* Horizontal diagonal generation algorithm - https://observablehq.com/@bumbeishvili/curved-edges-compact-horizontal */
-export const curvedEdgesHorizontal = (s: GraphPoint, t: GraphPoint, m: GraphPoint): string => {
-  // Define source and target x,y coordinates
-  const x = s.x;
-  const y = s.y;
-  const ex = t.x;
-  const ey = t.y;
-
-  const mx = m?.x ?? x;
-  const my = m?.y ?? y;
-
-  // Values in case of top reversed and left reversed diagonals
-  const xrvs = ex - x < 0 ? -1 : 1;
-  const yrvs = ey - y < 0 ? -1 : 1;
-
-  // Define preferred curve radius
-  const rdef = 35;
-
-  // Reduce curve radius, if source-target x space is smaller
-  let r = Math.abs(ex - x) / 2 < rdef ? Math.abs(ex - x) / 2 : rdef;
-
-  // Further reduce curve radius, is y space is more small
-  r = Math.abs(ey - y) / 2 < r ? Math.abs(ey - y) / 2 : r;
-
-  // Defin width and height of link, excluding radius
-  // const h = Math.abs(ey - y) / 2 - r;
-  const w = Math.abs(ex - x) / 2 - r;
-
-  // Build and return custom arc command
-  const pathArray = [
-    `M ${mx} ${my}`,
-    `L ${mx} ${y}`,
-    `L ${x} ${y}`,
-    `L ${x + w * xrvs} ${y}`,
-    `C ${x + w * xrvs + r * xrvs} ${y} ${x + w * xrvs + r * xrvs} ${y} ${x + w * xrvs + r * xrvs} ${y + r * yrvs}`,
-    `L ${x + w * xrvs + r * xrvs} ${ey - r * yrvs}`,
-    `C ${x + w * xrvs + r * xrvs} ${ey} ${x + w * xrvs + r * xrvs} ${ey} ${ex - w * xrvs} ${ey}`,
-    `L ${ex} ${ey}`,
-  ];
-  return pathArray.join(' ');
-};
-/* Vertical diagonal generation algorithm - https://observablehq.com/@bumbeishvili/curved-edges-compacty-vertical */
-export const curvedEdgesVertical = (s: GraphPoint, t: GraphPoint, m: GraphPoint, offsets = {sy: 0}): string => {
-  const x = s.x;
-  let y = s.y;
-
-  const ex = t.x;
-  const ey = t.y;
-
-  const mx = m?.x ?? x;
-  const my = m?.y ?? y;
-
-  const xrvs = ex - x < 0 ? -1 : 1;
-  const yrvs = ey - y < 0 ? -1 : 1;
-
-  y += offsets.sy;
-
-  const rdef = 35;
-  let r = Math.abs(ex - x) / 2 < rdef ? Math.abs(ex - x) / 2 : rdef;
-
-  r = Math.abs(ey - y) / 2 < r ? Math.abs(ey - y) / 2 : r;
-
-  const h = Math.abs(ey - y) / 2 - r;
-  const w = Math.abs(ex - x) - r * 2;
-  //w=0;
-  const pathArray = [
-    `M ${mx} ${my}`,
-    `L ${x} ${my}`,
-    `L ${x} ${y}`,
-    `L ${x} ${y + h * yrvs}`,
-    `C  ${x} ${y + h * yrvs + r * yrvs} ${x} ${y + h * yrvs + r * yrvs} ${x + r * xrvs} ${y + h * yrvs + r * yrvs}`,
-    `L ${x + w * xrvs + r * xrvs} ${y + h * yrvs + r * yrvs}`,
-    `C  ${ex} ${y + h * yrvs + r * yrvs} ${ex} ${y + h * yrvs + r * yrvs} ${ex} ${ey - h * yrvs}`,
-    `L ${ex} ${ey}`,
-  ];
-  return pathArray.join(' ');
-};
-export interface DirectionConfigProperties {
-  readonly containerX: (params: Partial<ConfigParams>) => number;
-  readonly containerY: (params: Partial<ConfigParams>) => number;
-  readonly edgeX: (params: Partial<ConfigParams>) => number;
-  readonly edgeY: (params: Partial<ConfigParams>) => number;
-  readonly edgeMidX: (params: Partial<ConfigParams>) => number;
-  readonly edgeMidY: (params: Partial<ConfigParams>) => number;
-  readonly edgeParentX: (params: Partial<ConfigParams>) => number;
-  readonly edgeParentY: (params: Partial<ConfigParams>) => number;
-  readonly nodeFlexSize: (params: Partial<ConfigParams>) => [number, number];
-  readonly calculateEdge: (s: GraphPoint, t: GraphPoint, m: GraphPoint, offsets: any) => string;
-  readonly swap: (node: TreeNode<Node>) => {x: number; y: number};
-  readonly viewBoxDimensions: ({
-    rootNode,
-    childrenSpacing,
-    siblingSpacing,
-  }: {
-    rootNode: TreeNode<Node>;
-    childrenSpacing: number;
-    siblingSpacing: number;
-  }) => {x: number; y: number; width: number; height: number};
-}
-
-interface ConfigParams {
-  readonly node: any;
-  readonly parent: any;
-  readonly width: number;
-  readonly height: number;
-  readonly nodeWidth: number;
-  readonly nodeHeight: number;
-  readonly siblingSpacing: number;
-  readonly childrenSpacing: number;
-  readonly x: number;
-  readonly y: number;
-}
-
-export const DirectionConfig: Record<string, DirectionConfigProperties> = {
-  top: {
-    containerX: ({width}: ConfigParams) => width / 2,
-    containerY: () => 0,
-    edgeX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth / 2,
-    edgeY: ({node}: ConfigParams) => node.y,
-    edgeMidX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth / 2,
-    edgeMidY: ({node}: ConfigParams) => node.y,
-    edgeParentX: ({parent, nodeWidth}: ConfigParams) => parent.x + nodeWidth / 2,
-    edgeParentY: ({parent, nodeHeight}: ConfigParams) => parent.y + nodeHeight,
-    nodeFlexSize: ({nodeWidth, nodeHeight, siblingSpacing, childrenSpacing}: ConfigParams): [number, number] => {
-      return [nodeWidth + siblingSpacing, nodeHeight + childrenSpacing];
-    },
-    calculateEdge: curvedEdgesVertical,
-    swap: (node: TreeNode<Node>) => ({
-      x: node.left,
-      y: node.top,
-    }),
-    viewBoxDimensions: ({rootNode, childrenSpacing, siblingSpacing}) => {
-      const {left, top, right, bottom} = rootNode.extents;
-      const width = Math.abs(left) + Math.abs(right);
-      const height = Math.abs(top) + Math.abs(bottom);
-      const x = Math.abs(left) + siblingSpacing / 2;
-      const y = (rootNode.ySize - childrenSpacing) / 2;
-      return {x: -x, y: -y, width, height};
-    },
-  },
-  bottom: {
-    containerX: ({width}: ConfigParams) => width / 2,
-    containerY: ({height, nodeHeight}: ConfigParams) => height - nodeHeight - 10,
-    edgeX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth / 2,
-    edgeY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight,
-    edgeMidX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth / 2,
-    edgeMidY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight,
-    edgeParentX: ({parent, nodeWidth}: ConfigParams) => parent.x + nodeWidth / 2,
-    edgeParentY: ({parent}: ConfigParams) => parent.y,
-    nodeFlexSize: ({nodeWidth, nodeHeight, siblingSpacing, childrenSpacing}: ConfigParams): [number, number] => {
-      return [nodeWidth + siblingSpacing, nodeHeight + childrenSpacing];
-    },
-    calculateEdge: curvedEdgesVertical,
-    swap: (node: TreeNode<Node>) =>
-      ({
-        ...node,
-        y: -node.y,
-      }) as TreeNode<Node>,
-    viewBoxDimensions: ({rootNode, childrenSpacing, siblingSpacing}) => {
-      const {left, top, right, bottom} = rootNode.extents;
-      const width = Math.abs(left) + Math.abs(right);
-      const height = Math.abs(top) + Math.abs(bottom);
-      const x = Math.abs(left) - (rootNode.xSize - siblingSpacing) / 2;
-      const y = height - rootNode.ySize + childrenSpacing / 2;
-      return {x: -x, y: -y, width, height};
-    },
-  },
-  left: {
-    containerX: () => 10,
-    containerY: ({height}: ConfigParams) => height / 2,
-    edgeX: ({node}: ConfigParams) => node.x,
-    edgeY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight / 2,
-    edgeMidX: ({node}: ConfigParams) => node.x,
-    edgeMidY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight / 2,
-    edgeParentX: ({parent, nodeWidth}: ConfigParams) => parent.x + nodeWidth,
-    edgeParentY: ({parent, nodeHeight}: ConfigParams) => parent.y + nodeHeight / 2,
-    nodeFlexSize: ({nodeWidth, nodeHeight, siblingSpacing, childrenSpacing}: ConfigParams) => {
-      return [nodeHeight + siblingSpacing, nodeWidth + childrenSpacing];
-    },
-    calculateEdge: curvedEdgesHorizontal,
-    swap: (node: TreeNode<Node>) =>
-      ({
-        ...node,
-        x: node.y,
-        y: node.x,
-      }) as TreeNode<Node>,
-    viewBoxDimensions: ({rootNode, childrenSpacing, siblingSpacing}) => {
-      const {left, top, right, bottom} = rootNode.extents;
-      const width = Math.abs(top) + Math.abs(bottom);
-      const height = Math.abs(left) + Math.abs(right);
-      const x = Math.abs(top) + childrenSpacing / 2;
-      const y = Math.abs(left) - siblingSpacing;
-      return {x: -x, y: -y, width, height};
-    },
-  },
-  right: {
-    containerX: ({width, nodeWidth}: ConfigParams) => width - nodeWidth - 10,
-    containerY: ({height}: ConfigParams) => height / 2,
-    edgeX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth,
-    edgeY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight / 2,
-    edgeMidX: ({node, nodeWidth}: ConfigParams) => node.x + nodeWidth,
-    edgeMidY: ({node, nodeHeight}: ConfigParams) => node.y + nodeHeight / 2,
-    edgeParentX: ({parent}: ConfigParams) => parent.x,
-    edgeParentY: ({parent, nodeHeight}: ConfigParams) => parent.y + nodeHeight / 2,
-    nodeFlexSize: ({nodeWidth, nodeHeight, siblingSpacing, childrenSpacing}: ConfigParams) => {
-      return [nodeHeight + siblingSpacing, nodeWidth + childrenSpacing];
-    },
-    calculateEdge: curvedEdgesHorizontal,
-    swap: (node: TreeNode<Node>) =>
-      ({
-        ...node,
-        x: -node.y,
-        y: node.x,
-      }) as TreeNode<Node>,
-    viewBoxDimensions: ({rootNode, siblingSpacing, childrenSpacing}) => {
-      const {left, top, right, bottom} = rootNode.extents;
-      const width = Math.abs(top) + Math.abs(bottom);
-      const height = Math.abs(left) + Math.abs(right);
-      const x = width - rootNode.ySize + childrenSpacing / 2;
-      const y = Math.abs(left) - siblingSpacing;
-      return {x: -x, y: -y, width, height};
-    },
-  },
-};