// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Top,
isShadowed: true, shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)"
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{
name: "SHAPE", fill: "#ffffff", strokeWidth: 0,
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.TextBlock,
{
font: "bold small-caps 11pt helvetica, bold arial, sans-serif", margin: 7, stroke: "rgba(0, 0, 0, .87)",
editable: true // editing the text automatically updates the model data
},
new go.Binding("text").makeTwoWay())
);完整代码
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/gojs@2.2.12/release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
// some constants that will be reused within templates
var roundedRectangleParams = {
parameter1: 2, // set the rounded corner
spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight // make content go all the way to inside edges of rounded corners
};
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
"animationManager.initialAnimationStyle": go.AnimationManager.None,
"InitialAnimationStarting": e => {
var animation = e.subject.defaultAnimation;
animation.easing = go.Animation.EaseOutExpo;
animation.duration = 900;
animation.add(e.diagram, 'scale', 0.1, 1);
animation.add(e.diagram, 'opacity', 0, 1);
},
// have mouse wheel events zoom in and out instead of scroll up and down
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
// support double-click in background creating a new node
"clickCreatingTool.archetypeNodeData": { text: "new node" },
// enable undo & redo
"undoManager.isEnabled": true,
positionComputation: function (diagram, pt) {
return new go.Point(Math.floor(pt.x), Math.floor(pt.y));
}
});
// when the document is modified, add a "*" to the title and enable the "Save" button
myDiagram.addDiagramListener("Modified", function (e) {
var button = document.getElementById("SaveButton");
if (button) button.disabled = !myDiagram.isModified;
var idx = document.title.indexOf("*");
if (myDiagram.isModified) {
if (idx < 0) document.title += "*";
} else {
if (idx >= 0) document.title = document.title.slice(0, idx);
}
});
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
locationSpot: go.Spot.Top,
isShadowed: true, shadowBlur: 1,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)"
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{
name: "SHAPE", fill: "#ffffff", strokeWidth: 0,
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.TextBlock,
{
font: "bold small-caps 11pt helvetica, bold arial, sans-serif", margin: 7, stroke: "rgba(0, 0, 0, .87)",
editable: true // editing the text automatically updates the model data
},
new go.Binding("text").makeTwoWay())
);
// unlike the normal selection Adornment, this one includes a Button
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{ fill: null, stroke: "#7986cb", strokeWidth: 3 }),
$(go.Placeholder) // a Placeholder sizes itself to the selected Node
),
// the button to create a "next" node, at the top-right corner
$("Button",
{
alignment: go.Spot.TopRight,
// click: addNodeAndLink // this function is defined below
},
$(go.Shape, "PlusLine", { width: 6, height: 6 })
) // end button
); // end Adornment
myDiagram.nodeTemplateMap.add("Start",
$(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Circle",
{
fill: "#52ce60", /* green */
stroke: null,
portId: "",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.TextBlock, "Start",
{
font: "bold 16pt helvetica, bold arial, sans-serif",
stroke: "whitesmoke"
})
)
);
myDiagram.nodeTemplateMap.add("End",
$(go.Node, "Spot", { desiredSize: new go.Size(75, 75) },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Circle",
{
fill: "maroon",
stroke: null,
portId: "",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.Shape, "Circle", { fill: null, desiredSize: new go.Size(65, 65), strokeWidth: 2, stroke: "whitesmoke" }),
$(go.TextBlock, "End",
{
font: "bold 16pt helvetica, bold arial, sans-serif",
stroke: "whitesmoke"
})
)
);
// 单击按钮会在所选节点的右侧插入一个新节点，
// 并向该新节点添加一个链接
// function addNodeAndLink(e, obj) {
// var adornment = obj.part;
// var diagram = e.diagram;
// diagram.startTransaction("Add State");
// // get the node data for which the user clicked the button
// var fromNode = adornment.adornedPart;
// var fromData = fromNode.data;
// // create a new "State" data object, positioned off to the right of the adorned Node
// var toData = { text: "new" };
// var p = fromNode.location.copy();
// p.x += 200;
// toData.loc = go.Point.stringify(p); // the "loc" property is a string, not a Point object
// // add the new node data to the model
// var model = diagram.model;
// model.addNodeData(toData);
// // create a link data from the old node data to the new node data
// var linkdata = {
// from: model.getKeyForNodeData(fromData), // or just: fromData.id
// to: model.getKeyForNodeData(toData),
// text: "transition"
// };
// // and add the link data to the model
// model.addLinkData(linkdata);
// // select the new Node
// var newnode = diagram.findNodeForData(toData);
// diagram.select(newnode);
// diagram.commitTransaction("Add State");
// // if the new node is off-screen, scroll the diagram to show the new node
// diagram.scrollToRect(newnode.actualBounds);
// }
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
curve: go.Link.Bezier,
adjusting: go.Link.Stretch,
reshapable: true, relinkableFrom: true, relinkableTo: true,
toShortLength: 3
},
new go.Binding("points").makeTwoWay(),
new go.Binding("curviness"),
$(go.Shape, // the link shape
{ strokeWidth: 1.5 },
new go.Binding('stroke', 'progress', progress => progress ? "#52ce60" /* green */ : 'black'),
new go.Binding('strokeWidth', 'progress', progress => progress ? 2.5 : 1.5)),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null },
new go.Binding('fill', 'progress', progress => progress ? "#52ce60" /* green */ : 'black')),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial",
{ 0: "rgb(245, 245, 245)", 0.7: "rgb(245, 245, 245)", 1: "rgba(245, 245, 245, 0)" }),
stroke: null
}),
$(go.TextBlock, "transition", // the label text
{
textAlign: "center",
font: "9pt helvetica, arial, sans-serif",
margin: 4,
editable: true // enable in-place editing
},
// editing the text automatically updates the model data
new go.Binding("text").makeTwoWay())
)
);
// read in the JSON data from the "mySavedModel" element
load();
}
// Show the diagram's model in JSON format
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv"
style="border: 1px solid black; width: 100%; height: 460px; background: whitesmoke; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);">
<canvas tabindex="0" width="1246" height="458"
style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1246px; height: 458px;">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">如果您的浏览器不支持 Canvas HTML 元素，则会显示此文本。</font>
</font>
</canvas>
<div style="position: absolute; overflow: auto; width: 1246px; height: 458px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
</div>
<textarea id="mySavedModel" style="width:100%;height:300px">{ "class": "go.GraphLinksModel",
"nodeKeyProperty": "id",
"nodeDataArray": [
{"id":-1, "loc":"155 -138", "category":"Start"},
{"id":0, "loc":"190 15", "text":"Shopping"},
{"id":1, "loc":"353 32", "text":"Browse Items"},
{"id":2, "loc":"353 166", "text":"Search Items"},
{"id":3, "loc":"512 12", "text":"View Item"},
{"id":4, "loc":"661 17", "text":"View Cart"},
{"id":5, "loc":"644 171", "text":"Update Cart"},
{"id":6, "loc":"800 96", "text":"Checkout"},
{"id":-2, "loc":"757 229", "category":"End"}
],
"linkDataArray": [
{ "from": -1, "to": 0, "text": "Visit online store" },
{ "from": 0, "to": 1, "progress": "true", "text": "Browse" },
{ "from": 0, "to": 2, "progress": "true", "text": "Use search bar" },
{ "from": 1, "to": 2, "progress": "true", "text": "Use search bar" },
{ "from": 2, "to": 3, "progress": "true", "text": "Click item" },
{ "from": 2, "to": 2, "text": "Another search", "curviness": 20 },
{ "from": 1, "to": 3, "progress": "true", "text": "Click item" },
{ "from": 3, "to": 0, "text": "Not interested", "curviness": -100 },
{ "from": 3, "to": 4, "progress": "true", "text": "Add to cart" },
{ "from": 4, "to": 0, "text": "More shopping", "curviness": -150 },
{ "from": 4, "to": 5, "text": "Update needed", "curviness": -50 },
{ "from": 5, "to": 4, "text": "Update made" },
{ "from": 4, "to": 6, "progress": "true", "text": "Proceed" },
{ "from": 6, "to": 5, "text": "Update needed" },
{ "from": 6, "to": -2, "progress": "true", "text": "Purchase made" }
]
}
</textarea>
</div>
</div>
</body>
</html>
请登录后查看回复内容