diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index a0413c40..1b251a41 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -71,7 +71,13 @@ export const CONSTANTS = { NOT_ACTIVE: 'notActive', ACTIVE_ONLY: 'activeOnly' }, - TAG_POSITION: { + TAG_PLACEMENT: { + RIGHT: 'right', + BOTTOM: 'bottom' + }, + IMG_PLACEMENT: { + LEFT: 'left', + TOP: 'top', RIGHT: 'right', BOTTOM: 'bottom' }, diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 9b3d5d26..c655211e 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -35,8 +35,6 @@ export const defaultOpt = { mouseScaleCenterUseMousePosition: true, // 最多显示几个标签 maxTag: 5, - // 标签显示的位置,相对于节点文本,bottom(下方)、right(右侧) - tagPosition: CONSTANTS.TAG_POSITION.RIGHT, // 展开收缩按钮尺寸 expandBtnSize: 20, // 节点里图片和文字的间距 diff --git a/simple-mind-map/src/core/render/node/nodeLayout.js b/simple-mind-map/src/core/render/node/nodeLayout.js index 6e014bef..b6004b05 100644 --- a/simple-mind-map/src/core/render/node/nodeLayout.js +++ b/simple-mind-map/src/core/render/node/nodeLayout.js @@ -39,9 +39,11 @@ function getNodeRect() { height: rect.height } } - const { tagPosition, textContentMargin } = this.mindMap.opt - const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM - const imgPlacement = this.getStyle('imgPlacement') || 'top' + const { TAG_PLACEMENT, IMG_PLACEMENT } = CONSTANTS + const { textContentMargin } = this.mindMap.opt + const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT + const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM + const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP // 宽高 let imgContentWidth = 0 let imgContentHeight = 0 @@ -138,7 +140,7 @@ function getNodeRect() { // 纯内容宽高 let _width = 0 let _height = 0 - if (['top', 'bottom'].includes(imgPlacement)) { + if ([IMG_PLACEMENT.TOP, IMG_PLACEMENT.BOTTOM].includes(imgPlacement)) { // 图片在上下 _width = Math.max(imgContentWidth, textContentWidth) _height = @@ -174,7 +176,6 @@ function layout() { this.group.clear() const { hoverRectPadding, - tagPosition, openRealtimeRenderOnNodeTextEdit, textContentMargin } = this.mindMap.opt @@ -222,8 +223,10 @@ function layout() { addHoverNode() return } - const imgPlacement = this.getStyle('imgPlacement') || 'top' - const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM + const { IMG_PLACEMENT, TAG_PLACEMENT } = CONSTANTS + const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP + const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT + const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM let { textContentWidth, textContentHeight, textContentWidthWithoutTag } = this._rectInfo const textContentHeightWithTag = textContentHeight @@ -247,16 +250,16 @@ function layout() { imgHeight = this._imgData.height this.group.add(this._imgData.node) switch (imgPlacement) { - case 'top': + case IMG_PLACEMENT.TOP: this._imgData.node.cx(width / 2).y(paddingY) break - case 'bottom': + case IMG_PLACEMENT.BOTTOM: this._imgData.node.cx(width / 2).y(height - paddingY - imgHeight) break - case 'left': + case IMG_PLACEMENT.LEFT: this._imgData.node.x(paddingX).cy(height / 2) break - case 'right': + case IMG_PLACEMENT.RIGHT: this._imgData.node.x(width - paddingX - imgWidth).cy(height / 2) break default: @@ -400,25 +403,25 @@ function layout() { let translateX = 0 let translateY = 0 switch (imgPlacement) { - case 'top': + case IMG_PLACEMENT.TOP: translateX = width / 2 - bboxWidth / 2 translateY = paddingY + // 内边距 imgHeight + // 图片高度 this.getImgTextMarin('v', 0, 0, imgHeight, textContentHeightWithTag) // 和图片的间距 break - case 'bottom': + case IMG_PLACEMENT.BOTTOM: translateX = width / 2 - bboxWidth / 2 translateY = paddingY break - case 'left': + case IMG_PLACEMENT.LEFT: translateX = imgWidth + paddingX + this.getImgTextMarin('h', imgWidth, textContentWidth) translateY = height / 2 - bboxHeight / 2 break - case 'right': + case IMG_PLACEMENT.RIGHT: translateX = paddingX translateY = height / 2 - bboxHeight / 2 break diff --git a/simple-mind-map/src/theme/default.js b/simple-mind-map/src/theme/default.js index f41cfa08..7df556cf 100644 --- a/simple-mind-map/src/theme/default.js +++ b/simple-mind-map/src/theme/default.js @@ -96,8 +96,10 @@ export default { hoverRectRadius: 5, // 文本对齐 align: 'left', - // 图片放置位置 - imgPlacement: 'top' + // 图片放置位置,相对于整个文本内容 + imgPlacement: 'top', // left、right、bottom、top + // 标签放置位置 + tagPlacement: 'right' // right(文字右侧)、bottom(文本内容下方) // 下列样式也支持给节点设置,用于覆盖最外层的设置 // paddingX, // paddingY, @@ -134,7 +136,8 @@ export default { hoverRectColor: '', hoverRectRadius: 5, textAlign: 'left', - imgPlacement: 'top' + imgPlacement: 'top', + tagPlacement: 'right' }, // 三级及以下节点样式 node: { @@ -161,7 +164,8 @@ export default { hoverRectColor: '', hoverRectRadius: 5, textAlign: 'left', - imgPlacement: 'top' + imgPlacement: 'top', + tagPlacement: 'right' }, // 概要节点样式 generalization: { @@ -187,7 +191,8 @@ export default { hoverRectColor: '', hoverRectRadius: 5, textAlign: 'left', - imgPlacement: 'top' + imgPlacement: 'top', + tagPlacement: 'right' } }