Fix：修复根节点无法黄的问题
This commit is contained in:
wanglin2
parent
eb4ea9fb3a
commit
7a24872331
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.3",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -6,8 +6,10 @@ import btnsSvg from './svg/btns'
|
||||
import iconsSvg from './svg/icons'
|
||||
|
||||
// 节点类
|
||||
|
||||
class Node {
|
||||
// 构造函数
|
||||
|
||||
constructor(opt = {}) {
|
||||
// 节点数据
|
||||
this.nodeData = this.handleData(opt.data || {})
|
||||
@ -109,6 +111,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新主题配置
|
||||
|
||||
updateThemeConfig() {
|
||||
// 主题配置
|
||||
this.themeConfig = this.mindMap.themeConfig
|
||||
@ -117,6 +120,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 复位部分布局时会重新设置的数据
|
||||
|
||||
reset() {
|
||||
this.children = []
|
||||
this.parent = null
|
||||
@ -127,6 +131,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 处理数据
|
||||
|
||||
handleData(data) {
|
||||
data.data.expand = data.data.expand === false ? false : true
|
||||
data.data.isActive = data.data.isActive === true ? true : false
|
||||
@ -135,11 +140,13 @@ class Node {
|
||||
}
|
||||
|
||||
// 检查节点是否存在自定义数据
|
||||
|
||||
hasCustomPosition() {
|
||||
return this.customLeft !== undefined && this.customTop !== undefined
|
||||
}
|
||||
|
||||
// 检查节点是否存在自定义位置的祖先节点
|
||||
|
||||
ancestorHasCustomPosition() {
|
||||
let node = this
|
||||
while (node) {
|
||||
@ -152,11 +159,13 @@ class Node {
|
||||
}
|
||||
|
||||
// 添加子节点
|
||||
|
||||
addChildren(node) {
|
||||
this.children.push(node)
|
||||
}
|
||||
|
||||
// 创建节点的各个内容对象数据
|
||||
|
||||
createNodeData() {
|
||||
this._imgData = this.createImgNode()
|
||||
this._iconData = this.createIconNode()
|
||||
@ -168,6 +177,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 解绑所有事件
|
||||
|
||||
removeAllEvent() {
|
||||
if (this._noteData) {
|
||||
this._noteData.node.off(['mouseover', 'mouseout'])
|
||||
@ -187,6 +197,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除节点内容
|
||||
|
||||
removeAllNode() {
|
||||
// 节点内的内容
|
||||
;[
|
||||
@ -221,6 +232,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 计算节点的宽高
|
||||
|
||||
getSize() {
|
||||
this.removeAllNode()
|
||||
this.createNodeData()
|
||||
@ -233,6 +245,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 计算节点尺寸信息
|
||||
|
||||
getNodeRect() {
|
||||
// 宽高
|
||||
let imgContentWidth = 0
|
||||
@ -300,6 +313,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建图片节点
|
||||
|
||||
createImgNode() {
|
||||
let img = this.nodeData.data.image
|
||||
if (!img) {
|
||||
@ -321,6 +335,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取图片显示宽高
|
||||
|
||||
getImgShowSize() {
|
||||
return resizeImgSize(
|
||||
this.nodeData.data.imageSize.width,
|
||||
@ -331,6 +346,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建icon节点
|
||||
|
||||
createIconNode() {
|
||||
let _data = this.nodeData.data
|
||||
if (!_data.icon || _data.icon.length <= 0) {
|
||||
@ -347,21 +363,23 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建文本节点
|
||||
|
||||
createTextNode() {
|
||||
let g = new G()
|
||||
let fontSize = this.getStyle(
|
||||
'fontSize',
|
||||
this.isRoot,
|
||||
false,
|
||||
this.nodeData.data.isActive
|
||||
)
|
||||
let lineHeight = this.getStyle(
|
||||
'lineHeight',
|
||||
this.isRoot,
|
||||
false,
|
||||
this.nodeData.data.isActive
|
||||
)
|
||||
this.nodeData.data.text.split(/\n/gim).forEach((item, index) => {
|
||||
let node = new Text().text(item)
|
||||
this.style.text(node)
|
||||
console.log(this.isRoot, fontSize, lineHeight, index);
|
||||
node.y(fontSize * lineHeight * index)
|
||||
g.add(node)
|
||||
})
|
||||
@ -374,6 +392,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建超链接节点
|
||||
|
||||
createHyperlinkNode() {
|
||||
let { hyperlink, hyperlinkTitle } = this.nodeData.data
|
||||
if (!hyperlink) {
|
||||
@ -404,6 +423,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建标签节点
|
||||
|
||||
createTagNode() {
|
||||
let tagData = this.nodeData.data.tag
|
||||
if (!tagData || tagData.length <= 0) {
|
||||
@ -430,6 +450,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建备注节点
|
||||
|
||||
createNoteNode() {
|
||||
if (!this.nodeData.data.note) {
|
||||
return null
|
||||
@ -487,6 +508,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取节点形状
|
||||
|
||||
getShape() {
|
||||
// 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
|
||||
return this.themeConfig.nodeUseLineStyle
|
||||
@ -495,6 +517,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 定位节点内容
|
||||
|
||||
layout() {
|
||||
let { width, textContentItemMargin } = this
|
||||
let { paddingY } = this.getPaddingVale()
|
||||
@ -619,6 +642,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 激活节点
|
||||
|
||||
active(e) {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
@ -635,6 +659,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 渲染节点到画布，会移除旧的，创建新的
|
||||
|
||||
renderNode() {
|
||||
// 连线
|
||||
this.renderLine()
|
||||
@ -645,6 +670,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新节点
|
||||
|
||||
update(layout = false) {
|
||||
if (!this.group) {
|
||||
return
|
||||
@ -686,6 +712,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 递归渲染
|
||||
|
||||
render(callback = () => {}) {
|
||||
// 节点
|
||||
if (this.initRender) {
|
||||
@ -727,6 +754,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 递归删除
|
||||
|
||||
remove() {
|
||||
this.initRender = true
|
||||
this.removeAllEvent()
|
||||
@ -745,6 +773,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 隐藏节点
|
||||
|
||||
hide() {
|
||||
this.group.hide()
|
||||
this.hideGeneralization()
|
||||
@ -765,6 +794,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 显示节点
|
||||
|
||||
show() {
|
||||
if (!this.group) {
|
||||
return
|
||||
@ -788,6 +818,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 连线
|
||||
|
||||
renderLine(deep = false) {
|
||||
if (this.nodeData.data.expand === false) {
|
||||
return
|
||||
@ -824,6 +855,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 设置连线样式
|
||||
|
||||
styleLine(line, node) {
|
||||
let width =
|
||||
node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
|
||||
@ -840,6 +872,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除连线
|
||||
|
||||
removeLine() {
|
||||
this._lines.forEach(line => {
|
||||
line.remove()
|
||||
@ -848,11 +881,13 @@ class Node {
|
||||
}
|
||||
|
||||
// 检查是否存在概要
|
||||
|
||||
checkHasGeneralization() {
|
||||
return !!this.nodeData.data.generalization
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
|
||||
createGeneralizationNode() {
|
||||
if (this.isGeneralization || !this.checkHasGeneralization()) {
|
||||
return
|
||||
@ -881,12 +916,14 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新概要节点
|
||||
|
||||
updateGeneralization() {
|
||||
this.removeGeneralization()
|
||||
this.createGeneralizationNode()
|
||||
}
|
||||
|
||||
// 渲染概要节点
|
||||
|
||||
renderGeneralization() {
|
||||
if (this.isGeneralization) {
|
||||
return
|
||||
@ -912,6 +949,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 删除概要节点
|
||||
|
||||
removeGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.remove()
|
||||
@ -932,6 +970,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 隐藏概要节点
|
||||
|
||||
hideGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.hide()
|
||||
@ -942,6 +981,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 显示概要节点
|
||||
|
||||
showGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.show()
|
||||
@ -952,6 +992,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建或更新展开收缩按钮内容
|
||||
|
||||
updateExpandBtnNode() {
|
||||
if (this._expandBtn) {
|
||||
this._expandBtn.clear()
|
||||
@ -971,6 +1012,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新展开收缩按钮位置
|
||||
|
||||
updateExpandBtnPos() {
|
||||
if (!this._expandBtn) {
|
||||
return
|
||||
@ -979,6 +1021,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 展开收缩按钮
|
||||
|
||||
renderExpandBtn() {
|
||||
if (
|
||||
!this.nodeData.children ||
|
||||
@ -1016,6 +1059,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除展开收缩按钮
|
||||
|
||||
removeExpandBtn() {
|
||||
if (this._expandBtn) {
|
||||
this._expandBtn.off(['mouseover', 'mouseout', 'click'])
|
||||
@ -1026,6 +1070,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 检测当前节点是否是某个节点的祖先节点
|
||||
|
||||
isParent(node) {
|
||||
if (this === node) {
|
||||
return false
|
||||
@ -1041,6 +1086,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 检测当前节点是否是某个节点的兄弟节点
|
||||
|
||||
isBrother(node) {
|
||||
if (!this.parent || this === node) {
|
||||
return false
|
||||
@ -1051,6 +1097,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取padding值
|
||||
|
||||
getPaddingVale() {
|
||||
return {
|
||||
paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive),
|
||||
@ -1059,17 +1106,20 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取某个样式
|
||||
|
||||
getStyle(prop, root, isActive) {
|
||||
let v = this.style.merge(prop, root, isActive)
|
||||
return v === undefined ? '' : v
|
||||
}
|
||||
|
||||
// 获取自定义样式
|
||||
|
||||
getSelfStyle(prop) {
|
||||
return this.style.getSelfStyle(prop)
|
||||
}
|
||||
|
||||
// 获取最近一个存在自身自定义样式的祖先节点的自定义样式
|
||||
|
||||
getParentSelfStyle(prop) {
|
||||
if (this.parent) {
|
||||
return (
|
||||
@ -1080,6 +1130,7 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取自身可继承的自定义样式
|
||||
|
||||
getSelfInhertStyle(prop) {
|
||||
return (
|
||||
this.getSelfStyle(prop) || // 自身
|
||||
@ -1088,51 +1139,61 @@ class Node {
|
||||
}
|
||||
|
||||
// 修改某个样式
|
||||
|
||||
setStyle(prop, value, isActive) {
|
||||
this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
|
||||
getData(key) {
|
||||
return key ? this.nodeData.data[key] || '' : this.nodeData.data
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
|
||||
setData(data = {}) {
|
||||
this.mindMap.execCommand('SET_NODE_DATA', this, data)
|
||||
}
|
||||
|
||||
// 设置文本
|
||||
|
||||
setText(text) {
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', this, text)
|
||||
}
|
||||
|
||||
// 设置图片
|
||||
|
||||
setImage(imgData) {
|
||||
this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
|
||||
}
|
||||
|
||||
// 设置图标
|
||||
|
||||
setIcon(icons) {
|
||||
this.mindMap.execCommand('SET_NODE_ICON', this, icons)
|
||||
}
|
||||
|
||||
// 设置超链接
|
||||
|
||||
setHyperlink(link, title) {
|
||||
this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
|
||||
}
|
||||
|
||||
// 设置备注
|
||||
|
||||
setNote(note) {
|
||||
this.mindMap.execCommand('SET_NODE_NOTE', this, note)
|
||||
}
|
||||
|
||||
// 设置标签
|
||||
|
||||
setTag(tag) {
|
||||
this.mindMap.execCommand('SET_NODE_TAG', this, tag)
|
||||
}
|
||||
|
||||
// 设置形状
|
||||
|
||||
setShape(shape) {
|
||||
this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## 0.3.3
|
||||
|
||||
Fix: The root node text cannot wrap.
|
||||
|
||||
## 0.3.2
|
||||
|
||||
Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.3.3</h2>
|
||||
<p>Fix: The root node text cannot wrap.</p>
|
||||
<h2>0.3.2</h2>
|
||||
<p>Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node; 2.Fix the problem that when the actual content of the mind map is larger than the screen width and height, the excess part is not watermarked when exporting.</p>
|
||||
<h2>0.3.1</h2>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Changelog
|
||||
|
||||
## 0.3.3
|
||||
|
||||
修复：根节点文字无法换行的问题。
|
||||
|
||||
## 0.3.2
|
||||
|
||||
修复：1.修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题；2.修复当思维导图实际内容大于屏幕宽高时，导出的时候超出的部分没有绘制水印的问题。
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.3.3</h2>
|
||||
<p>修复：根节点文字无法换行的问题。</p>
|
||||
<h2>0.3.2</h2>
|
||||
<p>修复：1.修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题；2.修复当思维导图实际内容大于屏幕宽高时，导出的时候超出的部分没有绘制水印的问题。</p>
|
||||
<h2>0.3.1</h2>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user