Перетаскивание из палитры не создает копию графического объекта в палитре. Вместо этого появляется маленький объект (см. Изображение). Одна ошибка: Ошибка: GraphObject.contextMenu должен быть Украшением или HTMLInfo. Я не мог найти почему. Я попытался изменить HTML, myPalette, но ничего не изменилось. Перетащите результат с плохим графическим объектом.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontLarge = "30px sans-serif";
var portSize = new go.Size(8, 8);
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
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); },
"commandHandler.archetypeGroupData": { isGroup: true, category: "OfGroups" },
"undoManager.isEnabled": true
});
myPalette =
$(go.Palette, "myPaletteDiv");
myPalette.groupTemplate =
$(go.Group, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding('location'),
$(go.Shape, "Rectangle",
{ margin: new go.Margin(5, 0, 0, 0),width: 50, height:50, stroke: "rgb(0, 0, 200)", strokeWidth: 4,fill: 'white' },
// Shape.fill is bound to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: new go.Margin(25, 0, 0, 0), font: "bold 16px sans-serif", width: 45, height:45, textAlign: 'center' },
// TextBlock.text is bound to Node.data.key
new go.Binding("text"))
);
myPalette.model = new go.GraphLinksModel([
{ //key: 101,
text: 'UNIT',
leftArray: [], rightArray: [],
isGroup: true, isSubProcess: true,
category: "OfGroups", isAdHoc: true,
loc: '0 0' },
]);
////////////// groupTemplateMap ///////////////////////////////////
myDiagram.groupTemplateMap.add("OfGroups",
$(go.Group, "Table",// ENTIRE PART
{ locationObjectName: "BODY",
//locationSpot: go.Spot.Center,
selectionObjectName: "PH",
resizable: true,
resizeObjectName: "PH",
contextMenu: nodeMenu,
background: "transparent",
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: false,
mouseDrop: finishDrop,
handlesDragDropForMembers: true // don't need to define handlers on member Nodes and Links
},
new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the body
$(go.Panel, "Table",
{ row: 1, column: 1, name: "BODY"
//stretch: go.GraphObject.Fill
},
$(go.Shape, "Rectangle",
{ fill: null, stroke: "rgb(0, 0, 200)", strokeWidth: 3,name: "PH",
minSize: new go.Size(26, 26) }),
$(go.Panel, "Vertical", // title above Placeholder
{alignment: go.Spot.Top},
$(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)//...suppressed OK
) // end Vertical Panel
), // end Auto Panel body
$(go.Panel, "Vertical", // LEFT PORTS Customer->Supplier (Orders, Payments)
new go.Binding("itemArray", "leftArray"),
{ row: 1, column: 0,
itemTemplate:
$(go.Panel,
{ _side: "left", // internal property to make it easier to tell which side it's on
fromSpot: go.Spot.Left, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer"},
new go.Binding("portId", "portId"),
$(go.Shape, "Circle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1,0) },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Vertical Panel
$(go.Panel, "Vertical",// RIGHT PORTS Customer->Supplier (Orders, Payments)
new go.Binding("itemArray", "rightArray"),
{ row: 1, column: 2,
itemTemplate:
$(go.Panel,
{ _side: "right",
fromSpot: go.Spot.Left, toSpot: go.Spot.Right,
fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("portId", "portId"),
$(go.Shape, "Circle",
{ stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1, 0) },
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Vertical Panel
)// end ENTIRE PART
); // end groupTemplateMap.add("OfGroups"
var nodeDataArray = [];
var linkDataArray = [];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
myDiagram.model.linkFromPortIdProperty = "fromPort"; // necessary to remember portIds
myDiagram.model.linkToPortIdProperty = "toPort";
myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true;
// 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();
}
// LL
// when the document is modified, add a "*" to the title and enable the "Save" button
// To simplify this code we define a function for creating a context menu button:
function makeButton(text, action, visiblePredicate) {
return $("ContextMenuButton",
$(go.TextBlock, text),
{ click: action },
visiblePredicate ? new go.Binding("visible", "", function(o, e) { return o.myDiagram ? visiblePredicate(o, e) : false; }).ofObject() : {});
//}
}
var nodeMenu = // context menu for each Node
$(go.Adornment, "Horizontal",
makeButton("Add left port",
function (e, obj) { addPort("left"); }),
makeButton("Add right port",
function (e, obj) { addPort("right"); })
); //Leon end nodeM
// Add a port to the specified side of the selected nodes.
function addPort(side) {
myDiagram.startTransaction("addPort");
myDiagram.selection.each(function(node) {
// skip any selected Links
if (!(node instanceof go.Node)) return;
// compute the next available index number for the side
var i = 0;
while (node.findPort(side + i.toString()) !== node) i++;
// now this new port name is unique within the whole Node because of the side prefix
var name = side + i.toString();
// get the Array of port data to be modified
var arr = node.data[side + "Array"];
if (arr) { console.log("arr is true")
// create a new port data object
var newportdata = {
portId: name,
portColor: "rgb(180, 0, 0)" //go.Brush.randomColor()
// if you add port data properties here, you should copy them in copyPortData above
};
// and add it to the Array of port data
myDiagram.model.insertArrayItem(arr, -1, newportdata);
}
});
myDiagram.commitTransaction("addPort");
}
}// end function init
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="For banner & placeholder save..." style:"grid-column-start: 1;">
<div id="myPaletteDiv" style="display: inline-block; width: 100px; height: 70px; margin-right: 3px; background-color: whitesmoke; border: solid 0px black;">
</div>
<div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
</div>
</div>
</div>
</body>
</html>