fix: ensure .lhs and .rhs are found correctly

Author: SSShooter

package.json

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

src/dev.ts

@@ -68,6 +68,7 @@ mind.init(example)
 const m2 = new MindElixir({
   el: '#map2',
   selectionContainer: 'body', // use body to make selection usable when transform is not 0
+  direction: MindElixir.SIDE,
 })
 m2.init(data)
 

src/utils/domManipulation.ts

@@ -1,19 +1,18 @@
-import { fillParent } from '.'
 import { LEFT, RIGHT, SIDE } from '../const'
 import { rmSubline } from '../nodeOperation'
 import type { MindElixirInstance, NodeObj } from '../types'
 import type { Topic, Wrapper } from '../types/dom'
-import { findEle, createExpander } from './dom'
+import { createExpander } from './dom'
 
 // Judge new added node L or R
-export const judgeDirection = function (direction: number, obj: NodeObj) {
+export const judgeDirection = function ({ map, direction }: MindElixirInstance, obj: NodeObj) {
   if (direction === LEFT) {
     return LEFT
   } else if (direction === RIGHT) {
     return RIGHT
   } else if (direction === SIDE) {
-    const l = document.querySelector('.lhs')?.childElementCount || 0
-    const r = document.querySelector('.rhs')?.childElementCount || 0
+    const l = map.querySelector('.lhs')?.childElementCount || 0
+    const r = map.querySelector('.rhs')?.childElementCount || 0
     if (l <= r) {
       obj.direction = LEFT
       return LEFT
@@ -38,7 +37,7 @@ export const addChildDom = function (mei: MindElixirInstance, to: Topic, wrapper
     }
     mei.linkDiv(wrapper.offsetParent as Wrapper)
   } else if (top.tagName === 'ME-ROOT') {
-    const direction = judgeDirection(mei.direction, tpc.nodeObj)
+    const direction = judgeDirection(mei, tpc.nodeObj)
     if (direction === LEFT) {
       mei.container.querySelector('.lhs')?.appendChild(wrapper)
     } else {

src/utils/svg.ts

@@ -58,7 +58,7 @@ export const createSvgGroup = function (d: string, arrowd1: string, arrowd2: str
 export const editSvgText = function (mei: MindElixirInstance, textEl: SVGTextElement, onblur: (div: HTMLDivElement) => void) {
   console.time('editSummary')
   if (!textEl) return
-  const div = document.createElement('div')
+  const div = $d.createElement('div')
   mei.nodes.appendChild(div)
   const origin = textEl.innerHTML
   div.id = 'input-box'