JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="stackblitz-container material">
<div class="control-section">
    <div class="content-wrapper" style="width: 100%">
        <div id="diagram"></div>
    </div>
</div>


</div>

CSS

body{
                touch-action:none;
            }

TypeScript

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

/**
 * Mind-map sample
 */

import {
    Diagram, ConnectorModel, Connector, Node, ConnectorConstraints, DataBinding,
    PointPortModel, PointPort, randomId, TextModel,
    PortVisibility, UserHandleModel, SelectorConstraints, ToolBase, MouseEventArgs, SnapConstraints,
    NodeModel, MindMap, HierarchicalTree, ISelectionChangeEventArgs, DiagramTools,
    NodeConstraints, Side, MarginModel, HorizontalAlignment, VerticalAlignment
} from '@syncfusion/ej2-diagrams';
import * as Data from './diagram-data.json';
import { DataManager, Query } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, MindMap, HierarchicalTree);

let items: DataManager = new DataManager((Data as any).mindMap, new Query().take(7));

let diagram: Diagram;


//sets node default value
function getNodeDefaults(obj: Node): Node {
    obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag;
    let empInfo: EmployeeInfo = obj.data as EmployeeInfo;
    if (empInfo.branch === 'Left' || empInfo.branch === 'Right'
        || empInfo.branch === 'Root') {
        obj.shape = { type: 'Basic', shape: 'Ellipse' }; obj.borderColor = 'black'; /* tslint:disable:no-string-literal */
        obj.style = {
            fill: empInfo.branch === 'Root' ? '#E74C3C' : '#F39C12', strokeColor: 'none',
            strokeWidth: 2
        };
        obj.annotations = [{
            content: empInfo.Label, margin: { left: 10, right: 10, top: 10, bottom: 10 },
            style: { color: 'white' }
        }];
        let port: PointPortModel[] = getPort();
        for (let i: number = 0; i < port.length; i++) {
            obj.ports.push(new PointPort(obj, 'ports', port[i], true));
        }
        hideUserHandle('Top');
    } else {
        let color: string; /* tslint:disable:no-string-literal */
        if (empInfo.branch === 'Right' || empInfo.branch === 'subRight') {
            color = '#8E44AD';
        } else {
            color =...