【4858美高梅】js关系图库,JS图形化插件利器组件种类

By admin in 4858美高梅 on 2019年4月9日

auto-workflow

用来连忙构建各类涉及图的库,比如流程图,可视化执行流等

github地址:

auto-workflow

用来飞速营造各类涉及图的库,比如流程图,可视化执行流等

github地址:

android默许带了 A劲客T 库,ios须求单独添加。

翻阅目录

神速开头

npm install aworkflow

依然引用dist文件夹下的产出文件

敏捷开头

npm install aworkflow

依然引用dist文件夹下的面世文件

android使用办法:
import {ART} from 'react-native';

  • 一、组件效果预览
  • 二、初次接触
    • 1、Gojs简介
    • 二、使用入门
  • 三、综合营用
    • 一、自定义流程的施用
    • 2、工业流程图
  • 四、总结

访问demo

npm install

npm run dev

暗中认可模版:

【4858美高梅】js关系图库,JS图形化插件利器组件种类。动画:

自行排列:

自定义模版:

也足以访问在线demo:

默许模版:

动画:

自行排列:

自定义模版:

访问demo

npm install

npm run dev

暗中认可模版:

动画:

机关排列:

自定义模版:

也能够访问在线demo:

暗许模版:

动画:

机关排列:

自定义模版:

ios使用方法:
一.右键点击项目 -> ‘Add Files to ProjectName -> 选择node_modules/react-native/React/Libraries/ART/ART.xcodeproj’
2.将 libART.a 添加到 Linked Frameworks and Libraries

 

技术文档

技能文档

A奥德赛T1共有多个零部件,他是能分别完毕分歧的作用,笔者将会挨个介绍。

正文

迅猛开首

敏捷开端

一.组件

  • Surface – 一个矩形可渲染的区域,是其他因素的容器!
  • Group – 可容纳多少个形状、文本和其余的分组
  • Shape – 形状定义,可填写
  • Text – 文本形状定义

前言:从前分享过两篇有关流程画图的前端组件,使用的jsPlumb。这几个组件本人还不易,使用方便、入门简单、轻量级,不过使用一段时间下来,发现部分害处,比如组件不太平静,初步进入页面的时候连线的体制有时会乱掉,刷新页面之后才能苏醒常常,而且连线样式相比单1,简单令人爆发视觉疲劳,加之近日公司在卖力实施所谓的“工业四.0”,除了对自动化控制需要的抓实之外,对那种图形化界面包车型大巴渴求也随着拉长,所以只是的jsPlumb组件效果已经不能够满意日益提升的店铺业务。基于上述各样,最终找到了Gojs组件,它成效强大、api丰硕,唯1的阙如就是以此组件是2个收款组件,然而在天朝,嘘…那是个不能够说的秘密!

1,定义node:

let node1 = {
    // 唯一标识,必须
    id: '123',
    // 自定义数据,用于填充模版,nodeName为组件文案
    defineData: {
        nodeName: '数据拆分'
    },
    // 画布中位置
    position: [100, 100],
    // 输入圈,对象数组,每个对象表示一个输入,以下标区分
    input: [
        {
        }
    ],
    // 输出圈,对象数组,每个对象表示一个输出,allInputs:能链接到所有node的输入,enbaleInputs:对象数组,每个对象定义可以输入的圈信息(id对应节点,inputIndex对应输入点下标)
    output: [
        {
            allInputs: true,
            enbaleInputs: [{
                id: '124',
                inputIndex: 0
            }]
        }
    ]
};
let node2 = {
    // 使用的模版,默认使用defaultTemplate
    templateName: 'iconTemplate',
    id: '124',
    defineData: {
        nodeName: '随机采样',
        imgSrc: 'base64...'
    },
    // 画布中位置
    position: [300, 100],
    // 输入
    input: [
        {
        }
    ],
    // 输出
    output: [
    ]
};

4858美高梅 14858美高梅 2

1,定义node:

let node1 = {
    // 唯一标识,必须
    id: '123',
    // 自定义数据,用于填充模版,nodeName为组件文案
    defineData: {
        nodeName: '数据拆分'
    },
    // 画布中位置
    position: [100, 100],
    // 输入圈,对象数组,每个对象表示一个输入,以下标区分
    input: [
        {
        }
    ],
    // 输出圈,对象数组,每个对象表示一个输出,allInputs:能链接到所有node的输入,enbaleInputs:对象数组,每个对象定义可以输入的圈信息(id对应节点,inputIndex对应输入点下标)
    output: [
        {
            allInputs: true,
            enbaleInputs: [{
                id: '124',
                inputIndex: 0
            }]
        }
    ]
};
let node2 = {
    // 使用的模版,默认使用defaultTemplate
    templateName: 'iconTemplate',
    id: '124',
    defineData: {
        nodeName: '随机采样',
        imgSrc: 'base64...'
    },
    // 画布中位置
    position: [300, 100],
    // 输入
    input: [
        {
        }
    ],
    // 输出
    output: [
    ]
};

4858美高梅 34858美高梅 4

二.组件属性

正文原创地址:

二,定义节点关系:

let edges = [
    {
        // 输出节点及输出圈,‘123:0’表示id为123的node的下标为0的输出点
        src: '123:0',
        // 输入节点及输入圈,'124:0'表示id为124的node的下标为0的输入点
        to: '124:0'
    }
];

4858美高梅 54858美高梅 6

2,定义节点关系:

let edges = [
    {
        // 输出节点及输出圈,‘123:0’表示id为123的node的下标为0的输出点
        src: '123:0',
        // 输入节点及输入圈,'124:0'表示id为124的node的下标为0的输入点
        to: '124:0'
    }
];

4858美高梅 74858美高梅 8

Surface
  • width : 渲染区域的宽,也正是概念容器的宽窄
  • height : 定义渲染区域的高,容器的冲天

重回顶部

3,实例化:

// 全局配置
let globalConfig = {
    // 是否静态图片,true:节点和连线都不可拖动,false:可以添加事件监听
    isStatic: false,
    // 整个图默认模版,默认为defaultTemplate
    templateName: 'defaultTemplate',
    // templateName: 'iconTemplate',
    // 是否需要自动排序,true: 程序智能计算每个node的位置,false: 根据node position来定位
    autoSort: true,
    // 自动排序时,true: 水平排序,false: 垂直排序
    horizontal: false,
    // 可选,node对齐方式,start: 水平排列时表示上对齐,垂直排列时表示左对齐 middle: 中间对齐 end: 水平排列时表示下对齐,垂直排列时表示右对齐
    align: 'middle',
    // 可选,beginX 起点X坐标,默认10
    beginX: 30,
    // 可选,beginY 起点Y坐标,默认10
    beginY: 30,
    // 可选,spaceX 横向间距,默认200
    spaceX: 200,
    // 可选,spaceY 纵向间距,默认100
    spaceY: 60
};
// 实例化
let workflow = new AWrokflow(document.getElementById('aw'), {nodes, edges}, globalConfig);

4858美高梅 94858美高梅 10

3,实例化:

// 全局配置
let globalConfig = {
    // 是否静态图片,true:节点和连线都不可拖动,false:可以添加事件监听
    isStatic: false,
    // 整个图默认模版,默认为defaultTemplate
    templateName: 'defaultTemplate',
    // templateName: 'iconTemplate',
    // 是否需要自动排序,true: 程序智能计算每个node的位置,false: 根据node position来定位
    autoSort: true,
    // 自动排序时,true: 水平排序,false: 垂直排序
    horizontal: false,
    // 可选,node对齐方式,start: 水平排列时表示上对齐,垂直排列时表示左对齐 middle: 中间对齐 end: 水平排列时表示下对齐,垂直排列时表示右对齐
    align: 'middle',
    // 可选,beginX 起点X坐标,默认10
    beginX: 30,
    // 可选,beginY 起点Y坐标,默认10
    beginY: 30,
    // 可选,spaceX 横向间距,默认200
    spaceX: 200,
    // 可选,spaceY 纵向间距,默认100
    spaceY: 60
};
// 实例化
let workflow = new AWrokflow(document.getElementById('aw'), {nodes, edges}, globalConfig);

4858美高梅 114858美高梅 12

Shape
  • d : 定义绘制路径,d接收一个下边包车型大巴path对象。
  • stroke : 描边颜色
  • strokeWidth : 描边宽度
  • strokeDash : 定义虚线
  • fill : 填充颜色

一、组件效果预览

先来多少个炫酷点的功效

4858美高梅 13

4858美高梅 14

4858美高梅 15

就最上面两个职能而言,就是jsPlumb无法达成的,然则那种功效在MES系统里头是很吸引人的,尤其是有个别流程性的业务,用这种效果完成让可以一眼就感觉到高大上了。并且咋1眼看上去,你一直都不相信那是3个web页面包车型大巴功用。

 其余作用示例

4858美高梅 16

 

4858美高梅 17

可折叠的树

4858美高梅 18

那是图表吗?

4858美高梅 19

竟然还足以生成图表!

4858美高梅 20

4858美高梅 21

4858美高梅 22

想抢visio的营生吗?

 4858美高梅 23

4858美高梅 24

4858美高梅 25

越来越多示例可查看 官网

本文原创地址:

回到顶部

