Change: Unified export method format, using FileReader instead of URL.createObjectURL to convert blob data.
optimization: 1.The position setting is not triggered when the node position does not change. 2.The unfolding and folding status does not change and does not trigger button updates.
New: 1.The default setting is to move the mouse over the node to display the expand and collapse buttons. 2.Support the list of icons that can be inserted into extended nodes.
diff --git a/web/src/pages/Doc/en/doExport/index.md b/web/src/pages/Doc/en/doExport/index.md index 03617a03..a1226829 100644 --- a/web/src/pages/Doc/en/doExport/index.md +++ b/web/src/pages/Doc/en/doExport/index.md @@ -15,14 +15,35 @@ After registration and instantiation of `MindMap`, the instance can be obtained ## Methods +All exported methods are asynchronous and return an instance of `Promise`. You can use the `then` method to obtain data, or use the `async await` function to obtain: + +```js +mindMap.doExport.png().then((data) => { + // ... +}) + +const export = async () => { + let data = await mindMap.doExport.png() + // ... +} +``` + +The returned data is in the format of `data:URL`. You can create an `a` tag to trigger the download: + +```js +let a = document.createElement('a') +a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm +a.download = 'xxx' +a.click() +``` + ### png(name, transparent = false) - `name`: Name, optional - `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent -Exports as `png`, an async method that returns image data, `data:url` data which -can be downloaded or displayed. +Exports as `png`. ### svg(name, plusCssText) @@ -42,20 +63,7 @@ svg( ) ``` -Exports as `svg`, an async method that returns `svg` data, `data:url` data which -can be downloaded or displayed. - -### getSvgData() - -Gets `svg` data, an async method that returns an object: - -```js -{ - node; // svg object - str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image - nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null -} -``` +Exports as `svg`. ### pdf(name) @@ -63,7 +71,7 @@ Gets `svg` data, an async method that returns an object: `name`：File name -Export as `pdf` +Export as `pdf`. Unlike other export methods, this method does not return data and directly triggers the download. ### json(name, withConfig) @@ -71,10 +79,21 @@ Export as `pdf` `withConfig``：Boolean`, default `true`, Whether the data contains configuration, otherwise it is pure mind map node data -Return `json` data, `data:url` type, you can download it yourself +Return `json` data. ### md() > v0.4.7+ -Export as `markdown` file, Return `json` data, `data:url` type, you can download it yourself \ No newline at end of file +Export as `markdown` file. + +### getSvgData() + +Gets `svg` data, an async method that returns an object: + +```js +{ + node // svg node + str // svg string +} +``` \ No newline at end of file diff --git a/web/src/pages/Doc/en/doExport/index.vue b/web/src/pages/Doc/en/doExport/index.vue index 3801e299..785e0525 100644 --- a/web/src/pages/Doc/en/doExport/index.vue +++ b/web/src/pages/Doc/en/doExport/index.vue @@ -10,6 +10,22 @@ MindMap.usePlugin(Export)After registration and instantiation of MindMap, the instance can be obtained through mindMap.doExport.
All exported methods are asynchronous and return an instance of Promise. You can use the then method to obtain data, or use the async await function to obtain:
mindMap.doExport.png().then((data) => {
+ // ...
+})
+
+const export = async () => {
+ let data = await mindMap.doExport.png()
+ // ...
+}
+The returned data is in the format of data:URL. You can create an a tag to trigger the download:
let a = document.createElement('a')
+a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm
+a.download = 'xxx'
+a.click()
+transparent: v0.5.7+, Specify whether the background of the exported image is transparent
Exports as png, an async method that returns image data, data:url data which
-can be downloaded or displayed.
Exports as png.
Exports as svg, an async method that returns svg data, data:url data which
-can be downloaded or displayed.
Gets svg data, an async method that returns an object:
{
- node; // svg object
- str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
- nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
-}
-Exports as svg.
v0.2.1+
name：File name
Export as pdf
Export as pdf. Unlike other export methods, this method does not return data and directly triggers the download.
name：It is temporarily useless, just pass an empty string
withConfig``：Boolean, default true, Whether the data contains configuration, otherwise it is pure mind map node data
Return json data, data:url type, you can download it yourself
Return json data.
-v0.4.7+
Export as markdown file, Return json data, data:url type, you can download it yourself
Export as markdown file.
Gets svg data, an async method that returns an object:
{
+ node // svg node
+ str // svg string
+}
+1.simple-mind-map
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap...
These open-source mind maps are also good, each with its own characteristics, but they also have certain drawbacks, such as stopping updates, average interface aesthetics, less functionality, relying on a certain framework, and so on.
In summary, in open-source mind maps, it is difficult to find a better choice than simple-mind-map. Of course, simple-mind-map is far from being the best, and it also has many shortcomings, as you saw in the previous [special note]. However, simple-mind-map has always been in a fast iteration process, and we welcome you to join and improve it together.
We recommend using the latest version of the Chrome browser.
Limited testing situation:
+Normal operation: 360 extreme speed browser（v13.5.2036.0）、opera browser（v71.0.3770.284）。
Abnormal operation: Firefox（v98.0.2）, Node content cannot be displayed in rich text mode. If you want to support the Firefox browser, please use non rich text mode.
Unsupported: IE browser.
data of the data object, example:
Measure the width and height of the text, return value:
{ width, height }
Extract plain text content from an HTML string.
+++v0.5.9+
+
Convert blob data to data:url data.
Import:
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index cf8544bd..7dd49881 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,9 @@
# Changelog
+## 0.5.9
+
+修改：统一导出方法的格式，使用`FileReader`代替`URL.createObjectURL`转换`blob`数据。
+
## 0.5.8
优化：1.节点位置没有变化不触发位置设置。 2.展开收起状态没有变化不触发按钮更新。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 6de19b3e..ee455044 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,8 @@
Changelog
+0.5.9
+修改：统一导出方法的格式，使用FileReader代替URL.createObjectURL转换blob数据。
0.5.8
优化：1.节点位置没有变化不触发位置设置。 2.展开收起状态没有变化不触发按钮更新。
新增：1.默认改为鼠标移上节点才显示展开收起按钮。 2.支持扩展节点可插入的图标列表。
diff --git a/web/src/pages/Doc/zh/course17/index.md b/web/src/pages/Doc/zh/course17/index.md
index 9fd1156b..551a863b 100644
--- a/web/src/pages/Doc/zh/course17/index.md
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -8,7 +8,17 @@
`.smm`是`simple-mind-map`自己定义的一种文件，其实就是`json`文件，换了一个扩展名而已。
-导出直接调用`export`方法即可。
+导出直接调用`export`方法即可：
+
+```js
+mindMap.export(type, isDownload, fileName, ...)
+```
+
+`type`：文件类型
+
+`isDownload`：传`true`会触发下载，`false`则不会，函数会返回导出文件的数据，`data:url`格式，你可以自行下载，`pdf`不支持该参数，默认会直接下载。
+
+`fileName`：下载的文件名称
### 导出为smm、json
diff --git a/web/src/pages/Doc/zh/course17/index.vue b/web/src/pages/Doc/zh/course17/index.vue
index c332dd02..88b7ed21 100644
--- a/web/src/pages/Doc/zh/course17/index.vue
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -7,7 +7,12 @@
目前支持导出为.smm、.json、.svg、.png、.pdf、.md文件。
.smm是simple-mind-map自己定义的一种文件，其实就是json文件，换了一个扩展名而已。
-导出直接调用export方法即可。
+导出直接调用export方法即可：
+mindMap.export(type, isDownload, fileName, ...)
+
+type：文件类型
+isDownload：传true会触发下载，false则不会，函数会返回导出文件的数据，data:url格式，你可以自行下载，pdf不支持该参数，默认会直接下载。
+fileName：下载的文件名称
导出为smm、json
这两种文件的导出是一样的：
mindMap.export(type, isDownload, fileName, withConfig)
diff --git a/web/src/pages/Doc/zh/doExport/index.md b/web/src/pages/Doc/zh/doExport/index.md
index 56d9c37a..14e753fa 100644
--- a/web/src/pages/Doc/zh/doExport/index.md
+++ b/web/src/pages/Doc/zh/doExport/index.md
@@ -15,13 +15,35 @@ MindMap.usePlugin(Export)
## 方法
+所有导出的方法都是异步方法，返回一个`Promise`实例，你可以使用`then`方法获取数据，或者使用`async await`函数获取：
+
+```js
+mindMap.doExport.png().then((data) => {
+ // ...
+})
+
+const export = async () => {
+ let data = await mindMap.doExport.png()
+ // ...
+}
+```
+
+返回的数据为`data:url`格式的，你可以创建一个`a`标签来触发下载：
+
+```js
+let a = document.createElement('a')
+a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm
+a.download = 'xxx'
+a.click()
+```
+
### png(name, transparent = false)
- `name`：名称，可不传
- `transparent`：v0.5.7+，指定导出图片的背景是否是透明的
-导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
+导出为`png`。
### svg(name, plusCssText)
@@ -41,19 +63,7 @@ svg(
)
```
-导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
-
-### getSvgData()
-
-获取`svg`数据，异步方法，返回一个对象：
-
-```js
-{
- node// svg对象
- str// svg字符串，如果开启了富文本编辑且domToImage设为true，那么该值返回的svg字符内的dom节点会被转换成图片的形式
- nodeWithDomToImg// v0.4.0+，DOM节点转换为图片后的svg对象，只有当开启了富文本编辑且domToImage设为true才有值，否则为null
-}
-```
+导出为`svg`。
### pdf(name)
@@ -61,7 +71,7 @@ svg(
`name`：文件名称
-导出为`pdf`
+导出为`pdf`，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
### json(name, withConfig)
@@ -69,10 +79,25 @@ svg(
`withConfig``：Boolean`, 默认为`true`，数据中是否包含配置，否则为纯思维导图节点数据
-返回`json`数据，`data:url`数据，可以自行下载
+返回`json`数据。
+
+### smm(name, withConfig)
+
+`simple-mind-map`自定义的文件格式，其实就是`json`，和`json`方法返回的数据一模一样。
### md()
> v0.4.7+
-导出`markdown`文件，返回`data:url`数据，可以自行下载
\ No newline at end of file
+导出`markdown`文件。
+
+### getSvgData()
+
+获取`svg`数据，异步方法，返回一个对象：
+
+```js
+{
+ node// svg节点
+ str// svg字符串
+}
+```
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/doExport/index.vue b/web/src/pages/Doc/zh/doExport/index.vue
index 921125ec..d3c0074b 100644
--- a/web/src/pages/Doc/zh/doExport/index.vue
+++ b/web/src/pages/Doc/zh/doExport/index.vue
@@ -10,6 +10,22 @@ MindMap.usePlugin(Export)
注册完且实例化MindMap后可通过mindMap.doExport获取到该实例。
方法
+所有导出的方法都是异步方法，返回一个Promise实例，你可以使用then方法获取数据，或者使用async await函数获取：
+mindMap.doExport.png().then((data) => {
+ // ...
+})
+
+const export = async () => {
+ let data = await mindMap.doExport.png()
+ // ...
+}
+
+返回的数据为data:url格式的，你可以创建一个a标签来触发下载：
+let a = document.createElement('a')
+a.href = 'xxx.png'// .png、.svg、.pdf、.md、.json、.smm
+a.download = 'xxx'
+a.click()
+
png(name, transparent = false)
-
@@ -19,7 +35,7 @@ MindMap.usePlugin(Export)
transparent：v0.5.7+，指定导出图片的背景是否是透明的
-导出为png，异步方法，返回图片数据，data:url数据，可以自行下载或显示
+导出为png。
svg(name, plusCssText)
-
@@ -39,30 +55,31 @@ MindMap.usePlugin(Export)
}`
)
-
导出为svg，异步方法，返回svg数据，data:url数据，可以自行下载或显示
-getSvgData()
-获取svg数据，异步方法，返回一个对象：
-{
- node// svg对象
- str// svg字符串，如果开启了富文本编辑且domToImage设为true，那么该值返回的svg字符内的dom节点会被转换成图片的形式
- nodeWithDomToImg// v0.4.0+，DOM节点转换为图片后的svg对象，只有当开启了富文本编辑且domToImage设为true才有值，否则为null
-}
-
+导出为svg。
pdf(name)
v0.2.1+
name：文件名称
-导出为pdf
+导出为pdf，和其他导出方法不一样，这个方法不会返回数据，会直接触发下载。
json(name, withConfig)
name：暂时没有用处，传空字符串即可
withConfig``：Boolean, 默认为true，数据中是否包含配置，否则为纯思维导图节点数据
-返回json数据，data:url数据，可以自行下载
+返回json数据。
+smm(name, withConfig)
+simple-mind-map自定义的文件格式，其实就是json，和json方法返回的数据一模一样。
md()
v0.4.7+
-导出markdown文件，返回data:url数据，可以自行下载
+导出markdown文件。
+getSvgData()
+获取svg数据，异步方法，返回一个对象：
+{
+ node// svg节点
+ str// svg字符串
+}
+
diff --git a/web/src/pages/Doc/zh/introduction/index.md b/web/src/pages/Doc/zh/introduction/index.md
index 270bf24b..2331bb2f 100644
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -86,6 +86,17 @@
综上，在开源的思维导图中，你很难找到一个比`simple-mind-map`更好的选择。当然，`simple-mind-map`也远远谈不上最好，它也有很多不足，如你在前面的【特别说明】所看到的那样，不过`simple-mind-map`一直处于快速迭代中，欢迎你加入进来一起完善它。
+## 浏览器兼容性
+
+推荐使用最新版`chrome`浏览器。
+
+有限测试情况：
+
+正常运行：`360`极速浏览器（v13.5.2036.0）、`opera`浏览器（v71.0.3770.284）。
+
+非正常运行：`Firefox`（v98.0.2），富文本模式下节点内容无法显示，如果要支持`Firefox`浏览器，请使用非富文本模式。
+
+不支持：`IE`浏览器。
## License
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index df61c21b..47ae9f16 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -7,19 +7,19 @@
特性
-
-
-
-
-
-
-
-
-
-
-json、png、svg、pdf、markdown，支持从json、xmind、markdown导入json、png、svg、pdf、markdown，支持从json、xmind、markdown导入
仓库目录介绍
1.simple-mind-map
@@ -27,11 +27,11 @@
2.web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
-
-
-
-
-
+
+
+
+
+
提供文档页面服务。
3.dist
@@ -58,6 +58,12 @@
3.jsmind、Mind-elixir、my-mind、blink-mind、remind、vue3-mindmap、ZMindMap...
这些开源的思维导图也都不错，各有各的特点，但是它们也都有一定缺点，比如停止更新、界面美观度一般、功能比较少、依赖某个框架等等。
综上，在开源的思维导图中，你很难找到一个比simple-mind-map更好的选择。当然，simple-mind-map也远远谈不上最好，它也有很多不足，如你在前面的【特别说明】所看到的那样，不过simple-mind-map一直处于快速迭代中，欢迎你加入进来一起完善它。
+浏览器兼容性
+推荐使用最新版chrome浏览器。
+有限测试情况：
+正常运行：360极速浏览器（v13.5.2036.0）、opera浏览器（v71.0.3770.284）。
+非正常运行：Firefox（v98.0.2），富文本模式下节点内容无法显示，如果要支持Firefox浏览器，请使用非富文本模式。
+不支持：IE浏览器。
License
请作者喝杯咖啡
diff --git a/web/src/pages/Doc/zh/utils/index.md b/web/src/pages/Doc/zh/utils/index.md
index a0e5a9d7..8b60470a 100644
--- a/web/src/pages/Doc/zh/utils/index.md
+++ b/web/src/pages/Doc/zh/utils/index.md
@@ -124,6 +124,16 @@ copyNodeTree({}, node)
{ width, height }
```
+#### getTextFromHtml(html)
+
+提取html字符串里的纯文本内容。
+
+#### readBlob(blob)
+
+> v0.5.9+
+
+将`blob`数据转成`data:url`数据。
+
## 在canvas中模拟css的背景属性
引入：
diff --git a/web/src/pages/Doc/zh/utils/index.vue b/web/src/pages/Doc/zh/utils/index.vue
index b671d0c8..ff574d4f 100644
--- a/web/src/pages/Doc/zh/utils/index.vue
+++ b/web/src/pages/Doc/zh/utils/index.vue
@@ -77,6 +77,13 @@
测量文本的宽高，返回值：
{ width, height }
+getTextFromHtml(html)
+提取html字符串里的纯文本内容。
+readBlob(blob)
+
+v0.5.9+
+
+将blob数据转成data:url数据。
在canvas中模拟css的背景属性
引入：
import drawBackgroundImageToCanvas from 'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'
diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue
index 3a9b879d..e0e290f3 100644
--- a/web/src/pages/Edit/components/Export.vue
+++ b/web/src/pages/Edit/components/Export.vue
@@ -62,7 +62,6 @@
{{ $t('export.tips') }}
- {{ $t('export.svgTips') }}