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}}
}

angular 使用jsMind相关推荐

Angular No name was provided for external module 'XXX' in output.globals 错误
Angular 7 开发自定义库时,引用ngZorroAntd,build过程中出现 No name was provided for external module 'ng-zorro-antd' ...
angular.isUndefined()
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ang ...
五：Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上实 ...
angular初步认识一
最近比较流行MVC前端框架开发,最近研究了一个框架AngularJS框架不说那么多,先上例子,我是个代码控 <!DOCTYPE html> <html lang="en& ...
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...

angular 使用jsMind

angular 使用jsMind相关推荐

最新文章

热门文章