I'm using gojs mindmap, I want to add a save button at the end of the canvas
function init(json) {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
// when the user drags a node, also move/copy/delete the whole subtree starting with that node
"commandHandler.copiesTree": true,
"commandHandler.copiesParentKey": true,
"commandHandler.deletesTree": true,
"draggingTool.dragsTree": true,
"undoManager.isEnabled": true
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function (e) {
var button = document.getElementById("SaveButton");
// if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.substr(0, idx);
}
});
// a node consists of some text with a line shape underneath
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.TextBlock,
{
name: "TEXT",
minSize: new go.Size(30, 15),
editable: true
},
// remember not only the text string but the scale and the font in the node data
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("scale", "scale").makeTwoWay(),
new go.Binding("font", "font").makeTwoWay()),
$(go.Shape, "LineH",
{
stretch: go.GraphObject.Horizontal,
strokeWidth: 3, height: 3,
// this line shape is the port -- what links connect with
portId: "", fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides
},
new go.Binding("stroke", "brush"),
// make sure links come in from the proper direction and go out appropriately
new go.Binding("fromSpot", "dir", function (d) { return spotConverter(d, true); }),
new go.Binding("toSpot", "dir", function (d) { return spotConverter(d, false); })),
// remember the locations of each node in the node data
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// make sure text "grows" in the desired direction
new go.Binding("locationSpot", "dir", function (d) { return spotConverter(d, false); })
);
// selected nodes show a button for adding children
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
// this Adornment has a rectangular blue Shape around the selected node
$(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
$(go.Placeholder, { margin: new go.Margin(4, 4, 0, 4) })
),
// and this Adornment has a Button to the right of the selected node
$("Button",
{
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
click: addNodeAndLink // define click behavior for this Button in the Adornment
},
$(go.TextBlock, "+", // the Button content
{ font: "bold 8pt sans-serif" })
)
);
// the context menu allows users to change the font size and weight,
// and to perform a limited tree layout starting at that node
myDiagram.nodeTemplate.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Bigger"),
{ click: function (e, obj) { changeTextSize(obj, 1.1); } }),
$("ContextMenuButton",
$(go.TextBlock, "Smaller"),
{ click: function (e, obj) { changeTextSize(obj, 1 / 1.1); } }),
$("ContextMenuButton",
$(go.TextBlock, "Bold/Normal"),
{ click: function (e, obj) { toggleTextWeight(obj); } }),
$("ContextMenuButton",
$(go.TextBlock, "Copy"),
{ click: function (e, obj) { e.diagram.commandHandler.copySelection(); } }),
$("ContextMenuButton",
$(go.TextBlock, "Delete"),
{ click: function (e, obj) { e.diagram.commandHandler.deleteSelection(); } }),
$("ContextMenuButton",
$(go.TextBlock, "Undo"),
{ click: function (e, obj) { e.diagram.commandHandler.undo(); } }),
$("ContextMenuButton",
$(go.TextBlock, "Redo"),
{ click: function (e, obj) { e.diagram.commandHandler.redo(); } }),
$("ContextMenuButton",
$(go.TextBlock, "Layout"),
{
click: function (e, obj) {
var adorn = obj.part;
adorn.diagram.startTransaction("Subtree Layout");
layoutTree(adorn.adornedPart);
adorn.diagram.commitTransaction("Subtree Layout");
}
}
)
);
// a link is just a Bezier-curved line of the same color as the node to which it is connected
myDiagram.linkTemplate =
$(go.Link,
{
curve: go.Link.Bezier,
fromShortLength: -2,
toShortLength: -2,
selectable: false
},
$(go.Shape,
{ strokeWidth: 3 },
new go.Binding("stroke", "toNode", function (n) {
if (n.data.brush) return n.data.brush;
return "black";
}).ofObject())
);
// the Diagram's context menu just displays commands for general functionality
myDiagram.contextMenu =
$("ContextMenu",
$("ContextMenuButton",
$(go.TextBlock, "Paste"),
{ click: function (e, obj) { e.diagram.commandHandler.pasteSelection(e.diagram.toolManager.contextMenuTool.mouseDownPoint); } },
new go.Binding("visible", "", function (o) { return o.diagram && o.diagram.commandHandler.canPasteSelection(o.diagram.toolManager.contextMenuTool.mouseDownPoint); }).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Undo"),
{ click: function (e, obj) { e.diagram.commandHandler.undo(); } },
new go.Binding("visible", "", function (o) { return o.diagram && o.diagram.commandHandler.canUndo(); }).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Redo"),
{ click: function (e, obj) { e.diagram.commandHandler.redo(); } },
new go.Binding("visible", "", function (o) { return o.diagram && o.diagram.commandHandler.canRedo(); }).ofObject()),
$("ContextMenuButton",
$(go.TextBlock, "Save"),
{ click: function (e, obj) { save(); } }),
$("ContextMenuButton",
$(go.TextBlock, "Load"),
{ click: function (e, obj) { load(json); } })
);
myDiagram.addDiagramListener("SelectionMoved", function (e) {
var rootX = myDiagram.findNodeForKey(0).location.x;
myDiagram.selection.each(function (node) {
if (node.data.parent !== 0) return; // Only consider nodes connected to the root
var nodeX = node.location.x;
if (rootX < nodeX && node.data.dir !== "right") {
updateNodeDirection(node, "right");
} else if (rootX > nodeX && node.data.dir !== "left") {
updateNodeDirection(node, "left");
}
layoutTree(node);
});
});
// read in the predefined graph using the JSON format data held in the "mySavedModel" textarea
load(json);
}
This will create mindmap, but i want add a new save button in the canvas.
I have used the exact code in this project to create mindmap
https://gojs.net/latest/samples/mindMap.html
Note : The save button in my code refers to outside gojs canvas, I want inside canvas
You can superimpose your HTML Button (or any other HTML) over the Diagram's HTML Div element. For example, just make this change to the MindMap sample: