mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 18:37:43 +08:00
日常提交
This commit is contained in:
wanglin
parent
cde53602a3
commit
f6c1a64f7c
@ -33,7 +33,6 @@ export default {
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "子节点1-1",
|
||||
...createFullData()
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
@ -48,8 +47,7 @@ export default {
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1",
|
||||
...createFullData()
|
||||
"text": "子节点2-1"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
@ -79,8 +77,7 @@ export default {
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-2",
|
||||
...createFullData()
|
||||
"text": "子节点2-1-2-2-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -92,8 +89,7 @@ export default {
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-2-3",
|
||||
...createFullData()
|
||||
"text": "子节点4-1-2-3"
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -108,7 +104,58 @@ export default {
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-2",
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-2-3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -120,12 +167,62 @@ export default {
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点3-1",
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-2-3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点3-2",
|
||||
...createFullData()
|
||||
"text": "子节点3-2"
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -143,7 +240,58 @@ export default {
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-1",
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2",
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-1",
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-2"
|
||||
}
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-2-2-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-2-3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-3",
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
@ -152,8 +300,7 @@ export default {
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点4-1-3",
|
||||
...createFullData()
|
||||
"text": "子节点4-1-3"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -58,6 +58,10 @@ class Node {
|
||||
this.parent = opt.parent || null
|
||||
// 子节点
|
||||
this.children = opt.children || []
|
||||
// 节点内容的容器
|
||||
this.group = null
|
||||
// 节点内容是否发生了变化，是的话会重新计算和渲染
|
||||
this.changed = true
|
||||
// 文本节点
|
||||
this.textNode = null
|
||||
// icon间距
|
||||
@ -98,6 +102,9 @@ class Node {
|
||||
* @Desc: 刷新节点的宽高
|
||||
*/
|
||||
refreshSize() {
|
||||
if (!this.changed) {
|
||||
return;
|
||||
}
|
||||
let {
|
||||
width,
|
||||
height
|
||||
@ -369,15 +376,15 @@ class Node {
|
||||
} = this
|
||||
let { paddingY } = this.getPaddingVale()
|
||||
// 创建组
|
||||
let group = this.draw.group()
|
||||
this.group = this.draw.group()
|
||||
// 节点矩形
|
||||
this.style.rect(group.rect(width, height).x(left).y(top))
|
||||
this.style.rect(this.group.rect(width, height).x(left).y(top))
|
||||
// 图片节点
|
||||
let imgObj = this.createImgNode()
|
||||
let imgHeight = 0
|
||||
if (imgObj) {
|
||||
imgHeight = imgObj.height
|
||||
group.add(imgObj.node)
|
||||
this.group.add(imgObj.node)
|
||||
imgObj.node.cx(left + width / 2).y(top + paddingY)
|
||||
}
|
||||
// 内容节点
|
||||
@ -436,9 +443,9 @@ class Node {
|
||||
left + width / 2 - textContentNested.bbox().width / 2,
|
||||
top + imgHeight + paddingY + (imgHeight > 0 && _textContentHeight > 0 ? this._blockContentMargin : 0)
|
||||
)
|
||||
group.add(textContentNested)
|
||||
// 单击事件
|
||||
group.click((e) => {
|
||||
this.group.add(textContentNested)
|
||||
// 单击事件，选中节点
|
||||
this.group.click((e) => {
|
||||
e.stopPropagation()
|
||||
if (this.nodeData.data.isActive) {
|
||||
return;
|
||||
@ -448,15 +455,36 @@ class Node {
|
||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||
isActive: !this.nodeData.data.isActive
|
||||
})
|
||||
this.renderNode()
|
||||
this.renderer.activeNodeList.push(this)
|
||||
this.mindMap.render()
|
||||
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
|
||||
})
|
||||
// 双击事件
|
||||
group.dblclick(() => {
|
||||
this.group.dblclick(() => {
|
||||
this.mindMap.emit('node_dblclick', this)
|
||||
})
|
||||
return group
|
||||
}
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 20:20:09
|
||||
* @Desc: 渲染节点到画布
|
||||
*/
|
||||
renderNode() {
|
||||
if (this.group) {
|
||||
this.group.remove()
|
||||
}
|
||||
this.createNode()
|
||||
this.draw.add(this.group)
|
||||
}
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 22:47:01
|
||||
* @Desc: 更新整体位置
|
||||
*/
|
||||
updatePos() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@ -471,7 +499,12 @@ class Node {
|
||||
// 按钮
|
||||
this.renderExpandBtn()
|
||||
// 节点
|
||||
this.draw.add(this.createNode())
|
||||
if (this.changed) {
|
||||
this.renderNode()
|
||||
} else {
|
||||
this.updatePos()
|
||||
}
|
||||
this.changed = false
|
||||
// 子节点
|
||||
if (this.children && this.children.length && this.nodeData.data.expand !== false) {
|
||||
this.children.forEach((child) => {
|
||||
@ -501,7 +534,7 @@ class Node {
|
||||
* @Desc: 展开收缩按钮
|
||||
*/
|
||||
renderExpandBtn() {
|
||||
if ((!this.nodeData.data.cacheChildren || this.nodeData.data.cacheChildren.length <= 0) && this.children.length <= 0 || this.isRoot) {
|
||||
if (this.children.length <= 0 || this.isRoot) {
|
||||
return;
|
||||
}
|
||||
let g = this.draw.group()
|
||||
@ -529,20 +562,9 @@ class Node {
|
||||
})
|
||||
g.click(() => {
|
||||
// 展开收缩
|
||||
let data = {}
|
||||
let children = []
|
||||
if (this.nodeData.data.expand) {
|
||||
data.expand = false
|
||||
data.cacheChildren = this.nodeData.children.map((item) => {
|
||||
return copyRenderTree({}, item);
|
||||
})
|
||||
children = []
|
||||
} else {
|
||||
data.expand = true
|
||||
children = this.nodeData.data.cacheChildren
|
||||
data.cacheChildren = []
|
||||
}
|
||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, data, children)
|
||||
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
|
||||
expand: !this.mindMap.nodeData.data.expand
|
||||
}, children)
|
||||
this.mindMap.emit('expand_btn_click', this)
|
||||
})
|
||||
g.add(fillNode)
|
||||
@ -589,6 +611,7 @@ class Node {
|
||||
[prop]: value
|
||||
})
|
||||
}
|
||||
this.renderNode()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -59,7 +59,6 @@ class Render {
|
||||
// 清除激活状态
|
||||
if (this.activeNodeList.length > 0) {
|
||||
this.clearActive()
|
||||
this.mindMap.render()
|
||||
this.mindMap.emit('node_active', null, [])
|
||||
}
|
||||
})
|
||||
@ -88,6 +87,7 @@ class Render {
|
||||
* @Desc: 渲染
|
||||
*/
|
||||
render() {
|
||||
console.log('渲染')
|
||||
this.root = this.layout.doLayout()
|
||||
this.root.render()
|
||||
}
|
||||
@ -102,6 +102,7 @@ class Render {
|
||||
this.mindMap.execCommand('UPDATE_NODE_DATA', item, {
|
||||
isActive: false
|
||||
})
|
||||
item.renderNode()
|
||||
})
|
||||
this.activeNodeList = []
|
||||
}
|
||||
@ -200,6 +201,7 @@ class Render {
|
||||
if (children) {
|
||||
node.nodeData.children = children
|
||||
}
|
||||
node.changed = true
|
||||
this.mindMap.render()
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,6 +98,7 @@ export default class TextEdit {
|
||||
this.mindMap.execCommand('UPDATE_NODE_DATA', node, {
|
||||
text: str
|
||||
})
|
||||
node.changed = true
|
||||
this.mindMap.render()
|
||||
})
|
||||
this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)
|
||||
|
||||
@ -37,32 +37,58 @@ class View {
|
||||
this.mindMap.event.on('drag', (e, event) => {
|
||||
this.x = this.sx + event.mousemoveOffset.x
|
||||
this.y = this.sy + event.mousemoveOffset.y
|
||||
this.mindMap.draw.transform({
|
||||
scale: this.scale,
|
||||
origin: 'left center',
|
||||
translate: [this.x, this.y],
|
||||
})
|
||||
this.transform()
|
||||
})
|
||||
// 放大缩小视图
|
||||
this.mindMap.event.on('mousewheel', (e, dir) => {
|
||||
// // 放大
|
||||
if (dir === 'down') {
|
||||
this.scale += this.mindMap.opt.scaleRatio
|
||||
this.enlarge()
|
||||
} else { // 缩小
|
||||
if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
|
||||
this.scale -= this.mindMap.opt.scaleRatio
|
||||
} else {
|
||||
this.scale = 0.1
|
||||
}
|
||||
this.narrow()
|
||||
}
|
||||
this.mindMap.draw.transform({
|
||||
scale: this.scale,
|
||||
origin: 'left center',
|
||||
translate: [this.x, this.y],
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 17:13:14
|
||||
* @Desc: 应用变换
|
||||
*/
|
||||
transform() {
|
||||
this.mindMap.draw.transform({
|
||||
scale: this.scale,
|
||||
origin: 'left center',
|
||||
translate: [this.x, this.y],
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 17:10:34
|
||||
* @Desc: 缩小
|
||||
*/
|
||||
narrow() {
|
||||
if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
|
||||
this.scale -= this.mindMap.opt.scaleRatio
|
||||
} else {
|
||||
this.scale = 0.1
|
||||
}
|
||||
this.transform()
|
||||
this.mindMap.emit('scale', this.scale)
|
||||
}
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 17:10:41
|
||||
* @Desc: 放大
|
||||
*/
|
||||
enlarge() {
|
||||
this.scale += this.mindMap.opt.scaleRatio
|
||||
this.transform()
|
||||
this.mindMap.emit('scale', this.scale)
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
|
||||
@ -45,16 +45,26 @@ class LogicalStructure extends Base {
|
||||
computedBaseValue() {
|
||||
walk(this.renderTree, null, (cur, parent, isRoot, layerIndex) => {
|
||||
// 创建节点
|
||||
let newNode = new Node({
|
||||
data: cur,
|
||||
uid: this.mindMap.uid++,
|
||||
renderer: this.renderer,
|
||||
mindMap: this.mindMap,
|
||||
draw: this.draw,
|
||||
layerIndex
|
||||
})
|
||||
// 数据关联实际节点
|
||||
cur._node = newNode
|
||||
let newNode = null
|
||||
if (cur && cur._node) {
|
||||
newNode = cur._node
|
||||
newNode.children = []
|
||||
newNode.parent = null
|
||||
if (cur._node.changed) {
|
||||
newNode.refreshSize()
|
||||
}
|
||||
} else {
|
||||
newNode = new Node({
|
||||
data: cur,
|
||||
uid: this.mindMap.uid++,
|
||||
renderer: this.renderer,
|
||||
mindMap: this.mindMap,
|
||||
draw: this.draw,
|
||||
layerIndex
|
||||
})
|
||||
// 数据关联实际节点
|
||||
cur._node = newNode
|
||||
}
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
newNode.isRoot = true
|
||||
|
||||
@ -65,8 +65,8 @@ export default {
|
||||
},
|
||||
// 三级及以下节点样式
|
||||
node: {
|
||||
marginX: 60,
|
||||
marginY: 40,
|
||||
marginX: 50,
|
||||
marginY: 10,
|
||||
fillColor: 'transparent',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#6a6d6c',
|
||||
|
||||
BIN
web/src/.DS_Store
vendored
BIN
web/src/.DS_Store
vendored
Binary file not shown.
BIN
web/src/assets/.DS_Store
vendored
BIN
web/src/assets/.DS_Store
vendored
Binary file not shown.
@ -54,6 +54,30 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">定位</div>
|
||||
<div class="code-name">&#xe616;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">导航</div>
|
||||
<div class="code-name">&#xe611;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">键盘</div>
|
||||
<div class="code-name">&#xe64d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">全屏</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">导出</div>
|
||||
@ -162,9 +186,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1624540474886') format('woff2'),
|
||||
url('iconfont.woff?t=1624540474886') format('woff'),
|
||||
url('iconfont.ttf?t=1624540474886') format('truetype');
|
||||
src: url('iconfont.woff2?t=1625399244498') format('woff2'),
|
||||
url('iconfont.woff?t=1625399244498') format('woff'),
|
||||
url('iconfont.ttf?t=1625399244498') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -190,6 +214,42 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icondingwei"></span>
|
||||
<div class="name">
|
||||
定位
|
||||
</div>
|
||||
<div class="code-name">.icondingwei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icondaohang"></span>
|
||||
<div class="name">
|
||||
导航
|
||||
</div>
|
||||
<div class="code-name">.icondaohang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconjianpan"></span>
|
||||
<div class="name">
|
||||
键盘
|
||||
</div>
|
||||
<div class="code-name">.iconjianpan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconquanping"></span>
|
||||
<div class="name">
|
||||
全屏
|
||||
</div>
|
||||
<div class="code-name">.iconquanping
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icondaochu"></span>
|
||||
<div class="name">
|
||||
@ -352,6 +412,38 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icondingwei"></use>
|
||||
</svg>
|
||||
<div class="name">定位</div>
|
||||
<div class="code-name">#icondingwei</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icondaohang"></use>
|
||||
</svg>
|
||||
<div class="name">导航</div>
|
||||
<div class="code-name">#icondaohang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconjianpan"></use>
|
||||
</svg>
|
||||
<div class="name">键盘</div>
|
||||
<div class="code-name">#iconjianpan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconquanping"></use>
|
||||
</svg>
|
||||
<div class="name">全屏</div>
|
||||
<div class="code-name">#iconquanping</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icondaochu"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1624540474886') format('woff2'),
|
||||
url('iconfont.woff?t=1624540474886') format('woff'),
|
||||
url('iconfont.ttf?t=1624540474886') format('truetype');
|
||||
src: url('iconfont.woff2?t=1625399244498') format('woff2'),
|
||||
url('iconfont.woff?t=1625399244498') format('woff'),
|
||||
url('iconfont.ttf?t=1625399244498') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,22 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icondingwei:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icondaohang:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.iconjianpan:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.iconquanping:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icondaochu:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,34 @@
|
||||
"css_prefix_text": "icon",
|
||||
"description": "思维导图",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "397753",
|
||||
"name": "定位",
|
||||
"font_class": "dingwei",
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "2605158",
|
||||
"name": "导航",
|
||||
"font_class": "daohang",
|
||||
"unicode": "e611",
|
||||
"unicode_decimal": 58897
|
||||
},
|
||||
{
|
||||
"icon_id": "6528451",
|
||||
"name": "键盘",
|
||||
"font_class": "jianpan",
|
||||
"unicode": "e64d",
|
||||
"unicode_decimal": 58957
|
||||
},
|
||||
{
|
||||
"icon_id": "7556170",
|
||||
"name": "全屏",
|
||||
"font_class": "quanping",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "788015",
|
||||
"name": "导出",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -58,7 +58,7 @@ export default {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
background: hsla(0, 0%, 100%, 0.6);
|
||||
background: hsla(0, 0%, 100%, 0.8);
|
||||
border-radius: 2px;
|
||||
opacity: 0.8;
|
||||
height: 22px;
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="editContainer">
|
||||
<div class="mindMapContainer" ref="mindMapContainer"></div>
|
||||
<Count></Count>
|
||||
<NavigatorToolbar :mindMap="mindMap"></NavigatorToolbar>
|
||||
<Outline></Outline>
|
||||
<Style></Style>
|
||||
<BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
|
||||
@ -19,6 +20,7 @@ import exampleData from "simple-mind-map/example/exampleData";
|
||||
import Theme from "./Theme";
|
||||
import Structure from "./Structure";
|
||||
import Count from "./Count";
|
||||
import NavigatorToolbar from './NavigatorToolbar';
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@ -34,6 +36,7 @@ export default {
|
||||
Theme,
|
||||
Structure,
|
||||
Count,
|
||||
NavigatorToolbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
49
web/src/pages/Edit/components/NavigatorToolbar.vue
Normal file
49
web/src/pages/Edit/components/NavigatorToolbar.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="navigatorContainer">
|
||||
<div class="item">
|
||||
<Scale :mindMap="mindMap"></Scale>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scale from './Scale';
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-24 22:53:10
|
||||
* @Desc: 导航器工具栏
|
||||
*/
|
||||
export default {
|
||||
name: "NavigatorToolbar",
|
||||
components: {
|
||||
Scale
|
||||
},
|
||||
props: {
|
||||
mindMap: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.navigatorContainer {
|
||||
padding: 0 12px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background: hsla(0, 0%, 100%, 0.8);
|
||||
border-radius: 5px;
|
||||
opacity: 0.8;
|
||||
height: 44px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
77
web/src/pages/Edit/components/Scale.vue
Normal file
77
web/src/pages/Edit/components/Scale.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="scaleContainer">
|
||||
<el-tooltip class="item" effect="dark" content="缩小" placement="top">
|
||||
<div class="btn el-icon-minus" @click="narrow"></div>
|
||||
</el-tooltip>
|
||||
<div class="scaleInfo">{{ scaleNum }}%</div>
|
||||
<el-tooltip class="item" effect="dark" content="放大" placement="top">
|
||||
<div class="btn el-icon-plus" @click="enlarge"></div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-06-24 22:53:10
|
||||
* @Desc: 放大缩小
|
||||
*/
|
||||
export default {
|
||||
name: "Scale",
|
||||
props: {
|
||||
mindMap: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scaleNum: 100,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mindMap(val, oldVal) {
|
||||
if (val && !oldVal) {
|
||||
this.mindMap.on("scale", (scale) => {
|
||||
this.scaleNum = (scale * 100).toFixed(0);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 17:10:34
|
||||
* @Desc: 缩小
|
||||
*/
|
||||
narrow() {
|
||||
this.mindMap.view.narrow();
|
||||
},
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
* @Date: 2021-07-04 17:10:41
|
||||
* @Desc: 放大
|
||||
*/
|
||||
enlarge() {
|
||||
this.mindMap.view.enlarge();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.scaleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scaleInfo {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user