From 866287402ff73832100d8b9eecbeac6555752dda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Wed, 2 Apr 2025 09:47:11 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E5=90=91?= =?UTF-8?q?=E5=8F=B3=E9=B1=BC=E9=AA=A8=E5=9B=BE=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/constants/constant.js | 8 +- .../src/core/render/node/MindMapNode.js | 4 +- simple-mind-map/src/layouts/FishboneBottom.js | 370 ------------------ simple-mind-map/src/layouts/FishboneTop.js | 351 ----------------- simple-mind-map/src/plugins/Drag.js | 49 ++- 5 files changed, 46 insertions(+), 736 deletions(-) delete mode 100644 simple-mind-map/src/layouts/FishboneBottom.js delete mode 100644 simple-mind-map/src/layouts/FishboneTop.js diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index 5d864c4a..eea5764f 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -15,6 +15,7 @@ export const CONSTANTS = { TIMELINE: 'timeline', TIMELINE2: 'timeline2', FISHBONE: 'fishbone', + RIGHT_FISHBONE: 'rightFishbone', VERTICAL_TIMELINE: 'verticalTimeline' }, DIR: { @@ -127,6 +128,10 @@ export const layoutList = [ { name: '鱼骨图', value: CONSTANTS.LAYOUT.FISHBONE + }, + { + name: '向右鱼骨图', + value: CONSTANTS.LAYOUT.RIGHT_FISHBONE } ] export const layoutValueList = [ @@ -138,7 +143,8 @@ export const layoutValueList = [ CONSTANTS.LAYOUT.TIMELINE, CONSTANTS.LAYOUT.TIMELINE2, CONSTANTS.LAYOUT.VERTICAL_TIMELINE, - CONSTANTS.LAYOUT.FISHBONE + CONSTANTS.LAYOUT.FISHBONE, + CONSTANTS.LAYOUT.RIGHT_FISHBONE ] // 节点数据中非样式的字段 diff --git a/simple-mind-map/src/core/render/node/MindMapNode.js b/simple-mind-map/src/core/render/node/MindMapNode.js index 3cf924f8..c0a0af12 100644 --- a/simple-mind-map/src/core/render/node/MindMapNode.js +++ b/simple-mind-map/src/core/render/node/MindMapNode.js @@ -811,7 +811,9 @@ class MindMapNode { let childrenLen = this.getChildrenLength() // 切换为鱼骨结构时，清空根节点和二级节点的连线 if ( - this.mindMap.opt.layout === CONSTANTS.LAYOUT.FISHBONE && + [CONSTANTS.LAYOUT.FISHBONE, CONSTANTS.LAYOUT.RIGHT_FISHBONE].includes( + this.mindMap.opt.layout + ) && (this.isRoot || this.layerIndex === 1) ) { childrenLen = 0 diff --git a/simple-mind-map/src/layouts/FishboneBottom.js b/simple-mind-map/src/layouts/FishboneBottom.js deleted file mode 100644 index 54afda6d..00000000 --- a/simple-mind-map/src/layouts/FishboneBottom.js +++ /dev/null @@ -1,370 +0,0 @@ -import Base from './Base' -import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' -import { CONSTANTS } from '../utils/constant' - -const degToRad = deg => { - return (Math.PI / 180) * deg -} - -// 下方鱼骨图 -class Fishbone extends Base { - // 构造函数 - constructor(opt = {}) { - super(opt) - } - - // 布局 - doLayout(callback) { - let task = [ - () => { - this.computedBaseValue() - }, - () => { - this.computedLeftTopValue() - }, - () => { - this.adjustLeftTopValue() - }, - () => { - callback(this.root) - } - ] - asyncRun(task) - } - - // 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值 - computedBaseValue() { - walk( - this.renderer.renderTree, - null, - (node, parent, isRoot, layerIndex, index) => { - // 创建节点 - let newNode = this.createNode(node, parent, isRoot, layerIndex) - // 根节点定位在画布中心位置 - if (isRoot) { - this.setNodeCenter(newNode) - } else { - // 非根节点 - // 三级及以下节点以上级方向为准 - if (parent._node.dir) { - newNode.dir = parent._node.dir - } else { - // 节点生长方向 - newNode.dir = - index % 2 === 0 - ? CONSTANTS.LAYOUT_GROW_DIR.TOP - : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM - } - // 计算二级节点的top值 - if (parent._node.isRoot) { - newNode.top = parent._node.top + parent._node.height - } - } - if (!node.data.expand) { - return true - } - }, - null, - true, - 0 - ) - } - - // 遍历节点树计算节点的left、top - computedLeftTopValue() { - walk( - this.root, - null, - (node, parent, isRoot, layerIndex, index) => { - if (node.isRoot) { - let totalLeft = node.left + node.width - node.children.forEach(item => { - item.left = totalLeft - totalLeft += item.width - }) - } - if (layerIndex === 1 && node.children) { - // 遍历二级节点的子节点 - let startLeft = node.left + node.width * 0.5 - let totalTop = - node.top + - node.height + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - - node.children.forEach(item => { - item.left = startLeft - item.top = - totalTop + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - totalTop += - item.height + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - }) - } - if (layerIndex > 1 && node.children) { - // 遍历三级及以下节点的子节点 - let startLeft = node.left + node.width * 0.5 - let totalTop = - node.top - - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - node.children.forEach(item => { - item.left = startLeft - item.top = totalTop - item.height - totalTop -= - item.height + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - }) - } - }, - null, - true - ) - } - - // 调整节点left、top - adjustLeftTopValue() { - walk( - this.root, - null, - (node, parent, isRoot, layerIndex) => { - if (!node.getData('expand')) { - return - } - // 调整top - let len = node.children.length - // 调整三级节点的top - // if (layerIndex === 2 && len > 0) { - // let totalHeight = node.children.reduce((h, item) => { - // return h + item.height - // }, 0) - // this.updateBrothersTop(node, totalHeight) - // } - if (layerIndex > 2 && len > 0) { - let totalHeight = node.children.reduce((h, item) => { - return ( - h + - item.height + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - ) - }, 0) - this.updateBrothersTop(node, -totalHeight) - } - }, - (node, parent) => { - // 将二级节点的子节点移到上方 - if (parent && parent.isRoot) { - // 遍历二级节点的子节点 - let totalHeight = 0 - let totalHeight2 = 0 - node.children.forEach(item => { - // 调整top - let hasChildren = this.getNodeActChildrenLength(item) > 0 - let nodeTotalHeight = this.getNodeAreaHeight(item) - let offset = - hasChildren > 0 - ? nodeTotalHeight - - item.height - - (hasChildren ? item.expandBtnSize : 0) - : 0 - let _top = totalHeight + offset - item.top += _top - // 调整left - let offsetLeft = - (totalHeight2 + nodeTotalHeight) / - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) - item.left += offsetLeft - totalHeight += offset - totalHeight2 += nodeTotalHeight - // 同步更新后代节点 - this.updateChildrenPro(item.children, { - top: _top, - left: offsetLeft - }) - }) - } - // 调整二级节点的子节点的left值 - if (node.isRoot) { - let totalLeft = 0 - node.children.forEach(item => { - item.left += totalLeft - this.updateChildren(item.children, 'left', totalLeft) - let { left, right } = this.getNodeBoundaries(item, 'h') - totalLeft += right - left - }) - } - }, - true - ) - } - - // 递归计算节点的宽度 - getNodeAreaHeight(node) { - let totalHeight = 0 - let loop = node => { - totalHeight += - node.height + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - if (node.children.length) { - node.children.forEach(item => { - loop(item) - }) - } - } - loop(node) - return totalHeight - } - - // 调整兄弟节点的left - updateBrothersLeft(node) { - let childrenList = node.children - let totalAddWidth = 0 - childrenList.forEach(item => { - item.left += totalAddWidth - if (item.children && item.children.length) { - this.updateChildren(item.children, 'left', totalAddWidth) - } - // let areaWidth = this.getNodeAreaWidth(item) - let { left, right } = this.getNodeBoundaries(item, 'h') - let areaWidth = right - left - let difference = areaWidth - item.width - if (difference > 0) { - totalAddWidth += difference - } - }) - } - - // 调整兄弟节点的top - updateBrothersTop(node, addHeight) { - if (node.parent && !node.parent.isRoot) { - let childrenList = node.parent.children - let index = getNodeIndexInNodeList(node, childrenList) - childrenList.forEach((item, _index) => { - if (item.hasCustomPosition()) { - // 适配自定义位置 - return - } - let _offset = 0 - // 下面的节点往下移 - if (_index > index) { - _offset = addHeight - } - item.top += _offset - // 同步更新子节点的位置 - if (item.children && item.children.length) { - this.updateChildren(item.children, 'top', _offset) - } - }) - // 更新父节点的位置 - this.updateBrothersTop(node.parent, node.layerIndex === 3 ? 0 : addHeight) - } - } - - // 绘制连线，连接该节点到其子节点 - renderLine(node, lines, style) { - if (node.children.length <= 0) { - return [] - } - let { left, top, width, height, expandBtnSize } = node - let len = node.children.length - if (node.isRoot) { - // 当前节点是根节点 - let prevBother = node - // 根节点的子节点是和根节点同一水平线排列 - node.children.forEach((item, index) => { - let x1 = prevBother.left + prevBother.width - let x2 = item.left - let y = node.top + node.height / 2 - let path = `M ${x1},${y} L ${x2},${y}` - lines[index].plot(path) - style && style(lines[index], item) - prevBother = item - }) - } else { - // 当前节点为非根节点 - let maxy = -Infinity - let miny = Infinity - let maxx = -Infinity - let x = node.left + node.width * 0.3 - node.children.forEach((item, index) => { - if (item.left > maxx) { - maxx = item.left - } - let y = item.top + item.height / 2 - if (y > maxy) { - maxy = y - } - if (y < miny) { - miny = y - } - // 水平线 - if (node.layerIndex > 1) { - let path = `M ${x},${y} L ${item.left},${y}` - lines[index].plot(path) - style && style(lines[index], item) - } - }) - // 竖线 - if (len > 0) { - let line = this.lineDraw.path() - expandBtnSize = len > 0 ? expandBtnSize : 0 - let lineLength = maxx - node.left - node.width * 0.3 - if (node.parent && node.parent.isRoot) { - line.plot( - `M ${x},${top + height} L ${x + lineLength},${ - top + - height + - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength - }` - ) - } else { - line.plot(`M ${x},${top} L ${x},${miny}`) - } - node.style.line(line) - node._lines.push(line) - style && style(line, node) - } - } - } - - // 渲染按钮 - renderExpandBtn(node, btn) { - let { width, height, expandBtnSize, isRoot } = node - if (!isRoot) { - let { translateX, translateY } = btn.transform() - if (node.parent && node.parent.isRoot) { - btn.translate( - width * 0.3 - expandBtnSize / 2 - translateX, - height + expandBtnSize / 2 - translateY - ) - } else { - btn.translate( - width * 0.3 - expandBtnSize / 2 - translateX, - -expandBtnSize / 2 - translateY - ) - } - } - } - - // 创建概要节点 - renderGeneralization(node, gLine, gNode) { - let { - top, - bottom, - right, - generalizationLineMargin, - generalizationNodeMargin - } = this.getNodeBoundaries(node, 'h') - let x1 = right + generalizationLineMargin - let y1 = top - let x2 = right + generalizationLineMargin - let y2 = bottom - let cx = x1 + 20 - let cy = y1 + (y2 - y1) / 2 - let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` - gLine.plot(path) - gNode.left = right + generalizationNodeMargin - gNode.top = top + (bottom - top - gNode.height) / 2 - } -} - -export default Fishbone diff --git a/simple-mind-map/src/layouts/FishboneTop.js b/simple-mind-map/src/layouts/FishboneTop.js deleted file mode 100644 index 2e83bf80..00000000 --- a/simple-mind-map/src/layouts/FishboneTop.js +++ /dev/null @@ -1,351 +0,0 @@ -import Base from './Base' -import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' -import { CONSTANTS } from '../utils/constant' - -const degToRad = deg => { - return (Math.PI / 180) * deg -} - -// 上方鱼骨图 -class Fishbone extends Base { - // 构造函数 - constructor(opt = {}) { - super(opt) - } - - // 布局 - doLayout(callback) { - let task = [ - () => { - this.computedBaseValue() - }, - () => { - this.computedLeftTopValue() - }, - () => { - this.adjustLeftTopValue() - }, - () => { - callback(this.root) - } - ] - asyncRun(task) - } - - // 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值 - computedBaseValue() { - walk( - this.renderer.renderTree, - null, - (node, parent, isRoot, layerIndex, index) => { - // 创建节点 - let newNode = this.createNode(node, parent, isRoot, layerIndex) - // 根节点定位在画布中心位置 - if (isRoot) { - this.setNodeCenter(newNode) - } else { - // 非根节点 - // 三级及以下节点以上级方向为准 - if (parent._node.dir) { - newNode.dir = parent._node.dir - } else { - // 节点生长方向 - newNode.dir = - index % 2 === 0 - ? CONSTANTS.LAYOUT_GROW_DIR.TOP - : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM - } - // 计算二级节点的top值 - if (parent._node.isRoot) { - newNode.top = parent._node.top - newNode.height - } - } - if (!node.data.expand) { - return true - } - }, - null, - true, - 0 - ) - } - - // 遍历节点树计算节点的left、top - computedLeftTopValue() { - walk( - this.root, - null, - (node, parent, isRoot, layerIndex, index) => { - if (node.isRoot) { - let totalLeft = node.left + node.width - node.children.forEach(item => { - item.left = totalLeft - totalLeft += item.width - }) - } - if (layerIndex >= 1 && node.children) { - // 遍历三级及以下节点的子节点 - let startLeft = node.left + node.width * 0.5 - let totalTop = - node.top + - node.height + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - node.children.forEach(item => { - item.left = startLeft - item.top += totalTop - totalTop += - item.height + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - }) - } - }, - null, - true - ) - } - - // 调整节点left、top - adjustLeftTopValue() { - walk( - this.root, - null, - (node, parent, isRoot, layerIndex) => { - if (!node.getData('expand')) { - return - } - // 调整top - let len = node.children.length - // 调整三级及以下节点的top - if (parent && !parent.isRoot && len > 0) { - let totalHeight = node.children.reduce((h, item) => { - return ( - h + - item.height + - (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) - ) - }, 0) - this.updateBrothersTop(node, totalHeight) - } - }, - (node, parent) => { - // 将二级节点的子节点移到上方 - if (parent && parent.isRoot) { - // 遍历二级节点的子节点 - let totalHeight = 0 - node.children.forEach(item => { - // 调整top - let nodeTotalHeight = this.getNodeAreaHeight(item) - let _top = item.top - item.top = - node.top - (item.top - node.top) - nodeTotalHeight + node.height - // 调整left - let offsetLeft = - (nodeTotalHeight + totalHeight) / - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) - item.left += offsetLeft - totalHeight += nodeTotalHeight - // 同步更新后代节点 - this.updateChildrenPro(item.children, { - top: item.top - _top, - left: offsetLeft - }) - }) - } - // 调整二级节点的子节点的left值 - if (node.isRoot) { - let totalLeft = 0 - node.children.forEach(item => { - item.left += totalLeft - this.updateChildren(item.children, 'left', totalLeft) - let { left, right } = this.getNodeBoundaries(item, 'h') - totalLeft += right - left - }) - } - }, - true - ) - } - - // 递归计算节点的宽度 - getNodeAreaHeight(node) { - let totalHeight = 0 - let loop = node => { - totalHeight += - node.height + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - if (node.children.length) { - node.children.forEach(item => { - loop(item) - }) - } - } - loop(node) - return totalHeight - } - - // 调整兄弟节点的left - updateBrothersLeft(node) { - let childrenList = node.children - let totalAddWidth = 0 - childrenList.forEach(item => { - item.left += totalAddWidth - if (item.children && item.children.length) { - this.updateChildren(item.children, 'left', totalAddWidth) - } - // let areaWidth = this.getNodeAreaWidth(item) - let { left, right } = this.getNodeBoundaries(item, 'h') - let areaWidth = right - left - let difference = areaWidth - item.width - if (difference > 0) { - totalAddWidth += difference - } - }) - } - - // 调整兄弟节点的top - updateBrothersTop(node, addHeight) { - if (node.parent && !node.parent.isRoot) { - let childrenList = node.parent.children - let index = getNodeIndexInNodeList(node, childrenList) - childrenList.forEach((item, _index) => { - if (item.hasCustomPosition()) { - // 适配自定义位置 - return - } - let _offset = 0 - // 下面的节点往下移 - if (_index > index) { - _offset = addHeight - } - item.top += _offset - // 同步更新子节点的位置 - if (item.children && item.children.length) { - this.updateChildren(item.children, 'top', _offset) - } - }) - // 更新父节点的位置 - this.updateBrothersTop(node.parent, addHeight) - } - } - - // 绘制连线，连接该节点到其子节点 - renderLine(node, lines, style) { - if (node.children.length <= 0) { - return [] - } - let { left, top, width, height, expandBtnSize } = node - let len = node.children.length - if (node.isRoot) { - // 当前节点是根节点 - let prevBother = node - // 根节点的子节点是和根节点同一水平线排列 - node.children.forEach((item, index) => { - let x1 = prevBother.left + prevBother.width - let x2 = item.left - let y = node.top + node.height / 2 - let path = `M ${x1},${y} L ${x2},${y}` - lines[index].plot(path) - style && style(lines[index], item) - prevBother = item - }) - } else { - // 当前节点为非根节点 - let maxy = -Infinity - let miny = Infinity - let maxx = -Infinity - let x = node.left + node.width * 0.3 - node.children.forEach((item, index) => { - if (item.left > maxx) { - maxx = item.left - } - let y = item.top + item.height / 2 - if (y > maxy) { - maxy = y - } - if (y < miny) { - miny = y - } - // 水平线 - if (node.layerIndex > 1) { - let path = `M ${x},${y} L ${item.left},${y}` - lines[index].plot(path) - style && style(lines[index], item) - } - }) - // 竖线 - if (len > 0) { - let line = this.lineDraw.path() - expandBtnSize = len > 0 ? expandBtnSize : 0 - let lineLength = maxx - node.left - node.width * 0.3 - if ( - node.parent && - node.parent.isRoot && - node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP - ) { - line.plot( - `M ${x},${top} L ${x + lineLength},${ - top - - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength - }` - ) - } else { - if (node.parent && node.parent.isRoot) { - line.plot( - `M ${x},${top} L ${x + lineLength},${ - top - - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength - }` - ) - } else { - line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`) - } - } - node.style.line(line) - node._lines.push(line) - style && style(line, node) - } - } - } - - // 渲染按钮 - renderExpandBtn(node, btn) { - let { width, height, expandBtnSize, isRoot } = node - if (!isRoot) { - let { translateX, translateY } = btn.transform() - if (node.parent && node.parent.isRoot) { - btn.translate( - width * 0.3 - expandBtnSize / 2 - translateX, - -expandBtnSize / 2 - translateY - ) - } else { - btn.translate( - width * 0.3 - expandBtnSize / 2 - translateX, - height + expandBtnSize / 2 - translateY - ) - } - } - } - - // 创建概要节点 - renderGeneralization(node, gLine, gNode) { - let { - top, - bottom, - right, - generalizationLineMargin, - generalizationNodeMargin - } = this.getNodeBoundaries(node, 'h') - let x1 = right + generalizationLineMargin - let y1 = top - let x2 = right + generalizationLineMargin - let y2 = bottom - let cx = x1 + 20 - let cy = y1 + (y2 - y1) / 2 - let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` - gLine.plot(path) - gNode.left = right + generalizationNodeMargin - gNode.top = top + (bottom - top - gNode.height) / 2 - } -} - -export default Fishbone diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index 41cfe657..d1652f09 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -407,7 +407,8 @@ class Drag extends Base { TIMELINE, TIMELINE2, VERTICAL_TIMELINE, - FISHBONE + FISHBONE, + RIGHT_FISHBONE } = CONSTANTS.LAYOUT this.overlapNode = null this.prevNode = null @@ -446,6 +447,7 @@ class Drag extends Base { this.handleLogicalStructure(node) break case FISHBONE: + case RIGHT_FISHBONE: this.handleFishbone(node) break default: @@ -469,7 +471,8 @@ class Drag extends Base { TIMELINE, TIMELINE2, VERTICAL_TIMELINE, - FISHBONE + FISHBONE, + RIGHT_FISHBONE } = CONSTANTS.LAYOUT const { LEFT, TOP, RIGHT, BOTTOM } = CONSTANTS.LAYOUT_GROW_DIR const layerIndex = this.overlapNode.layerIndex @@ -580,6 +583,7 @@ class Drag extends Base { } break case FISHBONE: + case RIGHT_FISHBONE: if (layerIndex <= 1) { notRenderPlaceholder = true this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true) @@ -668,6 +672,7 @@ class Drag extends Base { halfPlaceholderHeight break case FISHBONE: + case RIGHT_FISHBONE: if (layerIndex <= 1) { notRenderPlaceholder = true this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true) @@ -703,7 +708,8 @@ class Drag extends Base { MIND_MAP, TIMELINE2, VERTICAL_TIMELINE, - FISHBONE + FISHBONE, + RIGHT_FISHBONE } = CONSTANTS.LAYOUT switch (this.mindMap.opt.layout) { case LOGICAL_STRUCTURE: @@ -714,6 +720,7 @@ class Drag extends Base { case TIMELINE2: case VERTICAL_TIMELINE: case FISHBONE: + case RIGHT_FISHBONE: return node.dir default: return '' @@ -725,17 +732,14 @@ class Drag extends Base { handleVerticalCheck(node, checkList, isReverse = false) { const { layout } = this.mindMap.opt const { LAYOUT, LAYOUT_GROW_DIR } = CONSTANTS - const { VERTICAL_TIMELINE, FISHBONE } = LAYOUT - const { BOTTOM, LEFT } = LAYOUT_GROW_DIR + const { VERTICAL_TIMELINE, FISHBONE, RIGHT_FISHBONE } = LAYOUT + const { LEFT } = LAYOUT_GROW_DIR const mouseMoveX = this.mouseMoveX const mouseMoveY = this.mouseMoveY const nodeRect = this.getNodeRect(node) const dir = this.getNewChildNodeDir(node) const layerIndex = node.layerIndex - if ( - isReverse || - (layout === FISHBONE && dir === BOTTOM && layerIndex >= 3) - ) { + if (isReverse) { checkList = checkList.reverse() } let oneFourthHeight = nodeRect.originHeight / 4 @@ -777,6 +781,10 @@ class Drag extends Base { this.placeholderWidth / 2 } break + case RIGHT_FISHBONE: + x = + nodeRect.originLeft + nodeRect.originWidth - this.placeholderWidth + break default: } if (checkIsPrevNode) { @@ -791,6 +799,7 @@ class Drag extends Base { this.placeholderHeight / 2 switch (layout) { case FISHBONE: + case RIGHT_FISHBONE: if (layerIndex === 2) { notRenderLine = true y = @@ -820,6 +829,7 @@ class Drag extends Base { this.placeholderHeight / 2 switch (layout) { case FISHBONE: + case RIGHT_FISHBONE: if (layerIndex === 2) { notRenderLine = true y = @@ -856,7 +866,7 @@ class Drag extends Base { handleHorizontalCheck(node, checkList) { const { layout } = this.mindMap.opt const { LAYOUT } = CONSTANTS - const { FISHBONE, TIMELINE, TIMELINE2 } = LAYOUT + const { FISHBONE, RIGHT_FISHBONE, TIMELINE, TIMELINE2 } = LAYOUT let mouseMoveX = this.mouseMoveX let mouseMoveY = this.mouseMoveY let nodeRect = this.getNodeRect(node) @@ -896,6 +906,7 @@ class Drag extends Base { this.placeholderWidth / 2 break case FISHBONE: + case RIGHT_FISHBONE: if (layerIndex === 1) { notRenderLine = true y = @@ -907,7 +918,11 @@ class Drag extends Base { default: } if (checkIsPrevNode) { - this.prevNode = node + if (layout === RIGHT_FISHBONE) { + this.nextNode = node + } else { + this.prevNode = node + } this.setPlaceholderRect({ x: nodeRect.originRight + @@ -918,7 +933,11 @@ class Drag extends Base { notRenderLine }) } else if (checkIsNextNode) { - this.nextNode = node + if (layout === RIGHT_FISHBONE) { + this.prevNode = node + } else { + this.nextNode = node + } this.setPlaceholderRect({ x: nodeRect.originLeft - @@ -1142,7 +1161,11 @@ class Drag extends Base { this.handleHorizontalCheck(node, checkList) } else { // 处于上方的三级节点需要特殊处理，因为节点排列方向反向了 - if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP && node.layerIndex === 2) { + const is2LayerTop = + node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP && node.layerIndex === 2 + const is2MoreLayerBottom = + node.dir === CONSTANTS.LAYOUT_GROW_DIR.BOTTOM && node.layerIndex >= 3 + if (is2LayerTop || is2MoreLayerBottom) { this.handleVerticalCheck(node, checkList, true) } else { this.handleVerticalCheck(node, checkList)