refactor: abstract createSvgText

Author: SSShooter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "5.0.4",
+  "version": "5.0.5",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [

src/arrow.ts

@@ -1,6 +1,6 @@
 import { generateUUID, getArrowPoints, getObjById, getOffsetLT, setAttributes } from './utils/index'
 import LinkDragMoveHelper from './utils/LinkDragMoveHelper'
-import { createSvgGroup, editSvgText, svgNS } from './utils/svg'
+import { createSvgGroup, createSvgText, editSvgText, svgNS } from './utils/svg'
 import type { CustomSvg, Topic } from './types/dom'
 import type { MindElixirInstance, Uid } from './index'
 
@@ -243,19 +243,6 @@ function calcP(data: DivData) {
   }
 }
 
-const createText = function (string: string, x: number, y: number, color?: string) {
-  const text = document.createElementNS(svgNS, 'text')
-  setAttributes(text, {
-    'text-anchor': 'middle',
-    x: x + '',
-    y: y + '',
-    fill: color || 'rgb(235, 95, 82)',
-  })
-  text.dataset.type = 'custom-link'
-  text.innerHTML = string
-  return text
-}
-
 /**
  * FYI
  * p1: start point
@@ -291,7 +278,11 @@ const drawArrow = function (mei: MindElixirInstance, from: Topic, to: Topic, obj
   // Use extracted common function to calculate midpoint
   const { x: halfx, y: halfy } = calcBezierMidPoint(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y)
   const labelColor = obj.style?.labelColor
-  const label = createText(obj.label, halfx, halfy, labelColor)
+  const label = createSvgText(obj.label, halfx, halfy, {
+    anchor: 'middle',
+    color: labelColor,
+    dataType: 'custom-link',
+  })
   newSvgGroup.appendChild(label)
   newSvgGroup.label = label
 

src/summary.ts

@@ -1,7 +1,7 @@
 import type { MindElixirInstance, Topic } from '.'
 import { DirectionClass } from './types/index'
 import { generateUUID, getOffsetLT, setAttributes } from './utils'
-import { editSvgText, svgNS } from './utils/svg'
+import { createSvgText, editSvgText, svgNS } from './utils/svg'
 
 /**
  * @public
@@ -98,18 +98,6 @@ const createPath = function (d: string, color?: string) {
   return path
 }
 
-const createText = function (string: string, x: number, y: number, anchor: 'start' | 'end', color?: string) {
-  const text = document.createElementNS(svgNS, 'text')
-  setAttributes(text, {
-    'text-anchor': anchor,
-    x: x + '',
-    y: y + '',
-    fill: color || '#666',
-  })
-  text.innerHTML = string
-  return text
-}
-
 const getWrapper = (tpc: Topic) => tpc.parentElement.parentElement
 
 const getDirection = function (mei: MindElixirInstance, { parent, start }: Summary) {
@@ -157,10 +145,10 @@ const drawSummary = function (mei: MindElixirInstance, summary: Summary) {
   const color = theme.cssVar['--color']
   if (side === DirectionClass.LHS) {
     path = createPath(`M ${left + 10} ${top} c -5 0 -10 5 -10 10 L ${left} ${bottom - 10} c 0 5 5 10 10 10 M ${left} ${md} h -10`, color)
-    text = createText(summaryText, left - 20, md + 6, 'end', color)
+    text = createSvgText(summaryText, left - 20, md + 6, { anchor: 'end', color })
   } else {
     path = createPath(`M ${right - 10} ${top} c 5 0 10 5 10 10 L ${right} ${bottom - 10} c 0 5 -5 10 -10 10 M ${right} ${md} h 10`, color)
-    text = createText(summaryText, right + 20, md + 6, 'start', color)
+    text = createSvgText(summaryText, right + 20, md + 6, { anchor: 'start', color })
   }
   const group = creatGroup('s-' + id)
   group.appendChild(path)

src/utils/svg.ts

@@ -8,6 +8,34 @@ import { selectText } from './dom'
 const $d = document
 export const svgNS = 'http://www.w3.org/2000/svg'
 
+export interface SvgTextOptions {
+  anchor?: 'start' | 'middle' | 'end'
+  color?: string
+  dataType?: string
+}
+
+/**
+ * Create an SVG text element with common attributes
+ */
+export const createSvgText = function (text: string, x: number, y: number, options: SvgTextOptions = {}): SVGTextElement {
+  const { anchor = 'middle', color, dataType } = options
+
+  const textElement = document.createElementNS(svgNS, 'text')
+  setAttributes(textElement, {
+    'text-anchor': anchor,
+    x: x + '',
+    y: y + '',
+    fill: color || (anchor === 'middle' ? 'rgb(235, 95, 82)' : '#666'),
+  })
+
+  if (dataType) {
+    textElement.dataset.type = dataType
+  }
+
+  textElement.innerHTML = text
+  return textElement
+}
+
 export const createPath = function (d: string, color: string, width: string) {
   const path = $d.createElementNS(svgNS, 'path')
   setAttributes(path, {