gojs青铜段位

最新推荐文章于 2023-03-06 09:54:15 发布

FateInTheSky

最新推荐文章于 2023-03-06 09:54:15 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏： gojs

本文链接：https://blog.csdn.net/FateInTheSky/article/details/110393852

gojs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用HTML和JavaScript创建一个动态效果的流程图，包括了代码示例、节点定位、箭头配置和交互功能。通过展示如何利用`go.js`库和自定义模板，读者将学习如何创建和保存图形，以及如何使用工具栏和视觉效果增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()
   
}