无法在 gojs Mindmap 中添加自定义按钮

Question

我用的是gojs思维导图， 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);
}

这将创建思维导图，但我想在 canvas 中添加一个新的保存按钮。
我在这个项目中使用了确切的代码来创建思维导图 https://gojs.net/latest/samples/mindMap.html

注意：我代码中的保存按钮指的是外部gojs canvas，我想要内部canvas

Answer 1

您可以将 HTML 按钮（或任何其他 HTML）叠加在图表的 HTML Div 元素上。例如，只需对 MindMap 示例进行此更改：

  <div style="position:relative">
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:300px;"></div>
    <button id="SaveButton" onclick="save()" style="position:absolute; right:10px; bottom: 10px; z-index:300">Save</button>
  </div>

无法在 gojs Mindmap 中添加自定义按钮

Not able to add custom button in gojs Mindmap

diagram

canvas

button

mindmap

gojs