goDataInspector实现审批流程图工作流拖拽设计效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：goDataInspector实现审批流程图工作流拖拽设计效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content=""/>
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/goDataInspector.css">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go-1.89.js"></script>
<script type="text/javascript" src="//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 = "transpare.........完整代码请登录后点击上方下载按钮下载查看