如何在 GOjs 中拖动时增加节点大小？
How can I increase node size on dragging in GOjs?
我正在使用 GOjs 创建节点并将它们像流程图一样相互连接。
我有两个 div。在第一个 div (id="NodesContainer") 中，我正在创建 go.Palette 并使用第二个 div (id="myDiagram") 的 id在 javascript 中设计调用 Init() 方法的节点。您可以在代码块中看到。
我想要的只是，当我将节点拖到第二个 div 时，节点的大小应该变大。
知道答案的请帮帮我
//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");
}
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("START",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// One named port, at the bottom side, all output only:
makePort("B", go.Spot.Bottom, true, false)
));
myDiagram.nodeTemplateMap.add("END",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, false, true),
makePort("R", go.Spot.Right, false, true)
));
myDiagram.nodeTemplateMap.add("Execution",
$(go.Node, "Spot", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(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)
));
}
//Init()结束
enter image description here
最简单的做法是将 Palette.initialScale 设置为小于 1.0 的值。这样，调色板中的项目在放入主图中后看起来比节点小。
真正改变大小（在文档坐标中）的替代方法是实现一个 "ExternalObjectsDropped" DiagramEvent 侦听器而不是运行 e.subject，它将是一个GoJS集合，实际修改每个节点的大小。
我正在使用 GOjs 创建节点并将它们像流程图一样相互连接。 我有两个 div。在第一个 div (id="NodesContainer") 中，我正在创建 go.Palette 并使用第二个 div (id="myDiagram") 的 id在 javascript 中设计调用 Init() 方法的节点。您可以在代码块中看到。 我想要的只是，当我将节点拖到第二个 div 时，节点的大小应该变大。 知道答案的请帮帮我
//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");
}
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("START",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// One named port, at the bottom side, all output only:
makePort("B", go.Spot.Bottom, true, false)
));
myDiagram.nodeTemplateMap.add("END",
$(go.Node, "Spot", nodeStyle(),
$(go.Panel, "Auto",
$(go.Picture,
{
maxSize: new go.Size(30, 30)
},
new go.Binding("source", "img"))
),
// three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, false, true),
makePort("R", go.Spot.Right, false, true)
));
myDiagram.nodeTemplateMap.add("Execution",
$(go.Node, "Spot", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$(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)
));
}
//Init()结束 enter image description here
最简单的做法是将 Palette.initialScale 设置为小于 1.0 的值。这样，调色板中的项目在放入主图中后看起来比节点小。
真正改变大小（在文档坐标中）的替代方法是实现一个 "ExternalObjectsDropped" DiagramEvent 侦听器而不是运行 e.subject，它将是一个GoJS集合，实际修改每个节点的大小。