fix: avoid unnecessary DOM change

Author: gera2ld

assets/style.css

@@ -25,12 +25,13 @@ body {
 }
 
 .markmap-highlight-area {
+  --mm-highlight-scale: 1;
   position: absolute;
   width: var(--mm-highlight-width);
   height: var(--mm-highlight-height);
   left: var(--mm-highlight-x);
   top: var(--mm-highlight-y);
   z-index: -1;
   background: #ff02;
-  transform: scale(1.2);
+  transform: scale(var(--mm-highlight-scale));
 }

src/app.ts

@@ -216,11 +216,14 @@ function checkHighlight() {
     highlightEl.remove();
   } else {
     const rect = active.el.getBoundingClientRect();
+    const padding = 4;
+    const { width } = active.node.state.rect;
+    const scale = (width + padding * 2) / width;
     highlightEl.setAttribute(
       'style',
-      `--mm-highlight-x:${rect.x}px;--mm-highlight-y:${rect.y}px;--mm-highlight-width:${rect.width}px;--mm-highlight-height:${rect.height}px`,
+      `--mm-highlight-x:${rect.x}px;--mm-highlight-y:${rect.y}px;--mm-highlight-width:${rect.width}px;--mm-highlight-height:${rect.height}px;--mm-highlight-scale:${scale}`,
     );
-    document.body.append(highlightEl);
+    if (!highlightEl.parentNode) document.body.append(highlightEl);
   }
   requestAnimationFrame(checkHighlight);
 }