gojs实现流程图绘制拖动效果
代码语言：html
所属分类：图表
代码描述：gojs实现流程图绘制拖动效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/goDataInspector.css">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/go-1.89.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/goDataInspector.js"></script>
<script id="code">
function init() {
if (window.goSamples) goSamples();
var $$ = go.GraphObject.make;
myDiagram =
$$(go.Diagram, "myDiagramDiv", // 创建空的背景图
{
initialContentAlignment: go.Spot.Center,
allowCopy: false,
allowDrop: true, // must be true to accept drops from the Palette 必须接受来自调色板的元素
"LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
"LinkRelinked": showLinkLabel,
scrollsPageOnFocus: false,
"undoManager.isEnabled": true, // 启用撤销和恢复
allowRelink : false
}
);
// helper definitions for node templates
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
}
];
}
// Define a function for creating a "port" that is normally transparent.
// The "name" is used as the GraphObject.portId,
// the "align" is used to determine where to position the port relative to the body of the node,
// the "spot" is used to control how links connect with the port and whether the port
// stretches along the side of the node,
// and the boolean "output" and "input" arguments control whether the user can draw links from or to the port.
function makePort(name, align, spot, output, input, maxLinks) {
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
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, // 声明用户是否可以from here
fromMaxLinks: maxLinks,
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,0,255,0.5)";
},
mouseLeave: function (e, port) {
port.fill = "transparent";
}
});
}
function textStyle() {
return {
font: "bold 11pt Helvetica, Arial, sans-serif",
stroke: "whitesmoke"
}
}
// define the Node templates for regular nodes
myDiagram.nodeTemplateMap.add("Default", // the default category 文本节点
$$(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$$(go.Panel, "Auto",
$$(go.Shape, "RoundedRectangle",
{fill: "#ffc107", strokeWidth: 0},
new go.Binding("figure", "figure")),
$$(go.TextBlock, textStyle(),
{
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("text").makeTwoWay())
),
// four named ports, one on each side:
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.nodeTemplateMap.add("Conditional", //判断节点
$$(go.Node, "Table", nodeStyle(),
// the main object is a Panel that surrounds a TextBlock with a rectangular Shape
$$(go.Panel, "Auto",
$$(go.Shape, "Diamond",
{fill: "#00A9C9", strokeWidth: 0},
new go.Binding("figure", "figure")),
$$(go.TextBlock, textStyle(),
{
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true
},
new go.Binding("text").makeTwoWay())
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, true, true),
makePort("R", go.Spot.Right, go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
)
);
myDiagram.nodeTemplateMap.add("Start", // 开始节点
$$(go.Node, "Table", nodeStyle(),{
deletable: false
},
$$(go.Panel, "Auto",
$$(go.Shape, "Circle",
{minSize: new go.Size(40, 40), fill: "#937367", strokeWidth: 0}),
$$(go.TextBlock, "Start", textStyle(),
new go.Binding("text"))
),
// three named ports, one on each side except the top, all output only:
makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false, 1)
));
myDiagram.nodeTemplateMap.add("End", //结束节点
$$(go.Node, "Table", nodeStyle(),{
deletable: false
},
$$(go.Panel, "Auto",
$$(go.Shape, "Circle",
{minSize: new go.Size(40, 40), fill: "#DC3C00", strokeWidth: 0}),
$$(go.TextBlock, "End", textStyle(),
new go.Binding("text"))
),
// three named ports, one on each side except the bottom, all input only:
makePort("T", go.Spot.Top, go.Spot.Top, false, true),
makePort("L", go.Spot.Left, go.Spot.Left, false, true),
makePort("R", go.Spot.Right, go.Spot.Right, false, true)
));
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
$$(go.Link, // the whole link panel
{
routing: go.Link.AvoidsNodes, //避开其他节点
curve: go.Link.JumpOver, //连线的样式
corner: 5, //角
toShortLength: 4,
/*****************************************************************/
relinkableFrom: false,
relinkableTo: false,
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";
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0