apextree 1.1.0 → 1.3.0

package/src/settings/Options.ts

@@ -1,98 +0,0 @@
-export type TreeDirection = 'left' | 'top' | 'right' | 'bottom';
-
-export interface NodeOptions {
-  readonly nodeWidth: number;
-  readonly nodeHeight: number;
-  readonly nodeBGColor: string;
-  readonly nodeBGColorHover: string;
-  readonly nodeStyle: string;
-  readonly nodeClassName: string;
-  readonly nodeTemplate: (content: any) => any;
-  readonly borderRadius: string;
-  readonly borderWidth: number;
-  readonly borderColor: string;
-  readonly borderStyle: string;
-  readonly borderColorHover: string;
-  readonly enableExpandCollapse: boolean;
-}
-
-export interface TooltipOptions {
-  readonly enableTooltip: boolean;
-  readonly tooltipId: string;
-  readonly tooltipTemplate?: (content: any) => any;
-  readonly tooltipMaxWidth: number;
-  readonly tooltipBorderColor: string;
-  readonly tooltipBGColor: string;
-}
-
-export interface FontOptions {
-  readonly fontSize: string;
-  readonly fontFamily: string;
-  readonly fontWeight: number;
-  readonly fontColor: string;
-}
-
-export interface EdgeOptions {
-  readonly edgeColor: string;
-  readonly edgeColorHover: string;
-}
-
-export interface CommonOptions {
-  readonly width: number;
-  readonly height: number;
-  readonly direction: TreeDirection;
-  readonly contentKey: string;
-  readonly siblingSpacing: number;
-  readonly childrenSpacing: number;
-  readonly highlightOnHover: boolean;
-  readonly containerClassName: string;
-  readonly canvasStyle: string;
-  readonly enableToolbar: boolean;
-}
-
-export type TreeOptions = CommonOptions &
-  NodeOptions &
-  TooltipOptions &
-  FontOptions &
-  EdgeOptions;
-
-const defaultNodeTemplate = (content: string) => {
-  return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
-};
-
-export const DefaultOptions: TreeOptions = {
-  width: 400,
-  height: 400,
-  contentKey: 'name',
-  nodeWidth: 50,
-  nodeHeight: 30,
-  nodeTemplate: defaultNodeTemplate,
-  nodeBGColor: '#FFFFFF',
-  nodeBGColorHover: '#FFFFFF',
-  nodeStyle: '',
-  nodeClassName: 'apextree-node',
-  borderWidth: 2,
-  borderStyle: 'solid',
-  borderRadius: '5px',
-  borderColor: '#BCBCBC',
-  borderColorHover: '#5C6BC0',
-  enableExpandCollapse: false,
-  siblingSpacing: 50,
-  childrenSpacing: 50,
-  direction: 'top',
-  highlightOnHover: true,
-  containerClassName: 'root',
-  enableTooltip: false,
-  tooltipId: 'apextree-tooltip-container',
-  tooltipMaxWidth: 100,
-  tooltipBorderColor: '#BCBCBC',
-  tooltipBGColor: '#FFFFFF',
-  fontSize: '14px',
-  fontFamily: '',
-  fontWeight: 400,
-  fontColor: '#000000',
-  canvasStyle: '',
-  enableToolbar: false,
-  edgeColor: '#BCBCBC',
-  edgeColorHover: '#5C6BC0',
-};

package/src/utils/EdgeUtils.ts

@@ -1,30 +0,0 @@
-import {Node, TreeNode} from 'src/models/Graph';
-import {DirectionConfig} from 'src/settings/DirectionConfig';
-
-export const getEdge = (
-  node: TreeNode<Node>,
-  nodeWidth: number,
-  nodeHeight: number,
-  graphDirection: string,
-): string | null => {
-  if (!node || !node.parent) return null;
-  const {edgeX, edgeY, edgeParentX, edgeParentY, edgeMidX, edgeMidY, calculateEdge, swap} =
-    DirectionConfig[graphDirection];
-  const newNode = swap(node);
-  const newParent = swap(node.parent);
-  const child = {
-    x: edgeX({node: newNode, nodeWidth, nodeHeight}),
-    y: edgeY({node: newNode, nodeWidth, nodeHeight}),
-  };
-
-  const parent = {
-    x: edgeParentX({parent: newParent, nodeWidth, nodeHeight}),
-    y: edgeParentY({parent: newParent, nodeWidth, nodeHeight}),
-  };
-
-  const mid = {
-    x: edgeMidX({node: newNode, nodeWidth, nodeHeight}),
-    y: edgeMidY({node: newNode, nodeWidth, nodeHeight}),
-  };
-  return calculateEdge(child, parent, mid, {sy: 0});
-};