API

接口文书档案:

API

接口文档: 

Text
  • funt : 字体样式,定义字体、大小、是或不是加粗 如: bold 35px Heiti SC

贰、初次接触

规矩,依旧先来个入门教程。

源码下载:

api详情:

示范地址:

回去顶部

基本功概念

基本功概念

Path
  • moveTo(x,y) :
    移动到坐标(x,y),坐标点暗许都以0,(0,0)正是方今容器的左上角。

4858美高梅 26

moveTo.png

  • lineTo(x,y) : 连线到(x,y)
  • arc(x,y,radius…) :
    绘制弧线,radius半径,还有其它多少个参数没用过,能够团结尝试一下
  • close() :
    封闭空间,意思是当有着2条以上的线时,会自动封闭连接第3条线形成一个封闭的上空。

1、Gojs简介

GoJS是3个效能丰硕的JS库,在Web浏览器和平台上可达成自定义交互图和复杂的可视化效果,它用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表,给用户交互提供了好多产业革命的成效,如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和注销管理、调色板、概述、事件处理程序、命令和自定义操作的扩张工具系统。无需切换服务器和插件,GoJS就能落到实处用户互动并在浏览器中全然运行,展现HTML5Canvas成分或SVG,也不用劳动器端请求。
GoJS不注重于别的JS库或框架(例如bootstrap、jquery等),可与其余HTML或JS框架协作工作,甚至足以不用框架。

回去顶部

模版

模版是样子和体裁的结合体,定义了节点(node)和连线(edge)的现实形制和体制
默许为defaultTemplate,由矩形和文案组成
系统还提供了iconTemplate模版,由3个icon和文案组成
当然还能自定义模版,能够参考demo,定义了八个革命模版
定义的模板能够在node和edge中选择,那样就足以画出不相同的节点和连线了

模版

模版是形象和体制的结合体,定义了节点(node)和连线(edge)的现实性形制和样式
暗许为defaultTemplate,由矩形和文案组成
系统还提供了iconTemplate模版,由贰个icon和文案组成
当然还是能自定义模版,能够参见demo,定义了1个北京蓝模版
定义的沙盘能够在node和edge中使用,这样就足以画出不一致的节点和连线了

贰、使用入门

(一)文件引用

<script src="gojs/go-debug_ok.js"></script>

能够用cdn上面的新星版本,也能够引用本地down下来的公文。假设是付出,能够引用debug版本的js,正式运作的时候引用正式的js,那个无需多讲。

(二)成立画布

无论定义三个html成分,作为我们的画布

<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></div>

下一场使用gojs的api开端化画布

4858美高梅 27😉

        //创建画布
        var objGo = go.GraphObject.make;
        var myDiagram = objGo(go.Diagram, "myDiagramDiv",
            {
                //模型图的中心位置所在坐标
                initialContentAlignment: go.Spot.Center,

                //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
                "undoManager.isEnabled": true,

                //不运行用户改变图表的规模
                allowZoom: false,

                //画布上面是否出现网格
                "grid.visible": true,

                //允许在画布上面双击的时候创建节点
                "clickCreatingTool.archetypeNodeData": { text: "Node" },

                //允许使用ctrl+c、ctrl+v复制粘贴
                "commandHandler.copiesTree": true,  

                //允许使用delete键删除节点
                "commandHandler.deletesTree": true, 

                // dragging for both move and copy
                "draggingTool.dragsTree": true,  
            });    

4858美高梅 28😉

合法示例用的$符号作为变量,博主觉得$符号太灵活,照旧换个名字啊~以上多少个参数都以博主摘选的,更加多起初化画布的参数请参考官方api下图:

4858美高梅 29

(三)创设模型数据(Model)

随即上面包车型地铁代码,我们扩张如下几行

4858美高梅 30😉

     var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { key: "工厂" },
            { key: "车间" },
            { key: "工人" },
            { key: "岗位" },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

4858美高梅 31😉

效能预览

4858美高梅 32

(四)创设节点(Node)

地点有了画布和节点数据,只是有了贰个雏形,不过还未有此外的图形化效果。我们进入一些职能试试

在gojs里面给我们提供了两种模型节点的可选项:

  • Shape:形状——Rectangle(矩形)、RoundedRectangle(圆角矩形),Ellipse(圆锥形),Triangle(三角形),Diamond(菱形),Circle(圆形)等
  • TextBlock:文本域(可编辑)
  • Picture:图片
  • Panel:容器来保存别的Node的集合 
    暗许的节点模型代码只是由叁个TextBlock组件营造成

大家扩大如下壹段代码

