如何在Angular 2组件中使用Rappid.js与Joint.js？求演示示例

我之前在Angular项目里集成过Joint.js和Rappid，这里给你分享一个完整的实现步骤和示例，应该能帮到你：

1. 安装依赖 #

首先通过npm安装所需包，建议选择和你的Angular版本匹配的Joint.js/Rappid版本（比如Angular 2对应Joint.js v3.x左右）：

npm install jointjs rappid jquery lodash backbone --save

注意：Rappid依赖jQuery、Lodash和Backbone，这些需要一并安装。

2. 配置Angular项目 #

打开angular.json文件，在build -> options下的scripts和styles数组中添加依赖资源：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/lodash/lodash.min.js",
  "node_modules/backbone/backbone.js",
  "node_modules/jointjs/dist/joint.min.js",
  "node_modules/rappid/dist/rappid.min.js"
],
"styles": [
  "src/styles.css",
  "node_modules/rappid/dist/rappid.min.css"
]

3. 组件实现示例 #

创建一个新组件（比如DiagramComponent），下面是完整的组件代码：

组件模板 (diagram.component.html) #

<div #diagramContainer class="diagram-container"></div>
<!-- 可选：集成Rappid的Stencil拖拽面板 -->
<div #stencilContainer class="stencil-container"></div>

组件样式 (diagram.component.css) #

.diagram-container {
  width: 100%;
  height: 600px;
  border: 1px solid #eee;
}

.stencil-container {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 560px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

组件逻辑 (diagram.component.ts) #

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import * as joint from 'jointjs';
import { stencil } from 'rappid';

@Component({
  selector: 'app-diagram',
  templateUrl: './diagram.component.html',
  styleUrls: ['./diagram.component.css']
})
export class DiagramComponent implements AfterViewInit, OnDestroy {
  @ViewChild('diagramContainer') diagramContainer!: ElementRef;
  @ViewChild('stencilContainer') stencilContainer!: ElementRef;

  private graph!: joint.dia.Graph;
  private paper!: joint.dia.Paper;
  private stencil!: stencil.Stencil;

  ngAfterViewInit(): void {
    // 初始化Graph（数据层）和Paper（渲染层）
    this.graph = new joint.dia.Graph();
    this.paper = new joint.dia.Paper({
      el: this.diagramContainer.nativeElement,
      model: this.graph,
      width: '100%',
      height: '100%',
      gridSize: 10,
      drawGrid: true,
      background: { color: '#f9f9f9' }
    });

    // 创建基础节点示例
    const rect = new joint.shapes.standard.Rectangle({
      position: { x: 100, y: 100 },
      size: { width: 120, height: 60 },
      attrs: {
        body: { fill: '#2ECC71' },
        label: { text: 'Hello', fill: 'white' }
      }
    });

    const textBlock = new joint.shapes.standard.TextBlock({
      position: { x: 300, y: 100 },
      size: { width: 120, height: 60 },
      attrs: {
        label: { text: 'Joint.js', fill: '#3498DB' }
      }
    });

    // 创建节点连接线
    const link = new joint.shapes.standard.Link({
      source: rect,
      target: textBlock,
      attrs: { line: { stroke: '#95A5A6', strokeWidth: 2 } }
    });

    // 将元素添加到Graph中渲染
    this.graph.addCells([rect, textBlock, link]);

    // 可选：初始化Rappid的Stencil拖拽面板
    this.initStencil();
  }

  private initStencil(): void {
    this.stencil = new stencil.Stencil({
      el: this.stencilContainer.nativeElement,
      paper: this.paper,
      width: 200,
      height: 560,
      groups: [
        {
          name: '基础形状',
          elements: [
            new joint.shapes.standard.Rectangle(),
            new joint.shapes.standard.Circle(),
            new joint.shapes.standard.Ellipse()
          ]
        }
      ]
    });
  }

  ngOnDestroy(): void {
    // 清理资源，避免内存泄漏
    if (this.stencil) this.stencil.remove();
    if (this.paper) this.paper.remove();
    if (this.graph) this.graph.clear();
  }
}

4. 关键注意事项 #

• DOM初始化时机：必须在ngAfterViewInit钩子中初始化Joint.js/Rappid，因为此时组件的DOM元素已经渲染完成，能确保获取到有效的容器节点。
• 变更检测问题：Joint.js的事件（比如节点拖拽、点击）运行在Angular的Zone之外，如果需要触发组件的变更检测，可以注入NgZone，将相关逻辑包裹在ngZone.run()中。
• 资源清理：在ngOnDestroy中销毁Paper、Stencil并清空Graph，避免长期运行导致内存泄漏。
• 样式隔离：如果Angular组件使用默认的ViewEncapsulation.Emulated，可能需要用::ng-deep来覆盖Rappid的默认样式，或者关闭组件的样式隔离。
• 版本兼容性：确保安装的Joint.js/Rappid版本和你的Angular版本兼容，避免因版本不匹配出现语法或运行时错误。

内容的提问来源于stack exchange，提问作者Anil Saini