refactor: prevent interference with mounted target styles

Author: SSShooter

src/index.less

@@ -1,4 +1,4 @@
-.mind-elixir {
+.map-container {
   // May overwrited by js
   --gap: 30px; // child node horizontal gap
   --root-radius: 30px;
@@ -17,17 +17,9 @@
   --panel-border-color: #eaeaea;
   // ---
 
-  position: relative;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
     WenQuanYi Micro Hei, sans-serif;
-  .hyper-link {
-    text-decoration: none;
-    margin-left: 0.3em;
-  }
-}
-
-.map-container {
   user-select: none;
   height: 100%;
   width: 100%;
@@ -44,6 +36,10 @@
     outline: 2px solid var(--selected);
     outline-offset: 1px;
   }
+  .hyper-link {
+    text-decoration: none;
+    margin-left: 0.3em;
+  }
   .lhs {
     direction: rtl;
     me-tpc {

src/index.ts

@@ -48,7 +48,7 @@ function MindElixir(
   }
   if (!ele) throw new Error('MindElixir: el is not a valid element')
 
-  ele.className += ' mind-elixir'
+  ele.style.position = 'relative'
   ele.innerHTML = ''
   this.mindElixirBox = ele as HTMLElement
   this.disposable = []

src/utils/generateBranch.ts

@@ -50,7 +50,7 @@ export function main({ pT, pL, pW, pH, cT, cL, cW, cH, direction, containerHeigh
 }
 
 export function sub(this: MindElixirInstance, { pT, pL, pW, pH, cT, cL, cW, cH, direction, isFirst }: SubLineParams) {
-  const GAP = parseInt(this.mindElixirBox.style.getPropertyValue('--gap')) // cache?
+  const GAP = parseInt(this.container.style.getPropertyValue('--gap')) // cache?
   // const GAP = 30
   let y1 = 0
   let end = 0

src/utils/theme.ts

@@ -5,14 +5,13 @@ const changeTheme = function (this: MindElixirInstance, theme: Theme, shouldRefr
   this.theme = theme
   const cssVar = this.theme.cssVar
   const keys = Object.keys(cssVar)
-  // TODO: clear all cssText is too aggressive
-  this.mindElixirBox.style.cssText = ''
+  this.container.style.cssText = ''
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i] as keyof typeof cssVar
-    this.mindElixirBox.style.setProperty(key, cssVar[key] as string)
+    this.container.style.setProperty(key, cssVar[key] as string)
   }
   if (!theme.cssVar['--gap']) {
-    this.mindElixirBox.style.setProperty('--gap', '30px')
+    this.container.style.setProperty('--gap', '30px')
   }
   shouldRefresh && this.refresh()
 }