package/src/utils/GraphUtils.ts

@@ -1,135 +0,0 @@
-import { Node, TreeNode } from 'src/models/Graph';
-import { FontOptions, TreeOptions } from 'src/settings/Options';
-
-export const setAttributes = (
-  element: Element | null,
-  attrs: Record<string, any> = {},
-) => {
-  for (const key in attrs) {
-    element?.setAttribute(key, attrs[key]);
-  }
-};
-
-export const ExpandCollapseButtonSize = 14;
-
-export const highlightToPath = (
-  nodes: ReadonlyArray<TreeNode<Node>>,
-  selfNode: TreeNode<Node>,
-  isHighlighted: boolean,
-  options: TreeOptions,
-): void => {
-  const nodeOptions = selfNode?.data.options;
-  let borderWidth = nodeOptions?.borderWidth || options.borderWidth;
-  let borderColor = nodeOptions?.borderColor || options.borderColor;
-  let backgroundColor = nodeOptions?.nodeBGColor || options.nodeBGColor;
-
-  if (isHighlighted) {
-    // borderWidth = borderWidth + 1;
-    borderColor = nodeOptions?.borderColorHover || options.borderColorHover;
-    backgroundColor = nodeOptions?.nodeBGColorHover || options.nodeBGColorHover;
-  }
-  const selfContentElement: HTMLElement | null = document.querySelector(
-    `[data-self='${selfNode.data.id}'] foreignObject`,
-  );
-  if (selfContentElement) {
-    selfContentElement.style.borderWidth = `${borderWidth}px`;
-    selfContentElement.style.borderColor = borderColor;
-    selfContentElement.style.backgroundColor = backgroundColor;
-  }
-
-  if (selfNode.parent) {
-    const edge = document.getElementById(
-      `${selfNode.data.id}-${selfNode.parent?.data.id}`,
-    );
-    if (isHighlighted) {
-      setAttributes(edge, {
-        'stroke-width': borderWidth + 1,
-        stroke: options.edgeColorHover,
-      });
-    } else {
-      setAttributes(edge, {
-        'stroke-width': borderWidth,
-        stroke: options.edgeColor,
-      });
-    }
-
-    selfNode.parent &&
-      highlightToPath(nodes, selfNode.parent, isHighlighted, options);
-  }
-};
-
-export const getTooltipStyles = (
-  x: number,
-  y: number,
-  maxWidth: number,
-  borderColor: string,
-  bgColor: string,
-  addPadding: boolean,
-): ReadonlyArray<string> => {
-  const styles = [
-    'position: absolute;',
-    `left: ${x + 20}px;`,
-    `top: ${y + 20}px;`,
-    `border: 1px solid ${borderColor};`,
-    `border-radius: 5px;`,
-    `max-width: ${maxWidth}px;`,
-    `background-color: ${bgColor};`,
-  ];
-  if (addPadding) {
-    styles.push('padding: 10px;');
-  }
-  return styles;
-};
-
-export const generateStyles = (
-  styleObject: Record<string, number | string> = {},
-): string => {
-  const styles = [];
-  for (const styleKey in styleObject) {
-    let key = styleKey;
-    if (styleKey === 'fontColor') {
-      key = 'color';
-    }
-    const styleString = `${camelToKebabCase(key)}: ${
-      styleObject[styleKey as keyof FontOptions]
-    };`;
-    styles.push(styleString);
-  }
-  return styles.join(' ');
-};
-
-export const getTooltip = (
-  tooltipId: string = 'apextree-tooltip-container',
-) => {
-  const tooltipElement =
-    document.getElementById(tooltipId) || document.createElement('div');
-  tooltipElement.id = tooltipId;
-  return tooltipElement;
-};
-
-export const updateTooltip = (
-  id: string = '',
-  styles?: string | undefined,
-  content: string = '',
-) => {
-  const tooltipElement = document.getElementById(id);
-  if (styles) {
-    tooltipElement?.setAttribute('style', styles);
-  } else {
-    tooltipElement?.removeAttribute('style');
-  }
-
-  if (
-    tooltipElement?.innerHTML.replaceAll("'", '"') !==
-    content.replaceAll("'", '"')
-  ) {
-    tooltipElement && (tooltipElement.innerHTML = content);
-  }
-};
-
-export const camelToKebabCase = (str: string): string => {
-  return str.replace(
-    /[A-Z]+(?![a-z])|[A-Z]/g,
-    ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
-  );
-};

