### Set Up SimpleMindMap Local Development Environment

Source: https://wanglin2.github.io/mind-map-docs/start/start

These bash commands outline the steps to clone the SimpleMindMap repository, navigate to the core library and web example directories, install dependencies, and link the library. This setup enables local development and testing of the SimpleMindMap library.

```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
npm run serve
```

--------------------------------

### Local Development Setup for Simple Mind Map

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Provides steps to clone the repository, navigate into the `simple-mind-map` and `web` directories, install dependencies, link packages, and start the development server. Includes notes on Node.js version and handling paid plugin dependencies.

```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
npm run serve
```

--------------------------------

### Compile Project Documentation

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Command to build the project's documentation files.

```bash
cd web
npm run buildDoc
```

--------------------------------

### Initialize simple-mind-map Instance

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This JavaScript code imports the `MindMap` class and creates a new instance, linking it to the `mindMapContainer` HTML element. It initializes the mind map with a basic root node, demonstrating the fundamental setup for displaying a mind map.

```javascript
import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById('mindMapContainer'),
  data: {
    "data": {
        "text": "Root Node"
    },
    "children": []
  }
});
```

--------------------------------

### Package Web Demo Application

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Command to build the web demo application, which automatically moves the `index.html` file to the root directory.

```bash
cd web
npm run build
```

--------------------------------

### Build SimpleMindMap Core Library

Source: https://wanglin2.github.io/mind-map-docs/start/start

This bash command executes the build script for the `simple-mind-map` core library. It reuses the build tools from the `web` example project to generate distributable files, allowing for custom builds with specific plugins.

```bash
cd web
npm run buildLibrary
```

--------------------------------

### SimpleMindMap.MindMap Constructor

Source: https://wanglin2.github.io/mind-map-docs/start/start

Initializes a new SimpleMindMap instance. The constructor accepts an options object to configure the mind map's rendering element and initial data. This allows for flexible setup and dynamic mind map creation.

```APIDOC
MindMap(options: object)
  options:
    el: HTMLElement | string
      Description: The DOM element or its ID where the mind map will be rendered. (e.g., document.getElementById('mindMapContainer'))
    data: object
      Description: The initial data structure for the mind map.
      Properties of data:
        data: object
          Description: Core node data.
          Properties of data.data:
            text: string
              Description: The text content of the root node. (e.g., "根节点")
        children: array
          Description: An array of child nodes. Each child node follows a similar structure to the root data. (e.g., [])
```

--------------------------------

### Install simple-mind-map via npm

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Installs the simple-mind-map package using npm. This is the primary method for adding the library to your project. This command is applicable for versions before 0.2.0 as well.

```bash
npm i simple-mind-map
```

--------------------------------

### Package Simple Mind Map Core Library

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Commands to build the core `simple-mind-map` library. Explains that `full.js` includes all plugins by default and suggests modifying it to reduce file size if not all plugins are needed.

```bash
cd web
npm run buildLibrary
```

--------------------------------

### Install SimpleMindMap via npm

Source: https://wanglin2.github.io/mind-map-docs/start/start

This command installs the SimpleMindMap library using npm. It's the primary method for integrating the library into your project, ensuring all dependencies are managed correctly.

```bash
npm i simple-mind-map
```

--------------------------------

### Simple Mind Map Library Package.json Export Fields

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Illustrates the `module` and `main` fields in `package.json` for the `simple-mind-map` library, explaining how different environments use `index.js` or `simpleMindMap.umd.min.js` as entry points.

```json
{
  "module": "index.js",
  "main": "./dist/simpleMindMap.umd.min.js"
}
```

--------------------------------

### Asynchronously Load and Register SimpleMindMap Plugin

Source: https://wanglin2.github.io/mind-map-docs/start/start

This JavaScript example shows how to dynamically import a specific plugin, such as `Export.js`, and register it with an existing `mindMap` instance using `addPlugin`. This approach is beneficial for optimizing bundle size by loading plugins on demand rather than including them all initially.

```javascript
import('simple-mind-map/src/plugins/Export.js').then(res => {
  mindMap.addPlugin(res.default)
})
```

--------------------------------

### Asynchronously Load and Register simple-mind-map Plugin

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This JavaScript snippet demonstrates how to asynchronously load and register a plugin, specifically the `Export.js` plugin, after the `simple-mind-map` instance has been created. This method allows for lazy loading of features, reducing the initial bundle size.

```javascript
import('simple-mind-map/src/plugins/Export.js').then(res => {
  mindMap.addPlugin(res.default)
})
```

--------------------------------

### Instantiate SimpleMindMap in JavaScript

Source: https://wanglin2.github.io/mind-map-docs/start/start

This JavaScript code demonstrates how to import the `MindMap` class and create a new instance. It requires a DOM element (`el`) to render into and an initial mind map `data` structure.

