Demo
Demo2
- Open Demo
- Selected “Main Topic Node”
- Drag this “Main Topic Node” and stop it anywhere.
- MindMap will disappear
const editor = new dhx.DiagramEditor("editor", {
type: "mindmap",
typeConfig: {
direction: "right", // "left" or "right", puts child shapes to the right of the root shape
},
});
const editorCont = document.querySelector("#editor");
const controls = document.querySelector("#control");
const container = document.querySelector("#container");
const WITH_EDITOR = "dhx_sample-container__with-editor";
function runEditor() {
var data = [
{
"dir": [
"verticalRight"
],
"editable": true,
"fill": "#fff",
"fixed": false,
"fontColor": "rgba(0,0,0,0.70)",
"fontSize": 14,
"fontStyle": "normal",
"headerColor": "#FF9800",
"height": 30,
"id": "u1708496954975",
"lineHeight": 14,
"open": true,
"openDir": {
"left": false,
"right": true
},
"stroke": "#FF9800",
"strokeWidth": 1,
"text": "Main Topic Node",
"textAlign": "center",
"textVerticalAlign": "center",
"type": "topic",
"width": 140,
"x": 0,
"y": 50
},
{
"dir": "verticalRight",
"editable": true,
"fill": "#fff",
"fixed": false,
"fontColor": "rgba(0,0,0,0.70)",
"fontSize": 14,
"fontStyle": "normal",
"headerColor": "#607D8B",
"height": 30,
"hidden": false,
"id": "u1708496954990",
"lineHeight": 14,
"parent": "u1708496954975",
"stroke": "#607D8B",
"strokeWidth": 1,
"text": "Text",
"textAlign": "center",
"textVerticalAlign": "center",
"type": "topic",
"width": 140,
"x": 180,
"y": 0
},
{
"dir": "verticalRight",
"dx": -40,
"dy": 0,
"editable": true,
"fill": "#fff",
"fixed": false,
"fontColor": "rgba(0,0,0,0.70)",
"fontSize": 14,
"fontStyle": "normal",
"headerColor": "#607D8B",
"height": 30,
"hidden": false,
"id": "u1708496955020",
"lineHeight": 14,
"parent": "u1708496954975",
"stroke": "#607D8B",
"strokeWidth": 1,
"text": "Text",
"textAlign": "center",
"textVerticalAlign": "center",
"type": "topic",
"width": 140,
"x": 180,
"y": 50
},
{
"dir": "verticalRight",
"dx": -10,
"dy": 20,
"editable": true,
"fill": "#fff",
"fixed": false,
"fontColor": "rgba(0,0,0,0.70)",
"fontSize": 14,
"fontStyle": "normal",
"headerColor": "#607D8B",
"height": 30,
"hidden": false,
"id": "u1708496955050",
"lineHeight": 14,
"parent": "u1708496954975",
"stroke": "#607D8B",
"strokeWidth": 1,
"text": "Text",
"textAlign": "center",
"textVerticalAlign": "center",
"type": "topic",
"width": 140,
"x": 180,
"y": 100
}
];
// loads data from an external file
editor.parse(data);
}
editor.events.on("ResetButton", function () {
runEditor();
});
runEditor()