react-d3-tree-editor

React d3 editor is a d3 tree based editor, fully featured with context menu support. You can dynamicly edit, create and delete chiled nodes. nodes are based on icons you provide for styling.

Contents

• Demo
• Install
• Basic Usage
• Fully Featured Usage
• Props
• Context Menu
• License

Demo

• Find a demo on https://naihan.github.io/react-d3-tree-editor/

Install

npm install --save react-d3-tree-editor

Basic Usage

import React, { Component } from 'react'
import TreeEditor from 'react-d3-tree-editor'

export default class App extends Component {

  constructor() {
    
    //the actual tree data
    this.treeData = {
        name: 'Root Node',
        
        children: [{
            name: 'new node'
            
        }, {
            name: 'new node'
        }]
    }

    //the d3 tree config 
    this.treeConfig = {
      margin: {
        top: 20,
        right: 120,
        bottom: 20,
        left: 120
      },
      textMargin: 20,
      duration: 750,
      nodeSize: [40, 70]
    }
  }
  render() {
    return (
      return (
        <TreeEditor treeData={this.treeData}
            treeConfig={this.treeConfig}/>
        )
    )
  }
}

Fully Featured Usage

  class App extends React.Component {

      constructor(props) {
          super(props);
          
          this.treeRef = null;

          this.treeData = {
              //the actual data
              name: 'Root Node',
            
              children: [{
                  name: 'new node'
                  
              }, {
                  name: 'new node'
              }]
          }
          this.treeConfig = {
              //the d3 tree config 
              margin: {
                  top: 20,
                  right: 120,
                  bottom: 20,
                  left: 120
              },
              textMargin: 20,
              duration: 750,
              nodeSize: [40, 70]
          }
      }

      filterTextName = (d) => {
          //will be fired for each element once to decide which propery be used to display the name 
          return d.name;
      }


      contextMenuOpen = (d) => {
          console.log('contextMenuOpen');
          //will be fired when context menu opended
      }

      contextMenuClose = (d) => {
          console.log('contextMenuClose');
          //will be fired when context menu closed
      }

      selectImageLink = (d) => {
          //will be fired once for each element to decide the icon for that element
          return "http://mojedelo.webfactional.com/img/ikone/mdikona4.png"
      }

      getContextMenu = (e) => {
          //will be fired on each element for attaching a context menu
          return [{
                  title: 'Add Item',
                  action: () => {
                      this.treeRef.addNode(e, {
                          name: 'new node'
                      })
                  },
                  enabled: true
              },
              {
                  title: 'Delete Item',
                  action: (e) => {
                      this.treeRef.removeNode(e);
                  },
                  enabled: true
              },
              {
                  title: 'Delete Children',
                  action: () => {
                      this.treeRef.removeChildren(e);
                  },
                  enabled: true
              },
              {
                  title: 'Expand All',
                  action: () => {
                      this.treeRef.expandAllElements(e);
                      this.treeRef.update(e);
                  },
                  enabled: true
              },
              {
                  title: 'Collapse All',
                  action: () => {
                      this.treeRef.collapseAllElements(e);
                      this.treeRef.update(e);
                  },
                  enabled: true
              },

          ];
      }

      treeRenderedCallback = (d) => {
          console.log('treeRenderedCallback');
          //will be fired when tree finish render
      }
      render() {
          return (
          <TreeEditor treeData={this.treeData}
              treeConfig={this.treeConfig}
              onRef={ref => (this.treeRef=ref)}
              filterTextName={this.filterTextName}
              contextMenuOpen={this.contextMenuOpen}
              contextMenuClose={this.contextMenuClose}
              selectImageLink={this.selectImageLink}
              getContextMenu={this.getContextMenu}
              treeRenderedCallback={this.treeRenderedCallback}/>
          )
      }
  }

Props

|Prop name|Mandatory|DefaultValue|Description| |:-|:-:|:--------:|:-| |treeData|true|N/A|The actual d3.tree data. you can append any data to a node and it will be avalable. Each child node should be a part of node.children array. Nodes contain an 'id' attribute which you can either manage by yourself or let the tree manage it automaticly. |treeConfig| true|N/A| The d3 tree configuration |onRef|false|N/A|executed when the tree is first generated, the purpose of this callbact is to give the developer the tree referance for lated use |filterTextName|false|name|will be fired for each element once to decide which attribute be used to display the name of the element. If not implemented, the tree will assume that the 'name' attribute will be used |contextMenuOpen|false|N/A|will be fired when context menu opended |contextMenuClose|false|N/A|will be fired when context menu closed |selectImageLink|false|N/A|will be fired once for each element to decide the icon for that element.If not specified a default image will be presented. |getContextMenu|false|N/A|will be fired on each element for attaching a context menu, see Context Menu for details |treeRenderedCallback|false|N/A|Will be fired when tree finish render |treeNodeAction|false|N/A|will executed every time tree action occurred #Context Menu

Context menu is an object array that each object consist of the following properties

• title: the title of the option that will be displayed
• enabled: (bool) will it be enabled or not.
• action: the action that will be executed on the tree node

    [
      {
        title: 'Collapse All',
        action: () => {
            this.treeRef.collapseAllElements(e);
            this.treeRef.update(e);
        },
        enabled: true
      }
    ]

License

MIT © https://github.com/Naihan/react-d3-tree-editor