```javascript
import MindMap from "simple-mind-map";

const mindMap = new MindMap({
  el: document.getElementById('mindMapContainer'),
  data: {
    "data": {
        "text": "根节点"
    },
    "children": []
  }
});
```

--------------------------------

### Generate TypeScript Type Definitions for Simple Mind Map

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Command to generate TypeScript declaration files for the `simple-mind-map` library, which will be located in the `types/` directory.

```bash
cd simple-mind-map
npm run types
```

--------------------------------

### Include SimpleMindMap via CDN in HTML

Source: https://wanglin2.github.io/mind-map-docs/start/start

This HTML snippet demonstrates how to include the SimpleMindMap library and its associated CSS file directly from a CDN. This method creates a global `window.simpleMindMap` object, making the library accessible without a build step.

```html
<link rel="stylesheet" href="simpleMindMap.esm.min.css">
<script scr="simpleMindMap.umd.min.js"></script>
```

--------------------------------

### Import simple-mind-map via CDN (UMD Module)

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This HTML snippet shows how to include the `simple-mind-map` library and its associated CSS using CDN links or local UMD module files. This method is suitable for direct browser usage without a module bundler, making the `MindMap` constructor available via `window.simpleMindMap.default`.

```html
<link rel="stylesheet" href="simpleMindMap.esm.min.css">
<script scr="simpleMindMap.umd.min.js"></script>
```

--------------------------------

### Start Local Development Server for SimpleMindMap Web Project

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

After setting up the project, this command starts a local development server, allowing you to preview the application in your browser. This is useful for testing changes before packaging for deployment.

```bash
npm run serve
```

--------------------------------

### simple-mind-map CDN URLs for UMD and CSS

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

These URLs provide direct access to the `simple-mind-map` UMD module JavaScript file and its minified ES module CSS file via unpkg CDN. They allow for quick integration of the library into web projects without requiring a local `npm` installation.

```APIDOC
https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css
https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js
```

--------------------------------

### SimpleMindMap package.json Module Export Fields

Source: https://wanglin2.github.io/mind-map-docs/start/start

This JSON snippet illustrates the `module` and `main` fields in the `simple-mind-map`'s `package.json`. These fields define the entry points for ES modules and CommonJS modules respectively, influencing how bundlers resolve the library.

```json
{
  "module": "index.js",
  "main": "./dist/simpleMindMap.umd.min.js"
}
```

--------------------------------

### simple-mind-map CDN URL for ES Modules

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This URL points to the unpkg CDN directory for a specific version of `simple-mind-map`, allowing users to browse and access all packaged ES module files. It provides an alternative for direct browser usage when ES module support is desired.

```APIDOC
https://unpkg.com/browse/simple-mind-map@0.9.2/dist/
```

--------------------------------

### Example Usage of walk Method

Source: https://wanglin2.github.io/mind-map-docs/en/api/utils

An example demonstrating how to call the `walk` method with a tree, null parent, empty callbacks, and default parameters for `isRoot`, `layerIndex`, and `index`.

```js
walk(tree, null, () => {}, () => {}, false, 0, 0);
```

--------------------------------

### Configure Vue CLI for simple-mind-map transpilation

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

Adds a configuration to the vue.config.js file for Vue CLI-created projects. This ensures that the simple-mind-map dependency is properly compiled by babel-loader, addressing potential compilation failures due to the library being published in source code form.

```js
module.exports = {
  transpileDependencies: ["simple-mind-map"]
};
```

--------------------------------

### Start Web Development Server

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/cooperate

This bash command executes the development server for the web application. It should be run from the `web` directory after configuring the Cooperate plugin.

```bash
// Execute under web path
npm run serve
```

--------------------------------

### Define HTML Container for Mind Map

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This HTML snippet defines a `div` element with the ID `mindMapContainer`, which serves as the essential container for rendering the `simple-mind-map` instance. It must have non-zero width and height for the mind map to display correctly.

```html
<div id="mindMapContainer"></div>
```

--------------------------------

### Clone Project and Install Dependencies for Mind Map

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/cooperate

This bash script outlines the steps to clone the `mind-map` repository, navigate into its subdirectories (`simple-mind-map` and `web`), and install their respective npm dependencies. It also demonstrates linking `simple-mind-map` locally for development.

```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
```

--------------------------------

### Clone and Set Up Simple Mind Map Web Project

Source: https://wanglin2.github.io/mind-map-docs/start/deploy

This sequence of bash commands clones the `mind-map` repository, navigates into the `simple-mind-map` and `web` directories, installs necessary dependencies using npm, and links the `simple-mind-map` package locally. This prepares the project for development or building.

```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
```

--------------------------------

### Define HTML Container for Mind Map

Source: https://wanglin2.github.io/mind-map-docs/start/start

