vue使用jsMind(思维导图)
前言
jsMind 是一个显示/编辑思维导图的纯 javascript 类库,其基于 html5 的 canvas 进行设计。
我们使用它可能需要在网页上单纯的使用这种图样的效果,而其他交互却是自定义的,我这边选择的是jsMind 与 网上的一个jsmind.menu.js
(右键菜单)。
开始
安装
npm i jsmind --save
使用
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'
window.jsMind = jsMind
const { init, reBuild } = require('./jsmind.menu.js')
const { resetMind } = require('./jsResetMind.js')
init(jsMind)
resetMind(jsMind)
...
注: 常规用法看网上jsMind。
实例修改
在使用jsMind感觉有一些问题(不知道是不是我这边电脑的问题)以及满足我的需求做了一些改变。
隐藏和打开样式居下
处理方式(增加样式):
// 让其居中
jmexpander {display: flex;justify-content: center;align-items: center;
}
隐藏和打开 滑动条有问题
处理方式(重构内部方法):
打开 https://gitee.com/314079846/jsmind/blob/master/js/jsmind.js
找到这个使用修改宽度和高度的方法进行重构!!
;(function ($w, mind) {var Jm = $w[mind]Jm.view_provider.prototype.expand_size = function () {var min_size = this.layout.get_min_size()var min_width = min_size.w + this.opts.hmargin * 2var min_height = min_size.h + this.opts.vmargin * 2// 修改这里 每一个大概减去20左右var client_w = this.e_panel.clientWidth - 20var client_h = this.e_panel.clientHeight - 20if (client_w < min_width) {client_w = min_width}if (client_h < min_height) {client_h = min_height}this.size.w = client_wthis.size.h = client_h}if (typeof module !== 'undefined' && typeof exports === 'object') {module.exports = {resetMind: function (opt) {Jm = opt},}}
})(window, 'jsMind')
jsmind.menu.js 中 增加自定义菜单并自定义函数
jsmind.menu.js 中 寻找到定义menu的地方,增加custom
自定义属性
注: 自定义的东西肯定需要自定义一个类型或者唯一性的key,让代码知道我点击的是哪一个,所以还需要处理点击事件。
jsmind.menu.js 中 增加 菜单点击事件自定义
寻找对应点击事件_create_menu_item
与 _get_injectionList
.
在里面增加key属性。
即:
后面使用方式(options):
每一个节点样式根据节点数据变化的
目前的jsMind是设置了主题,不过是不满足我的需求,还有每一个节点的样式设置了常用的background
、width
等,需要自己的话得重构设置style方法
在里面添加自己需要的样式。
节点鼠标右键位置
鼠标大概在红圈位置右键,放大缩小的时候会位置有问题。
解决方式:
jsmind.menu.js
中修改menuStl
增加布局样式 'transform-origin': '0 0'
每个节点对应不同的菜单
目前插件是统一每一个是一样的menu。
修改方式:
- 每一个节点可定义一个
dataClass
属性,不写是未定义不显示任何菜单,名字自定义取 - 对应的
menu
中的injectionList
数组增加dataClass
属性 jsmind.menu.js
中_event_contextMenu
方法修改每一个menu-item
的样式是否显示,同时_create_menu_item
方法增加menuItem的class。
放大缩小数据多了左边会显示不出来
看图:
解决方式:
setZoom方法
Jm.view_provider.prototype.setZoom = function (zoom) {if (zoom < this.minZoom || zoom > this.maxZoom) {return false}this.actualZoom = zoomfor (var i = 0; i < this.e_panel.children.length; i++) {this.e_panel.children[i].style.transform = 'scale(' + zoom + ')'this.e_panel.children[i].parentNode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'// this.e_panel.children[i].style['transform-origin'] = '0 0'}this.show(true)return true}
第一种: 增加 paddingLeft样式
this.e_panel.children[i].parentNode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'
第二种: 设置 transform-origin
this.e_panel.children[i].style['transform-origin'] = '0 0'
实现效果
demo效果
总结
为了实现我的效果,又不太想用庞大的组件和插件,jsMind
是非常合适的选择,可重构、可扩展。感谢jsMind
和jsmind.menu.js
的分享者!
参考
jsMind(https://gitee.com/314079846/jsmind/tree/master)
欢迎各位圈友关注,一起浪~
vue使用jsMind(思维导图)相关推荐
- 【Vue】Vue基础总结 思维导图
Vue基础主要包括指令.过滤器(filters).侦听器(watch).计算属性(computed).自定义属性(props).生命周期及生命周期函数.组件之间的数据共享.ref引用.创建工程化Vue ...
- Vue 源码 思维导图
- Vue 思维导图(二)
Vue思维导图笔记 vue2.0的思维导图整理 Vue.js学习思维导图一览 本图覆盖Vue.js学习所有基本知识点,有需要的同学可以保存到本地进行缩放,如有问题欢迎批评指正
- 在vue中使用jsmind生成思维导图
在vue中使用jsmind生成思维导图 前景: 项目中有涉及到多层级的数据结构,思维导图的方式更方便查看数据的关系 技术实现:jsmind 实现效果: 安装 npm i jsmind 代码 <t ...
- vue纯手写思维导图,拒绝插件(cv即用)
vue纯手写思维导图,拒绝插件(cv即用) 已完成功能点:折叠.放大.缩小.移动 后续增加功能点:添加.删除 先看结果: 有这么个需求,按照层级关系,把表格放在思维导图上,我第一时间想到用插件,但是找 ...
- vue data数据修改_Vue 超清晰思维导图(7张),详细知识点梳理!
Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套 ...
- iris流程图_GitHub - LeoIris/vue: vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)...
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了 .这个vue源码逐行分析,我基本每 ...
- 思维导图Vue组件 mindmap
开箱即用的思维导图Vue组件 GitHub 在线演示:https://mindnode.5xin.xyz/
- vue的matcher_一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
1.前言 本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构. 2. Vue 全家桶 先来张 Vue 全家桶 总图: 3. Vue 细分如下 源码 ...
- 【思维导图】vue的思维导图(超全的)
一.使用思维导图总结Vue.js官方文档(例子优化.难点及易错点注释)[上] 二.使用思维导图总结Vue.js官方文档(例子优化.难点及易错点注释)[下] 三.用一张思维导图总结了 Vue | Vue ...
最新文章
- MirantisOpenStack-Fuel 9.0
- 创业路上的这点事之 从无到有,从有到......
- caffe修改hdf5的datalayer
- 四位共阳极数码管显示函数_新手求助四位共阳数码管显示函数
- docker 安装ElasticSearch 6.x
- 进程kswapd0与events/0消耗大量CPU的问题
- c++中的运算符异或^,与,或|
- TypeScript 类
- C语言进阶——使用C语言与gnuplot结合画一些波形
- 来自18年9月底的总结及展望
- activity 流程编辑器_最好用的流程编辑器bpmnjs系列之Viewer
- pythonnumpy算术函数_python的numpy.prod函数运行实例详解
- Spring源码下载及安装
- 怎么把matlab的背景改成白色背景图片,如何把图片背景换成白色?
- matlab 向量的基本运算
- 完全删除iCloud注册的Apple ID
- MYSQL设置初始密码
- 进程的同步和互斥反映了_用信号量解决进程的同步与互斥探讨【持续更新】
- 使用sql server Management Studio(企业管理器)或查询分析器管理数据库
- C语言数据的输入输出