4858美高梅 33😉

        // 定义一个简单的节点模板
        myDiagram.nodeTemplate =
            objGo(go.Node, "Horizontal",//横向布局的面板
                // 节点淡蓝色背景
                { background: "#44CCFF" },
                objGo(go.Shape,
                    "RoundedRectangle", //定义形状,这是圆角矩形
                    { /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },
                    // 绑定 Shape.figure属性为Node.data.fig的值,Model对象可以通过Node.data.fig 获取和设置Shape.figure(修改形状)
                    new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')),
                objGo(go.TextBlock,
                    "Default Text",  // 默认文本
                    // 设置字体大小颜色以及边距
                    { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
                    //绑定TextBlock.text 属性为Node.data.name的值,Model对象可以通过Node.data.name获取和设置TextBlock.text
                    new go.Binding("text", "name"))
            );

        var myModel = objGo(go.Model);//创建Model对象
        // model中的数据每一个js对象都代表着一个相应的模型图中的元素
        myModel.nodeDataArray = [
            { name: "工厂", fig: 'YinYang', fill2: 'blue' },
            { name: "车间", fig: 'Peace', fill2: 'red' },
            { name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { name: "岗位", fig: 'Fragile', fill2: 'yellow' },
        ];
        myDiagram.model = myModel; //将模型数据绑定到画布图上

4858美高梅 34😉

代码释疑:以上大家给画布对象定义了二种节点模板,①种是文件节点,另壹种是形象节点(Node)。在造型节点中,大家定义了数据模型的通用节点样式,正是那一段代码 { /* Shape的参数。宽高颜色等等*/figure: “Club”, width: 40, height: 60,
margin: 肆, fill: ‘red’ }, 然后透过 new
go.Binding(“figure”,
“fig”) 方法将模板里面包车型地铁品质映射到数码实例中,比如此处模板里面包车型大巴figure属性定义的是Club,假如在大家的数目之中定义fig属性,那么它就会覆盖模板里面包车型客车figure的私下认可值。同样,fill和fill2也是通过同样的原理去分别模板中的样式和实例中的实际样式的!

注:更加多figure属性的取值详见 这里

效率如下

4858美高梅 35

有鉴于此大家多少里面包车型地铁属性会覆盖模板的原始属性,假使是新增的节点,由于未有自定义数据属性,所以突显到界面上边的时候尽管模板里面包车型客车原生样式!

(5)节点连线

有了地点的根基,大家得以在画布上面画出大家想要的图形效果了,然而还尚未连线。大家了然连线是创造在节点模型的地点的,于是乎大家的Model又分为了以下两种档次:

  • Model:最中央的(不带连线,如上边包车型地铁例子)
  • GraphLinksModel :高级点的动态连线图
  • TreeModel:树形图的模子(从例子看好像用的不多)

GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型新闻,其实也是的三个JSON数组对象,种种线条都有多个属性
“to” 和 “from”
即Node节点的“key”值,二日性格代表多少个key表示多个节点间的连线。

作者们地方已经写过最主旨的Model的事例了,大家再来个带连线的Model的以身作则

4858美高梅 36😉

        var myModel = objGo(go.GraphLinksModel);
        myModel.nodeDataArray =
            [
                { key: "aaa" ,name: "工厂" },
                { key: "bbb" ,name: "车间"},
                { key: "ccc" ,name: "车间" }
            ];
        myModel.linkDataArray =
            [
                { from: "aaa", to: "bbb" },
                { from: "bbb", to: "ccc" }
            ];
        myDiagram.model = myModel;

4858美高梅 37😉

效益如下

4858美高梅 38

读书了Model、GraphLinksModel,还余下一种TreeModel树节点的模型,那个博主不打算做详细介绍,有趣味能够平昔查看官网。

归来顶部

node

节点,能够定义使用的模板,模版中参数,输入,输出圈音信

node

节点,能够定义使用的模板,模版中参数,输入,输出圈音讯

三、综合营用

关于综合成效,博主不打算将gojs的api每个翻个遍了,那样太耗费时间间,伤不起,只是将法定示例中的部分源码截取出来供我们参考。有亟待的再细究!

回到顶部

edge

连线,能够定义模版,连线新闻

edge

连线,能够定义模版,连线消息

一、自定义流程的使用

4858美高梅 394858美高梅 40

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Draggable Link</title>
<meta name="description" content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../../gojs/go-debug.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var objGo = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram =
      objGo(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        {
          grid: objGo(go.Panel, "Grid",
                  objGo(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                  objGo(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
                  objGo(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
                  objGo(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
                ),
          allowDrop: true,  // must be true to accept drops from the Palette
          "draggingTool.dragsLink": true,
          "draggingTool.isGridSnapEnabled": true,
          "linkingTool.isUnconnectedLinkValid": true,
          "linkingTool.portGravity": 20,
          "relinkingTool.isUnconnectedLinkValid": true,
          "relinkingTool.portGravity": 20,
          "relinkingTool.fromHandleArchetype":
            objGo(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
          "relinkingTool.toHandleArchetype":
            objGo(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
          "linkReshapingTool.handleArchetype":
            objGo(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
          rotatingTool: objGo(TopRotatingTool),  // defined below
          "rotatingTool.snapAngleMultiple": 15,
          "rotatingTool.snapAngleEpsilon": 15,
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    // Define a function for creating a "port" that is normally transparent.
    // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
    // and where the port is positioned on the node, and the boolean "output" and "input" arguments
    // control whether the user can draw links from or to the port.
    function makePort(name, spot, output, input) {
      // the port is basically just a small transparent square
      return objGo(go.Shape, "Circle",
               {
                  fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
                  stroke: null,
                  desiredSize: new go.Size(7, 7),
                  alignment: spot,  // align the port on the main Shape
                  alignmentFocus: spot,  // just inside the 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
               });
    }

    var nodeSelectionAdornmentTemplate =
      objGo(go.Adornment, "Auto",
        objGo(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }),
        objGo(go.Placeholder)
      );

    var nodeResizeAdornmentTemplate =
      objGo(go.Adornment, "Spot",
        { locationSpot: go.Spot.Right },
        objGo(go.Placeholder),
        objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

        objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),

        objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" })
      );

    var nodeRotateAdornmentTemplate =
      objGo(go.Adornment,
        { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
        objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
        objGo(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] })
      );

    myDiagram.nodeTemplate =
      objGo(go.Node, "Spot",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate },
        { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
        { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
        new go.Binding("angle").makeTwoWay(),
        // the main object is a Panel that surrounds a TextBlock with a Shape
        objGo(go.Panel, "Auto",
          { name: "PANEL" },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
          objGo(go.Shape, "Rectangle",  // default figure
            {
              portId: "", // the default port: if no spot on link data, use closest side
              fromLinkable: true, toLinkable: true, cursor: "pointer",
              fill: "white",  // default color
              strokeWidth: 2
            },
            new go.Binding("figure"),
            new go.Binding("fill")),
          objGo(go.TextBlock,
            {
              font: "bold 11pt Helvetica, Arial, sans-serif",
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit,
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        ),
        // four small named ports, one on each side:
        makePort("T", go.Spot.Top, false, true),
        makePort("L", go.Spot.Left, true, true),
        makePort("R", go.Spot.Right, true, true),
        makePort("B", go.Spot.Bottom, true, false),
        { // handle mouse enter/leave events to show/hide the ports
          mouseEnter: function(e, node) { showSmallPorts(node, true); },
          mouseLeave: function(e, node) { showSmallPorts(node, false); }
        }
      );

    function showSmallPorts(node, show) {
      node.ports.each(function(port) {
        if (port.portId !== "") {  // don't change the default port, which is the big shape
          port.fill = show ? "rgba(0,0,0,.3)" : null;
        }
      });
    }

    var linkSelectionAdornmentTemplate =
      objGo(go.Adornment, "Link",
        objGo(go.Shape,
          // isPanelMain declares that this Shape shares the Link.geometry
          { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 })  // use selection object's strokeWidth
      );

    myDiagram.linkTemplate =
      objGo(go.Link,  // the whole link panel
        { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
        { relinkableFrom: true, relinkableTo: true, reshapable: true },
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4
        },
        new go.Binding("points").makeTwoWay(),
        objGo(go.Shape,  // the link path shape
          { isPanelMain: true, strokeWidth: 2 }),
        objGo(go.Shape,  // the arrowhead
          { toArrow: "Standard", stroke: null }),
        objGo(go.Panel, "Auto",
          new go.Binding("visible", "isSelected").ofObject(),
          objGo(go.Shape, "RoundedRectangle",  // the link shape
            { fill: "#F8F8F8", stroke: null }),
          objGo(go.TextBlock,
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#919191",
              margin: 2,
              minSize: new go.Size(10, NaN),
              editable: true
            },
            new go.Binding("text").makeTwoWay())
        )
      );

    load();  // load an initial diagram from some JSON text

    // initialize the Palette that is on the left side of the page
    myPalette =
      objGo(go.Palette, "myPaletteDiv",  // must name or refer to the DIV HTML element
        {
          maxSelectionCount: 1,
          nodeTemplateMap: myDiagram.nodeTemplateMap,  // share the templates used by myDiagram
          linkTemplate: // simplify the link template, just in this Palette
            objGo(go.Link,
              { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
                // to line up the Link in the same manner we have to pretend the Link has the same location spot
                locationSpot: go.Spot.Center,
                selectionAdornmentTemplate:
                  objGo(go.Adornment, "Link",
                    { locationSpot: go.Spot.Center },
                    objGo(go.Shape,
                      { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }),
                    objGo(go.Shape,  // the arrowhead
                      { toArrow: "Standard", stroke: null })
                  )
              },
              {
                routing: go.Link.AvoidsNodes,
                curve: go.Link.JumpOver,
                corner: 5,
                toShortLength: 4
              },
              new go.Binding("points"),
              objGo(go.Shape,  // the link path shape
                { isPanelMain: true, strokeWidth: 2 }),
              objGo(go.Shape,  // the arrowhead
                { toArrow: "Standard", stroke: null })
            ),
          model: new go.GraphLinksModel([  // specify the contents of the Palette
            { text: "Start", figure: "Circle", fill: "#00AD5F" },
            { text: "Step" },
            { text: "DB", figure: "Database", fill: "lightgray" },
            { text: "???", figure: "Diamond", fill: "lightskyblue" },
            { text: "End", figure: "Circle", fill: "#CE0620" },
            { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" }
          ], [
            // the Palette also has a disconnected Link, which the user can drag-and-drop
            { points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) }
          ])
        });
  }


  function TopRotatingTool() {
    go.RotatingTool.call(this);
  }
  go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

  /** @override */
  TopRotatingTool.prototype.updateAdornments = function(part) {
    go.RotatingTool.prototype.updateAdornments.call(this, part);
    var adornment = part.findAdornment("Rotating");
    if (adornment !== null) {
      adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30));  // above middle top
    }
  };

  /** @override */
  TopRotatingTool.prototype.rotate = function(newangle) {
    go.RotatingTool.prototype.rotate.call(this, newangle + 90);
  };
  // end of TopRotatingTool class


  // Show the diagram's model in JSON format that the user may edit
  function save() {
    saveDiagramProperties();  // do this first, before writing to JSON
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    loadDiagramProperties();  // do this after the Model.modelData has been brought into memory
  }

  function saveDiagramProperties() {
    myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position);
  }
  function loadDiagramProperties(e) {
    // set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects
    var pos = myDiagram.model.modelData.position;
    if (pos) myDiagram.initialPosition = go.Point.parse(pos);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div style="width:100%; white-space:nowrap;">

      <div id="myPaletteDiv" style="border: solid 1px black; height: 620px"></div>



      <div id="myDiagramDiv" style="border: solid 1px black; height: 620px"></div>

  </div>
  <p>
    This sample demonstrates the ability for the user to drag around a Link as if it were a Node.
    When either end of the link passes over a valid port, the port is highlighted.
  </p>
  <p>
    The link-dragging functionality is enabled by setting some or all of the following properties:
    <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>, and
    <a>RelinkingTool.isUnconnectedLinkValid</a>.
  </p>
  <p>
    Note that a Link is present in the <a>Palette</a> so that it too can be dragged out and onto
    the main Diagram.  Because links are not automatically routed when either end is not connected
    with a Node, the route is provided explicitly when that Palette item is defined.
  </p>
  <p>
    This also demonstrates several custom Adornments:
    <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and
    <a>Part.rotateAdornmentTemplate</a>.
  </p>
  <p>
    Finally this sample demonstrates saving and restoring the <a>Diagram.position</a> as a property
    on the <a>Model.modelData</a> object that is automatically saved and restored when calling <a>Model.toJson</a>
    and <a>Model.fromJson</a>.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Save</button>
      <button onclick="load()">Load</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
 ],
  "linkDataArray": [
 ]}
    </textarea>
  </div>
</div>
</body>
</html>

自定义流程全体代码

效果如下:

4858美高梅 41

建议各位copy代码,在本土看到效果,然后再依照实际要求去研讨它的api,那样才不会太盲目而消费太多时间。

回到顶部

高档用法,自定义node和edge的基本功绘制方法

尖端用法,自定义node和edge的功底绘制方法

二、工业流程图

4858美高梅 424858美高梅 43

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Process Flow</title>
<meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../../gojs/go-debug.js"></script>
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for more concise visual tree definitions

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "grid.visible": true,
          "grid.gridCellSize": new go.Size(30, 20),
          "draggingTool.isGridSnapEnabled": true,
          "resizingTool.isGridSnapEnabled": true,
          "rotatingTool.snapAngleMultiple": 90,
          "rotatingTool.snapAngleEpsilon": 45,
          "undoManager.isEnabled": true
        });

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    myDiagram.nodeTemplateMap.add("Process",
      $(go.Node, "Auto",
        { locationSpot: new go.Spot(0.5, 0.5), locationObjectName: "SHAPE",
          resizable: true, resizeObjectName: "SHAPE" },
        new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Shape, "Cylinder1",
          { name: "SHAPE",
            strokeWidth: 2,
            fill: $(go.Brush, "Linear",
                    { start: go.Spot.Left, end: go.Spot.Right,
                      0: "gray", 0.5: "white", 1: "gray" }),
            minSize: new go.Size(50, 50),
            portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
          },
          new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
        $(go.TextBlock,
          { alignment: go.Spot.Center, textAlign: "center", margin: 5,
            editable: true },
          new go.Binding("text").makeTwoWay())
      ));

    myDiagram.nodeTemplateMap.add("Valve",
      $(go.Node, "Vertical",
        { locationSpot: new go.Spot(0.5, 1, 0, -21), locationObjectName: "SHAPE",
          selectionObjectName: "SHAPE", rotatable: true },
        new go.Binding("angle").makeTwoWay(),
        new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.TextBlock,
          { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true },
          new go.Binding("text").makeTwoWay(),
          // keep the text upright, even when the whole node has been rotated upside down
          new go.Binding("angle", "angle", function(a) { return a === 180 ? 180 : 0; }).ofObject()),
        $(go.Shape,
          { name: "SHAPE",
            geometryString: "F1 M0 0 L40 20 40 0 0 20z M20 10 L20 30 M12 30 L28 30",
            strokeWidth: 2,
            fill: $(go.Brush, "Linear", { 0: "gray", 0.35: "white", 0.7: "gray" }),
            portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35) })
      ));

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
        new go.Binding("points").makeTwoWay(),
        // mark each Shape to get the link geometry with isPanelMain: true
        $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 5 }),
        $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 3 }),
        $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 1, name: "PIPE", strokeDashArray: [10, 10] }),
        $(go.Shape, { toArrow: "Triangle", fill: "black", stroke: null })
      );

    load();

    loop();  // animate some flow through the pipes
  }

  function loop() {
    var diagram = 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);
  }

  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
