Angular+jointjs

Angular+jointjs

之前搞angular和jointjs搞得很绝望，后来发现哦原来是这个样子啊。

一、进入项目目录，运行以下命令安装jointjs和相关的依赖

1、jquery
npm install jquery --save
npm install @ types / jquery --save-dev
2、backbone
npm install backbone --save
npm install @ types / backbone --save-dev
3、jointjs
npm install jointjs --save
npm install @ types / jointjs --save-dev
4、lodash
npm install lodash@3.10.1 --save
npm install @ types / lodash @ 3.10.1 --save-dev

二、修改angular.json文件

“styles”: [
“styles.scss”,
“node_modules/jointjs/css/layout.css”,
“node_modules/jointjs/css/themes/material.css”,
“node_modules/jointjs/css/themes/default.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/lodash/index.js”,
“node_modules/backbone/backbone.js”,
“node_modules/jointjs/dist/joint.js”
]

三、在对应的component.ts中添加具体内容

import * as _ from ‘lodash’;
import * as backbone from ‘backbone’;
import * as joint from ‘node_modules/jointjs/dist/joint.js’;
declare var $:JQueryStatic;

ngOnInit() { //ngOnInit()是已有的，找到他然后在里面写具体内容

var w = $("#content1").width();	//content1为div
var h = $("#content1").height();
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({
  el: $("#content1"),
  width: w,
  height: h,
  model: graph,
  gridSize: 10,
  drawGrid: true,
  background: {
      color: 'rgb(240,255,255)'
  }
});
let rect = new joint.shapes.basic.Rect({
  position: { x: 100, y: 30 },
  size: { width: 100, height: 30 },
  attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
let rect2 = rect.clone() as joint.shapes.basic.Rect;
rect2.translate(300);
var link = new joint.dia.Link({
  source: { id: rect.id },
  target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);

}

ps:如果出现问题可能是版本不对，在安装的时候可以进行版本控制