如何将左右端口移动到节点图像的中心而不是整个节点的中心
How can I move left and right ports to the center of node image instead of at the center of whole node
我正在使用 GOjs 创建节点并将它们像流程图一样相互连接。我有两个 div。在第一个 div (id="NodesContainer") 中，我正在创建 go.Palette 并使用第二个 div (id="myDiagram") 的 id 我是在 javascript.
中设计调用 Init() 方法的节点
当我连接两个节点时，节点的左右端口形成在整个节点大小的中心，而不是节点形状的中心。
因此，当我们连接节点时，它看起来很奇怪。
如何将左右端口的位置移动到节点图像中心的上方一点？知道答案的请帮助我。
这是我想要的图片。 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)
));
}
在垂直面板中构建您的节点模板，使用包含端口的内部点面板，如下所示：
myDiagram.nodeTemplateMap.add("TaskNodes",
$(go.Node, "Vertical", nodeStyle(),
$(go.Panel, "Spot",
$(go.Picture,
{
maxSize: new go.Size(30, 30),
portId: "",
},
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)
), // end Spot Panel
$(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()
)
)
);
我正在使用 GOjs 创建节点并将它们像流程图一样相互连接。我有两个 div。在第一个 div (id="NodesContainer") 中，我正在创建 go.Palette 并使用第二个 div (id="myDiagram") 的 id 我是在 javascript.
中设计调用 Init() 方法的节点当我连接两个节点时，节点的左右端口形成在整个节点大小的中心，而不是节点形状的中心。 因此，当我们连接节点时，它看起来很奇怪。
如何将左右端口的位置移动到节点图像中心的上方一点？知道答案的请帮助我。
这是我想要的图片。 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)
));
}
在垂直面板中构建您的节点模板，使用包含端口的内部点面板，如下所示：
myDiagram.nodeTemplateMap.add("TaskNodes",
$(go.Node, "Vertical", nodeStyle(),
$(go.Panel, "Spot",
$(go.Picture,
{
maxSize: new go.Size(30, 30),
portId: "",
},
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)
), // end Spot Panel
$(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()
)
)
);