This HTML snippet provides a `div` element with the ID `mindMapContainer`, which serves as the rendering target for the SimpleMindMap instance. It is crucial that this container has non-zero dimensions for the mind map to display correctly.

```html
<div id="mindMapContainer"></div>
```

--------------------------------

### Install SimpleMindMap Themes Plugin

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/themes

This command installs the `simple-mind-map-plugin-themes` package using npm, making it available for use in your project. It's a prerequisite for using the plugin's functionalities.

```bash
npm i simple-mind-map-plugin-themes
```

--------------------------------

### Configure Vue CLI for SimpleMindMap Transpilation

Source: https://wanglin2.github.io/mind-map-docs/start/start

For Vue CLI projects, this configuration in `vue.config.js` ensures that `simple-mind-map` is transpiled by `babel-loader`. This resolves potential compilation issues with newer JavaScript syntax, especially for versions prior to 0.2.0.

```javascript
module.exports = {
     transpileDependencies: ['simple-mind-map']
}
```

--------------------------------

### Install SimpleMindMap Themes Plugin via npm

Source: https://wanglin2.github.io/mind-map-docs/plugins/themes

This snippet provides the command to install the `simple-mind-map-plugin-themes` package using npm, which is required to use additional themes beyond the default.

```bash
npm i simple-mind-map-plugin-themes
```

--------------------------------

### Apply Basic CSS Reset for Mind Map Container

Source: https://wanglin2.github.io/mind-map-docs/en/start/start

This CSS snippet applies a basic reset to all elements within the `mindMapContainer`, setting `margin` and `padding` to `0`. This helps in ensuring consistent rendering of the mind map by removing default browser styles.

```css
#mindMapContainer * {
  margin: 0;
  padding: 0;
}
```

--------------------------------

### Run or Build Simple Mind Map Web Project

Source: https://wanglin2.github.io/mind-map-docs/start/deploy

After setting up the project, these commands allow you to either start a local development server or build the project for production deployment. The `npm run serve` command launches a local server, while `npm run build` generates static assets in the `dist` directory.

```bash
npm run serve
```

```bash
npm run build
```

--------------------------------

### Clone and Set Up SimpleMindMap Project for Static Deployment

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

This sequence of bash commands clones the 'mind-map' repository, navigates into the 'simple-mind-map' and 'web' directories, installs dependencies, and links the 'simple-mind-map' package locally. This prepares the project for development or static deployment.

```bash
git clone https://github.com/wanglin2/mind-map.git
cd mind-map
cd simple-mind-map
npm i
npm link
cd ..
cd web
npm i
npm link simple-mind-map
```

--------------------------------

### Example package.json for SimpleMindMap Plugin

Source: https://wanglin2.github.io/mind-map-docs/course/course24

This snippet provides a reference `package.json` file structure for publishing a `simple-mind-map` plugin to npm. It includes common fields like `name`, `version`, `description`, `module`, `main`, `scripts` for building with `esbuild`, `author`, `license`, and `dependencies`.

```JSON
{
  "name": "simple-mind-map-plugin-xxx",
  "version": "1.0.0",
  "description": "插件的描述",
  "module": "index.js",
  "main": "./dist/xxx.esm.min.js",
  "scripts": {
    "build": "esbuild ./index.js --bundle --minify --external:buffer --format=esm --outfile=./dist/xxx.esm.min.js && esbuild ./index.js --bundle --minify --external:buffer --format=cjs --outfile=./dist/xxx.cjs.min.js"
  },
  "author": "作者名字",
  "license": "MIT",
  "dependencies": {
    "esbuild": "^0.17.15"
  }
}
```

--------------------------------

### Start Yjs Signaling Server

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/cooperate

This bash command initiates the signaling server required for Yjs collaborative editing. It runs a script located in `simple-mind-map/bin/wsServer.mjs`, which is based on `y-webrtc` and may not be complete for production use.

```bash
// Execute under simple-mind-map path
npm run wsServe
```

--------------------------------

### Import KaTeX Stylesheet for npm Installation

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/formula

This JavaScript import statement demonstrates how to include the necessary KaTeX stylesheet when 'simple-mind-map' is installed via npm. This is particularly relevant for scenarios where KaTeX renders in HTML mode, which might be triggered automatically for older browser versions.

```js
import 'simple-mind-map/node_modules/katex/dist/katex.min.css'
```

--------------------------------

### Get Custom Theme Configuration

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Retrieves the custom theme configuration applied to the mind map.

```APIDOC
getCustomThemeConfig()
```

--------------------------------

### Integrate and Use Themes Plugin in SimpleMindMap

Source: https://wanglin2.github.io/mind-map-docs/plugins/themes

This JavaScript example demonstrates how to import the `MindMap` and `Themes` modules, register the Themes plugin with the `MindMap` class, and then instantiate `MindMap` with a specific theme, such as 'dark7'.

```js
import MindMap from 'simple-mind-map'
import Themes from 'simple-mind-map-plugin-themes'

// 注册主题
Themes.init(MindMap)

// 实例化
new MindMap({
    theme: 'dark7'
})
```

--------------------------------

### Example Usage of copyRenderTree

Source: https://wanglin2.github.io/mind-map-docs/en/api/utils

Demonstrates how to copy the current mind map's renderer tree into an empty object, effectively creating a duplicate of the render structure.

```js
copyRenderTree({}, this.mindMap.renderer.renderTree);
```

--------------------------------

### Example MindMap Theme Configuration Properties

Source: https://wanglin2.github.io/mind-map-docs/course/course10

Illustrates common style and layout properties that can be defined within a simple-mind-map theme, such as font sizes, colors, border styles, and gradient settings. This snippet shows a partial configuration object, typically found within a theme definition.

```js
    fontSize: 16,
    fontWeight: 'noraml',
    fontStyle: 'normal',
    lineHeight: 1.5,
    borderColor: '#549688',
    borderWidth: 1,
    borderDasharray: 'none',
    borderRadius: 5,
    textDecoration: 'none',
    gradientStyle: false,
    startColor: '#549688',
    endColor: '#fff',
    startDir: [0, 0],
    endDir: [1, 0],
    hoverRectColor: '',
    hoverRectColor: '',
    hoverRectRadius: 5,
    textAlign: 'left',
    imgPlacement: 'top',
    tagPlacement: 'right'
  }
}
```

--------------------------------

### MindMap: Get Configuration

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Retrieves the current configuration of the mind map instance. If a property name is provided, it returns the value of that specific property; otherwise, it returns the entire configuration object.

```APIDOC
getConfig(prop?: string): any
  prop: string | undefined - Get the value of the specified configuration, and return the entire configuration if not passed.
  Returns: any - The configuration value or the entire configuration object.
```

--------------------------------

### Demonstrate Plugin Configuration

Source: https://wanglin2.github.io/mind-map-docs/api/constructor/constructor-options

Configuration options for the Demonstrate plugin, allowing customization of presentation mode settings. Note: The detailed 'Demonstrate Plugin Configuration' section mentioned in the source text was not provided.

```APIDOC
demonstrateConfig (v0.9.11+): Object | null (Default: null)
  Configuration for the Demonstrate plugin. If not passed, default configuration will be used. An object can be passed; if only a specific property is configured, only that property needs to be set, and other unset properties will still use default configurations. For complete configuration, please refer to the 'Demonstrate Plugin Configuration' section below.
```

--------------------------------

### Apply Basic CSS Styles to Mind Map Container

Source: https://wanglin2.github.io/mind-map-docs/start/start

This CSS rule resets margin and padding for all elements within the `mindMapContainer`. This provides a clean slate for the mind map rendering, preventing default browser styles from interfering with the layout.

```css
#mindMapContainer * {
  margin: 0;
  padding: 0;
}
```

--------------------------------

### Demonstration Plugin Configuration

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-options

Configuration options for the demonstration plugin, allowing customization of highlight box appearance and behavior. The 'demonstrateConfig' object can be partially or fully configured, with unconfigured properties reverting to defaults.

```APIDOC
demonstrateConfig:
  type: Object | null
  defaultValue: null
  description: Demonstration plugin configuration. If not transmitted, the default configuration will be used. An object can be transmitted. If only a certain property is configured, only that property can be set. Other properties that have not been set will also use the default configuration.
  properties:
    boxShadowColor:
      type: String
      defaultValue: rgba(0, 0, 0, 0.8)
      description: The color of the area around the highlighted box
    borderRadius:
      type: String
      defaultValue: 5px
      description: The size of the rounded corners of the highlighted box
    transition:
      type: String
      defaultValue: all 0.3s ease-out
      description: Transition properties of highlight box animation and CSS transition properties
    zIndex:
      type: Number
      defaultValue: 9999
      description: The hierarchy of highlighted box elements
    padding:
      type: Number
      defaultValue: 20
      description: The inner margin of the highlighted box
    margin:
      type: Number
      defaultValue: 50
      description: The outer margin of the highlighted box
    openBlankMode:
      type: Boolean
      defaultValue: true
      description: Is enable fill in the blank mode, where underlined text is not displayed by default and only displayed sequentially by pressing the enter key
```

--------------------------------

### Example Node Data Before NodeBase64ImageStorage Plugin

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/nodeBase64ImageStorage

This JSON structure shows how node data is typically organized before the NodeBase64ImageStorage plugin is applied. It highlights the issue of duplicate base64 image data when the same image is used across multiple nodes.

```JSON
{
    "data": {
        "text": "xxx"
    },
    "children": [
        {
            "data": {
                "text": "xxx2",
                "image": "data:image/png,xxx"
            }
        },
        {
            "data": {
                "text": "xxx3",
                "image": "data:image/png,xxx"
            }
        }
    ]
}
```

--------------------------------

### Install Mind Map Application via Docker Run Command

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

This Docker command pulls the latest mind map application image and runs it as a detached container. It maps the host's port 8081 to the container's internal port 8080, making the web service accessible from the host machine.

```Shell
docker run -d -p 8081:8080 shuiche/mind-map:latest
```

--------------------------------

### Demonstrate Plugin API Reference

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/demonstrate

Detailed API documentation for the SimpleMindMap Demonstrate plugin, including events, properties, and methods for controlling demonstration mode.

```APIDOC
Events:
  exit_demonstrate: Triggered when exiting the demonstration.
  demonstrate_jump: Triggered when jumping.

Properties:
  stepList: Array<any>
    Description: List of all steps demonstrated. Available when the 'enter' method is called.
  currentStepIndex: Number
    Description: The index of the steps currently played, counting from 0.
  config: Object
    Description: The current configuration of the plugin.

Methods:
  enter(): void
    Description: Entering demonstration mode will automatically display the container elements in full screen.
  exit(): void
    Description: Exit demonstration mode, which can also be exited by pressing the 'Esc' key.
  prev(): void
    Description: Previous step.
  next(): void
    Description: Next step.
  jump(index: Number): void
    Parameters:
      index: Number
        Description: To jump to a certain step, count from 0.
    Description: Jump to a certain step.
```

--------------------------------

### Register Demonstrate plugin with SimpleMindMap

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/demonstrate

This snippet shows how to import the Demonstrate plugin and register it with the SimpleMindMap instance using `MindMap.usePlugin()`. After registration, the plugin instance can be accessed via `mindMap.demonstrate`.

```javascript
import MindMap from 'simple-mind-map'
import Demonstrate from 'simple-mind-map/src/plugins/Demonstrate.js'

MindMap.usePlugin(Demonstrate)
```

--------------------------------

### getStyle: Get node style value

Source: https://wanglin2.github.io/mind-map-docs/en/api/node

Get the final style value applied to this node

```APIDOC
getStyle(prop, root, isActive)
  prop: the style property to get
  root: whether it is the root node, default `false`
  isActive: v0.7.0+has been abandoned, whether the value being fetched is the active state style value, default `false`
```

--------------------------------

### hasCustomStyle: Get whether a custom style has been set

Source: https://wanglin2.github.io/mind-map-docs/en/api/node

Gets whether a custom style has been set.

```APIDOC
hasCustomStyle()
```

--------------------------------

### Implement Custom Data Handling and Application Control

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

This comprehensive JavaScript snippet, placed at the end of the `<body>` in `index.html`, demonstrates how to take over application control. It defines `getDataFromBackend` to simulate fetching mind map data, `setTakeOverAppMethods` to register global functions for data retrieval and saving (mind map data, language, local config), and an `onload` handler to orchestrate the process. It also shows how to listen for application events like `app_inited` and manually initialize the application using `window.initApp()`.

```js
<script>
  // Your own method of requesting data
  const getDataFromBackend = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          // MindMap data
          mindMapData: {
            root: {
              "data": {
                  "text": "根节点"
              },
              "children": []
            },
            theme: { "template":"avocado","config":{} },
            layout: "logicalStructure",
            config: {},
            view: {}
          },
          // Page language, supporting Chinese (zh) and English (en)
          lang: 'zh',
          // Page Section Configuration
          localConfig: null
        })
      }, 200)
    })
  }
  // Register Global Method
  const setTakeOverAppMethods = (data) => {
    window.takeOverAppMethods = {}
    // Function for obtaining mind map data
    window.takeOverAppMethods.getMindMapData = () => {
      return data.mindMapData
    }
    // Functions for Saving Mind Map Data
    window.takeOverAppMethods.saveMindMapData = (data) => {
      console.log(data)
      // The trigger frequency of this function may be high, so you should do throttling or anti shaking measures
    }
    // Function to obtain language
    window.takeOverAppMethods.getLanguage = () => {
      return data.lang
    }
    // Functions for Saving Languages
    window.takeOverAppMethods.saveLanguage = (lang) => {
      console.log(lang)
    }
    // Get locally configured functions
    window.takeOverAppMethods.getLocalConfig = () => {
      return data.localConfig
    }
    // Save locally configured functions
    window.takeOverAppMethods.saveLocalConfig = (config) => {
      console.log(config)
    }
  }
  window.onload = async () => {
    if (!window.takeOverApp) return
    // request data
    const data = await getDataFromBackend()
    // Method for setting global
    setTakeOverAppMethods(data)
    // Mind Map Instance Creation Completion Event
    window.$bus.$on('app_inited', (mindMap) => {
      console.log(mindMap)
    })
    // You can use window$ Bus$ On() to listen for some events in the application
    // Instantiate Page
    window.initApp()
  }
</script>
```

--------------------------------

### getData: Get node data object or specific value

Source: https://wanglin2.github.io/mind-map-docs/en/api/node

Get the specified value in the `data` object of the node's real data `nodeData`, if `key` is not passed, return the `data` object

```APIDOC
getData(key)
```

--------------------------------

### Build Production Assets for SimpleMindMap Web Project

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

This command compiles and packages the web project into production-ready static files. The output includes an 'index.html' file and static resources in a 'dist' directory, suitable for uploading to a static file server.

```bash
npm run build
```

--------------------------------

### SimpleMindMap Repository Directory Structure

Source: https://wanglin2.github.io/mind-map-docs/start/introduction

This section outlines the primary directories within the `simple-mind-map` project, detailing the purpose and contents of each, including the core library, the web application, and the build output.

```APIDOC
1. `simple-mind-map`
   Description: The core mind map library, framework-agnostic, usable with Vue, React, or without frameworks.
2. `web`
   Description: The online mind map application built using the `simple-mind-map` library, based on `vue2.x` and `ElementUI`.
   Features:
     - Toolbar: Supports inserting/deleting nodes; editing node images, icons, hyperlinks, notes, tags, summaries.
     - Sidebar: Includes basic style settings, node style settings, outline panel, theme selection, and structure selection panels.
     - Import/Export: Data is saved to browser local storage by default, and it also supports direct creation, opening, and editing of local computer files.
     - Right-click menu: Provides operations like expanding, collapsing, and organizing layout.
     - Bottom bar: Displays node count, word count; supports toggling between edit and read-only modes; zoom in/out; full screen toggle; and a minimap.
   Service: Provides documentation page service.
3. `dist`
   Description: The resource folder containing the packaged `web` application.
```

--------------------------------

### Synchronize Node Content from Outline to Mind Map (JavaScript)

Source: https://wanglin2.github.io/mind-map-docs/course/course12

This JavaScript example shows how to update the text content of a mind map node after it has been edited in an external outline tree. You first need to obtain the corresponding node instance, for example, using `mindMap.renderer.findNodeByUid(uid)`, and then call its `setText` method.

```JavaScript
// node为数据对应的节点实例
// 可以通过mindMap.renderer.findNodeByUid(uid)方法来获取
node.setText('xxx')
```

--------------------------------

### Enable Application Takeover Flag

Source: https://wanglin2.github.io/mind-map-docs/en/start/deploy

This JavaScript snippet, placed within the `<head>` tag of `index.html`, sets a global flag `window.takeOverApp` to `true`. This signals the application not to initialize itself automatically, allowing external control over its instantiation and data handling.

```js
<script>
  window.takeOverApp = true
</script>
```

--------------------------------

### Get Current Theme

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Retrieves the currently applied theme of the mind map.

```APIDOC
getTheme()
```

--------------------------------

### Formula Plugin Configuration

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-options

Configuration options for the formula plugin, including settings for direct editing of mathematical formulas in rich text, the path for Katex font files, and customization of the Katex library's output mode.

```APIDOC
enableEditFormulaInRichTextEdit:
  type: Boolean
  defaultValue: true
  description: Is enable direct editing of mathematical formulas in the rich text editing box
katexFontPath:
  type: String
  defaultValue: https://unpkg.com/katex@0.16.11/dist
  description: The request path for font files in the Katex library. Font files will only be requested when Katex's output is configured as html. The current configuration can be obtained through the mindMap.formula.getKatexConfig() method. The font file can be found in node_modules: katex/dist/fonts/. You can upload it to your server or CDN. The final font request path is ${katexFontPath}fonts/KaTeX_AMS-Regular.woff2, which can be concatenated by oneself to test whether it can be accessed
getKatexOutputType:
  type: Function | null
  defaultValue: null
  description: Customize the output mode of the Katex library. By default, when the Chrome kernel is below 100, html mode will be used. Otherwise, mathml mode will be used. If you have your own rules, you can pass a function that returns either mathml or html
```

--------------------------------

### Comprehensive Example of a Custom MindMap Theme Definition

Source: https://wanglin2.github.io/mind-map-docs/course/course10

Presents a detailed JavaScript object literal defining a custom theme named 'redSpirit'. This example illustrates how to set various visual properties for different node levels (root, second, node) and overall map elements like background and line colors, providing a template for custom theme creation.

```js
MindMap.defineTheme('redSpirit', {
    // 背景颜色
    backgroundColor: 'rgb(255, 238, 228)',
    // 连线的颜色
    lineColor: 'rgb(230, 138, 131)',
    lineWidth: 3,
    // 概要连线的粗细
    generalizationLineWidth: 3,
    // 概要连线的颜色
    generalizationLineColor: 'rgb(222, 101, 85)',
    // 根节点样式
    root: {
      fillColor: 'rgb(207, 44, 44)',
      color: 'rgb(255, 233, 157)',
      borderColor: '',
      borderWidth: 0,
      fontSize: 24
    },
    // 二级节点样式
    second: {
      fillColor: 'rgb(255, 255, 255)',
      color: 'rgb(211, 58, 21)',
      borderColor: 'rgb(222, 101, 85)',
      borderWidth: 2,
      fontSize: 18
    },
    // 三级及以下节点样式
    node: {
      fontSize: 14,
      color: 'rgb(144, 71, 43)'
    },
    // 概要节点样式
    generalization: {
      fontSize: 14,
      fillColor: 'rgb(255, 247, 211)',
      borderColor: 'rgb(255, 202, 162)',
      borderWidth: 2,
      color: 'rgb(187, 101, 69)'
    }
})
```

--------------------------------

### show: Show node and sub-nodes

Source: https://wanglin2.github.io/mind-map-docs/en/api/node

Show node and its sub-nodes

```APIDOC
show()
```

--------------------------------

### Get Node Index (getNodeIndex)

Source: https://wanglin2.github.io/mind-map-docs/en/api/render

Retrieves the position index of a node relative to its siblings.

```APIDOC
Method: getNodeIndex
Signature: getNodeIndex(node)
Parameters:
  node: The node instance.
Description: Get the position index of a node among its siblings.
```

--------------------------------

### Get Node Shape

Source: https://wanglin2.github.io/mind-map-docs/en/api/node

Retrieves the current shape of the node. Available from v0.2.4+.

```APIDOC
getShape()
```

--------------------------------

### MindMap: Get Current Layout

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Retrieves the current layout structure of the mind map.

```APIDOC
getLayout(): object
  Returns: object - The current layout structure.
```

--------------------------------

### 添加附加的节点前置和后置内容

Source: https://wanglin2.github.io/mind-map-docs/course/course33

前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。如果存在编号、任务勾选框内容，这里添加的前置内容会在这两者之后。
后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分。
添加这两个内容主要是使用`createNodePrefixContent`和`createNodePostfixContent`实例化选项：

```JavaScript
new MindMap({
  createNodePrefixContent: node => {
    const el = document.createElement('div')
    el.style.width = '50px'
    el.style.height = '50px'
    el.style.background = 'red'
    return {
      el, // 要添加的内容，DOM节点
      width: 50, // 内容的宽高
      height: 50
    }
  },
  createNodePostfixContent: node => {
    const domparser = new DOMParser()
    const doc = domparser.parseFromString(
      '<b style="background-color: rgb(214, 239, 214);">白日依山尽</b>',
      'text/html'
    )
    const el = doc.querySelector('b')
    return {
      el,
      width: 50,
      height: 50
    }
  }
})
```

--------------------------------

### SimpleMindMap Repository Branch Overview

Source: https://wanglin2.github.io/mind-map-docs/start/introduction

This section describes the main branches used in the `simple-mind-map` GitHub repository, clarifying their roles for releases and ongoing development.

```APIDOC
* `main`: The primary branch, representing the current stable release version.
* `feature`: The development branch, where ongoing work is conducted. All pull requests (PRs) should be submitted to this branch.
```

--------------------------------

### Get Data Type

Source: https://wanglin2.github.io/mind-map-docs/en/api/utils

Determines and returns the specific type of a given data, such as `Boolean` or `Array`. Introduced in v0.6.9+.

```APIDOC
getType(data)
```

--------------------------------

### SimpleMindMap Command Instance API Reference

Source: https://wanglin2.github.io/mind-map-docs/en/api/command

Detailed API documentation for the `command` instance, which manages command execution and history within the SimpleMindMap library. It includes properties for accessing history data and methods for controlling command flow and key mappings.