package/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "rootDir": ".",
-    "module": "commonjs",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "target": "es6",
-    "esModuleInterop": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "lib": [
-      "es2021",
-      "dom"
-    ]
-  },
-  "include": ["src/**/*"],
-  "exclude": [
-    "node_modules",
-    "dist",
-  ],
-  "ts-node": {
-    "esm": true,
-    "experimentalSpecifierResolution": "node"
-  },
-  "files": ["globals.d.ts"]
-}

package/webpack.common.ts

@@ -1,68 +0,0 @@
-import path from 'path';
-import {Compiler, Configuration, WebpackPluginInstance} from 'webpack';
-
-export const ROOT = path.resolve(__dirname, '.');
-
-interface CommonConfig extends Configuration {
-  plugins: (((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance)[];
-}
-
-export const commonConfig: CommonConfig = {
-  entry: [path.resolve(__dirname, 'src/ApexTree.ts')],
-  output: {
-    clean: true,
-    filename: 'ApexTree.js',
-    path: path.resolve(__dirname, 'dist'),
-    library: 'ApexTree',
-    libraryTarget: 'umd',
-    libraryExport: 'ApexTree',
-  },
-  module: {
-    rules: [
-      {
-        // Include ts, tsx, js, and jsx files.
-        test: /\.(ts|js)?$/,
-        include: [ROOT],
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              // Rely on babel loading it's `babel.config.js` file. If we need to edit it for
-              // Hot Module Reloading support so be it.
-              // https://gist.github.com/rmoorman/94eeed830942758e218d92f15ce58d88
-              presets: [['@babel/preset-env', {targets: 'defaults'}]],
-              plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
-            },
-          },
-        ],
-      },
-      {
-        test: /\.ts?$/,
-        include: [ROOT],
-        exclude: [/node_modules/],
-        use: [
-          'babel-loader',
-          {
-            loader: 'ts-loader',
-            options: {
-              configFile: 'tsconfig.json',
-              transpileOnly: true,
-              experimentalWatchApi: true,
-            },
-          },
-        ],
-      },
-      {test: /\.(less)$/, loader: 'asset/resource'},
-      {
-        test: /\.svg$/,
-        loader: 'raw-loader',
-      },
-    ],
-  },
-  resolve: {
-    modules: [__dirname, 'src', 'node_modules'],
-    extensions: ['.ts', '.js'],
-  },
-  plugins: [],
-};

package/webpack.config.ts

@@ -1,7 +0,0 @@
-import {Configuration} from 'webpack';
-
-export default (argv: any, env: any = {mode: 'production'}): Configuration => {
-  const mode = argv?.mode || env.mode;
-  const config: Configuration = require(`./webpack.${mode === 'development' ? 'dev' : 'prod'}`).default;
-  return config;
-};

package/webpack.dev.ts

@@ -1,12 +0,0 @@
-import {Configuration} from 'webpack';
-import {commonConfig} from './webpack.common';
-
-const config: Configuration = {
-  ...commonConfig,
-  mode: 'development',
-  optimization: {
-    minimize: false
-  },
-};
-
-export default config;

package/webpack.prod.ts

@@ -1,9 +0,0 @@
-import {Configuration} from 'webpack';
-import {commonConfig} from './webpack.common';
-
-const config: Configuration = {
-  ...commonConfig,
-  mode: 'production',
-};
-
-export default config;