1、安装jsmind
yarn add jsmind
2、源码
<template>
<div>
<div>
<input type="button" value="放大" v-on:click="zoomIn" />
<input type="button" value="缩小" v-on:click="zoomOut" />
</div>
<div id="jsmind_container"></div>
</div>
</template>
<script>
import "jsmind/style/jsmind.css";
import jsMind from "jsmind/js/jsmind.js";
window.jsMind = jsMind;
require("jsmind/js/jsmind.draggable.js");
require("jsmind/js/jsmind.screenshot.js");
require('./jsmind.menu.js')
export default {
name: "MyJsmind",
data: function () {
return {
jm: null,
};
},
mounted: function () {
this.init_data();
},
methods: {
init_data: function () {
var mind = {
/* 元数据,定义思维导图的名称、作者、版本等信息 */
meta: {
name: "jsMind-demo-tree",
author: "hizzgdev@163.com",
version: "0.2",
},
/* 数据格式声明 */
format: "node_tree",
/* 数据内容 */
data: {
id: "root",
topic: "jsMind",
children: [
{
id: "easy",
topic: "Easy",
direction: "left",
expanded: false,
children: [
{ id: "easy1", topic: "Easy to show" },
{ id: "easy2", topic: "Easy to edit" },
{ id: "easy3", topic: "Easy to store" },
{ id: "easy4", topic: "Easy to embed" },
],
},
{
id: "open",
topic: "Open Source",
direction: "right",
expanded: true,
children: [
{ id: "open1", topic: "on GitHub" },
{ id: "open2", topic: "BSD License" },
],
},
{
id: "powerful",
topic: "Powerful",
direction: "right",
children: [
{ id: "powerful1", topic: "Base on Javascript" },
{ id: "powerful2", topic: "Base on HTML5" },
{ id: "powerful3", topic: "Depends on you" },
],
},
{
id: "other",
topic: "test node",
direction: "left",
children: [
{ id: "other1", topic: "I'm from local variable" },
{ id: "other2", topic: "I can do everything" },
],
},
],
},
};
var options = {
container: "jsmind_container",
editable: true,
theme: "primary",
menuOpts: {
showMenu: true,
injectionList: [
{
target: "edit",
text: "编辑节点",
callback: function (node) {
console.log(node);
},
},
{
target: "addChild",
text: "添加子节点",
callback: function (node) {
console.log(node);
},
},
{
target: "addBrother",
text: "添加兄弟节点",
callback: function (node) {
console.log(node);
},
},
{
target: "delete",
text: "删除节点",
callback: function (node) {
console.log(node);
},
},
{
target: "screenshot",
text: "下载导图",
callback: function (node) {
console.log(node);
},
},
{
target: "showAll",
text: "展开全部节点",
callback: function (node) {
console.log(node);
},
},
{
target: "hideAll",
text: "收起全部节点",
callback: function (node) {
console.log(node);
},
},
],
},
};
this.jm = new jsMind(options);
this.jm.show(mind);
},
zoomIn: function () {
this.jm.view.zoomIn();
},
zoomOut: function () {
this.jm.view.zoomOut();
},
},
};
</script>
<style scoped>
#jsmind_container {
width: 100%;
height: 800px;
}
</style>
3、jsmind.menu.js文件
/*
* Released under BSD License
* Copyright (c) 2019-2020 Allen_sun_js@hotmail.com
*
* Project Home:
* https://github.com/allensunjian
*/
;(function ($w, temp) {
var Jm = $w[temp]
var name = 'menu'
var $d = $w['document']
var menuEvent = 'oncontextmenu'
var clickEvent = 'onclick'
var overEvent = 'mouseover'
var $c = function (tag) {
return $d.createElement(tag)
}
var _noop = function () {}
var logger =
typeof console === 'undefined'
? {
log: _noop,
debug: _noop,
error: _noop,
warn: _noop,
info: _noop,
}
: console
var $t = function (n, t) {
if (n.hasChildNodes()) {
n.firstChild.nodeValue = t
} else {
n.appendChild($d.createTextNode(t))
}
}
var $h = function (n, t) {
if (t instanceof HTMLElement) {
t.innerHTML = ''
n.appendChild(t)
} else {
n.innerHTML = t
}
}
if (!Jm || Jm[name]) return
Jm.menu = function (_jm) {
this._get_menu_options(_jm, function () {
this.init(_jm)
this._mount_events()
})
}
Jm.menu.prototype = {
defaultDataMap: {
funcMap: {
edit: {
isDepNode: true,
// defaultFn不受到中台变量的控制,始终会先于fn去执行
defaultFn: function (node) {
var f = this._menu_default_mind_methods._menu_begin_edit.call(this.jm)
f && this._menu_default_mind_methods._menu_edit_node_begin(this.jm.view, node)
},
fn: _noop,
text: 'edit node',
},
addChild: {
isDepNode: true,
fn: function (nodeid, text) {
var selected_node = this.get_selected_node()
if (selected_node) {
var node = this.add_node(selected_node, nodeid, text)
if (node) {
this.select_node(nodeid)
this.begin_edit(nodeid)
}
}
},
text: 'append child',
},
addBrother: {
isDepNode: true,
fn: function (nodeid, text) {
var selected_node = this.get_selected_node()
if (!!selected_node && !selected_node.isroot) {
var node = this.insert_node_after(selected_node, nodeid, text)
if (node) {
this.select_node(nodeid)
this.begin_edit(nodeid)
}
}
},
text: 'append brother',
},
delete: {
isDepNode: true,
fn: function () {
this.shortcut.handle_delnode.call(this.shortcut, this)
},
text: 'delete node',
},
showAll: {
sDepNode: false,
fn: function () {
this.expand_all(this)
},
text: 'show all',
},
hideAll: {
isDepNode: false,
fn: function () {
this.collapse_all(this)
},
text: 'hide all',
},
screenshot: {
isDepNode: false,
fn: function () {
if (!this.screenshot) {
logger.error('[jsmind] screenshot dependent on jsmind.screenshot.js !')
return
}
this.screenshot.shootDownload()
},
text: 'load mind picture',
},
showNode: {
isDepNode: true,
fn: function (node) {
this.expand_node(node)
},
text: 'show target node',
},
hideNode: {
isDepNode: true,
fn: function (node) {
this.collapse_node(node)
},
text: 'hide target node',
},
},
menuStl: {
width: '150px',
padding: '12px 0',
position: 'fixed',
'z-index': '10',
background: '#fff',
'box-shadow': '0 2px 12px 0 rgba(0,0,0,0.1)',
'border-radius': '5px',
'font-size': '12px',
display: 'none',
},
menuItemStl: {
padding: '5px 15px',
cursor: 'pointer',
display: 'block',
'text-align': 'center',
transition: 'all .2s',
},
injectionList: ['edit', 'addChild', 'delete'],
},
init: function (_jm) {
this._create_menu(_jm)
this._get_injectionList(_jm)
this.menuOpts.switchMidStage &&
Jm.util.dom.add_event(
_jm.view.e_editor,
'blur',
function (e) {
this._menu_default_mind_methods._menu_edit_node_end.call(_jm.view)
if (typeof this.menuOpts.editCaller === 'function') {
this.menuOpts.editCaller(
$w.menu._update_node_info,
this._menu_default_mind_methods._menu_update_edit_node
)
return
}
this._menu_default_mind_methods._menu_update_edit_node()
}.bind(this)
)
},
_event_contextMenu(e) {
e.preventDefault()
this.menu.style.left = e.clientX + 'px'
this.menu.style.top = e.clientY + 'px'
this.menu.style.display = 'block'
this.selected_node = this.jm.get_selected_node()
},
_event_hideMenu() {
this.menu.style.display = 'none'
},
_mount_events() {
$w[menuEvent] = this._event_contextMenu.bind(this)
$w[clickEvent] = this._event_hideMenu.bind(this)
},
_create_menu(_jm) {
var d = $c('menu')
this._set_menu_wrap_syl(d)
this.menu = d
this.e_panel = _jm.view.e_panel
this.e_panel.appendChild(d)
},
_create_menu_item(j, text, fn, isDepNode, cb, defaultFn) {
var d = $c('menu-item')
var _this = this
this._set_menu_item_syl(d)
d.innerText = text
d.addEventListener(
'click',
function () {
if (this.selected_node || !isDepNode) {
defaultFn.call(_this, this.selected_node)
if (!_this._get_mid_opts()) {
cb(this.selected_node, _noop)
fn.call(j, Jm.util.uuid.newid(), this.menuOpts.newNodeText || '请输入节点名称')
return
}
cb(
this.selected_node,
_this._mid_stage_next(
function () {
var retArgs = [this.selected_node]
var argus = Array.prototype.slice.call(arguments[0], 0)
argus[1] = this.menuOpts.newNodeText || '请输入节点名称'
if (argus[0]) {
retArgs = argus
}
fn.apply(j, retArgs)
}.bind(this)
)
)
return
}
alert(this.menuOpts.tipContent || 'Continue with node selected!')
}.bind(this)
)
d.addEventListener('mouseover', function () {
d.style.background = 'rgb(179, 216, 255)'
})
d.addEventListener('mouseleave', function () {
d.style.background = '#fff'
})
return d
},
_set_menu_wrap_syl(d) {
var os = this._get_option_sty('menu', this._get_mixin_sty)
d.style.cssText = this._format_cssText(os)
},
_set_menu_item_syl(d) {
var os = this._get_option_sty('menuItem', this._get_mixin_sty)
d.style.cssText = this._format_cssText(os)
},
_format_cssText(o) {
var text = ''
Object.keys(o).forEach(function (k) {
text += k + ':' + o[k] + ';'
})
return text
},
_empty_object(o) {
return Object.keys(o).length == 0
},
_get_option_sty(type, fn) {
var sty = this.menuOpts.style
var menu = this.defaultDataMap.menuStl
var menuItem = this.defaultDataMap.menuItemStl
var o = { menu, menuItem }
if (!sty) return o[type]
if (!sty[type]) return o[type]
if (!sty[type] || this._empty_object(sty[type])) return o[type]
return fn(o[type], sty[type])
},
_get_mixin_sty(dSty, oSty) {
var o = {}
Object.keys(oSty).forEach(function (k) {
o[k] = oSty[k]
})
Object.keys(dSty).forEach(function (k) {
if (!o[k]) o[k] = dSty[k]
})
return o
},
_get_menu_options(j, fn) {
var options = j.options
if (!options.menuOpts) return
if (!options.menuOpts.showMenu) return
this.menuOpts = j.options.menuOpts
fn.call(this)
},
_get_injectionDetail() {
var iLs = this.menuOpts.injectionList
var dLs = this.defaultDataMap.injectionList
if (!iLs) return dLs
if (!Array.isArray(iLs)) {
logger.error('[jsmind] injectionList must be a Array')
return
}
if (iLs.length == 0) return dLs
return iLs
},
_get_injectionList(j) {
var list = this._get_injectionDetail()
var _this = this
list.forEach(function (k) {
var o = null
var text = ''
var callback = _noop
var defaultFn = _noop
if (typeof k === 'object') {
o = _this.defaultDataMap.funcMap[k.target]
text = k.text
k.callback && (callback = k.callback)
} else {
o = _this.defaultDataMap.funcMap[k]
text = o.text
}
if (o.defaultFn) defaultFn = o.defaultFn
_this.menu.appendChild(_this._create_menu_item(j, text, o.fn, o.isDepNode, callback, defaultFn))
})
},
_get_mid_opts() {
var b = this.menuOpts.switchMidStage
if (!b) return false
if (typeof b !== 'boolean') {
logger.error('[jsmind] switchMidStage must be Boolean')
return false
}
return b
},
_switch_view_db_event(b, jm) {
Jm.prototype.dblclick_handle = _noop
Jm.shortcut_provider.prototype.handler = _noop
Jm.view_provider.prototype.edit_node_end = _noop
},
_mid_stage_next(fn) {
return function () {
fn(arguments)
}
},
_reset_mind_event_edit() {},
_menu_default_mind_methods: {
_menu_begin_edit: function () {
var f = this.get_editable()
if (!f) {
logger.error('fail, this mind map is not editable.')
}
return f
},
_menu_edit_node_begin(scope, node) {
if (!node.topic) {
logger.warn("don't edit image nodes")
return
}
if (scope.editing_node != null) {
this._menu_default_mind_methods._menu_edit_node_end.call(scope)
}
scope.editing_node = node
var view_data = node._data.view
var element = view_data.element
var topic = node.topic
var ncs = getComputedStyle(element)
scope.e_editor.value = topic
scope.e_editor.style.width =
element.clientWidth -
parseInt(ncs.getPropertyValue('padding-left')) -
parseInt(ncs.getPropertyValue('padding-right')) +
'px'
element.innerHTML = ''
element.appendChild(scope.e_editor)
element.style.zIndex = 5
scope.e_editor.focus()
scope.e_editor.select()
},
_menu_edit_node_end: function () {
if (this.editing_node != null) {
var node = this.editing_node
this.editing_node = null
var view_data = node._data.view
var element = view_data.element
var topic = this.e_editor.value
element.style.zIndex = 'auto'
element.removeChild(this.e_editor)
$w.menu._update_node_info = { id: node.id, topic: topic }
if (Jm.util.text.is_empty(topic) || node.topic === topic) {
if (this.opts.support_html) {
$h(element, node.topic)
} else {
$t(element, node.topic)
}
}
}
},
_menu_update_edit_node: function () {
var info = $w.menu._update_node_info
$w.menu.jm.update_node(info.id, info.topic)
},
},
}
var plugin = new Jm.plugin('menu', function (_jm) {
$w.menu = new Jm.menu(_jm)
menu.jm = _jm
if (menu.menuOpts) _jm.menu = menu
})
Jm.register_plugin(plugin)
function preventMindEventDefault() {
Jm.menu.prototype._switch_view_db_event()
}
Jm.preventMindEventDefault = preventMindEventDefault
})(window, 'jsMind')
4、效果图

本文档展示了如何在 Vue 项目中安装和使用 jsMind 库创建一个可编辑的思维导图。通过引入相关 js 文件,设置数据和选项,实现了思维导图的显示、缩放、编辑节点、添加子节点、删除节点等功能,并提供了右键菜单操作。同时,还展示了 jsmind.menu.js 文件中菜单项的定义和事件处理。
1万+

被折叠的 条评论
为什么被折叠?



