gojs+vue自用笔记

在使用gojs的时候英文文档看不懂，逐渐摸索出来的记录一下

https://gojs.net.cn/intro/index.html 部分中文文档网站

实现样式：

1.页面布局样式

<template>
  <div id="wrap">
    <div id="chart-wrap">
      <div class="cold-drag-menu" >
        <div  class="cold-menu-item">
          <div class="menu-title" @click="displayOrHideFirstDiv()">
            {{title}}
          </div>
          <div class="cold-palette" v-show="showPrise" id="chart-palette"></div>
        </div>
        <div class="cold-menu-item">
          <div class="menu-title" @click="displayOrHideSecondDiv()">
            {{title2}}
          </div>
        <div class="other-cold-palette" v-show="showPrise2" id="chart-palette2"></div>
      </div>
    </div>
    <div id="chart-diagram"></div>
      <div id="infobox" style="display: inline-block; vertical-align: top; width: 256px; background: #757575; color: #FFF; padding: 20px;">
        <img id="Image" width="216" alt="" src="">
        <h3 id="Title"></h3>
   </div>
      <Row>
        <Col offset="23">
          <Button @click="onSubmit" type="success">提交</Button>
        </Col>
     </Row>
  </div>
</template>

css部分：

<style lang="less" scoped>
#form-wrap {
  padding: 20px 40px;
  // background-color: white;
  border: solid 1px rgb(244, 244, 244);
}

#submit {
  width: 102px;
  height: 40px;
  float: right;
  margin: 20px 5px 16px 0;
}
#chart-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;

  #chart-palette {
    width: 180px;
    height: 400px;
    margin-right: 30px;
    background-color: white;
    border: solid 1px rgb(244, 244, 244);
  }

  #chart-diagram {
    flex-grow: 1;
    height: 720px;
    background-color: white;
    border: solid 1px rgb(244, 244, 244);
  }
}
.cold-drag-menu {
  width: 180px;
  height: 720px;
  margin-right: 30px;
  border: solid 1px rgb(244, 244, 244);
  background-color: white;

  .cold-menu-item {
    .menu-title {
      padding: 10px;
      font-weight: bold;
      font-size: 16px;
      background: #f2f2f2;
      box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.3);
      user-select: none;
    }

    .cold-palette,
    .other-cold-palette,
    .func-cold-palette {
      width: 160px;
      height: 300px;
      border-bottom: 1px solid #f2f2f2;
    }
  }

  .cold-menu-zoom {
    position: absolute;
    top: 100px;
    bottom: 100px;
    right: -30px;
    padding: 4px;
    width: 30px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;

    img {display: block;
      margin: auto;
      width: 20px;
      height: 20px;
    }
  }
}
#chart-palette{
  max-height: 400px;
}

#chart-palette2{
  max-height: 220px;
}
#lateEntry {
  clear: both;
  background-color: rgb(255, 255, 255);
  border: solid 1px rgb(244, 244, 244);

  >span {
    display: inline-block;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    text-indent: 30px;
    letter-spacing: 0.8px;
    text-align: left;
    color: rgb(35, 35, 35);
    // border-bottom: 1px solid rgb(234, 234, 234);
  }
}
</style>

2.设置左侧组件

window.myPalette = MAKE(
          go.Palette,
          "chart-palette", // must name or refer to the DIV HTML element
          {
            scrollsPageOnFocus: false,
            nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
            model: new go.GraphLinksModel([
              // specify the contents of the Palette
              {
                category: "imageModel",
                text: "图片1",
                description: "图片一是只猛虎啊",
                source: require("../../../assets/1.jpg"),
                alt: "正在加载...",
              },
              {
                category: "imageModel",
                text: "图片2",
                description: "图片一是只猫咪啊",
                source: require("../../../assets/2.jpg"),
                alt: "正在加载...",
              },
              {
                category: "imageModel",
                text: "图片3",
                description: "图片一是只兔子啊",
                source: require("../../../assets/3.jpg"),
                alt: "正在加载...",
              },
              {
                category: "imageModel",
                text: "图片4",
                description: "图片一是只大象啊",
                source: require("../../../assets/4.jpg"),
                alt: "正在加载...",
              },
            ])
          }
      );

