0
我正在使用GOjs創建節點並將它們彼此連接，就像流程圖一樣。我有兩個div。在第一個div（id =「NodesContainer」）我創建go.Palette並使用第二個div的id（id =「myDiagram」）我正在設計調用Init（）方法的JavaScript節點。如何將左側和右側端口移動到節點圖像的中心而不是整個節點的中心
當我連接兩個節點時，節點的左右端口形成整個節點大小的中心，而不是節點形狀的中心。 因此，當我們連接節點時，它看起來很奇怪。
如何將左端口和右端口的位置移動到節點圖像中心的較小位置上？如果你知道答案，請幫助我。
這是我真正想要的圖像。 Please click here to see the image
//initialize the Palette that is on the top side of the page
NodesContainer =
$(go.Palette, "NodesContainer", // must name or refer to the DIV HTML element
{
//"animationManager.duration": 800, // slightly longer than default (600ms) animation
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: "START", img: "../../Content/images/Start_Node.png" },
{ category: "END", img: "../../Content/images/End_Node.png" },
{ category: "ConnectorIn", img: "../../Content/images/Connector_In_Node.png" },
{ category: "ConnectorOut", img: "../../Content/images/Connector_Out_Node.png" },
{ category: "Comment", img: "../../Content/images/Comment_Node.png" },
{ category: "DECISION", img: "../../Content/images/Decision_Node.png" },
{ category: "Execution", img: "../../Content/images/Custom_Execution_Node.png" }
])
});
//end of Initialize the Palette that is on the top side of the page
function initNodes() {
var vargojsshapetextsize = [];
if (window.goSamples) goSamples();
function nodeStyle() {
return [
// The Node.location comes from the "loc" property of the node data,
// converted by the Point.parse static method.
// If the Node.location is changed, it updates the "loc" property of the node data,
// converting back using the Point.stringify static method.
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{
// the Node.location is at the center of each node
locationSpot: go.Spot.Center,
//isShadowed: true,
//shadowColor: "#888",
// handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, obj) { showPorts(obj.part, true); },
mouseLeave: function (e, obj) { showPorts(obj.part, false); }
}
];
}
// Define a function for creating a "port" that is normally transparent.
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $(go.Shape, "Circle",
{
fill: "transparent",
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(8, 8),
alignment: spot,
alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output,
toLinkable: input, // declare whether the user may draw links to/from here
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromMaxLinks: 1,
toMaxLinks: 1,// declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
// Make link labels visible if coming out of a "conditional" node.
// This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
if (label !== null)
label.visible = (e.subject.fromNode.data.figure === "Diamond");
}
// Make all ports on a node visible when the mouse is over the node
function showPorts(node, show) {
var diagram = node.diagram;
if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
node.ports.each(function (port) {
port.stroke = (show ? "#3e7dba" : null);
});
}
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagram", // must name or refer to the DIV HTML element
{
initialContentAlignment: go.Spot.TopCenter,
allowDrop: true, // must be true to accept drops from the Palette
initialContentAlignment: go.Spot.Center, //For Allignment
"undoManager.isEnabled": true,
//allowResize:true,
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel,
"animationManager.duration": 1200, // slightly longer than default (600ms) animation
"undoManager.isEnabled": true // enable undo & redo
});
// define the Node templates for regular nodes
var lightText = 'whitesmoke';
myDiagram.nodeTemplateMap.add("TaskNodes",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Vertical",
$(go.Picture,
{
maxSize: new go.Size(30, 30),
portId: "",
},
new go.Binding("source", "img")),
$(go.TextBlock,
{
margin: new go.Margin(3, 0, 0, 0),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
font: "5pt sans-serif",
isMultiline: true,
editable: true,
height: 14,
width: 30,
stroke: "black"
},
new go.Binding("text", "text").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
));
myDiagram.nodeTemplateMap.add("Execution",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
));
}
是的，你說得對，我只是錯過了粘貼代碼確切的節點。 現在我已經更新了我的代碼。有一個名爲「TaskNodes」的節點，它具有我想要的節點的屬性，除了左右端口位置問題。請看看這個。 –
我已更新答案以反映您的TaskNodes模板。 –
感謝Jon Hardy，讓我在我的頁面上試試你的代碼。在此之後我會讓你知道這些變化。 –