I want to add some spots on groups in order to draw links between then by hand, but I get error "Cannot add a Part to a Panel: Group#434".
<title>Regrouping Demo</title>
<script src="./go.js"></script>
<script src="./port.js"></script>
<script src="./filed.js"></script>
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
allowDrop: true, // from Palette
// what to do when a drag-drop occurs in the Diagram's background
mouseDrop: function(e) { finishDrop(e, null); },
layout: // Diagram has simple horizontal layout
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) }),
initialContentAlignment: go.Spot.Center,
"commandHandler.archetypeGroupData": { isGroup: true, category: "OfNodes" },
"undoManager.isEnabled": true
});
// There are two templates for Groups, "OfGroups" and "OfNodes".
// this function is used to highlight a Group that the selection may be dropped into
function highlightGroup(e, grp, show) {
if (!grp) return;
e.handled = true;
if (show) {
// cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
// instead depend on the DraggingTool.draggedParts or .copiedParts
var tool = grp.diagram.toolManager.draggingTool;
var map = tool.draggedParts || tool.copiedParts; // this is a Map
// now we can check to see if the Group will accept membership of the dragged Parts
if (grp.canAddMembers(map.toKeySet())) {
grp.isHighlighted = true;
return;
}
}
grp.isHighlighted = false;
}
// Upon a drop onto a Group, we try to add the selection as members of the Group.
// Upon a drop onto the background, or onto a top-level Node, make selection top-level.
// If this is OK, we're done; otherwise we cancel the operation to rollback everything.
function finishDrop(e, grp) {
var ok = (grp !== null
? grp.addMembers(grp.diagram.selection, true)
: e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
if (!ok) e.diagram.currentTool.doCancel();
}
myDiagram.groupTemplateMap.add("OfGroups",
$(go.Node,"Spot",nodeStyle(),
$(go.Group, "Auto",
{
background: "transparent",
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) })
},
new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: "#FFDD33", strokeWidth: 2 }),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 18px sans-serif",
opacity: 0.75,
stroke: "#404040"
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5, alignment: go.Spot.TopLeft })
) // end Vertical Panel
)),
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true)
); // end Group and call to add to template Map
myDiagram.groupTemplateMap.add("OfNodes",
$(go.Group, "Auto",
{
background: "transparent",
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
// Groups containing Nodes lay out their members vertically
layout:
$(go.GridLayout,
{ wrappingColumn: 1, alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1), spacing: new go.Size(4, 4) })
},
new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
$(go.Panel, "Vertical", // title above Placeholder
$(go.Panel, "Horizontal", // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 16px sans-serif",
opacity: 0.75,
stroke: "#404040"
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5, alignment: go.Spot.TopLeft })
) // end Vertical Panel
)); // end Group and call to add to template Map
// This template represents a whole "record".
myDiagram.nodeTemplate =
$(go.Node, "Auto",nodeStyle(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// this rectangular shape surrounds the content of the node
$(go.Shape,
{ fill: "#fff" }),
// the content consists of a header and a list of items
$(go.Panel, "Vertical",
// this is the header for the whole node
$(go.Panel, "Auto",
{ stretch: go.GraphObject.Horizontal }, // as wide as the whole node
$(go.Shape,
{ fill: "gray", stroke: null },new go.Binding("fill", "color")),
$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 3,
stroke: "#fff",
textAlign: "center",
font: "bold 12pt sans-serif",
editable:true
},
new go.Binding("text", "text"))),
$(go.Panel, "Table",{
name: "TABLE",
padding: 1,
minSize: new go.Size(100, 10),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: fieldTemplate
},new go.Binding("itemArray", "fields"))
), // end Vertical Panel
makePort("T", go.Spot.Top, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, true)
); // end Node
//删除
// this is a bit inefficient, but should be OK for normal-sized graphs with reasonable numbers of items per node
function findAllSelectedItems() {
var items = [];
for (var nit = myDiagram.nodes; nit.next(); ) {
var node = nit.value;
var table = node.findObject("TABLE");
if (table) {
for (var iit = table.elements; iit.next(); ) {
var itempanel = iit.value;
if (itempanel.background !== "transparent") items.push(itempanel);
}
}
}
return items;
}
//删除
myDiagram.commandHandler.canDeleteSelection = function() {
// true if there are any selected deletable nodes or links,
// or if there are any selected items within nodes
return go.CommandHandler.prototype.canDeleteSelection.call(myDiagram.commandHandler) ||
findAllSelectedItems().length > 0;
};
myDiagram.commandHandler.deleteSelection = function() {
var items = findAllSelectedItems();
if (items.length > 0) { // if there are any selected items, delete them
myDiagram.startTransaction("delete items");
for (var i = 0; i < items.length; i++) {
var panel = items[i];
var nodedata = panel.part.data;
var itemarray = nodedata.fields;
var itemdata = panel.data;
var itemindex = itemarray.indexOf(itemdata);
myDiagram.model.removeArrayItem(itemarray, itemindex);
}
myDiagram.commitTransaction("delete items");
} else { // otherwise just delete nodes and/or links, as usual
go.CommandHandler.prototype.deleteSelection.call(myDiagram.commandHandler);
}
}; //end of commandHandler
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</script>
<textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
"nodeDataArray": [
{"key":1, "text":"Main 1", "isGroup":true, "category":"OfGroups"},
{"key":2, "text":"Main 2", "isGroup":true, "category":"OfGroups"},
{"key":3, "text":"Group A", "isGroup":true, "category":"OfNodes", "group":1},
{"key":4, "text":"Group B", "isGroup":true, "category":"OfNodes", "group":1},
{"key":5, "text":"Group C", "isGroup":true, "category":"OfNodes", "group":2},
{"key":6, "text":"Group D", "isGroup":true, "category":"OfNodes", "group":2},
{"key":7, "text":"Group E", "isGroup":true, "category":"OfNodes", "group":6},
{"text":"first A", "group":3, "key":-7 },
{"text":"second A", "group":3, "key":-8},
{"text":"first B", "group":4, "key":-9},
{"text":"second B", "group":4, "key":-10},
{"text":"third B", "group":4, "key":-11},
{"text":"first C", "group":5, "key":-12},
{"text":"second C", "group":5, "key":-13},
{"text":"first D", "group":6, "key":-14},
{"text":"first E", "group":7, "key":-15},
{"key":"01", "color":"blue", "text":"Set", "fields":[ {"name":"field1"},{"name":"field2"},{"name":"field3"} ], "loc":"16.44921875 12.66328125"}
],
"linkDataArray": [ ]}
</textarea>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent