simple-mind-map-plugin-themes

mind-map主题扩展插件，为simple-mind-map提供可用的主题。

安装

npm i simple-mind-map-plugin-themes

使用

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

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

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

属性

Themes对象暴露了两个属性：

• darkList：暗色主题列表

• lightList：亮色主题列表

方法

Themes对象暴露了两个方法：

• init(MindMap)

注册主题，需要在实例化思维导图前调用。参数为simple-mind-map构造函数。

• remove(MindMap)

删除注册的主题。参数为simple-mind-map构造函数。

其他

如果你需要获取所有主题列表可以通过如下方式：

import themeList from 'simple-mind-map-plugin-themes/themeList'

themeList数据结构如下所示：

[
    {
        name: '暗色',// 主题名称
        value: 'dark',// 主题标识，实例化或动态设置主题时都是通过该值
        theme: {},// 主题具体的配置
        dark: true// 是否是暗色主题
    }
]

需要注意的这个包里不包括simple-mind-map自带的默认主题，所以你要渲染包括默认主题在内的所有主题列表时需要自己加上默认主题，比如：

[
    {
        name: '默认主题',
        value: 'default',
        dark: false
    },
    ...themeList
]

包里提供了每个主题的预览图片，要获取主题到图片的映射数据可以通过如下方式：

import themeImgMap from 'simple-mind-map-plugin-themes/themeImgMap'

如果要获取打包后的文件，可以在/node_modules/simple-mind-map-plugin-themes/dist/目录下获取，提供了两种打包格式的文件：

themes.cjs.min.js
themes.esm.min.js

贡献主题

所有主题都是基于默认主题扩展的，注册时会和默认主题进行合并。

主题整体分为暗色和亮色，分别在/src/dark/和/src/light/目录下定义，文件定义完成后需要在各自目录的index.js文件中导出。

推荐附带一张预览图，可以在/src/imgs/找到现有主题的预览图片，如果添加了图片可以在themeImgMap.js文件中导出。

主题列表

所有可用主题可以从暗色主题列表和亮色主题列表两个文件中查看。

通过CDN的方式使用

UMD格式

如果你是通过UMD格式使用的simple-mind-map，比如：

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/simpleMindMap.esm.css"/>
<script src="https://unpkg.com/[email protected]/dist/simpleMindMap.umd.min.js"></script>

那么可以引入仓库里dist/themes.iife.min.js文件使用：

<!--复制到你项目中引用-->
<script src="/themes.iife.min.js"></script>
<!--或用在线cdn-->
<script src="https://unpkg.com/[email protected]/dist/themes.iife.min.js"></script>
<!--实例化-->
<script>
    window.simpleMindMapPluginThemes.default.init(window.simpleMindMap.default);
    new window.simpleMindMap.default({
        el: document.querySelector('#app'),
        theme: "classic7",
        data: {
            data: {
                text: "根节点",
            },
            children: [],
        },
    });
</script>

ESM格式

如果你是通过ESM格式使用的simple-mind-map，比如：

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/simpleMindMap.esm.css"/>
<script src="https://unpkg.com/[email protected]/dist/simpleMindMap.esm.js" type="module"></script>

那么可以引入仓库里dist/themes.esm.min.js文件使用：

<!--复制到你项目中引用-->
<script src="/themes.esm.min.js" type="module"></script>
<!--或用在线cdn-->
<script src="https://unpkg.com/[email protected]/dist/themes.esm.min.js" type="module"></script>
<!--实例化-->
<script type="module">
    import MindMap from "simple-mind-map";
    import Themes from "simple-mind-map-plugin-themes";

    Themes.init(MindMap);
    new MindMap({
        el: document.querySelector('#app2'),
        theme: "classic7",
        data: {
            data: {
            text: "根节点",
            },
            children: [],
        },
    });
</script>