diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 9947826f..52a4c8d5 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -9,7 +9,6 @@ import iconsSvg from './svg/icons' class Node { // 构造函数 - constructor(opt = {}) { // 节点数据 this.nodeData = this.handleData(opt.data || {}) @@ -87,7 +86,6 @@ class Node { // 初始渲染 this.initRender = true // 初始化 - // this.createNodeData() this.getSize() } @@ -109,7 +107,6 @@ class Node { } // 复位部分布局时会重新设置的数据 - reset() { this.children = [] this.parent = null @@ -120,7 +117,6 @@ class Node { } // 处理数据 - handleData(data) { data.data.expand = data.data.expand === false ? false : true data.data.isActive = data.data.isActive === true ? true : false @@ -129,13 +125,11 @@ class Node { } // 检查节点是否存在自定义数据 - hasCustomPosition() { return this.customLeft !== undefined && this.customTop !== undefined } // 检查节点是否存在自定义位置的祖先节点 - ancestorHasCustomPosition() { let node = this while (node) { @@ -148,13 +142,11 @@ class Node { } // 添加子节点 - addChildren(node) { this.children.push(node) } // 创建节点的各个内容对象数据 - createNodeData() { this._imgData = this.createImgNode() this._iconData = this.createIconNode() @@ -166,7 +158,6 @@ class Node { } // 解绑所有事件 - removeAllEvent() { if (this._noteData) { this._noteData.node.off(['mouseover', 'mouseout']) @@ -188,7 +179,6 @@ class Node { } // 移除节点内容 - removeAllNode() { // 节点内的内容 ;[ @@ -223,8 +213,8 @@ class Node { } // 计算节点的宽高 - getSize() { + this.removeAllEvent() this.removeAllNode() this.createNodeData() let { width, height } = this.getNodeRect() @@ -236,7 +226,6 @@ class Node { } // 计算节点尺寸信息 - getNodeRect() { // 宽高 let imgContentWidth = 0 @@ -304,7 +293,6 @@ class Node { } // 创建图片节点 - createImgNode() { let img = this.nodeData.data.image if (!img) { @@ -326,7 +314,6 @@ class Node { } // 获取图片显示宽高 - getImgShowSize() { return resizeImgSize( this.nodeData.data.imageSize.width, @@ -337,7 +324,6 @@ class Node { } // 创建icon节点 - createIconNode() { let _data = this.nodeData.data if (!_data.icon || _data.icon.length <= 0) { @@ -384,7 +370,6 @@ class Node { } // 创建文本节点 - createTextNode() { if (this.nodeData.data.richText) { return this.createRichTextNode() @@ -472,7 +457,6 @@ class Node { } // 创建标签节点 - createTagNode() { let tagData = this.nodeData.data.tag if (!tagData || tagData.length <= 0) { @@ -499,7 +483,6 @@ class Node { } // 创建备注节点 - createNoteNode() { if (!this.nodeData.data.note) { return null @@ -557,7 +540,6 @@ class Node { } // 获取节点形状 - getShape() { // 节点使用功能横线风格的话不支持设置形状,直接使用默认的矩形 return this.mindMap.themeConfig.nodeUseLineStyle @@ -566,7 +548,6 @@ class Node { } // 定位节点内容 - layout() { let { width, textContentItemMargin } = this let { paddingY } = this.getPaddingVale() @@ -714,7 +695,6 @@ class Node { } // 激活节点 - active(e) { if (this.mindMap.opt.readonly) { return @@ -731,7 +711,6 @@ class Node { } // 渲染节点到画布,会移除旧的,创建新的 - renderNode() { // 连线 this.renderLine() @@ -742,7 +721,6 @@ class Node { } // 更新节点 - update(isLayout = false) { if (!this.group) { return @@ -774,7 +752,6 @@ class Node { } // 递归渲染 - render(callback = () => {}) { // 节点 if (this.initRender) { @@ -818,7 +795,6 @@ class Node { } // 递归删除 - remove() { this.initRender = true this.removeAllEvent() @@ -837,7 +813,6 @@ class Node { } // 隐藏节点 - hide() { this.group.hide() this.hideGeneralization() @@ -858,7 +833,6 @@ class Node { } // 显示节点 - show() { if (!this.group) { return @@ -882,7 +856,6 @@ class Node { } // 连线 - renderLine(deep = false) { if (this.nodeData.data.expand === false) { return @@ -919,7 +892,6 @@ class Node { } // 设置连线样式 - styleLine(line, node) { let width = node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true) @@ -936,7 +908,6 @@ class Node { } // 移除连线 - removeLine() { this._lines.forEach(line => { line.remove() @@ -945,13 +916,11 @@ class Node { } // 检查是否存在概要 - checkHasGeneralization() { return !!this.nodeData.data.generalization } // 创建概要节点 - createGeneralizationNode() { if (this.isGeneralization || !this.checkHasGeneralization()) { return @@ -980,14 +949,12 @@ class Node { } // 更新概要节点 - updateGeneralization() { this.removeGeneralization() this.createGeneralizationNode() } // 渲染概要节点 - renderGeneralization() { if (this.isGeneralization) { return @@ -1013,7 +980,6 @@ class Node { } // 删除概要节点 - removeGeneralization() { if (this._generalizationLine) { this._generalizationLine.remove() @@ -1034,7 +1000,6 @@ class Node { } // 隐藏概要节点 - hideGeneralization() { if (this._generalizationLine) { this._generalizationLine.hide() @@ -1045,7 +1010,6 @@ class Node { } // 显示概要节点 - showGeneralization() { if (this._generalizationLine) { this._generalizationLine.show() @@ -1056,7 +1020,6 @@ class Node { } // 创建或更新展开收缩按钮内容 - updateExpandBtnNode() { if (this._expandBtn) { this._expandBtn.clear() @@ -1076,7 +1039,6 @@ class Node { } // 更新展开收缩按钮位置 - updateExpandBtnPos() { if (!this._expandBtn) { return @@ -1085,7 +1047,6 @@ class Node { } // 展开收缩按钮 - renderExpandBtn() { if ( !this.nodeData.children || @@ -1123,7 +1084,6 @@ class Node { } // 移除展开收缩按钮 - removeExpandBtn() { if (this._expandBtn) { this._expandBtn.off(['mouseover', 'mouseout', 'click']) @@ -1134,7 +1094,6 @@ class Node { } // 检测当前节点是否是某个节点的祖先节点 - isParent(node) { if (this === node) { return false @@ -1150,7 +1109,6 @@ class Node { } // 检测当前节点是否是某个节点的兄弟节点 - isBrother(node) { if (!this.parent || this === node) { return false @@ -1161,7 +1119,6 @@ class Node { } // 获取padding值 - getPaddingVale() { return { paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive), @@ -1170,20 +1127,17 @@ 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 ( @@ -1194,7 +1148,6 @@ class Node { } // 获取自身可继承的自定义样式 - getSelfInhertStyle(prop) { return ( this.getSelfStyle(prop) || // 自身 @@ -1203,61 +1156,51 @@ 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, richText) { this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText) } // 设置图片 - 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) } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 5c9a0b64..32406cc6 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -515,7 +515,7 @@ class Render { this.mindMap.render(() => { if (nodeLayerChanged) { node.getSize() - node.renderNode() + node.layout() } }) } @@ -555,7 +555,7 @@ class Render { this.mindMap.render(() => { if (nodeLayerChanged) { node.getSize() - node.renderNode() + node.layout() } }) } @@ -964,7 +964,7 @@ class Render { setNodeDataRender(node, data) { this.setNodeData(node, data) let changed = node.getSize() - node.renderNode() + node.layout() if (changed) { if (node.isGeneralization) { // 概要节点 diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js index 876782e6..8d5f81c2 100644 --- a/simple-mind-map/src/Style.js +++ b/simple-mind-map/src/Style.js @@ -2,10 +2,8 @@ import { tagColorList } from './utils/constant' const rootProp = ['paddingX', 'paddingY'] // 样式类 - class Style { // 设置背景样式 - static setBackgroundStyle(el, themeConfig) { let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig el.style.backgroundColor = backgroundColor @@ -20,13 +18,11 @@ class Style { } // 构造函数 - constructor(ctx) { this.ctx = ctx } // 合并样式 - merge(prop, root, isActive) { let themeConfig = this.ctx.mindMap.themeConfig // 三级及以下节点 @@ -62,26 +58,22 @@ class Style { } // 获取某个样式值 - getStyle(prop, root, isActive) { return this.merge(prop, root, isActive) } // 获取自身自定义样式 - getSelfStyle(prop) { return this.ctx.nodeData.data[prop] } // 矩形 - rect(node) { this.shape(node) node.radius(this.merge('borderRadius')) } // 矩形外的其他形状 - shape(node) { node.fill({ color: this.merge('fillColor') @@ -103,7 +95,6 @@ class Style { } // 文字 - text(node) { node .fill({ @@ -129,7 +120,6 @@ class Style { } // html文字节点 - domText(node, fontSizeScale = 1) { node.style.fontFamily = this.merge('fontFamily') node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px' @@ -139,7 +129,6 @@ class Style { } // 标签文字 - tagText(node, index) { node .fill({ @@ -151,7 +140,6 @@ class Style { } // 标签矩形 - tagRect(node, index) { node.fill({ color: tagColorList[index].background @@ -159,7 +147,6 @@ class Style { } // 内置图标 - iconNode(node) { node.attr({ fill: this.merge('color') @@ -167,13 +154,11 @@ class Style { } // 连线 - line(node, { width, color, dasharray } = {}) { node.stroke({ width, color, dasharray }).fill({ color: 'none' }) } // 概要连线 - generalizationLine(node) { node .stroke({ @@ -184,7 +169,6 @@ class Style { } // 按钮 - iconBtn(node, fillNode) { node.fill({ color: '#808080' }) fillNode.fill({ color: '#fff' })