mySelf.myDiagram.nodeTemplateMap.add(
        "Next",
        MAKE(
            go.Node,
            "Spot",{
              locationSpot: go.Spot.Center
            },
            // nodeStyle(),
            MAKE( //声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
                go.Panel, //表明需要创建一个panel面板对象
                "Auto", //页面布局为自动
                MAKE( //声明构建一个圆角矩形
                    go.Shape,
                    "RoundedRectangle", {
                    fill: "#44CCFF",
                      stroke: '#FFF',
                      strokeWidth: 1,
                      angle: 0,
                    },
                    new go.Binding("figure", "figure") //声明并创建一个新的图形
                ),
             MAKE( //声明一个可编辑文本域
                    go.TextBlock, {
                      font: "12pt Helvetica, Arial, sans-serif",
                      stroke: lightText,
                      width: 125,
                      maxSize: new go.Size(360, NaN),
 					 wrap: go.TextBlock.WrapFit, //文本域换行
                      editable: true, //是否可编辑
                      margin: 12,
                    },
                    new go.Binding("text").makeTwoWay()
                )
            ),
            // eight named ports, one on each side:
            makePort("TC", go.Spot.TopCenter, true, true),
            makePort("TL", go.Spot.TopLeft, true, true),
            makePort("BL", go.Spot.BottomLeft, true, true),
            makePort("LC", go.Spot.LeftCenter, true, true),
            makePort("TR", go.Spot.TopRight, true, true),
            makePort("BR", go.Spot.BottomRight, true, true),
            makePort("RC", go.Spot.RightCenter, true, true),
            makePort("BC", go.Spot.BottomCenter, true, true),
        )
    );

//Node连接线
    function makePort(name, spot, output, input) {
      return MAKE(go.Shape, "Circle", {
        fill: "transparent",
        stroke: null, // this is changed to "white" in the showPorts function
        desiredSize: new go.Size(10, 10),
		alignment: spot,
        alignmentFocus: spot, // align the port on the main Shape
        portId: name, // declare this object to be a "port"
        fromSpot: spot,
        toSpot: spot, // declare where links may connect at this port
        fromLinkable: output,
        toLinkable: input, // declare whether the user may draw links to/from here
        cursor: "pointer" // show a different cursor to indicate potential link point
      });
    };

第一部分进行了定义，图片引入的时候需要使用“require”进行引入，第二部分是对第一部分定义的内容的一个设置，locationSpot设置的是左侧组件的位置，makePort设置的是出入锚点。

3.点击对象事件

mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
      //点击对象
      console.log(e.subject.part);
      onSelectionChanged();
    });
function onSelectionChanged() {
      var node = mySelf.myDiagram.selection.first();
      if (!(node instanceof go.Node)) return;
      var data = node.data;
      var image = document.getElementById("Image");
      var title = document.getElementById("Title");
      var description = document.getElementById("Description");

      if (data.source) {
        image.src = data.source;
        image.alt = data.alt;
      } else {
      image.src = "";
        image.alt = "";
      }
      console.log(data);
      title.textContent = data.text;
      description.textContent = data.description;
    }//这块实现的右侧区域展示内容

这部分实现的是点击对象之后右侧展示的内容

4.连线完成监听事件

