This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathmind-map-plnkr.json
More file actions
1 lines (1 loc) · 38.7 KB
/
mind-map-plnkr.json
File metadata and controls
1 lines (1 loc) · 38.7 KB
1
{"index.css":"","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Diagram · MindMap · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/diagram\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/diagram/default.html\"><span>Diagram</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">MindMap</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample demonstrates the concept of creativity using mind map\n layout algorithm. User handles are used to extend the mind map\n interactively.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n This example shows how to generate a mind map from an external data\n source. The <code>type</code> property of the <code>layout</code>{" "}\n can be used to enable the mind map layout algorithm. The\n <code>getBranch</code> property can also be used to define the\n branches at both left and right sides.\n </p>\n\n <p 500=\"\" style=\"{{\" fontweight:=\"\" }}=\"\">Injecting Module</p>\n <p>\n The diagram component’s features are segregated into individual\n feature-wise modules. To generate diagrams from an external data\n source, inject <code>DataBinding</code> module into{" "}\n <code>services</code>. To automatically generate a mind map, inject\n <code>Mindmap</code> module into <code>services</code>.\n </p>\n <br>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"import * as ReactDOM from \"react-dom\";\r\nimport * as React from \"react\";\r\nimport {\r\n MindMap as MindMapModule,\r\n HierarchicalTree,\r\n ConnectorConstraints,\r\n ToolBase,\r\n MouseEventArgs,\r\n randomId,\r\n ISelectionChangeEventArgs,\r\n PointPort,\r\n UserHandleModel,\r\n SelectorConstraints,\r\n SnapConstraints,\r\n PointPortModel,\r\n PortVisibility,\r\n DiagramComponent,\r\n NodeConstraints,\r\n NodeModel,\r\n ConnectorModel,\r\n Node,\r\n Connector,\r\n Diagram,\r\n DiagramTools,\r\n Inject,\r\n DataBinding,\r\n Side,\r\n MarginModel,\r\n HorizontalAlignment,\r\n VerticalAlignment,\r\n TextModel\r\n} from \"@syncfusion/ej2-react-diagrams\";\r\nimport { SampleBase } from './sample-base';\r\nimport { DataManager, Query } from \"@syncfusion/ej2-data\";\r\n\r\nexport let mindMap: object[] = [\r\n { id: 1, Label: \"Creativity\", fill: \"red\", branch: \"Root\" },\r\n\r\n { id: 3, Label: \"Brainstorming\", parentId: 1, branch: \"Right\", fill: \"red\" },\r\n { id: 4, Label: \"Complementing\", parentId: 1, branch: \"Left\", fill: \"red\" },\r\n\r\n { id: 22, Label: \"Sessions\", parentId: 3, branch: \"subRight\", fill: \"red\" },\r\n { id: 23, Label: \"Generate\", parentId: 3, branch: \"subRight\", fill: \"red\" },\r\n\r\n { id: 25, Label: \"Local\", parentId: 22, branch: \"subRight\" },\r\n { id: 26, Label: \"Remote\", parentId: 22, branch: \"subRight\" },\r\n { id: 27, Label: \"Individual\", parentId: 22, branch: \"subRight\" },\r\n { id: 28, Label: \"Teams\", parentId: 22, branch: \"subRight\" },\r\n { id: 29, Label: \"Ideas\", parentId: 23, branch: \"subRight\" },\r\n { id: 30, Label: \"Engagement\", parentId: 23, branch: \"subRight\" },\r\n\r\n { id: 31, Label: \"Product\", parentId: 29, branch: \"subRight\" },\r\n { id: 32, Label: \"Service\", parentId: 29, branch: \"subRight\" },\r\n { id: 33, Label: \"Business Direction\", parentId: 29, branch: \"subRight\" },\r\n { id: 34, Label: \"Empowering\", parentId: 30, branch: \"subRight\" },\r\n { id: 35, Label: \"Ownership\", parentId: 30, branch: \"subRight\" },\r\n\r\n { id: 50, Label: \"Information\", parentId: 4, branch: \"subLeft\" },\r\n { id: 51, Label: \"Expectations\", parentId: 4, branch: \"subLeft\" },\r\n\r\n { id: 53, Label: \"Competetors\", parentId: 50, branch: \"subLeft\" },\r\n { id: 54, Label: \"Products\", parentId: 50, branch: \"subLeft\" },\r\n { id: 55, Label: \"Features\", parentId: 50, branch: \"subLeft\" },\r\n { id: 56, Label: \"Other Data\", parentId: 50, branch: \"subLeft\" },\r\n\r\n { id: 59, Label: \"Organization\", parentId: 51, branch: \"subLeft\" },\r\n { id: 60, Label: \"Customer\", parentId: 51, branch: \"subLeft\" },\r\n { id: 61, Label: \"Staff\", parentId: 51, branch: \"subLeft\" },\r\n { id: 62, Label: \"Stakeholders\", parentId: 51, branch: \"subLeft\" }\r\n];\r\n\r\nlet items: DataManager = new DataManager(\r\n mindMap as JSON[],\r\n new Query().take(7)\r\n);\r\n\r\nlet diagramInstance: Diagram;\r\n\r\nexport class MindMap extends SampleBase<{}, {}> {\r\n rendereComplete() {\r\n diagramInstance.fitToPage();\r\n }\r\n render() {\r\n return (\r\n <div className=\"control-pane\">\r\n <div className=\"control-section\">\r\n <div className=\"content-wrapper\" style={{width: \"100%\"}}>\r\n <DiagramComponent\r\n ref={diagram => (diagramInstance = diagram)}\r\n id=\"diagram\"\r\n style={{ width: \"74%\", height: \"550px\", float: \"left\" }}\r\n width={\"100%\"}\r\n height={\"550px\"}\r\n snapSettings={{ constraints: SnapConstraints.None }}\r\n tool={DiagramTools.SingleSelect}\r\n layout={{\r\n type: \"MindMap\",\r\n getBranch: (node: NodeModel, nodes: NodeModel[]) => {\r\n return ((node as Node).data as EmployeeInfo).branch;\r\n },\r\n horizontalSpacing: 50\r\n }}\r\n //Selectionchange event for Node and connector\r\n selectionChange={(arg: ISelectionChangeEventArgs) => {\r\n if (arg.state === \"Changing\") {\r\n if (arg.newValue[0] instanceof Node) {\r\n for (let handle of diagramInstance.selectedItems\r\n .userHandles) {\r\n handle.visible = true;\r\n }\r\n if (\r\n ((arg.newValue[0] as Node).data as EmployeeInfo)\r\n .branch === \"Left\" ||\r\n ((arg.newValue[0] as Node).data as EmployeeInfo)\r\n .branch === \"subLeft\"\r\n ) {\r\n hideUserHandle(\"leftHandle\");\r\n changeUserHandlePosition(\"leftHandle\");\r\n } else if (\r\n ((arg.newValue[0] as Node).data as EmployeeInfo)\r\n .branch === \"Right\" ||\r\n ((arg.newValue[0] as Node).data as EmployeeInfo)\r\n .branch === \"subRight\"\r\n ) {\r\n hideUserHandle(\"rightHandle\");\r\n changeUserHandlePosition(\"rightHandle\");\r\n } else if (\r\n ((arg.newValue[0] as Node).data as EmployeeInfo)\r\n .branch === \"Root\"\r\n ) {\r\n hideUserHandle(\"delete\");\r\n }\r\n } else {\r\n hideUserHandle(\"leftHandle\");\r\n hideUserHandle(\"rightHandle\");\r\n hideUserHandle(\"delete\");\r\n }\r\n }\r\n }}\r\n selectedItems={{\r\n constraints: SelectorConstraints.UserHandle,\r\n userHandles: handle\r\n }}\r\n dataSourceSettings={{\r\n id: \"id\",\r\n parentId: \"parentId\",\r\n dataManager: items,\r\n root: String(1)\r\n }}\r\n //sets node default value\r\n getNodeDefaults={(obj: Node) => {\r\n obj.constraints =\r\n NodeConstraints.Default & ~NodeConstraints.Drag;\r\n if (\r\n (obj.data as EmployeeInfo).branch === \"Left\" ||\r\n (obj.data as EmployeeInfo).branch === \"Right\" ||\r\n (obj.data as EmployeeInfo).branch === \"Root\"\r\n ) {\r\n obj.shape = { type: \"Basic\", shape: \"Ellipse\" };\r\n obj.borderColor =\r\n \"black\"; /* tslint:disable:no-string-literal */\r\n obj.style = {\r\n fill:\r\n (obj.data as EmployeeInfo).branch === \"Root\"\r\n ? \"#E74C3C\"\r\n : \"#F39C12\",\r\n strokeColor: \"none\",\r\n strokeWidth: 2\r\n };\r\n obj.annotations = [\r\n {\r\n content: (obj.data as EmployeeInfo).Label,\r\n margin: { left: 10, right: 10, top: 10, bottom: 10 },\r\n style: { color: \"white\" }\r\n }\r\n ];\r\n let port: PointPortModel[] = getPort();\r\n for (let i: number = 0; i < port.length; i++) {\r\n obj.ports.push(new PointPort(obj, \"ports\", port[i], true));\r\n }\r\n } else {\r\n let color: string; /* tslint:disable:no-string-literal */\r\n if (\r\n (obj.data as EmployeeInfo).branch === \"Right\" ||\r\n (obj.data as EmployeeInfo).branch === \"subRight\"\r\n ) {\r\n color = \"#8E44AD\";\r\n } else {\r\n color = \"#3498DB\";\r\n }\r\n obj.shape = { type: \"Basic\", shape: \"Rectangle\" };\r\n obj.style = { fill: color, strokeWidth: 0 };\r\n obj.minWidth = 100;\r\n obj.height = 4;\r\n let port: PointPortModel[] = getPort();\r\n for (let i: number = 0; i < port.length; i++) {\r\n obj.ports.push(new PointPort(obj, \"ports\", port[i], true));\r\n }\r\n obj.annotations = [\r\n {\r\n content: (obj.data as EmployeeInfo).Label,\r\n offset: { x: 0.5, y: 0 },\r\n verticalAlignment: \"Bottom\"\r\n }\r\n ];\r\n (obj.shape as TextModel).margin = {\r\n left: 0,\r\n right: 0,\r\n top: 0,\r\n bottom: 0\r\n };\r\n }\r\n return obj;\r\n }}\r\n //sets connector default value\r\n getConnectorDefaults={(\r\n connector: ConnectorModel,\r\n diagram: Diagram\r\n ) => {\r\n connector.type = \"Bezier\";\r\n connector.targetDecorator = { shape: \"None\" };\r\n let sourceNode: Node = diagram.getObject(\r\n connector.sourceID\r\n ) as Node;\r\n let targetNode: Node = diagram.getObject(\r\n connector.targetID\r\n ) as Node;\r\n if (\r\n (targetNode.data as EmployeeInfo).branch === \"Right\" ||\r\n (targetNode.data as EmployeeInfo).branch === \"subRight\"\r\n ) {\r\n connector.sourcePortID = sourceNode.ports[0].id;\r\n connector.targetPortID = targetNode.ports[1].id;\r\n connector.style = { strokeWidth: 5, strokeColor: \"#8E44AD\" };\r\n } else if (\r\n (targetNode.data as EmployeeInfo).branch === \"Left\" ||\r\n (targetNode.data as EmployeeInfo).branch === \"subLeft\"\r\n ) {\r\n connector.sourcePortID = sourceNode.ports[1].id;\r\n connector.targetPortID = targetNode.ports[0].id;\r\n connector.style = { strokeWidth: 5, strokeColor: \"#3498DB\" };\r\n }\r\n connector.constraints &= ~ConnectorConstraints.Select;\r\n return connector;\r\n }}\r\n getCustomTool={getTool}\r\n >\r\n <Inject\r\n services={[DataBinding, MindMapModule, HierarchicalTree]}\r\n />\r\n </DiagramComponent>\r\n <input\r\n id=\"palette\"\r\n style={{ visibility: \"hidden\", position: \"absolute\" }}\r\n type=\"color\"\r\n name=\"favcolor\"\r\n value=\"#000000\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n//creation of the Ports\r\nfunction getPort(): PointPortModel[] {\r\n let port: PointPortModel[] = [\r\n {\r\n id: \"port1\",\r\n offset: { x: 0, y: 0.5 },\r\n visibility: PortVisibility.Hidden,\r\n style: { fill: \"black\" }\r\n },\r\n {\r\n id: \"port2\",\r\n offset: { x: 1, y: 0.5 },\r\n visibility: PortVisibility.Hidden,\r\n style: { fill: \"black\" }\r\n }\r\n ];\r\n return port;\r\n}\r\nfunction addNode(): NodeModel {\r\n let obj: NodeModel = {};\r\n obj.id = randomId();\r\n obj.data = {};\r\n (obj.data as EmployeeInfo).Label = \"Node\";\r\n return obj;\r\n}\r\n\r\nfunction addConnector(source: NodeModel, target: NodeModel): ConnectorModel {\r\n let connector: ConnectorModel = {};\r\n connector.id = randomId();\r\n connector.sourceID = source.id;\r\n connector.targetID = target.id;\r\n return connector;\r\n}\r\n//Tool for Userhandles.\r\nfunction getTool(action: string): ToolBase {\r\n let tool: ToolBase;\r\n if (action === \"leftHandle\") {\r\n tool = new LeftExtendTool(diagramInstance.commandHandler);\r\n } else if (action === \"rightHandle\") {\r\n tool = new RightExtendTool(diagramInstance.commandHandler);\r\n } else if (action === \"delete\") {\r\n tool = new DeleteClick(diagramInstance.commandHandler);\r\n }\r\n return tool;\r\n}\r\n\r\nclass LeftExtendTool extends ToolBase {\r\n public mouseDown(args: MouseEventArgs): void {\r\n super.mouseDown(args);\r\n this.inAction = true;\r\n }\r\n public mouseUp(args: MouseEventArgs): void {\r\n if (this.inAction) {\r\n let selectedObject: any = this.commandHandler.getSelectedObject();\r\n if (selectedObject[0]) {\r\n if (selectedObject[0] instanceof Node) {\r\n let node: NodeModel = addNode();\r\n if ((selectedObject[0].data as EmployeeInfo).branch === \"Root\") {\r\n (node.data as EmployeeInfo).branch = \"Right\";\r\n } else if (\r\n (selectedObject[0].data as EmployeeInfo).branch === \"Right\" ||\r\n (selectedObject[0].data as EmployeeInfo).branch === \"subRight\"\r\n ) {\r\n (node.data as EmployeeInfo).branch = \"subRight\";\r\n }\r\n let connector: ConnectorModel = addConnector(selectedObject[0], node);\r\n diagramInstance.clearSelection();\r\n let nd: Node = diagramInstance.add(node) as Node;\r\n diagramInstance.add(connector);\r\n diagramInstance.doLayout();\r\n diagramInstance.bringIntoView(nd.wrapper.bounds);\r\n diagramInstance.startTextEdit(nd);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\nclass RightExtendTool extends ToolBase {\r\n //mouseDown event\r\n public mouseDown(args: MouseEventArgs): void {\r\n super.mouseDown(args);\r\n this.inAction = true;\r\n }\r\n //mouseDown event\r\n public mouseUp(args: MouseEventArgs): void {\r\n if (this.inAction) {\r\n let selectedObject: any = this.commandHandler.getSelectedObject();\r\n if (selectedObject[0]) {\r\n if (selectedObject[0] instanceof Node) {\r\n let node: NodeModel = addNode();\r\n if ((selectedObject[0].data as EmployeeInfo).branch === \"Root\") {\r\n (node.data as EmployeeInfo).branch = \"Left\";\r\n } else if (\r\n (selectedObject[0].data as EmployeeInfo).branch === \"Left\" ||\r\n (selectedObject[0].data as EmployeeInfo).branch === \"subLeft\"\r\n ) {\r\n (node.data as EmployeeInfo).branch = \"subLeft\";\r\n }\r\n let connector: ConnectorModel = addConnector(selectedObject[0], node);\r\n diagramInstance.clearSelection();\r\n let nd: Node = diagramInstance.add(node) as Node;\r\n diagramInstance.add(connector);\r\n diagramInstance.doLayout();\r\n diagramInstance.bringIntoView(nd.wrapper.bounds);\r\n diagramInstance.startTextEdit(nd);\r\n }\r\n }\r\n }\r\n }\r\n}\r\nclass DeleteClick extends ToolBase {\r\n //mouseDown event\r\n public mouseDown(args: MouseEventArgs): void {\r\n super.mouseDown(args);\r\n this.inAction = true;\r\n }\r\n //mouseup event\r\n public mouseUp(args: MouseEventArgs): void {\r\n if (this.inAction) {\r\n let selectedObject: any = this.commandHandler.getSelectedObject();\r\n if (selectedObject[0]) {\r\n if (selectedObject[0] instanceof Node) {\r\n let node: Node = selectedObject[0] as Node;\r\n this.removeSubChild(node);\r\n }\r\n diagramInstance.doLayout();\r\n }\r\n }\r\n }\r\n //Remove the subchild Elements\r\n private removeSubChild(node: Node): void {\r\n for (let i: number = node.outEdges.length - 1; i >= 0; i--) {\r\n let connector: Connector = diagramInstance.getObject(\r\n node.outEdges[i]\r\n ) as Connector;\r\n let childNode: Node = diagramInstance.getObject(\r\n connector.targetID\r\n ) as Node;\r\n if (childNode.outEdges.length > 0) {\r\n this.removeSubChild(childNode);\r\n } else {\r\n diagramInstance.remove(childNode);\r\n }\r\n }\r\n diagramInstance.remove(node);\r\n }\r\n}\r\n//hide the require userhandle.\r\nfunction hideUserHandle(name: string): void {\r\n for (let handle of diagramInstance.selectedItems.userHandles) {\r\n if (handle.name === name) {\r\n handle.visible = false;\r\n }\r\n }\r\n}\r\nlet leftarrow: string =\r\n \"M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z\";\r\nlet rightarrow: string =\r\n \"M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z\";\r\nlet deleteicon: string =\r\n \"M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76\" +\r\n \"96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04\" +\r\n \"91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z\";\r\n\r\nlet leftuserhandle: UserHandleModel = setUserHandle(\r\n //it is in dedicated line here.\r\n \"leftHandle\",\r\n leftarrow,\r\n \"Left\",\r\n 1,\r\n { top: 0, bottom: 0, left: 0, right: 10 },\r\n \"Left\",\r\n \"Top\"\r\n);\r\nlet rightuserhandle: UserHandleModel = setUserHandle(\r\n //it is in dedicated line here.\r\n \"rightHandle\",\r\n rightarrow,\r\n \"Right\",\r\n 1,\r\n { top: 0, bottom: 0, left: 10, right: 0 },\r\n \"Right\",\r\n \"Top\"\r\n);\r\nlet deleteuserhandle: UserHandleModel = setUserHandle(\r\n //it is in dedicated line here.\r\n \"delete\",\r\n deleteicon,\r\n \"Top\",\r\n 0.5,\r\n { top: 0, bottom: 10, left: 0, right: 0 },\r\n \"Center\",\r\n \"Center\"\r\n);\r\nlet handle: UserHandleModel[] = [\r\n leftuserhandle,\r\n rightuserhandle,\r\n deleteuserhandle\r\n];\r\n//set and creation of the Userhandle.\r\nfunction setUserHandle( //it is in dedicated line here.\r\n name: string,\r\n pathData: string,\r\n side: Side,\r\n offset: number,\r\n margin: MarginModel,\r\n halignment: HorizontalAlignment,\r\n valignment: VerticalAlignment\r\n): UserHandleModel {\r\n let userhandle: UserHandleModel = {\r\n name: name,\r\n pathData: pathData,\r\n backgroundColor: \"black\",\r\n pathColor: \"white\",\r\n side: side,\r\n offset: offset,\r\n margin: margin,\r\n horizontalAlignment: halignment,\r\n verticalAlignment: valignment\r\n };\r\n return userhandle;\r\n}\r\n//Change the Position of the UserHandle.\r\nfunction changeUserHandlePosition(change: string): void {\r\n for (let handle of diagramInstance.selectedItems.userHandles) {\r\n if (handle.name === \"delete\" && change === \"leftHandle\") {\r\n applyHandle(\r\n handle,\r\n \"Left\",\r\n 1,\r\n { top: 0, bottom: 0, left: 0, right: 10 },\r\n \"Left\",\r\n \"Top\"\r\n );\r\n } else if (handle.name === \"delete\" && change === \"rightHandle\") {\r\n applyHandle(\r\n handle,\r\n \"Right\",\r\n 1,\r\n { top: 0, bottom: 0, left: 10, right: 0 },\r\n \"Right\",\r\n \"Top\"\r\n );\r\n }\r\n }\r\n}\r\n//set the value for UserHandle element.\r\nfunction applyHandle( //it is in dedicated line here.\r\n handle: UserHandleModel,\r\n side: Side,\r\n offset: number,\r\n margin: MarginModel,\r\n halignment: HorizontalAlignment,\r\n valignment: VerticalAlignment\r\n): void {\r\n handle.side = side;\r\n handle.offset = offset;\r\n handle.margin = margin;\r\n handle.horizontalAlignment = halignment;\r\n handle.verticalAlignment = valignment;\r\n}\r\n\r\nexport interface EmployeeInfo {\r\n branch: string;\r\n color: string;\r\n Left: string;\r\n Right: string;\r\n Root: string;\r\n Label: string;\r\n}\r\n\nReactDOM.render(<MindMap />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}