1、效果图
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./go.js"></script>
<style>
html{
height: 100%;
}
body{
margin: 0;
height: 100%;
}
.box{
display: flex;
justify-content: space-between;
height: 100%;
background-color: #282c34;
box-sizing: border-box;
padding: 8px;
position: relative;
}
#myPaletteDiv{
background-color: #282c34;
width: 180px;
height: 100%;
border-right: 2px solid #fff;
box-sizing: border-box;
}
#myDiagramDiv{
background-color: #282c34;
height: 100%;
flex: 1;
}
.btn-box{
position: absolute;
right: 20px;
z-index: 2;
}
.btn-box button{
border-radius:4px;
background-color: #fff;
border: 1px solid #00A9C9;
color: #00A9C9;
padding: 4px 11px;
cursor: pointer;
}
</style>
</head>
<body onload="init()">
<div class="box">
<div id="myPaletteDiv"></div>
<div id="myDiagramDiv"></div>
<div class="btn-box">
<button onclick="save()">保存</button>
</div>
</div>
<script src="./nodeData.js"></script>
<script src="./demo.js"></script>
</body>
</html>
js代码
//初始配置
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagramDiv", // must name or refer to the DIV HTML element
{
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel,
"undoManager.isEnabled": true, // enable undo & redo
"draggingTool.isGridSnapEnabled": true,
})
//变更节点的位置
function nodeLoc() {
return [
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
}
]
}
//配置箭头
//name是GraphObject.portId，align表示相对主体的位置，spot用于控制线条如何连接以及是否从侧面连接
//output”和“input”参数控制用户是否可以从端口或到端口绘制链接
function makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return $(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
fromLinkable: true,
fromLinkableSelfNode: true, //配置是否可以连接自身（环路）
fromLinkableDuplicates: true,//重复设置连接
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,165,0,0.5)"; //鼠标悬浮四周的线条阴影
},
mouseLeave: function(e, port) {
port.fill = "transparent";
}
});
}
function showLinkLabel(e) {
var label = e.subject.findObject("LABEL");
console.log(label)
if (label !== null){
label.visible = (e.subject.fromNode.data.category === "Conditional");
}
console.log(label)
}
//创建连接线样式模板
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 5, toShortLength: 4,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
resegmentable: true,
// mouse-overs subtly highlight links:
mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; },
selectionAdorned: true
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, // the highlight shape, normally transparent
{ isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
$(go.Shape, // the link path shape
{ isPanelMain: true, stroke: "gray", strokeWidth: 2 },
new go.Binding("stroke", "isSelected", function(sel) { return sel ? "dodgerblue" : "gray"; }).ofObject()),
$(go.Shape, // the arrowhead
{ toArrow: "standard", strokeWidth: 0, fill: "gray" }),
$(go.Panel, "Auto", // the link label, normally not visible
{ visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5 },
new go.Binding("visible", "visible").makeTwoWay(),
$(go.Shape, "RoundedRectangle", // the label shape
{ fill: "#F8F8F8", strokeWidth: 0 }),
$(go.TextBlock, "Yes", // the label
{
textAlign: "center",
font: "10pt helvetica, arial, sans-serif",
stroke: "#333333",
editable: true
},
new go.Binding("text").makeTwoWay())
)
);
//创建节点模版
myDiagram.nodeTemplateMap.add("", // 创建矩形
$(go.Node, "Auto",nodeLoc(),//Horizontal设置节点内容的横向排序方式，node代表整个节点，panel代表里面的一部分
$(go.Panel, "Vertical",//第二个属性设置面板排序方式，Vertical表示垂直排放，这样文字跟图片就是竖直排放
$(go.Picture, // 使用图标设置
{
desiredSize: new go.Size(66, 66),
margin:8
},
new go.Binding("source", "text", convertKeyImage),
),
$(go.TextBlock,
{
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
stroke: "white",
font: "16px sans-serif"
},
// new go.Binding("name").makeTwoWay())
new go.Binding("text", "name"))
),
//设置箭头线条的连接方式，四个方向
makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
))
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, "Spot",
$(go.Placeholder, { padding: 5 }),
makeArrowButton(go.Spot.Top, "TriangleUp"),
makeArrowButton(go.Spot.Left, "TriangleLeft"),
makeArrowButton(go.Spot.Right, "TriangleRight"),
makeArrowButton(go.Spot.Bottom, "TriangleDown"),
// CMButton({ alignment: new go.Spot(0.75, 0) })
);
//获取图片
function convertKeyImage(key){
return './img/' +key +'.png'
}
//装饰节点，单击节点出现的四个三角形
function makeArrowButton(spot, fig) {
var maker = function(e, shape) {
e.handled = true;
e.diagram.model.commit(function(m) {
var selnode = shape.part.adornedPart;
// create a new node in the direction of the spot
var p = new go.Point().setRectSpot(selnode.actualBounds, spot);
p.subtract(selnode.location);
p.scale(2, 2);
p.x += Math.sign(p.x) * 60;
p.y += Math.sign(p.y) * 60;
p.add(selnode.location);
p.snapToGridPoint(e.diagram.grid.gridOrigin, e.diagram.grid.gridCellSize);
// make the new node a copy of the selected node
var nodedata = m.copyNodeData(selnode.data);
// add to same group as selected node
m.setGroupKeyForNodeData(nodedata, m.getGroupKeyForNodeData(selnode.data));
m.addNodeData(nodedata); // add to model
// create a link from the selected node to the new node
var linkdata = { from: selnode.key, to: m.getKeyForNodeData(nodedata) };
m.addLinkData(linkdata); // add to model
// move the new node to the computed location, select it, and start to edit it
var newnode = e.diagram.findNodeForData(nodedata);
newnode.location = p;
e.diagram.select(newnode);
setTimeout(function() {
e.diagram.commandHandler.editTextBlock();
}, 20);
});
};
return $(go.Shape,
{
figure: fig,
alignment: spot, alignmentFocus: spot.opposite(),
width: (spot.equals(go.Spot.Top) || spot.equals(go.Spot.Bottom)) ? 36 : 18,
height: (spot.equals(go.Spot.Top) || spot.equals(go.Spot.Bottom)) ? 18 : 36,
fill: "orange", strokeWidth: 0,
isActionable: true, // needed because it's in an Adornment
click: maker, contextClick: maker
})
}
//加载已经画好的图
function load(){
myDiagram.model = go.Model.fromJson(nodeData);
}
// load()
/*****************创建选盘（工具栏）**************************** */
myPalette =
$(go.Palette, "myPaletteDiv",
{
"animationManager.initialAnimationStyle": go.AnimationManager.None,
// "InitialAnimationStarting": animateFadeDown, // Instead, animate with this function
nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: "Start", text: "robot_error" ,key:'robot_error',name:"robot01"},
{ text:'robot_stand',key:"robot_stand",name:"robot02"},
{ category: "Conditional", text: "vision_error",key:'vision_error',name:"vision01"},
{ category: "End", text: "vision_stand",key:'vision_stand',name:"vision02"},
// { category: "Comment", text: "Comment"}
])
})
}
//保存新的图形已经原有的
function save(){
let newNode = myDiagram.model.toJson()
}
总结
还在青铜段位，更多知识等待开黑探索中…
参考官网的实列流程图1
参考官网链接2
6078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
