JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<input type="hidden" value="formation 1" id="getnameformation"/>
<div id="tree" ></div>
<div id="items">
  <div data-id="4" class="item">
    Module 1
  </div>
  <div data-id="5" class="item">
    Module 2
  </div>
  <div data-id="6" class="item">
    Module 3
  </div>
  <div data-id="7" class="item">
    Cours 1

  </div>
  <div data-id="8" class="item">
    Cours 2

  </div>
  <div data-id="9" class="item">
    Cours 3

  </div>
  <div data-id="10" class="item">
    Chaiptre 1

  </div>
  <div data-id="11" class="item">
    Chaiptre 2

  </div>
</div>

CSS

html,
body {
  font-family: Helvetica;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#tree {
  width: 80%;
  height: 100%;
  float: left;
}

#items {
  width: 19%;
  height: 100%;
  float: right;
}

.item {
  margin: 10px;
  padding: 10px;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid #F57C00;
  color: #757575;
  border-radius: 20px;
  user-select: none;
}

JavaScript

var to_send ={};
var module = {};
var data = [];
var nameofmodule={};
var moduleconfig_forms =  [];
   window.onload = function() {
      var currentNode = '';
        var clientXY = [0,0];
        var nameformation_recup= document.getElementById('getnameformation').value;
        OrgChart.templates.ula.size = [150, 55];
        OrgChart.templates.ula.pointer = '<g data-pointer="pointer"></g>';
        OrgChart.templates.ula.node = '<rect x="0" y="0" height="55" width="150" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="5" ry="5"></rect>';
        OrgChart.templates.ula.field_0 = '<text width="230" class="field_0"  style="font-size: 18px;" fill="#ffffff" x="75" y="35" text-anchor="middle">{val}</text>';
        OrgChart.templates.ula.edit = '<g data-edit-id="{val}" transform="matrix(1,0,0,1,130,5)"><rect x="0" y="0" width="16" height="16" fill="#039BE5"></rect>' + OrgChart.icon.edit(16,16, '#fff') + '</g>';
        OrgChart.templates.ula.remove = '<g data-remove-id="{val}" transform="matrix(1,0,0,1,30,6)"><rect x="0" y="0" width="16" height="16" fill="#039BE5"></rect>' + OrgChart.icon.remove(15,15, '#fff') + '</g>';
        OrgChart.templates.ula.pdf = '<g data-pdf-id="{val}" transform="matrix(1,0,0,1,5,3)"><rect x="0" y="0" width="20" height="20" fill="#039BE5"></rect>' +OrgChart.icon.pdf(24,24, '#fff') +  '</g>';
        var chart = new OrgChart(document.getElementById("tree"), {
            template: "ula",
            enableSearch: false,
            mouseScrool: OrgChart.action.none,
            align: OrgChart.ORIENTATION,
            enableDragDrop: true,
            nodeMouseClick: OrgChart.action.none,
            nodeBinding: {
                field_0: "name",
                edit: 'id',
                remove: 'id',
                pdf:'id'
            },
            tags: {
                "assistant": {
                    template: "ula"
                }
            },
            toolbar:{
                zoom:true
            },

       ...