</script>

</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div>
  <p>
    A <em>process flow diagram</em> is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment.
    A simple SCADA diagram, with animation of the flow along the pipes, is implemented here.
  </p>
  <p>
    The diagram displays the background grid layer by setting <b>grid.visible</b> to true,
    and also allows snapping to the grid using <a>DraggingTool.isGridSnapEnabled</a>,
    <a>ResizingTool.isGridSnapEnabled</a>, and <a>RotatingTool.snapAngleMultiple</a> alongside <a>RotatingTool.snapAngleEpsilon</a>.
  </p>
  <p>
    The diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>Shape.strokeDashOffset</a> every 100 ms.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Save</button>
      <button onclick="load()">Load</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"},
{"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"},
{"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"},
{"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"},
{"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270},
{"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180},
{"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"},
{"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"},
{"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90}
 ],
  "linkDataArray": [
{"from":"P1", "to":"V1"},
{"from":"P3", "to":"V2"},
{"from":"V2", "to":"P1"},
{"from":"P2", "to":"V3"},
{"from":"V3", "to":"P3"},
{"from":"V1", "to":"V4"},
{"from":"V4", "to":"P4"},
{"from":"V1", "to":"P2"},
{"from":"P4", "to":"V5"},
{"from":"V5", "to":"P2"}
 ]}
    </textarea>
  </div>
</div>
</body>
</html>

工业流程图

4858美高梅 44

归来顶部

DrawView

在渲染工作流中,为了方便地处理缩放,所以总体育工作作流的图片集合是多少个指标,对应zrender中的Group类,私下认可情形下是Aworkflow中的DrawView类,在DrawView中蕴藏了NodeViewEdgeViewNodeViewEdgeView是由差异的Shape组成的Group。
若是想自定义贰个渲染规则,可以参照src/draw/basicdraw/DrawView.js中的代码,使用Draw.extend()完结一个自定义的类,供给安装type字段,并且完成render()方法,render()措施中必要将最终利用的zrender的形状实例对象return出去,以便于在Aworkflow中add到zrender对象中。
(这些位置落到实处的切近不太好)

DrawView

在渲染工作流中,为了便于地拍卖缩放,所以任何工作流的图纸集合是多少个对象,对应zrender中的Group类,暗许情状下是Aworkflow中的DrawView类,在DrawView中涵盖了NodeViewEdgeViewNodeViewEdgeView是由不一样的Shape组成的Group。
若果想自定义二个渲染规则,能够参见src/draw/basicdraw/DrawView.js中的代码,使用Draw.extend()福衢寿车1个自定义的类,要求安装type字段,并且完毕render()方法,render()情势中必要将最终使用的zrender的形态实例对象return出去,以便于在Aworkflow中add到zrender对象中。
(那么些地点落到实处的切近不太好)

四、总结

本文依照js的一部分基础用法做了简便介绍,明天就先到此处,今后有标题了再来跟大家享用。倘使您的花色里面也有那种事情需求,能够用起来试试!要求证可瑞康(Aptamil)些,假若你的营业所不缺钱,提出利用正版授权的组件,究竟尊重作者的劳动成果很重点!

正文原创出处:

迎接各位转发,不过未经小编自身同意,转发小说之后总得在作品页面显然地方给出笔者和原来的文章连接,否则保留追究法律义务的义务

 

出处:

NodeView

Node是工作流中的节点,暗中同意的完成类是src/draw/basicDraw/NodeView,父类是src/draw/Node,Node也是二个Group,包括了像文字(Text),图标(Image),矩形(Rect)等着力造型。在NodeView中render输入输出点的时候,会根据点的个数和Node的position来测算出各种点的坐标来绘制,同时能够在config中配置input或然output在node中的地方,如top、right、bottom、left。
壹致,借使想要自定义叁个Node,必要动用Node.extend()办法,须要定义type和贯彻render()方法,render()艺术中必要将最后采纳的zrender的形态实例对象return出去,以便于在DrawView抑或父集合对象中add到相应的Group对象中。

NodeView

Node是工作流中的节点,暗中同意的贯彻类是src/draw/basicDraw/NodeView,父类是src/draw/Node,Node也是1个Group,包罗了像文字(Text),图标(Image),矩形(Rect)等主题造型。在NodeView中render输入输出点的时候,会依照点的个数和Node的position来测算出每一种点的坐标来绘制,同时能够在config中配置input也许output在node中的地点,如top、right、bottom、left。
同壹,若是想要自定义三个Node,须要运用Node.extend()办法,供给定义type和促成render()方法,render()格局中要求将最后使用的zrender的形态实例对象return出去,以便于在DrawView抑或父集合对象中add到相应的Group对象中。

EdgeView

艾德ge是工作流中的连线,私下认可的贯彻类是src/draw/basicDraw/EdgeView,父类是src/draw/Edge,艾德ge也是一个Group,包罗了像贝塞尔曲线和三角形箭头基本造型。渲染连线供给在渲染节点之后进展,因为连线的音信唯有节点新闻未有坐标音讯,所以须要在节点渲染后,依照起止节点来总括处连线的开头点坐标,同时会依据箭头的职责对终极坐标进行细微的调整。
同样,假若想要自定义3个艾德ge,供给动用Edge.extend()方法,要求定义type和兑现render()方法,render()措施中需求将最后使用的zrender的形状实例对象return出去,以便于在DrawView还是父集合对象中add到对应的Group对象中。

EdgeView

Edge是工作流中的连线,暗中同意的贯彻类是src/draw/basicDraw/EdgeView,父类是src/draw/Edge,艾德ge也是贰个Group,包涵了像贝塞尔曲线和三角形箭头基本造型。渲染连线必要在渲染节点之后展开,因为连线的音信唯有节点音信未有坐标音讯,所以必要在节点渲染后,依照起止节点来计算处连线的伊始点坐标,同时会基于箭头的职位对终端坐标进行细微的调整。
同等,假使想要自定义1个艾德ge,需求利用Edge.extend()措施,须要定义type和贯彻render()方法,render()方法中需求将最终使用的zrender的模样实例对象return出去,以便于在DrawView抑或父集合对象中add到相应的Group对象中。

Shape

Shape是有的为主造型,最近落到实处了的有BezierCurve、CirCle、Image、Text、React、Triangle,是对zrender中Displayable中的简单封装。在使用Shape的时候,须求先实例化,然后调用shape.init()办法实例化对应的zrender对象,init之后shape.dom中存款和储蓄就是应和的zrender对象。
供给自定义Shape的时候,供给选取Shape.extend()办法。和下面多少个8玖不离10,具体可参考src/draw/shape目录中的代码。

4858美高梅,Shape

Shape是有些着力造型,方今兑现了的有BezierCurve、CirCle、Image、Text、React、Triangle,是对zrender中Displayable中的不难封装。在利用Shape的时候,须求先实例化,然后调用shape.init()办法实例化对应的zrender对象,init之后shape.dom中储存就是呼应的zrender对象。
必要自定义Shape的时候,必要选取Shape.extend()办法。和上边多少个近乎,具体可参考src/draw/shape目录中的代码。

测试

npm run test

测试

npm run test

如何贡献

讨论

qq群:869605396

讨论

qq群:869605396

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有