Feat:去掉tagPosition实例化选项,改为主题配置tagPlacement

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'
   },

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,
   // 节点里图片和文字的间距

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 { TAG_PLACEMENT, IMG_PLACEMENT } = CONSTANTS
-  const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM
+  const { textContentMargin } = this.mindMap.opt
-  const imgPlacement = this.getStyle('imgPlacement') || 'top'
+  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 { IMG_PLACEMENT, TAG_PLACEMENT } = CONSTANTS
-  const tagIsBottom = tagPosition === CONSTANTS.TAG_POSITION.BOTTOM
+  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

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'
   }
 }