React中jointjs使用

前言

JointJS 是一款基于 JavaScript 的开源图表库，用于创建交互式流程图、组织图、UML 图和各种其他图形。它依赖于 jQuery 和 Lodash 库，并提供了许多有用的功能，如拖放支持、缩放、鼠标事件和键盘快捷键等。

安装jointjs

tyarn add jointjs

使用jointjs

import * as joint from 'jointjs';
import { useEffect, useRef } from 'react';


// namespace: 单元模型定义的位置
// paper: 视图层（画布）， graph: 模型层（数据）
// new joint.shapes.standard.Rectangle 具体的节点
// new joint.shapes.standard.Link 连线
// link.source(rect); link.target(rect2); 连接两个节点
// jointjs 开源库提供最基础的图形视图框架结构。布局、折线等没有一个方便的方式去定义，都需要编写代码

// jointjs+: 布局、缩略图、元素快捷操作、快捷键、导出png、canvas to svg、bmpn、图表、剪切板、框选、对齐线

function App() {

  const holderRef = useRef(null);

  const renderShapes = () => {
    const el = holderRef.current;
    const namespace = joint.shapes;
    const graph = new joint.dia.Graph({}, { cellNamespace: namespace });
    const paper = new joint.dia.Paper({
      el: el,
      model: graph,
      width: 600,
      height: 300,
      gridSize: 10,
      drawGrid: true,
      background: {
        color: 'rgba(0, 255, 0, 0.3)',
      },
      cellViewNamespace: namespace,
      snapLabels: true,
      interactive: {
        linkMove: false,
        labelMove: true,
        arrowheadMove: false,
        vertexMove: false,
        vertexAdd: false,
        vertexRemove: false,
        useLinkTools: false
      }
    });


    var verticesTool = new joint.linkTools.Vertices();
    var segmentsTool = new joint.linkTools.Segments();
    var sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
    var targetArrowheadTool = new joint.linkTools.TargetArrowhead();
    var sourceAnchorTool = new joint.linkTools.SourceAnchor();
    var targetAnchorTool = new joint.linkTools.TargetAnchor();
    var boundaryTool = new joint.linkTools.Boundary();
    var removeButton = new joint.linkTools.Remove();

    var toolsView = new joint.dia.ToolsView({
      tools: [
        verticesTool, segmentsTool,
        sourceArrowheadTool, targetArrowheadTool,
        sourceAnchorTool, targetAnchorTool,
        boundaryTool, removeButton
      ]
    });



    paper.scale(1, 1);

    const rect = new joint.shapes.standard.Rectangle();
    rect.position(100, 30);
    rect.resize(110, 50);
    rect.attr({
      body: {
        fill: 'blue',
      },
      label: {
        text: 'Hello',
        fill: 'white',
        fontSize: 25,
      },
    });
    rect.addTo(graph);

    var rect2 = new joint.shapes.standard.Rectangle();
    rect2.position(400, 30);
    rect2.resize(110, 50);
    rect2.attr({
      body: {
        fill: '#2C3E50',
        rx: 5,
        ry: 5,
        strokeWidth: 2,
      },
      label: {
        text: 'World',
        fill: '#FFFF',
        fontSize: 25,
      },
    });
    rect2.addTo(graph);

    var link = new joint.shapes.standard.Link();
    link.source(rect);
    link.target(rect2);
    link.attr({
      line: {
        stroke: 'blue',
        strokeWidth: 1,
        sourceMarker: {
          type: 'path',
          stroke: 'black',
          fill: 'red',
          d: 'M 10 -5 0 0 10 5 Z',
        },
        targetMarker: {
          type: 'path',
          stroke: 'black',
          fill: 'yellow',
          d: 'M 10 -5 0 0 10 5 Z',
        },
      },
    });

    link.addTo(graph);

    var linkView = link.findView(paper);
    linkView.addTools(toolsView);

    paper.translate(-100, 0);


    paper.on('element:pointerdblclick', function (elementView) {
      console.log(elementView.model.cid, rect2.cid)
      alert("6666");
    })

    paper.on('link:mouseenter', function (linkView) {
      linkView.addTools(toolsView);
    });

    paper.on('link:mouseleave', function (linkView) {
      linkView.removeTools();
    });
  };

  useEffect(() => {
    renderShapes();
  }, [holderRef]);

  return <div id="myholder" ref={holderRef}></div>;
}

export default App

jointjs个人理解

jointjs优点和缺点

优点

1. 丰富的功能和灵活性：JointJS 提供了一系列强大的功能和工具，允许你创建各种类型的可视化图形，包括流程图、组织图、UML 图等。它提供了丰富的元素库、交互式编辑功能和布局管理，使得你可以根据需求定制和扩展图形应用。
2. 跨平台和跨浏览器支持：JointJS 基于 HTML5 和 SVG 技术，可以在现代浏览器中运行，并且支持各种设备和分辨率。这使得它成为一个跨平台和跨浏览器的解决方案，可以在不同的环境中使用和部署。
3. 可扩展性和定制性：JointJS 是一个可扩展和可定制的库，你可以编写自定义的图形元素、工具和算法，以满足特定的需求。它还可以与其他 JavaScript 库和框架（如 React、Angular 和 Vue.js）集成，从而更好地与现有应用程序进行集成。
4. 良好的性能：JointJS 在现代浏览器上具有良好的性能。借助 HTML5 和 SVG 技术的优势，它可以实现高性能的图形渲染，并且支持硬件加速和优化。

缺点

1. 学习曲线较陡：由于 JointJS 具有丰富的功能和复杂的 API，初学者可能需要一些时间来熟悉库的用法和概念。了解基本的 SVG 和图形处理知识也是使用 JointJS 的前提。
2. 维护和文档相对不足：相比一些其他流行的 JavaScript 图形库，JointJS 的维护和文档相对较少。这可能会对开发者在使用和解决问题时带来一些困扰。
3. 适用范围受限：虽然 JointJS 提供了丰富的功能，但它主要专注于可视化图形方面。对于其他领域的应用，如数据可视化或大规模图形处理，可能存在一些限制。

综上所述，JointJS 在功能、跨平台支持和可扩展性方面具有许多优点。然而，它的学习曲线较陡，维护和文档略显不足，并且适用范围受限。根据具体的需求和情况，你可以权衡这些优点和缺点来决定是否选择使用 JointJS。