angular 使用jsMind

最近在找一个好用的angular思维导图插件，找来找去，找到了jsMind,当然，有的同学还搜索到了mind-map这个插件，这个也是基于jsMind封装的。作为一个纯JavaScript插件，怎样在angular中使用呢？

1，jsMind简介

以下摘抄自jsMind github 

jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 canvas (和 svg) 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。你可以在此浏览适用于 jsMind 的 BSD 许可协议(中英文版本)。

2,导入jsMind

目前，jsMind已发布npm库，可直接使用

npm i jsmind

3，接下来按照引入第三方js的方式,引入jsMind的js文件

首先，修改根目录下的angular.json文件：

在styles中和scripts中引入jsMind的样式和js文件，如果想要拖拽和截屏功能的话，jsmind.draggable-node.js和jsmind.screenshot.js都是需要引入的。

4,在组件中导入

import 'jsmind/js/jsmind.js';
import 'jsmind/js/jsmind.draggable-node';

别忘了定义jsMind变量

declare var jsMind:any;

定义options

const options = {
  container: 'jsmind_container',
  theme: 'greensea',
  editable: true,
  view: {
      draggable: true,
  },
}

定义变量mindMap

 mindMap:any;

然后在ngOnInit方法中直接调用show方法

 this.mindMap = jsMind.show(options,this.mind);

在html中，定义一个div，注意id要和options中的container保持一致

<div id="jsmind_container" ></div> 

别忘了给div设置以下宽高，要不然显示不出来

#jsmind_container {
    float: left;
    width: 100%;
    height: 800px;
}

现在就能看到效果了

 5，监听jsMind中的拖拽，点击事件

  ngAfterViewInit(): void {
    let jsMindDOM = jsMind.util.dom;
    jsMindDOM.add_event(document,'mousedown',(e:any)=>{
      let position:Position = (this.jsmindUtilService.dragstart(e,options.editable)) as Position;
      if(position){
        this.mouseDownFlag = true;
      }
      console.log(position);
    })
    jsMindDOM.add_event(document,'mousemove',(e:any)=>{
      // console.log(e)
    })
    jsMindDOM.add_event(document,'mouseup',(e:any)=>{
      if(this.mouseDownFlag){
        console.log(this.mindMap.get_data())
        this.mouseDownFlag = false;
      }
    })
  }

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class JsmingUtilService {

  constructor() { }
  dragstart (e:any,editable:boolean) {
    
    if (!editable) { return; }
    var el = e.target;
    if (el.tagName.toLowerCase() != 'jmnode') { return; }
    console.log(e)
            
    let offset_x = (e.clientX || e.touches[0].clientX)  - el.offsetLeft;
    let offset_y = (e.clientY || e.touches[0].clientY) - el.offsetTop;
    let client_hw = Math.floor(el.clientWidth / 2);
    let client_hh = Math.floor(el.clientHeight / 2);
    return {x:offset_x,y:offset_y,hw:client_hw,hh:client_hh}
  }
}