diff --git a/README.md b/README.md index 873f64c9..60635fdb 100644 --- a/README.md +++ b/README.md @@ -11,19 +11,17 @@ 本项目包含两部分： -1.一个 js 思维导图库，不依赖任何框架，你可以使用它来快速完成 Web 思维导图产品的开发。 +1.一个 js 思维导图库，不依赖任何框架，可以使用它来快速完成 Web 思维导图产品的开发。 开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)。 -2.一个 Web 思维导图，基于思维导图库、Vue2.x、ElementUI 开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得 github 的响应速度慢，你也可以部署到你的服务器上。 +2.一个 Web 思维导图，基于思维导图库、Vue2.x、ElementUI 开发，可以操作电脑本地文件，可以当做一个在线版思维导图应用使用，也可以自部署和二次开发。 在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)。 -另外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址： +此外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址： -Github：[releases](https://github.com/wanglin2/mind-map/releases)。 - -百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。 +Github：[releases](https://github.com/wanglin2/mind-map/releases)。百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。 > 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。 @@ -310,4 +308,12 @@ const mindMap = new MindMap({ 逆水行舟 + + + LiuJL + + + + L +

diff --git a/web/src/assets/avatar/L.jpg b/web/src/assets/avatar/L.jpg new file mode 100644 index 00000000..91165675 Binary files /dev/null and b/web/src/assets/avatar/L.jpg differ diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 62917dd5..3e20fd86 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -23,12 +23,16 @@ New: > 7.Adding mouse events to personnel avatars during collaborative editing; > > 8.Instantiation and setData methods support passing in empty data; +> +> 9.Add an instantiation option for adding custom content when exporting images; Demo: > 1.Support configuration of rainbow lines; > > 2.Add source code editing mode; +> +> 3.Exporting PNG, PDF, and SVG supports setting custom text at the bottom; Client: diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 6df08bb8..e532623d 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -16,11 +16,13 @@

6.Add the getAncestorNodes method to the node instance to obtain the list of ancestor nodes;

7.Adding mouse events to personnel avatars during collaborative editing;

8.Instantiation and setData methods support passing in empty data;

+

9.Add an instantiation option for adding custom content when exporting images;

Demo:

1.Support configuration of rainbow lines;

2.Add source code editing mode;

+

3.Exporting PNG, PDF, and SVG supports setting custom text at the bottom;

Client:

diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index 3026151a..c786f714 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -114,8 +114,10 @@ const mindMap = new MindMap({ | isOnlySearchCurrentRenderNodes（v0.9.8+） | Boolean | false | Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for | | | onlyOneEnableActiveNodeOnCooperate（v0.9.8+） | Boolean | false | During collaborative editing, the same node cannot be selected by multiple people at the same time | | | beforeCooperateUpdate（v0.9.8+） | Function、null | null | During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } | | -| beforeShortcutRun（v0.9.9+） | Function、null | null | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） | -| rainbowLinesConfig（v0.9.9+） | Object | { open: false, colorsList: [] } | Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } | +| beforeShortcutRun（v0.9.9+） | Function、null | null | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） | | +| rainbowLinesConfig（v0.9.9+） | Object | { open: false, colorsList: [] } | Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } | | +| addContentToHeader（v0.9.9+） | Function、null | null | Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below | | +| addContentToFooter（v0.9.9+） | Function、null | null | The basic definition is the same as addContentToHeader, adding custom content at the end | | ### Data structure @@ -177,6 +179,41 @@ If you want to add custom fields, you can add them to the same level as 'data' a | type | String | | Values for icon grouping | | list | Array | | A list of icons under grouping, with each item in the array being an object, `{ name: '', icon: '' }`，`name`represents the name of the icon, `icon`represents the icon, Can be an `svg` icon, such as ``, also can be a image `url`, or `base64` icon, such as `data:image/png;base64,...` | +### How to add custom content when exporting + +The two instantiation options `addContentToHeader` and `addContentToFooter` can be used to add custom content at the beginning and end when exporting `png`、`svg`、`pdf`, The default value is `null`, which means no configuration. A function can be passed and can return `null`, which means no content will be added. If you want to add content, you need to return the following structure: + +``` +{ + el,// Custom DOM node to be added, styles can be inline + cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string + height: 50// The height of the returned DOM node must be passed +} +``` + +A simple example: + +```js +new MindMap({ + addContentToFooter: () => { + const el = document.createElement('div') + el.className = 'footer' + el.innerHTML = 'From: simple-mind-map' + const cssText = ` + .footer { + width: 100%; + height: 30px; + } + ` + return { + el, + cssText, + height: 30 + } + } +}) +``` + ## Static methods ### defineTheme(name, config) @@ -334,7 +371,7 @@ Clear `lineDraw`、`associativeLineDraw`、`nodeDraw`、`otherDraw` containers. Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas. -### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false }) +### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter }) > v0.3.0+ @@ -344,6 +381,10 @@ Destroy mind maps. It will remove registered plugins, remove listening events, a `ignoreWatermark`：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow +`addContentToHeader`：v0.9.9+, Function, You can return the custom content to be added to the header, as detailed in the configuration in 【Instantiation options】 + +`addContentToFooter`：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】 + Get the `svg` data and return an object. The detailed structure is as follows: ```js diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 7c79c91a..d19ab47e 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -672,6 +672,20 @@ Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } + +addContentToHeader（v0.9.9+） +Function、null +null +Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below + + + +addContentToFooter（v0.9.9+） +Function、null +null +The basic definition is the same as addContentToHeader, adding custom content at the end + +

Data structure

@@ -790,6 +804,34 @@ +

How to add custom content when exporting

+

The two instantiation options addContentToHeader and addContentToFooter can be used to add custom content at the beginning and end when exporting png、svg、pdf, The default value is null, which means no configuration. A function can be passed and can return null, which means no content will be added. If you want to add content, you need to return the following structure:

+
{
+  el,// Custom DOM node to be added, styles can be inline
+  cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string
+  height: 50// The height of the returned DOM node must be passed
+}
+
+

A simple example:

+
new MindMap({
+  addContentToFooter: () => {
+    const el = document.createElement('div')
+    el.className = 'footer'
+    el.innerHTML = 'From: simple-mind-map'
+    const cssText = `
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `
+    return {
+      el,
+      cssText,
+      height: 30
+    }
+  }
+})
+

Static methods

defineTheme(name, config)

@@ -901,13 +943,15 @@ mindMap.setTheme('Theme name')

v0.6.0+

Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.

-

getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })

+

getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })

v0.3.0+

paddingX: Padding x

paddingY: Padding y

ignoreWatermark：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow

+

addContentToHeader：v0.9.9+, Function, You can return the custom content to be added to the header, as detailed in the configuration in 【Instantiation options】

+

addContentToFooter：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】

Get the svg data and return an object. The detailed structure is as follows:

