gojs在vue中实现画布流程

已于 2024-04-22 21:13:37 修改
阅读量1.4k 收藏 1
点赞数 2
文章标签： vue.js javascript 前端
于 2022-09-23 00:43:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monthover/article/details/127002281
版权

GoJS 是一个用于实现交互式图表的 JavaScript 库，详情可查看官网

根据官网samples实现以下demo
在这里插入图片描述

1.安装gojs插件

npm install gojs --save
或者yarn add gojs

2.在vue组件中引入

import go from "gojs";
const $ = go.GraphObject.make;
const palettes={
     palette0: [
        { palette: "0", type: "start", text: "开始", nyColor: null, from: true },
        { palette: "0", type: "stop", text: "结束", nyColor: null, to: true },
        {
            palette: "0",
            type: "type1",
            text: "demo1",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
        {
            palette: "0",
            type: "type2",
            text: "demo2",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
    ],
    palette1: [
        {
            palette: "1",
            type: "type3",
            text: "demo3",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },
          {
            palette: "1",
            type: "type4",
            text: "demo4",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
          },
        {
            palette: "1",
            type: "type5",
            text: "demo5",
            label: "双击设置",
            nyColor: null,
            from: true,
            to: true,
        },   
    ],
}
let diagram = null;

3.创建div标签元素

<div class="content">
   <div class="left">
      <div id="palette0" class="palette"></div>
      <div id="palette1" class="palette"></div>
   </div>
   <div class="right">
      <div id="diagram" :style="{ height:  'calc(100vh - 305px)' }"></div>
   </div>
</div>

样式部分

.content{
   display:flex;
   .left{
      width:300px;
      .palette {
        width: 100%;
        height: 150px;
      }
   }
   .right{
      flex:1
   }
}

4.行为部分（script）

data() {
    return {
      nodesData: {},
      isReadOnly: false,
    };
},
mounted() {
    that = this;
    diagram = this.createDiagram();
    //   diagram.model = go.Model.fromJson({});
    diagram.commandHandler.canDeleteSelection = function (e) {
      //用例获取选中的节点或线
      return diagram.selection.all(function (nodeOrLink) {
        // console.log(nodeOrLink.data);
        //判断是否存在不允许删除的节点或线
        if (nodeOrLink.data.text == "结束" || nodeOrLink.data.text == "开始") {
          return false;
        } else {
          return true;
        }
      });
    };
    diagram.model.linkFromPortIdProperty = "fromPort";
    diagram.model.linkToPortIdProperty = "toPort";
      diagram.model.nodeDataArray = [
        {
          palette: "0",
          key: -1,
          type: "start",
          text: "开始",
          from: true,
          img: require("@/assets/icons/icons8-start.png"),
        },
        {
          palette: "0",
          key: -3,
          type: "stop",
          text: "结束",
          to: true,
          img: require("@/assets/icons/icons8-stop.png"),
        },
      ];
    this.createPalette("palette0", palettes.palette0);
    this.createPalette("palette1", palettes.palette1);
    //this.init();用于回显画布内容
  },
  beforeDestroy() {
    diagram.model = go.Model.fromJson({});
  },
  methods:{
    init(){
          const configs = JSON.parse({});
          configs["nodes"].forEach((node) => {
            that.nodesData[node["current"]] = node["config"];
          });
          configs["diagram"]["nodeDataArray"].forEach((nodeData) => {
            nodeData["img"] = require("@/assets/icons/icons8-task-160.png");
          });
          configs["diagram"]["linkFromPortIdProperty"] = "fromPort";
          configs["diagram"]["linkToPortIdProperty"] = "toPort";
          diagram.model = go.Model.fromJson(configs["diagram"]);
    },
    createDiagram() {
      return $(go.Diagram, "diagram", {
        grid: $(
          go.Panel,
          "Grid",
          $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
          $(go.Shape, "LineH", {
            stroke: "gray",
            strokeWidth: 0.5,
            interval: 10,
          }),
          $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
          $(go.Shape, "LineV", {
            stroke: "gray",
            strokeWidth: 0.5,
            interval: 10,
          })
        ),
        validCycle: go.Diagram.CycleNotDirected,
        "undoManager.isEnabled": true,
        nodeTemplate: this.getNodeTemplate(),
        linkTemplate: $(
          go.Link,
          { selectable: true },
          {
            routing: go.Link.AvoidsNodes,
            corner: 5,
            toShortLength: 4,
          },
          new go.Binding("points").makeTwoWay(),
          $(go.Shape, { isPanelMain: true, strokeWidth: 2 }),
          $(go.Shape, { toArrow: "Standard", stroke: null })
        ),
        ExternalObjectsDropped: (e) => {
          e.subject.each((part) => {
            let type = part.data.type;
            if (type === "start") {
              if (diagram.model.findNodeDataForKey(-1)) {
                that.$message.error("节点已存在");
                diagram.remove(part);
              }
            } else if (type === "stop") {
              if (diagram.model.findNodeDataForKey(-3)) {
                that.$message.error("节点已存在");
                diagram.remove(part);
              }
            }
          });
        },
      });
    },
    createPalette(id, models) {
      models.forEach((model) => {
        model["img"] = require("@/assets/icons/icons8-task-160.png");
      });
      $(go.Palette, id, {
        nodeTemplate: $(
          go.Node,
          go.Panel.Horizontal,
          { desiredSize: new go.Size(100, 20), margin: 0 },
          $(
            go.Picture,
            { maxSize: new go.Size(16, 16) },
            new go.Binding("source", "img")
          ),
          $(
            go.TextBlock,
            { maxSize: new go.Size(100, NaN) },
            new go.Binding("text", "text")
          ),
          {
            selectionAdornmentTemplate: $(
              go.Adornment,
              "Auto",
              $(go.Shape, { fill: null, strokeWidth: 0 }),
              $(go.Placeholder)
            ),
          }
        ),
        model: new go.GraphLinksModel(models),
      });
    },
    getNodeTemplate() {
      return $(
        go.Node,
        "Spot",
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
          go.Point.stringify
        ),
        $(
          go.Panel,
          "Auto",
          $(
            go.Shape,
            "RoundedRectangle",
            {
              portId: null,
              fromLinkableDuplicates: false,
              toLinkableDuplicates: false,
              fromLinkableSelfNode: false,
              toLinkableSelfNode: false,
              cursor: "pointer",
              fill: "white",
              stroke: "#DCDFE6",
              strokeWidth: 1,
            },
            new go.Binding("fromLinkable", "from"),
            new go.Binding("toLinkable", "to")
          ),
          $(
            go.Panel,
            "Horizontal",
            $(
              go.Picture,
              { maxSize: new go.Size(40, 40) },
              new go.Binding("source", "img")
            ),
            $(
              go.Panel,
              "Vertical",
              { defaultAlignment: go.Spot.Left, margin: 5 },
              $(
                go.TextBlock,
                { font: "bold 12px sans-serif" },
                new go.Binding("text", "text")
              ),
              $(
                go.TextBlock,
                {
                  maxSize: new go.Size(100, NaN),
                  wrap: "WrapFit",
                  font: "normal 11px sans-serif",
                  stroke: "#909399",
                },
                new go.Binding("text", "label")
              )
            )
          )
        ),
        this.makePort("T", go.Spot.Top, false, true),
        this.makePort("B", go.Spot.Bottom, true, false),
        this.makePort("BL", go.Spot.BottomLeft, true, false),
        this.makePort("BR", go.Spot.BottomRight, true, false),
        {
          selectionAdornmentTemplate: $(
            go.Adornment,
            "Auto",
            $(go.Shape, "RoundedRectangle", {
              fill: null,
              stroke: "#303133",
              strokeWidth: 1,
            }),
            $(go.Placeholder)
          ), // 设置选中效果
          linkValidation: that.linkValidation,
          mouseEnter: (e, node) => {
            node.ports.each((port) => {
              if (port.portId === "T") {
                port.fill = node.data.to ? "#16BEFF" : null;
              } else if (port.portId === "B" && node.data.type != "decision") {
                port.fill = node.data.from ? "#16BEFF" : null;
              } else if (
                port.portId === "BL" &&
                node.data.type === "decision"
              ) {
                port.fill = node.data.from ? "#16BEFF" : null;
              } else if (
                port.portId === "BR" &&
                node.data.type === "decision"
              ) {
                port.fill = node.data.from ? "#16BEFF" : null;
              }
            });
          },
          mouseLeave: (e, node) => {
            node.ports.each((port) => {
              if (
                port.portId === "T" ||
                port.portId === "B" ||
                port.portId === "BL" ||
                port.portId === "BR"
              ) {
                port.fill = null;
              }
            });
          },
          doubleClick: (e, node) => {
            const type = node.data.type;
            let key = type + node.data.key;
            console.log(type,key)
          },
        }
      );
    },
     makePort(name, spot, output, input) {
      return $(
        go.Panel,
        "Horizontal",
        { alignment: spot, alignmentFocus: spot },
        $(
          go.TextBlock,
          //   { font: "500 12px sans-serif", text: name == "BL" ? Y : null },
          { font: "500 12px sans-serif", text: name == "BL" ? null : null },
          new go.Binding("stroke", "nyColor")
        ),
        $(go.Shape, "Circle", {
          fill: null,
          stroke: null,
          desiredSize: new go.Size(7, 7),
          portId: name,
          fromSpot: spot,
          toSpot: spot,
          fromLinkable: output,
          toLinkable: input,
          cursor: "pointer",
          fromMaxLinks: name == "BR" || name == "BL" ? 1 : 5,
        }),
        $(
          go.TextBlock,
          //   { font: "500 12px sans-serif", text: name == "BR" ? N : null },
          { font: "500 12px sans-serif", text: name == "BR" ? null : null },
          new go.Binding("stroke", "nyColor")
        )
      );
    },
    // 校验节点间是否可连接通过返回true或者false允许和静止连接
    linkValidation(fromNode, fromPort, toNode, toPort) {
      const fromPalette = fromNode.data.palette;
      const fromType = fromNode.data.type;
      const toPalette = toNode.data.palette;
      const toType = toNode.data.type;
            let isRight = false; // 连线是否正确
      let linkedOtherCount = 0; // 已经连接了几个节点
      let beLinkedCount = 0; // 已经被几个节点连接
      fromNode.findNodesOutOf().each(() => {
        linkedOtherCount++;
      });
      toNode.findNodesInto().each(() => {
        beLinkedCount++;
      });
      console.log(
        "from",
        fromType,
        "to",
        toType,
        "连几个",
        linkedOtherCount,
        "被几个",
        beLinkedCount,
        "parent",
        fromPalette,
        "parent",
        toPalette,
        "fromPort",
        fromPort,
        "toPort",
        toPort
      );
      return true;
    }
  }

获取diagram生成的json数据

diagram.model.modelData.position =
go.Point.stringify(diagram.position); let model =
JSON.parse(diagram.model.toJson()); console.log(“diagram”, model);

晗草coder
关注
【vue+GoJs】项目中绘制、保存和回显流程图
栀妹儿的炼丹炉
04-13 3682
vue项目中引入gojs、使用gojs绘制流程图并保存、根据保存的代码回显流程图。
GoJS 在 Vue 中的简单实现
老司机的后备箱
05-28 1280
GoJS 在 Vue 中的简单实现 介绍与引入 简述： GoJS 是一个用于实现交互式图表的 JavaScript 库 在 vue 中使用 安装： npm install gojs --save gojs import gojs from 'gojs' // 在 main.js 中引入 Vue.prototype.go = gojs // 挂载 1. 创建一个空图像 结构部分（template） <div class="flowChart" id="flowChart">
GoJS的流程图
12-27
基于GoJS插件的一个流程图插件，且有做过微调整。颜色样式均作了改动。仅做参考，GoJS为收费插件。
GOJS+VUE实现流程图效果
10-17
主要为大家详细介绍了GOJS+VUE实现流程图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【vue3】详解单向数据流，大家千万不用为了某某而某某了。
最新发布
weixin_41272383的博客
09-14 219
总览 Vue3 的单向数据流 尽信官网，不如那啥。 vue的版本一直在不断更新，内部实现方式也是不断的优化，官网也在不断更新。 既然一切皆在不停地发展，那么我们呢？等着官网更新还是有自己的思考？ 我觉得我们要走在官网的前面，而不是等官网更新后，才知道原来可以这么实现。。。 我习惯先给大家一个整体的概念，然后再介绍各个细节。 脑图版 先整理一下和单向数据流有关的信息，做个脑图： 大纲版 列个大纲...
【GoJS使用】GoJS在vue中的入门使用教程
庞囧的博客
02-20 7630
文章目录前言安装和引入Go.js画板初始化画板配置基础配置树结构配置连接线的配置鼠标框选配置节点选中时边框的配置全局缩略图的配置其他配置线段吸附网格节点有关节点初始化节点内容分类节点成员的布局方式 前言 此使用教程的内容只是个人制作产品时，根据需要实现功能进行文档记录，需要完整的使用文档需要自行去官方文档查看。 安装和引入Go.js 先安装 npm I gojs –save 使用时要在html中用个dom容器来渲染图像 <div id="chart-wrap"> <div i
vue 结合gojs的流程设计器
03-09
将go.js 流程图 流程设计与vue框架结合使用 未去水印版本
在Vue项目中使用Gojs
CH_Y的博客
08-25 4955
使用GOJS在vue项目中实现拖拉拽的图形化需求，记录了常用功能的实现，需要完整使用的可以去官方文档查看。至此，就能在vue项目中使用Gojs实现简单的双画布托拉拽雪花图需求。
vue-flow绘制流程图
m0_50666077的博客
07-16 5369
vue-flow绘制流程图
vue中使用gojs/jointjs的示例代码
12-10
因为公司项目需求，要画出相关业务的流程图，以便客户了解自己身处何处 搜索框输入 “前端流程图插件”，查了很多资料，总结一下有以下几种 flow-chart 代码写法繁琐，不是json就可以解决，效果也比较丑,PASS darge-d3 github :https://github.com/dagrejs/dagre-d3 效果图 下载里面的demo,改一下json就可以了 // States var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER", "CANCELED", "ABOLISHED" , "DE
Go-Vue.js与Go集成使用的示例项目
08-14
Vue.js与Go集成使用的示例项目
GOJS + VUE 流程图实现
热门推荐
cicistream
08-21 5万+
前言及展示 在项目中需要根据传过来的数据画出流程图，采用了GOJS插件，功能很全面，可以根据自己的需要调整，不过建议简单的流程图还是自己手写一个组件，更加便于维护和变换。有一点需要注意的是，GOJS是需要收费的，有水印，虽然可以手动去掉，但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子：Minimal GoJS Sample in Vue.js。推荐看一下，可以解决...
vue集成GOJS编辑流程图
沉默是零
03-05 622
安装GOJS npm install gojs`` 导入gojs 新建模板goJsTemplate.js //导入gojs import goJs from "gojs"; 使用GraphObject.make构建 GoJS定义了一个静态函数GraphObject.make，它在构造GraphObjects时非常有用，而不必考虑和跟踪临时变量名。此静态函数还支持以嵌套方式构建对象，其中缩进为您提供有关可视树中深度的线索，与上面显示的简单线性代码不同。 GraphObject.make是一个函.
Vue+GoJS使用初步（1）
qdwyj的专栏
07-16 228
今天开始打卡GoJS，用他创建一个物流调度平台。在此记录一下使用过程中遇到的坑。
vue中使用gojs/jointjs
weixin_33810006的博客
08-23 619
博客文章地址：https://lry1994.github.io/stu...---------------------------------------------更新 2018/8/30----------------------------------------------------------经过一番实践，我觉得jointj...
vue结合GoJS作流程图效果图
Bay 丶
07-26 5616
vue结合GoJS作流程图效果图
vue + gojs 实现拖拽流程图（实战项目）
qq_279364752的博客
03-03 8546
在项目开发一期的时候我用的不是go.js,而用的是一款轻便的流程插件jsplumb.js,它也集成了各种功能性API，但是在开发二期的时候它的内部功能已经满足不了需求了，所以我就开始在网上查找流程插件，看了很多插件，比如：G6，D3 等这些可视化流程插件都是不能满足需求。一、首先，看到效果图里的内置多点和其他模块单点连线问题，其他插件是无法这个满足需求的，可能我没有深入去了解其他的流程插件吧，但是go.js里内置点连线可以让开发者很快的理解代码逻辑，不用耗费大量的时间去想点与点的连线。
Vue中使用GoJS/JointJS实现流程图示例
"这篇文章主要展示了如何在Vue项目中使用GoJS和JointJS这两个图形库来绘制流程图。作者在寻找前端流程图插件的过程中，对比了不同的解决方案，最终选择了GoJS和JointJS，并提供了相关的示例代码。" 在Vue应用程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值