gojs实现流程图绘制拖动效果-html代码-BFW代码库

代码语言：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(),
                            {
                     .........完整代码请登录后点击上方下载按钮下载查看