{
   svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
diff --git a/web/src/pages/Doc/en/introduction/index.md b/web/src/pages/Doc/en/introduction/index.md
index 6d8af046..d7f1fab8 100644
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -343,4 +343,12 @@ Open source is not easy. If this project is helpful to you, you can invite the a
         
         
逆水行舟

     
+    

+        
+        
LiuJL

+    

+    

+        
+        
L

+    

 
\ No newline at end of file
diff --git a/web/src/pages/Doc/en/introduction/index.vue b/web/src/pages/Doc/en/introduction/index.vue
index 9a7be0c3..cc100182 100644
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -8,17 +8,17 @@

Features

Features that will not be implemented:

@@ -34,16 +34,16 @@ frameworks such as Vue and React, or without a framework.

This is an online mind map built using the simple-mind-map library and based on Vue2.x and ElementUI. Features include:

@@ -297,6 +297,14 @@ full screen, support mini map

逆水行舟

+
+ +

LiuJL

+
+
+ +

L

+
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md index 560fd568..a4d8f3c8 100644 --- a/web/src/pages/Doc/zh/changelog/index.md +++ b/web/src/pages/Doc/zh/changelog/index.md @@ -23,12 +23,16 @@ > 7.协同编辑时的人员头像增加鼠标事件； > > 8.实例化及setData方法支持传入空的data； +> +> 9.新增导出图片时添加自定义内容的实例化选项； Demo： > 1.支持配置彩虹线条； > > 2.新增源码编辑模式； +> +> 3.导出png、pdf、svg支持设置底部自定义文字； 客户端: diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue index b99f319e..8b00af65 100644 --- a/web/src/pages/Doc/zh/changelog/index.vue +++ b/web/src/pages/Doc/zh/changelog/index.vue @@ -16,11 +16,13 @@

6.节点实例新增getAncestorNodes方法用于获取祖先节点列表；

7.协同编辑时的人员头像增加鼠标事件；

8.实例化及setData方法支持传入空的data；

+

9.新增导出图片时添加自定义内容的实例化选项；

Demo：

1.支持配置彩虹线条；

2.新增源码编辑模式；

+

3.导出png、pdf、svg支持设置底部自定义文字；

客户端:

diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index d493f0f8..cb60b97c 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -115,6 +115,8 @@ const mindMap = new MindMap({ | beforeCooperateUpdate（v0.9.8+） | Function、null | null | 协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } | | beforeShortcutRun（v0.9.9+） | Function、null | null | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） | | rainbowLinesConfig（v0.9.9+） | Object | { open: false, colorsList: [] } | 彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } | +| addContentToHeader（v0.9.9+） | Function、null | null | 导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 | +| addContentToFooter（v0.9.9+） | Function、null | null | 基本释义同addContentToHeader，在尾部添加自定义内容 | ### 数据结构 @@ -177,6 +179,41 @@ const mindMap = new MindMap({ | type | String | | 图标分组的值 | | list | Array | | 分组下的图标列表，数组的每一项为一个对象，`{ name: '', icon: '' }`，`name`代表图标的名称，`icon`代表图标，可以是`svg`图标，比如``，也可以是图片`url`，或者是`base64`图标，比如`data:image/png;base64,...` | +### 导出时如何添加自定义内容 + +`addContentToHeader`和`addContentToFooter`两个实例化选项可以用于在导出`png`、`svg`、`pdf`时在头部和尾部添加自定义的内容，默认为`null`，代表不配置，可以传递一个函数，函数可以返回`null`，代表不添加内容，如果要添加内容那么需要返回如下的结构： + +``` +{ + el,// 要追加的自定义DOM节点，样式可内联 + cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串 + height: 50// 返回的DOM节点的高度，必须传递 +} +``` + +一个简单的示例： + +```js +new MindMap({ + addContentToFooter: () => { + const el = document.createElement('div') + el.className = 'footer' + el.innerHTML = '来自：simple-mind-map' + const cssText = ` + .footer { + width: 100%; + height: 30px; + } + ` + return { + el, + cssText, + height: 30 + } + } +}) +``` + ## 静态方法 ### defineTheme(name, config) @@ -334,7 +371,7 @@ mindMap.setTheme('主题名称') 销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。 -### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false }) +### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter }) > v0.3.0+ @@ -344,6 +381,10 @@ mindMap.setTheme('主题名称') `ignoreWatermark`：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传`true`，因为绘制水印非常慢 +`addContentToHeader`：v0.9.9+，Function，可以返回要追加到头部的自定义内容，详细介绍见【实例化选项】中的该配置 + +`addContentToFooter`：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置 + 获取`svg`数据，返回一个对象，详细结构如下： ```js diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index 3ad712e4..57a82ce7 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -573,6 +573,18 @@ { open: false, colorsList: [] } 彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } + +addContentToHeader（v0.9.9+） +Function、null +null +导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 + + +addContentToFooter（v0.9.9+） +Function、null +null +基本释义同addContentToHeader，在尾部添加自定义内容 +

数据结构

@@ -691,6 +703,34 @@ +

导出时如何添加自定义内容

+

addContentToHeader和addContentToFooter两个实例化选项可以用于在导出png、svg、pdf时在头部和尾部添加自定义的内容，默认为null，代表不配置，可以传递一个函数，函数可以返回null，代表不添加内容，如果要添加内容那么需要返回如下的结构：

+
{
+  el,// 要追加的自定义DOM节点，样式可内联
+  cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
+  height: 50// 返回的DOM节点的高度，必须传递
+}
+
+

一个简单的示例：

+
new MindMap({
+  addContentToFooter: () => {
+    const el = document.createElement('div')
+    el.className = 'footer'
+    el.innerHTML = '来自：simple-mind-map'
+    const cssText = `
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `
+    return {
+      el,
+      cssText,
+      height: 30
+    }
+  }
+})
+

静态方法

defineTheme(name, config)

@@ -802,13 +842,15 @@ mindMap.setTheme('主题名称')

v0.6.0+

销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。

-

getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })

+

getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })

v0.3.0+

paddingX：水平内边距

paddingY：垂直内边距

ignoreWatermark：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传true，因为绘制水印非常慢

+

addContentToHeader：v0.9.9+，Function，可以返回要追加到头部的自定义内容，详细介绍见【实例化选项】中的该配置

+

addContentToFooter：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置

获取svg数据，返回一个对象，详细结构如下：

{
   svg, // Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index f08408a8..8c7ba2f8 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -336,4 +336,12 @@
         
         
逆水行舟

     
+    

+        
+        
LiuJL

+    

+    

+        
+        
L

+    

 
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index 28d20c77..f1258cf1 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -8,17 +8,17 @@

特性

不会实现的特性：

@@ -32,11 +32,11 @@

2.web

使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：

    -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +

提供文档页面服务。

3.dist

@@ -291,6 +291,14 @@

逆水行舟

+
+ +

LiuJL

+
+
+ +

L

+