jointjs是交互流程图工作流图表插件-BFW插件库

jointjs是交互流程图工作流图表插件

JointJS 是一个强大的JavaScript库，用于创建交互性高的流程图、工作流图和其他图表。这些图表通常用于建模、仿真和可视化各种系统和流程。JointJS 在其基础库之上提供了几个扩展包，比如 Rappid，可以提供更多高级功能。

JointJS的主要特点

模块化设计：可以选择性的使用不同的模块、插件。

多种图形支持：内置多种预定义图形（节点、链接等），并允许自定义图形。

事件系统：可以绑定各种交互事件，如点击、拖拽等。

与流行框架集成：可以与 Backbone.js, Vue.js, Angular 等流行前端框架集成。

SVG 与 VML 支持：兼容主流浏览器。

安装

由于你提到使用CDN，这里以此为例。通过CDN引入JointJS库：

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>

基本用法

创建一个 JointJS 图表。

创建一个 JointJS 画布并绑定到 DOM 元素。

在图表中添加图形和链接，设置它们的属性和样式。

示例

以下是一个基本示例，展示了如何在 Vue 中使用 JointJS 创建一个包含矩形和连线的简单流程图。

HTML 结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
</head>

<body>
    <div id="app">
        <div ref="paperContainer" style="width: 100%; height: 600px; border: 1px solid black;"></div>
    </div>

    <script>
        const { dia, shapes, highlighters, linkTools } = joint;
            new Vue({
                el: '#app',
                mounted() {
                    // 创建 JointJS 图表
                    const graph = new dia.Graph;
    
                    // 创建 JointJS 画布并绑定到 DOM 元素
                    const paper = new dia.Paper({
                        el: this.$refs.paperContainer,
                        model: graph,
                     
                        gridSize: 10,
                        drawGrid: true,
                        background: { color: '#f9f9f9' }
                    });
    
                    // 创建一个矩形并添加到图表
                    const rect = new shapes.standard.Rectangle();
                    rect.position(100, 30);
                    rect.resize(100, 40);
                    rect.attr({
                        body: {
                            fill: 'blue'
                        },
                        label: {
                            text: 'Hello',
                            fill: 'white'
                        }
                    });
                    rect.addTo(graph);
    
                    // 创建一个链接并添加到图表
                    const link = new shapes.standard.Link();
                    link.source(rect);
                    link.target({ x: 300, y: 50 });
                    link.appendLabel({
                        attrs: {
                            text: {
                                text: 'Connection'
                            }
                        }
                    });
                    link.addTo(graph);
                }
            });
    </script>
</body>

</html>

更复杂的应用
我们可以扩展这个基本示例，添加更多的自定义图形和交互，例如：
自定义节点样式：可以通过设置 attr 属性来定义更多的样式。
事件处理：通过 paper.on 监听各种用户交互事件。
交互操作：例如，添加拖拽、链接、删改等功能。
自定义节点和事件示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
</head>

<body>
    <div id="app">
        <div ref="paperContainer" style="width: 100%; height: 600px; border: 1px solid black;"></div>
    </div>

    <script>
        const { dia, shapes, highlighters, linkTools } = joint;
            new Vue({
                el: '#app',
               mounted() {
    this.$nextTick(() => {
        const graph = new joint.dia.Graph();

        const paper = new joint.dia.Paper({
            el: this.$refs.paperContainer,
            model: graph,
           
          
            gridSize: 10,
            drawGrid: true,
            background: { color: '#f9f9f9' }
        });

        const rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Custom Node',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        const circle = new joint.shapes.standard.Circle();
        circle.position(300, 30);
        circle.resize(100, 40);
        circle.attr({
            body: {
                fill: 'green'
            },
            label: {
                text: 'Custom Circle',
                fill: 'white'
            }
        });
        circle.addTo(graph);

        const link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(circle);
        link.appendLabel({
            attrs: {
                text: {
                    text: 'Connection'
                }
            }
        });
        link.addTo(graph);

        // 处理节点点击事件
        paper.on('element:pointerclick', (elementView) => {
            alert('Node clicked: ' + elementView.model.attr('label/text'));
        });
    });
}
            });
    </script>
</body>

</html>

这段代码展示了如何创建更多类型的自定义节点，并添加基本的点击事件。

通过以上示例，你可以开始在 Vue 应用中使用 JointJS 来创建和管理复杂的可视化流程图。根据具体需求，还可以添加更多的功能和样式。