refactor: remove top level scope document

Author: SSShooter

src/index.ts

@@ -14,7 +14,6 @@ import { createDragMoveHelper } from './utils/dragMoveHelper'
 import type { Topic } from './docs'
 
 // TODO show up animation
-const $d = document
 
 function MindElixir(
   this: MindElixirInstance,
@@ -87,7 +86,7 @@ function MindElixir(
   this.dragMoveHelper = createDragMoveHelper(this)
   this.bus = createBus()
 
-  this.container = $d.createElement('div') // map container
+  this.container = document.createElement('div') // map container
   this.selectionContainer = selectionContainer || this.container
 
   this.container.className = 'map-container'
@@ -96,21 +95,21 @@ function MindElixir(
   this.theme = theme || (mediaQuery.matches ? DARK_THEME : THEME)
 
   // infrastructure
-  const canvas = $d.createElement('div') // map-canvas Element
+  const canvas = document.createElement('div') // map-canvas Element
   canvas.className = 'map-canvas'
   this.map = canvas
   this.container.setAttribute('tabindex', '0')
   this.container.appendChild(this.map)
   this.el.appendChild(this.container)
 
-  this.nodes = $d.createElement('me-nodes')
+  this.nodes = document.createElement('me-nodes')
 
   this.lines = createLinkSvg('lines') // main link container
   this.summarySvg = createLinkSvg('summary') // summary container
 
   this.linkController = createLinkSvg('linkcontroller') // bezier controller container
-  this.P2 = $d.createElement('div') // bezier P2
-  this.P3 = $d.createElement('div') // bezier P3
+  this.P2 = document.createElement('div') // bezier P2
+  this.P3 = document.createElement('div') // bezier P3
   this.P2.className = this.P3.className = 'circle'
   this.P2.style.display = this.P3.style.display = 'none'
   this.line1 = createLine() // bezier auxiliary line1
@@ -119,7 +118,7 @@ function MindElixir(
   this.linkController.appendChild(this.line2)
   this.linkSvgGroup = createLinkSvg('topiclinks') // storage user custom link svg
 
-  this.labelContainer = $d.createElement('div') // container for SVG labels
+  this.labelContainer = document.createElement('div') // container for SVG labels
   this.labelContainer.className = 'label-container'
 
   this.map.appendChild(this.nodes)

src/plugin/nodeDraggable.ts

@@ -3,8 +3,6 @@ import type { MindElixirInstance } from '../types/index'
 
 export type InsertType = 'before' | 'after' | 'in' | null
 
-const $d = document
-
 export const insertPreview = function (tpc: Topic, insertType: InsertType) {
   if (!insertType) {
     clearPreview(tpc)
@@ -13,7 +11,7 @@ export const insertPreview = function (tpc: Topic, insertType: InsertType) {
   let el = tpc.querySelector('.insert-preview')
   const className = `insert-preview ${insertType} show`
   if (!el) {
-    el = $d.createElement('div')
+    el = document.createElement('div')
     tpc.appendChild(el)
   }
   el.className = className
@@ -207,7 +205,7 @@ export function handleNodeDragMove(mind: MindElixirInstance, state: NodeDragStat
 
   // Check for drop target
   // minus threshold infers that position of the cursor is above topic
-  const topMeet = $d.elementFromPoint(e.clientX, e.clientY - threshold) as Topic
+  const topMeet = document.elementFromPoint(e.clientX, e.clientY - threshold) as Topic
   if (canMove(topMeet, dragged)) {
     state.meet = topMeet
     const rect = topMeet.getBoundingClientRect()
@@ -218,7 +216,7 @@ export function handleNodeDragMove(mind: MindElixirInstance, state: NodeDragStat
       state.insertType = 'in'
     }
   } else {
-    const bottomMeet = $d.elementFromPoint(e.clientX, e.clientY + threshold) as Topic
+    const bottomMeet = document.elementFromPoint(e.clientX, e.clientY + threshold) as Topic
     if (canMove(bottomMeet, dragged)) {
       state.meet = bottomMeet
       const rect = bottomMeet.getBoundingClientRect()

src/utils/dom.ts

@@ -5,7 +5,6 @@ import { encodeHTML, getOffsetLT } from '../utils/index'
 import { layoutChildren } from './layout'
 
 // DOM manipulation
-const $d = document
 export const findEle = function (this: MindElixirInstance, id: string, el?: HTMLElement) {
   const scope = this?.el ? this.el : el ? el : document
   const ele = scope.querySelector<Topic>(`[data-nodeid="me${id}"]`)
@@ -32,7 +31,7 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
   if (nodeObj.image) {
     const img = nodeObj.image
     if (img.url && img.width && img.height) {
-      const imgEl = $d.createElement('img')
+      const imgEl = document.createElement('img')
       // Use imageProxy function if provided, otherwise use original URL
       imgEl.src = this.imageProxy ? this.imageProxy(img.url) : img.url
       imgEl.style.width = img.width + 'px'
@@ -48,7 +47,7 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
   }
 
   {
-    const textEl = $d.createElement('span')
+    const textEl = document.createElement('span')
     textEl.className = 'text'
 
     // Check if markdown parser is provided and topic contains markdown syntax
@@ -63,7 +62,7 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
   }
 
   if (nodeObj.hyperLink) {
-    const linkEl = $d.createElement('a')
+    const linkEl = document.createElement('a')
     linkEl.className = 'hyper-link'
     linkEl.target = '_blank'
     linkEl.innerText = '🔗'
@@ -75,7 +74,7 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
   }
 
   if (nodeObj.icons && nodeObj.icons.length) {
-    const iconsEl = $d.createElement('span')
+    const iconsEl = document.createElement('span')
     iconsEl.className = 'icons'
     iconsEl.innerHTML = nodeObj.icons.map(icon => `<span>${encodeHTML(icon)}</span>`).join('')
     tpc.appendChild(iconsEl)
@@ -85,11 +84,11 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
   }
 
   if (nodeObj.tags && nodeObj.tags.length) {
-    const tagsEl = $d.createElement('div')
+    const tagsEl = document.createElement('div')
     tagsEl.className = 'tags'
 
     nodeObj.tags.forEach(tag => {
-      const span = $d.createElement('span')
+      const span = document.createElement('span')
 
       if (typeof tag === 'string') {
         span.textContent = tag
@@ -115,7 +114,7 @@ export const shapeTpc = function (this: MindElixirInstance, tpc: Topic, nodeObj:
 
 // everything start from `Wrapper`
 export const createWrapper = function (this: MindElixirInstance, nodeObj: NodeObj, omitChildren?: boolean) {
-  const grp = $d.createElement('me-wrapper') as Wrapper
+  const grp = document.createElement('me-wrapper') as Wrapper
   const { p, tpc } = this.createParent(nodeObj)
   grp.appendChild(p)
   if (!omitChildren && nodeObj.children && nodeObj.children.length > 0) {
@@ -131,28 +130,28 @@ export const createWrapper = function (this: MindElixirInstance, nodeObj: NodeOb
 }
 
 export const createParent = function (this: MindElixirInstance, nodeObj: NodeObj) {
-  const p = $d.createElement('me-parent') as Parent
+  const p = document.createElement('me-parent') as Parent
   const tpc = this.createTopic(nodeObj)
   shapeTpc.call(this, tpc, nodeObj)
   p.appendChild(tpc)
   return { p, tpc }
 }
 
 export const createChildren = function (this: MindElixirInstance, wrappers: Wrapper[]) {
-  const children = $d.createElement('me-children') as Children
+  const children = document.createElement('me-children') as Children
   children.append(...wrappers)
   return children
 }
 
 export const createTopic = function (this: MindElixirInstance, nodeObj: NodeObj) {
-  const topic = $d.createElement('me-tpc') as Topic
+  const topic = document.createElement('me-tpc') as Topic
   topic.nodeObj = nodeObj
   topic.dataset.nodeid = 'me' + nodeObj.id
   return topic
 }
 
 export function selectText(div: HTMLElement) {
-  const range = $d.createRange()
+  const range = document.createRange()
   range.selectNodeContents(div)
   const getSelection = window.getSelection()
   if (getSelection) {
@@ -164,7 +163,7 @@ export function selectText(div: HTMLElement) {
 export const editTopic = function (this: MindElixirInstance, el: Topic) {
   console.time('editTopic')
   if (!el) return
-  const div = $d.createElement('div')
+  const div = document.createElement('div')
   const node = el.nodeObj
 
   // Get the original content from topic
@@ -240,7 +239,7 @@ export const editTopic = function (this: MindElixirInstance, el: Topic) {
 }
 
 export const createExpander = function (expanded: boolean | undefined): Expander {
-  const expander = $d.createElement('me-epd') as Expander
+  const expander = document.createElement('me-epd') as Expander
   // if expanded is undefined, treat as expanded
   expander.expanded = expanded !== false
   expander.className = expanded !== false ? 'minus' : ''

src/utils/layout.ts

@@ -3,8 +3,6 @@ import type { Children } from '../types/dom'
 import { DirectionClass, type MindElixirInstance, type NodeObj } from '../types/index'
 import { shapeTpc } from './dom'
 
-const $d = document
-
 // Set main nodes' direction and invoke layoutChildren()
 export const layout = function (this: MindElixirInstance) {
   console.time('layout')
@@ -13,7 +11,7 @@ export const layout = function (this: MindElixirInstance) {
   const tpc = this.createTopic(this.nodeData)
   shapeTpc.call(this, tpc, this.nodeData) // shape root tpc
   tpc.draggable = false
-  const root = $d.createElement('me-root')
+  const root = document.createElement('me-root')
   root.appendChild(tpc)
 
   const mainNodes = this.nodeData.children || []
@@ -42,9 +40,9 @@ export const layout = function (this: MindElixirInstance) {
 }
 
 const layoutMainNode = function (mei: MindElixirInstance, data: NodeObj[], root: HTMLElement) {
-  const leftPart = $d.createElement('me-main')
+  const leftPart = document.createElement('me-main')
   leftPart.className = DirectionClass.LHS
-  const rightPart = $d.createElement('me-main')
+  const rightPart = document.createElement('me-main')
   rightPart.className = DirectionClass.RHS
   for (let i = 0; i < data.length; i++) {
     const nodeObj = data[i]
@@ -71,7 +69,7 @@ const layoutMainNode = function (mei: MindElixirInstance, data: NodeObj[], root:
 }
 
 export const layoutChildren = function (mei: MindElixirInstance, data: NodeObj[]) {
-  const chldr = $d.createElement('me-children') as Children
+  const chldr = document.createElement('me-children') as Children
   for (let i = 0; i < data.length; i++) {
     const nodeObj = data[i]
     const { grp } = mei.createWrapper(nodeObj)

src/utils/svg.ts

@@ -5,7 +5,6 @@ import type { MindElixirInstance } from '../types'
 import type { CustomSvg } from '../types/dom'
 import { selectText } from './dom'
 
-const $d = document
 export const svgNS = 'http://www.w3.org/2000/svg'
 
 export interface SvgTextOptions {
@@ -85,7 +84,7 @@ export const findLabelBySvgId = function (svgId: string): HTMLDivElement | null
 }
 
 export const createPath = function (d: string, color: string, width: string) {
-  const path = $d.createElementNS(svgNS, 'path')
+  const path = document.createElementNS(svgNS, 'path')
   setAttributes(path, {
     d,
     stroke: color || '#666',
@@ -96,14 +95,14 @@ export const createPath = function (d: string, color: string, width: string) {
 }
 
 export const createLinkSvg = function (klass: string) {
-  const svg = $d.createElementNS(svgNS, 'svg')
+  const svg = document.createElementNS(svgNS, 'svg')
   svg.setAttribute('class', klass)
   svg.setAttribute('overflow', 'visible')
   return svg
 }
 
 export const createLine = function () {
-  const line = $d.createElementNS(svgNS, 'line')
+  const line = document.createElementNS(svgNS, 'line')
   line.setAttribute('stroke', '#4dc4ff')
   line.setAttribute('fill', 'none')
   line.setAttribute('stroke-width', '2')
@@ -123,7 +122,7 @@ export const createArrowGroup = function (
     opacity?: string | number
   }
 ): CustomSvg {
-  const g = $d.createElementNS(svgNS, 'g') as CustomSvg
+  const g = document.createElementNS(svgNS, 'g') as CustomSvg
   const svgs = [
     {
       name: 'line',
@@ -140,7 +139,7 @@ export const createArrowGroup = function (
   ] as const
   svgs.forEach((item, i) => {
     const d = item.d
-    const path = $d.createElementNS(svgNS, 'path')
+    const path = document.createElementNS(svgNS, 'path')
     const attrs: { [key: string]: string } = {
       d,
       stroke: style?.stroke || 'rgb(227, 125, 116)',
@@ -160,7 +159,7 @@ export const createArrowGroup = function (
       path.setAttribute('stroke-dasharray', style?.strokeDasharray || '8,2')
     }
 
-    const hotzone = $d.createElementNS(svgNS, 'path')
+    const hotzone = document.createElementNS(svgNS, 'path')
     const hotzoneAttrs = {
       d,
       stroke: 'transparent',