```APIDOC
Command instance:
  Description: The `command` instance is responsible for adding and executing commands. It includes many built-in commands and can also be added manually. A command refers to an operation that needs to add a copy to the history stack data. The `mindMap.command` instance can be obtained through this.

  Props:
    history:
      Description: The current list of all historical data. Do not manually modify the array. Before `v0.14.0`, the array stores historical data objects, while in later versions, serialized strings are stored. If you want to use them, they need to be deserialized.
    activeHistoryIndex:
      Description: The current historical data index. Do not manually modify this property.

  Methods:
    pause():
      Description: Pause collecting historical data. (v0.9.11+)
    recovery():
      Description: Restore the collection of historical data. (v0.9.11+)
    add(name, fn):
      Description: Add a command.
      Parameters:
        name: Command name
        fn: Method to be executed by the command
    remove(name, fn):
      Description: Remove a command.
      Parameters:
        name: Name of the command to be removed
        fn: Method to be removed, if not provided all methods for the command will be removed
    getCopyData():
      Description: Get a copy of the rendering tree data. That is, the data of the current canvas.
    clearHistory():
      Description: Clear the history stack data
    addHistory():
      Description: Trigger a historical stack data addition operation. Note that this method will delay execution, and the delay time can be set through the instantiation option 'addHistoryTime'.
    originAddHistory():
      Description: The function is the same as the 'addHistory' method, but this method will execute immediately without delay. (v0.12.1+)
    extendKeyMap(key, code):
      Description: Expand key mapping. (v0.12.2+)
      Parameters:
        key: The key identifier to be extended, for example, there may be multiple `/` keys on the keyboard, and the library has already defined one by default. You can define a new one and choose the name you want, for example: `/2`
        code: The key value of this button
    removeKeyMap(key):
      Description: Remove a key from the key mapping. (v0.12.2+)
      Parameters:
        key: The key to be removed from the key mapping.
```

--------------------------------

### Get Specific Theme Configuration Property

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Retrieves the value of a specific property within the current theme configuration.

```APIDOC
getThemeConfig(prop)
  prop: string - The name of the theme configuration property to retrieve.
```

--------------------------------

### Get SVG.js Objects

Source: https://wanglin2.github.io/mind-map-docs/api/constructor/constructor-methods

Retrieves core objects from the @svgdotjs/svg.js library, useful for creating SVG instances.

```APIDOC
getSvgObjects()
  Returns: object
    SVG: object - The main SVG object.
    G: object - Group element constructor.
    Rect: object - Rectangle element constructor.
```

```JavaScript
{
  SVG,
  G,
  Rect
}
```

--------------------------------

### SimpleMindMap Constructor Properties API Reference

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-props

Comprehensive API documentation for the SimpleMindMap Constructor, outlining its static and instance properties. Each property's description, versioning, and any associated external library details are provided to assist in development and integration.

```APIDOC
Constructor:
  Static Properties:
    pluginList: Array<Plugin>
      Description: List of all currently registered plugins.
      Version: v0.3.0+

  Instance Properties:
    el: HTMLElement
      Description: Container element.
    opt: Object
      Description: Config options object.
    svg: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the SVG() method. Canvas SVG element.
    draw: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the group() method. Child node of SVG node. Container element, used to carry content such as nodes and connections.
    lineDraw: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the group() method. Child node of draw node. Container for node wiring elements.
      Version: v0.8.0+
    nodeDraw: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the group() method. Child node of draw node. Container for node elements.
      Version: v0.8.0+
    associativeLineDraw: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the group() method. Available when the associated line plugin is registered. Child node of draw node. Container for associative line content.
      Version: v0.8.0+
    otherDraw: SVG.js.Element
      Description: @svgdotjs/svg.js library calls the node instance returned by the group() method. Child node of draw node. Container for other content.
      Version: v0.8.0+
    elRect: DOMRect
      Description: The size and position information of the container element 'el'. The return result of calling the 'getBoundingClientRect()' method.
    width: number
      Description: The width of the container element 'el'.
    height: number
      Description: The height of the container element 'el'.
    themeConfig: Object
      Description: Current Theme Configuration.
    cssTextMap: Object
      Description: Necessary CSS styles. This style will be dynamically added to the page during instantiation, and will also be added to the SVG source code when exported as SVG. The library has some default definitions, which can be viewed here: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js#L186. At the same time, plugins can also use the 'appendCss' method to append styles.
      Version: v0.12.0+
```

--------------------------------

### ADD_GENERALIZATION

Source: https://wanglin2.github.io/mind-map-docs/en/api/constructor/constructor-methods

Add a node summary (v0.2.0+).

```APIDOC
ADD_GENERALIZATION(
  data: the data for the summary, in object format, all numerical fields of the node are supported, default is {text: 'summary'},
  openEdit (v0.9.11+): Default is true, Whether to enter text editing status by default
)
```

--------------------------------

### APIDOC: mindMap.associativeLine.addLine Method

Source: https://wanglin2.github.io/mind-map-docs/en/plugins/associativeLine

Directly adds an associative line between a specified starting node and a target node without user interaction.

```APIDOC
mindMap.associativeLine.addLine(fromNode, toNode)
  Parameters:
    fromNode: The starting node for the associative line.
    toNode: The target node for the associative line.
  Description: Add an associative line directly. Calling this method will directly create an association line from the fromNode to the toNode node.
```

--------------------------------

### Get Node Index Among Peers

Source: https://wanglin2.github.io/mind-map-docs/en/api/utils

Retrieves the position index of a given node instance relative to its sibling nodes. Introduced in v0.7.2+.

```APIDOC
getNodeIndex(node)
  node: Node instance.
```