mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-17 22:08:25 +08:00
Compare commits
23 Commits
0.6.15-fix
...
0.6.17
| Author | SHA1 | Date | |
|---|---|---|---|
|
4ce9533763 | ||
|
|
43ecdafdd1 | ||
|
|
5ff8704778 | ||
|
|
d206d6dd99 | ||
|
|
850b9ed936 | ||
|
|
26508b5a62 | ||
|
|
061c82459e | ||
|
|
d2bf5be7c7 | ||
|
b726aa30e5 | ||
|
|
6546ec090e | ||
|
|
4dc5754f1d | ||
|
|
7f199e6c2f | ||
|
|
2548ac4eb4 | ||
|
|
60e503ab1f | ||
|
|
c718cbc030 | ||
|
|
beb2b550f0 | ||
|
|
d3e1389f10 | ||
|
|
68cb24c0b6 | ||
|
|
e3959107bd | ||
|
|
4b3c81ab91 | ||
|
|
76b5d9d11d | ||
|
|
22d0fe5ac4 | ||
|
|
8b8d549abd |
14
README.md
14
README.md
@@ -97,7 +97,7 @@ const mindMap = new MindMap({
|
||||
|
||||
> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
|
||||
|
||||
> 转账请备注【思维导图】。你的头像和名字将会出现在下面和[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
|
||||
> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。你的头像和名字将会出现在下面和[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
|
||||
|
||||
<p>
|
||||
<img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
|
||||
@@ -153,4 +153,16 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/才镇.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>才镇</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/小米.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>小米bbᯤ²ᴳ</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/棐.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>*棐</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>Luke</span>
|
||||
</span>
|
||||
</p>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
|
||||
window.externalPublicPath = './dist/'
|
||||
// 接管应用
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?c6f9dda3bfa8385d51f4" rel="stylesheet"><link href="dist/css/app.css?c6f9dda3bfa8385d51f4" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?3f27c97d35a340dfd1c0" rel="stylesheet"><link href="dist/css/app.css?3f27c97d35a340dfd1c0" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@@ -66,4 +66,4 @@
|
||||
// 可以通过window.$bus.$on()来监听应用的一些事件
|
||||
// 实例化页面
|
||||
window.initApp()
|
||||
}</script><script src="dist/js/chunk-vendors.js?c6f9dda3bfa8385d51f4"></script><script src="dist/js/app.js?c6f9dda3bfa8385d51f4"></script></body></html>
|
||||
}</script><script src="dist/js/chunk-vendors.js?3f27c97d35a340dfd1c0"></script><script src="dist/js/app.js?3f27c97d35a340dfd1c0"></script></body></html>
|
||||
BIN
qrcode.jpg
BIN
qrcode.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
14
simple-mind-map/index.d.ts
vendored
Normal file
14
simple-mind-map/index.d.ts
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
// declare module "simple-mind-map";
|
||||
declare module 'simple-mind-map'{
|
||||
class MindMap {
|
||||
constructor(opt:any);
|
||||
handleOpt(opt:any):void;
|
||||
render(callback:any, source:string):void;
|
||||
reRender(callback:any, source:string):void;
|
||||
resize():void;
|
||||
on(event:any, fn:any):void;
|
||||
setFullData(data:any):void;
|
||||
getData(withConfig:any):any;
|
||||
}
|
||||
export default MindMap;
|
||||
}
|
||||
@@ -291,7 +291,7 @@ class MindMap {
|
||||
let result = await this.doExport.export(...args)
|
||||
return result
|
||||
} catch (error) {
|
||||
this.mindMap.opt.errorHandler(ERROR_TYPES.EXPORT_ERROR, error)
|
||||
this.opt.errorHandler(ERROR_TYPES.EXPORT_ERROR, error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
simple-mind-map/package-lock.json
generated
15
simple-mind-map/package-lock.json
generated
@@ -1,16 +1,15 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.6.13",
|
||||
"version": "0.6.15-fix.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "0.6.13",
|
||||
"version": "0.6.15-fix.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"deepmerge": "^1.5.2",
|
||||
"dom-to-image-more": "^3.1.6",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"jspdf": "^2.5.1",
|
||||
"jszip": "^3.10.1",
|
||||
@@ -518,11 +517,6 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dom-to-image-more": {
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz",
|
||||
"integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA=="
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
|
||||
@@ -2660,11 +2654,6 @@
|
||||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-to-image-more": {
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.1.6.tgz",
|
||||
"integrity": "sha512-VMO0jNme32T06mWtkOC9QXfj+1npoJxkaTFW0DCwBLguwBKMjqwndiDANxDnbZ0kvNEecwxkv0Zmgdr96cGtAA=="
|
||||
},
|
||||
"dompurify": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.1.tgz",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.6.15-fix.1",
|
||||
"version": "0.6.17",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
@@ -26,7 +26,6 @@
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"deepmerge": "^1.5.2",
|
||||
"dom-to-image-more": "^3.1.6",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"jspdf": "^2.5.1",
|
||||
"jszip": "^3.10.1",
|
||||
|
||||
@@ -155,5 +155,16 @@ export const defaultOpt = {
|
||||
// 错误处理函数
|
||||
errorHandler: (code, error) => {
|
||||
console.error(code, error)
|
||||
}
|
||||
},
|
||||
// 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖
|
||||
// 如果不覆盖，会发生偏移问题
|
||||
resetCss: `
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`,
|
||||
// 开启鼠标双击复位思维导图位置及缩放
|
||||
enableDblclickReset: true
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@ function createIconNode() {
|
||||
|
||||
// 创建富文本节点
|
||||
function createRichTextNode() {
|
||||
const { textAutoWrapWidth } = this.mindMap.opt
|
||||
let g = new G()
|
||||
// 重新设置富文本节点内容
|
||||
let recoverText = false
|
||||
@@ -119,15 +120,16 @@ function createRichTextNode() {
|
||||
let html = `<div>${this.nodeData.data.text}</div>`
|
||||
if (!commonCaches.measureRichtextNodeTextSizeEl) {
|
||||
commonCaches.measureRichtextNodeTextSizeEl = document.createElement('div')
|
||||
commonCaches.measureRichtextNodeTextSizeEl.style.position = 'fixed'
|
||||
commonCaches.measureRichtextNodeTextSizeEl.style.left = '-999999px'
|
||||
this.mindMap.el.appendChild(commonCaches.measureRichtextNodeTextSizeEl)
|
||||
}
|
||||
let div = commonCaches.measureRichtextNodeTextSizeEl
|
||||
div.innerHTML = html
|
||||
div.style.cssText = `position: fixed; left: -999999px;`
|
||||
let el = div.children[0]
|
||||
el.classList.add('smm-richtext-node-wrap')
|
||||
el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
|
||||
el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
|
||||
this.mindMap.el.appendChild(div)
|
||||
el.style.maxWidth = textAutoWrapWidth + 'px'
|
||||
let { width, height } = el.getBoundingClientRect()
|
||||
// 如果文本为空，那么需要计算一个默认高度
|
||||
if (height <= 0) {
|
||||
@@ -140,11 +142,10 @@ function createRichTextNode() {
|
||||
height = Math.ceil(height)
|
||||
g.attr('data-width', width)
|
||||
g.attr('data-height', height)
|
||||
html = div.innerHTML
|
||||
let foreignObject = new ForeignObject()
|
||||
foreignObject.width(width)
|
||||
foreignObject.height(height)
|
||||
foreignObject.add(SVG(html))
|
||||
foreignObject.add(div.children[0])
|
||||
g.add(foreignObject)
|
||||
return {
|
||||
node: g,
|
||||
|
||||
@@ -32,6 +32,7 @@ class View {
|
||||
this.fit()
|
||||
})
|
||||
this.mindMap.svg.on('dblclick', () => {
|
||||
if (!this.mindMap.opt.enableDblclickReset) return
|
||||
this.reset()
|
||||
})
|
||||
// 拖动视图
|
||||
|
||||
@@ -14,11 +14,13 @@ const parseXmindFile = file => {
|
||||
async zip => {
|
||||
try {
|
||||
let content = ''
|
||||
if (zip.files['content.json']) {
|
||||
let json = await zip.files['content.json'].async('string')
|
||||
let jsonFile = zip.files['content.json']
|
||||
let xmlFile = zip.files['content.xml'] || zip.files['/content.xml']
|
||||
if (jsonFile) {
|
||||
let json = await jsonFile.async('string')
|
||||
content = await transformXmind(json, zip.files)
|
||||
} else if (zip.files['content.xml']) {
|
||||
let xml = await zip.files['content.xml'].async('string')
|
||||
} else if (xmlFile) {
|
||||
let xml = await xmlFile.async('string')
|
||||
let json = xmlConvert.xml2json(xml)
|
||||
content = transformOldXmind(json)
|
||||
}
|
||||
@@ -187,7 +189,7 @@ const transformOldXmind = content => {
|
||||
if (_children && _children.elements && _children.elements.length > 0) {
|
||||
_children.elements.forEach(item => {
|
||||
if (item.name === 'topics') {
|
||||
item.elements.forEach(item2 => {
|
||||
(item.elements || []).forEach(item2 => {
|
||||
let newChild = {}
|
||||
newNode.children.push(newChild)
|
||||
walk(item2, newChild)
|
||||
|
||||
@@ -39,6 +39,10 @@ class Export {
|
||||
let imageList = svg.find('image')
|
||||
let task = imageList.map(async item => {
|
||||
let imgUlr = item.attr('href') || item.attr('xlink:href')
|
||||
// 已经是data:URL形式不用转换
|
||||
if (/^data:/.test(imgUlr)) {
|
||||
return
|
||||
}
|
||||
let imgData = await imgToDataUrl(imgUlr)
|
||||
item.attr('href', imgData)
|
||||
})
|
||||
@@ -180,13 +184,20 @@ class Export {
|
||||
str = removeHTMLEntities(str)
|
||||
// 如果开启了富文本，则使用htmltocanvas转换为图片
|
||||
if (this.mindMap.richText) {
|
||||
let res = await this.mindMap.richText.handleExportPng(node.node)
|
||||
let imgDataUrl = await this.svgToPng(
|
||||
res,
|
||||
transparent,
|
||||
rotateWhenWidthLongerThenHeight
|
||||
)
|
||||
return imgDataUrl
|
||||
// 覆盖html默认的样式
|
||||
let foreignObjectList = node.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
|
||||
}
|
||||
str = node.svg()
|
||||
// 使用其他库（html2canvas、dom-to-image-more等）来完成导出
|
||||
// let res = await this.mindMap.richText.handleExportPng(node.node)
|
||||
// let imgDataUrl = await this.svgToPng(
|
||||
// res,
|
||||
// transparent,
|
||||
// rotateWhenWidthLongerThenHeight
|
||||
// )
|
||||
// return imgDataUrl
|
||||
}
|
||||
// 转换成blob数据
|
||||
let blob = new Blob([str], {
|
||||
@@ -225,15 +236,13 @@ class Export {
|
||||
|
||||
// 导出为svg
|
||||
// plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
|
||||
async svg(name, plusCssText) {
|
||||
async svg(name) {
|
||||
let { node } = await this.getSvgData()
|
||||
// 开启了节点富文本编辑
|
||||
if (this.mindMap.richText) {
|
||||
if (plusCssText) {
|
||||
let foreignObjectList = node.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${plusCssText}</style>`))
|
||||
}
|
||||
let foreignObjectList = node.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
|
||||
}
|
||||
}
|
||||
node.first().before(SVG(`<title>${name}</title>`))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Quill from 'quill'
|
||||
import Delta from 'quill-delta'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import domtoimage from 'dom-to-image-more'
|
||||
import {
|
||||
walk,
|
||||
getTextFromHtml,
|
||||
@@ -43,6 +43,7 @@ class RichText {
|
||||
this.quill = null
|
||||
this.range = null
|
||||
this.lastRange = null
|
||||
this.pasteUseRange = null
|
||||
this.node = null
|
||||
this.isInserting = false
|
||||
this.styleEl = null
|
||||
@@ -329,6 +330,7 @@ class RichText {
|
||||
this.lastRange = this.range
|
||||
this.range = null
|
||||
if (range) {
|
||||
this.pasteUseRange = range
|
||||
let bounds = this.quill.getBounds(range.index, range.length)
|
||||
let rect = this.textEditNode.getBoundingClientRect()
|
||||
let rectInfo = {
|
||||
@@ -368,6 +370,38 @@ class RichText {
|
||||
this.lostStyle = false
|
||||
}
|
||||
})
|
||||
// 拦截粘贴，只允许粘贴纯文本
|
||||
this.quill.clipboard.addMatcher(Node.TEXT_NODE, (node) => {
|
||||
let style = this.getPasteTextStyle()
|
||||
return new Delta().insert(node.data, style)
|
||||
})
|
||||
this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
||||
let ops = []
|
||||
let style = this.getPasteTextStyle()
|
||||
delta.ops.forEach(op => {
|
||||
// 过滤出文本内容，过滤掉换行
|
||||
if (op.insert && typeof op.insert === 'string' && op.insert !== '\n') {
|
||||
ops.push({
|
||||
attributes: { ...style },
|
||||
insert: op.insert
|
||||
})
|
||||
}
|
||||
})
|
||||
delta.ops = ops
|
||||
return delta
|
||||
})
|
||||
}
|
||||
|
||||
// 获取粘贴的文本的样式
|
||||
getPasteTextStyle() {
|
||||
// 粘贴的数据使用当前光标位置处的文本样式
|
||||
if (this.pasteUseRange) {
|
||||
return this.quill.getFormat(
|
||||
this.pasteUseRange.index,
|
||||
this.pasteUseRange.length
|
||||
)
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
// 正则输入中文
|
||||
|
||||
BIN
web/src/assets/avatar/小米.jpg
Normal file
BIN
web/src/assets/avatar/小米.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
web/src/assets/avatar/棐.jpg
Normal file
BIN
web/src/assets/avatar/棐.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@@ -1,8 +1,46 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.17
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue of error reporting in the xmind file exported from Baidu Brain Map.
|
||||
>
|
||||
> 2.Fix the mindMap. export method code error.
|
||||
|
||||
New:
|
||||
|
||||
> 1.Create index.d.ts file。
|
||||
>
|
||||
> 2.Support configuration to enable double click reset mind map.
|
||||
>
|
||||
> 3.Intercept paste operations during rich text editing, remove formatting, and only allow pasting pure text.
|
||||
|
||||
## 0.6.16
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Optimize the logic of rich text measurement elements, remove duplicate settings for styles, and add duplicate nodes
|
||||
>
|
||||
> 2.Optimize the export image logic, and when traversing the node to convert the URL of the image, if it is already in the form of data: URL, do not handle it repeatedly.
|
||||
|
||||
New:
|
||||
|
||||
> 1.Remove the second parameter of the exported SVG method and configure it through instantiation instead.
|
||||
>
|
||||
> 2.Export images without using external libraries.
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Fixed a bug where siblings can be added to the root node when editing the outline separately.
|
||||
|
||||
## 0.6.15-fix.2
|
||||
|
||||
Fix: Fixed an issue where rich text nodes cannot be displayed in Firefox browser.
|
||||
|
||||
## 0.6.15-fix.1
|
||||
|
||||
新增：
|
||||
New:
|
||||
|
||||
> 1.Export PDF supports pagination export based on image size.
|
||||
>
|
||||
@@ -14,7 +52,7 @@
|
||||
>
|
||||
> 5.Supports passing error handling functions.
|
||||
|
||||
修复：
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue of displaying exceptions when node text is empty.
|
||||
>
|
||||
|
||||
@@ -1,8 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.17</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue of error reporting in the xmind file exported from Baidu Brain Map.</p>
|
||||
<p>2.Fix the mindMap. export method code error.</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Create index.d.ts file。</p>
|
||||
<p>2.Support configuration to enable double click reset mind map.</p>
|
||||
<p>3.Intercept paste operations during rich text editing, remove formatting, and only allow pasting pure text.</p>
|
||||
</blockquote>
|
||||
<h2>0.6.16</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Optimize the logic of rich text measurement elements, remove duplicate settings for styles, and add duplicate nodes</p>
|
||||
<p>2.Optimize the export image logic, and when traversing the node to convert the URL of the image, if it is already in the form of data: URL, do not handle it repeatedly.</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Remove the second parameter of the exported SVG method and configure it through instantiation instead.</p>
|
||||
<p>2.Export images without using external libraries.</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Fixed a bug where siblings can be added to the root node when editing the outline separately.</p>
|
||||
</blockquote>
|
||||
<h2>0.6.15-fix.2</h2>
|
||||
<p>Fix: Fixed an issue where rich text nodes cannot be displayed in Firefox browser.</p>
|
||||
<h2>0.6.15-fix.1</h2>
|
||||
<p>新增：</p>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Export PDF supports pagination export based on image size.</p>
|
||||
<p>2.Exporting PDF supports automatic direction adjustment based on aspect ratio.</p>
|
||||
@@ -10,7 +39,7 @@
|
||||
<p>4.Add a configuration that prohibits mouse wheel scaling.</p>
|
||||
<p>5.Supports passing error handling functions.</p>
|
||||
</blockquote>
|
||||
<p>修复：</p>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue of displaying exceptions when node text is empty.</p>
|
||||
<p>2.Change the paddingX and paddingY of exported SVG graphics to single sided padding.</p>
|
||||
|
||||
@@ -79,6 +79,8 @@ const mindMap = new MindMap({
|
||||
| customHandleClipboardText（v0.6.14+） | Function | null | Customize the processing of clipboard text. When pressing ctrl+v to paste, it will read the text and images from the user's clipboard. By default, it will only determine whether the text is regular text and node data in simple mind map format. If you want to process data from other mind maps, such as process, zhixi, etc., you can pass a function that takes the text from the current clipboard as a parameter and returns the processed data, which can be of two types: 1.If a pure text is returned, a child node will be directly created with that text; 2.Returns a node object in the following format: { simpleMindMap: true, data: { data: { text: '' }, children: [] } }, The representative is data in simple bind map format, and the node data is in the same format as the simple bind map node data. If your processing logic has asynchronous logic, you can also return a promise | |
|
||||
| errorHandler（v0.6.15+） | Function | | Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object | |
|
||||
| disableMouseWheelZoom（v0.6.15+） | Boolean | false | Prohibit mouse wheel scaling, you can still use the API for scaling | |
|
||||
| resetCss（v0.6.16+） | String | * { margin: 0; padding: 0; box-sizing: border-box; } | When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset | |
|
||||
| enableDblclickReset（v0.6.17+） | Boolean | true | Turn on the mouse and double-click to reset the position and zoom of the mind map | |
|
||||
|
||||
### Watermark config
|
||||
|
||||
|
||||
@@ -413,6 +413,20 @@
|
||||
<td>Prohibit mouse wheel scaling, you can still use the API for scaling</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>resetCss（v0.6.16+）</td>
|
||||
<td>String</td>
|
||||
<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
|
||||
<td>When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>enableDblclickReset（v0.6.17+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>Turn on the mouse and double-click to reset the position and zoom of the mind map</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Watermark config</h3>
|
||||
|
||||
@@ -52,7 +52,7 @@ Exports as `png`.
|
||||
|
||||
- `name`：`svg` title
|
||||
|
||||
- `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
|
||||
- `plusCssText`：v0.4.0+, （v0.6.16+This parameter has been removed and instead passed in through the `resetCss` configuration during instantiation）, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
|
||||
|
||||
```js
|
||||
svg(
|
||||
|
||||
@@ -46,7 +46,7 @@ a.click()
|
||||
<p><code>name</code>：<code>svg</code> title</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>plusCssText</code>：v0.4.0+, When node rich text editing is enabled and <code>domToImage</code> passes <code>false</code>, additional <code>css</code> styles can be added. If there is a <code>dom</code> node in <code>svg</code>, you can set some styles for the node through this parameter, such as:</p>
|
||||
<p><code>plusCssText</code>：v0.4.0+, （v0.6.16+This parameter has been removed and instead passed in through the <code>resetCss</code> configuration during instantiation）, When node rich text editing is enabled and <code>domToImage</code> passes <code>false</code>, additional <code>css</code> styles can be added. If there is a <code>dom</code> node in <code>svg</code>, you can set some styles for the node through this parameter, such as:</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre class="hljs"><code>svg(
|
||||
|
||||
@@ -102,9 +102,7 @@ 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.
|
||||
Normal operation: `360` extreme speed browser（v13.5.2036.0）、`opera` browser（v71.0.3770.284）、`Firefox`（v98.0.2）.
|
||||
|
||||
Unsupported: `IE` browser.
|
||||
|
||||
@@ -171,4 +169,19 @@ Open source is not easy. If this project is helpful to you, you can invite the a
|
||||
<img src="../../../../assets/avatar/才镇.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>才镇</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/小米.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>小米bbᯤ²ᴳ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/棐.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>*棐</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Luke</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,16 +8,16 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, and summaries</label></li>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, and watermarks</label></li>
|
||||
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox75" checked="true" /><label for="checkbox75">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox76" checked="true" /><label for="checkbox76">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox77" checked="true" /><label for="checkbox77">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox78" checked="true" /><label for="checkbox78">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, and summaries</label></li>
|
||||
<li><input type="checkbox" id="checkbox79" checked="true" /><label for="checkbox79">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox80" checked="true" /><label for="checkbox80">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox81" checked="true" /><label for="checkbox81">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox82" checked="true" /><label for="checkbox82">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox83" checked="true" /><label for="checkbox83">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, and watermarks</label></li>
|
||||
<li><input type="checkbox" id="checkbox84" checked="true" /><label for="checkbox84">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -27,16 +27,16 @@ frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
||||
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox85" checked="true" /><label for="checkbox85">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox86" checked="true" /><label for="checkbox86">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox87" checked="true" /><label for="checkbox87">Import and export functionality; data is saved in the browser's local</label>
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly</li>
|
||||
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox88" checked="true" /><label for="checkbox88">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox89" checked="true" /><label for="checkbox89">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map</li>
|
||||
</ul>
|
||||
@@ -69,8 +69,7 @@ full screen, support mini map</li>
|
||||
<h2>Browser Compatibility</h2>
|
||||
<p>We recommend using the latest version of the <code>Chrome</code> browser.</p>
|
||||
<p>Limited testing situation:</p>
|
||||
<p>Normal operation: <code>360</code> extreme speed browser（v13.5.2036.0）、<code>opera</code> browser（v71.0.3770.284）。</p>
|
||||
<p>Abnormal operation: <code>Firefox</code>（v98.0.2）, Node content cannot be displayed in rich text mode. If you want to support the <code>Firefox</code> browser, please use non rich text mode.</p>
|
||||
<p>Normal operation: <code>360</code> extreme speed browser（v13.5.2036.0）、<code>opera</code> browser（v71.0.3770.284）、<code>Firefox</code>（v98.0.2）.</p>
|
||||
<p>Unsupported: <code>IE</code> browser.</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
@@ -130,6 +129,20 @@ full screen, support mini map</li>
|
||||
<img src="../../../../assets/avatar/才镇.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>才镇</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/小米.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>小米bbᯤ²ᴳ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/棐.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>*棐</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Luke</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,43 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.17
|
||||
|
||||
修复：
|
||||
|
||||
> 1.修复导入百度脑图导出的xmind文件报错的问题。
|
||||
>
|
||||
> 2.修复mindMap.export方法代码错误。
|
||||
|
||||
新增：
|
||||
|
||||
> 1.新增index.d.ts。
|
||||
>
|
||||
> 2.支持配置是否开启双击复位思维导图。
|
||||
>
|
||||
> 3.拦截富文本编辑时的粘贴操作，去掉格式，只允许粘贴纯文本。
|
||||
|
||||
## 0.6.16
|
||||
|
||||
修复：
|
||||
|
||||
> 1.优化富文本测量元素的逻辑，删除样式的重复设置和节点的重复添加。
|
||||
>
|
||||
> 2.优化导出图片逻辑，遍历节点转换图片的url时，如果已经是data:URL形式不重复处理。
|
||||
|
||||
新增：
|
||||
|
||||
> 1.去除导出svg方法的第二个参数，改为通过实例化配置。
|
||||
>
|
||||
> 2.导出图片不再使用外部库。
|
||||
|
||||
Demo：
|
||||
|
||||
> 1.修复单独编辑大纲时能给根节点添加兄弟节点的bug。
|
||||
|
||||
## 0.6.15-fix.2
|
||||
|
||||
修复：修复在Firefox浏览器中富文本节点无法显示的问题。
|
||||
|
||||
## 0.6.15-fix.1
|
||||
|
||||
新增：
|
||||
|
||||
@@ -1,6 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.17</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.修复导入百度脑图导出的xmind文件报错的问题。</p>
|
||||
<p>2.修复mindMap.export方法代码错误。</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.新增index.d.ts。</p>
|
||||
<p>2.支持配置是否开启双击复位思维导图。</p>
|
||||
<p>3.拦截富文本编辑时的粘贴操作，去掉格式，只允许粘贴纯文本。</p>
|
||||
</blockquote>
|
||||
<h2>0.6.16</h2>
|
||||
<p>修复：</p>
|
||||
<blockquote>
|
||||
<p>1.优化富文本测量元素的逻辑，删除样式的重复设置和节点的重复添加。</p>
|
||||
<p>2.优化导出图片逻辑，遍历节点转换图片的url时，如果已经是data:URL形式不重复处理。</p>
|
||||
</blockquote>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
<p>1.去除导出svg方法的第二个参数，改为通过实例化配置。</p>
|
||||
<p>2.导出图片不再使用外部库。</p>
|
||||
</blockquote>
|
||||
<p>Demo：</p>
|
||||
<blockquote>
|
||||
<p>1.修复单独编辑大纲时能给根节点添加兄弟节点的bug。</p>
|
||||
</blockquote>
|
||||
<h2>0.6.15-fix.2</h2>
|
||||
<p>修复：修复在Firefox浏览器中富文本节点无法显示的问题。</p>
|
||||
<h2>0.6.15-fix.1</h2>
|
||||
<p>新增：</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -79,6 +79,8 @@ const mindMap = new MindMap({
|
||||
| customHandleClipboardText（v0.6.14+） | Function | null | 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：1.返回一个纯文本，那么会直接以该文本创建一个子节点；2.返回一个节点对象，格式如下：{ simpleMindMap: true, data: { data: { text: '' }, children: [] } }，代表是simple-mind-map格式的数据，节点数据同simple-mind-map节点数据格式，如果你的处理逻辑存在异步逻辑，也可以返回一个promise | |
|
||||
| errorHandler（v0.6.15+） | Function | | 自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象 | |
|
||||
| disableMouseWheelZoom（v0.6.15+） | Boolean | false | 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放 | |
|
||||
| resetCss（v0.6.16+） | String | * { margin: 0; padding: 0; box-sizing: border-box; } | 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 | |
|
||||
| enableDblclickReset（v0.6.17+） | Boolean | true | 开启鼠标双击复位思维导图位置及缩放 | |
|
||||
|
||||
### 水印配置
|
||||
|
||||
|
||||
@@ -413,6 +413,20 @@
|
||||
<td>禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>resetCss（v0.6.16+）</td>
|
||||
<td>String</td>
|
||||
<td>* { margin: 0; padding: 0; box-sizing: border-box; }</td>
|
||||
<td>设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>enableDblclickReset（v0.6.17+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>开启鼠标双击复位思维导图位置及缩放</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>水印配置</h3>
|
||||
|
||||
@@ -72,6 +72,8 @@ mindMap.export(type, isDownload, fileName, plusCssText = '')
|
||||
|
||||
如果开启了节点富文本编辑，也就是`svg`中会存在节点的`html`结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是`margin`和`padding`，这就有可能会导致节点中的文字错位，所以可以通过`plusCssText`参数传入`css`样式：
|
||||
|
||||
> 在v0.6.16+版本后，plusCssText参数已被删除，改为在实例化时通过`resetCss`配置传入。
|
||||
|
||||
```js
|
||||
mindMap.export(
|
||||
'svg',
|
||||
|
||||
@@ -46,6 +46,9 @@ mindMap.export(<span class="hljs-string">'pdf'</span>, <span class="hl
|
||||
<pre class="hljs"><code>mindMap.export(type, isDownload, fileName, plusCssText = <span class="hljs-string">''</span>)
|
||||
</code></pre>
|
||||
<p>如果开启了节点富文本编辑，也就是<code>svg</code>中会存在节点的<code>html</code>结构，这就又存在一个问题，因为浏览器对每个元素默认会设置一些样式，影响最大的就是<code>margin</code>和<code>padding</code>，这就有可能会导致节点中的文字错位，所以可以通过<code>plusCssText</code>参数传入<code>css</code>样式：</p>
|
||||
<blockquote>
|
||||
<p>在v0.6.16+版本后，plusCssText参数已被删除，改为在实例化时通过<code>resetCss</code>配置传入。</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>mindMap.export(
|
||||
<span class="hljs-string">'svg'</span>,
|
||||
<span class="hljs-literal">true</span>,
|
||||
|
||||
@@ -52,7 +52,7 @@ a.click()
|
||||
|
||||
- `name`：`svg`标题
|
||||
|
||||
- `plusCssText`：v0.4.0+，当开启了节点富文本编辑，且`domToImage`传了`false`时，可以添加附加的`css`样式，如果`svg`中存在`dom`节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
|
||||
- `plusCssText`：v0.4.0+，（v0.6.16+已去除该参数，改为在实例化时通过`resetCss`配置传入），当开启了节点富文本编辑，且`domToImage`传了`false`时，可以添加附加的`css`样式，如果`svg`中存在`dom`节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
|
||||
|
||||
```js
|
||||
svg(
|
||||
|
||||
@@ -46,7 +46,7 @@ a.click()
|
||||
<p><code>name</code>：<code>svg</code>标题</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>plusCssText</code>：v0.4.0+，当开启了节点富文本编辑，且<code>domToImage</code>传了<code>false</code>时，可以添加附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：</p>
|
||||
<p><code>plusCssText</code>：v0.4.0+，（v0.6.16+已去除该参数，改为在实例化时通过<code>resetCss</code>配置传入），当开启了节点富文本编辑，且<code>domToImage</code>传了<code>false</code>时，可以添加附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：</p>
|
||||
</li>
|
||||
</ul>
|
||||
<pre class="hljs"><code>svg(
|
||||
|
||||
@@ -93,9 +93,7 @@
|
||||
|
||||
有限测试情况：
|
||||
|
||||
正常运行：`360`极速浏览器（v13.5.2036.0）、`opera`浏览器（v71.0.3770.284）。
|
||||
|
||||
非正常运行：`Firefox`（v98.0.2），富文本模式下节点内容无法显示，如果要支持`Firefox`浏览器，请使用非富文本模式。
|
||||
正常运行：`360`极速浏览器（v13.5.2036.0）、`opera`浏览器（v71.0.3770.284）、`Firefox`（v98.0.2）。
|
||||
|
||||
不支持：`IE`浏览器。
|
||||
|
||||
@@ -109,13 +107,13 @@
|
||||
|
||||
> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
|
||||
|
||||
> 转账请备注【思维导图】。你的头像和名字将会出现在下面。
|
||||
> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。你的头像和名字将会出现在下面。
|
||||
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Think</p>
|
||||
@@ -164,4 +162,19 @@
|
||||
<img src="../../../../assets/avatar/才镇.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>才镇</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/小米.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>小米bbᯤ²ᴳ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/棐.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>*棐</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Luke</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,16 +8,16 @@
|
||||
</blockquote>
|
||||
<h2>特性</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">支持画布拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">支持快捷键、前进后退、关联线、搜索替换、小地图、水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">提供丰富的配置，满足各种场景各种使用习惯</label></li>
|
||||
<li><input type="checkbox" id="checkbox90" checked="true" /><label for="checkbox90">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox91" checked="true" /><label for="checkbox91">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox92" checked="true" /><label for="checkbox92">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox93" checked="true" /><label for="checkbox93">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox94" checked="true" /><label for="checkbox94">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
|
||||
<li><input type="checkbox" id="checkbox95" checked="true" /><label for="checkbox95">支持画布拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox96" checked="true" /><label for="checkbox96">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox97" checked="true" /><label for="checkbox97">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox98" checked="true" /><label for="checkbox98">支持快捷键、前进后退、关联线、搜索替换、小地图、水印</label></li>
|
||||
<li><input type="checkbox" id="checkbox99" checked="true" /><label for="checkbox99">提供丰富的配置，满足各种场景各种使用习惯</label></li>
|
||||
</ul>
|
||||
<h2>仓库目录介绍</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -25,11 +25,11 @@
|
||||
<p>2.<code>web</code></p>
|
||||
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
<li><input type="checkbox" id="checkbox100" checked="true" /><label for="checkbox100">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox101" checked="true" /><label for="checkbox101">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
|
||||
<li><input type="checkbox" id="checkbox102" checked="true" /><label for="checkbox102">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
|
||||
<li><input type="checkbox" id="checkbox103" checked="true" /><label for="checkbox103">右键菜单，支持展开、收起、整理布局等操作</label></li>
|
||||
<li><input type="checkbox" id="checkbox104" checked="true" /><label for="checkbox104">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
|
||||
</ul>
|
||||
<p>提供文档页面服务。</p>
|
||||
<p>3.<code>dist</code></p>
|
||||
@@ -60,8 +60,7 @@
|
||||
<h2>浏览器兼容性</h2>
|
||||
<p>推荐使用最新版<code>chrome</code>浏览器。</p>
|
||||
<p>有限测试情况：</p>
|
||||
<p>正常运行：<code>360</code>极速浏览器（v13.5.2036.0）、<code>opera</code>浏览器（v71.0.3770.284）。</p>
|
||||
<p>非正常运行：<code>Firefox</code>（v98.0.2），富文本模式下节点内容无法显示，如果要支持<code>Firefox</code>浏览器，请使用非富文本模式。</p>
|
||||
<p>正常运行：<code>360</code>极速浏览器（v13.5.2036.0）、<code>opera</code>浏览器（v71.0.3770.284）、<code>Firefox</code>（v98.0.2）。</p>
|
||||
<p>不支持：<code>IE</code>浏览器。</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
@@ -71,11 +70,11 @@
|
||||
<p>厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>转账请备注【思维导图】。你的头像和名字将会出现在下面。</p>
|
||||
<p>推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。你的头像和名字将会出现在下面。</p>
|
||||
</blockquote>
|
||||
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
|
||||
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Think</p>
|
||||
@@ -124,6 +123,20 @@
|
||||
<img src="../../../../assets/avatar/才镇.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>才镇</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/小米.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>小米bbᯤ²ᴳ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/棐.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>*棐</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>Luke</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -169,6 +169,9 @@ export default {
|
||||
}
|
||||
if (e.keyCode === 13 && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
if (node.data.root) {
|
||||
return
|
||||
}
|
||||
this.$refs.tree.insertAfter(data, node)
|
||||
}
|
||||
if (e.keyCode === 9) {
|
||||
|
||||
Reference in New Issue
Block a user