From 5a8c3aa9d320951ce0cd9a33601fe0c9bb53b918 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 12 Apr 2023 22:17:51 +0800 Subject: [PATCH] =?UTF-8?q?=E9=B1=BC=E9=AA=A8=E7=BB=93=E6=9E=84=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/Render.js | 5 +- .../layouts/{Timeline copy.js => Fishbone.js} | 126 ++++++++++-------- simple-mind-map/src/layouts/Timeline.js | 4 +- simple-mind-map/src/utils/constant.js | 10 +- 4 files changed, 86 insertions(+), 59 deletions(-) rename simple-mind-map/src/layouts/{Timeline copy.js => Fishbone.js} (75%) diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 28f52e13..aac78ecd 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -4,6 +4,7 @@ import MindMap from './layouts/MindMap' import CatalogOrganization from './layouts/CatalogOrganization' import OrganizationStructure from './layouts/OrganizationStructure' import Timeline from './layouts/Timeline' +import Fishbone from './layouts/Fishbone' import TextEdit from './TextEdit' import { copyNodeTree, simpleDeepClone, walk } from './utils' import { shapeList } from './Shape' @@ -23,7 +24,9 @@ const layouts = { // 时间轴 [CONSTANTS.LAYOUT.TIMELINE]: Timeline, // 时间轴2 - [CONSTANTS.LAYOUT.TIMELINE2]: Timeline + [CONSTANTS.LAYOUT.TIMELINE2]: Timeline, + // 鱼骨图 + [CONSTANTS.LAYOUT.FISHBONE]: Fishbone, } // 渲染 diff --git a/simple-mind-map/src/layouts/Timeline copy.js b/simple-mind-map/src/layouts/Fishbone.js similarity index 75% rename from simple-mind-map/src/layouts/Timeline copy.js rename to simple-mind-map/src/layouts/Fishbone.js index 7c7a2a02..998a2700 100644 --- a/simple-mind-map/src/layouts/Timeline copy.js +++ b/simple-mind-map/src/layouts/Fishbone.js @@ -4,14 +4,13 @@ import { CONSTANTS } from '../utils/constant' const degToRad = (deg) => { return Math.PI / 180 * deg -} +} -// 时间轴 -class CatalogOrganization extends Base { +// 鱼骨图 +class Fishbone extends Base { // 构造函数 - constructor(opt = {}, layout) { + constructor(opt = {}) { super(opt) - this.layout = layout } // 布局 @@ -45,21 +44,17 @@ class CatalogOrganization extends Base { this.setNodeCenter(newNode) } else { // 非根节点 - // 时间轴2类型需要交替显示 - if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) { - // 三级及以下节点以上级为准 - if (parent._node.dir) { - newNode.dir = parent._node.dir - } else { - // 节点生长方向 - newNode.dir = - index % 2 === 0 - ? CONSTANTS.TIMELINE_DIR.BOTTOM - : CONSTANTS.TIMELINE_DIR.TOP - } + // 三级及以下节点以上级为准 + if (parent._node.dir) { + newNode.dir = parent._node.dir } else { - newNode.dir = '' + // 节点生长方向 + newNode.dir = + index % 2 === 0 + ? CONSTANTS.TIMELINE_DIR.BOTTOM + : CONSTANTS.TIMELINE_DIR.TOP } + // 计算二级节点的top值 if (parent._node.isRoot) { newNode.top = parent._node.top + @@ -89,35 +84,44 @@ class CatalogOrganization extends Base { node.children && node.children.length ) { - let marginX = this.getMarginX(layerIndex + 1) - let marginY = this.getMarginY(layerIndex + 1) if (isRoot) { - let left = node.left + node.width + marginX + let left = node.left + node.width let topTotalLeft = left let bottomTotalLeft = left node.children.forEach((cur) => { if (cur.dir === 'top') { cur.left = topTotalLeft - topTotalLeft += cur.width + marginX + topTotalLeft += cur.width } else { cur.left = bottomTotalLeft - bottomTotalLeft += cur.width + marginX + bottomTotalLeft += cur.width } }) } else { - let totalTop = - node.top + - node.height + - marginY + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - node.children.forEach(cur => { - cur.left = node.left + node.width * 0.5 - cur.top = totalTop - totalTop += - cur.height + - marginY + - (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0) - }) + if (node.dir === 'top' || node.layerIndex < 2) { + let totalTop = + node.top + + node.height + + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + node.children.forEach(cur => { + cur.left = node.left + node.width * 0.5 + cur.top = totalTop + totalTop += + cur.height + + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0) + }) + } else { + let totalTop = + node.top - + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + node.children.forEach(cur => { + cur.left = node.left + node.width * 0.5 + cur.top = totalTop - cur.height + totalTop -= + cur.height + + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0) + }) + } } } }, @@ -137,12 +141,11 @@ class CatalogOrganization extends Base { } // 调整left if (node.isRoot) { - // this.updateBrothersLeft(node) + this.updateBrothersLeft(node) } // 调整top let len = node.children.length if (parent && !parent.isRoot && len > 0) { - let marginY = this.getMarginY(layerIndex + 1) let totalHeight = node.children.reduce((h, item) => { return ( @@ -152,12 +155,11 @@ class CatalogOrganization extends Base { ? item.expandBtnSize : 0) ) - }, 0) + - (len + 1) * marginY - this.updateBrothersTop(node, totalHeight) + }, 0) + this.updateBrothersTop(node, node.dir !== 'top' && node.layerIndex > 2 ? -totalHeight : totalHeight) } }, - (node, parent, isRoot, layerIndex) => { + (node, parent) => { if ( parent && parent.isRoot && @@ -172,6 +174,19 @@ class CatalogOrganization extends Base { this.updateChildren(item.children, 'top', item.top - _top) }) } + if ( + parent && + parent.isRoot && + node.dir === CONSTANTS.TIMELINE_DIR.BOTTOM + ) { + // 遍历二级节点的子节点 + node.children.forEach(item => { + let totalHeight = this.getNodeAreaHeight(item) + let _top = item.top + item.top += totalHeight + this.updateChildren(item.children, 'top', item.top - _top) + }) + } }, true ) @@ -184,12 +199,10 @@ class CatalogOrganization extends Base { } // 调整left if (node.layerIndex === 1) { - let totalX = 0 let totalHeight = 0 node.children.forEach((item) => { - let h = this.getNodeAreaHeight(item) - let x = (h+ totalHeight) / Math.tan(degToRad(45)) - totalX += x + let h = this.getNodeAreaHeight(item) + let x = (h + totalHeight) / Math.tan(degToRad(45)) totalHeight += h item.left += x this.updateChildren(item.children, 'left', x) @@ -225,8 +238,7 @@ class CatalogOrganization extends Base { let loop = node => { totalHeight += node.height + - (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + - this.getMarginY(node.layerIndex) + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) if (node.children.length) { node.children.forEach(item => { loop(item) @@ -318,9 +330,11 @@ class CatalogOrganization extends Base { miny = y } // 水平线 - let path = `M ${x},${y} L ${item.left},${y}` - lines[index].plot(path) - style && style(lines[index], item) + 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) { @@ -331,9 +345,13 @@ class CatalogOrganization extends Base { node.parent.isRoot && node.dir === CONSTANTS.TIMELINE_DIR.TOP ) { - line.plot(`M ${x},${top} L ${x + 500},${top - Math.tan(degToRad(45)) * 500}`) + line.plot(`M ${x},${top} L ${x + 1000},${top - Math.tan(degToRad(45)) * 1000}`) } else { - line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`) + if (node.parent && node.parent.isRoot) { + line.plot(`M ${x},${top + height + expandBtnSize} L ${x + 1000},${top + Math.tan(degToRad(45)) * 1000}`) + } else { + line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`) + } } node.style.line(line) node._lines.push(line) @@ -387,4 +405,4 @@ class CatalogOrganization extends Base { } } -export default CatalogOrganization +export default Fishbone diff --git a/simple-mind-map/src/layouts/Timeline.js b/simple-mind-map/src/layouts/Timeline.js index 1bef36f9..d45add64 100644 --- a/simple-mind-map/src/layouts/Timeline.js +++ b/simple-mind-map/src/layouts/Timeline.js @@ -3,7 +3,7 @@ import { walk, asyncRun } from '../utils' import { CONSTANTS } from '../utils/constant' // 时间轴 -class CatalogOrganization extends Base { +class Timeline extends Base { // 构造函数 constructor(opt = {}, layout) { super(opt) @@ -353,4 +353,4 @@ class CatalogOrganization extends Base { } } -export default CatalogOrganization +export default Timeline diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index bc521bdb..66633a83 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -156,7 +156,8 @@ export const CONSTANTS = { ORGANIZATION_STRUCTURE: 'organizationStructure', CATALOG_ORGANIZATION: 'catalogOrganization', TIMELINE: 'timeline', - TIMELINE2: 'timeline2' + TIMELINE2: 'timeline2', + FISHBONE: 'fishbone' }, DIR: { UP: 'up', @@ -231,6 +232,10 @@ export const layoutList = [ { name: '时间轴2', value: CONSTANTS.LAYOUT.TIMELINE2, + }, + { + name: '鱼骨图', + value: CONSTANTS.LAYOUT.FISHBONE, } ] export const layoutValueList = [ @@ -239,5 +244,6 @@ export const layoutValueList = [ CONSTANTS.LAYOUT.CATALOG_ORGANIZATION, CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE, CONSTANTS.LAYOUT.TIMELINE, - CONSTANTS.LAYOUT.TIMELINE2 + CONSTANTS.LAYOUT.TIMELINE2, + CONSTANTS.LAYOUT.FISHBONE ] \ No newline at end of file