//自定义流程图连接线相关配置
    mySelf.myDiagram.linkTemplate = MAKE(go.Link, {
          curve: go.Link.JumpGap
        }, // 更改曲线方式
        // {
          // routing: go.Link.Orthogonal,
          // corner: 15
        // },//是否每条线都是水平或者垂直的
        MAKE(go.Shape, {
          strokeWidth: 5,
          stroke: "#000000",
          isPanelMain:true
        }),
        MAKE(go.Shape, {
          strokeWidth: 3,
          stroke: "#8e8e8e",
          isPanelMain:true
        }),
        MAKE(go.Shape, {
          strokeWidth: 1,
          stroke: "#ffffff",
          isPanelMain:true,
          name: "PIPE",
   		  strokeDashArray: [10, 10]
        }),
        MAKE(go.Shape, {
          toArrow: "Standard",
          fill: "red",
          stroke: "blue"
          })//箭头
        // MAKE(go.TextBlock, {
        //       margin: 20,
        //       stroke: "blue",
        //       font: "14px sans-serif",
        //       width: 50,
        //       wrap: go.TextBlock.WrapDesiredSize
        //     },
        //     new go.Binding("text", "linktext")), {
        //   toolTip: MAKE(go.Adornment, "Auto",
        //       MAKE(go.Shape, {
        //         fill: "#FFFFCC"
        //       }),
        //       MAKE(go.TextBlock, {
        //         margin: 4
        //       }, new go.Binding("text", "name1"))
        //   ) // end of Adornment
        // }//这块应该是文本域
        );


mySelf.myDiagram.addDiagramListener("LinkDrawn",function(e){
      //监听连线完成事件
      console.log(e.subject.data )    //这是这个线条的数据
      loop();
    }) ;

function loop() {
      var diagram = mySelf.myDiagram;
      setTimeout(function() {
        var oldskips = diagram.skipsUndoManager;
        diagram.skipsUndoManager = true;
        diagram.links.each(function(link) {
          var shape = link.findObject("PIPE");
          var off = shape.strokeDashOffset - 2;
          shape.strokeDashOffset = (off <= 0) ? 20 : off;
        });
        diagram.skipsUndoManager = oldskips;
        loop();
      }, 100);

    }//实现流动的线条
    

这部分实现的是连线的流动效果

5.连线贴图

myDiagram.linkTemplate =
  $(go.Link,  // 首先创建一个连线模板对象
    { routing: go.Link.AvoidsNodes },  // 设置避免节点
    new go.Binding("points").makeTwoWay(),  // 可以动态调整连接点，需要双向绑定points属性
    $(go.Shape,  // 定义形状，也就是连线
      { strokeWidth: 2 },
      new go.Binding("stroke", "color")  // 动态绑定颜色属性
    ),
    $(go.Picture,  // 在连线上添加图片
      {
        source: "https://picsum.photos/50/50",  // 图片来源
        width: 20,
        height: 20,
        segmentIndex: -1,  // 放置在连线末端
        segmentOffset: new go.Point(NaN, NaN),  // 居中放置
        cursor: "pointer",
        click: function(e, obj) {
          alert("你点击了连线上的图片！");
        }
      },
      new go.Binding("source"),  // 动态绑定图片来源
      new go.Binding("visible").ofObject()  // 可见性和父元素一致
    )
  );

myDiagram.linkTemplate =
    $(go.Link,
        {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            reshapable: true, 
            resegmentable: true,
        },
        new go.Binding("points").makeTwoWay(),
        $(go.Shape, {
            fill: "transparent",
            strokeWidth: 2,
            stroke: "black",
            strokeDashArray: null,
        }),
        $(go.Shape, { 
            // 设置线上的贴图为一段矩形图案
            figure: "Rectangle",
            fill: $(go.Brush, "Linear", { start: go.Spot.Left, end: go.Spot.Right, color1: "#FFFFFF", color2: "#E0E0E0" }),
            stroke: null,
            width: 10,
            height: 20,
        })
    );

以上示例定义了一个Link模板，它包含了两个Shape元素，第二个Shape元素就是要进行贴图的元素。通过设置Shape元素的figure、fill、stroke等属性，可以实现线上贴图的效果。上述示例将贴图元素设置成一个宽度为10，高度为20的矩形，填充色为线性渐变的白色到灰色。当然，你也可以根据实际需求来设置贴图元素的属性。